1. 如何設計網站——對Web設計的一點總結
在最近的工作中，遇到了導航的問題，無意中發現了找出了收藏已久的《別讓我思考》，花了一周時間讀了兩遍，才清楚的理解導航對於一個產品的重要作用。也更加印證了產品圈中將用戶當做小白的理論，其實並不是在產品設計中將一切都為用戶標注出來，而是讓用戶能夠通過自己的方式更加輕松的使用產品，這樣的產品對於用戶來說必定是不言而喻的，也就是主題「別讓我思考」。下面是這次讀書的筆記，雖然這本書給我很大的啟發，但是一切需要歸於實踐，在實踐中驗證這個理論。
一、指導原則
第一章：別讓我思考---可用性第一定律
web設計的終極法則：別讓我思考，即看到一個界面應該是不言而喻，一目瞭然，自我解釋。
強迫我們思考的地方：（1）酷炫的名字或技術名詞。（2）看起來不太明顯的按鈕和鏈接
當思考時，需要權衡，權衡應該更傾向於「顯而易見」，而不行hi需要額外的思考
每個需要思考的地方會加重用戶的認知負擔，把用戶的注意力從要完成的任務上拉開
訪問網站時不需要思考的事都有什麼？
我在什麼位置？
該從哪裡開始？
他們把xx放在什麼地方？
這個項目上最重要的是什麼？
為什麼他們給它取這個名字？
如果做不到讓一個頁面不言而喻，那麼至少應該讓它自我解釋
當瀏覽網站遇到問題時，用戶會認為是自己的錯誤，而不會責怪網站
如果要讓網頁有效，它們必須在用戶第一眼看到時將自己展示出來，而要做到這一點，最好的方法是創建不言而喻的網頁，或者至少是自我解釋。
第二章：我們實際上是如何使用Web的---掃描，滿意即可，勉強應付
事實1--我們不是閱讀，而是掃描，尋找能吸引用戶注意力的文字或詞語（除新聞故事，報告，產品描述界面）
為什麼掃描？
（1）我們總是處於忙碌之中---使用web是想節約時間
（2）我們知道自己不必閱讀所有內容---尋找感興趣或手頭的任務相關的內容
（3）我們善於掃描---生活習慣，找感興趣的內容
用戶在網頁上看到什麼卻決於想看到什麼，通常為頁面的一小部分內容
吸引注意力的文字和短語是什麼？
（1）與手頭任務有關的
（2）我們當前或接下來的個人興趣
事實2---我們不作最佳選擇，而是滿意即可
用戶大多數時間不會選擇最佳選項，而是選擇第一個合理的選項---滿意策略
為什麼不尋找最佳選擇？
（1）我們總是處於忙碌之中---最佳策略時間久，滿意策略效率高
（2）如果猜錯了，也不會產生什麼嚴重的後果
（3）對選擇進行權衡並不會改善我們的機會
（4）猜測更有意思---猜測不會像權衡那麼累，猜對了，可能看到意外的內容
事實3---我們不是追根究底，而是勉強應付
勉強應付不僅限於初學者，技術專家也會在理解事物的工作原理上有著驚人的誤會
原因是什麼？
（1）這對我們來說並不重要---明白事物工作機制並不重要
（2）如果發現某個事物能用，我們會一直使用它---如果遇到更好的方法，會用好的方法，但是很少主動尋找更好的方法
如果用戶明白網站，而不是勉強應付的作用
（1）用戶更容易找到自己需要的東西，對用戶和網站都好
（2）用戶更容易理解你的網站有哪些服務---不僅僅是用戶偶然看到的
（3）引導用戶看到你希望他們看到的內容（網站上）
（4）在你的網站上，用戶會感到掌控全局，並逐漸成為老用戶
第三章：廣告牌設計101法則---為掃描設計，不為閱讀設計
吸引用戶的5個重要方面（為下方2-6部分內容）
在每個頁面上建立清楚的視覺層次
盡量利用習慣用法
把頁面劃分成明確定義的區域
明顯標識可以點擊的地方
最大限度降低干擾
建立清楚的視覺層次
視覺層次清楚的頁面的特點
（1）越重要的部分越突出
（2）邏輯上相關的部分在視覺上也相關
（3）邏輯上包含的部分在視覺上進行嵌套
一個頁面沒有清楚的視覺層次，用戶會降低掃描頁面的速度，會尋找關鍵的文字和短語，然後拼湊出感覺重要的內容和內容的組織方式，這樣會增加工作量
習慣用法是你的好幫手
web的習慣用法
（1）它們非常有用---適當使用習慣用法，讓用戶訪問更容易，減少額外學習工作原理ide成本
（2）設計師通常不願意利用它們
如果不打算使用習慣用法，需要的做法：
a.必須確定你在使用一種同樣清楚、同樣不言而喻，沒有學習曲線的方法
b.帶來很大的價值
把頁面劃分成明確定義的區域
明顯標識可以點擊的地方
降低視覺雜訊
雜訊的分類
（1）眼花繚亂---所有的信息都想吸引用戶的目光，沒有突出點
（2）背景雜訊---頁面沒有一個地方會造成過分干擾，但是這些很小的雜訊太多會惹人厭煩
第四章：動物、植物、無機物---為什麼用戶喜歡無需思考的選擇
真正的問題不是到達目標之前要點擊的次數，而是每次點擊有多難，需要多少思考，多大的不確定性來判斷自己是否在進行正確的選擇
關鍵：如果用戶需要一直在網路上進行選擇，那麼讓這些選擇變得無需思考是讓一個網站容易使用的原因
第五章：省略不必要的文字---不要在Web上寫作的藝術
有力的文字都很簡練。句子里不應該有多餘的文字，段落中不應該有多餘的句子
去掉沒人看的文字的優點有哪些？
可以降低頁面的雜訊
讓有用的內容更加突出
讓頁面簡潔，讓用戶在每個頁面上以言就能看見更多的內容，而不必滾動屏幕
需要去掉的文字是歡迎詞和指示說明
二、必須正確處理的幾個方面
第六章：街頭指示牌和麵包屑---設計導航
如果在網站上找不到方向、人們不會使用你的網站
網路導航101法則
你通常是為了尋找某個目標
你會決定先詢問還是先瀏覽
如果選擇劉蘭蘭，你將通過標志的引導再層次結構中穿行
最後，如果找不到想要的東西，你會離開
web與生活從空間角度來看的不同點
感覺不到大小
感覺不到方向
感覺不到位置
用戶使用Web導航是因為需要得知自己當前的位置
導航的用途---顯而易見的用途
幫助我們找到想要的任何東西
告訴我們現在身處何處
導航給了用戶一些固定的感覺，讓用戶感到腳踏實地
導航的其他用途---被忽視的用途
導航告訴我們當前的位置---告訴網站有些什麼，導航表現了內容，導航站點比告訴我們位置更重要
導航告訴我們如何使用網站---從哪裡開始，如何進行選擇
導航給了用戶對網站建造者信心
Web導航的習慣用法
網站ID
欄目
實用工具
指示器（指明用戶當前位置）
下一級欄目
頁面名稱
頁面導航（當前這一層的內容）
小字體版的底端導航
持久導航（或全局導航）：來描述出現在網站每個頁面的一組導航元素
持久導航應在在整個網站保持一致，使用戶只需要了解一次就夠了，減少學習成本
持久導航的五個元素
站點ID
回首頁的方式（Home）
搜索的方式
欄目
實用工具
主頁和表單不需要使用持久導航
主頁：承擔一些不同的任務，遵守一些不同的承諾，所以不需要使用持久導航
表單：在填寫表單的頁面，持久導航會產生干擾
如何設計Web導航各元素（表格下方為示例-亞馬遜）
導航元素名稱
細節點
站點ID
1.在Web上需要在每個頁面都能看到網站的名稱---頁面ID，通常在左上或靠近左上
2.網站ID代表整個網站，也就是說在當前站點結構中層次最高
3.站點ID如何出現在頁面可視層次的首要位置
（1）讓網站站點成為本頁最顯眼的內容
（2）讓網站ID涵蓋頁面所有其他元素
4.站點ID需看起來像一個站點ID---例如logo
欄目
1.欄目（或稱主導航條）是到達站點主要欄目的鏈接，結構的最頂層
2.大部分情況，持久導航也包括二級導航（當前欄目的下一級欄目清單）的顯示位置
實用工具
實用工具是到達網站中不屬於內容層次的重要元素的鏈接
返回主頁Home
1.返回主頁（Home）的按鈕需要始終可見，給用戶一種隨時可以從新開始的感覺
2.Home的用法
（1）在欄目或使用工具清單中包含一個回到主頁的鏈接
（2）在主頁之外的站點ID上小心地加上Home的字樣，讓用戶知道點擊它
搜索
1.避免混淆的方法
（1）花哨的用字
（2）指示說明
（3）選項---將選項寫下來
2.需要對低層次導航給予足夠的重視（三級導航）
頁面名稱
1.頁面名稱的注意事項
（1）每個頁面都需要一個名稱
（2）頁面名稱要出現在合適的位置
（3）名稱引人注目
（4）名稱要和點擊的鏈接一致
指示器
1.如何標記當前位置
（1）在旁邊放置一個指示器
（2）改變文字的顏色
（3）使用粗體
（4）按鈕反白
（5）改變按鈕的顏色
2.告訴用戶你所在的站點層級結構的前後關系（在網頁中的位置）
層級菜單
1.告訴用戶從主頁到當前位置的路徑（如何到達）
2.層級導航的最佳實踐方式
（1）將它們放在最頂端
（2）使用「>」對層級進行分隔
（3）使用小字體（表明是一種補充機制）
（4）使用了文字「你在這里」
（5）將最後一個元素加粗
（6）不需要把它們用作頁面名稱
標簽
1.為什麼標簽做導航是一個上佳的選擇
（1）它們不言而喻
（2）它們很難錯過（視覺上與眾不同）
（3）它們靈活
（4）它們暗示了一個物理的空間
2.注意事項
（1）正確繪制---激活的標簽頁在其他標簽頁之前
（2）顏色編碼---提高關注度
示例
如何評判一個網站設計的好
這是什麼網站？（站點ID）
我在哪個網頁上？（網頁名稱）
這個網站的主要欄目有哪些？（欄目清單）
在這個層上我有哪些選擇？（本頁導航）
我在導航系統的什麼位置？（「你在這里」的指示器）
我怎麼搜索？（搜索欄）
第七章：首先要承認，主頁不由你控制---設計主頁
主頁主要完成的任務
站點的標識和使命---告訴用戶這是什麼網站，做什麼的
站點層次---提供服務的概貌，包括內容，功能，服務是如何組織
搜索
導讀---需要有內容推介，功能推介
友情鏈接---預留空間放置廣告，交叉推廣，品牌合作
快捷方式---最常訪問的內容片段值得在網頁上放置鏈接
注冊
主頁需要滿足的抽象目標
讓用戶看到自己在尋找東西---讓用於想要的任何東西顯而易見
......還有我沒有尋找的---讓用戶看到一些精彩的內容，就算這些內容用戶沒有尋找
告訴用戶從哪開始
建立可信度和信任感
主頁的常見約束有哪些
每個人都想佔一席之地---推介內容過多
想要參與的人太多
一個尺寸要適合所有的人---普遍適用於大眾
主頁需要傳達整體形象，讓用戶一眼就能清楚你的網站是說什麼的
如何向用戶傳達網頁的整體形象
口號---靠近站點ID的地方，整個網站的描述
歡迎廣告---網站的簡要描述，在主頁的首要位置，不需要滾動屏幕就能看到
傳達信息的原則
需要多大空間就使用多大空間
但也不要使用過多的空間---保持簡短
不要把實名陳述當做歡迎廣告
最後的是進行測試
口號的注意事項
好的口號
不好的口號
清楚、言之有物
含混不清
長度適中，易讓用戶領會表達思想
太籠統
表達出網站特點和顯而易見的好處
把口號（傳達某種價值主張）和宗旨（表達某種指導原則，某個目標或某個理想）混淆起來
有個性、生動、有時候很俏皮
由於主頁獨特的職責，通常不必使用持久導航，它們之間的差異
欄目描述---主頁需要盡可能多的表現網頁內容，其他頁面不需要
不同的方向---主頁和其他頁面布局不同，主頁通常用
用於表示的空間更多---主頁上站點ID比較大，口號留有空間也較大
讓欄目的名稱保持不變，同樣的順序、同樣的文字和同樣的分組，盡可能多地保持視覺提示，同樣的字體，顏色和大小寫
下拉框存在的問題
用戶必須將它們找出來---必須找到下拉框，才能看到下拉列表
它們難以掃描
不好控制---下拉列表收縮速度難以控制
下拉框對於組織按照字母順序排列的項目比較有效
下拉框的優點是節約空間
任何共享的資源（共有區域）都會因為過度使用而遭到破壞---在主頁上增加更多的項目所得到的的和付出的並不一致，雖然給推薦欄目巨大的訪問量，但是讓主頁變得混亂，所遭受的損失將由所有欄目承擔
三、確定你沒有做錯的幾件事
第八章：農場主和牧羊人應該是朋友---為什麼Web設計團隊討論可用性是在浪費時間，如何避免這種情況
由於各自的職位不同，Web團隊成員對於好的網站設計的看法不同
通過測試將討論對錯轉移到什麼有效、什麼無效上，測試會讓我們看到用戶的動機、理解和反應的不同，從而不再讓我們堅持用戶和我們的想法相同
第九章：一天10美分的可用性測試---讓測試簡單，這樣你能進行充分的測試
焦點小組並不是可用行測試，焦點小組是在項目早期階段，用來收集用戶的意見和感覺
可用性測試主要是希望得到用戶是否知道該網站是做什麼的，並且能用它完成一項典型任務
測試的作用是什麼
如果想建立一個優秀的網站，一定要測試
測試一個用戶比不做測試好一倍
在項目中，在點測試一位用戶好過最後測試50位用戶
人們對招募用戶代表的重要性評估過高
測試的關鍵不是要證明什麼或者反駁什麼，而是了解你的判斷力
測試是一個迭代的過程
沒有什麼比現場用戶的反應更重要
尋找能夠反應目標群體的測試用戶，但別裹足不前
尋找的測試用戶可以和目標群體有差別的理由是什麼
差別的原因
例外
實際上，我們都是初學者
如果你的網站幾乎只由某一類用戶使用，且招募並不難，那就去招募
設計出的網站只有你的目標群體能使用，這通常並不是一個好主意
如果你的目標群體分為幾個明顯陣營，且各陣營有著完全不同的需求，那你至少要從每個陣營選擇用戶進行一次測試
專家通常不會介意對初學者來說很清楚的界面
如果使用你的網站需要專業的領域知識，那麼你需要在該領域中招募有專業知識的用戶
進行招募，需要注意的問題是什麼
提供合理的激勵
邀請要簡單
避免對網站（或網站背後的組織結構）進行預先討論
別不好意思請朋友幫忙
測試中遇到的問題
用戶不清楚概念
用戶找不到自己想要的字眼---網站用來組織內容的分類不符合用戶習慣；分類符合習慣但是沒有使用他們期望的名字
內容太多---減少頁面上的干擾；將需要看到的內容涉及的更加醒目
一些關於問題分類指南
問題
行為（用戶/主持）說明
正確解決方式
忽略Kayak（皮劃艇）問題
1.出現問題的人馬上發現自己偏離了原來的主題
2.用戶盡量回到原來的方向而不需要幫助
3.這種情況並沒有擾亂用戶的活動
可以忽略
抵制添加的沖動
增加一些內容，注釋，指導說明
去除某個讓人混淆的內容
不要太看重用戶對新功能的要求
抓住能夠的著的果子
1.恍然大悟型
2.便宜型
盡量實現變更
進行變更
只要你進行改變，就要仔細思考它將會影響哪些內容，當你把某些部分調整的更為突出時，想想是不是把其他內容的重要性降低了
四、大的方面和外界影響
第十章：可用性是基本禮貌---為什麼你的網站應該讓人尊敬
降低好感度的方式
隱藏我想要的信息
因為沒有按照你們的方式行事而懲罰我
向我詢問不必要的信息
敷衍我，欺騙我
給我設置障礙
你的網站看上去不專業
提高好感度的方式
知道用戶在你的網站上想做什麼，並讓網站明白簡易
告訴用戶，他們想知道的
盡量減少步驟
花點心思
（1）保證網站准確有用
（2）產生解決我的問題所需要的信息
（3）網站用清楚的方式表達
（4）組織良好，用戶可以輕松找到解決方案
知道用戶有哪些疑問，並給予解答
為用戶提供協助
容易從錯誤中恢復
如果不確定，記得道歉
總結
這本書主要講了Web設計的一些核心的原則，以及用戶在使用Web時的心理，並且基於用戶的信息，來設計Web的導航和主頁。並且結合實踐，在項目中需要不斷的進行可行性測試迭代，從而使Web可行。這樣的網站才是一個成功的網站，在符合用戶的習慣的基礎上，讓用戶能夠自行的解決問題，從而達到網站和用戶的目的。
資源類：
大家都知道，學習本身是一個特別耗費時間和財力的事情，但是為了自身發展，卻不得不學習，而且現在對於職業教育的課程特別貴，並且專業書籍也是非常貴的。雖然說是投資自己，但是對於生活來說還是較大的開銷，因此算是眾籌了，畢竟一個課程可能動則幾千塊，但是我並不貪心，所以分享的課程的價格很低，不會超過5塊錢吧，畢竟大家都是為了生活，只希望彌補一點生活壓力吧，各位加油吧
鏈接：在線教育視頻課（產品設計）
https://pan..com/s/1CqvJixlcarLewUcFYCcJWwpan..com
提取碼：afvs
俞軍產品方法論：
鏈接：
https://pan..com/s/1ws7N0ZrcuiY_GRZ8710zVQ
提取碼：lizk
梁寧產品思維30講：
鏈接：
https://pan..com/s/1KtdGjzV_cAWN8xlrMX7ENg
提取碼：tr7i
增長黑客：
鏈接：
https://pan..com/s/1T5lIjrpCu7oc5hYF1hpmag
提取碼：dpm3