今天來到了第28天，經過前面的流程後，我們今天要來進行更詳細的設計流程了！昨天已經製作了低擬真線框圖（Low-fidelity），接著與大家分享設計高擬真線框圖的流程。

製作MoodBoard情緒版-制定產品的版面的色彩、字體、風格
風格可以用MoodBoard（情緒版）來做整理，將想要呈現的風格想法的素材拼貼整理成一張MoodBoard，再從中去收斂出要呈現的風格（例如：溫馨、活力、科技感），設計的內部含意（包含產品的動機、主題），接著再去思考整體的配色及字體的種類。

Design System 設計系統
一個APP的各介面元件需要統一風格與設計原則，許多APP上的元件會重複使用，且同一家公司的產品視覺風格元素會統一，優點是：一來是這樣能夠符合品牌的形象，二來則是能讓產品開發的流程更加有效率，所以會有一個屬於公司的Design System。

範例：

1. Adobe的Design System
   https://spectrum.adobe.com/

2. Microsoft的Design System

https://www.microsoft.com/design/fluent/#/

3. Line的Design System
   https://designsystem.line.me/

設計component元件
在UI設計的過程我們需要思考，使用APP時這個特效或是動畫是必要的嗎？要站在使用者的角度想想，這樣的畫面是否會造成操作時視覺的干擾，或者只是很酷炫的畫面，但是對於工程師製作非常耗時，不符合成本考量等問題。

此外，在我們設計產品的過程也可以依照Grid系統或是Column系統（格線）幫助整體的版面更加整齊，且工程師也能夠更有效率的製作。

Design Guideline設計規範
在設計流程也推薦大家能夠閱讀Design Guideline，該網站上會有關於介面的開發規範，給予設計師與工程師製作時能夠遵循的原則，設計師也能夠參考規範來設計出畫面。我們專案的設計規範製作完成也會畫出本專案使用的色彩、字體（大小）、各元件的樣式（按鈕、輸入框、卡片、下拉式選單等等）。

1. Material Design Guideline（Google的）
   https://material.io/design
2. IOS Design Guide（Apple的）
   https://developer.apple.com/design/

高擬真線框圖 High-fidelity Wireframe
低擬真線框圖討論完畢後，將會進行更細緻的高擬真線框圖，看起來就像是真的APP，準備使用prototype將他們連動成可以互動的模型。

今日心得：

1. 本來是要每天理論搭配實作的，但發現要釐清這些名詞就需要花太多的時間，於是我決定不如就全心把理論部分讀懂，當作是準備好材料，下次做Side Project的時候就能夠依照這個流程跑了。

2. 在UIUX的知識領域，我認為許多新知識並非使用文字就能夠清楚說明，有圖片參考是最快能夠理解的！像是何謂Moodboard、Design System、Component是什麼、Design Guideline應用的層面，若能多花點心思與時間去慢慢鑽研，想必在日後的實作部分會更上手。

3. 發現觀察別人的Design System蠻有趣的！看看別人是依照什麼品牌調性去規劃他們的視覺風格、元件設計，進而能夠思考我在使用的時候為什麼會覺得這個操作好、那個不好，又是一個使用者情境的體驗，進入挑戰尾聲，明日將介紹Prototype、Mockup、Usertest等流程以及UIUX的資源分享。