設計規範

一、信息的親密性

親密性越高，排列方式越緊密，形成一個視覺單元。

對於信息的視覺單元的形成是為了讓消費者一目了然，是產品的頁面結構與信息層次越清晰。

信息層次的劃分可以通過

• 大小來劃分：

8px 16px 24px --分別對應---小中大

• 間距
• 增加新元素
• 布局方式（柵格布局）

二、對齊

• 文案——左對齊
• 表單——冒號對齊
• 數字——右對齊且小數位數相同

三、對比

可以有效的增加視覺效果

• 主次對比——既可以強化重點項，也可以弱化其他項，在一些需要用戶慎重決策的場景中，系統應該保持中立，不能替用戶或者誘導用戶做出判斷
• 總分關係對比——通過調整排版、字體、大小等方式來突出層次感，區分總分關係，使得頁面更具張力和節奏感。
• 狀態關係對比——通過改變顏色、增加輔助形狀等方法來實現狀態關係的對比，如：靜態對比（用顏色區分、……）與動態對比（當滑鼠懸停時，改項與其他項呈現出明顯的視覺效果，響應用戶操作）

四、重複

重複可以幫助用戶識別出這些元素之間關聯性

重複元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關係等。

五、直接了當

正如 Alan Cooper 所言：『需要在哪裡輸出，就要允許在哪裡輸入』。這就是直接操作的原理。eg：不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。

• 頁內編輯

• 利用拖放

來自於簡化交互 - Ant Design

A UI Design Language?

ant.design
推薦閱讀：