【UI】UI 設計與交付
講師：黃翎 Lynn
本周社課邀請到 UI/UX 設計師 Lynn 來和我們分享她在 UI 設計領域的豐富經驗，如果對 Design System 對於品牌的影響、元件設計的考量因素、易用性原則有興趣的話，就一起往下看吧！
講師介紹
Lynn 來自視覺設計背景，擅長從設計思考到執行，透過使用者研究，探索易用性與體驗的最佳解。認為「設計師是第一批接觸未來的人」，因此對於推測設計、AI 應用和未來科技趨勢深感興趣，進而創立「空想科研」Podcast 喚起人們的好奇心，推廣有趣的科普知識。過去曾在設計顧問公司「AJA 大予創意」經歷多元的產品與產業類別，也曾與團隊一同打造台新 Richart 數位銀行的介面設計與插畫系統。
文章目錄
一、Design System 對品牌表現（Brand Expression）的影響
二、元件（Component）設計的考量因素
三、四個易用性原則
四、UI 設計工作坊一、Design System 對品牌表現（Brand Expression）的影響
一開始 Lynn 和我們分享了她過去進行 2C 的 App 設計案時，對於 Brand Guideline 和 Design System 的新見解：
Design System 不僅能應用在介面設計，更可以整合品牌的視覺識別（Integrate all the designs into a cohesive family look.）
有設計背景的讀者應該對 Brand Guideline 和 Design System 不陌生。Brand Guideline 主要用於社群發文或平面宣傳；Design System 用於數位產品的設計。在 Lynn 參與的專案裡，客戶所提供的 Brand Guideline 由於缺乏對互動元件的顏色定義以及回應式設計尺寸的規範等，因此無法直接應用在數位產品上。此時，需要 UI/UX 設計師本持著對品牌的理解，延伸發展出適用於數位環境的 Design System。
Lynn 提到雖然她最初只是負責建立品牌底下數位產品的 Design System，但後來她發現業主也將當中的元素應用在社群貼文的設計上，間接影響了 Brand Guideline 原有的內容。而這麼做不僅讓品牌整體的風格更一致，也更加適應數位原生時代的廣告需求。
回到目錄二、元件設計的考量因素
在設計元件時，需要考量：
工程可行性（Engineering Feasibility）
目前設計在進入程式實作階段後是不是可行、怎麼做比較符合背後的邏輯。
產品的未來成長（Product Scalability）
「沒有好的設計，只有適合的設計」，且適合的定義也會隨著產品的成長而改變。在設計有多個狀態的元件時，模組化可以提升設計系統的效率，並在未來進行變更或新增時更加方便。
這邊 Lynn 也和我們分享他的做法：首先將所有可能的狀態以表格形式列出，然後從最複雜（可以呈現所有資訊）的狀態開始設計。在這個過程中，她會提出不同的設計版本並進行迭代。最後再從完稿逆向推導，以有邏輯的方式呈現細部元件。在交付時，則同樣以表格形式呈現，方便工程師對照。
三、四個易用性原則
Lynn 提到四個與易用性相關的原則：
提高產品的實用性（Useful），操作感更直覺（Usable），讓各種文化背景、年齡、體能狀況的使用者（Accessible），都得以舒適愉快地完成目標（Desirable）。
Useful（有用的）
確定產品能為使用者帶來價值：
- 了解產品的結構和關鍵使用目的，針對目的進行優化，讓產品更實用。
- 保證使用者在每一步都清楚現是當前狀態，賦予使用者掌握感。
Usable（可用的）
要讓使用者能直觀、有效率的操作、完成任務，除了運用視覺的相似，也可以參考文化經驗，延伸使用者熟悉場境和經驗，像是電腦「桌面」的概念其實啟發自真實的寫字桌。而應用得當的文化經驗，通常不會被使用者注意到。
Accessible（通用的）
考慮多元族群的使用者，使產品適用不同能力和背景的人，這邊以顏色的使用舉例：紅色的警告色弱可能看不出來，可以增加文字說明。
Desirable（愉悅的）
使用起來很愉悅、吸引人的設計。吸引力可以受到美學、品牌、個性和情感設計等因素的影響。
四、UI 設計工作坊
在社課最後 Lynn 帶我們進行了 UI 設計工作坊：
第一個階段是 Bad UI 挑戰
透過設計難用的 Time picker，讓大家體驗反向思考。在國外平台有許多討論跟設計 Bad UI 的活動和比賽，這樣的挑戰可以幫助跳脱對於頁面和元件的外觀、使用方式、思考邏輯。在實作上要讓 UI 又有趣又難用，其實很具挑戰性，過程中很容易被學習過的框架綁住，要想到第三、四張圖才會有一點感覺。
*Bad UI 體驗網站：https://mattw.io/bad-ui/第二階段則是設計記帳 App 主頁的挑戰
題目中給予 Marketing、Product Owner 兩邊不同的需求及觀點，讓大家作為設計團隊的角度進行思考與設計：
- 在設計探索前，想推動哪一個方案？
- 在參考網路資源、發展頁面和元件後，有哪些發現？
- 發展完後，對首頁方案的想法有改變嗎？
與團隊一起設計頁面，對每一步都提出思考，避免只依賴設計師的直覺與經驗設計 UI。因為設計必須包含理由，對於 UI 初學者來說，能夠慢慢體會好的 UI 不是只有好看的排版，更重要的是其為使用者帶來的價值。
回到目錄