網(wǎng)頁設(shè)計中那些不容忽視的細節(jié)

2014-3-31    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   m.bouu.cn  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

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

完美的像素線

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

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

恰到好處的陰影

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

Fubiz的UI設(shè)計師使用了一個微妙的陰影的錯覺,提高了頁面的導航欄。

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

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

簡單的漸變

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

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

的紋理

紋理往往用于填充大面積。給一個UI設(shè)計添加一些有意思的元素,紋理是一種簡單的方法,但是紋理也可以被用在更細微的地方來表達一些更的東西。

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

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.bouu.cn

存檔