mydlink 智慧家庭

mydlink 是 D-Link 的智慧家庭 App，有 iOS、Android 和 Web。團隊是 2 位 UX、2 位 UI 設計師，我是其中一位 UI，負責介面、狀態元件和視覺系統。

插座只有開和關；感測器是某個時間發生的事件；攝影機則同時有即時畫面、錄影、儲存方案、權限。每多一種裝置，就多一套畫面。

最直覺的做法是做一張共用的裝置卡，但那只換到外觀一致：攝影機一要講插座講不出來的事，這張卡就不夠用了。

所以我們改成統一「狀態」。不管哪一種裝置，都只有五種狀態：已找到、連線中、已命名、運作中、連不上。新裝置只要說出自己在哪個狀態，介面就知道怎麼顯示，不用再做一套畫面。

我們看了 Google Home、Apple Home、TP-Link Tapo。三家的共同點：一打開就看得到家裡現在的狀況、裝置靠圖像辨認而不是名字、操作步驟少而且馬上有回饋。

我們請家裡有這類產品、沒有技術背景的人做三個任務：查看裝置狀態、開關一台裝置、發現異常並處理。最常出現三件事：

首頁不再是一份裝置清單。有三種主題，由上往下這樣排：

傳統設定要使用者自己去找裝置開出來的網路，很多人切出去就回不來。改成 App 用藍牙（BLE）主動找到裝置，接著把連 Wi-Fi、命名、啟用串成一段引導。使用者從頭到尾不需要知道中間切換過網路。

情境把好幾個裝置動作包成一鍵。自動化可以依時間、事件、地點設定；Geofencing 讓你到家或離家時自動執行。

付費流程經過大家多次討論，方向由 PM 決定，我們負責提出解法。一共有六個方案，但第一屏只放一個價格和一顆主要按鈕：

通知帶縮圖和操作按鈕，不用打開 App 就能處理。AI 偵測可以直接在攝影機畫面上圈出你在意的範圍。

那段時間新舊兩套 Web 系統並存，有些機型只能用舊版，但使用者不知道自己屬於哪一邊。所以兩個網站最上面都放了往另一邊的入口，不讓人猜錯站、登入失敗。

中性灰撐住版面、科技藍負責識別，只有狀態色是高飽和的，所以一個紅點才有意義。每個狀態都同時用顏色、圖示和文字表示，色票照 WCAG AA 對比度調過一輪。

其他團隊開始拿這些元件做東西。 工程、PM 和其他設計師都把這套元件拉進自己的工作裡。一套元件庫會被採用，是因為用它比繞過它快。

把顏色之爭改成「給誰用」的問題。 老闆希望 mydlink 跟 AQUILA 用同一套色系。我沒有去爭哪個顏色好看，而是指出兩個產品賣給不同的人：AQUILA 的買家自己挑路由器；mydlink 的買家只想在玄關裝一台攝影機。最後兩個產品還是用同一套色系，顏色則針對無障礙重新調過。但這個做法我後來一直在用：被講成喜好的決定，就改問「這是給誰用的」。

D-Link 官方也用這套介面拍了教學影片：