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