移動端UI設計規範

邊距、間距

原則：邊距（左右）要大於間距（上下）。

模塊邊距

10px、12px、15px、16px

15px 經常使用

10px 最小，要展現更多的內容才用

模塊間距

8px、10px、15px、16px、20px

經常使用 10px 15px 20px

內容間距

5px 10px 15px

內容邊距

5px 10px 15px

列表

最小高度 40px

單行 53px 55px 66px

全局規則

圖片比例

16:九、4:三、3:二、1:1 和 1:0.618（黃金比例）。

字體​

原則：在同一個系統的 UI 設計中先創建體系化的設計思路，對主、次、輔助、標題、展現等類別的字體作統一的規劃，再落地到具體場景中進行微調。少便是多，在視覺展示上用盡可能少的樣式去實現設計目的。避免毫無心義的使用大量字號、顏色、字重強調視覺重點或對比關係。

字重，只出現 regular 以及 medium 的兩種字體重量，分別對應代碼中的 400 和 500，在英文字體加粗的狀況下采用 semibold 的字體重量，對應代碼中的 600。

字號選擇在 3-5 種之間，保持克制的原則。

行高 1.4

• 12px 提示語
• 14px 主文字
• 16px 標題
• 18px 大標題
• 20px 最大標題

顏色

肯定主題色，定義好字體、背景、禁用、線條邊框、紅橙黃綠藍等色值。

每種色值最多配有 2~3 種淺談變化，好比文字可有主、次、提示等三種（#333 #666 #999）。

使用的大顏色種類不可過多，經常使用的有黑、白、主題色、綠-成功、紅-失敗、黃-警告。

陰影

離地面越遠的物體，產生的陰影顏色越淡、模糊度越高、面積越大；反之則顏色更深、模糊度越低、面積越小。

陰影向下：主要應用於組件內部或組件自己，是比較常規場景的用法

陰影向上：主要應用於底部導航或工具欄等

陰影向左：主要應用於右邊導航欄、抽屜組件或固定表格欄

陰影向右：主要應用於左邊導航欄、抽屜組件或固定表格欄

一級陰影

@shadow_1_down:
0px 1px 2px -2px rgba(0, 0, 0, 0.16),
0px 3px 6px 0px rgba(0, 0, 0, 0.12),
0px 5px 12px 4px rgba(0, 0, 0, 0.09);

二級陰影

@shadow_2_down:
0px 3px 6px -4px rgba(0, 0, 0, 0.12),
0px 6px 16px 0px rgba(0, 0, 0, 0.08),
0px 9px 28px 8px rgba(0, 0, 0, 0.05);

三級陰影

@shadow_3_down:
0px 6px 16px -8px rgba(0, 0, 0, 0.08),
0px 9px 28px 0px rgba(0, 0, 0, 0.05),
0px 12px 48px 16px rgba(0, 0, 0, 0.03);

文案

語言文字的表述須要精心推敲，仔細設計。清晰、準確、簡潔的文案設計可以讓界面擁有更好的可用性，同時讓用戶體驗更加友好。

以用戶爲中心

文案以用戶爲主體來寫做。好比：當用戶向後臺反饋問題、提出建議或申訴時，使用「咱們」是合理的語境，例如「咱們將會審覈你的申訴」。

精簡語句

省略無用詞彙，不重複用戶已知事實；在絕大多數交互場景下，都無需界面描述出所有的細節。儘可能提供簡短、易於快速獲取的內容。好比：保存而不是保存修改。

使用用戶熟悉的語言

站在用戶的角度，說用戶熟悉的話。使用簡單、直接、易於理解的詞彙，讓內容和指示更容易被用戶接受和理解。間接、曖昧模糊的說法，生僻和過於「文雅」的用詞，會增長用戶的認知負荷，因此應當儘可能避免使用這類用戶沒法識別的詞彙。

表述一致

• 描述同一個事物的詞彙要保持統一；
• 上下文的語法、語種、語序要保持統一；
• 操做的名稱和目標頁面標題的名稱保持一致。

用詞精準完整

通用基本用詞要規範，不要寫錯字，詞語表達要完整。

專業用語要精準，並是所屬行業承認通用用詞；時間的表述必須明確。

好比：其餘（其它x）、抱歉（對不起）、驗證碼（4位或多位數字或字母圖片）、校驗碼（手機收到的6位數字，驗證用戶的身份）、登陸（登錄x）。

語氣

直接使用「你」、「我」來和用戶對話，與用戶創建親密感。避免使用「您」，讓用戶感受太過疏遠。

不要在同一個句式中混用「你」和「我」，交互中指代混亂會讓用戶至關糾結。

多給用戶支持與鼓勵，不要命令和強迫用戶，好比：請輸入字母數字組合而不是不能輸入字符。

大小寫和標點符號

• 產品名稱全稱，首字母大寫。產品名稱縮寫須要所有大寫，如：ESC、SLB 等；
• 正確使用專有名詞的大小寫規範 iOS Android；
• 全英文的標題，標籤，菜單項等等都要遵循英文句式中首字母大寫的規範；
• 統計數據使用阿拉伯數字，你有 3 條短消息；
• 謹慎使用感嘆號。

優化事項

重點突出

每一個頁面都應有明確的重點，以便於用戶每進入一個新頁面的時候都能快速地理解頁面內容。在肯定了重點的前提下，應儘可能避免頁面上出現其它與用戶的決策和操做無關的干擾因素。

流程明確

爲了讓用戶順暢地使用頁面，在用戶進行某一個操做流程時，應避免出現用戶目標流程以外的內容而打斷用戶。

異常可控，有路可退

在設計任何的任務和流程時，異常狀態和流程每每容易被忽略，而這些異常場景每每是用戶最爲沮喪和須要幫助的時候，所以須要格外注意異常狀態的設計，在出現異常時予以用戶必要的狀態提示，並告知解決方案，使其有路可退。

要杜絕異常狀態下，用戶莫名其妙又無處可去，停滯在某一個頁面的狀況。

表單報錯，在表單頂部告知錯誤緣由，並標識出錯誤字段提示用戶修改。

減小輸入

因爲手機鍵盤區域小且密集，輸入困難的同時還易引發輸入錯誤，所以在設計小程序頁面時應儘可能減小用戶輸入，利用現有接口或其餘一些易於操做的選擇控件來改善用戶輸入的體驗。

減小等待，反饋及時

頁面的過長時間的等待會引發用戶的不良情緒，當出現加載和等待的時候，須要予以及時的反饋以舒緩用戶等待的不良情緒。

數據加載：進頁面、下拉刷新、上滑請求。

局部加載：點擊提交按鈕，增長、刪除、修改數據。