最近由于自己要做一個小網(wǎng)站，但是還苦于找不到一個合適的美工和設(shè)計(jì)，只能自己上了。于是便看了一些關(guān)于用戶體驗(yàn)和UI方面的書。
這個就當(dāng)是個讀書筆記吧。
1、常規(guī)的頁面布局
常規(guī)上來說，我們把網(wǎng)頁布局按照分欄的多少分為一欄式，二欄式和三欄式。
對于一欄式頁面布局來說，一般在頁面上放置一個具有沖擊力的圖片或者Flash來給用戶留下深刻的印象，但是，這樣的頁面所能夠容納的信息量非常有限。所以常用于企業(yè)網(wǎng)站，以及一些小網(wǎng)站的首頁，用于讓用戶記住你的站。此外，對于功能性比較單一的頁面，也一般用一欄式布局，比如搜索引擎，注冊和登錄頁面等等。
二欄式布局是最為常見的布局方式，二欄式又分為左寬右窄和左窄右寬式。這兩種模式的選擇是由于網(wǎng)站的性質(zhì)所決定的。對于用戶來說，他的瀏覽關(guān)注順序是從左到右，那么窄的部分一般來說都是導(dǎo)航欄，而寬的部分則是主體內(nèi)容部分，那么用哪一種方式將取決于你的站是內(nèi)容占主體還是導(dǎo)航占主體，換句話說，是內(nèi)容驅(qū)動導(dǎo)航還是導(dǎo)航來驅(qū)動內(nèi)容。
舉個例子，拿當(dāng)當(dāng)網(wǎng)來說，一般用戶來買東西是有著明確目的的，他知道自己要買的東西是哪個類別，而對于主站的內(nèi)容只是給用戶的一個推薦。但是對于cnblogs來說，顯然內(nèi)容應(yīng)該是大于導(dǎo)航的。所以其實(shí)在我看來，博客園的設(shè)計(jì)其實(shí)是并不合理的。
當(dāng)當(dāng)網(wǎng)首頁
cnblogs首頁
對于三欄式布局來說，最大的好處就在于容納的信息量比較大，但是重點(diǎn)不突出，降低了用戶對網(wǎng)站的可控性，因此一般意義上不推薦。
當(dāng)然，如果當(dāng)用戶需要比較多樣化的時候，也可以讓用戶自由來設(shè)計(jì)布局，多常見于個人博客。
2、頁面的通透性
頁面的通透性是指盡量使整個頁面的模塊比例統(tǒng)一，同時通過線條，顏色等視覺元素增加各模塊間的區(qū)分度，使得用戶的視線軌跡可以有規(guī)則地通過各個模塊，而不會被模塊之間不規(guī)則的交叉所打斷。
此外，根據(jù)“F”原則，也應(yīng)該盡量將重要地，用戶所關(guān)系地內(nèi)容放在頁面的左上角位置。
3、頁面的配色方案
每個網(wǎng)站都要有自己的主色調(diào)，主色調(diào)指的就是頁面色彩的主要色調(diào)，總趨勢，其他配色的綜合不能超過主色調(diào)的50%(白色背景除外)。
在選擇顏色的時候，不僅僅要考慮顏色本身所代表的含義，如安全，浪漫等，還有考慮以下幾種因素。
A. 目標(biāo)用戶群體。不同的用戶群體對于顏色的審美愛好以及理解都不同，其中包括性別，年齡，職業(yè)等。
B. 當(dāng)?shù)匚幕L(fēng)俗。如中國把紅色作為喜慶的顏色，而歐洲大部分卻把紅色作為殺戮的象征。
C. 網(wǎng)站的類型。如電子商務(wù)站一般用暖色調(diào)來刺激用戶購買，而SNS站則營造一個輕松的氛圍。而垂直類網(wǎng)站一般都與自己的領(lǐng)域特色相關(guān)。
D. 品牌形象。我總結(jié)一句話就是根據(jù)自己的Logo以及企業(yè)形象來選擇色調(diào)。比如IBM就一定會選擇藍(lán)色作為主色調(diào)。
4、頁頭和頁尾
頁頭分為設(shè)計(jì)型頭部和簡約型頭部。一般的大型網(wǎng)站，由于已經(jīng)有著一定的網(wǎng)站知名度，所以無需在通過渲染頭部來提高網(wǎng)站對用戶的吸引力，加深印象。所以一般采用比較簡單的簡約型頭部，比如新浪，騰訊，都是這樣的效果。對于一些小網(wǎng)站來說，采用設(shè)計(jì)性頭部給用戶留下深刻印象，創(chuàng)造品牌效應(yīng)，但是當(dāng)設(shè)計(jì)性頭部過于繁雜時，卻使得內(nèi)容的容納量變小，從而造成一種頭重腳輕的感覺。所以這個需要設(shè)計(jì)師的一種折中。
在頁頭上最重要的就是Logo，在現(xiàn)代網(wǎng)站的設(shè)計(jì)中，Logo起到兩個作用，一個是標(biāo)識，一個是讓用戶回到首頁。
頁尾一般來說并不重要，用戶可到達(dá)的機(jī)會也少，所以盡量地去簡化它，避免它占用內(nèi)容所占據(jù)的位置。
5、搜索區(qū)
現(xiàn)在的網(wǎng)站一般都帶有站內(nèi)搜索的功能，目前有兩種設(shè)計(jì)方式。
一種將搜索淡化，因?yàn)樗阉髦皇且环N手段，適用于瀏覽型網(wǎng)站，我并不鼓勵你搜索，而是希望你一條一條地看下去。比如說豆瓣。我希望你去看社區(qū)的動態(tài)，而不是希望你來豆瓣為了找人。
一種是搜索為主，最簡單的就是淘寶。一般來說用戶來電子商務(wù)站都是有著明確的目的，所以搜索是用戶找到他想要商品的最主要方式。
另外，對于搜索框來說，如果你鼓勵用戶使用搜索框，在頁面剛剛打開的時候，就可以讓光標(biāo)在搜索框上，這樣用戶可以直接搜索內(nèi)容，而省去了一次操作。但是如果并非如此，就不要讓光標(biāo)在文本框上，因?yàn)檫@樣用戶變沒有辦法使用鍵盤來讓整個頁面下移。
6、登陸和注冊
首先是究竟是淡化登陸注冊還是強(qiáng)調(diào)登陸注冊，這個取決于該站點(diǎn)的目的。兩個典型便是新浪和豆瓣。對于新浪來說，需要的只是網(wǎng)站的瀏覽量，與是否注冊關(guān)系不大，所以只是將登陸弱化，沒有登錄一樣可以享受基本所有權(quán)利，其中包括“匿名”評論等功能。而豆瓣以及很多SNS站點(diǎn)都需要來通過用戶注冊來擴(kuò)展好友關(guān)系，所以在豆瓣的首先都是將登陸注冊放在最顯眼的位置，然后用一些優(yōu)點(diǎn)來煽動用戶注冊。
但是個人認(rèn)為隨著SNS站點(diǎn)的逐漸做大，雖然不會像新浪等資訊站一樣如此弱化用戶的登陸注冊，但是也不會在將登陸注冊變?yōu)闉g覽，發(fā)帖等必須的一部，而會將匿名作為可選的一項(xiàng)。而新浪等資訊站隨著發(fā)展，也會逐漸地走向社交網(wǎng)絡(luò)，從而在網(wǎng)絡(luò)中達(dá)到一種資訊站與SNS的折中。
7、關(guān)于廣告
廣告從來都是互聯(lián)網(wǎng)的主要盈利手段之一。可是不得不承認(rèn)，沒有人喜歡看廣告。因此廣告主和用戶之間總是存在著無可避免的直接矛盾，而且一定意義上，網(wǎng)絡(luò)廣告沒有任何約束，這也就導(dǎo)致了網(wǎng)站廣告的混亂和不合理性。
但是我們在網(wǎng)站中穿插廣告時，應(yīng)該保證我們自己網(wǎng)站不會影響用戶的瀏覽。
首先，據(jù)調(diào)查，用戶最能接受的廣告形式是游動式廣告和橫幅式廣告，而彈出廣告和郵件廣告是用戶最討厭的。
其次，從布局上看，我們不能讓廣告切斷頁面的相關(guān)內(nèi)容，因?yàn)楹芏嘤脩粢坏┛吹綇V告就會習(xí)慣性地認(rèn)為該頁面的內(nèi)容已經(jīng)中止，不在繼續(xù)瀏覽了，所以這樣的話會影響整個網(wǎng)站內(nèi)容的關(guān)聯(lián)性。
然后，我們要避免過多的廣告同時出現(xiàn)。也要規(guī)范網(wǎng)站廣告的尺寸大小。
8、表單的布局設(shè)計(jì)
這里就從注冊來看，這個是最典型的表單。
從布局上講分為三種方式，其中包括垂直對齊，左對齊和右對齊。
垂直對齊的優(yōu)勢在于可大量減少眼睛一動和填寫表單的時間，但是缺點(diǎn)在于增加了垂直的空間，當(dāng)注冊項(xiàng)較多時，會增加頁面的滾動。適用于搜集的信息和資料是熟悉的，需要較少的完成時間。
左對齊便于用戶瀏覽標(biāo)簽，同時會減少垂直空間。但是如果某標(biāo)簽過長，則會造成文字與文本框距離過遠(yuǎn)。適用于對所需的信息不熟悉，而且標(biāo)簽文字不會太長。
右對齊則讓左邊參差不齊的空包讓用戶很難快速檢索表單要填寫的內(nèi)容。
另外，在設(shè)計(jì)時，最好將注冊時相關(guān)的項(xiàng)進(jìn)行分組，這樣可以讓用戶以盡可能少的視覺元素來分出關(guān)系，避免視覺噪音。
對于很多選項(xiàng)來說，不妨提供默認(rèn)選項(xiàng)，來盡量減少用戶的操作。并且給予適當(dāng)?shù)奶崾緛斫o予用戶幫助，記得一定是適當(dāng)?shù)模灰^多。
此外，還可用一些較大的字體以及間距，不要讓用戶產(chǎn)生局促感。
9、模塊標(biāo)簽
模塊標(biāo)簽，就是用于頁面內(nèi)某模塊中，在內(nèi)容上方使用一列標(biāo)簽形式的鏈接進(jìn)行切換。
使用模塊標(biāo)簽時，首先一定要具備一個最基本的前提，內(nèi)容必須都相對獨(dú)立，不能存在上下文的關(guān)系。
在設(shè)計(jì)模塊標(biāo)簽與下面模塊內(nèi)容時，我總結(jié)為兩點(diǎn)：突出對比和加強(qiáng)關(guān)聯(lián)。
突出對比是說，突出已選中標(biāo)簽和未選中標(biāo)簽的對比，而加強(qiáng)關(guān)聯(lián)是說加強(qiáng)以選中標(biāo)簽和其內(nèi)容模塊的關(guān)聯(lián)。
10、按鈕
首先要用較大的，與背景色形成鮮明對比的按鈕來使所需主要強(qiáng)調(diào)的按鈕從網(wǎng)頁中跳躍出來。
其次，我們需要根據(jù)按鈕的主次來選擇性強(qiáng)調(diào)和弱化某按鈕。但是同一個方式的弱化，可能到另一個方面則會是強(qiáng)調(diào)。這個需要根據(jù)經(jīng)驗(yàn)來結(jié)合之前的知識來考慮。
還有也要注意按鈕的擺放位置，比如說用戶的視線是從上向下，從左至右，這樣用戶也會依照這樣的順序做出選擇。
11、反饋
Nielsen可用性原則中有一條痕重要的原則，就是系統(tǒng)必須提供必要的反饋。其中包括成功提示和失敗提示。
成功提示是最簡單的一種提示，他應(yīng)該僅僅起到提示的作用，而不該中斷用戶的操作。我們應(yīng)該只需要讓用戶知道就可以了。不應(yīng)該讓用戶進(jìn)行任何不必要的操作，比如彈層就是一個非常愚蠢的做法。
失敗提示是很重要的提示，從理論上說分為兩種方式，一種是直接在網(wǎng)頁上用文字提示，一種是彈出警告框來提示。但是我個人認(rèn)為彈出警告框是非常不可取的，因?yàn)樽钪匾囊稽c(diǎn)是alert的時候會發(fā)出聲音，這樣的用戶體驗(yàn)是非常差的，所以自己做一個彈出層倒是一個折中的做法。
還有一個很重要的是錯誤頁面，比如說404頁面，優(yōu)秀的404頁面應(yīng)該能夠改善用戶的不良體驗(yàn)，減少用戶的挫敗感，還應(yīng)該將用戶引導(dǎo)到他原本打算去往的相關(guān)聯(lián)的去處，以減少用戶的流失率。
關(guān)于進(jìn)度條，據(jù)研究表明，超過1秒就要提供相應(yīng)的提示信息，比如進(jìn)度條，而超過10秒就不僅僅需要提示信息，還需要提供完成的百分比。
12、其他個人想法About驗(yàn)證碼
比如說驗(yàn)證碼，驗(yàn)證碼是用來防止惡意注冊的，但是不是用來防止正常用戶的，我們不應(yīng)該讓用戶因?yàn)轵?yàn)證碼產(chǎn)生挫敗感。如果讓我設(shè)計(jì)一個驗(yàn)證碼，我會將英文的“O”和數(shù)字的“0”，英文的“L”和數(shù)字的“1”都排除在驗(yàn)證碼之外。
此外我有個想法是覺得，首先，密碼是在post回去的過程中是無法保存原有狀態(tài)的，所以唯一的辦法只能是ajax回發(fā)驗(yàn)證。但是在何時Ajax，只能是在失去焦點(diǎn)時。所以我認(rèn)為最好把驗(yàn)證碼放在頁面最頂端，這樣用戶比較容易離開焦點(diǎn)從而觸發(fā)Ajax驗(yàn)證。
