網(wǎng)頁(yè)制作專(zhuān)業(yè)效果的四個(gè)細節

 

用戶(hù)的感覺(jué)是非常敏銳的，即使是完全不了解網(wǎng)頁(yè)設計技術(shù)的人也能夠從一堆拙劣的設計作品當中挑選出那一個(gè)優(yōu)秀的設計作品。
雖然他說(shuō)不出來(lái)為什么這件東西比那些都好，但是直覺(jué)會(huì )告訴他他自己喜歡哪一個(gè)。如果別人向我們問(wèn)起為什么這件作品要優(yōu)于其它呢？我們的回答是”很大一部分 原因是因為優(yōu)秀的設計作品總是充滿(mǎn)了豐富的細節。”在這篇文章里，我們就從技術(shù)的角度出發(fā)，總結一下在網(wǎng)頁(yè)設計中到底是哪些細節讓優(yōu)秀的作品脫穎而出。
一、1像素的襯線(xiàn)
在頁(yè)面的頂端，你能看到一條1個(gè)像素比背景顏色略淺的水平線(xiàn)將純色的背景和帶有材質(zhì)的背景分隔開(kāi)，如下圖：

而如果沒(méi)有這條襯線(xiàn)會(huì )是怎樣的一個(gè)效果，我們也來(lái)看看。

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

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

之所以要使用襯線(xiàn)，是為了體現物體在2D效果上的立體感，而立體感的體現必須要有陰影和高光。陰影我們通常使用圖層樣式來(lái)實(shí)現，而高光效果的實(shí)現，最常用 的技巧之一就是使用襯線(xiàn)了。上面的三個(gè)例子的襯線(xiàn)都在物體的頂部，說(shuō)明光線(xiàn)是從上向下照射的，高光處于物體的頂部。而如果光下從下向上照射的話(huà)，高光就應 該在底部了，那我們就應該將襯線(xiàn)放置于物體的下方。所以在襯線(xiàn)的使用上，我們始終要問(wèn)自己這幾個(gè)問(wèn)題，”我在這里使用了襯線(xiàn)，那么光源在哪里？”“如果光 源在這里的話(huà)，陰影應該出現在什么位置？”完成了這兩個(gè)回答，設計出來(lái)的物體的立體感才能更加真實(shí)。
二、細微的材質(zhì)
Redux主題真是解釋背景材質(zhì)的絕佳案例。因為在整個(gè)頁(yè)面中，從上至下使用了三種不同的材質(zhì)作為頁(yè)面的背景。上面的深藍色部分應用的是坑坑洼洼凹凸不平 的材質(zhì)，中間黑色部分應用的是紡織布的材質(zhì)，而底部應用的是雜色的材質(zhì)。當然，這三種材質(zhì)都是非常細微的，但是效果確是非常出眾的。實(shí)際上，過(guò)于醒目和復 雜的背景材質(zhì)不僅不能為設計增色，反而由于分散讀者的注意力而是整個(gè)設計品質(zhì)降低。所以最好的策略就是讓你的背景材質(zhì)保持細微而柔和。

三、柔和的漸變
是不是下面圖片上的文字框有一種鼓出來(lái)的感覺(jué)，對，那正是漸變帶給我們的效果。試想一下，如果單單是白色的文字框放置于頁(yè)面上，一定沒(méi)有添加了漸變讓我們感受到更多的趣味性。

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

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

 

大連仟億科技、大連網(wǎng)站建設、大連網(wǎng)站制作、大連網(wǎng)頁(yè)制作、大連網(wǎng)頁(yè)設計、大連網(wǎng)站設計、大連網(wǎng)站推廣、大連軟件開(kāi)發(fā)、大連網(wǎng)絡(luò )公司

---