點石成金-訪客至上的網(wǎng)頁設(shè)計秘笈 讀書筆記（上）
時間：2023-06-04 16:00:01 | 來源：網(wǎng)站運營
時間：2023-06-04 16:00:01 來源：網(wǎng)站運營
點石成金-訪客至上的網(wǎng)頁設(shè)計秘笈 讀書筆記（上）：第1章 別讓我思考——可用性第一定律
確保網(wǎng)站容易使用，最重要的是——“別讓我思考”——是Web設(shè)計中判斷有用沒用的終極法則。意味著，設(shè)計者應(yīng)該盡量做到，當我看到一個頁面時，它應(yīng)該是一目了然，自我解釋的，“它是什么，怎樣使用？完全不需要思考”。
當看到一個需要思考的網(wǎng)頁時，頭腦會自動浮現(xiàn)問號，而我們在創(chuàng)建網(wǎng)站時，就是去掉這些問號。
當網(wǎng)頁中出現(xiàn)可以點擊的部位時，鼠標移到上面自動變?yōu)樾∈?，而不需要用戶思考哪里可以點擊。
理解去掉問號的基本原則。
如果不能做到讓一個頁面不言而喻，至少應(yīng)該讓它自我解釋。
不要讓用戶思考的重要理由是：大多數(shù)人會花費比我們想象中少得多的時間來瀏覽網(wǎng)頁。
第2章 我們實際上是如何使用Web的——掃描，滿意即可，勉強應(yīng)付
第一個事實：我們不是閱讀，而是掃描——人們總是處于忙碌中；知道自己不需要閱讀所有內(nèi)容；善于掃描（瀏覽）
第二個事實：我們不做最佳選擇，而是滿意即可——忙碌；猜錯了，后果也不嚴重；對選擇進行權(quán)衡不會改善我們的機會；猜測更有意思
第三個事實：我們不是追根究底，而是勉強應(yīng)付——根源對我們來說不重要；若發(fā)現(xiàn)某個事物能用，就會一直用它
換個思路，如果用戶明白來網(wǎng)頁：
- 他們更容易找到自己需要的東西，無論對用戶還是你都好；
- 他們會更容易理解你的網(wǎng)站提供了哪些服務(wù)
- 你更可能引導他們到網(wǎng)站上你 他們看到的地方
- 在你的網(wǎng)站上，他們會覺得更聰明，更能把握全局，會讓他們成為忠實用戶。
第3章 廣告牌設(shè)計法則——為掃描設(shè)計，不為閱讀設(shè)計
對于匆忙的用戶，需要注意5個方面，來保證他們盡可能看到并理解了你的網(wǎng)站：
1、在每個頁面上建立清楚的視覺層次：越重要的部分月突出；邏輯上相關(guān)的部分在視覺上也相關(guān)；邏輯上包含的部分在視覺上進行嵌套。
2、盡量利用習慣用法：習慣用法非常有用；設(shè)計師為了新穎通常不愿意利用習慣用法
3、把頁面劃分成明確定義的區(qū)域
4、明確標識可以點擊的區(qū)域
5、最大限度降低干擾：眼花繚亂；背景噪聲（間隔線盡量虛化）
第4章 動物、植物、無機物——為什么用戶喜歡無須思考的選擇
點擊多少次都沒關(guān)系，只要每次點擊都是無須思考，明確無誤的選擇——可用性第二定律
如果我們需要一直在網(wǎng)絡(luò)上進行選擇，那么讓這些選擇變得無須思考是讓一個網(wǎng)站容易使用的主要因素。
第5章 省略不必要的文字
去掉頁面上一半的文字，然后把剩下的的文字再去掉一半?！捎眯缘谌?br>
有力的文字都很簡練。句子里不應(yīng)該有多余的文字，段落里不應(yīng)該有多余的句子。
去掉沒人會看的文字的好處：
- 可以降低頁面噪聲
- 讓有用的內(nèi)容更突出
- 讓界面更簡短，讓用戶在每個頁面上一眼就能看到更多內(nèi)容，而不必滾動屏幕
實際上必須去掉的文字指兩種特別的文字：歡迎詞和指示說明
必須正確處理的幾個方面
第6章 街頭指示牌和面包屑——設(shè)計導航
記住：如果在網(wǎng)站上找不到方向，人們不會使用你的網(wǎng)站
網(wǎng)絡(luò)導航101法則
進入網(wǎng)站一般會遵循的過程：
- 你通常是為了尋找某個目標
- 你會決定先詢問還是先瀏覽
- 如果選擇瀏覽，你將通過標識的引導在層次結(jié)構(gòu)中穿行
- 最后，如果找不到想要的東西，就會離開。
Web上的體驗缺少空間感：感覺不到大小、方向、位置。
若我們想再次訪問網(wǎng)站的某個內(nèi)容，我們記住的是它在概念層次上的位置，而不是依靠它在哪里的物理感覺，讓后順著以往的鏈接過去，這是書簽重要的原因，也是后退按鈕點擊率極高的原因。它也解釋了主頁的重要性——網(wǎng)站的北極星，點擊主頁給你重新開始的機會。解釋了我們使用Web導航的原因，得知當前的位置很重要，網(wǎng)絡(luò)里很容易迷路，意味著——要把Web導航做好。
導航有兩個顯而易見的用途：幫助我們找到想要的任何東西以及告訴我們現(xiàn)在身在何處
導航的其他功能：它給了我們一個固定的感覺；告訴我們當前的位置；告訴我們?nèi)绾问褂镁W(wǎng)站；給了我們對網(wǎng)站建造者的信心。
Web導航習慣用法源于大已有的印刷品使用習慣
設(shè)計得當?shù)某志脤Ш綉?yīng)該是平靜、令人舒服的
讓導航部分在每一頁以一致的外觀出現(xiàn)在同樣的位置，會讓你立即確認自己仍然待在這個網(wǎng)站上——這比你想象中更加重要，同時意味著你只需要了解它一次。
持久導航應(yīng)該包含5個元素：站點ID（LOGO）；回主頁的方式；探索的方式；實用工具；欄目。
導航部分在每一頁都出現(xiàn)的準則但例外情況是：
- 主頁：因其不同于其他頁面，承擔不同任務(wù)，有時候主頁內(nèi)不必使用持久導航
- 表單：需要填寫表單的頁面、注冊、填寫反饋、核對個人偏好時，持久導航會產(chǎn)生干擾
LOGO——在Web上，我們移動方式瞬息萬變，所以我們希望能見到頁面上的LOGO——通常在左上角。
LOGO代表了整個網(wǎng)站，是當前站點結(jié)構(gòu)中層次最高的。想 LOGO出現(xiàn)在頁面可視層次的首要位置，可采用兩種方式：讓它成為本頁最顯眼的內(nèi)容，或讓它涵蓋頁面所有其他元素。
LOGO應(yīng)該是一種獨特的字體，可以識別的圖形。
欄目——主導航條，是到達站點主要欄目的鏈接，站點層次結(jié)構(gòu)的最頂層。
大部分情況，持久導航包括二級導航的顯示位置，二級導航是當前欄目的下一級清單
實用工具——是到達網(wǎng)站中不屬于內(nèi)容層次的重要元素的鏈接，能幫助我們使用站點或提供網(wǎng)站發(fā)布者信息。
不同類型的網(wǎng)站，實用工具不同。
通常導航上只放4-5個實用工具——用戶用的最多的工具。如果太多工具擠在導航上，用戶們會在眼花繚亂中迷路，其他不常用的工具可以進行分組，并一起放在主頁上。
返回主頁的方式——持久導航中最重要的元素之一，可以送我們回主頁的按鈕或鏈接。
讓一個返回主頁的按鈕始終可見，會給我們一個保證，無論我們迷失在哪里都能重新開始。
在欄目或?qū)嵱霉ぞ咧邪粋€回到主頁的鏈接
在主頁之外的LOGO上加上主頁字樣，讓大家知道可以點擊它。
新興用法，是讓LOGO同時作為你返回主頁的按鈕，非常有用
提供搜索——由于搜索的潛在威力和喜歡搜索的用戶比喜歡瀏覽的用戶更多，因此除非站點非常小而且組織的很好，否則每個頁面都應(yīng)該有一個搜索框或一個搜索頁面的鏈接，除非你的網(wǎng)站真的不太需要搜索。
大多數(shù)用戶登錄新站點，第一件事是掃描頁面，看看有沒有搜索。
搜索框要堅持簡約原則：一個輸入框、一個按鈕、還有搜索字樣，切記復雜。
在提供選項縮小搜索范圍時，一定要三思，同時謹慎提供選項，以便指定以何種方式搜索都能找到我們想要的內(nèi)容。
如果你想提供選項來調(diào)整搜索范圍，在有用的時候提供——當?shù)竭_搜素結(jié)果頁面，發(fā)現(xiàn)搜索結(jié)果太多時，就需要縮小搜索范圍。
Web設(shè)計中普遍存在的問題：不重視低層次導航給予，很多網(wǎng)站到了第二個層級以下，導航就變得支離破碎。原因：1、由于頁面空間有限，元素眾多，導致良好的多級導航很難設(shè)計；2、留給設(shè)計師的時間不多；3、有一種傾向認為，當人們深入到網(wǎng)站的這一層次時，他們自然會明白如何操作。
提供底層的頁面樣例內(nèi)容和層次結(jié)構(gòu)樣例的另一個問題是，就算設(shè)計師提出了請求，他們可能拿不到，因為負責內(nèi)容的人不會想那么深遠。
事實上，用戶在底層頁面和頂層頁面花費時間相同。除非從一開始設(shè)計時就自上而下進行導航設(shè)計，否則以后很難添加，也很難保持一致性。——在開始討論主頁的顏色方案之前，擁有顯示網(wǎng)站所有級別的導航的樣例頁面非常重要?！?b>先布局再配色
頁面名稱——是Web上的路牌，若一切順利，我們可能根本不會注意頁面名稱，但當覺得方向可能不對時，就要毫不費力的看到頁面名稱來確定方向。
頁面名稱注意事項：
1、每個頁面都需要一個名稱。
2、頁面名稱要出現(xiàn)在合適的位置
3、名稱要引人注目——一般時該頁面最大的文字
4、名稱要和點擊的鏈接一致
“你在這里”
要抵消網(wǎng)絡(luò)固有的空間迷失感，其中的一種導航方式是告訴我當前在什么位置。在Web中，可以用突出當前位置來實現(xiàn)，不管是在頁面的導航條、列表還是菜單上。保證突出的方式可以采用多種視覺區(qū)別——不同顏色加上粗體——使之盡可能的突出
面包屑
“你在這里”指示器告訴你所在站點的層級結(jié)構(gòu)的前后關(guān)系，而面包屑只告訴你從主頁到當前位置的路徑
面包屑導航不會占用太多空間，提供一種方便的方式讓你：退回上一個層次或去主頁，它用來補充固定導航機制最有價值。
http://About.com的面包屑實現(xiàn)是完美的，體現(xiàn)了幾項最佳實踐：
- 把他們放在最頂端
- 使用“>”對層級進行分隔
- 使用小字體：清楚表明它是補充機制
- 使用來文字“你在這里”：字體小不占空間
- 將最后一個元素加粗
- 沒有把他們用作頁面名稱：用戶期望的標題應(yīng)該在頁面左邊，不要違背用戶期望
標簽是極少幾個將物理隱喻有效應(yīng)用到用戶界面的例子之一。將原來的物體分成了不同的部分，打開不同的部分很容易，通過突出的標簽可以翻到對應(yīng)位置。
標簽是大型網(wǎng)站導航的上佳選擇：
- 他們不言而喻
- 他們很難錯過
- 他們很靈活
- 他們暗示了一個物理空間
如果想要使用標簽，認真參考Amazon經(jīng)典的標簽設(shè)計，并且務(wù)必模仿其中的三個要點：
- 正確繪制：激活的標簽頁位于其他標簽頁之前——這是讓他和標簽相像的最大要點——比與眾不同的標簽外形更重要。——想營造出這樣的效果，激活的標簽頁必須有一種不同的顏色或外形做對比，并且必須與它下面的空間在物理上鏈接起來，這是把激活的標簽頁“彈到”最前方的方法。
- 顏色編碼：為網(wǎng)站的每個欄目使用不同的標簽顏色。并把這種顏色用在頁面其他導航元素上，，讓他們渾然一體?！\用顏色對比，飽和與中性對比
- 當你進入網(wǎng)站時，有一個標簽已經(jīng)選中
后備箱測試：
- 當你進入任何一個網(wǎng)頁時，應(yīng)該能毫不猶豫的回答出以下問題：
- 這是什么網(wǎng)站？（LOGO）
- 我在哪個網(wǎng)頁上？（網(wǎng)頁名稱）
- 這個網(wǎng)站的主要欄目有哪些？（欄目清單）
- 這個層次上我有哪些選擇？（本頁導航）
- 我在導航的什么位置？（“你在這里”指示器）
- 我怎么搜索？
在線咨詢