高品質的網頁設計:實例與技巧之二（像素級的完美）

來源：懂視網責編：小采時間：2020-11-27 18:53:34

高品質的網頁設計:實例與技巧之二（像素級的完美）

高品質的網頁設計:實例與技巧之二（像素級的完美）:有一個方法能夠看出某人在完成一項網頁設計時是否真的用心了。有時候創造奇跡的就是一些小細節，一些別人幾乎無法察覺的細節。我所說的像素級的完美就是指在線條、邊緣和邊框描邊上仔細推敲。與其就用一條單一的線，不如多加一些細節。細節可以是細微的

推薦度：

點擊下載本文 文檔為doc格式

導讀高品質的網頁設計:實例與技巧之二（像素級的完美）:有一個方法能夠看出某人在完成一項網頁設計時是否真的用心了。有時候創造奇跡的就是一些小細節，一些別人幾乎無法察覺的細節。我所說的像素級的完美就是指在線條、邊緣和邊框描邊上仔細推敲。與其就用一條單一的線，不如多加一些細節。細節可以是細微的

有一個方法能夠看出某人在完成一項網頁設計時是否真的用心了。有時候創造奇跡的就是一些小細節，一些別人幾乎無法察覺的細節。我所說的“像素級的完美”就是指在線條、邊緣和邊框描邊上仔細推敲。與其就用一條單一的線，不如多加一些細節。細節可以是細微的漸變，也完全可以只是一條1像素寬的細線（用作表現陰影或高光）。有了這些細節，你的設計會大不一樣。有些設計師在這方面特擅長： Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.

像素級完美細節的實例
Envato的細節鑒賞
下圖的Example 1 (例子1)中，綠色內容框的邊緣有一條更亮的綠色線。而Example 2處，區塊內邊緣有柔和的漸變陰影，而邊緣之上還有一像素的白色描邊。這做法非常聰明，用陰影來強調高光。后面的綠色區域有非常柔和細微的光影效果，有助于將注意力吸引到下面的白色區塊中那清新脆爽的細節上去。盡管這種做法并不是總能讓設計看起來更加精致，不過它們的確能幫助你賦予設計以三維的真實感。于是設計元素就成了鑲嵌在頁面上的寶石，而不是平鋪在上面的一張毫無動感的紙。

Tutorial9.net上的細節
David Leggett 對于如何制造單像素頂邊條有很深的理解。他最近重新設計的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 處你能看到，他是如何僅僅通過添加一條1像素的高光，而將導航標簽變得更有質感。Example 2 處使用的技巧則更多了。相機圖標的投影，下方白色區域的陰影與高光，以及導航條上的1像素高光。

RedBrick Health上按鈕和分割線上的完美像素級細節
這個漂亮的導航菜單，由Ryan Scherf 創造，是使用完美像素級細節提升設計品質的絕佳實例。紅色按鈕有1像素的高亮，鏈接之間的分割線也有同等的品質與細節。正如你所看到的，他沒有滿足于只用一條灰色線分割，Ryan還在下面添加了一條1像素寬的高光線，避免了設計看起來過于平坦。

完美像素級細節也適用于Grunge風格: AvalonStar
譯注：Grunge風格有“做舊”、“迷幻搖滾”、“做臟”等幾層意思在里面，算是平面藝術中的一個流派。

下面的例子是漂亮的AvalonStar：Distortion（扭曲）主題博客，有著極贊的grunge風格。不過，即便是骯臟做舊的grunge風，利用1像素高光也能創造大不同。下圖的Example 1 處，上面的棕色區域有一個漸變陰影，下面的綠色區塊的頂部則有著一條1像素高亮線。陰影與1像素線的結合，讓這些區塊顯得更為精致。