mydlink 智慧家庭

同一個 App 要裝下攝影機、智慧插座和感測器，而每一類都帶著自己的邏輯進來。插座是一個狀態：開或關。感測器是一個事件：某件事在某個時間發生了。攝影機兩者都不是 —— 它是即時畫面、錄影紀錄、儲存方案、權限設定、位移偵測靈敏度，全部同時成立、也全部都想出現在畫面上。

攝影機是最難的那一類，而且差距很大。其他裝置推進共用的形狀裡，損失有限；攝影機推不動，因為它要講的事不是正在發生，就是關於已經發生過的事的證據，而這兩種需要的空間不一樣。

而失敗的樣子在產品線上已經看得到了：裝置種類越多，這個 App 就越像好幾個共用一組帳號的產品 —— 每新增一個品類就多一套畫面，家裡有三種裝置的人，就得學三種判讀「這東西到底有沒有在運作」的方式。

看的是使用者真的會拿來比較的三個平台：Google Home、Apple Home、TP-Link Tapo。歸納出四件事 —— 以 Dashboard 為主的管理方式，重要狀態直接放在打開就看到的那一屏；中性灰階加上一個科技藍；裝置的識別靠圖像而不是名字；操作流程走少步驟、即時回饋。

這四件事放在一起看是同一個觀察：競爭已經不在功能表上，而在打開 App 的前幾秒 —— 你有沒有辦法在還沒點任何東西之前，就知道家裡現在怎麼樣。

所以它們各自變成一個決定，而不是一面情緒板。Dashboard 為主，決定了首頁不再是一份裝置清單。中性色加科技藍，決定了畫面上只有狀態色是高飽和的，其他全部退到後面。圖像化識別，決定了每一類裝置不看名字也要認得出來。少步驟即時回饋，決定了設定流程要自己用 BLE 去找裝置，而不是把使用者派出去找一個網路。

測試是任務導向的，找的是家裡真的有這類產品、但沒有技術背景的一般使用者：查看某個裝置現在的狀態、快速開關一個裝置、發現異常並做出反應。不提示該點哪裡。

這次測試留下的是質性觀察，不是一張完成率的表 —— 這件事我現在會做得不一樣。但有三件事出現得夠頻繁，足以拿來改設計：使用者靠顏色和圖示判斷狀態，順序在文字標籤和版面之前；清楚的裝置分類，明顯縮短找東西的時間；以及即時回饋 —— 狀態切換那一下的小動畫 —— 會讓人相信剛剛那一下有效。

從這三件事推出來的三個調整，沒有一個是新功能，都是讓已經在畫面上的東西更容易被讀懂。

最直覺的做法是畫一張裝置卡，然後讓所有東西都住進去。那換到的是視覺一致，其他不多 —— 攝影機一旦要講插座講不出來的事，這張卡不是長出特例，就是攝影機自己另開一頁，然後你就回到原點了。

真正承重的，是先把一台裝置可能處於哪些狀態講定，而且跟它是哪一種裝置無關：已找到、連線中、已命名、運作中、連不上。所有產品都講這一組之後，新增一種裝置就不需要新增一套介面 —— 它只需要說出自己現在在哪個狀態，介面本來就知道那要怎麼講。

安裝流程是同一個想法回報最明顯的地方。傳統硬體設定會要使用者自己去找裝置開出來的那個網路，而那正好是最多人卡住、走出去就回不來的一步。這裡改成 App 用 BLE 主動搜尋、自己找到裝置，接著把連上 Wi-Fi、命名、啟用串成一段引導流程走完。使用者從頭到尾不需要知道中間發生過一次網路切換。 這不是便利功能 —— 這是「產品自己裝得起來」和「買的人得先有資格才裝得起來」之間的差別。

網頁那邊還有另一種流程問題，跟裝置無關，跟使用者手上買的是哪一代機型有關。那段時間新舊兩套 Web 系統是並存的 —— 有些機型只跑得動舊的，新機型走新的，而使用者不會知道自己屬於哪一邊，他只知道自己有一台 D-Link 的攝影機。這種情況最糟的處理方式，是讓他自己猜，然後在錯的站台登入失敗。

所以兩邊都放了一個往對面走的入口：新站上問「要去舊版嗎」，舊站上問「要去新版嗎」，按鈕就在最上面那一條。並存不是過渡期的例外狀態，它就是那段時間的常態 —— 既然是常態，那條切換列就該長在版面裡，而不是塞在說明頁裡當公告。

最難說服的是老闆，題目是色系。要求是把 mydlink 跟 AQUILA 統一 —— 一家公司、一個色彩方向。單看這句話，那就是品牌紀律，抽象地講很難反對。

所以我不在抽象層次上爭。這兩個產品不是賣給同一個人。 AQUILA 的買家是自己選了路由器的人；mydlink 是 consumer product，買它的是想在玄關裝一台攝影機、而且從來不覺得自己在「經營一個網路」的家庭。把兩邊的色系統一，統一不了品牌 —— 它只是把技術性比較強的那個產品的姿態，搬到技術性比較弱的受眾面前。

這是這個案子裡最值得留下來的一招，後來在另一場爭論裡我又用了一次：一個決定如果被講成偏好，就只能用偏好回應。 把它改寫成「這個產品是給誰用的」，它才變成兩個人真的有辦法收斂的問題。

下面這幾張是那套判斷落在畫面上的樣子。共通點是：每一張都在回答「現在是什麼狀況」，而不是「你可以設定什麼」。

雲端錄影一共有六個方案。第一屏只給你看一個。

進到雲端錄影，畫面上只有一個價格 —— 每月 $4.99 —— 和一顆主要按鈕：Try It。「See All Plans」放在下面，次要的份量。這比在六張卡裡標一個「推薦」badge 強得多。badge 說的是這六個裡我建議這個，你還是得比六個東西；這個做法說的是你就用這個，除非你真的想比較 —— 而大部分人並不想。

同一段流程裡還有兩個決定。選哪個方案、跟怎麼付錢，是兩個問題，所以付費週期排在選完之後、自己一屏，而 Yearly 上掛著整段流程唯一一個「省超過 15%」的標記。一次問一件事，而那個推力出現在它真正相關的時刻，不必跟另外五個價格擠在一起。

還有一件事：App 裡的方案列表根本沒有免費版 —— 網頁的價目表有。會在 App 裡打開這一屏的人，已經在考慮付錢了；這時候把免費版擺到他面前，多半只是遞給他一個停下來的理由。網頁是給還在評估的人看的，App 是給已經在用的人看的，同樣六個方案在兩個地方的排法本來就不該一樣。

視覺系統只有一個任務：承載大量資訊，而且不跟資訊搶。中性灰負責撐住版面，科技藍負責識別，狀態色是畫面上唯一的高飽和訊號 —— 正因為這樣，一個紅點才有意義。

狀態從來不只靠顏色。每一個狀態都是顏色加圖示加文字，這既是無障礙的要求，也是讓「綠色」不必在兩種裝置上代表兩件事的原因。對比度我照 WCAG AA 走過一遍，沒過的色票重新調過。

真正讓我覺得有做到事情的是後面：工程、PM 和其他設計師開始把這些元件拉進他們自己的工作裡。一套元件庫會被採用，是因為用它比繞過它快 —— 這件事在這裡發生了。也正因為發生了，我接下來沒有做的那件事才更可惜（見下一章）。

改變了什麼，用我站得住的講法：App 相關的客服問題明顯變少 —— 剩下的多半是硬體問題，而那是比較該剩下的那一種。業務 demo 變順了，因為現在可以一個畫面把整個家秀出來，不用一邊點裝置清單一邊解釋。工程、PM 和其他設計師開始拿我的元件做東西。

沒有改版前後的數字。我當時沒有建立量測的方式，現在也不打算為了讓這頁好看一點，回頭湊出幾個百分比。

真正的教訓是我沒有繼續做下去的那件事。 我交出一套 Figma 元件庫，然後就當它完成了。我沒有把規則寫下來，也沒有跟工程端坐下來定義 token —— 所以那套元件庫的壽命，剛好等於還記得它怎麼運作的那群人待在公司的時間。人一換，它就散了，同樣的狀態開始在不同地方被重做成有點不一樣的樣子。

元件庫是一個產物；讓它變成系統的是寫下來的規則和講好的 token，而那兩樣才是交接之後還活著的部分。現在我做設計系統，這是第一件先處理的事，早於畫任何一個元件。