IoT智慧系統的用戶界面設計流程／Siyi Wu
這個專案主要是為一個智慧建築管理系統，進行數位控制面板UI/UX的設計。下面的流程包含了我們在這個專案中執行完畢的項目，以及期待改善的項目。
[embed]https://medium.com/@smokingtuna/siyi-wu-1fd9ef9ed62d[/embed]
用戶體驗前期研究與設計
思考使用者x裝置x環境的交互作用，訂定體驗設計目標。
對裝置而言，連結空間系統的包含電腦、平板、智慧手機，每一種裝置承載的功能不同。我們需要探討使用者在活動期間，裝置與裝置間的關係是輔助或互補，以及人在空間中的行為等等。例如使用情境、使用模式是靜止或可移動、注意力高低、使用時間長度和頻率、權限、互動內容等，裝置本身的限制和軟硬體特點也是考量的因素。
介面的操作流程也需符合使用者在現實生活中的習慣。比方說，人在空間中的行為順序是：尋找空間>進入空間>感受環境>尋找裝置>控制裝置參數，介面的操作也盡可能比照現實。
這裡我嘗試使用「訪談」及「使用者旅程地圖」來分析人在空間中的活動路徑，針對每一個接觸點產生的互動、問題、及需求發想解決方案。
功能架構規劃
探討完使用者行為後，使用XMind或Coggle繪製心智圖，與設計師、工程師、PM等團隊成員一同發想，找出達成體驗設計目標所需的技術或功能。
實際的狀況是，設計師的構想適時地與現有技術妥協，必須在考量系統可行性、穩定性、建置成本、建置時間、商業策略、擴充可能性等因素，與體驗規劃取得平衡；設計師也可自行研究軟硬體功能，深入了解服務對應的技術，畢竟東西要做的出來才有價值。
使用流程規劃
功能架構圖擬定後，針對各種功能安排操作路徑，依照狀態>身份>選擇>操作，依序規劃。這部份需與工程師確認技術能否負荷設計要求，避免後續線框完稿後因技術問題而再三修改。
線框圖
根據使用流程依序編號，對應到每頁的線框圖稿，這部份大約會經過三到五次的修改。從簡單的紙筆白板討論開始，大致確認後使用Keynote製作較精緻的線框，以確認所需要擺放的元件項目、元件位置、還有頁面間的階層關係等等。
如果系統功能可能擴充的話，例如在選單中新增項目，規劃時就要預留擴充用的空間。
互動設計
這裡指的是元件與頁面的轉場動畫和觸發方式，尤以資訊圖表設計為重點。我們在互動資訊圖表上花了不少時間，主要因為設計時要考量的地方很多：
資料的項目：資訊項目需對使用者完成任務有幫助，避免裝飾性的無用資訊。
資料呈現方式：純數據、圖表、地圖等。
資訊出現時機：逐步或是同步。
操控面板型態：點、線性或二維。
參數控制鈕的操作方式：分段或無段、點按、長按或拖曳等等。
這些都需要進行多次的測試，才能確保使用者能有效利用圖表獲得精準的資訊，進一步促使某些行為發生。而各裝置介面間，顯示及操作邏輯也需保持一致性，更應釐清各裝置間被賦予的任務是輔助或互補性質，確保使用者在使用裝置時能夠流暢的完成任務。
另外在設計過程中，也需適時與前後端的程式設計師頻繁溝通，確認頁面互動方式無誤，因為部分效果會涉及後端的資料庫讀取、影響連線和載入速度，此外也應注意設計是否遵循當地法律規範等各種細節。
原型製作及使用性測試
原型可用傳統的紙模型或Pop、Invision這類的線上工具，讓使用者在場域中實際操作，觀察其行為及使用過程產生的問題，或是訪談使用者以獲得更深層的情感資訊。
測試後的問題回到線框稿修改，不斷反覆測試，直到使用者能輕鬆快速的透過介面完成任務。
精描稿
線框稿大致底定後，即可著手訂定設計規範，內容包括版面中各元件的風格、尺寸、色彩、陰影等等；不同的操作狀態(normal, hover, focus, active..)可有不同的視覺形態。我通常會在mockup前期先用Adobe Illustrator整理好屬於該專案的UI Kit，包含所有出現的按鈕、圖標、控制項、顯示項等等，因某些元件會重複出現在不同頁面上，透過整理好的UI Kit資料庫，就能在設計各頁面時快速選用元件，讓接下來切圖和整理圖庫更快速。像這樣把品牌的風格大致定好後，這套UI Kit就能直接套用到後續的系列產品，不需重新編輯。
標示文件、切圖
對設計師來說，最後一個步驟就是將繪製好的精描圖編上編號、寫好標示文件，然後交接給前端程式設計師。目前我們的作法是與前端共用Google Drive來儲存介面圖庫，在不更改檔名的狀況下可隨時抽換圖片，前端只需重新整理資料夾或覆蓋檔案即可。後來有朋友介紹Sketch和Zeplin，直接把標示的工時也省下了。
以這個專案來說，前後大約花了3個月時間進行設計，也出過不少錯誤，累積了許多寶貴經驗。希望這樣的流程能對大家有參考價值。
本文已獲作者授權並經本站重新編輯，未經書面許可禁止轉載。本站文章提供付費授權轉載或出版，請參閱授權說明、或來信 ask@tuna.to 洽詢。如果您喜歡這篇文章，請多按下方的「拍手」圖像幾次、或是分享到社群網站上！