您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁設(shè)計(jì)中最常用到的設(shè)計(jì)細(xì)節(jié)

在企業(yè)管理界流行一句格言叫”細(xì)節(jié)決定成敗”。企業(yè)管理當(dāng)然不是我們這里要討論的主題,但是,把這句話放在網(wǎng)頁設(shè)計(jì)當(dāng)中的確是顛撲不破的真理。我們的眼睛和感覺總是非常敏銳的,即使是完全不了解網(wǎng)頁設(shè)計(jì)技術(shù)的人也能夠從一堆拙劣的設(shè)計(jì)作品當(dāng)中挑選出那一個(gè)優(yōu)秀的設(shè)計(jì)作品。雖然他說不出來為什么這件東西比那些都好,但是直覺會(huì)告訴他他自己喜歡哪一個(gè)。如果別人向我們問起為什么這件作品要優(yōu)于其它呢?我們的回答是”很大一部分原因是因?yàn)閮?yōu)秀的設(shè)計(jì)作品總是充滿了豐富的細(xì)節(jié)。”在這篇文章里,我們就從技術(shù)的角度出發(fā),以PremiumPixels上的Redux WordPress主題設(shè)計(jì)作品為例,來總結(jié)一下在網(wǎng)頁設(shè)計(jì)中到底是哪些細(xì)節(jié)讓優(yōu)秀的作品脫穎而出。

一、1像素的襯線

在頁面的頂端,你能看到一條1個(gè)像素比背景顏色略淺的水平線將純色的背景和帶有材質(zhì)的背景分隔開,如下圖:

details-1.jpg

 

而如果沒有這條襯線會(huì)是怎樣的一個(gè)效果,我們也來看看。

details-2.jpg

實(shí)際上,網(wǎng)頁設(shè)計(jì)中,使用到襯線的例子非常普遍。例如下面的這個(gè)例子中,你會(huì)在包圍著”The Dorchester Hotel”文字的黑色邊框的頂部向下1個(gè)像素發(fā)現(xiàn)一條灰色的襯線。

details-3.jpg

而在下面這個(gè)設(shè)計(jì)好的按鈕中,綠色和黃色邊框頂部向下1個(gè)像素也能看到一條顏色更淺的線條,而這條襯線制作的更為精細(xì),因?yàn)樗鼞?yīng)用了蒙版,從頂部向下你會(huì)發(fā)現(xiàn)這條襯線漸漸隱去了。另外,在”Add To Cart”和”$9.99″兩個(gè)文字之間的分隔線實(shí)際上是兩條線,左邊顏色深一些,右邊顏色淺一些,這樣就能產(chǎn)生線條的凹陷效果。

details-4.jpg

之所以要使用襯線,是為了體現(xiàn)物體在2D效果上的立體感,而立體感的體現(xiàn)必須要有陰影和高光。陰影我們通常使用圖層樣式來實(shí)現(xiàn),而高光效果的實(shí)現(xiàn),最常用的技巧之一就是使用襯線了。上面的三個(gè)例子的襯線都在物體的頂部,說明光線是從上向下照射的,高光處于物體的頂部。而如果光下從下向上照射的話,高光就應(yīng)該在底部了,那我們就應(yīng)該將襯線放置于物體的下方。所以在襯線的使用上,我們始終要問自己這幾個(gè)問題,”我在這里使用了襯線,那么光源在哪里?”"如果光源在這里的話,陰影應(yīng)該出現(xiàn)在什么位置?”完成了這兩個(gè)回答,設(shè)計(jì)出來的物體的立體感才能更加真實(shí)。

二、細(xì)微的材質(zhì)

Redux主題真是解釋背景材質(zhì)的絕佳案例。因?yàn)樵谡麄€(gè)頁面中,從上至下使用了三種不同的材質(zhì)作為頁面的背景。上面的深藍(lán)色部分應(yīng)用的是坑坑洼洼凹凸不平的材質(zhì),中間黑色部分應(yīng)用的是紡織布的材質(zhì),而底部應(yīng)用的是雜色的材質(zhì)。當(dāng)然,這三種材質(zhì)都是非常細(xì)微的,但是效果確是非常出眾的。實(shí)際上,過于醒目和復(fù)雜的背景材質(zhì)不僅不能為設(shè)計(jì)增色,反而由于分散讀者的注意力而是整個(gè)設(shè)計(jì)品質(zhì)降低。所以最好的策略就是讓你的背景材質(zhì)保持細(xì)微而柔和。

details-5.jpg

三、柔和的漸變

是不是下面圖片上的文字框有一種鼓出來的感覺,對(duì),那正是漸變帶給我們的效果。試想一下,如果單單是白色的文字框放置于頁面上,一定沒有添加了漸變讓我們感受到更多的趣味性。

details-10.jpg

另外,在頁面的左右邊緣部分也應(yīng)到了從純色背景到材質(zhì)背景的漸變,這樣會(huì)讓深藍(lán)色凹凸不平的背景材質(zhì)出現(xiàn)的更加自然。在漸變的使用中需要注意的是,除某些特殊情況外,不要使用太過強(qiáng)的漸變,不論是色向上還是亮度上還是飽和度上都不可跨度太過強(qiáng)。因?yàn)檫@樣強(qiáng)烈的過度根本不帶真實(shí)感,給人一種很不舒適的感覺。

details-11.jpg

四、微妙的陰影

注意觀察Redux暗色背景上的淺色文字,你會(huì)發(fā)現(xiàn)它們都被添加上了投影效果?,F(xiàn)在我們可以使用CSS3中的text-shadow屬性來完成文字的投影設(shè)計(jì),代替了在Photoshop中完成此項(xiàng)工作。而且使用CSS3來給文字添加陰影自由度更高,在瀏覽器支持的情況下,你可以給任意文字添加你想要的陰影效果。當(dāng)然IE8以下版本的瀏覽器是不支持此項(xiàng)屬性的,這是我們?cè)谠O(shè)計(jì)中需要注意的地方。另外,和前面提到的其它設(shè)計(jì)細(xì)節(jié)一樣,陰影的效果也要足夠柔和,不可過于強(qiáng)烈,不然很容易讓整個(gè)設(shè)計(jì)看起來有一種臟臟的感覺,顯得不夠精致。

details-12.jpg

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1117.html
網(wǎng)站設(shè)計(jì)要義:別讓我想,也別讓我停
提升網(wǎng)頁設(shè)計(jì)品質(zhì)的8種布局方案
圖趣網(wǎng)微信
建議反饋
×