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