1)戰(zhàn)略層——網(wǎng)站目標(biāo)和用戶(hù)需求
成功的用戶(hù)體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”。
這些戰(zhàn)略不僅僅包括網(wǎng)站經(jīng)營(yíng)者想從網(wǎng)站得到什么，還包括用戶(hù)想從網(wǎng)站得到什么。
就我們?cè)诰W(wǎng)上購(gòu)書(shū)的例子而言，一些戰(zhàn)略目標(biāo)是顯而易見(jiàn)的：用戶(hù)想要什么書(shū)，我們想要賣(mài)出它們。另一些目標(biāo)可能并不是那么容易說(shuō)清楚的。
2)范圍層——功能規(guī)格和內(nèi)容說(shuō)明
帶著“我們想要什么”、“我們的用戶(hù)想要什么的”的明確認(rèn)識(shí)，我們就能弄清楚如何去滿(mǎn)足所有這些戰(zhàn)略的目標(biāo)。
當(dāng)你把用戶(hù)需求和網(wǎng)站目標(biāo)轉(zhuǎn)變成網(wǎng)站應(yīng)該提供給用戶(hù)什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍。
比如：在線(xiàn)賣(mài)書(shū)的網(wǎng)站提供了一個(gè)功能，是用戶(hù)可以保存之前的郵寄地址，這樣它們可以再次使用它。這個(gè)功能就屬于“范圍層”要解決的問(wèn)題。
3)結(jié)構(gòu)層——交互設(shè)計(jì)與信息架構(gòu)
在收集完用戶(hù)需求并將其排列好優(yōu)先級(jí)別之后，我們對(duì)于最終展品將會(huì)包括什么特性已經(jīng)有了清楚的圖像。
然而，這些需求并沒(méi)有說(shuō)明如何將這些分散的片段組成一個(gè)整體。
這就是范圍層的上面一層：為網(wǎng)站創(chuàng)建一個(gè)概念結(jié)構(gòu)。
4)框架層——界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)
在充滿(mǎn)概念的結(jié)構(gòu)層中開(kāi)始形成了大量的需求，這些需求都是來(lái)自我們的戰(zhàn)略目標(biāo)的需求。
在框架層，我們要更進(jìn)一步地提煉這些結(jié)構(gòu)，確定很詳細(xì)的界面外觀(guān)、導(dǎo)航和信息設(shè)計(jì)，這能讓美色的結(jié)構(gòu)變得更實(shí)在。
5)表現(xiàn)層——視覺(jué)設(shè)計(jì)
在這個(gè)五層模型的頂端，我們把注意力轉(zhuǎn)移到網(wǎng)站用戶(hù)會(huì)先注意到的那些方面：視覺(jué)設(shè)計(jì)，這里，內(nèi)容、功能和美學(xué)匯集到一起來(lái)產(chǎn)生一個(gè)最終設(shè)計(jì)，這將滿(mǎn)足其他四個(gè)層面的所有目標(biāo)。
蘋(píng)果（Apple）公司的用戶(hù)體驗(yàn)
1.幾近完美的產(chǎn)品設(shè)計(jì)
產(chǎn)品是用戶(hù)體驗(yàn)的首要載體。蘋(píng)果（Apple）是全球在營(yíng)銷(xiāo)、服務(wù)和公關(guān)領(lǐng)域做得最出色的公司之一，但在蘋(píng)果內(nèi)部，產(chǎn)品永遠(yuǎn)是第一位的。
為了實(shí)現(xiàn)更好的用戶(hù)體驗(yàn)，蘋(píng)果（Apple）對(duì)產(chǎn)品細(xì)節(jié)的關(guān)注，近乎苛刻。
1)幾乎所有的科技產(chǎn)品，在塑料或金屬的接口處都有縫隙，但蘋(píng)果（Apple）公司創(chuàng)造了新的工藝，保證產(chǎn)品沒(méi)有縫隙。所有的產(chǎn)品上只有線(xiàn)條而沒(méi)有縫隙，甚至沒(méi)有任何可見(jiàn)的螺絲。
2)甚至普通用戶(hù)根本看不見(jiàn)的電子版，蘋(píng)果（Apple）也設(shè)計(jì)的非常優(yōu)雅和唯美。
2.簡(jiǎn)潔、高效、充分關(guān)注用戶(hù)需求的界面設(shè)計(jì)
蘋(píng)果（Apple）認(rèn)為：好的人機(jī)界面規(guī)范遵從于用戶(hù)思考和行動(dòng)的方式，而不屈從于設(shè)備的性能。一個(gè)缺乏吸引力，復(fù)雜的，或違悖邏輯的用戶(hù)界面，卻會(huì)讓原本優(yōu)秀的應(yīng)用變得索然無(wú)味。反過(guò)來(lái)，一個(gè)漂亮的，直覺(jué)感知的，引人入勝的界面能強(qiáng)化應(yīng)用程序的功能。
1)蘋(píng)果訂立必須嚴(yán)格遵守的人機(jī)界面交互指南，以保證用戶(hù)在蘋(píng)果上，能獲得一致的，較好的用戶(hù)體驗(yàn)。
2)蘋(píng)果的自有應(yīng)用，均充分考慮用戶(hù)需求、用戶(hù)操作習(xí)慣，保持一貫的簡(jiǎn)潔和高效。
3.充滿(mǎn)美好體驗(yàn)的門(mén)店設(shè)計(jì)
蘋(píng)果（Apple）的用戶(hù)體驗(yàn)，不僅在于卓越的產(chǎn)品設(shè)計(jì)，還體現(xiàn)在企業(yè)與用戶(hù)接觸溝通的每一個(gè)觸點(diǎn)、觸面上。許多用戶(hù)第一次走進(jìn)蘋(píng)果的體驗(yàn)店，最大的感受就是蘋(píng)果（Apple）體驗(yàn)店的環(huán)境設(shè)計(jì)，與其它IT電子產(chǎn)品的店面迥異。在看上去樸實(shí)無(wú)華的桌架上，各種產(chǎn)品的展示、使用恰到好處，營(yíng)造出獨(dú)一無(wú)二的購(gòu)物體驗(yàn)。
蘋(píng)果（Apple）的用戶(hù)體驗(yàn)是：
更簡(jiǎn)潔的設(shè)計(jì)
更友好的用戶(hù)界面
更方便的使用場(chǎng)景
更為高雅的外觀(guān)
更為舒適尊貴的持有感
可用性(Availability)
中國(guó)用戶(hù)根據(jù)既有經(jīng)驗(yàn)，對(duì)這種界面元素形狀及排布的解讀為：需要上下滑動(dòng)解鎖。但是，這種預(yù)期與實(shí)際情況，并不一致。當(dāng)用戶(hù)預(yù)期與產(chǎn)品實(shí)際操作發(fā)生沖突時(shí)，可用性指標(biāo)就會(huì)下降。
每個(gè)細(xì)節(jié)都經(jīng)過(guò)思考，就會(huì)提升整個(gè)產(chǎn)品的可用性。而假如很多細(xì)節(jié)都處理隨意，那么即使初看設(shè)計(jì)精美，在用戶(hù)的長(zhǎng)期使用中，依然會(huì)造成可用性體驗(yàn)下降。
易用性(Usability)
用戶(hù)需求(users' requirements)
迎合用戶(hù)需求，可以在較短時(shí)間內(nèi)，將用戶(hù)聚攏來(lái)。
引導(dǎo)用戶(hù)需求，可以將用戶(hù)向設(shè)計(jì)者希望的方向引導(dǎo)，產(chǎn)生預(yù)計(jì)的價(jià)值。
信息架構(gòu)(Information Architecture)
頁(yè)面布局(Layout)
優(yōu)秀的布局，需要對(duì)頁(yè)面信息進(jìn)行完整的考慮。即要考慮用戶(hù)需求、用戶(hù)行為，也要考慮信息發(fā)布者的目的、目標(biāo)。
【頁(yè)面布局原則】
1.公司/組織的圖標(biāo)（Logo）在所有頁(yè)面都處于同一位置。
2.用戶(hù)所需的所有數(shù)據(jù)內(nèi)容均按先后次序合理顯示。
3.所有的重要選項(xiàng)都要在主頁(yè)顯示。
4.重要條目要始終顯示。
5.重要條目要顯示在頁(yè)面的頂端中間位置。
6.必要的信息要一直顯示。
7.消息、提示、通知等信息均出現(xiàn)在屏幕上目光容易找到的地方。
8.確保主頁(yè)看起來(lái)像主頁(yè)（使主頁(yè)有別于其它二三級(jí)頁(yè)面）。
9.主頁(yè)的長(zhǎng)度不宜過(guò)長(zhǎng)。
11.頁(yè)面長(zhǎng)度要適當(dāng)。
12.在長(zhǎng)網(wǎng)頁(yè)上使用可點(diǎn)擊的“內(nèi)容列表”。
13.專(zhuān)門(mén)的導(dǎo)航頁(yè)面要短小（避免滾屏，以便用戶(hù)一眼能瀏覽到所有的導(dǎo)航信息，有全局觀(guān)）。
14.優(yōu)先使用分頁(yè)（而非滾屏）。
15.滾屏不宜太多（最長(zhǎng)4個(gè)整屏）。
16.需要仔細(xì)閱讀理解文字時(shí)，應(yīng)使用滾屏（而非分頁(yè)）。
17.為框架提供標(biāo)題。
18.注意主頁(yè)中面板塊的寬度。
19.將一級(jí)導(dǎo)航放置在左側(cè)面板。
20.避免水平滾屏。
21.文本區(qū)域的周?chē)欠裼凶銐虻拈g隔。
22.各條目是否合理分類(lèi)于各邏輯區(qū)，并運(yùn)用標(biāo)題將各區(qū)域進(jìn)行清晰劃分。
【?案例】 頁(yè)面布局和眼動(dòng)軌跡研究
眼動(dòng)研究是隨著用戶(hù)體驗(yàn)的興起與技術(shù)設(shè)備的進(jìn)步，而興起的一種用戶(hù)研究方法。
它是眼動(dòng)技術(shù)與研究方法的二合一，通過(guò)眼動(dòng)研究觀(guān)察被試者對(duì)移動(dòng)應(yīng)用頁(yè)面的注視軌跡，輔助完成用戶(hù)體驗(yàn)設(shè)計(jì)。
通過(guò)眼動(dòng)研究，不但可以完整地還原被試者在各個(gè)頁(yè)面的注視軌跡，還可以通過(guò)劃分興趣區(qū)分析被試者在各區(qū)域內(nèi)容的關(guān)注度。
眼動(dòng)研究提供的信息不只是人們是怎樣“看”東西的這么簡(jiǎn)單，眼動(dòng)反映了人腦的信息處理過(guò)程，眼動(dòng)模式的特點(diǎn)與腦的信息處理都有密切的關(guān)系。
交互設(shè)計(jì)(Interaction Design)
?人機(jī)交互(Human-Computer Interaction)
【案例】人機(jī)交互的變革-手勢(shì)操作
手機(jī)上的手勢(shì)操作可以說(shuō)是蘋(píng)果給我們帶來(lái)的最大驚喜，自從手機(jī)誕生以來(lái)，鍵盤(pán)就成了人機(jī)交互的主宰，隨后間或出現(xiàn)的全鍵盤(pán)或者語(yǔ)音也并未打破這一局面，直到iPhone、iPad的誕生，這一以觸摸為基礎(chǔ)的操作形式帶來(lái)了不同于呆板的鍵盤(pán)和點(diǎn)擊的有趣體驗(yàn)。
【未來(lái)人機(jī)交互趨勢(shì)】
1.多指操作。?
2.手勢(shì)操作+NFC的近場(chǎng)高速傳輸。
NFC也就是近場(chǎng)通訊，借助短距離的高頻無(wú)線(xiàn)通信，完成兩臺(tái)手機(jī)之間在距離非常近的時(shí)候非接觸式的點(diǎn)對(duì)點(diǎn)數(shù)據(jù)傳輸，NFC目前已經(jīng)在手機(jī)支付領(lǐng)域付諸應(yīng)用。
3.手勢(shì)操作+3D全息投影
4.手勢(shì)+語(yǔ)音+？
用戶(hù)界面(User Interface)
圖形界面(Graphical User Interface)
流程(Flow)
流程描述的是用戶(hù)完成任務(wù)的一系列操作及順序，是在界面上，對(duì)任務(wù)的翻譯。
它決定整個(gè)界面的信息架構(gòu)和操作邏輯。
導(dǎo)航(Navigation)
控件(Widget)
數(shù)據(jù)和方法的封裝。
用戶(hù)界面控件(User Interface Widget)
信息(Information)
在文字基本原則的基礎(chǔ)上，好的信息還應(yīng)該強(qiáng)調(diào)：
1.使用有結(jié)束標(biāo)點(diǎn)符號(hào)的完整句子。
2.統(tǒng)一使用中文標(biāo)點(diǎn)。恰當(dāng)?shù)氖褂瞄g隔標(biāo)點(diǎn)符號(hào)和結(jié)束標(biāo)點(diǎn)符號(hào)。
3.避免使用粗體。
4.避免縮寫(xiě)。特別是在技術(shù)性的消息中
提示信息(Prompt Message)
反饋信息(Feedback Information)
警示信息(Warning Information)
以用戶(hù)為中心的設(shè)計(jì)(User Centered Design)
在開(kāi)發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶(hù)列入考慮范圍。
① 需求分析
目的：根據(jù)產(chǎn)品需求和設(shè)計(jì)要求提供用戶(hù)使用分析。
方式：訪(fǎng)談、焦點(diǎn)小組、提煉目標(biāo)用戶(hù)建立角色模型、場(chǎng)景分析、競(jìng)爭(zhēng)對(duì)手分析、提煉定性和定量的相關(guān)數(shù)據(jù)。
結(jié)論報(bào)告：根據(jù)分析目標(biāo)用戶(hù)的使用特征、情感、習(xí)慣、心理、需求等，提出用戶(hù)研究報(bào)告和可用性設(shè)計(jì)建議。
②?原型設(shè)計(jì)
目的：概念方案設(shè)計(jì)。制定產(chǎn)品的業(yè)務(wù)功能和界面規(guī)范。
方式：與開(kāi)發(fā)隊(duì)伍合作設(shè)計(jì)各種交互原型。作角色模型設(shè)計(jì)和情景設(shè)計(jì)，通過(guò)情景的再現(xiàn)演示來(lái)總結(jié)和逐步細(xì)化用戶(hù)使用中的各種交互需求，提出設(shè)計(jì)解決方案，并完成設(shè)計(jì)方案的演示，討論，完善，和最終定稿。
結(jié)論報(bào)告：制作交互設(shè)計(jì)原型。為用戶(hù)界面和交互設(shè)計(jì)實(shí)施提供設(shè)計(jì)標(biāo)準(zhǔn)規(guī)格。
③?專(zhuān)家評(píng)審
④?交互DEMO
⑤?可用性測(cè)試
目的: 通過(guò)觀(guān)察，來(lái)發(fā)現(xiàn)過(guò)程中出現(xiàn)了什么問(wèn)題、用戶(hù)喜歡或不喜歡哪些功能和操作方式，原因是什么。
方式：一對(duì)一用戶(hù)測(cè)試
結(jié)論報(bào)告：用戶(hù)背景資料文檔、用戶(hù)協(xié)議、測(cè)試腳本、測(cè)試前問(wèn)卷、測(cè)試后問(wèn)卷、任務(wù)卡片、過(guò)程記錄文檔、測(cè)試報(bào)告
⑥?視覺(jué)管理
目的：使界面設(shè)計(jì)更符合產(chǎn)品定位，用戶(hù)使用習(xí)慣及規(guī)范布局，對(duì)實(shí)現(xiàn)功能進(jìn)行正確有效地引導(dǎo)。
方式：主持用戶(hù)研究進(jìn)行界面視覺(jué)引導(dǎo)。設(shè)計(jì)窗口規(guī)范，圖形化的布局。
結(jié)論報(bào)告 ：界面測(cè)試報(bào)告、視覺(jué)設(shè)計(jì)規(guī)范。
⑦?切割編碼
⑧?發(fā)布跟蹤
目的：產(chǎn)品使用結(jié)果的反饋。
方式 ：用戶(hù)訪(fǎng)談，用戶(hù)反饋
結(jié)論報(bào)告：根據(jù)反饋意見(jiàn)及實(shí)際調(diào)查并根據(jù)預(yù)期目的撰寫(xiě)產(chǎn)品反饋結(jié)果報(bào)告。包括值得肯定的設(shè)計(jì)及對(duì)修改的建議。
尼爾森十原則(Ten principles of Nelson)
1.可視性原則：系統(tǒng)狀態(tài)有反饋，等待時(shí)間要合適。
2.不要脫離現(xiàn)實(shí)：使用用戶(hù)語(yǔ)言而不是開(kāi)發(fā)者語(yǔ)言，貼近生活實(shí)際而不是學(xué)術(shù)概念。
3.用戶(hù)有自由控制權(quán)：操作失誤可回退。
4.一致性原則：同一事物和同類(lèi)操作的表示用語(yǔ)要各處保持一致。
5.有預(yù)防用戶(hù)出錯(cuò)的措施：關(guān)鍵操作有確認(rèn)提示，及早消除誤操作。
6.要在第一時(shí)間讓用戶(hù)看到：識(shí)別勝于回憶，提供必要的信息提示（可視&易取），減少記憶負(fù)擔(dān)。
7.使用起來(lái)靈活且高效：為新手和專(zhuān)家設(shè)計(jì)定制化的操作方式，快捷操作可調(diào)整。
8.易讀性：減少無(wú)關(guān)信息，體現(xiàn)簡(jiǎn)潔美感。
9.給用戶(hù)明確的錯(cuò)誤信息，并協(xié)助用戶(hù)方便的從錯(cuò)誤中恢復(fù)工作
10.必要的幫助提示與說(shuō)明文檔：無(wú)需文檔就能流暢應(yīng)用當(dāng)然更好，一般地文檔很必要，而且也提供便利的檢索功能，面向用戶(hù)任務(wù)描述，列出具體實(shí)現(xiàn)步驟，并且不要太冗長(zhǎng)。
![]()
在5大維度的基礎(chǔ)上，尼爾森（Jakob nielsen）發(fā)展了一套沿用至今的啟發(fā)式評(píng)估指南兼原則。
?
線(xiàn)框圖(Wireframe)
創(chuàng)建線(xiàn)框圖需要完成以下三個(gè)層次的工作：
1.明確線(xiàn)框圖的基本要素。線(xiàn)框圖的基本要素包括內(nèi)容區(qū)域、內(nèi)容描述、內(nèi)容優(yōu)先權(quán)層級(jí)、辨識(shí)信息、管理信息。
2.填寫(xiě)故事。內(nèi)容包括場(chǎng)景、鏈接和窗體元素、注釋、目標(biāo)和基本原理、版本歷史。
3.增加可選細(xì)節(jié)。包括排布和視覺(jué)設(shè)計(jì)、整個(gè)設(shè)計(jì)中的背景信息和內(nèi)容舉例。
通用設(shè)計(jì)
通用設(shè)計(jì)是指對(duì)于產(chǎn)品的設(shè)計(jì)和環(huán)境的考慮是盡最大可能面向所有的使用者的一種創(chuàng)造設(shè)計(jì)活動(dòng)。
① The design is useful and marketable to people with diverse abilities.
② The design accommodates a wide range of individual preferences and abilities.
③ Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
④ The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
⑤ The design minimizes hazards and the adverse consequences of accidental or unintended actions
⑥ The design can be used efficiently and comfortably and with a minimum of fatigue.
⑦ Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.
