移動端UI設(shè)計規(guī)范
時間：2023-09-24 11:24:01 | 來源：網(wǎng)站運營
時間：2023-09-24 11:24:01 來源：網(wǎng)站運營
移動端UI設(shè)計規(guī)范：
一、邊距、間距
原則：邊距（左右）要大于間距（上下）。
模塊邊距
10px、12px、15px、16px
15px 常用
10px 最小，要展示更多的內(nèi)容才用
模塊間距
8px、10px、15px、16px、20px
常用 10px 15px 20px
內(nèi)容間距
5px 10px 15px
內(nèi)容邊距
5px 10px 15px
列表
最小高度 40px
單行 53px 55px 66px
二、全局規(guī)則
圖片比例
16:9、4:3、3:2、1:1 和 1:0.618（黃金比例）。
字體?
原則：在同一個系統(tǒng)的 UI 設(shè)計中先建立體系化的設(shè)計思路，對主、次、輔助、標題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場景中進行微調(diào)。少即是多，在視覺展現(xiàn)上用盡量少的樣式去實現(xiàn)設(shè)計目的。避免毫無意義的使用大量字號、顏色、字重強調(diào)視覺重點或?qū)Ρ汝P(guān)系。
字重，只出現(xiàn) regular 以及 medium 的兩種字體重量，分別對應(yīng)代碼中的 400 和 500，在英文字體加粗的情況下采用 semibold 的字體重量，對應(yīng)代碼中的 600。
字號選擇在 3-5 種之間，保持克制的原則。
行高 1.4
- 12px 提示語
- 14px 主文字
- 16px 標題
- 18px 大標題
- 20px 最大標題
顏色
確定主題色，定義好字體、背景、禁用、線條邊框、紅橙黃綠藍等色值。
每種色值最多配有 2~3 種淺談變化，比如文字可有主、次、提示等三種（#333 #666 #999）。
使用的大顏色種類不可過多，常用的有黑、白、主題色、綠-成功、紅-失敗、黃-警告。
陰影
離地面越遠的物體，產(chǎn)生的陰影顏色越淡、模糊度越高、面積越大；反之則顏色更深、模糊度越低、面積越小。
陰影向下：主要應(yīng)用于組件內(nèi)部或組件本身，是比較常規(guī)場景的用法
陰影向上：主要應(yīng)用于底部導航或工具欄等
陰影向左：主要應(yīng)用于右邊導航欄、抽屜組件或固定表格欄
陰影向右：主要應(yīng)用于左邊導航欄、抽屜組件或固定表格欄
一級陰影
@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);文案
語言文字的表述需要精心推敲，仔細設(shè)計。清晰、準確、簡潔的文案設(shè)計能夠讓界面擁有更好的可用性，同時讓用戶體驗更加友好。
以用戶為中心
文案以用戶為主體來寫作。比如：當用戶向后臺反饋問題、提出建議或申訴時，使用「我們」是合理的語境，例如「我們將會審核你的申訴」。
精簡語句
省略無用詞匯，不重復用戶已知事實；在絕大多數(shù)交互場景下，都無需界面描述出全部的細節(jié)。盡量提供簡短、易于快速獲取的內(nèi)容。比如：保存而不是保存修改。
使用用戶熟悉的語言
站在用戶的角度，說用戶熟悉的話。使用簡單、直接、易于理解的詞匯，讓內(nèi)容和指示更容易被用戶接受和理解。間接、曖昧模糊的說法，生僻和過于「文雅」的用詞，會增加用戶的認知負荷，所以應(yīng)當盡量避免使用這類用戶無法識別的詞匯。
表述一致
- 描述同一個事物的詞匯要保持統(tǒng)一；
- 上下文的語法、語種、語序要保持統(tǒng)一；
- 操作的名稱和目標頁面標題的名稱保持一致。
用詞精準完整
通用基本用詞要規(guī)范，不要寫錯字，詞語表達要完整。
專業(yè)用語要精準，并是所屬行業(yè)認可通用用詞；時間的表述必須明確。
比如：其他（其它x）、抱歉（對不起）、驗證碼（4位或多位數(shù)字或字母圖片）、校驗碼（手機收到的6位數(shù)字，驗證用戶的身份）、登錄（登陸x）。
語氣
直接使用「你」、「我」來和用戶對話，與用戶建立親密感。避免使用「您」，讓用戶感覺太過疏遠。
不要在同一個句式中混用「你」和「我」，交互中指代混亂會讓用戶相當糾結(jié)。
多給用戶支持與鼓勵，不要命令和強迫用戶，比如：請輸入字母數(shù)字組合而不是不能輸入字符。
大小寫和標點符號
- 產(chǎn)品名稱全稱，首字母大寫。產(chǎn)品名稱縮寫需要全部大寫，如：ESC、SLB 等；
- 正確使用專有名詞的大小寫規(guī)范 iOS Android；
- 全英文的標題，標簽，菜單項等等都要遵循英文句式中首字母大寫的規(guī)范；
- 統(tǒng)計數(shù)據(jù)使用阿拉伯數(shù)字，你有 3 條短消息；
- 謹慎使用感嘆號。
三、優(yōu)化事項
重點突出
每個頁面都應(yīng)有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。在確定了重點的前提下，應(yīng)盡量避免頁面上出現(xiàn)其它與用戶的決策和操作無關(guān)的干擾因素。
流程明確
為了讓用戶順暢地使用頁面，在用戶進行某一個操作流程時，應(yīng)避免出現(xiàn)用戶目標流程之外的內(nèi)容而打斷用戶。
異常可控，有路可退
在設(shè)計任何的任務(wù)和流程時，異常狀態(tài)和流程往往容易被忽略，而這些異常場景往往是用戶最為沮喪和需要幫助的時候，因此需要格外注意異常狀態(tài)的設(shè)計，在出現(xiàn)異常時予以用戶必要的狀態(tài)提示，并告知解決方案，使其有路可退。
要杜絕異常狀態(tài)下，用戶莫名其妙又無處可去，停滯在某一個頁面的情況。
表單報錯，在表單頂部告知錯誤原因，并標識出錯誤字段提示用戶修改。
減少輸入
由于手機鍵盤區(qū)域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設(shè)計小程序頁面時應(yīng)盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
減少等待，反饋及時
頁面的過長時間的等待會引起用戶的不良情緒，當出現(xiàn)加載和等待的時候，需要予以及時的反饋以舒緩用戶等待的不良情緒。
數(shù)據(jù)加載：進頁面、下拉刷新、上滑請求。
局部加載：點擊提交按鈕，增加、刪除、修改數(shù)據(jù)。
關(guān)注公眾號 前端一鍋煮，一枚陽光積極的小前端，我的世界只能終身學習！
關(guān)鍵詞：規(guī)范,設(shè)計,移動
在線咨詢
