《Don't make me think》可用性設(shè)計(jì)書(shū)籍分享與解讀
在我們平時(shí)設(shè)計(jì)頁(yè)面的時(shí)候，可用性的設(shè)計(jì)一直是最重要也是難度最大的一項(xiàng)任務(wù)丸边，所以我推薦給大家一本以可用性研究為基礎(chǔ)的書(shū)籍《Don’tmake me think》，這本書(shū)是美國(guó)非常著名的可用性咨詢(xún)師克魯格所著的它還有一個(gè)中文名字叫做《點(diǎn)石成金》，各位有興趣的話(huà)可以去了解一下。這本書(shū)的作者根據(jù)他多年從業(yè)的經(jīng)驗(yàn)去剖析用戶(hù)的心理，在用戶(hù)的使用模式澜躺、頁(yè)面導(dǎo)航設(shè)計(jì)蝉稳、主頁(yè)布局、可用性測(cè)試等方面提出了很多獨(dú)特的觀(guān)點(diǎn)掘鄙，并且也給出了大量簡(jiǎn)單耘戚、實(shí)用的可用性設(shè)計(jì)的建議。所以我認(rèn)為這本書(shū)是非常適合從事頁(yè)面設(shè)計(jì)和頁(yè)面開(kāi)發(fā)的人去閱讀的操漠。
這本書(shū)一共有13個(gè)章節(jié)收津，我今天主要從我認(rèn)為可用性比較強(qiáng)的其中四個(gè)章節(jié)為大家做了一個(gè)總結(jié)，也非常建議大家如果是在業(yè)余時(shí)間并不是很充分的情況下浊伙，拿到一本書(shū)它如果不是敘事性或者技術(shù)關(guān)聯(lián)性很強(qiáng)的話(huà)撞秋，可以先通讀目錄從目錄中優(yōu)先選擇自己感興趣的章節(jié)去閱讀，這樣會(huì)比較節(jié)省時(shí)間而且也不會(huì)因?yàn)殚喿x時(shí)間有限而影響到你對(duì)這整本書(shū)的閱讀興趣嚣鄙。
作為頁(yè)面的設(shè)計(jì)人員和開(kāi)發(fā)人員我們通常會(huì)非常關(guān)心一個(gè)頁(yè)面背后的運(yùn)行機(jī)制吻贿，所以有時(shí)候我們可能會(huì)想當(dāng)然地認(rèn)為用戶(hù)也會(huì)和我們一樣愿意花費(fèi)大量的時(shí)間去揣摩我們?cè)谠O(shè)計(jì)這個(gè)頁(yè)面的時(shí)候一些非常巧妙、別出心裁的思想哑子。但是現(xiàn)實(shí)情況是在現(xiàn)在這個(gè)信息高速迭代的社會(huì)舅列，每個(gè)人的時(shí)間都是很值錢(qián)很寶貴的，所以用一個(gè)很形象的比喻去形容卧蜓，用戶(hù)在瀏覽呈現(xiàn)在他面前的頁(yè)面的時(shí)候帐要，就像是他以每小時(shí)一百公里的速度行駛在高速公路上去瀏覽路邊的廣告牌一樣，對(duì)于他來(lái)說(shuō)弥奸，這些廣告牌只是一閃而過(guò)而已榨惠。
面對(duì)現(xiàn)在用戶(hù)不可能在我們呈現(xiàn)給他們的頁(yè)面上花費(fèi)太多的時(shí)間去仔細(xì)揣摩的現(xiàn)狀，我們作為頁(yè)面的設(shè)計(jì)人員和開(kāi)發(fā)人員盛霎，必須要站在用戶(hù)的角度去幫助用戶(hù)在瀏覽我們的頁(yè)面時(shí)盡可能地為他們節(jié)省時(shí)間冒冬，才能讓用戶(hù)不至于對(duì)我們的頁(yè)面或者網(wǎng)站失去信心。我認(rèn)為達(dá)到這個(gè)目標(biāo)最基本的一點(diǎn)就是我們要做到讓用戶(hù)無(wú)需思考就可以在短時(shí)間內(nèi)看懂并理解我們的頁(yè)面摩渺。
任何東西简烤，要讓人能瞬間理解，一種最好的方法就是遵循習(xí)慣和慣例摇幻，比如用戶(hù)通常會(huì)期望標(biāo)志性的站點(diǎn)圖標(biāo)出現(xiàn)在左上角横侦，網(wǎng)站的主導(dǎo)航放置在頁(yè)面左邊挥萌，幾乎所有電商網(wǎng)站都會(huì)向用戶(hù)展現(xiàn)出非常明顯的購(gòu)物車(chē)圖標(biāo)，包括搜索欄的樣式和位置設(shè)定等等枉侧。這些習(xí)慣用法會(huì)給用戶(hù)帶來(lái)很大的方便引瀑，因?yàn)樗麄冊(cè)谠L(fǎng)問(wèn)不同的網(wǎng)站、瀏覽不同的頁(yè)面的時(shí)候榨馁，不需要付出額外的努力去了解一個(gè)網(wǎng)站憨栽、一個(gè)頁(yè)面背后的運(yùn)行原理。所以我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候盡可能地去使用習(xí)慣用法翼虫，把用戶(hù)需要面臨的選擇變得無(wú)需思考屑柔，這樣會(huì)在很大程度上減少這個(gè)頁(yè)面帶給用戶(hù)的干擾，也會(huì)大大增強(qiáng)這個(gè)網(wǎng)站和頁(yè)面瀏覽的使用性珍剑。
各位可以看到上方的這張圖片掸宛，它是一份報(bào)紙的復(fù)刻版照片，其中的內(nèi)容由于光線(xiàn)等各種原因是很難看清楚的招拙，但是我相信你第一眼看到這張圖片的時(shí)候一定能夠非常明白它內(nèi)容的布局唧瘾，因?yàn)檎麖堈掌瑑?nèi)容的主次是非常分明的。所以如果我們?nèi)绻軌蛴靡环N用戶(hù)能夠快速理解的方式對(duì)頁(yè)面的可視層次內(nèi)容進(jìn)行組織和優(yōu)先級(jí)區(qū)分的處理别凤，就可以很大程度減少用戶(hù)的工作饰序；但是，如果一個(gè)頁(yè)面沒(méi)有清楚的視覺(jué)層次规哪，例如菌羽，我們讓頁(yè)面的所有內(nèi)容看起來(lái)都一樣重要，那么用戶(hù)將降低掃描頁(yè)面的速度由缆，他們會(huì)花費(fèi)大量時(shí)間去尋找關(guān)鍵的文字和短語(yǔ)注祖，然后努力拼湊出感覺(jué)重要的內(nèi)容，這樣無(wú)疑就給用戶(hù)增加了很多工作均唉。
講到可視化層級(jí)的處理是晨，我在這里給大家分享一個(gè)我認(rèn)為非常好的方法叫做“排位分析法”。這個(gè)方法是我在36氪APP上面看到的舔箭，推薦給各位罩缴。它這是一種適用于可視化產(chǎn)品的分析方法，我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候层扶，我們先把這個(gè)頁(yè)面會(huì)涉及到的相關(guān)聯(lián)的參數(shù)列出來(lái)箫章，比如說(shuō)頁(yè)面涉及到的一些信息呀之類(lèi)的，然后我們?cè)賹?duì)這些參數(shù)進(jìn)行篩選镜会，這樣我們就可以很清晰地去決定哪些參數(shù)可以被呈現(xiàn)在當(dāng)前頁(yè)面檬寂，哪些參數(shù)在其他頁(yè)面呈現(xiàn)，以及哪些參數(shù)最終被舍棄戳表。確定了頁(yè)面要呈現(xiàn)的參數(shù)以后桶至，我們就需要給這些參數(shù)賦予最終的價(jià)值昼伴，有的參數(shù)很重要，我們就會(huì)給它一個(gè)比較高的視覺(jué)權(quán)重镣屹，有的參數(shù)不那么重要圃郊，我們就會(huì)給他一個(gè)比較弱的視覺(jué)權(quán)重。所以最終我們就可以確定這些參數(shù)誰(shuí)在第一屏幕女蜈，誰(shuí)在第二屏幕持舆，誰(shuí)在頁(yè)面上方，誰(shuí)在頁(yè)面下方,誰(shuí)大一點(diǎn)伪窖，誰(shuí)小一點(diǎn)逸寓。那么通過(guò)參數(shù)與參數(shù)之間的排位，我們就能夠比較正確地去在頁(yè)面上表達(dá)出我們作為設(shè)計(jì)人員的思想以及價(jià)值觀(guān)惰许，甚至可以對(duì)用戶(hù)的頁(yè)面反饋結(jié)果進(jìn)行一定意義且有效的推測(cè)席覆。
在這本書(shū)中史辙，作者還提到了一個(gè)非常有趣的定律叫做“可用性第三定律”汹买，這個(gè)定律我給大家概括一下，就是當(dāng)你認(rèn)為你已經(jīng)設(shè)計(jì)好一個(gè)頁(yè)面的第一個(gè)版本時(shí)聊倔，你先不要拿給用戶(hù)看晦毙，這個(gè)時(shí)候你需要做的是去掉這個(gè)頁(yè)面上一半的文字，然后再把剩下的文字去掉一半耙蔑，這個(gè)時(shí)候用戶(hù)看到的才是可用性最強(qiáng)的頁(yè)面见妒。這個(gè)定律我第一次看到的時(shí)候覺(jué)得會(huì)有一點(diǎn)夸張，但是如果我們把它放到現(xiàn)實(shí)的情景當(dāng)中去思考甸陌，我們的用戶(hù)從出生到現(xiàn)在已經(jīng)看過(guò)了無(wú)數(shù)個(gè)無(wú)論是PC端還是移動(dòng)端的頁(yè)面须揣，所以他們?cè)趻呙桧?yè)面的時(shí)候，已經(jīng)開(kāi)始習(xí)慣性地去尋找各種視覺(jué)線(xiàn)索钱豁，比如可以點(diǎn)擊地按鈕耻卡、卡片，菜單欄牲尺、字體顏色等等卵酪。
以上圖的兩個(gè)頁(yè)面為例，這是我在做華潤(rùn)萬(wàn)象城項(xiàng)目的時(shí)候設(shè)計(jì)的頁(yè)面中的其中兩個(gè)谤碳。從上圖可以看到溃卡，我們希望用戶(hù)了解必填項(xiàng)的方式已經(jīng)不需要我們?cè)儆梦淖值男问饺フ故玖耍峭ㄟ^(guò)用戶(hù)非常熟悉的紅色星號(hào)去表達(dá)就可以蜒简，還有用簡(jiǎn)單的刷新圖標(biāo)去提示用戶(hù)點(diǎn)擊此處可以刷新瘸羡，這樣的設(shè)計(jì)方式既可以讓有用的內(nèi)容更加突出，而且可以讓頁(yè)面不會(huì)因?yàn)槲淖痔喽@得冗雜搓茬，那我們的頁(yè)面就可以做到更加簡(jiǎn)潔和美觀(guān)最铁。
在我們?nèi)ピu(píng)判自己設(shè)計(jì)的網(wǎng)站做的夠不夠好的時(shí)候讯赏，有可能我們會(huì)擔(dān)心由于主觀(guān)因素的存在會(huì)不會(huì)影響到我們的判斷，所以我為各位介紹一種測(cè)試你的頁(yè)面設(shè)計(jì)的夠不夠好的方法冷尉，這個(gè)方法叫做“后備箱測(cè)試”（如上圖）漱挎，就像各位看到的這樣，你想象你自己被蒙上雙眼鎖在了車(chē)子的后備箱里雀哨，車(chē)開(kāi)了一會(huì)兒之后把你放在一個(gè)網(wǎng)站的一個(gè)頁(yè)面前面磕谅，當(dāng)眼罩去除之后，你應(yīng)該能毫不猶豫地回答一下幾個(gè)問(wèn)題：1.是這是什么網(wǎng)站雾棺。這個(gè)其實(shí)即使我們很熟悉的網(wǎng)站ID膊夹；2.我在哪個(gè)網(wǎng)頁(yè)上。就是說(shuō)你能不能很清楚地看到這個(gè)網(wǎng)頁(yè)的名稱(chēng)捌浩；3.這個(gè)網(wǎng)站的主要欄目是什么放刨。就是這個(gè)頁(yè)面有沒(méi)有欄目清單；4.這個(gè)層次上我有哪些選擇尸饺。也就是這個(gè)頁(yè)面有沒(méi)有本頁(yè)導(dǎo)航进统；5.我怎么搜索。就是這個(gè)頁(yè)面尤其是主頁(yè)有沒(méi)有搜索欄浪听。那么如果以上所有測(cè)試的條件都滿(mǎn)足了螟碎，那你面前的這個(gè)頁(yè)面至少已經(jīng)符合大眾用戶(hù)對(duì)Web頁(yè)面的基本期待了。
接下來(lái)我想用一個(gè)我認(rèn)為我看過(guò)的比較好的web頁(yè)面之一作為案例給各位展示一下（如上圖）迹栓，有一天我的一位朋友分享給我一個(gè)鏈接掉分，我點(diǎn)擊之后就看到了左邊的這個(gè)頁(yè)面，單從這個(gè)頁(yè)面來(lái)看的話(huà)其實(shí)是不太容易知道這個(gè)網(wǎng)站是做什么的克伊，因?yàn)楝F(xiàn)在展示在我面前的只是網(wǎng)站的其中一個(gè)子模塊的內(nèi)容酥郭，但是這并沒(méi)有對(duì)我造成任何的困擾，因?yàn)槲铱梢院茌p易地看到欄目清單的第一個(gè)字段就是“Hello”,所以從用戶(hù)習(xí)慣的角度來(lái)講愿吹，它會(huì)傳遞給我一個(gè)信息就是點(diǎn)擊之后我應(yīng)該能跳轉(zhuǎn)到網(wǎng)站介紹相關(guān)的頁(yè)面不从，所以我點(diǎn)擊之后果然呈現(xiàn)在我面前的就是右邊的這個(gè)頁(yè)面，最先映入我眼簾的非常大的字段就是他們網(wǎng)站類(lèi)似于宗旨的一句話(huà)洗搂，然后我繼續(xù)往下快速瀏覽就可以在很短的時(shí)間內(nèi)了解到這個(gè)網(wǎng)站就是一家在美國(guó)成立的項(xiàng)目眾籌公司消返。那么對(duì)于我來(lái)說(shuō)這個(gè)網(wǎng)站是為我節(jié)省了很多時(shí)間的，我不需要花費(fèi)大量思考的時(shí)間就可以很快地去了解它耘拇。
尤其是Web網(wǎng)頁(yè)撵颊，它相對(duì)于移動(dòng)端的頁(yè)面來(lái)講，可供我們?nèi)ピO(shè)計(jì)和去展示的空間相對(duì)來(lái)說(shuō)會(huì)更大一些惫叛，所以這也就非常容易讓我們?cè)噲D把所有我們想要呈現(xiàn)的內(nèi)容一股腦的全放在一個(gè)頁(yè)面上倡勇，進(jìn)而非常容易引起我們的頁(yè)面尤其是主頁(yè)的混亂，從而引起有效性的總體損失嘉涌。
在這里給各位分享一個(gè)原理妻熊。它叫做“共有區(qū)域悲劇”夸浅，這個(gè)我記得是18還是19世紀(jì)的一位數(shù)學(xué)家提出來(lái)的，他說(shuō)任何共享的資源或是共有區(qū)域都會(huì)因?yàn)檫^(guò)度使用而遭到破壞扔役，這個(gè)理論如果放在我們的社會(huì)或者生態(tài)環(huán)境之類(lèi)的情境中就很容易理解帆喇，但是我覺(jué)得這個(gè)理論同樣可以體現(xiàn)在我們的頁(yè)面設(shè)計(jì)方面，因?yàn)楝F(xiàn)在我們做的更多設(shè)計(jì)工作對(duì)接的客戶(hù)大部分都是B端亿胸，企業(yè)用戶(hù)他們有時(shí)候會(huì)給你畫(huà)一個(gè)很大的餅坯钦，來(lái)告訴你這個(gè)模塊很重要、那個(gè)模塊也很重要的要求侈玄，那么我們作為頁(yè)面的設(shè)計(jì)人員一定要去做一個(gè)頁(yè)面層級(jí)的區(qū)分婉刀，就像剛剛我說(shuō)的排位分析法一樣，不要過(guò)度去利用一個(gè)頁(yè)面的所有空間序仙。
其實(shí)這整本書(shū)主要就是圍繞著頁(yè)面的“可用性”來(lái)展開(kāi)的突颊，所以去評(píng)判一個(gè)頁(yè)面是否滿(mǎn)足可用性的標(biāo)準(zhǔn)，這本書(shū)也講了很多的定義潘悼，我為各位做了一個(gè)比較全面地總結(jié)（如下圖）律秃。
其實(shí)每一位用戶(hù)在進(jìn)入一個(gè)頁(yè)面的時(shí)候他們腦子里都會(huì)有一個(gè)無(wú)形的好感器開(kāi)始運(yùn)轉(zhuǎn)，如果這個(gè)頁(yè)面我們做的很周到并且?guī)退麄児?jié)省了很多時(shí)間挥等，那么這個(gè)好感器的值就會(huì)不斷增加友绝，如果這個(gè)頁(yè)面我們做的不夠周到堤尾，比如說(shuō)隱藏了用戶(hù)想要的信息肝劲、給用戶(hù)在點(diǎn)擊等方面造成了障礙，那很顯然好感器的值一定會(huì)下降地很快郭宝。
我之前在學(xué)習(xí)可汗學(xué)院的時(shí)候聽(tīng)了哈佛達(dá)爾文系列講座辞槐，那個(gè)講座的名字很簡(jiǎn)單，就一個(gè)字“美”粘室，然后其中有兩節(jié)課我印象最深榄檬，一節(jié)叫做美與吸引，一節(jié)叫做美與恐懼衔统，他們兩節(jié)課還是挨著的鹿榜。那吸引和恐懼的一個(gè)臨界點(diǎn)是什么呢，就是你面前所呈現(xiàn)的美符不符合科學(xué)思維锦爵，科學(xué)思維這個(gè)詞聽(tīng)起來(lái)好像有些抽象舱殿，其實(shí)不然。這個(gè)科學(xué)思維是誰(shuí)要求的誰(shuí)規(guī)定的险掀，其實(shí)就是當(dāng)代社會(huì)大眾的普遍認(rèn)知嘛沪袭，我們或許可以將不同的頁(yè)面是否好看歸納于每個(gè)人的審美不同，但是這個(gè)頁(yè)面是不是可用樟氢，所呈現(xiàn)出來(lái)的視覺(jué)權(quán)重是不是合理冈绊，這是無(wú)法歸納于個(gè)人判斷的侠鳄，它一定是和普遍大眾的習(xí)慣用法掛鉤的，也一定是基于理論依據(jù)和數(shù)據(jù)支撐的死宣。
那看到這里各位可能會(huì)有疑問(wèn)：這就意味著為了遵循可用性的標(biāo)準(zhǔn)我們就不能去做一些創(chuàng)新嗎伟恶？當(dāng)然不是。各位看到的上圖中的圖片是國(guó)外的一家爵士樂(lè)主題的網(wǎng)站毅该，進(jìn)入網(wǎng)站之后在主頁(yè)你會(huì)看到一張爵士樂(lè)演奏家的一張合影（左上圖）知押，你隨機(jī)點(diǎn)擊合影的任何區(qū)域，它就會(huì)把該區(qū)域涉及到的演奏家放大（右上圖）鹃骂，然后你再點(diǎn)擊其中的一位演奏家的照片你就可以看到這位演奏家的詳細(xì)介紹了（左下圖）台盯。這樣的設(shè)計(jì)不僅很新穎很有樂(lè)趣，而且非常容易理解和使用畏线。而且我認(rèn)為這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)者非常聰明静盅，因?yàn)樗烙脩?hù)對(duì)于這種好玩的新鮮勁一定會(huì)很快過(guò)去，所以他們還提供了一份傳統(tǒng)的基于分類(lèi)的導(dǎo)航系統(tǒng)（右下圖）寝殴，用戶(hù)也可以通過(guò)左側(cè)的導(dǎo)航欄去查詢(xún)演奏家蒿叠、樂(lè)器的詳細(xì)信息。所以我們當(dāng)然可以盡可能地富有創(chuàng)造性蚣常、進(jìn)行創(chuàng)新市咽、進(jìn)行美化讓設(shè)計(jì)富有吸引力，但是這所有的前提一定是要保證我們的頁(yè)面仍然是可用性很強(qiáng)的抵蚊。
在一些特別重要的頁(yè)面設(shè)計(jì)上施绎，其實(shí)是根本不存在“想當(dāng)然”的，現(xiàn)在有一些非常有影響力的產(chǎn)品贞绳，尤其是大廠(chǎng)谷醉，他們對(duì)頁(yè)面得到的用戶(hù)反饋結(jié)果的要求非常嚴(yán)格，所以“想當(dāng)然”的設(shè)計(jì)風(fēng)格也一定是不被允許出現(xiàn)的冈闭。
關(guān)于頁(yè)面設(shè)計(jì)的好書(shū)肯定還有很多很多俱尼，那我也想給各位在最后推薦一些我認(rèn)為不錯(cuò)的相關(guān)的書(shū)籍和學(xué)習(xí)途徑（如上圖），《設(shè)計(jì)心理學(xué)》萎攒、《風(fēng)格要素》遇八、《理性的儀式》、可汗學(xué)院和網(wǎng)易公開(kāi)課耍休。無(wú)論是書(shū)籍還是視頻課程其實(shí)我都特別建議各位可以去涉獵不同的領(lǐng)域刃永，不用為了頁(yè)面設(shè)計(jì)而僅僅去找設(shè)計(jì)方面、用戶(hù)方面的書(shū)和視頻去看羹应，其實(shí)很多知識(shí)它是相通的嘛揽碘，一個(gè)領(lǐng)域的理論和價(jià)值觀(guān)有的時(shí)候是完全可以在另一個(gè)領(lǐng)域說(shuō)的通的，所以我們?nèi)チ私獾拿娓鼜V一些，那我們懂的就會(huì)更廣雳刺，那這樣也會(huì)幫助我們?cè)陧?yè)面設(shè)計(jì)的時(shí)候有更多的知識(shí)儲(chǔ)備支撐我們?cè)诳捎玫幕A(chǔ)上把頁(yè)面做的更精致劫灶，而且我們?cè)谌ズ涂蛻?hù)溝通的時(shí)候也一定會(huì)更有自信。
那最后給各位分享一句我挺喜歡的一句話(huà)吧掖桦，就是電影《教父》中的一句經(jīng)典臺(tái)詞：
用半秒就看透事物本質(zhì)和用一輩子看透事物本質(zhì)的人生本昏，一定是截然不同的。
我們要努力做到的是讓用戶(hù)用半秒時(shí)間就能看懂我們?cè)O(shè)計(jì)的頁(yè)面的本質(zhì)枪汪，但前提是我們一定要用雖然不至于一輩子涌穆，但是也要用很多次的思考去思考我們要設(shè)計(jì)的頁(yè)面的本質(zhì)，那最終呈現(xiàn)出來(lái)的效果也一定會(huì)截然不同雀久。
