如何設(shè)計網(wǎng)站——對Web設(shè)計的一點總結(jié)
如何設(shè)計網(wǎng)站——對Web設(shè)計的一點總結(jié)
在最近的工作中，遇到了導(dǎo)航的問題，無意中發(fā)現(xiàn)了找出了收藏已久的《別讓我思考》，花了一周時間讀了兩遍，才清楚的理解導(dǎo)航對于一個產(chǎn)品的重要作用。也更加印證了產(chǎn)品圈中將用戶當做小白的理論，其實并不是在產(chǎn)品設(shè)計中將一切都為用戶標注出來，而是讓用戶能夠通過自己的方式更加輕松的使用產(chǎn)品，這樣的產(chǎn)品對于用戶來說必定是不言而喻的，也就是主題“別讓我思考”。
下面是這次讀書的筆記，雖然這本書給我很大的啟發(fā)，但是一切需要歸于實踐，在實踐中驗證這個理論。
一、指導(dǎo)原則
**章：別讓我思考?—?可用性**定律
web設(shè)計的**法則：別讓我思考，即看到一個界面應(yīng)該是?不言而喻?，?一目了然?，?自我解釋?。
強迫我們思考的地方：（1）酷炫的名字或技術(shù)名詞。（2）看起來不太明顯的按鈕和鏈接
當思考時，需要權(quán)衡，權(quán)衡應(yīng)該更傾向于“顯而易見”，而不行hi需要額外的思考
每個需要思考的地方會加重用戶的認知負擔，把用戶的注意力從要完成的任務(wù)上拉開
訪問網(wǎng)站時不需要思考的事都有什么？
我在什么位置？
該從哪里開始？
他們把xx放在什么地方？
這個項目上最重要的是什么？
為什么他們給它取這個名字？
如果做不到讓一個頁面不言而喻，那么至少應(yīng)該讓它自我解釋
當瀏覽網(wǎng)站遇到問題時，用戶會認為是自己的錯誤，而不會責(zé)怪網(wǎng)站
如果要讓網(wǎng)頁有效，它們必須在用戶**眼看到時將自己展示出來，而要做到這一點，**的方法是創(chuàng)建不言而喻的網(wǎng)頁，或者至少是自我解釋。
第二章：我們實際上是如何使用Web的?—?掃描，滿意即可，勉強應(yīng)付
事實1?—?我們不是閱讀，而是掃描，尋找能吸引用戶注意力的文字或詞語（除**故事，報告，產(chǎn)品描述界面）
為什么掃描？
（1）我們總是處于忙碌之中?—?使用web是想節(jié)約時間
（2）我們知道自己不必閱讀所有內(nèi)容?—?尋找感興趣或手頭的任務(wù)相關(guān)的內(nèi)容
（3）我們善于掃描?—?生活習(xí)慣，找感興趣的內(nèi)容
用戶在網(wǎng)頁上看到什么卻決于想看到什么，通常為頁面的一小部分內(nèi)容
吸引注意力的文字和短語是什么？
（1）與手頭任務(wù)有關(guān)的
（2）我們當前或接下來的個人興趣
事實2?—?我們不作**選擇，而是滿意即可
用戶大多數(shù)時間不會選擇**選項，而是選擇**個合理的選項?—?滿意策略
為什么不尋找**選擇？
（1）我們總是處于忙碌之中?—?**策略時間久，滿意策略效率高
（2）如果猜錯了，也不會產(chǎn)生什么嚴重的后果
（3）對選擇進行權(quán)衡并不會改善我們的機會
（4）猜測更有意思?—?猜測不會像權(quán)衡那么累，猜對了，可能看到意外的內(nèi)容
事實3?—?我們不是追根究底，而是勉強應(yīng)付
勉強應(yīng)付不僅限于初學(xué)者，技術(shù)專家也會在理解事物的工作原理上有著驚人的誤會
原因是什么？
（1）這對我們來說并不重要?—?明白事物工作機制并不重要
（2）如果發(fā)現(xiàn)某個事物能用，我們會一直使用它?—?如果遇到更好的方法，會用好的方法，但是很少主動尋找更好的方法
如果用戶明白網(wǎng)站，而不是勉強應(yīng)付的作用
（1）用戶更容易找到自己需要的東西，對用戶和網(wǎng)站都好
（2）用戶更容易理解你的網(wǎng)站有哪些服務(wù)?—?不僅僅是用戶偶然看到的
（3）引導(dǎo)用戶看到你希望他們看到的內(nèi)容（網(wǎng)站上）
（4）在你的網(wǎng)站上，用戶會感到掌控全局，并逐漸成為老用戶
第三章：廣告牌設(shè)計101法則?—?為掃描設(shè)計，不為閱讀設(shè)計
吸引用戶的5個重要方面（為下方2-6部分內(nèi)容）
在每個頁面上建立清楚的視覺層次
盡量利用習(xí)慣用法
把頁面劃分成明確定義的區(qū)域
明顯標識可以點擊的地方
**限度降低干擾
建立清楚的視覺層次
視覺層次清楚的頁面的特點
（1）越重要的部分越突出
（2）邏輯上相關(guān)的部分在視覺上也相關(guān)
（3）邏輯上包含的部分在視覺上進行嵌套
一個頁面沒有清楚的視覺層次，用戶會降低掃描頁面的速度，會尋找關(guān)鍵的文字和短語，然后拼湊出感覺重要的內(nèi)容和內(nèi)容的組織方式，這樣會增加工作量
習(xí)慣用法是你的好幫手
web的習(xí)慣用法
（1）它們非常有用?—?適當使用習(xí)慣用法，讓用戶訪問更容易，減少額外學(xué)習(xí)工作原理ide成本
（2）設(shè)計師通常不愿意利用它們
如果不打算使用習(xí)慣用法，需要的做法：
a.必須確定你在使用一種同樣清楚、同樣不言而喻，沒有學(xué)習(xí)曲線的方法
b.帶來很大的價值
把頁面劃分成明確定義的區(qū)域
明顯標識可以點擊的地方
降低視覺噪聲
噪聲的分類
（1）眼花繚亂?—?所有的信息都想吸引用戶的目光，沒有突出點
（2）背景噪聲?—?頁面沒有一個地方會造成過分干擾，但是這些很小的噪聲太多會惹人厭煩
第四章：動物、植物、無機物?—?為什么用戶喜歡無需思考的選擇
真正的問題不是到達目標之前要點擊的次數(shù)，而是每次點擊有多難，需要多少思考，多大的不確定性來判斷自己是否在進行正確的選擇
關(guān)鍵：如果用戶需要一直在**上進行選擇，那么讓這些選擇變得無需思考是讓一個網(wǎng)站容易使用的原因
第五章：省略不必要的文字?—?不要在Web上寫作的藝術(shù)
有力的文字都很簡練。
句子里不應(yīng)該有多余的文字，段落中不應(yīng)該有多余的句子
去掉沒人看的文字的優(yōu)點有哪些？
可以降低頁面的噪聲
讓有用的內(nèi)容更加突出
讓頁面簡潔，讓用戶在每個頁面上以言就能看見更多的內(nèi)容，而不必滾動屏幕
需要去掉的文字是?歡迎詞?和?指示說明
二、必須正確處理的幾個方面
第六章：街頭指示牌和面包屑?—?設(shè)計導(dǎo)航
如果在網(wǎng)站上找不到方向、人們不會使用你的網(wǎng)站
**導(dǎo)航101法則
你通常是為了尋找某個目標
你會決定先詢問還是先瀏覽
如果選擇劉蘭蘭，你將通過標志的引導(dǎo)再層次結(jié)構(gòu)中穿行
**，如果找不到想要的東西，你會離開
web與生活從空間角度來看的不同點
感覺不到大小
感覺不到方向
感覺不到位置
用戶使用Web導(dǎo)航是因為需要得知自己當前的位置
導(dǎo)航的用途?—?顯而易見的用途
幫助我們找到想要的任何東西
告訴我們現(xiàn)在身處何處
導(dǎo)航給了用戶一些固定的感覺，讓用戶感到腳踏實地
導(dǎo)航的其他用途?—?被忽視的用途
導(dǎo)航告訴我們當前的位置?—?告訴網(wǎng)站有些什么，導(dǎo)航表現(xiàn)了內(nèi)容，導(dǎo)航站點比告訴我們位置更重要
導(dǎo)航告訴我們?nèi)绾问褂镁W(wǎng)站?—?從哪里開始，如何進行選擇
導(dǎo)航給了用戶對網(wǎng)站建造者信心
Web導(dǎo)航的習(xí)慣用法
網(wǎng)站ID
欄目
實用工具
指示器（指明用戶當前位置）
下一級欄目
頁面名稱
頁面導(dǎo)航（當前這一層的內(nèi)容）
小字體版的底端導(dǎo)航
持久導(dǎo)航（或全局導(dǎo)航）?：來描述出現(xiàn)在網(wǎng)站每個頁面的一組導(dǎo)航元素
持久導(dǎo)航應(yīng)在在整個網(wǎng)站保持一致，使用戶只需要了解一次就夠了，減少學(xué)習(xí)成本
持久導(dǎo)航的五個元素
站點ID
回首頁的方式（Home）
搜索的方式
欄目
實用工具
主頁和表單?不需要使用持久導(dǎo)航
主頁：承擔一些不同的任務(wù)，遵守一些不同的承諾，所以不需要使用持久導(dǎo)航
表單：在填寫表單的頁面，持久導(dǎo)航會產(chǎn)生干擾
如何設(shè)計Web導(dǎo)航各元素（表格下方為示例?–?亞馬遜）
導(dǎo)航元素名稱
細節(jié)點
站點ID
1.在Web上需要在每個頁面都能看到網(wǎng)站的名稱?—?頁面ID，通常在左上或靠近左上
2.網(wǎng)站ID代表整個網(wǎng)站，也就是說在當前站點結(jié)構(gòu)中層次**
3.站點ID如何出現(xiàn)在頁面可視層次的首要位置
（1）讓網(wǎng)站站點成為本頁最顯眼的內(nèi)容
（2）讓網(wǎng)站ID涵蓋頁面所有其他元素
4.站點ID需看起來像一個站點ID?—?例如logo
欄目
1.欄目（或稱主導(dǎo)航條）是到達站點主要欄目的鏈接，結(jié)構(gòu)的最頂層
2.大部分情況，持久導(dǎo)航也包括二級導(dǎo)航（當前欄目的下一級欄目清單）的顯示位置
實用工具
實用工具是到達網(wǎng)站中不屬于內(nèi)容層次的重要元素的鏈接
返回主頁Home
1.返回主頁（Home）的按鈕需要始終可見，給用戶一種隨時可以從新開始的感覺
2.Home的用法
（1）在欄目或使用工具清單中包含一個回到主頁的鏈接
（2）在主頁之外的站點ID上小心地加上Home的字樣，讓用戶知道點擊它
搜索
1.避免混淆的方法
（1）花哨的用字
（2）指示說明
（3）選項?—?將選項寫下來
2.需要對低層次導(dǎo)航給予足夠的重視（**導(dǎo)航）
頁面名稱
1.頁面名稱的注意事項
（1）每個頁面都需要一個名稱
（2）頁面名稱要出現(xiàn)在合適的位置
（3）名稱引人注目
（4）名稱要和點擊的鏈接一致
指示器
1.如何標記當前位置
（1）在旁邊放置一個指示器
（2）改變文字的顏色
（3）使用粗體
（4）按鈕反白
（5）改變按鈕的顏色
2.告訴用戶你所在的站點層級結(jié)構(gòu)的前后關(guān)系（在網(wǎng)頁中的位置）
層級菜單
1.告訴用戶從主頁到當前位置的路徑（如何到達）
2.層級導(dǎo)航的**實踐方式
（1）將它們放在最頂端
（2）使用“>”對層級進行分隔
（3）使用小字體（表明是一種補充機制）
（4）使用了文字“你在這里”
（5）將**一個元素加粗
（6）不需要把它們用作?頁面名稱
標簽
1.為什么標簽做導(dǎo)航是一個上佳的選擇
（1）它們不言而喻
（2）它們很難錯過（視覺上與眾不同）
（3）它們靈活
（4）它們暗示了一個物理的空間
2.注意事項
（1）正確繪制?—?激活的標簽頁在其他標簽頁之前
（2）顏色編碼?—?提高關(guān)注度
示例
如何評判一個網(wǎng)站設(shè)計的好
這是什么網(wǎng)站？（站點ID）
我在哪個網(wǎng)頁上？（網(wǎng)頁名稱）
這個網(wǎng)站的主要欄目有哪些？（欄目清單）
在這個層上我有哪些選擇？（本頁導(dǎo)航）
我在導(dǎo)航系統(tǒng)的什么位置？（“你在這里”的指示器）
我怎么搜索？（搜索欄）
第七章：首先要承認，主頁不由你控制?—?設(shè)計主頁
主頁主要完成的任務(wù)
站點的標識和使命?—?告訴用戶這是什么網(wǎng)站，做什么的
站點層次?—?提供服務(wù)的概貌，包括內(nèi)容，功能，服務(wù)是如何組織
搜索
導(dǎo)讀?—?需要有內(nèi)容推介，功能推介
友情鏈接?—?預(yù)留空間放置廣告，交叉推廣，品牌合作
快捷方式?—?最常訪問的內(nèi)容片段值得在網(wǎng)頁上放置鏈接
注冊
主頁需要滿足的抽象目標
讓用戶看到自己在尋找東西?—?讓用于想要的任何東西顯而易見
……還有我沒有尋找的?—?讓用戶看到一些精彩的內(nèi)容，就算這些內(nèi)容用戶沒有尋找
告訴用戶從哪開始
建立可信度和信任感
主頁的常見約束有哪些
每個人都想占一席之地?—?推介內(nèi)容過多
想要參與的人太多
一個尺寸要適合所有的人?—?普遍適用于大眾
主頁需要傳達整體形象，讓用戶一眼就能清楚你的網(wǎng)站是說什么的
如何向用戶傳達網(wǎng)頁的整體形象
口號?—?靠近站點ID的地方，整個網(wǎng)站的描述
歡迎廣告?—?網(wǎng)站的簡要描述，在主頁的首要位置，不需要滾動屏幕就能看到
傳達信息的原則
需要多大空間就使用多大空間
但也不要使用過多的空間?—?保持簡短
不要把實名陳述當做歡迎廣告
**的是進行測試
口號的注意事項
好的口號
不好的口號
清楚、言之有物
含混不清
長度適中，易讓用戶領(lǐng)會表達思想
太籠統(tǒng)
表達出網(wǎng)站特點和顯而易見的好處
把口號（傳達某種價值主張）和宗旨（表達某種指導(dǎo)原則，某個目標或某個理想）混淆起來
有個性、生動、有時候很俏皮
由于主頁獨特的職責(zé)，通常不必使用持久導(dǎo)航，它們之間的差異
欄目描述?—?主頁需要盡可能多的表現(xiàn)網(wǎng)頁內(nèi)容，其他頁面不需要
不同的方向?—?主頁和其他頁面布局不同，主頁通常用
用于表示的空間更多?—?主頁上站點ID比較大，口號留有空間也較大
讓欄目的名稱保持不變，同樣的順序、同樣的文字和同樣的分組，盡可能多地保持視覺提示，同樣的字體，顏色和大小寫
下拉框存在的問題
用戶必須將它們找出來?—?必須找到下拉框，才能看到下拉列表
它們難以掃描
不好控制?—?下拉列表收縮速度難以控制
下拉框?qū)τ诮M織按照字母順序排列的項目比較有效
下拉框的優(yōu)點是節(jié)約空間
任何共享的資源（共有區(qū)域）都會因為過度使用而遭到破壞?—?在主頁上增加更多的項目所得到的的和付出的并不一致，雖然給推薦欄目巨大的訪問量，但是讓主頁變得混亂，所遭受的損失將由所有欄目承擔
三、確定你沒有做錯的幾件事
第八章：農(nóng)場主和牧羊人應(yīng)該是朋友?—?為什么Web設(shè)計團隊討論可用性是在浪費時間，如何避免這種情況
由于各自的職位不同，Web團隊成員對于好的網(wǎng)站設(shè)計的看法不同
通過測試將討論對錯轉(zhuǎn)移到什么有效、什么無效上，測試會讓我們看到用戶的動機、理解和反應(yīng)的不同，從而不再讓我們堅持用戶和我們的想法相同
第九章：**10美分的可用性測試?—?讓測試簡單，這樣你能進行充分的測試
焦點小組并不是可用行測試，焦點小組是在項目早期階段，用來收集用戶的意見和感覺
可用性測試主要是希望得到用戶是否知道該網(wǎng)站是做什么的，并且能用它完成一項典型任務(wù)
測試的作用是什么
如果想建立一個**的網(wǎng)站，一定要測試
測試一個用戶比不做測試好一倍
在項目中，在點測試一位用戶好過**測試50位用戶
人們對招募用戶代表的重要性評估過高
測試的關(guān)鍵不是要證明什么或者反駁什么，而是了解你的判斷力
測試是一個迭代的過程
沒有什么比現(xiàn)場用戶的反應(yīng)更重要
尋找能夠反應(yīng)目標群體的測試用戶，但別裹足不前
尋找的測試用戶可以和目標群體有差別的理由是什么
差別的原因
例外
實際上，我們都是初學(xué)者
如果你的網(wǎng)站幾乎只由某一類用戶使用，且招募并不難，那就去招募
設(shè)計出的網(wǎng)站只有你的目標群體能使用，這通常并不是一個好主意
如果你的目標群體分為幾個明顯陣營，且各陣營有著完全不同的需求，那你至少要從每個陣營選擇用戶進行一次測試
專家通常不會介意對初學(xué)者來說很清楚的界面
如果使用你的網(wǎng)站需要專業(yè)的領(lǐng)域知識，那么你需要在該領(lǐng)域中招募有專業(yè)知識的用戶
進行招募，需要注意的問題是什么
提供合理的激勵
邀請要簡單
避免對網(wǎng)站（或網(wǎng)站背后的組織結(jié)構(gòu)）進行預(yù)先討論
別不好意思請朋友幫忙
測試中遇到的問題
用戶不清楚概念
用戶找不到自己想要的字眼?—?網(wǎng)站用來組織內(nèi)容的分類不符合用戶習(xí)慣;分類符合習(xí)慣但是沒有使用他們期望的名字
內(nèi)容太多?—?減少頁面上的干擾;將需要看到的內(nèi)容涉及的更加醒目
一些關(guān)于問題分類指南
問題
行為（用戶/主持）說明
正確解決方式
忽略Kayak（皮劃艇）問題
1.出現(xiàn)問題的人馬上發(fā)現(xiàn)自己偏離了原來的主題
2.用戶盡量回到原來的方向而不需要幫助
3.這種情況并沒有擾亂用戶的活動
可以忽略
**添加的沖動
增加一些內(nèi)容，注釋，指導(dǎo)說明
去除某個讓人混淆的內(nèi)容
不要太看重用戶對新功能的要求
抓住能夠的著的果子
1.恍然大悟型
2.便宜型
盡量實現(xiàn)變更
進行變更
只要你進行改變，就要仔細思考它將會影響哪些內(nèi)容，當你把某些部分調(diào)整的更為突出時，想想是不是把其他內(nèi)容的重要性降低了
四、大的方面和外界影響
第十章：可用性是基本禮貌?—?為什么你的網(wǎng)站應(yīng)該讓人尊敬
降低好感度的方式
隱藏我想要的信息
因為沒有按照你們的方式行事而懲罰我
向我詢問不必要的信息
敷衍我，欺騙我
給我設(shè)置障礙
你的網(wǎng)站看上去不專業(yè)
提高好感度的方式
知道用戶在你的網(wǎng)站上想做什么，并讓網(wǎng)站明白簡易
告訴用戶，他們想知道的
盡量減少步驟
花點心思
（1）保證網(wǎng)站準確有用
（2）產(chǎn)生解決我的問題所需要的信息
（3）網(wǎng)站用清楚的方式表達
（4）組織良好，用戶可以輕松找到解決方案
知道用戶有哪些疑問，并給予解答
為用戶提供協(xié)助
容易從錯誤中恢復(fù)
如果不確定，記得道歉
總結(jié)
這本書主要講了Web設(shè)計的一些核心的原則，以及用戶在使用Web時的心理，并且基于用戶的信息，來設(shè)計Web的導(dǎo)航和主頁。并且結(jié)合實踐，在項目中需要不斷的進行可行性測試迭代，從而使Web可行。這樣的網(wǎng)站才是一個成功的網(wǎng)站，在符合用戶的習(xí)慣的基礎(chǔ)上，讓用戶能夠自行的解決問題，從而達到網(wǎng)站和用戶的目的。
資源類：
大家都知道，學(xué)習(xí)本身是一個特別耗費時間和財力的事情，但是為了自身發(fā)展，卻不得不學(xué)習(xí)，而且現(xiàn)在對于職業(yè)教育的課程特別貴，并且專業(yè)書籍也是非常貴的。
為什么要使用Web標準設(shè)計網(wǎng)站?
WEB標準不是某一個標準，而是一系列標準的**。目前所通常所說的WEB標準一般指網(wǎng)站建設(shè)采用基于XHTML語言的網(wǎng)站設(shè)計語言,WEB標準中典型的應(yīng)用模式是“css+div”（什么是css+div）。
實際上，WEB標準并不是某一個標準，而是一系列標準的**。
網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的網(wǎng)站標準也分三方面：結(jié)構(gòu)化標準語言，主要包括XHTML和XML;表現(xiàn)標準語言主要包括CSS;行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C組織（什么是W3C組織）起草和發(fā)布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。web標準的本意是實現(xiàn)內(nèi)容(結(jié)構(gòu))和表現(xiàn)分離，就是將樣式剝離出來放在單獨的css文件中。
這樣做的好處是可以分別處理內(nèi)容和表現(xiàn)，也方便搜索和內(nèi)容的再利用。
一些Web開發(fā)人員和Web設(shè)計師對使用Web標準持抵觸態(tài)度。普遍的看法是它太難了，不管它是怎么運作，我使用的那些軟件總會創(chuàng)建出一些不規(guī)范的代碼。
.
學(xué)習(xí)新的技術(shù)并放棄您所熟知的技術(shù)，這很容易引起情緒上的反感，并產(chǎn)生抵觸的情緒。然而，如果您很理智的觀察一下現(xiàn)在的形勢，將會發(fā)現(xiàn)，通過學(xué)習(xí)和使用Web標準會得到許多好處。舉幾個例子：
更簡易的開發(fā)與維護：使用更具有語義和結(jié)構(gòu)化的HTML，將讓您更加容易、快速的理解他人編寫的代碼。
與未來瀏覽器的兼容：當您使用已定義的標準和規(guī)范的代碼，那么您這個向后兼容的文本就消除了不能被未來的瀏覽器識別的后患。
更快的網(wǎng)頁下載、讀取速度：更少的HTML代碼帶來的將是更小的文件和更快的****。如今的瀏覽器當處于標準模式下將比它在以前的兼容模式下?lián)碛懈斓木W(wǎng)頁讀取速度。
更好的可訪問性：語義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離）將讓使用瀏覽器以及不同的瀏覽設(shè)備的讀者都能很容易的看到內(nèi)容。
更高的搜索引擎排名：內(nèi)容和表現(xiàn)的分離使內(nèi)容成為了一個文本的主體。與語義化的標記結(jié)合會提高您在搜索引擎中的排名。
更好的適應(yīng)性：一個用語義化標記的文檔可以很好的適應(yīng)于打印和其他的顯示設(shè)備（像掌上電腦和智能電話），這一切僅僅是通過鏈接不同的CSS文件就可以完成。
你同樣可以僅僅通過編輯單獨的一個文件就完成跨站點般的表現(xiàn)上的轉(zhuǎn)換。
Web標準可以為網(wǎng)站的創(chuàng)建者節(jié)省時間與金錢，還可以為網(wǎng)站的瀏覽者提供一個更好的經(jīng)歷。此外，Web標準是未來的。如果你還沒有使用We b標準，那么現(xiàn)在應(yīng)該開始動手了，否則你會落伍的。
Web程序設(shè)計二級下拉菜單頁面怎么做
Web
Web設(shè)計的設(shè)計原則有哪些
好的設(shè)計能夠幫助企業(yè)提升數(shù)據(jù)，同時還可以提供用戶一個良好的使用體驗。GoodUI 總結(jié)了一個長達69條設(shè)計原則的清單（不斷增加中），列舉了他們認為非常重要的設(shè)計要點。
與以往的一些文章不一樣的是這里提到的69點其中有一部分 GoodUI 已經(jīng)通過 AB Test 驗證過可行性。
當然分析報告是需要付費的，單篇39美金。不過今天討論的重點并不是付費報告，而是這69條設(shè)計原則。我按照自己的理解將它們翻譯成了中文并配上圖片，希望對大家有所幫助。本篇文章內(nèi)容及圖片均來自于GoodUI，如有翻譯不恰當?shù)牡胤綒g迎大家指正。
01 嘗試使用一列的布局替代多列布局02 給用戶一些小的利益，別看上去那么**裸03 合并相似的功能04 嘗試展示來自用戶的贊揚，而不是自我表揚05 重復(fù)核心行動點06 統(tǒng)一視覺規(guī)范，提升可識別性07 嘗試使用推薦的口吻，而不是讓用戶感覺面對一臺冷冰冰的機器08 給用戶吃「后悔*」的機會09 告訴用戶產(chǎn)品適用的人群，而不是人人都通用10 將文案寫得更加的直接，而不是一堆廢話11 增強主行動點的視覺沖擊力，提升它在頁面中的可對比性12 讓用戶知道你從哪兒來更易于拉近與用戶的關(guān)系13 將表單做的簡單點，確保用戶在抓狂之前能進入下一步14 盡量將用戶需要選擇的信息展示出來而不是藏起來15 頁面的排版需要考慮用戶是否會漏掉底部信息16 如果頁面的底部有需要關(guān)注的行動點，別讓文中過多的外鏈帶走了用戶17 確保用戶知道自己目前的狀態(tài)18 將利益點融合在行動點中，增強用戶的點擊欲望19 將行動點與當前信息結(jié)合起來20 將簡要的表單合并到頁面中，減少調(diào)整頁面帶來的用戶流失21 適當?shù)脑黾友舆t動效，讓用戶感知到頁面的變化22 讓新用戶從嘗試產(chǎn)品入手，而不是一來就面對冷冰冰的注冊表單23 減少使用線框，這會過多的吸引用戶注意力，而且會讓頁面看上去透不過氣24 給用戶推銷你能給他帶來的利益，而不是功能25 一定要注意0結(jié)果頁面的設(shè)計，這也是引導(dǎo)用戶的好地方26 給用戶選擇退出的權(quán)利，特別是郵件訂閱27 注意界面元素的一致性，降低用戶學(xué)習(xí)成本28 給下拉框增加一些預(yù)設(shè)值，降低用戶填寫成本29 延續(xù)用戶日常的使用習(xí)慣，而不是重新創(chuàng)造30 嘗試告訴用做些事情降低自己的損失，而不是提升收益31 提升頁面的視覺層次，增強可閱讀性32 將同類的操作合并在一起，降低用戶的認知成本33 表單及時校驗，而不是統(tǒng)一提交后在告訴用戶填錯了34 嘗試將表單輸入變得更加寬容，讓用戶的填寫更加簡單35 通過時間增強緊迫感36 提供用戶可預(yù)見性的操作，降低用戶的心理成本37 盡可能的幫助用戶選擇，而不是讓用戶想破腦袋38 盡可能將操作區(qū)域放大，降低用戶操作成本39 頁面加載速度很重要，盡可能讓用戶感受到你的網(wǎng)站速度很快40 如果可以，增加鍵盤快捷鍵，提升操作效率41 嘗試通過對比來讓用戶感知到性價比42 嘗試對進度條進行「設(shè)計」來降低用戶等待的焦慮43 根據(jù)用戶選擇逐步展示信息，降低無效信息對用戶的干擾44 有時候較小的承諾比「夸?？凇箷菀鬃層脩粜欧?5 嘗試將提示信息弱化，減少對用戶操作的干擾46 盡量通過系統(tǒng)的功能來簡化用戶的操作47 用文本配合圖標來降低用戶的認知成本48 用更自然的語言代替冷冰冰的機器49 放出一些摘要信息來幫助用戶識別是否需要進一步了解50 在關(guān)鍵的頁面增加用戶權(quán)益信息，增強用戶進一步操作的信心51 將價格進行換算，讓用戶感覺這很便宜52 記得在成功頁面感謝用戶53 將數(shù)字轉(zhuǎn)化成易于用戶閱讀的形式百科，而不是冷冰冰的機器語言54 告訴用戶選擇的權(quán)利和自由「誘惑力」55 嘗試讓語言更具「誘惑力」56 通過設(shè)計引導(dǎo)用戶的注意力57 通過友好的對比來展示產(chǎn)品，為用戶做決定提供幫助58 通過任務(wù)機制來提升用戶的滿足感59 讓用戶了解接下來將要發(fā)生什么事情60 嘗試用更幽默一些的語言文案61 任何操作之后都要給出反饋，讓用戶知道操作已經(jīng)生效62 注意動效的真實使用情況（Amazon 的類目菜單就是一個很好的例子）63 注意排版的，不要讓信息過于擁擠64 嘗試用講故事的方式來傳遞信息，增強用戶的代入感65 盡量給用戶展示真實的信息，不要欺騙66 隨著用戶的不斷熟悉簡化界面67 試著用用戶的口吻展示信息68 在表單中增加一些提示信息，減少錯誤的幾率69 **，用簡單的文案傳遞核心關(guān)注的信息，少一些廢話這69條設(shè)計原則雖然針對 Web 設(shè)計，但有些部分在移動產(chǎn)品設(shè)計中同樣有效。
