良好的网页设计是件很难实现的事情。一个好的网页设计,不仅吸引眼球,也是实用的、直观的、层级简单却足够复杂到保持用户的兴趣。字体、色彩、空白与内容间的完美平衡可以构成一个非常好看的设计,你的用户也会再次回来。而一个坏的网页设计,会把你的用户从你的网站上赶跑。 在设计一个网页时,有许多地方会 让许多设计师误入歧途。在本文中,我们会讨论让你的网页设计不美观的10个原因以及如何解决它。 1、没有(you)足够的空白(bai) 空白(bai)可(ke)以(yi)说是设计(ji)中最重要的(de)一部分(fen)。它(ta)有助(zhu)于防止用户在浏(liu)览网站(zhan)时变得疲惫(bei),它(ta)可(ke)以(yi)在内容中划(hua)出距离(li),而且(qie)它(ta)本身也(ye)看(kan)上(shang)去不(bu)错(cuo)。空白(bai)不(bu)是必须(xu)用白(bai)色的(de),而是,它(ta)仅仅是为其他(ta)设计(ji)元素(su)提供间隔和缓冲的(de)空间。 2、太多的字(zi)体 一般一个简单的网页设计,一般字体不超过3种。多则(ze)乱(luan)。 3、太多的色彩 背 景一(yi)(yi)种(zhong)(zhong)颜(yan)色(se)(se),内(nei)容(rong)文(wen)本一(yi)(yi)种(zhong)(zhong)颜(yan)色(se)(se),链接一(yi)(yi)种(zhong)(zhong)颜(yan)色(se)(se),页头和(he)lightbox一(yi)(yi)种(zhong)(zhong)颜(yan)色(se)(se),图(tu)案和(he)页脚各一(yi)(yi)种(zhong)(zhong)颜(yan)色(se)(se)。这很(hen)好,因为它帮助区分(fen)了(le)有用的内(nei)容(rong)。但是(shi),多重 渐变、几种(zhong)(zhong)鲜艳(yan)的色(se)(se)彩和(he)大量有鲜明对比的色(se)(se)调及饱和(he)度,会破(po)坏(huai)你网站的层(ceng)次和(he)空白概念。 尝试限制自己只用一种鲜艳的(de)(de)(de)色调(如蓝(lan)色),再(zai)搭(da)(da)配反相的(de)(de)(de)单色(白、灰(hui)、黑(hei))以获得(de)一个(ge)漂亮的(de)(de)(de)搭(da)(da)配。这(zhei)里强调下豆瓣的(de)(de)(de)配色。也是我(wo)喜欢的(de)(de)(de)颜色搭(da)(da)配。 4、没有内(nei)容层次(ci) 用户(hu)的眼睛喜(xi)欢有(you)秩序 的设计,如(ru)头(tou)部包(bao)含导航和LOGO,特定内容(rong)使用lightbox,三列(lie)分(fen)栏,页(ye)脚。它有(you)助于(yu)在内心组织重要的信息,并(bing)引导用户(hu)注意在你(ni)想让他注意的地方。 在(zai)(zai)传统艺(yi)术中,新手们被(bei)教导(dao)色彩、价值和线(xian)性透视三原则和其(qi)他艺(yi)术指(zhi)导(dao)。在(zai)(zai)网页设计中,没有特别奉行(xing)的(de)(de)准则,但以直观(guan)的(de)(de)方式(shi)组织你的(de)(de)内容是一条(tiao)很好(hao)的(de)(de)经验规则。也是多年(nian)培(pei)养的(de)(de)用户习惯。最(zui)终习惯就(jiu)是最(zui)终用户。当然一成不变不是我们所鼓励的(de)(de)。 5、不考虑用户(hu)的分(fen)辨率 你的(de)(de)屏幕(mu) 分(fen)辨率有(you)2560像素(su),这非(fei)常好。但(dan)很多人(ren)还在(zai)(zai)屏幕(mu)上用1024像素(su)的(de)(de)分(fen)率,有(you)些还在(zai)(zai)用640*480或800*600。虽(sui)然这种分(fen)辨率的(de)(de)显示器正在(zai)(zai)减 少,但(dan)采用更(geng)小的(de)(de)分(fen)辨率的(de)(de)手机设备也(ye)来(lai)了。 现在的(de)网(wang)页设(she)计宽度(du)标准(zhun)是960像(xiang)素,虽(sui)然没有照(zhao)顾到每一种(zhong)分(fen)辨(bian)率,但在主流(liu)分(fen)辨(bian)率上(shang)可(ke)以呈现的(de)最好。假如你希 望面对大量的(de)手(shou)机用(yong)户,最好考虑一个手(shou)机版设(she)计。 6、对(dui)比(bi)的问题 你考虑过阅(yue)读黑底白字(zi)和(he)白底黑字(zi)的不同(tong)吗?你有没有试(shi)过阅(yue)读一下白底灰字(zi)?有些(xie)方(fang)式之所(suo)以(yi)比其他的更好,其原因就(jiu)是这(zhei)是一种(zhong)眼睛感(gan)知到对比的方(fang)式。 如果你很难舒服(fu)的阅读(du)文(wen)字,考(kao)虑一(yi)下改变(bian)字体(ti)大小(xiao)或(huo)方(fang)式。成为一(yi)个大师级网(wang)页设计师的秘诀:对(dui)比,对(dui)比,对(dui)比。 7、同一(yi)件(jian)事情做的不(bu)够多,或(huo)做的太(tai)多(过犹不(bu)及) 多(duo)重导(dao)航非(fei)常好,如一(yi)个(ge)在页(ye)(ye)头一(yi)个(ge)在页(ye)(ye)脚(jiao)。在页(ye)(ye)脚(jiao)加一(yi)个(ge)”返回顶部”的(de)(de)按钮也(ye)很好。但是,太(tai)多(duo)指向同一(yi)目标(biao)的(de)(de)途径会降低(di)可用(yong)(yong)性。让(rang)你的(de)(de)奶奶用(yong)(yong)下你的(de)(de)网站(zhan),如果(guo)她(ta)搞不定,想想哪些(xie)东西让(rang)初(chu)次访问(wen)的(de)(de)用(yong)(yong)户拒绝使用(yong)(yong)这个(ge)网站(zhan)。 8、不一(yi)致 一(yi)(yi)致性是网(wang)(wang)页(ye)(ye)设(she)计(ji)的关键。它是把(ba)(ba)网(wang)(wang)页(ye)(ye)设(she)计(ji)组织在一(yi)(yi)起的方式,可(ke)以创造(zao)一(yi)(yi)种紧密结合的感觉。在网(wang)(wang)站(zhan)页(ye)(ye)面(mian)互相(xiang)链(lian)接的情况下(xia),它可(ke)以帮助用户把(ba)(ba)所有页(ye)(ye)面(mian)都联系在一(yi)(yi)起。如果(guo)你在整个网(wang)(wang)站(zhan)持续改(gai)变字体、大小和色彩,用户很快会觉得不知所措。 9、没有足(zu)够的文字间距 与空(kong)白有关,文字(zi)(zi)间距有两个(ge)部分,一个(ge)是字(zi)(zi)距(这(zhei)个(ge)不(bu)能用CSS直接调(diao)整(zheng)(zheng),可(ke)以通过(guo)一些高(gao)级技(ji)术解(jie)决),关系到(dao)(dao)字(zi)(zi)母之间的空(kong)白。一个(ge)是行距,可(ke)以用CSS直接调(diao)整(zheng)(zheng),关系到(dao)(dao)两行文字(zi)(zi)之间的距离。这(zhei)些有助于(yu)区分行与段落,使用户更(geng)容(rong)易阅读(du)文字(zi)(zi)。 10、贫乏的尺(chi)寸大小 标(biao)准做法是h1的(de)文字(zi)大(da)于h2的(de)文字(zi),头(tou)部(bu)文字(zi)大(da)于段落(luo)文字(zi)。尽量保持(chi)(chi)一致(zhi)(zhi)的(de)尺(chi)寸,因为它有助(zhu)于一致(zhi)(zhi)性(xing)(第8条(tiao))和内容层(ceng)次(第4条(tiao))。保持(chi)(chi)文字(zi)的(de)可(ke)读性(xing),但不要太(tai)大(da),让字(zi)体的(de)大(da)小(xiao)表现信息(xi)的(de)重(zhong)要性(xing)。还(hai)有,10像素以下的(de)尺(chi)寸对(dui)大(da)量阅读的(de)人来说太(tai)小(xiao)了。 |