最近在看網(wǎng)頁設(shè)計(jì)中的經(jīng)典書《點(diǎn)石成金》,學(xué)到了很多網(wǎng)頁設(shè)計(jì)的原則,這里總結(jié)了一下,對(duì)
入門網(wǎng)頁設(shè)計(jì)的小伙伴很有好處。
一、用戶實(shí)際上是如何使用網(wǎng)站的?
作者經(jīng)過大量觀察發(fā)現(xiàn),用戶使用網(wǎng)站的方式與工程師設(shè)想的使用方式,差別巨大;
· 1
、我們不是閱讀,而是掃描。網(wǎng)頁設(shè)計(jì)師精心準(zhǔn)備的文字,在用戶看來,更像以每小時(shí)
100
公里的速度駛過的廣告牌。
o
我們總是處于忙碌之中
o
我們知道自己不必閱讀所有的內(nèi)容
o
我們善于掃描,會(huì)自動(dòng)忽略不需要的信息
· 2
、我們不做最佳選擇,而是滿意即可
o
用戶很忙,沒時(shí)間尋找最佳策略,而是尋找第一個(gè)合理選項(xiàng)(
滿意策略
)
o
就算猜錯(cuò)了可以馬上重來(刷新和倒退按鈕是網(wǎng)頁瀏覽里最常用的地方)
· 3
、我們不是追根問底,而是勉強(qiáng)應(yīng)付。用戶使用產(chǎn)品,往往對(duì)其運(yùn)作原理不感興趣(不喜歡看使用說明),甚至有錯(cuò)誤的認(rèn)識(shí),但這不妨礙他們用得很好。
o
了解工作機(jī)制沒必要。
o
如果發(fā)現(xiàn)某個(gè)策略有效,就一直用它,不管多難用,很少主動(dòng)尋找更好的方法。(這一點(diǎn)我深有同感,我之前一直用Surface
自帶的中文輸入法
——
智能識(shí)別很爛,打字很不方便,但是只要還能用,我就懶得去下載別的輸入法?。?/span>
針對(duì)這些情況,我們需要相應(yīng)地做出符合用戶行為特點(diǎn)的網(wǎng)站來,我們的目的是:把網(wǎng)站設(shè)計(jì)得快速和清晰,讓它盡量的一目了然、不言而喻、自我解釋,減少用戶自己瞎猜瞎捉摸的時(shí)間,簡(jiǎn)而言之,“
不要讓用戶思考
”
。
Krug的可用性三定律是:
·
別讓用戶思考。
·
點(diǎn)擊多少次都沒關(guān)系,只要每次點(diǎn)擊都是無需思考、明確無誤的選擇。
·
去掉每個(gè)頁面上一半的文字,然后把剩下的文字再去掉一半。
一個(gè)緊接著而來的問題是,用戶最容易思考哪些問題,以及在那些地方最容易犯渾?
·
我在網(wǎng)頁的什么位置?——
導(dǎo)航欄在哪?怎么回到首頁?怎么去網(wǎng)站其他頁面?
·
我該從哪開始?——
這個(gè)頁面主要是什么內(nèi)容?網(wǎng)頁布局怎樣?是不是眼花繚亂?
·
這個(gè)頁面什么最重要?——
哪個(gè)部分最先吸引了我?
·
有哪些欄目可以選擇?——
欄目清單?導(dǎo)航?
·
我可以點(diǎn)擊它嗎?——
有沒有超鏈接顯示、可點(diǎn)擊標(biāo)志?
·
這句話是什么意思?——
有沒有太多用戶不懂的術(shù)語?有沒有直觀演示?
你可以把這些問題用來檢測(cè)網(wǎng)頁的可用性,打開一個(gè)網(wǎng)站后快速看一遍,然后回答自己,這種問題自檢法法十分直觀有效。
二、針對(duì)掃描設(shè)計(jì)的5個(gè)方法
· 1
、在每個(gè)頁面上建立清楚的視覺層次。
o
越重要的部分越突出。
o
邏輯上相關(guān)的部分視覺上也相關(guān)。
o
邏輯上包含的部分在視覺上進(jìn)行嵌套。
· 2
、盡量利用習(xí)慣用法。
o
借鑒其他紙媒的習(xí)慣法。
o
借鑒主流的網(wǎng)頁設(shè)計(jì)。
o
抑制重新發(fā)明輪子的沖動(dòng),除非它也很好上手,并且能帶來很大的價(jià)值。
· 3
、把頁面劃分成明確定義的區(qū)域。
· 4
、明顯標(biāo)志可以點(diǎn)擊的地方:如果一個(gè)東西可以點(diǎn)擊,你要把它明確地告訴用戶。
· 5
、最大限度降低干擾。
三、減少網(wǎng)頁文字
作者引用了E.B.Whited
《風(fēng)格的要素》里的一段話:
“
有力的文字都很簡(jiǎn)練。句子里不該有多余的文字,段落中不該有多余的句子。同樣,畫上不應(yīng)有多余的線條,機(jī)器上不應(yīng)該有多余的零件。
”
減少網(wǎng)頁上的文字可以讓頁面更簡(jiǎn)潔,重要的內(nèi)容跟突出??梢詮囊韵聨c(diǎn)著手:
·
消滅歡迎詞。
·
精簡(jiǎn)說明文字。
·
讓信息出現(xiàn)在它該出現(xiàn)的地方。
四、導(dǎo)航設(shè)計(jì)
可以將在超市的導(dǎo)航系統(tǒng)和網(wǎng)站導(dǎo)航系統(tǒng)類比,用戶使用你網(wǎng)站,也遵循同樣的過程:
·
你通常是為了尋找某個(gè)目標(biāo)
·
你會(huì)決定先人工咨詢還是自己先找找
·
如果自己瀏覽,你會(huì)去找導(dǎo)航系統(tǒng),一層層點(diǎn)擊
·
找到了;或者沒找到,返回主頁(后退鍵和主頁非常重要),或者直接離開
網(wǎng)站導(dǎo)航的好處:
·
它告訴我們當(dāng)前的位置(層級(jí)菜單)
·
它給了我們固定的感覺
·
它告訴如何瀏覽網(wǎng)站
·
它讓我們對(duì)網(wǎng)站建造者留下好印象
在網(wǎng)站的不同頁面,導(dǎo)航也不一樣(比如主頁和表單頁),但大致的組成是一樣,主要有五個(gè)部分:
· 1
、站點(diǎn)
ID
:表明一個(gè)網(wǎng)站的最基本標(biāo)志,需要在每個(gè)頁面出現(xiàn)、強(qiáng)化。
· 2
、欄目:主導(dǎo)航條(
Primary Navigation
),可進(jìn)一步分出二級(jí)導(dǎo)航。
· 3
、實(shí)用工具:幫助我們使用站點(diǎn),比如登錄、注冊(cè)、聯(lián)系我們、幫助、搜索、主頁、隱私聲明等等,不要在導(dǎo)航條上放太多。
· 4
、主頁:一個(gè)明顯的可以把我們送回主頁的按鈕。
· 5
、搜索:搜索框要簡(jiǎn)潔醒目,如果有選項(xiàng),要謹(jǐn)慎它本身會(huì)不會(huì)讓用戶產(chǎn)生疑惑。
其他在導(dǎo)航設(shè)計(jì)中用到的部分還有:層級(jí)分割的“
你在這里
”
、標(biāo)簽。
五、主頁設(shè)計(jì)
主頁主要包含:站點(diǎn)標(biāo)志、導(dǎo)航、搜索、導(dǎo)讀、內(nèi)容更新、友情鏈接、注冊(cè)登錄等,主要需要肩負(fù)三大責(zé)任:傳達(dá)整體形象、告知使用方法、建立用戶的信用。
如何傳達(dá)整體形象?
·
口號(hào):清楚、言之有物、長(zhǎng)度適中,不要太籠統(tǒng)(不要和宗旨混淆)
·
歡迎廣告
主頁導(dǎo)航可以其他頁面導(dǎo)航不一樣,它可以更大,有更多的描述。設(shè)計(jì)主頁的時(shí)候,要注意合理分配版面。接下來,作者花了不少篇幅,分析了具體的主頁設(shè)計(jì)的案列,很有參考性。
六、可用性測(cè)試
在網(wǎng)頁設(shè)計(jì)中,工程師和設(shè)計(jì)師往往各持己見,工程師認(rèn)為人們喜歡功能又多又酷的網(wǎng)站,設(shè)計(jì)師則喜歡視覺上有趣的網(wǎng)站,這還只是技術(shù)層面的分歧,當(dāng)討論上升到經(jīng)理那兒,又有市場(chǎng)的要求。面對(duì)這種分歧,最好的解決辦法就是做可用性測(cè)試。
除了第一章的“
問題自檢法
”
,我們還需要邀請(qǐng)一些真實(shí)的用戶來參與測(cè)試。一般來說:
·
如果想建立一個(gè)優(yōu)秀的網(wǎng)站,一定要測(cè)試
·
測(cè)試一個(gè)用戶也比不做測(cè)試好
·
早點(diǎn)測(cè)試好過最后測(cè)試50
位用戶(越晚越難傷筋動(dòng)骨)
·
測(cè)試對(duì)象是誰并不重要
·
測(cè)試時(shí)一個(gè)迭代的過程
·
沒什么比現(xiàn)場(chǎng)用戶的反應(yīng)更重要
作者推薦了一種比較省錢省時(shí)間的測(cè)試方法:
·
招募測(cè)試對(duì)象,和對(duì)象做一些相互介紹
·
打開主頁,詢問對(duì)象對(duì)主頁的一般印象(可用性問題)
·
讓對(duì)象執(zhí)行一些特定的任務(wù),看他是不是可以按網(wǎng)站的設(shè)計(jì)意圖來使用
·
引導(dǎo)對(duì)象在測(cè)試過程中說出自己每個(gè)選擇背后的想法
·
測(cè)試做完后立刻回顧測(cè)試結(jié)果,并著手解決:
o
忽略皮劃艇問題(用戶可以自己嘗試解決的問題)
o
抵制添加沖動(dòng),改為刪除干擾信息
o
不要太看重人們對(duì)新功能的要求
o
抓住夠得著的果子:恍然大悟型;便宜型
o
善于平衡,修改的同時(shí)不破壞已有的正常部分
七、可用性是基本禮貌
到目前為止,作者一直在論述如何讓網(wǎng)頁清晰簡(jiǎn)潔,簡(jiǎn)而言之:容易理解的程度。可用性還有另外一個(gè)重要部分:能為用戶提供更多的服務(wù)。例如:
·
不要隱藏用戶想知道的信息
·
不要向用戶索取太多個(gè)人信息
·
不要敷衍用戶
·
不要設(shè)置障礙(必須瀏覽很多沒有必要的圖片或廣告)
·
減少步驟
·
容易從錯(cuò)誤中恢復(fù)
·
及時(shí)提供解答
·
如有錯(cuò)誤要記得道歉
·
提供其他協(xié)助服務(wù),比如打印頁面等
·
考慮一些特殊人士(盲人、左撇子)的使用習(xí)慣
o
讓所有的內(nèi)容都可以通過鍵盤訪問
o
為圖片增加alt
文本
原文來自:簡(jiǎn)書/倉(cāng)廩一間