進行六角學院開設的 UI 設計入門學習第 25 天，稍微從 wireframe 下一個階段開始來做一些回顧。

【Day 07】設計流程：繪製 Mockup 設計精稿之前

在繪製設計精稿之前，要先了解以下兩項事情：

• 網格系統，在之後的設計標註檔要提供，後續開發者才能正確切版。
• 依照原子設計的概念，有系統地建立頁面架構，在溝通上讓專案團隊成員與利害關係人更加快速了解設計脈絡。

原子設計

常見元件 ( Buttons 按鈕 + States 物件狀態 )

常見元件 ( Input 輸入格 )

常見元件 ( Radio Buttons & Checkbox、Links、Icon )

常見元件 ( Text 文字、Color 色彩、Accessibility )

分子 ( 導覽元件、折疊面板、提示工具 )

分子 ( 卡片、互動視窗、警告訊息、資料表 )

分子 ( 表單、CRAP優化界面準則 )

組織 ( 頁首、頁尾 )

組織 ( Section 常見版型 )

模板 Templates

模板 ( Landing Page 著陸頁 )

模板 ( RWD 響應式排版 )

模板 ( UI State 頁面狀態 )

• 了解元件的屬性：功能是什麼? 有哪些種類、代表的情境呢? 有哪些樣式或元素、在視覺上的用途是? 建議的排版與想達成的效果? 最重要的是有哪些狀態 ?
• 互動性是介面設計與平面設計最大的不同，設計元件用相似的視覺變化 ( 顏色、陰影等 ) 來表達目前狀態，藉此回饋給使用者，現在操作的階段或目標。
• 自己繪製的 Icon，會需要針對不同尺寸、顏色的情況重新繪製。可能會造成網頁的圖檔過多而影響網頁效能。
• 色彩能產生直觀的視覺回饋，具有提升產品一致性、呈現元件狀態或強化視覺層級等作用。通用設計 ( Accessibility ) 中，設計師最需要注意的是文字與色彩的對比程度 !

• 由原子所構成的簡單介面元件，具備多種功能，可以引導、提供資訊給使用者 !
• C.R.A.P 是從平面設計延伸出來的設計準則，運用於介面設計的視覺與動線，進而達到優化使用者體驗的效果。

• 組織：相對於分子是更為複雜的組成，由原子及分子所建構
• header、footer
• 單欄、雙欄、多欄式設計

• 以頁面為基礎的架構，將原子、分子與組織等元素進行排版。等同於設計流程的線框稿 ( Wireframe )
• 著陸頁，會是希望使用者進入網站看到的第一個重點頁面。主要目的是為了取得轉換率 ( 曝光量或業績目標 )
• 響應式網頁設計 ( Responsive Web Design ) 可以讓網站根據不同裝置的螢幕解析度，去做適合的介面呈現，減少使用者進行縮放、平移和捲動等操作，達到更好的使用者體驗。
• 中斷點是改變排版的解析度寬度，可以透過 Statecounter 找出常用的尺寸當作中斷點，建議選擇手機、平板、桌機三種尺寸做設計。
• 可以被使用者操作的介面，就會有狀態的差別，在設計上去規劃這些狀態的頁面，才能打造一個滿足使用者體驗的好產品。

頁面 ( Pages、Mockup )

將實際內容 ( 圖片、文章等 ) 套用在特定模板的階段，也就是設計精稿 ( Mockup )。設計精稿是設計師最主要的工作，負責制定產品標準色、規劃元件樣式、套用實際內容的時候，是產品整體風格的呈現。

與工程師協作的重要文件

• 設計規範製作：介面套件 ( UI Kit )、設計模式 ( UI Pattern ) 與最詳細的設計規範 ( Design System )
• 切圖 ( Slice ) 的命名與格式
• 設計標註檔