最近由於自己要做乙個小**，但是還苦於找不到乙個合適的美工和設計，只能自己上了。於是便看了一些關於使用者體驗和ui方面的書。
這個就當是個讀書筆記吧。
1. 常規的頁面布局
常規上來說，我們把網頁布局按照分欄的多少分為一欄式，二欄式和三欄式。
對於一欄式頁面布局來說，一般在頁面上放置乙個具有衝擊力的或者flash來給使用者留下深刻的印象，但是，這樣的頁面所能夠容納的資訊量非常有限。所以常用於企業**，以及一些小**的首頁，用於讓使用者記住你的站。此外，對於功能性比較單一的頁面，也一般用一欄式布局，比如搜尋引擎，註冊和登入頁面等等。
二欄式布局是最為常見的布局方式，二欄式又分為左寬右窄和左窄右寬式。這兩種模式的選擇是由於**的性質所決定的。對於使用者來說，他的瀏覽關注順序是從左到右，那麼窄的部分一般來說都是導航欄，而寬的部分則是主體內容部分，那麼用哪一種方式將取決於你的站是內容佔主體還是導航佔主體，換句話說，是內容驅動導航還是導航來驅動內容。
舉個例子，拿www.dangdang.com來說，一般使用者來買東西是有著明確目的的，他知道自己要買的東西是哪個類別，而對於主站的內容只是給使用者的乙個推薦。但是對於cnblogs來說，顯然內容應該是大於導航的。所以其實在我看來，的設計其實是並不合理的。
對於三欄式布局來說，最大的好處就在於容納的資訊量比較大，但是重點不突出，降低了使用者對**的可控性，因此一般意義上不推薦。
當然，如果當使用者需要比較多樣化的時候，也可以讓使用者自由來設計布局，多常見於個人部落格。
2. 頁面的通透性
頁面的通透性是指盡量使整個頁面的模組比例統一，同時通過線條，顏色等視覺元素增加各模組間的區分度，使得使用者的視線軌跡可以有規則地通過各個模組，而不會被模組之間不規則的交叉所打斷。
此外，根據「f」原則，也應該盡量將重要地，使用者所關係地內容放在頁面的左上角位置。
3. 頁面的配色方案
每個**都要有自己的主色調，主色調指的就是頁面色彩的主要色調，總趨勢，其他配色的綜合不能超過主色調的50%（白色背景除外）。
在選擇顏色的時候，不僅僅要考慮顏色本身所代表的含義，如安全，浪漫等，還有考慮以下幾種因素。
a. 目標使用者群體。不同的使用者群體對於顏色的審美愛好以及理解都不同，其中包括性別，年齡，職業等。
b. 當地文化風俗。如中國把紅色作為喜慶的顏色，而歐洲大部分卻把紅色作為殺戮的象徵。
c. **的型別。如電子商務站一般用暖色調來刺激使用者購買，而sns站則營造乙個輕鬆的氛圍。而垂直類**一般都與自己的領域特色相關。
d. 品牌形象。我總結一句話就是根據自己的logo以及企業形象來選擇色調。比如ibm就一定會選擇藍色作為主色調。
4. 頁頭和頁尾
在頁頭上最重要的就是logo，在現代**的設計中，logo起到兩個作用，乙個是標識，乙個是讓使用者回到首頁。
頁尾一般來說並不重要，使用者可到達的機會也少，所以盡量地去簡化它，避免它占用內容所佔據的位置。
5. 搜尋區
現在的**一般都帶有站內搜尋的功能，目前有兩種設計方式。
一種將搜尋淡化，因為搜尋只是一種手段，適用於瀏覽型**，我並不鼓勵你搜尋，而是希望你一條一條地看下去。比如說豆瓣。我希望你去看社群的動態，而不是希望你來豆瓣為了找人。
一種是搜尋為主，最簡單的就是**。一般來說使用者來電子商務站都是有著明確的目的，所以搜尋是使用者找到他想要商品的最主要方式。
6. 登陸和註冊
7. 關於廣告
廣告從來都是網際網路的主要盈利手段之一。可是不得不承認，沒有人喜歡看廣告。因此廣告主和使用者之間總是存在著無可避免的直接矛盾，而且一定意義上，網路廣告沒有任何約束，這也就導致了**廣告的混亂和不合理性。
但是我們在**中穿插廣告時，應該保證我們自己**不會影響使用者的瀏覽。
首先，據調查，使用者最能接受的廣告形式是游動式廣告和橫幅式廣告，而彈出廣告和郵件廣告是使用者最討厭的。
然後，我們要避免過多的廣告同時出現。也要規範**廣告的尺寸大小。
8. 表單的布局設計
這裡就從註冊來看，這個是最典型的表單。
從布局上講分為三種方式，其中包括垂直對齊，左對齊和右對齊。
垂直對齊的優勢在於可大量減少眼睛一動和填寫表單的時間，但是缺點在於增加了垂直的空間，當註冊項較多時，會增加頁面的滾動。適用於蒐集的資訊和資料是熟悉的，需要較少的完成時間。
左對齊便於使用者瀏覽標籤，同時會減少垂直空間。但是如果某標籤過長，則會造成文字與文字框距離過遠。適用於對所需的資訊不熟悉，而且標籤文字不會太長。
右對齊則讓左邊參差不齊的空包讓使用者很難快速檢索表單要填寫的內容。
另外，在設計時，最好將註冊時相關的項進行分組，這樣可以讓使用者以盡可能少的視覺元素來分出關係，避免視覺噪音。
對於很多選項來說，不妨提供預設選項，來儘量減少使用者的操作。並且給予適當的提示來給予使用者幫助，記得一定是適當的，不要過多。
此外，還可用一些較大的字型以及間距，不要讓使用者產生侷促感。
9. 模組標籤
模組標籤，就是用於頁面內某模組中，在內容上方使用一列標籤形式的鏈結進行切換。
使用模組標籤時，首先一定要具備乙個最基本的前提，內容必須都相對獨立，不能存在上下文的關係。
在設計模組標籤與下面模組內容時，我總結為兩點：突出對比和加強關聯。
突出對比是說，突出已選中標籤和未選中標籤的對比，而加強關聯是說加強以選中標籤和其內容模組的關聯。
10. 按鈕
首先要用較大的，與背景色形成鮮明對比的按鈕來使所需主要強調的按鈕從網頁中跳躍出來。
其次，我們需要根據按鈕的主次來選擇性強調和弱化某按鈕。但是同乙個方式的弱化，可能到另乙個方面則會是強調。這個需要根據經驗來結合之前的知識來考慮。
還有也要注意按鈕的擺放位置，比如說使用者的視線是從上向下，從左至右，這樣使用者也會依照這樣的順序做出選擇。
11. 反饋
nielsen可用性原則中有一條痕重要的原則，就是系統必須提供必要的反饋。
其中包括成功提示和失敗提示。
成功提示是最簡單的一種提示，他應該僅僅起到提示的作用，而不該中斷使用者的操作。我們應該只需要讓使用者知道就可以了。不應該讓使用者進行任何不必要的操作，比如彈層就是乙個非常愚蠢的做法。
失敗提示是很重要的提示，從理論上說分為兩種方式，一種是直接在網頁上用文字提示，一種是彈出警告框來提示。但是我個人認為彈出警告框是非常不可取的，因為最重要的一點是alert的時候會發出聲音，這樣的使用者體驗是非常差的，所以自己做乙個彈出層倒是乙個折中的做法。
還有乙個很重要的是錯誤頁面，比如說404頁面，優秀的404頁面應該能夠改善使用者的不良體驗，減少使用者的挫敗感，還應該將使用者引導到他原本打算去往的相關聯的去處，以減少使用者的流失率。
關於進度條，據研究表明，超過1秒就要提供相應的提示資訊，比如進度條，而超過10秒就不僅僅需要提示資訊，還需要提供完成的百分比。
12. 其他個人想法about驗證碼
比如說驗證碼，驗證碼是用來防止惡意註冊的，但是不是用來防止正常使用者的，我們不應該讓使用者因為驗證碼產生挫敗感。如果讓我設計乙個驗證碼，我會將英文的「o」和數字的「0」，英文的「l」和數字的「1」都排除在驗證碼之外。
此外我有個想法是覺得，首先，密碼是在post回去的過程中是無法儲存原有狀態的，所以唯一的辦法只能是ajax回發驗證。但是在何時ajax，只能是在失去焦點時。所以我認為最好把驗證碼放在頁面最頂端，這樣使用者比較容易離開焦點從而觸發ajax驗證。
使用者體驗囈語
最近由於自己要做乙個小 但是還苦於找不到乙個合適的美工和設計，只能自己上了。於是便看了一些關於使用者體驗和ui方面的書。這個就當是個讀書筆記吧。1 常規的頁面布局 常規上來說，我們把網頁布局按照分欄的多少分為一欄式，二欄式和三欄式。對於一欄式頁面布局來說，一般在頁面上放置乙個具有衝擊力的或者flas...
web使用者體驗
author skate time 2010 07 08 好久沒寫東西，最近比較忙，最近計畫用c 開發個知識庫，作為知識的交流與積累平台。昨天乙個朋友問我如何提高 的速度，提公升使用者體驗，下面是我對使用者體驗的一點認識 使用者體驗 使用者體驗就是使用者對系統的一種心理感覺，對於web應用，使用者體...
使用者體驗要素
薄薄的一本小書，感覺就是將軟體工程理論在 設計上的乙個應用方法。作者jesse james garrett是ajax之父，在 設計方面的功力不言而喻。jesse james garrett 認為 產品具有功能型和資訊型的雙重性質，因而在每個層面的設計時都必須進行雙重的考慮。懶得畫圖了，從 找了個，感...