就這么簡單-Web開發中的可用性和用戶體驗（簡體書）

本書主要講述人機交互學(Human-Computer Interaction，簡稱HCI)這一學科在Web界面設計領域中的應用。 正如你所看到的，這是一本文字輕松，而且有很多好玩插圖的……技術理論書籍。 沒錯，技術理論。它將和你討論關于軟件(或網站)的界面與用戶之間的關系——界面是你做的，而使用它的是用戶——所以，別自信滿滿地說自己做得很牛，讓我們聽聽用戶的意見。這本書能告訴你這一套順序大概是怎樣的，你應該注意些什么，最終水到渠成的是一個能經得起考驗的產品。 這本書可以說是一本針對廣泛大眾，以及那些沒有接受過人機交互和可用性專業培訓的用戶界面設計人員的輔導和幫助手冊。你不必背誦那些拗口的專業詞匯，你只需知道“我該如何去做”從而解決問題。這本身也是人機交互學科的一個重要原則——“易于學習，從而便于使用”。 你明白了。這不是本情節跌宕起伏的小說，也不是行文優美如詩的散文。但我仍然希望它能給人帶來快樂——學習不是一件枯燥的事，但很多人把它變得枯燥了。絕大多數技術理論書籍的作者們都正襟危坐就好像板著面孔的老師，不可否認，對待學術問題應當態度嚴謹，但是嚴謹不代表枯燥，能在專業知識課堂上把大家逗笑的老師一定不簡單。 我不敢說我做到了，但我在努力。

向怡寧，嗨，大家好，我是向怡寧，一直從事UI設計方面的工作。 越是深入了解UI設計，越發現自身的不足，同時也越感到應該盡自己的力量讓更多的人了解這一領域。也許我不是最好的設計師，但我希望通過這本書，你能成為最好的。 作為這本書的作者，我表現得一點也不嚴肅。我希望它能給你帶來樂趣——因為學習并不是一件枯燥的事。 在平時，我喜歡設計游戲、玩音樂、做翻譯，有時還會出去涂鴉。之前也寫過一本書《Flash組件、游戲、SWF力口解密》，反響還不錯。我有一只貓（它叫畢加索）和一只綠鬣蜥（它叫修羅）。我覺得生活是美好的，希望能和大家成為一同體驗和探索這個世界的朋友。

前 言
序章 關于這本書
　0.1 誰該看這本書？
　0.2 這是本什么樣的書？
　0.3 怎么用這本書？
　0.4 感謝這些伙計
第一章 你首先要知道的一些事情
　1.1 我聽說過這些詞不過它們到底是什么？
1.1.1 什么是UI設計
1.1.2 什么是交互設計
1.1.3 什么是好的用戶界面設計
視覺表達不清
非常繁瑣
提示混亂
難以使用
強迫用戶
1.1.4 那么該怎么做？
什么人會使用產品？用在什么地方？
用戶會有些什么樣的行為？
　1.2 我干嘛得學這些玩意還要買本書？！
1.2.1 用戶界面不是次要的工作
1.2.2 用戶界面設計不是界面程序設計，也不是界面圖形設計
對于軟件設計師來說
對于美術設計師來說
真正的用戶界面設計人員
1.2.3 交互設計是一門跨學科領域
1.2.4 不用成為專家，理解方式即可
　1.3 OK，那我該怎么做？
1.3.1 交互設計的4個內容
理解用戶需要，建立用戶需求
開發一些候選設計方案
制作設計方案的原型
用戶測試和評估
1.3.2 交互設計的3個特征
以用戶為中心
建立明確具體的可用性標準
反復迭代
1.3.3 交互設計的2個目標
可用性目標
用戶體驗目標
1.3.4 摩西的十誡
讓用戶隨時了解系統的狀態
系統應與真實世界相符合
給予用戶控制權和自主權
提倡一致性和標準化
幫助用戶識別、診斷和修復錯誤
預防錯誤
依賴識別而不是記憶
強調使用的靈活性及有效性
最小化設計
提供幫助及文檔
1.3.5 如何粗略地評估可用性
第二章 了解用戶，了解需求
　2.1 誰是用戶？
2.1.1 普遍而又特殊的用戶
用戶的普遍性
用戶的特殊性
兩者兼顧
2.1.2 用戶可不是越多越好
2.1.3 “阿童木”的誕生
　2.2 什么是需求？
2.2.1 “需要”產生需求
2.2.2 點了牛扒，端上來的卻是意大利面
2.2.3 各種類型的需求
功能需求
用戶需求
數據需求
環境需求
可用性需求
　2.3 如何確定需求
2.3.1 介紹一些數據搜集的方法
問卷調查
用戶訪談
觀察和提問
集體討論
2.3.2 筷子、刀叉和勺，哪種餐具最好？
2.3.3 一些要注意的地方
一切的重點都是為了搞清楚用戶需要什么
要考慮所有的用戶類別
每個用戶類別只派一位代表參與是不充分的
打“組合拳”，不要單一套路
在可能的情況下，先小規模試驗
如果得到的需求信息太多
記錄數據同樣很重要
2.3.4 解釋與分析數據——一道填空題
　2.4 歸根結底，我們要了解任務
2.4.1 用講故事來描述任務
2.4.2 用流程圖描述任務
2.4.3 理想和現實的差距
守舊的用戶
過分的用戶
妥協還是抗爭？
　2.5 環境？什么是環境？
　2.6 做個小結
第三章 設計方案和制作原型
　3.1 為什么，以及怎么做
　3.2 初級原型和高級原型
3.2.1 初級原型很重要
草圖，或者說涂鴉
連環畫
制作卡片
模擬界面
3.2.2 高級原型同樣重要
3.2.3 嗯，不過原型僅僅只是原型
　3.3 概念設計，或者說初步設計
3.3.1 伙計們，讓我們先考慮功能
3.3.2 概念模型是個什么玩意？
開放思路，同時考慮用戶和應用環境
保持簡單，但也不要過于簡單
使用初級原型來快速獲取反饋
反復迭代進行設計
3.3.3 開發概念模型的幾個問題
采用什么樣的交互方式？
是更“智能”還是更“服帖”？
是否存在合適的熟悉概念進行映射比擬？
3.3.4 在概念設計中使用原型
　3.4 物理設計，或者說具體設計
3.4.1 一些具體的設計指南
力求一致性
允許頻繁使用系統的用戶使用快捷鍵
提供明確的反饋
設計對話，告訴用戶任務已完成
提供錯誤預防和簡單的糾錯功能
應該方便用戶取消某個操作
用戶應掌握控制權
減輕用戶的記憶負擔
3.4.2 界面元素和界面風格
3.4.3 菜單（或者導航欄）的設計
3.4.4 圖標的設計
不要“辭不達意”
小而簡單
3.4.5 屏幕布局的設計
大的方針
同時也要考慮細節
還要很多地方需要注意
3.4.6 別理那些復雜的工具，我們做的是Web
第四章 以用戶為中心的開發
　4.1 為什么要讓用戶摻和進來？
告訴他們別太天真
另一方面他們才是真正的主人
　4.2 支持用戶，而不是限制他們
排第一位的永遠是用戶，不是技術
給他們最習慣的環境
要支持用戶，就得考慮周全
經常向他們咨詢意見
　4.3 如何讓用戶參與？
4.3.1 用戶參與的不同形式
極端之一：讓用戶作為設計組成員
極端之二：用戶遠距離參與設計
4.3.2 用戶參與的是與非
　4.4 別用望遠鏡，要現場研究
4.4.1 關于現場研究
4.4.2 你是師傅，我是徒弟
不是在會客室
建立正確的關系
該問就大膽問
不要跑題太遠
4.4.3 這不是你的地盤，別太不拘小節
4.4.4 我們能得到什么？
第五章 文化的差異
　5.1 什么是文化的差異？
　5.2 對于Web和Web-based產品來說
5.2.1 一次要做幾件事？
5.2.2 高度認知和低度認知
5.2.3 功能還是關系？
5.2.4 網頁和界面的視覺反映
5.2.5誰的錯？
　5.3 國際化和本土化
注意適配分辨率的大小
盡量多用被廣泛接受的圖標
繪制圖標時注意地域性
翻譯時使用用戶習慣的表達方式
注意不同地區使用的單位和格式
注意文字的輸入
避免出現對某些地區不適用的信息
其它方面
第六章 網頁的可用性
　6.1 人們是如何使用網頁的？
6.1.1 他們很會節省時間
6.1.2 他們也不會仔細考慮
　6.2 好感度計量器
6.2.1 我經歷過好幾次這種情況
6.2.2 這些都會降低好感度！
讓我感到郁悶
總是誤導我
總是讓我猜
總是要我找
總是說我錯
耽誤我的時間
甚至還讓我抓狂
　6.3 因此，為掃描而設計
6.3.1 更清楚的布局和視覺層次
越重要的內容越醒目
相關的內容看上去也得相關
包含的內容要顯示從屬關系
別顯示太多無關的信息
6.3.2 清晰地劃分頁面區域
6.3.3 適應用戶的習慣
6.3.4 提供目光的“落腳點”
　6.4 同時，減少用戶的思考
6.4.1 減少不確定因素
6.4.2 保證網頁的一致性
一致的網站標志和導航欄
一致的頁面布局
一致平衡的信息結構
一致的重復性元素
一致和諧的字體和色彩
一致，但不一樣
6.4.3 明顯標識可以點擊的地方
有時候下劃線可有可無
有時候最好有下劃線
超鏈接和按鈕
6.4.4 清晰、簡單的網頁內容
使用用戶的語言，而不是技術語言
使用通俗的語言，而不是故作高深
減去不必要的詞句，讓頁面更簡短
不要夸夸其談，或者讓人摸不著頭腦
　6.5 告訴用戶他們在哪里
6.5.1 導航欄存在的意義
6.5.2 導航欄所需要的元素
網站logo標識
網站的欄目
“回到首頁”
附加功能
搜索工具
6.5.3 導航指示、頁面標題和“面包屑”
導航指示
頁面標題
“面包屑”
第七章 Web-based產品
　7.1 Web或者不是Web？
有一些比較偏向于軟件
有一些則更偏向于網頁
有些產品比較單純
有些產品的用戶群比較廣大
最后它們還是網頁
　7.2 我為什么說要考慮用戶的感受
　7.3 首先看看菜單和對話框
7.3.1 我需要菜單，但必須是好菜單
時隱時現的菜單項
探頭探腦的菜單項
7.3.2 讓我陷入困境的對話框
讓我沒有選擇
讓我不知道該怎么選擇
沒有第三種選擇
　7.4 你真明白那些控件的作用嗎？
7.4.1 單選按鈕和復選框
把復選框當作單選按鈕
把單選按鈕當作復選框
是必須要我選，還是不需要我選？
7.4.2 標簽雖好，問題多多
標簽只能用來導航，不能選擇數據
到處都是的標簽
太小和太大的標簽
7.4.3 簡單而又不簡單的文本框
在不該用的地方使用文本框
該用文本框的地方卻又很隨意
　7.5 每一個元素都要有合適的位置
7.5.1 控件的擺放位置
胡亂放置的按鈕
距離產生美？
7.5.2 你無法逃避的對齊方式
是左對齊還是右對齊
不要只注意一邊
如果有時候左右都不能對齊
上下也要對齊
第八章 測試可用性
　8.1 為什么要測試？
8.1.1 美國到底民主還是不民主？
我喜歡的，別人也應該喜歡
角色的不同導致看法不同
8.1.2 這不是簡單的是非題
　8.2 幾個要注意的事實
8.2.1 一些需要記住的事實
可用性測試不是軟件測試
哪怕只測試一個用戶，也比不做測試要好
早點測試一個用戶，好過最后測試100個用戶
“迭代”的測試和頻繁的測試
測試后馬上回顧測試結果
8.2.2 一些需要避免的認識
不要認為可用性測試很難
不要認為可用性測試總是非常昂貴
不要認為可用性測試是表層問題
不要認為測試是要去“證明”什么
不要僅僅測試，卻不糾正發現的問題
　8.3 測試的前期準備
8.3.1 測試的地點和設備
最正式和最精良的裝備
你也可以優化和精簡
8.3.2 測試用戶的招募
測試用戶的選擇
究竟每次應該測試多少用戶？
如何招募用戶？
8.3.3 主持人和觀眾
誰適合當測試的引導人？
誰適合當測試的觀察者？
8.3.4 道德問題
　8.4 測試的過程
8.4.1 設計好考題
8.4.2 介紹階段
8.4.3 正式測試
觀察用戶
讓用戶進行有聲思考
提出問題
尊重測試用戶
一個實例你就能明白
8.4.4 馬上回顧和總結
　8.5 讓專家來評估（別忘了，你也是專家）
8.5.1 現成的原則——啟發式評估
8.5.2 你也可以看看這些具體的評估角度
關于一致性的評估
關于界面簡潔性的評估
關于信息反饋的評估
關于用戶動作性的評估
關于產品特色的評估
　8.6 測試需要修正
有些問題可以忽略
有些要求也可以忽略
別顧此失彼！
第九章 了解滿意度
　9.1 詢問用戶：問卷調查
　9.2 詢問用戶：訪談
終章 回到開始：什么是好的用戶界面設計