《點石成金—網(wǎng)頁設(shè)計秘笈》讀書筆記

時間：2023-09-07 04:18:02 | 來源：網(wǎng)站運營

時間：2023-09-07 04:18:02 來源：網(wǎng)站運營

《點石成金—網(wǎng)頁設(shè)計秘笈》讀書筆記：說明：

筆記原封不動地保留了原版書的章節(jié)和標題；

章節(jié)下的正文是對該章節(jié)的概括總結(jié)，和必要的原文；

“#...#“代表原版書中有意思的例子和精彩的金句；

”【...】“代表我本人的批注；

斜體字代表書中對該正文的進一步解釋說明，并且是原文抄；

而不重要的內(nèi)容和章節(jié)會直接跳過；

作者認為：只有幾乎能夠替代原版書的讀書筆記才是合格的手札。







— 讓我們開始吧 —







本書是為了一群苦于不知道如何留住訪問者的網(wǎng)頁設(shè)計師而寫，基于web用戶的行為特征，講授了網(wǎng)頁交互設(shè)計的可用性原則。當然這些設(shè)計規(guī)則是可以打破的，只要你知道正在改造哪些規(guī)則，并且有堅固的依據(jù)支撐。。




#如果某個東西很難用，我就不會經(jīng)常用它#【自由競爭市場下成立】







-原則指導-




第1章 別讓我思考——Krug可用性第一定律




Krug可用性第一定律：網(wǎng)頁內(nèi)容需要不言而喻，或者在復雜頁面設(shè)計的情況下，做到自我解釋（ self-explanatory ）。




作者在這一章中列舉了一些會讓用戶“思考”的地方：

1）為什么他們給它取這個名字？——往往網(wǎng)頁文案會在專業(yè)性與易用性之間做權(quán)衡，少量斟酌后使用的文字

2）這個按鈕能不能點擊？——按鈕需要明確向用戶展現(xiàn)是否可以點擊

3）我在什么位置？——導航要清晰

4）我該從哪里開始？——入口要清晰

5）他們把XX放在什么位置了？——重要功能要顯而易見

6）這個頁面最重要的是什么？——視覺重心




當我們訪問Web，每個問號都會加重我們的認知負荷。而一位富有經(jīng)驗的設(shè)計師會注意到網(wǎng)頁上所有讓你思考的東西。







第2章 我們實際上是如何使用Web的——掃描，滿意即可，勉強應(yīng)付




如果想設(shè)計有效的網(wǎng)頁，需要接受3個網(wǎng)站使用的事實：

1）我們不是閱讀，而是掃描

一般注意力會用在具有下述特征的文字和短語上：① 與手頭任務(wù)有關(guān)；② 我們當前和接下來的個人興趣；③ 根深蒂固的觸發(fā)器：美女/免費/大減價







2）我們不做最佳選擇，而是合理即可

一旦我們發(fā)現(xiàn)一個鏈接，看起來似乎能跳到我們想去的地方，那就是一個我們將會點擊它的大好機會

原因：① 尋找最佳策略很難，需要的時間很長 ② 如果猜錯了，也不會產(chǎn)生什么嚴重的后果。如果網(wǎng)頁載入速度很慢，我們會變得更慎重




3）我們不是追根究底，而是勉強應(yīng)付

用戶心智模型與產(chǎn)品設(shè)計模型不一致，人們在使用產(chǎn)品的同時，并不會思考工作原理

原因：① 這對我們來說并不重要。對于我們中的大多數(shù)人來說，是否明白事物背后的工作機制并不重要，只要我們能正常使用它們即可；② 如果發(fā)現(xiàn)某個事物能用，我們會一直用它。我們一旦發(fā)現(xiàn)某個事物能夠用（不管有多難用），我們也不會太去找一種更好的方法。如果偶然發(fā)現(xiàn)一種更好的方法，我們會換用這種更好的方法，但很少會主動尋找更好的方法







第3章 廣告牌設(shè)計101法則——為掃描設(shè)計，不為閱讀設(shè)計




為了針對掃描式閱讀，作者告訴我們網(wǎng)頁設(shè)計需要注意5大點：




1）建立清楚的視覺層次

在視覺上體現(xiàn)內(nèi)容之間的邏輯關(guān)系。一個視覺層次清楚的頁面有3個特點：

① 越重要的部分越突出

最重要的標題要么字體更大、更粗，顏色更特別，旁邊留有更多空白，更接近頁面的頂部




② 邏輯上相關(guān)的部分在視覺上也相關(guān)——分組

把相近的內(nèi)容分成一組，放在同一個標題之下，采用類似的顯示樣式，或者把它們?nèi)糠旁谝粋€定義明確的區(qū)域之內(nèi)




③ 邏輯上包含的部分在視覺上進行嵌套




總之，如果一個頁面沒有清楚的視覺層次——例如，所有內(nèi)容看起來都一樣重要——我們會降低掃描頁面的速度（也就是說，有視覺層次會有助于提高我們的閱讀速度），尋找關(guān)鍵的文字和短語，然后拼湊出我們感覺重要的內(nèi)容和內(nèi)容的組織方式，增加了工作量




#分解一個在視覺層次上有問題的頁面——例如，一個標題涵蓋了不屬于它的內(nèi)容——就像讀一個病句一樣#




2）盡量利用習慣

減少用戶學習負荷，采用沒有學習曲線的方法




3）把頁面劃分成明確定義的區(qū)域出

把頁面劃分成明確定義的區(qū)域很重要，因為這可以讓用戶很快決定關(guān)注頁面的哪些區(qū)域，或者放心地跳過哪些區(qū)域




4）明顯地標識可以點擊的地方

人們在網(wǎng)絡(luò)上所做的大多數(shù)事情就是找到下一個地方點擊，那么明確地標識哪些地方可以點擊，哪些地方不能點擊，很重要




5）降低視覺干擾

① 眼花繚亂

② 背景噪聲，例如：




#一個設(shè)計頁面的好辦法：先假定所有內(nèi)容都是視覺噪聲，然后得到證明它們不是#







第4章 動物、植物、無機物——為什么用戶喜歡無須思考的選擇




Krug可用性第二定律：點擊幾次都沒關(guān)系，只要每次點擊都是無須思考，明確無誤的選擇




雖然考慮用戶到達目標之前要點擊的次數(shù)是必要的，但是更重要的是考慮每次點擊有多“艱難”——需要多少思考，有多大的不確定性來判斷自己是否在進行正確的選擇。




如果我們需要一直在網(wǎng)絡(luò)上進行選擇，那么讓這些選擇變得無須思考是讓一個網(wǎng)站容易使用的主要因素




#信息的味道#




#3次無須思考，明確無誤的點擊相當于1次需要思考的點擊#




#實際上，這只是另一場更大規(guī)模的、關(guān)于站點層次深度和廣度相對價值討論的一部分。一個廣度站點在每個層次可以分成許多類別，因為層次較少，所以不需要太多次數(shù)的點擊就能到達底層；一個深度站點有更多的層次，需要更多次數(shù)的點擊，但它在每個層次上需要考慮的類別選擇較少#【“點擊-選擇”之間的權(quán)衡，總之要讓整個站點無須思考】




#頁面載入速度較慢，那么點擊次數(shù)更少會更有價值#







第5章 省略不必要的文字——不要在Web上寫作的藝術(shù)




Krug可用性第三定律：去掉每個頁面上一半的文字，然后把剩下的文字再去掉一半

我發(fā)現(xiàn)要在大部分網(wǎng)頁上去掉一半文字而不失去原來的意義很容易。不過，“把剩下的文字再去掉一半”只是為了鼓勵人們在這么做的時候更堅定一點。【在不損失語義的條件下，文字盡可能簡練】




去掉沒有人會看的文字有幾個好處：使內(nèi)容更突出，降低頁面的噪聲，并且節(jié)省空間




#有力的文字都很簡練。句子里不應(yīng)該有多余的文字，段落中不應(yīng)該有多余的句子。同樣，畫上不應(yīng)該有多余的線條、機器上不應(yīng)該有多余的零件#







-必須正確處理的幾件事-




第6章 街頭指示牌和面包屑——設(shè)計導航




如果在網(wǎng)站上找不到方向，人們不會使用你的網(wǎng)站。




網(wǎng)絡(luò)導航101法則：

① 瀏覽網(wǎng)頁，通常是為了尋找某個目標

② 決定先詢問（搜索）還是先瀏覽

對任何人來說，先搜索還是先瀏覽取決于他們的打算、匆忙程度、以及網(wǎng)站是否有良好的導航機制

③ 如果選擇瀏覽，將通過標志的引導在層次結(jié)構(gòu)中穿行

④ 找不到，則離開




物理世界可以找到空間位置，網(wǎng)頁則不能。用戶想再次訪問網(wǎng)站上的某個內(nèi)容，不是依靠它在哪里的物理感覺，而是記住它在概念層次上的位置，然后重新順著以往的鏈接過去。所以，書簽——儲存?zhèn)€人捷徑——如此重要，也是為什么后退按鈕的點擊率占網(wǎng)絡(luò)上所有點擊率的30-40%的原因。

主頁就像北極星，可以點擊“主頁”給一個重新開始的機會。另一方面，導航通過具體化網(wǎng)站的層次結(jié)構(gòu)補償了空間感缺失，營造出某種位置的感覺。導航即網(wǎng)站本身，即指示說明，不是某個特性。




#導航與兩件事有關(guān)：從一個地方到另一個地方；告知當前所在的位置#

#通過讓層次結(jié)構(gòu)可視化，導航可以告訴我們網(wǎng)站上有些什么。導航表現(xiàn)了內(nèi)容#




Web導航習慣用法：







① Logo

在Web上，用戶的移動方式主要是瞬移，需要在每個頁面上見到網(wǎng)站的名稱。它在當前站點結(jié)構(gòu)中層次最高

② 導航

導航中最重要的元素之一是把我們送回主頁的按鈕或鏈接。讓站點Logo同時作為一個讓你回到主頁的按鈕




③ 面包屑

#之所以稱為“面包屑”是因為它們讓人想起Hansel扔在森林里的面包屑蹤跡，因為這樣他和Gretel能找到回家的路#

面包屑與導航不同之處在于，導航告訴你在整個網(wǎng)頁中的位置，另一個告訴你如何到達這里。它通常運用在擁有龐大數(shù)據(jù)庫，具有復雜層次結(jié)構(gòu)的網(wǎng)站




④ 標簽

標簽是極少幾個將物理隱喻有效應(yīng)用到用戶界面中的例子之一。它們把原來的物體分成了不同的部分，而且打開一個不同的部分很容易，通過突出的標簽就可以翻到對應(yīng)的位置。（或者在Web上，點擊它）【交互—隱喻】【Tag把一個整體分割成不同的部分】




第7章 首先要承認，主頁不由你控制——設(shè)計主頁




主頁要完成的任務(wù)：

具體目標

① 標識和使命。告訴用戶這是什么網(wǎng)站，是做什么的

② 站點層次。通過導航給出站點層次

③ 搜索

④ 導讀。內(nèi)容推介&功能推介，吸引用戶來讀

⑤ 內(nèi)容更新。告訴讀者不是死水一潭

⑥ 友情鏈接。放置廣告，交叉推廣，合作品牌的鏈接

⑦ 注冊




抽象目標

① 讓用戶看到自己正在尋找的東西。讓用戶想要的任何東西顯而易見

② 還有用戶沒有尋找的。提供也許會感興趣的內(nèi)容

③ 告訴我從哪里開始

④ 建立可信度和信任感。主頁將是你的網(wǎng)站給他們留下好印象的唯一機會




主頁首要任務(wù)是——在一眼之內(nèi)——傳達整體形象，通過整體結(jié)構(gòu)告訴人們：

① 這是什么網(wǎng)站？

② 網(wǎng)站上有什么？

③ 我能在這里做什么？

④ 為什么我應(yīng)該在這里，而不是在別的地方？（？？？）




那么如何傳達呢？

口號是一條精煉的短句，刻畫了整個企業(yè)，總結(jié)了它是什么。做到這點，需要滿足：

① 清楚、言之有物

② 長度適中，不少也不多

③ 表述出網(wǎng)站的特點和顯而易見的好處

④ 甚至有個性、生動，有時候還很俏皮




已經(jīng)家喻戶曉的網(wǎng)站可以沒有口號




書中接下來還討論了導航和下拉框，但沒有特別值得記錄的。下拉框最大的有點是，節(jié)省空間。




#如果我不清楚這個網(wǎng)站是做什么的，又如何決定要搜索什么#







-確定你沒有做錯的幾件事-




第8章 農(nóng)場主和牧牛人應(yīng)該是朋友——為什么Web設(shè)計團隊討論可用性是在浪費時間，如何避免這種情況




公司內(nèi)部人員（市場、設(shè)計、開發(fā)）不該爭論Web用戶喜歡什么，因為這些爭論背后隱藏了他們自身的喜惡和信仰，并有投射到整個Web用戶身上的傾向，認為絕大多數(shù)Web用戶喜歡我們所喜歡的。往往這些“信仰大戰(zhàn)”并不會改變他們原來的看法。




唯一正確的辦法是直接做“測試”。使用團隊的集體技巧、經(jīng)驗、創(chuàng)造力和判斷力來創(chuàng)建一些版本（甚至是MVP），然后仔細觀察人們對它的看法和使用的方法。







第9章 一天10美分的可用性測試——讓測試簡單，這樣你能進行充分的測試




焦點小組和可用性測試是不同的。

焦點小組：在設(shè)計之前展開、5-8人小組、展示想法和設(shè)計、快速得到用戶意見和感受、抽象；

可用性測試：一次1人、展示原型、要求用戶完成一項典型任務(wù)、具體。




如果想建立一個優(yōu)秀的網(wǎng)站，一定要測試，不斷的迭代式測試。哪怕對錯誤的用戶做一次失敗的測試，也會讓你看到一些改善網(wǎng)站的重要方面。通常這樣的測試不會超過10min，但被測網(wǎng)站的工作人員通常會記上好幾頁的筆記，甚至還會詢問是否可以對這次測試進行錄像。




#任何在開始時就有助于防止犯錯的方法都很劃算#




理想下的可用性實驗室：一間位于單向玻璃后面的觀察室、兩部攝像機錄制用戶反應(yīng)和目標對象、具有統(tǒng)計意義數(shù)量的測試用戶




具有科學研究意義的測試成本很高，書中提出了精簡的可用性測試：




關(guān)于控制測試用戶人數(shù)。3~4個最佳，可以遇到幾乎所有最明顯的問題。人數(shù)少可以快速推進迭代，修正完第一輪問題后，進行第二輪測試，發(fā)現(xiàn)新的問題。




關(guān)于招募用戶。測試對象并不重要。利用你能夠?qū)ふ业降娜魏稳耍M足最低要求），然后曲線上升。邀請形式要簡單：“我們需要一些人來看看我們的網(wǎng)站，并給我們一些反饋。這很容易，大約花費45分鐘到一個小時的時間，而且你將得到____美元的報酬?！?br>



#每個人都喜歡簡潔（是指真正的簡潔，不是把一大堆內(nèi)容藏到下一級頁面那種簡潔）#




關(guān)于何時測試。在設(shè)計之前，就應(yīng)該測試競品，或組織方式或功能上風格類似的網(wǎng)站，這相當于有人免費給你建立了一個已經(jīng)能用的原型。




關(guān)于測試什么。讓用戶執(zhí)行一些他們有權(quán)參與選擇的任務(wù)。比如，“找到一本你想買的書，或者一本最近買過的書“就比”找一本14美元以下的烹飪書“要好得多。




#要求你把心里的想法說出來，告訴我們你是怎么想的，這對我們有很大幫助#




立刻回顧測試結(jié)果。在每輪測試之后，你應(yīng)該盡快讓開發(fā)團隊回顧每個人的觀察，建議你在一個上午進行3-4輪測試，然后在午餐時間進行簡短的總結(jié)。第一步，給問題分類；第二步，解決問題




可用性測試常見的用戶問題：

① 用戶不清楚概念。要么不理解網(wǎng)頁，不知道它們說的是什么，要么理解有誤

② 他們找不到自己要找的字眼。要么組織內(nèi)容的分類不符合用戶的習慣，要么分類符合他們的習慣，但沒有使用他們期望的名字

③ 內(nèi)容太多了。首先，減少頁面上的整體干擾；其次，把他們需要看到的內(nèi)容設(shè)置得更加醒目，讓它們從可視層次結(jié)構(gòu)中更加突出

④ 交互不可能是完美的。如果做不到不言而喻，只要用戶在第二次猜測總是對的，就已經(jīng)可以了。因為有些含混之處總是沒有簡單的解決方法。例如，通常至少會有1-2個項目不太適合放在網(wǎng)站的頂級分類當中。因此，一半的用戶可能會在Lifestyle的列表下尋找電影，而另一半的用戶會先在Arts里面尋找。不管你怎么做，都會有一半用戶在第一次猜測的時候出錯，但每個人都會在第二次猜測之內(nèi)找到

⑤ 抵制添加的沖動。當在測試時清楚地看到人們沒有理解某些內(nèi)容時，大部分人的第一反應(yīng)是增加一些內(nèi)容，例如一些注釋或一些指導說明。而正確的解決方案往往是去除某個（某一些）讓人混淆的內(nèi)容，而不是增加另一些干擾

⑥ 不要太看重人們對新功能的要求。人們常說：“如果它能做XX就更好了?！边@樣的說法常常被看作是在要求新的功能。如果你仔細詢問，常常會發(fā)現(xiàn)，他們已經(jīng)找到一個很好的網(wǎng)站，能做XX，也不大可能會切換到這里來，他們只是在告訴你他們的喜好而已




在測試結(jié)束后，優(yōu)先改善兩類問題：

① 恍然大悟型。當大家看到第一位用戶試著勉強應(yīng)付的時候，問題和解決方法都很明顯的那種驚喜

② 低成本實現(xiàn)型。1）毫不費力的；2）性價比高的




設(shè)計就是做平衡。

修正這些問題，同時不破壞已經(jīng)正常運行的部分。只要你進行改變，就要仔細思考它將會影響哪些其他的內(nèi)容。尤其是，當你把某些部分調(diào)整得更為突出的時候，想想看是不是把其他內(nèi)容的重要性降低了







大的方面和外界影響




第10章 可用性是基本禮貌——為什么你的網(wǎng)站應(yīng)該讓人尊敬




除了網(wǎng)站簡潔清楚，我們要增加用戶對網(wǎng)站的好感度。當網(wǎng)頁難用時，會損耗用戶的好感儲存器，甚至一個錯誤就能徹底清零。雖然每個人的好感儲存器的高度天生不同，但關(guān)鍵是，不要指望它的值會很高。




降低好感的幾種方式：

① 隱藏我想要的信息。最常見的情況是隱藏客戶服務(wù)的電話號碼、運費和價格

② 因為沒有按照你們的方式行事而懲罰我。格式塔規(guī)則有利用用戶處理數(shù)據(jù)，如信用卡號碼 010-287-2973

③ 向我詢問不必要的信息。用戶很介意個人信息，如果網(wǎng)站要求的信息超出當前任務(wù)時，會讓用戶覺得很厭煩

④ 敷衍我，欺騙我。厭惡虛偽的假意的關(guān)心。“您的來電對我們來說很重要”

⑤ 給我設(shè)置障礙。節(jié)省用戶時間

⑥ 你的網(wǎng)站看上去不專業(yè)。布局組織凌亂




相對的，提高好感的幾種方式：

① 知道人們在你網(wǎng)站上想做什么，并讓它們明白簡易。

② 告訴我我想知道的。

③ 盡量減少步驟。

④ 花點心思。

⑤ 知道我可能有哪些疑問，并且給予解答。保持更新和坦率，并且是真正的常見問題

⑥ 如有不確定，記得道歉。如果障礙是不可抗力，記得及時道歉，讓他們明白你知道你在給他們造成不便







第11章 可訪問性、級聯(lián)樣式表和你

（關(guān)于技術(shù)問題的討論）







第12章 救命！老板想要我......當好人遇到不好的設(shè)計決策




#可用性專家們有一個技術(shù)術(shù)語來形容這種現(xiàn)象，我們把它叫做“餿主意”#




在網(wǎng)絡(luò)上填寫任何表單的人都會問自己：“為什么他們要我提供這項信息？真的需要提供這些信息才能得到我想要的？”如果答案是不，則接下來的問題便是：“他們要這些信息干什么？”




詢問不必要的信息可能產(chǎn)生3個嚴重后果：

① 您常常無法得到真實的數(shù)據(jù)

② 您得到的完整表單更少

③ 使您的網(wǎng)站形象下降




由此引出3個原則：

① 只讓我提供完成此次事務(wù)所需的信息

② 不要過多的可選信息

③ 明確告知填寫信息后能得到什么反饋




在上網(wǎng)的絕大部分時間里，人們并不希望被粘著，他們只想完成某些工作




#圖片大，載入時間長#







— 完 —