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

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

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

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

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

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

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

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

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

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

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

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

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

二 UI設(shè)計流程

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

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

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

　　一般步驟如下：

• Step 1：與用戶訪談，并記錄用戶描述，得到“訪談記錄”。

• Step 2：整理訪談記錄，并得到“用戶故事”。

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

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

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

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

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

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

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

When 用戶什么時間使用這些功能？

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

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

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

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

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

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

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

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

　　一般步驟如下：

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

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

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

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

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

　　有3類導(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)航用于將某個頁面與和它有某種聯(lián)系的頁面相關(guān)聯(lián)，例如：顯示某項的詳細(xì)信息。

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

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

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

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

　　一般步驟如下：

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

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

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

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

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

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

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

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

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

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

• Step 5：動畫設(shè)計。

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

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

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

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

第五步：界面分割與整合

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

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

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

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

• Step 5：使用新的UI分塊來重組各個界面。

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

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

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

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

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

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

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

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

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

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

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

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

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

• 如果有行業(yè)的標(biāo)準(zhǔn)，如“播放”、“暫停”，就該墨守成規(guī)。

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

 

 

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

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