所謂的用戶體驗(yàn)，其實(shí)就是讓用戶”習(xí)慣”, Don’t make user think. 這個(gè)是終極目標(biāo)啦，隨著產(chǎn)品的不斷的改善，用戶體驗(yàn)也在隨之變化。但是，如果你在做一款產(chǎn)品，所謂的標(biāo)準(zhǔn)，終極檢驗(yàn)方法，還是用戶，以及用戶對于產(chǎn)品的反饋。 對于互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)，有一些標(biāo)準(zhǔn)的用戶習(xí)慣，可以作為所謂量化的標(biāo)準(zhǔn)。

用戶界面設(shè)計(jì)的三大原則是：

1、置界面于用戶的控制之下;

2、減少用戶的記憶負(fù)擔(dān);

3、保持界面的一致性。

用戶界面設(shè)計(jì)在工作流程上分為結(jié)構(gòu)設(shè)計(jì)、交互設(shè)計(jì)、視覺設(shè)計(jì)三個(gè)部分。結(jié)構(gòu)設(shè)計(jì)也稱概念設(shè)計(jì) (Conceptual Design)，是界面設(shè)計(jì)的骨架。通過對用戶研究和任務(wù)分析，制定出產(chǎn)品的整體架構(gòu)。交互設(shè)計(jì)的目的是使產(chǎn)品讓用戶能簡單使用。 任何產(chǎn)品功能的實(shí)現(xiàn)都是通過人和機(jī)器的交互來完成的。因此，人的因素應(yīng)作為設(shè)計(jì)的核心被體現(xiàn)出來。視覺設(shè)計(jì)包括色彩、字體、頁面設(shè)計(jì)等。視覺設(shè)計(jì)要達(dá)到用戶愉悅使用的目的。

通過“指標(biāo)”就是我們用來衡量用戶體驗(yàn)的標(biāo)準(zhǔn)，將標(biāo)準(zhǔn)分為三個(gè)等級，分別占0分、1分、2分，每個(gè)標(biāo)準(zhǔn)都有它的評分標(biāo)準(zhǔn)，當(dāng)用戶反饋的問題完全符合這個(gè)標(biāo)準(zhǔn)時(shí)，就占0;如問題不符合標(biāo)準(zhǔn)，就占2分;如問題不嚴(yán)重，只是還不夠完善，就占1分;最后拿問題去套這里的標(biāo)準(zhǔn)，得出來的總分就是我們要評定改版的指標(biāo)了。

總分越高，說明該條的用戶體驗(yàn)越差，最后我們將得出的總分來判斷問題的用戶體驗(yàn)值：總分在0 – 5 分且單個(gè)標(biāo)準(zhǔn)在2分以下的(標(biāo)示用戶體驗(yàn)為良好);總分在5 – 10分且單個(gè)標(biāo)準(zhǔn)在2分以下的(標(biāo)示用戶體驗(yàn)為較差);總分在十分以上或有2個(gè)2分以上的標(biāo)準(zhǔn)的(標(biāo)示用戶體驗(yàn)為很差)。

結(jié)構(gòu)設(shè)計(jì)：

1、有足夠的空間讓用戶看到主要的內(nèi)容，要適合多數(shù)瀏覽器瀏覽(以15、17寸、19寸顯示器為主)

● 足夠看到主要內(nèi)容

● 只看到2/3看到

● 小于1/3的內(nèi)容

2、盡量避免使用結(jié)構(gòu)復(fù)雜的表格，表格嵌套不要超過3層;

● 小于等于2層

● 三到四層

● 五層或五層以上

3、頁面長度原則上不超過3屏，寬度不超過1屏幕。(以1024X768為準(zhǔn))

● 長小于3屏，寬小于1屏

● 長超出3屏或?qū)挸?屏

● 長超出3屏，寬超1屏

4、頁面避免使用iframe，如果必須使用，采用對應(yīng)的優(yōu)化方式。(優(yōu)化是指：對瀏覽器是否支持框架進(jìn)行判斷以及iframe寬高度自適應(yīng)頁面)

● 無iframe

● 有1-2個(gè)iframe，且無優(yōu)化

● 多于2個(gè)iframe,且無優(yōu)化

5、頁面布局要重點(diǎn)突出，圖文并茂;做數(shù)據(jù)統(tǒng)計(jì)，將目標(biāo)客戶最感興趣的放置在最重要最顯著的位置(一般為頁面的頭部和左上角)

● 重點(diǎn)突出，圖文并茂，且在最重要的位置放的是用戶最感興趣的

● 重點(diǎn)不突出或沒有圖文并茂

● 重點(diǎn)不突出且沒有圖文并茂

交互設(shè)計(jì)：

1、表單的填寫流程要清晰、簡潔，必填的項(xiàng)要放在頁面的顯著位置(主體頁面的頭部，)，非必填項(xiàng)不能影響用戶填寫的效率。

● 必填項(xiàng)位置顯著，非必填項(xiàng)沒有影響用戶填寫的效率

● 必填項(xiàng)位置不顯著或非必填項(xiàng)影響了用戶填寫的效率

● 必填項(xiàng)和非必填項(xiàng)混在一起，影響了用戶填寫的效率

2、表單的填寫盡量多采用既有選擇也有輸入的方式，需填寫部分需注明內(nèi)容的實(shí)例，并對字段作出限制。

● 既有選擇也有輸入的方式，并有注明實(shí)例

● 沒有選擇性輸入或沒有注明填寫的實(shí)例

● 沒有選擇性輸入且沒有注明填寫的實(shí)例

3、對于交互性的按鈕必須清晰突出，以確保用戶可以清楚地點(diǎn)擊。

● 調(diào)查10人(8人或以上的人很快就能點(diǎn)擊到按鈕)

● 調(diào)查10人(只一半的人很快就能點(diǎn)擊到按鈕)

● 調(diào)查10人(6人或以上的人在短時(shí)間找不到要點(diǎn)擊的按鈕)

4、點(diǎn)擊：瀏覽過的信息需要顯示為不同的狀態(tài)，以區(qū)分于未閱讀內(nèi)容，避免重復(fù)閱讀。

● 有不同的狀態(tài)顯示

● 只有部分有不同的狀態(tài)顯示

● 沒有狀態(tài)顯示

5、盡量減少新開的窗口，以避免開過多的無效窗口：打開的IE新窗口不超過2層;打開的IE / DIV / alert 新窗口總不超過三個(gè)，避免在DIV窗口再打開DIV窗口。

● IE窗口<=2 IE+DIV+ALERT 新窗口 <=3,DIV窗口沒有再打開DIV窗口

● IE窗口>=2或 IE+DIV+ALERT 新窗口 >=3或DIV窗口沒有再打開DIV窗口

● IE窗口>=2 IE+DIV+ALERT 新窗口 >=3,DIV窗口有再打開DIV窗口

6、涉及到用戶操作的東西，要有及時(shí)、清楚的錯(cuò)誤、成功或信息提示;并要能保存上一步操作。

● 有及時(shí)清楚地提示，能保存上一步操作

● 無提示或不能保存上一步操作

● 無提示也不能保存上一步操作

7、對于每一個(gè)點(diǎn)擊進(jìn)行友好提示，以增加瀏覽者的親和度，對圖片、圖標(biāo)、鏈接有TIP提示或在相應(yīng)位置加“說明”、“注意”的文字信息。

● 每一個(gè)點(diǎn)擊進(jìn)行友好提示

● 有提示，但提示不友好 無友好的提示

8、對用戶輸入性的操作，提供快速反饋;將光標(biāo)定位到第一個(gè)要輸入的表單對象上，給用戶心理上的暗示，避免用戶焦急。

● 有快速的反饋，且有光標(biāo)定位

● 反饋不快速或無光標(biāo)定位

● 無快速反饋、無光標(biāo)定位

9、欄目的命名要與欄目內(nèi)容準(zhǔn)確相關(guān)，簡潔清晰，不宜過于深?yuàn)W。

● 調(diào)查10人(8人或以上的人認(rèn)為欄目命名很好)

● 調(diào)查10人(只一半的人認(rèn)為欄目命名好)

● 調(diào)查10人(6人或以上的人認(rèn)為欄目命名深?yuàn)W)

10、導(dǎo)航要清晰，欄目的層級最多不超過三層;且隨時(shí)轉(zhuǎn)移功能，很容易從一個(gè)功能跳到另外一個(gè)功能。

● 導(dǎo)航欄的層級不超過3層

● 導(dǎo)航欄的層級為4層

● 導(dǎo)航欄的層級多于4層

11、在頁面的醒目位置(主體頁面的頭部)，提供信息搜索框和排序功能，便于查找到所需內(nèi)容

● 有醒目的搜索框和排序功能

● 有搜索框和排序但不醒目

● 無搜索框和排序

12、正常情況下,盡量確保頁面在5秒內(nèi)打開。如果是大 型門戶網(wǎng)站，必須考慮南北互通問題，進(jìn)行必要的壓力測試

● 1 – 2秒內(nèi)打開

● 3 -5秒內(nèi)打開

● 5秒以上打開

13、讓用戶控制界面(界面的大小、位置、最大化、最小化、關(guān)閉、滾動(dòng)條控制等)

● 用戶能很好的控制

● 控制不完善

● 用戶不能控制

14、無論用戶瀏覽到哪一個(gè)層級，哪一個(gè)頁面，都可以清楚知道自己當(dāng)前的位置，使其做出下一步行動(dòng)的決定。

● 每個(gè)層級每個(gè)頁面都有當(dāng)前的位置

● 沒有當(dāng)前的位置或不知道下步的操作

● 用戶不知道自己在哪，也不知道下一步干嘛。

15、對信息量大的操作要有批量處理的功能(如審核、刪除、添加等)

● 有批量處理的功能

● 只有部分有批量處理

● 無批量處理的功能

視覺設(shè)計(jì)：

1、界面風(fēng)格要協(xié)調(diào)一致，讓用戶有一個(gè)整體的感覺。 (最好能提供換膚的功能)

● 典型用戶調(diào)查10人(符合8-7人的習(xí)慣)

● 典型用戶調(diào)查10人(符合5 – 6人的習(xí)慣)

● 典型用戶調(diào)查10人(符合1-4的習(xí)慣)

2、采用易于閱讀的字體，避免文字過小或過密造成的閱讀障礙。(主體字 中文采用標(biāo)準(zhǔn)的12PX 宋體;英文采用12PX Arial 字體)

● 文字便于閱讀且有字體大中小設(shè)置

● 文字過小或文字過密

● 文字過小且過密，沒有字體大中小的設(shè)置

3、動(dòng)畫效果要與主畫面相協(xié)調(diào)，文件大小在10K以上的要有加載畫面。

● 動(dòng)畫與頁面協(xié)調(diào)，有加載畫面

● 動(dòng)畫與頁面不太協(xié)調(diào)或10K以上動(dòng)畫無加載頁面

● 動(dòng)畫與頁面不太協(xié)調(diào)且10K以上動(dòng)畫無加載頁面

4、圖片展示要比例協(xié)調(diào)、不變形，圖片清晰。

● 圖片清晰且不變形

● 圖片不清晰或變形

● 圖片不清晰且變形

5、圖標(biāo)使用要簡潔、明了、易懂、準(zhǔn)確，與頁面整體風(fēng)格統(tǒng)一;盡量使用真實(shí)世界的比喻。如：電話、打印機(jī)的圖標(biāo)設(shè)計(jì)，尊重用戶以往的使用經(jīng)驗(yàn)。同樣的功能用同樣的圖形。

● 調(diào)查10人(8人或以上的人認(rèn)為圖標(biāo)使用合理)

● 調(diào)查10人(只一半的人認(rèn)為圖標(biāo)合理)

● 調(diào)查10人(6人或以上的人認(rèn)為圖標(biāo)使用不合理)

6、對于長篇文章 進(jìn)行分頁瀏覽，超過1.5屏?xí)r 進(jìn)行翻頁(15寸顯示器為準(zhǔn))

● 超過1.5屏能分頁瀏覽

● 2屏以上才分頁瀏覽

● 無分頁瀏覽功能

7、色彩與內(nèi)容。整體不超過5個(gè)色系，盡量少用紅色、綠色。近似的顏色表示近似的意思。以恰當(dāng)?shù)纳拭鞫群土炼?，確保瀏覽者的瀏覽舒適度。

● 小于5，主色沒有用到紅色和綠色

● 整體色調(diào)是紅或綠或整體色系超出5個(gè)

● 整體色調(diào)就是紅或綠，色系超出5個(gè)

8、提供界面的快捷方式，一個(gè)功能有多個(gè)入口;快捷方式體現(xiàn)出其關(guān)聯(lián)性，放在顯著的位置(頁面的頭部或左上角)

● 在顯著有關(guān)聯(lián)性的快捷方式

● 有快捷方式但位置不顯著

● 無快捷方式

9、減少短期記憶的負(fù)擔(dān)。讓計(jì)算機(jī)幫助記憶，例：登錄的用戶名、密碼、IE進(jìn)入界面地址可以讓機(jī)器記住。

● 有計(jì)算機(jī)幫助記憶

● 有部分記憶功能

● 無計(jì)算機(jī)幫助記憶。

對于手機(jī)客戶端的用戶體驗(yàn)標(biāo)準(zhǔn)，可以從這三個(gè)方向進(jìn)行評估：結(jié)構(gòu)設(shè)計(jì)請檢驗(yàn)：1、2、5 交互設(shè)計(jì)可以全部，但是第5項(xiàng)改為盡可能減少打開鏈接。視覺設(shè)計(jì)也是可以全部，但是對于第二項(xiàng)字體，iphone以及安卓，有自己標(biāo)準(zhǔn)的字體，按照其標(biāo)準(zhǔn)設(shè)計(jì)，就是用戶體驗(yàn)的最佳狀態(tài)。另蘋果對UI是由標(biāo)準(zhǔn)的，下載一份標(biāo)準(zhǔn)。按照標(biāo)準(zhǔn)來，體驗(yàn)最好。

（內(nèi)容整理自知乎）