用戶體驗(yàn)已經(jīng)成為衡量 應(yīng)用軟件質(zhì)量的重要標(biāo)準(zhǔn)。在過(guò)去我們可能會(huì)驚嘆于某個(gè)Web應(yīng)用的華麗界面，現(xiàn)在，隨著HTML5的強(qiáng)勢(shì)登場(chǎng)，各類(lèi)表現(xiàn)層技術(shù)及開(kāi)發(fā)框架的發(fā)布，Web與 窗體應(yīng)用的界限正在被逐漸模糊。雖然技術(shù)已經(jīng)煥然一新，但很多開(kāi)發(fā)人員并不是專(zhuān)業(yè)的信息架構(gòu)師，可能還在使用傳統(tǒng)的、平凡的UI設(shè)計(jì)風(fēng)格。富應(yīng)用已成定 局，過(guò)去難以實(shí)現(xiàn)的效果在今天看來(lái)已如此簡(jiǎn)單。本文旨在通過(guò)借鑒Web界面設(shè)計(jì)經(jīng)驗(yàn)，來(lái)探尋系統(tǒng)UI設(shè)計(jì)的最佳實(shí)踐。

一 指導(dǎo)原則概述

• 系統(tǒng)是自描述的 對(duì)于好的UI設(shè)計(jì)系統(tǒng)應(yīng)該易于使用。無(wú)需閱讀額外的文檔，系統(tǒng)UI本身就能引導(dǎo)用戶選擇正確的道路。

• 盡力隱藏系統(tǒng)復(fù)雜度 簡(jiǎn)約風(fēng)格的UI更易于用戶使用。

• 提示處理過(guò)的信息 不要反饋那些用戶無(wú)法理解的專(zhuān)業(yè)術(shù)語(yǔ)，這樣做不僅會(huì)使用戶反感，而且會(huì)暴露某些敏感信息，要反饋用戶自己的語(yǔ)言。

• 標(biāo)識(shí)引導(dǎo)設(shè)計(jì) 系統(tǒng)必須清晰地告知用戶：他們身在何處？他們尋找的東西在哪里？他們?nèi)绾蔚竭_(dá)？

• 盡快提供反饋 UI應(yīng)該能夠在動(dòng)作真正發(fā)生之前讓用戶知道動(dòng)作尚未發(fā)生，提醒用戶正處在過(guò)程中的哪個(gè)階段。

• 人性化設(shè)計(jì) 合適的字體大小，溫和的背景色，合理的按鈕位置。

• 保持一致，考慮標(biāo)準(zhǔn) 一致的界面風(fēng)格易于使用，遵循標(biāo)準(zhǔn)更是使應(yīng)用程序給用戶以專(zhuān)業(yè)的感覺(jué)。

• 提供驗(yàn)證與糾錯(cuò) “預(yù)防”、“保護(hù)”與“通知”是幫助用戶改正錯(cuò)誤的好的實(shí)踐。

• 減輕用戶負(fù)擔(dān) 把用戶記不住的移交給應(yīng)用軟件處理。

• 考慮到不同類(lèi)型與不同水平的用戶 從用戶使用角度出發(fā)，給用戶真正想要的，而不是僅靠我們的主觀臆測(cè)。

• 提供上下文幫助和文檔 雖然自描述性的UI很好，但清晰的幫助文檔能讓其錦上添花。

二 UI設(shè)計(jì)流程

步：理解需求并了解我們的用戶

　　一個(gè)系統(tǒng)的開(kāi)發(fā)與實(shí)施一定有明確的目標(biāo)。開(kāi)發(fā)系統(tǒng)的步就是要理解用戶需求。需求分析的工作一般由PM領(lǐng)導(dǎo)，主要由需求顧問(wèn)完成。我們通過(guò)與用戶訪談，旁觀用戶的工作，咨詢行業(yè)專(zhuān)家或借鑒各類(lèi)相關(guān)數(shù)據(jù)來(lái)得到用戶場(chǎng)景。通過(guò)對(duì)用戶場(chǎng)景的分組，過(guò)濾，以及挖掘，我們可以得到用戶的角色以及不同角色對(duì)系統(tǒng)的需求。

　　了解系統(tǒng)中的角色，以及他們之間的關(guān)系。在設(shè)計(jì)UI前，我們應(yīng)該知道這些角色 能夠做什么，期望做些什么以及不能做些什么。我們要了解這些角色的主要任務(wù)，并深入研究他們的工作習(xí)慣、知識(shí)層次以及他們理想中的軟件應(yīng)該是什么樣子。與 這些代表不同角色的關(guān)鍵用戶交談，為他們每一個(gè)人編寫(xiě)一個(gè)場(chǎng)景來(lái)描述他們理想中的最佳體驗(yàn)是個(gè)不錯(cuò)的方法。作為設(shè)計(jì)者來(lái)說(shuō)，我們必須清楚用戶的習(xí)慣。在某 些行業(yè)，可能從業(yè)者所希望的界面風(fēng)格是常人無(wú)法理解的，但對(duì)于該角色確實(shí)是可行的。這些信息，如果不與用戶面對(duì)面的溝通，恐怕很難從文檔中獲取。

　　一般步驟如下：

• Step 1：與用戶訪談，并記錄用戶描述，得到“訪談?dòng)涗洝薄?/span>

• Step 2：整理訪談?dòng)涗?，并得到“用戶故事”?/span>

• Step 3：定義用戶角色，得到“角色職責(zé)表”。

• Step 4：定義用戶權(quán)限，得到“權(quán)限列表”。

• Step 5：定義用戶場(chǎng)景，描述用戶做什么，與系統(tǒng)如何交互，對(duì)出現(xiàn)的問(wèn)題的反應(yīng)，對(duì)系統(tǒng)的期望，得到“用戶場(chǎng)景描述”。

　　補(bǔ)充：需求分析很多時(shí)候有業(yè)務(wù)顧問(wèn)擔(dān)任，但根據(jù)項(xiàng)目規(guī)模，可能這部分責(zé)任也會(huì)落在你的身上。下面分享“5W1H”，供讀者借鑒。

What 用戶要做什么？用戶的期望是什么？

Why 用戶的目標(biāo)什么？用戶為什么有這樣的想法？

Where 用戶處在何種場(chǎng)景活應(yīng)用環(huán)境中使用系統(tǒng)？

When 用戶什么時(shí)間使用這些功能？

Who 誰(shuí)在使用這一系統(tǒng)？他們有什么差異？他們的習(xí)慣有何不同？

How 用戶的業(yè)務(wù)流程是什么樣的？系統(tǒng)如何幫助用戶完成任務(wù)？

第二步：定義功能，劃分模塊

　　進(jìn)入這一階段表示需求已經(jīng)被分析并定義。UI設(shè)計(jì)者應(yīng)該確認(rèn)以下事項(xiàng)是否已經(jīng)清晰：

• 業(yè)務(wù)流程是否清晰？

• 數(shù)據(jù)流向是否清晰？

• 數(shù)據(jù)字典（數(shù)據(jù)信息的定義）是否清晰？

　　如果上述問(wèn)題還存有疑問(wèn)，那么就應(yīng)該停下來(lái)把前期工作做好。

　　一般步驟如下：

• Step 1：分析用戶場(chǎng)景，定義用例，得到“用例列表”、“用例圖”。

• Step 2：明確功能需求，得到“需求規(guī)格說(shuō)明書(shū)”（僅功能需求部分）。

• Step 3：劃分模塊，明確模塊的功能，涉及的實(shí)體以及模塊間的相互調(diào)用關(guān)系，數(shù)據(jù)流向，得到“功能結(jié)構(gòu)圖”、“模塊設(shè)計(jì)說(shuō)明書(shū)”或“概要設(shè)計(jì)”（僅UI部分）。

第三步：設(shè)計(jì)全局導(dǎo)航與局部導(dǎo)航

　　導(dǎo)航與標(biāo)識(shí)的設(shè)計(jì)體現(xiàn)了設(shè)計(jì)者對(duì)復(fù)雜事物的組織能力。導(dǎo)航與標(biāo)識(shí)往往密不可 分，很多時(shí)候?qū)Ш骄驮诔洚?dāng)標(biāo)識(shí)。標(biāo)識(shí)如同系統(tǒng)中的地標(biāo)，幫助用戶了解：他們身在何處，他們的目的地在哪，以及他們?nèi)绾瓮瓿刹僮龅取Ｔ诖笮拖到y(tǒng)中，標(biāo)識(shí)幫助 用戶不會(huì)迷失。導(dǎo)航則幫助用戶迅速達(dá)到目的地。

　　有3類(lèi)導(dǎo)航，分別為：

1. 結(jié)構(gòu)導(dǎo)航 結(jié)構(gòu)導(dǎo)航顯示了系統(tǒng)的層次結(jié)構(gòu)，例如：全局導(dǎo)航。

2. 關(guān)聯(lián)導(dǎo)航 關(guān)聯(lián)導(dǎo)航用于將某個(gè)頁(yè)面與和它有某種聯(lián)系的頁(yè)面相關(guān)聯(lián)，例如：顯示某項(xiàng)的詳細(xì)信息。

3. 可用性導(dǎo)航 內(nèi)容以外的所有功能導(dǎo)航都屬于可用性導(dǎo)航，是系統(tǒng)功能非常重要的標(biāo)識(shí)，其主要與某些功能頁(yè)面相關(guān)聯(lián)，例如：修改密碼。

　　導(dǎo)航有2類(lèi)模式，分別為：

1. 彈跳 用戶前往弄個(gè)子頁(yè)面，需要先跳轉(zhuǎn)到該子頁(yè)面的父級(jí)或祖父級(jí)頁(yè)面，然后逐級(jí)跳轉(zhuǎn)到該頁(yè)面。使用這個(gè)模式有兩個(gè)原因——，有太多的層次或頁(yè)面，用戶可能需要一點(diǎn)點(diǎn)地沿著標(biāo)識(shí)的路徑達(dá)到目的地；第二，用戶需要逐級(jí)與系統(tǒng)交互，確定路徑走向。

2. 蟹行 用戶像螃蟹行走一樣，在頁(yè)面之間橫向跳轉(zhuǎn)。該模式常常用于兄弟頁(yè)面之間的跳轉(zhuǎn)。

　　一般步驟如下：

• Step 1：分析用戶功能的實(shí)現(xiàn)邏輯，繪制“路徑圖”。

　　“用例圖”和“系統(tǒng) 結(jié)構(gòu)圖”都能反映出系統(tǒng)的功能結(jié)構(gòu)。但是，它們都無(wú)法反映出用戶如何使用系統(tǒng)?！奥窂綀D”反映了用戶如何使用系統(tǒng)，包含了業(yè)務(wù)邏輯，以及各功能模塊之間的 調(diào)用關(guān)系和數(shù)據(jù)流向。“路徑圖”顯示了用戶完成任務(wù)，需要在系統(tǒng)中行走的路徑，就如同地圖一樣，反映出不同功能的復(fù)雜程度。

• Step 2：分解或合并功能模塊。

　　通過(guò)分析“路徑圖”，我們可以通過(guò)合并模塊來(lái)將過(guò)程冗長(zhǎng)的路徑縮短，或者通過(guò)增加模塊，更加詳細(xì)地分解活動(dòng)，實(shí)現(xiàn)更細(xì)粒度的控制和授權(quán)。但這一切的修改，都應(yīng)該與關(guān)鍵用戶共同來(lái)完成。

• Step 3：設(shè)計(jì)導(dǎo)航欄。

　　確定導(dǎo)航欄的位置 放在頂部可以增加內(nèi)容區(qū)域的面積，但是導(dǎo)航條目過(guò)多時(shí)，一行就放不下了。放在左側(cè)，可以增加導(dǎo)航欄的面積，可以放入比橫行更多的按鈕，但是會(huì)減少內(nèi)容區(qū)域的面積。兩者給有所長(zhǎng)。需要根據(jù)需要選取。

　　設(shè)計(jì)導(dǎo)航樹(shù) 設(shè)計(jì)導(dǎo)航樹(shù)要考慮兩個(gè)問(wèn)題。，導(dǎo)航樹(shù)要適合進(jìn)行權(quán)限控制。第二，導(dǎo)航樹(shù)的層次要便于用戶使用，一般常用功能的排列靠前，還有考慮樹(shù)的深度，太深了會(huì)增加用戶的記憶負(fù)擔(dān)。

• Step 4：確定局部導(dǎo)航的形式和規(guī)模。

　　首先，要確定局部導(dǎo)航的形式，可能的形式包括：包括在Logo中添加鏈接，在數(shù)據(jù)查詢結(jié)果集中添加鏈接，“面包屑”等。

　　然后，確定局部導(dǎo)航的規(guī)模，局部導(dǎo)航過(guò)多會(huì)使系統(tǒng)路徑相對(duì)復(fù)雜，增大開(kāi)發(fā)工作量。因此，應(yīng)該壓低局部導(dǎo)航的數(shù)量，力爭(zhēng)做到簡(jiǎn)單實(shí)用。

• Step 5：動(dòng)畫(huà)設(shè)計(jì)。

　　具有動(dòng)畫(huà)的導(dǎo)航具有 更高的用戶體驗(yàn)，而且對(duì)于數(shù)據(jù)需要延遲加載的導(dǎo)航來(lái)說(shuō)，動(dòng)畫(huà)效果是必須的。然而，使用的場(chǎng)合要區(qū)別對(duì)待，并不是效果越絢麗越好。動(dòng)畫(huà)只需要流暢并能夠個(gè)用 戶以反饋就好，畢竟對(duì)于應(yīng)用系統(tǒng)而言，業(yè)務(wù)處理才是其核心價(jià)值，不能浪費(fèi)項(xiàng)目組的寶貴資源來(lái)打造一個(gè)“花瓶”。

第四步：界面設(shè)計(jì)

 　　界面設(shè)計(jì)最簡(jiǎn)單的方法就是參考同類(lèi)系統(tǒng)的UI設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目和用戶需要 進(jìn)行調(diào)整。界面設(shè)計(jì)有極大的自由度，因此也帶來(lái)的一定的風(fēng)險(xiǎn)。設(shè)計(jì)者需要很強(qiáng)的業(yè)務(wù)知識(shí)，如果缺乏對(duì)用戶工作的了解，很可能無(wú)法理解用戶的真正期望。因 此，調(diào)研和溝通非常重要。界面設(shè)計(jì)長(zhǎng)犯以下錯(cuò)誤：

問(wèn)題	描述	解決方法
少字段	這類(lèi)錯(cuò)誤經(jīng)常在后期開(kāi)發(fā)階段才能發(fā)現(xiàn)，即便是使用原型向用戶演示，常人也很難發(fā)現(xiàn)缺少某些數(shù)據(jù)。	在設(shè)計(jì)界面時(shí)，就嚴(yán)格篩選界面包含的實(shí)體及其屬性，考慮數(shù)據(jù)的收集和流向問(wèn)題。
界面假死	當(dāng)程序執(zhí)行某個(gè)耗時(shí)的操作時(shí)，沒(méi)有給用戶以反饋，用戶錯(cuò)誤認(rèn)為系統(tǒng)down掉了，此時(shí)有些用戶不會(huì)耐心地等待系統(tǒng)反饋，而是以設(shè)計(jì)者難以預(yù)期的方式操作。	使用動(dòng)畫(huà)來(lái)提示用戶系統(tǒng)“忙”。
風(fēng)格凌亂	當(dāng)多位設(shè)計(jì)人員參與到界面設(shè)計(jì)時(shí)，容易發(fā)生風(fēng)格不統(tǒng)一是事情，如樣式差異，多種同義詞，處理方式的不同等。	約定規(guī)范，統(tǒng)一風(fēng)格，由責(zé)任人負(fù)責(zé)統(tǒng)領(lǐng)全局。
有去無(wú)回	某些操作完全是單向的，一旦進(jìn)入無(wú)法返回，UI設(shè)計(jì)沒(méi)有為用戶提供相反的操作路徑。	嚴(yán)格審核“路徑圖”。
歧義	同一界面中多個(gè)標(biāo)識(shí)指向相同的位置，讓用戶感到迷茫。	減少不必要的局部導(dǎo)航。
無(wú)法實(shí)現(xiàn)	UI設(shè)計(jì)人員不了解開(kāi)發(fā)技術(shù)，錯(cuò)估技術(shù)難度，設(shè)計(jì)了超出成本或超過(guò)開(kāi)發(fā)團(tuán)隊(duì)能力的界面。	技術(shù)人員參與UI設(shè)計(jì)。
海量信息	UI給用戶呈現(xiàn)了過(guò)多的數(shù)據(jù)，讓用戶感覺(jué)到系統(tǒng)難以使用，并且極大地破壞系統(tǒng)的美觀程度。	優(yōu)先“隱藏”而非“禁用”；展示用戶期望的數(shù)據(jù)；分層次展示數(shù)據(jù)。
大量的手工輸入	UI沒(méi)有幫助用戶完成信息的采集，沒(méi)有進(jìn)行驗(yàn)證，也沒(méi)有試圖減少用戶使用系統(tǒng)的工作量，造成用戶在錄入數(shù)據(jù)上過(guò)多地承擔(dān)責(zé)任。	讓系統(tǒng)盡力分擔(dān)用戶工作，減少用戶使用系統(tǒng)時(shí)的工作量，并對(duì)用戶信息進(jìn)行驗(yàn)證，對(duì)錯(cuò)誤進(jìn)行提升。
缺少提示	用戶在進(jìn)行某些重要操作時(shí)，UI沒(méi)有盡到提升義務(wù)，易造成用戶使用時(shí)無(wú)意識(shí)地破壞數(shù)據(jù)。	確認(rèn)對(duì)話框。
臆測(cè)界面	設(shè)計(jì)人員從自己使用系統(tǒng)的角度出發(fā)來(lái)設(shè)計(jì)界面。由于缺少業(yè)務(wù)經(jīng)驗(yàn)，往往會(huì)與用戶期望發(fā)生偏差。	溝通，溝通，以及溝通。
無(wú)序且沒(méi)有重點(diǎn)	UI的標(biāo)識(shí)不明顯，沒(méi)有起到引導(dǎo)用戶的作用，導(dǎo)航欄顯得沒(méi)有秩序，用戶看不出當(dāng)前界面有那些重點(diǎn)。	為功能需求排序，常用功能應(yīng)該得到更好的位置。

第五步：界面分割與整合

• Step 1：從權(quán)限或功能復(fù)用角度將現(xiàn)有頁(yè)面分塊。

• Step 2：按功能將所有塊分組。

• Step 3：分析每個(gè)分組中塊間的共性與差異，結(jié)合每個(gè)塊所包含實(shí)體的差異，來(lái)考慮該分組模塊的可復(fù)用性。

• Step 4：以分組為單位，抽象各個(gè)功能塊，并作為整體UI的一塊積木。

• Step 5：使用新的UI分塊來(lái)重組各個(gè)界面。

• Step 6：在使用可復(fù)用組件組成的UI中，從包含的業(yè)務(wù)實(shí)體及數(shù)據(jù)傳遞角度重新考慮可行性。

• Step 7：完成整體的迭代后，為各個(gè)功能塊界面定義編號(hào)，并完整描述。

第六步：開(kāi)發(fā)原型->演示->收集反饋->改進(jìn)

　　以用戶為中心設(shè)計(jì)系統(tǒng)的很重要的一步就是收集用戶反饋。完成原型開(kāi)發(fā)，并及時(shí)向用戶演示，與用戶頻繁地交流，共同測(cè)試系統(tǒng)原型，能有效促成UI的高可用性。

三 設(shè)計(jì)圖標(biāo)

　　圖形隱喻就是通過(guò)圖形暗示用戶的一種技巧。比如Windows里的回收站，歷 代Windows系列產(chǎn)品，只要我們看見(jiàn)那個(gè)“垃圾桶”我們就知道那是回收站?？梢?jiàn)，好的UI，往往需要對(duì)圖標(biāo)進(jìn)行定制化設(shè)計(jì)，使其包含某種隱喻來(lái)引導(dǎo)用 戶使用系統(tǒng)。圖形隱喻可以推廣到整個(gè)UI設(shè)計(jì)，不僅僅是圖標(biāo)設(shè)計(jì)，尤其是在游戲軟件中。令我深有感觸的就是《星際爭(zhēng)霸II》，其UI設(shè)計(jì)無(wú)疑增加了游戲整 體的用戶體驗(yàn)。但是，使用圖形隱喻存在一定風(fēng)險(xiǎn)。UI設(shè)計(jì)者的個(gè)人看法，如果與大多數(shù)的人有偏差，就會(huì)適得其反。畢竟，我們做的仍然是應(yīng)用軟件而不是游 戲，不會(huì)有強(qiáng)大的美工和設(shè)計(jì)團(tuán)隊(duì)，在我們追求前衛(wèi)設(shè)計(jì)的時(shí)候，可能會(huì)讓用戶感到困惑。因此，筆者從風(fēng)險(xiǎn)和成本角度考慮，并不建議在應(yīng)用軟件中過(guò)多地依賴圖 形隱喻。也許，我們的軟件沒(méi)有什么特點(diǎn)，但作為應(yīng)用軟件UI，簡(jiǎn)約、易用、高效才是我們?cè)O(shè)計(jì)的目標(biāo)。所以，在此我只考慮圖標(biāo)的設(shè)計(jì)原則。

　　圖標(biāo)設(shè)計(jì)的核心思想——用美觀的圖形抽象現(xiàn)實(shí)事務(wù)（事物）。以下是一些指導(dǎo)原則：

• 圖標(biāo)風(fēng)格應(yīng)該保持一致，并且與系統(tǒng)UI相輔相成。

• 圖標(biāo)應(yīng)該提供清晰的標(biāo)識(shí)，要選擇合適的隱喻，例如回收站就用“垃圾桶”來(lái)隱喻。

• 圖標(biāo)不會(huì)因文化而引起歧義。

• 圖標(biāo)應(yīng)該簡(jiǎn)單明了，應(yīng)該保證用戶可以看清。

• 不要挑戰(zhàn)用戶的智商，直截了當(dāng)?shù)膱D標(biāo)更受歡迎。

• 圖標(biāo)的隱喻應(yīng)該是約定俗成的，不應(yīng)該修改那些普遍被大眾所接受的方式，新的設(shè)計(jì)往往讓用戶迷惑。

• 如果有行業(yè)的標(biāo)準(zhǔn)，如“播放”、“暫?！保驮撃爻梢?guī)。

　　圖標(biāo)設(shè)計(jì)，可能已經(jīng)超出了我們大多數(shù)人的技術(shù)范疇。這類(lèi)工作更適合于專(zhuān)業(yè)的美工來(lái)完成，而不是UI設(shè)計(jì)人員。如果你不擅長(zhǎng)矢量作圖，請(qǐng)一名專(zhuān)業(yè)美工可能更好。

 

 

以上 【UI設(shè)計(jì)就是Web的靈魂】的內(nèi)容由欣創(chuàng)網(wǎng)絡(luò)（ http://www.fzjsmy.com）收集整理，本文網(wǎng)址 ： http://www.fzjsmy.com/news/wdps7qyz.html ，轉(zhuǎn)載請(qǐng)注明出處，如有侵權(quán)，聯(lián)系刪除！

更多有關(guān)漢中網(wǎng)站建設(shè)，漢中網(wǎng)站設(shè)計(jì)、漢中網(wǎng)站制作、漢中做網(wǎng)站公司、微信公眾平臺(tái)開(kāi)發(fā)、電商平臺(tái)建設(shè) 等互聯(lián)網(wǎng)應(yīng)用服務(wù)都可以聯(lián)系我們。網(wǎng)站建設(shè)熱線： 0916-2233667/手機(jī)：18700660007（朱先生）