iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 25

【Day 25】鐵人賽 25 天回顧

進行六角學院開設的 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 ) 的命名與格式
  • 設計標註檔

上一篇
【Day 24】設計流程:原型設計的種類與技巧
下一篇
【Day 26】情境模擬:再好看也沒用 !? 設計稿被工程師說太難做不出來 QQ
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言