轉(zhuǎn)帖|其它|編輯:郝浩|2009-04-24 17:31:47.000|閱讀 364 次
概述:本文介紹了,設(shè)計(jì)良好網(wǎng)頁(yè)的4項(xiàng)原則,非常有用!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
我最喜歡的設(shè)計(jì)書(shū)籍之一就是《Robin Williams Design Workshop》.它深入實(shí)際的設(shè)計(jì)理論,并且包含許多極棒的設(shè)計(jì)實(shí)例。其中一個(gè)值得關(guān)注的地方就是4項(xiàng)主要的設(shè)計(jì)原則,它們已經(jīng)在設(shè)計(jì)中為我所用。這 4項(xiàng)原則就是:反差, 重復(fù), 排列, 和分類(lèi)。
本文將討論這4項(xiàng)與web設(shè)計(jì)相關(guān)的原則。只要在腦海中牢牢記住了這4項(xiàng)原則,你就一定可以設(shè)計(jì)出更加整潔漂亮的網(wǎng)頁(yè)。
1.反差效果
好的反差效果設(shè)計(jì)可以給用戶(hù)一個(gè)極好的第一印象。如果用戶(hù)的眼睛沒(méi)有焦點(diǎn),注意力就會(huì)在處處是相同尺寸的元素和排版界面中迷失。設(shè)計(jì)師需要設(shè)計(jì)出很明顯的突出視覺(jué)元素來(lái)引導(dǎo)用戶(hù)的體驗(yàn)。你可以通過(guò)選擇圖片、顏色和字體等來(lái)形成良好的反差效果。
圖片反差
當(dāng)需要在很多小元素后面展示一個(gè)大尺寸的插圖時(shí),這種方法很有效。嗯,我的意思就是,比如:
The Invoice Machine
這個(gè)網(wǎng)頁(yè)利用一張大圖片來(lái)吸引用戶(hù)的注意。而同時(shí)網(wǎng)頁(yè)很自然的單色又讓很少的藍(lán)色應(yīng)用有了更好的效果。
Instabox
當(dāng)你眼睛看到這個(gè)頁(yè)面的時(shí)候,首先你會(huì)注意到什么?最有可能的就是盒子上面的那個(gè)星星了。跟 The Invoice Machine 一樣,它們都是通過(guò)用一張大圖片和很少的顏色來(lái)制造一個(gè)視覺(jué)焦點(diǎn)。
顏色反差
恰到好處地使用少量顏色,是網(wǎng)頁(yè)中另一種制造視覺(jué)反差的有效方法。可以在網(wǎng)頁(yè)的頭部和文本拷貝中使用不同的顏色,也可以在一張圖片或插圖的顏色里面應(yīng)用。
Fatburgr
這個(gè)網(wǎng)站是極出色的一個(gè)所有設(shè)計(jì)原則的應(yīng)用實(shí)例。關(guān)于顏色反差我們來(lái)看看它大大的黃色頭部和小小的淡灰文字。排列、圖片反差、重復(fù)和分類(lèi)這幾個(gè)原則做得都很徹底。
I Love Typography
一個(gè)用來(lái)展示排版的網(wǎng)站如果在它自己的頁(yè)首就為我們展示了一個(gè)極好的排版效果,那讓人覺(jué)得多驚奇啊!我喜歡他們所用的字體,也喜歡他們良好的青色和深灰色搭配。
字體反差
如果你想通過(guò)字體來(lái)產(chǎn)生反差效果,就應(yīng)該避免使用2個(gè)很相像的字體外觀和大小。很相像的字體會(huì)造成混淆,并讓設(shè)計(jì)變得模糊。不過(guò)把字體大小弄得很不 一樣就會(huì)非常有效果,或者是把字體最細(xì)和最粗的版本拼合到一起也同樣有效。同樣的,如果你將兩種外形差別明顯的兩種字體排在一塊,就會(huì)對(duì)它們帶來(lái)的視覺(jué)沖 擊效果感到驚奇。把一個(gè) san serif 字體和一個(gè)手寫(xiě)字體放在一起就是一個(gè)例子。
Fixie Consulting
哇噻,我真的非常喜歡這個(gè)網(wǎng)站上使用的排版和顏色。注意看他們標(biāo)語(yǔ)的大小和筆畫(huà)。頁(yè)面上灑水效果和少量藍(lán)色的使用,都讓我非常欣賞。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:藍(lán)色理想