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 )

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

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