1、沒(mei)有內容層次
用戶的(de)(de)眼睛(jing)喜歡有(you)秩序(xu)的(de)(de)設計,如頭部包含導航(hang)和(he)LOGO,特(te)定內(nei)容(rong)使用lightbox,三列(lie)分欄(lan),頁腳(jiao)。它有(you)助(zhu)于在內(nei)心組(zu)織重要(yao)的(de)(de)信息(xi),并(bing)引導用戶注(zhu)意(yi)(yi)在你想讓他注(zhu)意(yi)(yi)的(de)(de)地方。在傳統藝術中,新手們被教導色彩、價值和(he)線性透視三原則和(he)其他藝術指導。在網站設計中,沒(mei)有(you)特(te)別(bie)命名(ming)的(de)(de)準則,但以(yi)直觀的(de)(de)方式組(zu)織你的(de)(de)內(nei)容(rong)是(shi)一條很好的(de)(de)經驗(yan)規(gui)則。
2、太多的字體
是的(de)(de),我知道你剛(gang)買(mai)了(le)一組5000個(ge)超級(ji)棒的(de)(de)字體,但為了(le)你的(de)(de)網(wang)站設(she)(she)計(ji),不要(yao)一次(ci)性全(quan)部用(yong)完。一般來說,限(xian)制自己,只用(yong)少數幾種字體是個(ge)好方法(fa),特別是對新手設(she)(she)計(ji)師。盡管(guan)你可(ke)以用(yong)襯(chen)(chen)線和無襯(chen)(chen)線字體混合出(chu)一種非(fei)常好看的(de)(de)設(she)(she)計(ji),你也(ye)要(yao)知道該用(yong)在(zai)什么(me)時候、什么(me)地方,心里要(yao)有計(ji)劃,否則,它看起來會很奇怪(guai)。
3、貧乏(fa)的尺(chi)寸大小
標準做法是h1的(de)(de)文字(zi)(zi)大于h2的(de)(de)文字(zi)(zi),頭部文字(zi)(zi)大于段落文字(zi)(zi)。盡量保(bao)持一致的(de)(de)尺寸,因為(wei)它有(you)助于一致性(第8條)和內容層次(第4條)。保(bao)持文字(zi)(zi)的(de)(de)可讀(du)性,但不要(yao)太大,讓字(zi)(zi)體的(de)(de)大小表現信息的(de)(de)重要(yao)性。還有(you),10像素以(yi)下的(de)(de)尺寸對大量閱(yue)讀(du)的(de)(de)人來說太小了。
4、沒(mei)有(you)足(zu)夠的空白
空白可以說是網站設計中最重要的(de)一(yi)部分。它(ta)有助于防止用戶(hu)在瀏覽網(wang)站時變得(de)疲憊,它(ta)可以在內容(rong)中劃出距(ju)離,而且它(ta)本身也看上去不(bu)錯。空白不(bu)是必須用白色的(de),而是,它(ta)僅僅是為(wei)其他設計元素提(ti)供(gong)間(jian)隔(ge)和緩沖的(de)空間(jian)。
5、不考慮用(yong)戶的分辨率(lv)
是(shi)的,你(ni)的屏幕分(fen)辨(bian)(bian)率(lv)有2560像(xiang)素,這(zhe)非常好。但(dan)很(hen)多人還(huan)在(zai)屏幕上用(yong)(yong)1024像(xiang)素的分(fen)率(lv),有些還(huan)在(zai)用(yong)(yong)640*480或800*600。雖(sui)然這(zhe)種(zhong)分(fen)辨(bian)(bian)率(lv)的顯示器正(zheng)在(zai)減少(shao),但(dan)采用(yong)(yong)更(geng)小的分(fen)辨(bian)(bian)率(lv)的手機(ji)設(she)備也來了。現在(zai)的網站設(she)計寬(kuan)度標(biao)準是(shi)960像(xiang)素,雖(sui)然沒有照顧(gu)到每一種(zhong)分(fen)辨(bian)(bian)率(lv),但(dan)在(zai)主流分(fen)辨(bian)(bian)率(lv)上可以呈現的最好。假如你(ni)希望面對大量的手機(ji)用(yong)(yong)戶,最好考(kao)慮一個手機(ji)版(ban)設(she)計。
6、太多的色彩
背景一(yi)(yi)(yi)種(zhong)(zhong)(zhong)(zhong)顏(yan)色(se),內(nei)容文(wen)本一(yi)(yi)(yi)種(zhong)(zhong)(zhong)(zhong)顏(yan)色(se),鏈接一(yi)(yi)(yi)種(zhong)(zhong)(zhong)(zhong)顏(yan)色(se),頁頭和(he)(he)(he)lightbox一(yi)(yi)(yi)種(zhong)(zhong)(zhong)(zhong)顏(yan)色(se),圖(tu)案和(he)(he)(he)頁腳各一(yi)(yi)(yi)種(zhong)(zhong)(zhong)(zhong)顏(yan)色(se)。這(zhe)很好,因為它幫助區分了有(you)用的(de)(de)(de)內(nei)容。但是,多(duo)重漸變、幾(ji)種(zhong)(zhong)(zhong)(zhong)鮮艷的(de)(de)(de)色(se)彩和(he)(he)(he)大(da)量有(you)鮮明對比的(de)(de)(de)色(se)調及飽和(he)(he)(he)度(du),會(hui)破壞(huai)你網站的(de)(de)(de)層(ceng)次和(he)(he)(he)空(kong)白概念。嘗試限制自己(ji)只用一(yi)(yi)(yi)種(zhong)(zhong)(zhong)(zhong)鮮艷的(de)(de)(de)色(se)調(如藍色(se)),再搭配反相(xiang)的(de)(de)(de)單色(se)(白、灰、黑)以獲得(de)一(yi)(yi)(yi)個漂(piao)亮的(de)(de)(de)結果。
7、同一件事情做的(de)不夠或做的(de)太多
多重導(dao)航非常好,如(ru)一(yi)個(ge)在(zai)頁(ye)頭一(yi)個(ge)在(zai)頁(ye)腳(jiao)。在(zai)頁(ye)腳(jiao)加(jia)一(yi)個(ge)”返回頂部(bu)”的(de)按鈕也很好。但是,太多指向同一(yi)目標的(de)途徑會(hui)降低可(ke)用性。讓你的(de)奶奶用下(xia)你的(de)網(wang)站(zhan),如(ru)果她搞(gao)不(bu)定,想(xiang)想(xiang)哪些(xie)東西(xi)讓初次訪問的(de)用戶(hu)拒絕使用這個(ge)網(wang)站(zhan)。
8、對比的問題
你考慮(lv)過閱讀(du)黑底(di)白(bai)字(zi)(zi)(zi)和白(bai)底(di)黑字(zi)(zi)(zi)的不(bu)同(tong)嗎?你有(you)沒(mei)有(you)試過閱讀(du)一(yi)下白(bai)底(di)灰(hui)字(zi)(zi)(zi)?有(you)些方式之所以比其(qi)(qi)他的更(geng)好,其(qi)(qi)原因就是(shi)這是(shi)一(yi)種(zhong)眼睛感知到對比的方式。如(ru)果你很難(nan)舒服的閱讀(du)文字(zi)(zi)(zi),考慮(lv)一(yi)下改(gai)變(bian)字(zi)(zi)(zi)體大小或方式。
9、沒(mei)有足夠的文字間距
與空白有關,文(wen)字(zi)間距(ju)(ju)有兩個(ge)部分,一(yi)個(ge)是字(zi)距(ju)(ju)(這個(ge)不能(neng)用(yong)CSS直接調整,可以通過一(yi)些(xie)高級技術解(jie)決),關系(xi)到字(zi)母之(zhi)間的(de)空白。一(yi)個(ge)是行距(ju)(ju),可以用(yong)CSS直接調整,關系(xi)到兩行文(wen)字(zi)之(zhi)間的(de)距(ju)(ju)離。這些(xie)有助于區分行與段(duan)落(luo),使(shi)用(yong)戶更容易閱(yue)讀(du)文(wen)字(zi)。
10、不一致
一致性是網站設計的關鍵。它是把網站設計組(zu)織在(zai)一起的方式,可以創造一種(zhong)緊密(mi)結合的感(gan)覺。在(zai)網站頁面互(hu)相鏈接(jie)的情(qing)況下,它可以幫(bang)助用戶(hu)把所有頁面都聯系在(zai)一起。如果你在(zai)整個網站持續改變字體、大小和(he)色彩,用戶(hu)很(hen)快會覺得不知所措。