導(dǎo)讀:網(wǎng)頁(yè)設(shè)計(jì)對(duì)網(wǎng)站建設(shè)起著至關(guān)重要的作用,涉及到界面的美觀,用戶體驗(yàn)等等。本文作者為一名資深的網(wǎng)頁(yè)設(shè)計(jì)師,作者論述了改進(jìn)網(wǎng)頁(yè)設(shè)計(jì)的7個(gè)要點(diǎn),并配以成功的案例,圖文并茂,分享給更多的朋友,希望對(duì)大家能有所幫助和啟發(fā)。
1. 懂得HTML和CSS編程
這條之所以成為前幾條是因?yàn)樗蔷W(wǎng)頁(yè)設(shè)計(jì)中更重要的部分。明白網(wǎng)頁(yè)是如何在瀏覽器中渲染的可以防止你做出不合理的設(shè)計(jì),比如那些無(wú)法用網(wǎng)頁(yè)實(shí)現(xiàn)的設(shè)計(jì)。要保持與時(shí)俱進(jìn),弄清楚現(xiàn)什么效果可以用現(xiàn)在的CSS技術(shù)實(shí)現(xiàn),什么效果不可以。
使用CSS3更新技術(shù)設(shè)計(jì)的經(jīng)典案例
Atebits()在網(wǎng)頁(yè)文本中使用了文本陰影,這樣就不需要使用圖片了。它還使用了-webkit-transform和-webkit-transition來(lái)向這三個(gè)圖標(biāo)加入了一些動(dòng)畫,不過(guò)這些效果只有在支持webkit的瀏覽器中才能看到,比如Chorme和Safari。
Elliot Jay Stocks(/)使用了一種叫做@font-face的CSS3方法來(lái)讓瀏覽器下載特定的字體,這就免去了使用圖片的麻煩。
2. 注重細(xì)節(jié)
好的設(shè)計(jì)和偉大設(shè)計(jì)之間的距離在于是否做好細(xì)節(jié)。
**設(shè)計(jì)細(xì)節(jié)的例子
Metalab(/)很好的混合了著色(Shading)、漸變和陰影,為網(wǎng)頁(yè)增加了額外的細(xì)節(jié)。
We Follow(/)巧妙的使用了漸變和陰影,為其用戶界面添加了很好的細(xì)節(jié)。
3. 善于使用留白
世界上更痛苦的事情莫過(guò)于當(dāng)你想閱讀一些東西卻發(fā)現(xiàn)頁(yè)面上各種元素的旁邊充滿了文字,頁(yè)面設(shè)計(jì)者這么做的目的**是想要在頁(yè)面狹小的控件里放下更多的信息,但這只能給別人帶來(lái)一種痛苦的體驗(yàn)。合理的使用留白可以給頁(yè)面中的元素以呼吸的空間,減少閱讀者眼鏡的壓力,從而讓用戶有一種愉快的瀏覽體驗(yàn)。
合理使用留白的例子
Soccernet(/news/story?id=657760sec=transferscc=5739)在他們的文章頁(yè)面中很好的使用了留白,你可以看出文字都離其它元素有一定
怎樣的用戶體驗(yàn)才會(huì)讓B2C網(wǎng)站爆賺?,一點(diǎn)見(jiàn)解,望見(jiàn)笑。
查看更多寧波網(wǎng)站推廣網(wǎng)站會(huì)讓用戶