詳解網(wǎng)頁(yè)設計中那些不容忽視的細節發(fā)布者：本站     時(shí)間：2021-12-29 09:12:18

你有沒(méi)有經(jīng)歷過(guò)看到一個(gè)頁(yè)面的時(shí)候馬上就被它的設計吸引并且留下了深刻的印象呢?然后你進(jìn)一步細看這個(gè)頁(yè)面發(fā)現真正使這個(gè)頁(yè)面變得神奇的是一些小細節，在這篇文章中我們將看到幾種把細節設計做到完美的頁(yè)面。

完美的像素線(xiàn)

Image Spark 的設計師用一個(gè)像素的線(xiàn)條來(lái)分割頂部導航，搜索輸入框，導航底欄。任何時(shí)候一個(gè)較淺的顏色緊挨著(zhù)一個(gè)較深的顏色會(huì )使人出現有一個(gè)凸起的邊緣的錯覺(jué)。請注意這種線(xiàn)條只能比背景色稍微淺一點(diǎn)點(diǎn)。如果使用一條白線(xiàn)那將失去這種效果。

詳解<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中那些不容忽視的細節,PS教程,

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

atebits使用了類(lèi)似的技術(shù)，但是在這里是用來(lái)做一些分隔。注意他們是使用兩個(gè)1px的線(xiàn)條相映成趣，一個(gè)明亮的一個(gè)暗一點(diǎn)的。這給人的錯覺(jué)是一個(gè)插圖槽。另外一個(gè)漂亮的接觸線(xiàn)的兩端是漸漸消逝，而不是突然結束。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

恰到好處的陰影

陰影可以給頁(yè)面增加一些深度，但是在使用陰影的時(shí)候有一點(diǎn)需要特別注意，不要過(guò)度的使用。ps中的陰影效果如果錯誤的使用會(huì )成為一個(gè)非常危險的工具。陰影的強弱應該與背景顏色結合使用。一個(gè)較暗的背景需要一個(gè)更暗的陰影，一個(gè)較亮的背景比較是個(gè)一個(gè)更亮的陰影。

Fubiz的設計師使用了一個(gè)微妙的陰影的錯覺(jué)，提高了頁(yè)面的導航欄。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

為了好玩，讓我們看看如果過(guò)度的使用陰影會(huì )發(fā)生什么。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

白宮的官方網(wǎng)站陰影無(wú)處不在，但是他們都做了巧妙的設計，網(wǎng)站保持了一個(gè)非常干凈的外觀(guān)。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

簡(jiǎn)單的漸變

漸變是一個(gè)非常簡(jiǎn)單的效果。它們可以被用來(lái)實(shí)現各種效果，如光源的錯覺(jué)或建立深度，但是要保持它的微妙。Tapbots使用了一個(gè)簡(jiǎn)單的梯度背景使其出現光源照亮的iPhone。微妙的細節，像這樣可以使這個(gè)頁(yè)面更緊湊。在這個(gè)頁(yè)面中漸變的效果使iphone更加突出。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

Metalab的標簽都有一個(gè)漸變填充。這樣會(huì )造成深度的幻覺(jué)，使他們看起來(lái)略微凸起。Metalab的是上面提到的像素完美的細節也是一個(gè)很好的例子。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

精確的紋理

紋理往往用于填充大面積。給一個(gè)設計添加一些有意思的元素，紋理是一種簡(jiǎn)單的方法，但是紋理也可以被用在更細微的地方來(lái)表達一些更精確的東西。

看看這個(gè)自我推廣的頁(yè)面。在我的收藏夾中，我用了大量的紋理來(lái)給他一種磨損風(fēng)化的效果。然而，這不是僅僅是填補較大的空白的有質(zhì)感的內容，還有一步用星星點(diǎn)點(diǎn)的紋理沿邊緣添加更多的細節。

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

詳解網(wǎng)頁(yè)設計中那些不容忽視的細節,PS教程,

利亞姆·麥凱在他的設計中創(chuàng )造了微妙的油漬效果。在他的博客上，他用微妙的做舊的紋理，能夠更有效地強調內容，而不是分散注意力。注意甚至1px邊框線(xiàn)有一個(gè)破舊的外觀(guān)。