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 洽詢。如果您喜歡這篇文章,請多按下方的「拍手」圖像幾次、或是分享到社群網站上!