iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
1
自我挑戰組

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

【Day 14】原子設計:分子 ( 表單、CRAP優化界面準則 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

  1. 表單 ( Form )
  2. C.R.A.P 設計準則

1、表單 ( Form )

表單可以讓使用者輸入資訊,常用於登入、回饋、填寫個資等需要提供資料的流程,是蒐集使用者數據的重要元件。

表單組成

  • 輸入格 ( Input )
  • 單選按鈕 ( Radio Button )
  • 複選框 ( Checkbox )
  • 下拉式選單 ( Dropdowns )
  • 小提示 ( Microcopy ):用來提供更細節的說明敘述
  • 按鈕 ( Button )

表單排版準則

表單是取得使用者資訊的重要元件,所以讓使用者能順利填完是表單設計的重點。表單中的小細節會大大影響使用者的體驗哦。

  • 盡量使用單列設計:可以讓使用者的視線單純垂直掃視,避免造成不必要的混淆。
  • 文字標籤統一置頂:避免增加使用者理解表單的時間
  • 英文標籤避免全部大寫
  • 提示文字不能取代標籤:避免使用者在填入時,需要文字提醒 ( floating label )
  • 輸入格長度呼應內容
  • 不隱藏基本幫助文字:減少使用者還要點擊等動作
  • 區分選填與必填
  • 明確的 CTA 文字

表單驗證

針對提交的資料進行格式的確認與比對,像是填入帳號不正確、遺漏重要欄位等,若是格式錯誤,會跳出錯誤通知提醒使用者。

驗證元素:

  • 圖示 ( Icon )
  • 狀態顏色 ( State Color )
  • 幫助文字 ( Help Text )
  • 提示工具 ( Tooltips )

2、C.R.A.P 設計準則

C.R.A.P 是從平面設計延伸出來的設計準則,運用於介面設計的視覺與動線,進而達到優化使用者體驗的效果。

  • 對比 ( Contrast )
  • 重複 ( Repetition )
  • 對齊 ( Alignment )
  • 相近 ( Proximity )

對比 ( Contrast )

介面上的元件都有其重要程度的高低,可以使用對比的設計,去具體化這樣的差異。常會透過大小、字種、顏色、形狀等方式去呈現。

重複 ( Repetition )

重複是指一致性。重複使用相似的設計能讓使用者更快進入狀況,也能建立介面的整體感。可以透過像字型、顏色、排版、樣式、間距等的一致性。

對齊 ( Alignment )

對齊的目的在於引導使用者的視覺動線,減少視覺干擾,讓使用者可以順暢地瀏覽、操作介面。使用網格系統是一種最基礎的對齊方式。

相近 ( Proximity )

當元件的距離越靠近,就會被認為是同一個群體。
因此可以透過間距的大小,來為功能相關的元件分組,進而幫助使用者更有效的理解介面的操作。

好! 下一篇開始,介紹原子設計中的組織部分 : )


上一篇
【Day 13】原子設計:分子 ( 卡片、互動視窗、警告訊息、資料表 )
下一篇
【Day 15】鐵人賽 15 天回顧
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言