作為一名合格的UI設(shè)計(jì)師，有些交互與視覺設(shè)計(jì)的規(guī)范是必須要知道的。

一、設(shè)計(jì)的原則：

1.一切界面設(shè)計(jì)均以用戶價(jià)值為歸依；

2.在進(jìn)行移動(dòng)設(shè)備界面設(shè)計(jì)時(shí)，應(yīng)跳脫鼠標(biāo)/鍵盤等外設(shè)的束縛，時(shí)刻考慮?NUI（自然用戶界面）設(shè)計(jì)的兩大要求——操作要自然直接（Direct manipulation），反饋要符合直覺（Intuitive）；

3.考慮單手操作的舒適性；

綠色為單手操作的舒適區(qū)域。實(shí)驗(yàn)出處

本設(shè)計(jì)規(guī)范同時(shí)使用?Nielsen Heuristics（尼爾森啟發(fā)式評(píng)估表）作為評(píng)審準(zhǔn)則，如下：

– 系統(tǒng)狀態(tài)可見

通過恰當(dāng)且適時(shí)的反饋，使用戶隨時(shí)能夠了解系統(tǒng)當(dāng)前的狀態(tài)；

– 系統(tǒng)設(shè)計(jì)不脫離現(xiàn)實(shí)世界

務(wù)必使用用戶熟悉的語言，避免使用系統(tǒng)術(shù)語；

– 用戶有自由控制權(quán)

用戶時(shí)常會(huì)操作失誤，故系統(tǒng)需提供「明顯」的退出標(biāo)識(shí)，以方便用戶回退到上一步。支持「撤銷」和「重做」；

– 一致性

設(shè)計(jì)語言、狀態(tài)顯示以及操作方式務(wù)必保持一致，防止用戶疑惑；

– 錯(cuò)誤預(yù)防

通過設(shè)計(jì)預(yù)防用戶操作失誤，比優(yōu)秀的出錯(cuò)文案要好得多；例如使用紅色警示刪除/清空操作，或者使用文案告知用戶該操作的危險(xiǎn)結(jié)果；

– 識(shí)別而非記憶

通過可見的設(shè)計(jì)，減少用戶的記憶負(fù)擔(dān)。幫助信息應(yīng)該容易獲取，讓用戶能看見而不是記住它們；

– 靈活高效

設(shè)計(jì)一些高級(jí)操作方式，以便專家用戶快速實(shí)現(xiàn)目標(biāo)，且不干擾初級(jí)用戶使用。允許用戶自定義常用功能；

– 美觀簡(jiǎn)潔

界面上不顯示無關(guān)和無用的信息。相關(guān)的信息在視覺上顯示在一起。

– 幫助用戶發(fā)現(xiàn)、診斷并處理錯(cuò)誤

出錯(cuò)提示務(wù)必使用平實(shí)的語言，精確描述錯(cuò)誤，并提供解決辦法；

– 幫助文檔

盡管無需幫助文檔就能使用的系統(tǒng)設(shè)計(jì)是極好的，但提供幫助文檔還是有必要的。這些幫助信息務(wù)必容易搜索，且以用戶的目標(biāo)任務(wù)為中心，列出解決問題的步驟，且避免冗長(zhǎng)。

二、用語規(guī)范

界面設(shè)計(jì)用語規(guī)范有兩個(gè)基本要求——說清楚和不啰嗦，還有一個(gè)進(jìn)階要求——傳遞情感但不賣萌。

1.說清楚

1.1 謹(jǐn)慎使用「確定」、「下一步」等萬金油文案。

互聯(lián)網(wǎng)產(chǎn)品里隨處可見的「確定」按鈕是產(chǎn)品經(jīng)理最偷懶的表現(xiàn)之一，這些按鈕的名字完全可以根據(jù)不同的場(chǎng)景進(jìn)行擴(kuò)展的。我寫完一篇文章，那個(gè)提交的按鈕如果是「發(fā)布」或者「預(yù)覽」會(huì)不會(huì)更清楚些？我修改了我的個(gè)人資料，那個(gè)確定按鈕如果是「更新資料」會(huì)不會(huì)更清晰一點(diǎn)？

1.2 不要使用不易理解的術(shù)語。

以下圖為例。這是一個(gè)拍攝銀行卡，通過OCR技術(shù)識(shí)別卡號(hào)的功能。OCR即光學(xué)字符識(shí)別技術(shù)。

但是，用戶很可能并不知道什么是「OCR識(shí)別中」?！刚谧R(shí)別」就顯得通俗易懂許多。

2.不羅嗦

2.1 先說結(jié)論，再作解釋

在短信通知上，盡量把突出的信息放在前面。比如一個(gè)短信驗(yàn)證碼的內(nèi)容，要保證驗(yàn)證碼在系統(tǒng)消息欄直接展示出來，用戶的操作場(chǎng)景是點(diǎn)擊了「獲取驗(yàn)證碼」按鈕之后，在那個(gè)界面等待輸入呢，抬眼看到系統(tǒng)消息欄有內(nèi)容了，記下來驗(yàn)證碼，直接就在輸入框輸入了，這樣的效率才是最高的。

3.傳遞情感但不賣萌

我們來看看在斷網(wǎng)的情況下QQ和微信的提示文案

4.其他用語規(guī)范

4.1 日期和時(shí)間的格式

如無特殊說明，請(qǐng)遵循如下格式：

4.2 身份證號(hào)碼

如無特殊說明，請(qǐng)遵循如下格式：

4306************1X

三、設(shè)計(jì)樣式

1.柵格

Phone柵格都是流體柵格，簡(jiǎn)單說，就是不定義具體尺寸，而是屏幕占比。

說到屏幕占比，我們需要設(shè)定基準(zhǔn)屏幕，在規(guī)范內(nèi)，我們以 1080×1920 像素分辨率作為設(shè)計(jì)刪格設(shè)計(jì)的基準(zhǔn) 。

12Grid是兼容多分辨率機(jī)型的智能手機(jī)應(yīng)用界面柵格布局系統(tǒng)， 使用該套柵格系統(tǒng)，設(shè)計(jì)師無需再計(jì)算尺寸，按照柵格自由布局即可，可快速布局成四列圖標(biāo)、三列圖標(biāo)、兩列縮略圖等基本常規(guī)的布局、以及更加自由的布局，兼容750×1334的iPhone設(shè)備和720×1280等主流的Android設(shè)備。

PS中網(wǎng)格的設(shè)置

示例：

在 1080×1920 與 750×1334 像素分辨率屏幕下的按鈕尺寸、布局樣式

2.字體