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