最近因?yàn)樽约阂�做一個(gè)小網(wǎng)站，但是還苦于找不到一個(gè)適合的美工和設(shè)計(jì)，只能自己上了。于是便看了一些對(duì)于用戶休會(huì)和ui方面的書。
這個(gè)就當(dāng)是個(gè)讀書筆記吧。
1、慣例的頁面布局
慣例上來說，咱們把網(wǎng)頁布局依照分欄的多少分為一欄式，二欄式跟三欄式。
對(duì)于一欄式頁面布局來說，一般在頁面上放置一個(gè)存在沖擊力的圖片或者flash來給用戶留下深入的印象，但是，這樣的頁面所可能容納的信息量十分有限。所以常用于企業(yè)網(wǎng)站，以及一些小網(wǎng)站的，用于讓用戶記住你的站。此外，對(duì)于功效性比較單一的頁面，也一般用一欄式布局，比如搜索引擎，注冊(cè)和登錄頁面等等。
二欄式布局是最為常見的布局方法，二欄式。網(wǎng)頁設(shè)計(jì)根據(jù)用戶反饋，進(jìn)行頁面設(shè)計(jì)調(diào)整，以達(dá)到最優(yōu)效果。又分為左寬右窄跟左窄右寬式。這兩種模式的抉擇是因?yàn)榫W(wǎng)站的性質(zhì)所決議的。對(duì)用戶來說，他的閱讀關(guān)注次序是從左到右，那么窄的局部正常來說都是導(dǎo)航欄，而寬的局部則是主體內(nèi)容部門，那么用哪一種方式將取決于你的站是內(nèi)容占主體仍是導(dǎo)航占主體，換句話說，是。網(wǎng)站設(shè)計(jì)要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。內(nèi)容驅(qū)動(dòng)導(dǎo)航仍是導(dǎo)航來驅(qū)動(dòng)內(nèi)容。
舉個(gè)例子，拿當(dāng)當(dāng)網(wǎng)來說，正常用戶來買貨色是有著明白目標(biāo)的，他曉得本人要買的貨色是哪個(gè)種別，而對(duì)于主站的內(nèi)容只是給用戶的一個(gè)推舉。然而對(duì)于cnblogs來說，顯然內(nèi)容應(yīng)當(dāng)是大于導(dǎo)航的。所以其切實(shí)我看來，博客園的設(shè)計(jì)實(shí)在是并分歧理的。
當(dāng)當(dāng)網(wǎng)
cnblogs
對(duì)三欄式布局來說，最大的利益就在于包容的信息量比擬大，然而重點(diǎn)不凸起，下降了用戶對(duì)網(wǎng)站的可控性，因而個(gè)別意思上不推舉。
當(dāng)然，假如當(dāng)用戶須要比較多樣化的時(shí)候，也能夠讓用戶自在來設(shè)計(jì)布局，多常見于個(gè)人博客。
2、頁面的通透性
頁面的通透性是指盡量使全部頁面的模塊比例同一，同時(shí)通過線條，顏色等視覺元素增添各模塊間的辨別度，使得用戶的視線軌跡能夠有規(guī)矩地通過各個(gè)模塊，而不會(huì)被模塊之間不規(guī)矩的穿插所打斷。
此外，依據(jù)“f”準(zhǔn)則，也應(yīng)當(dāng)盡量將重要地，用戶所關(guān)聯(lián)地內(nèi)容放在頁面的左上角地位。
3、頁面的配色計(jì)劃
每個(gè)網(wǎng)站都要有自己的主色調(diào)，主色調(diào)指的就是頁面顏色的重要色調(diào)，總趨勢(shì)，其余配色的綜合不能超過主色調(diào)的50%
在抉擇顏色的時(shí)候，不僅僅要斟酌顏色自身所代表的，如保險(xiǎn)，浪漫等，還有斟酌以下多少種因素。
a. 目的用戶群體。不同的用戶群體對(duì)于色彩的審美喜好以及懂得都不同，其中包含性別，年紀(jì)，職業(yè)等。
b. 當(dāng)?shù)匚拿黠L(fēng)氣。如中國把紅色作為喜慶的色彩，而歐洲大部門卻把紅色作為殺害的象征。
c. 網(wǎng)站的類型。如電子商務(wù)站一般用暖色調(diào)來刺激用戶購置，而sns站則營造一個(gè)輕松的氣氛。而垂直類網(wǎng)站一般都與本人的范疇特點(diǎn)相干。
d. 品牌形象。我總結(jié)一句話就是依據(jù)自己的logo以及企業(yè)形象來取舍色調(diào)。比如ibm就必定會(huì)挑選藍(lán)色作為主色調(diào)。
4、頁頭和頁尾
頁頭分為設(shè)計(jì)型頭部和簡約型頭部。一般的大型網(wǎng)站，因?yàn)橐呀?jīng)有著必定的網(wǎng)站著名度，所以無需在通過渲染頭部來進(jìn)步網(wǎng)站對(duì)用戶的吸引力，加深印象。所以一般采取比較簡略的簡約型頭部，好比，都是這樣的效果。對(duì)于一些小網(wǎng)站來說，采取設(shè)計(jì)性頭部給用戶留下深入印象，發(fā)明品牌效應(yīng)，但是當(dāng)設(shè)計(jì)性頭部過于復(fù)雜時(shí)，卻使得內(nèi)容。平面設(shè)計(jì)它是集創(chuàng)造力、專業(yè)知識(shí)和操作為一體的綜合性技能。的包容質(zhì)變小，從而造成一種頭重腳輕的感到。所以這個(gè)須要設(shè)計(jì)師的一種折中。
在頁頭上最主要的就是logo，在古代網(wǎng)站的設(shè)計(jì)中，logo起到兩個(gè)作用，一個(gè)是標(biāo)識(shí)，一個(gè)是讓用戶回到。
頁尾個(gè)別來說并不主要，用戶可達(dá)到的機(jī)遇也少，所以盡量地去簡化它，防止它占用內(nèi)容所盤踞的地位。
5、搜索區(qū)
當(dāng)初的網(wǎng)站普通都帶有站內(nèi)搜尋的功效，目前有兩種設(shè)計(jì)方法。
一種將搜索淡化，由于搜尋只是一種手腕，實(shí)用于閱讀型網(wǎng)站，我并不激勵(lì)你搜索，而是生機(jī)你一條一條地看下去。比方說豆瓣。我盼望你去看社區(qū)的動(dòng)態(tài)，而不是愿望你來豆瓣為了找人。
一種是搜索為主，最簡略的就是淘寶。普通來說用戶來電子商務(wù)站都是有著明白的目標(biāo)，所以搜索是用戶找到他想要商品的最重要方式。
另外，對(duì)于搜索框來說，如果你勉勵(lì)用戶應(yīng)用搜索框，在頁面剛翻開的時(shí)候，就可以讓光標(biāo)在搜索框上，這樣用戶可以直接搜索內(nèi)容，而省去了一次操作。但是假如并非如斯，就不要讓光標(biāo)在文本框上，由于這樣用戶變不措施應(yīng)用鍵盤來讓全部頁面下移。