品質(zhì)感明顯下降了。留白的影響就有這么大。
**控制留白的技巧
各種不同情況下,留白要求都不盡相同。你需要不斷訓(xùn)練自己,做到對(duì)留白所能帶來的改變時(shí)刻心中有數(shù),從而有效地利用留白滿足設(shè)計(jì)需求。這要靠個(gè)人感覺的,不過都能從實(shí)踐中鍛煉出來。
[i]使用網(wǎng)格輔助網(wǎng)頁設(shè)計(jì)
利用網(wǎng)格當(dāng)然能幫助你理解元素之間的空白。
[/i]
[i]不斷嘗試
不斷嘗試—失敗—嘗試,直到找到更佳方案。
[/i]
[i]留白并不是浪費(fèi)空間
空白并不總是等著你去填充的。
[/i][i]沒錯(cuò),少就是多
與其用盡心思填滿某個(gè)區(qū)域,不如就把它留空,只保留至關(guān)重要的信息就好。[/i]
02. 像素級(jí)的**
有一個(gè)方法能夠看出某人在完成一項(xiàng)網(wǎng)頁設(shè)計(jì)時(shí)是否真的用心了。有時(shí)候創(chuàng)造奇跡的就是一些小細(xì)節(jié),一些別人幾乎無法察覺的細(xì)節(jié)。我所說的“像素級(jí)的完 美”就是指在線條、邊緣和邊框描邊上仔細(xì)推敲。與其就用一條單一的線,不如多加一些細(xì)節(jié)。細(xì)節(jié)可以是細(xì)微的漸變,也完全可以只是一條1像素寬的細(xì)線(用作表現(xiàn)陰影或高光)。有了這些細(xì)節(jié), 你的設(shè)計(jì)會(huì)大不一樣。有些設(shè)計(jì)師在這方面特擅長: Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.
像素級(jí)**細(xì)節(jié)的實(shí)例
Envato的細(xì)節(jié)鑒賞
下圖的Example 1 (例子1)中,綠色內(nèi)容框的邊緣有一條更亮的綠色線。而Example 2處,區(qū)塊內(nèi)邊緣有柔和的漸變陰影,而邊緣之上還有一像素的白色描邊。這做法非常聰明,用陰影來強(qiáng)調(diào)高光。后面的綠色區(qū)域有非常柔和細(xì)微的光影效果,有助于將注意力吸引到下面的白色區(qū)塊中那清新脆爽的細(xì)節(jié)上去。 盡管這種做法并不是總能讓設(shè)計(jì)看起來更加精致,不過它們的確能幫助你賦予設(shè)計(jì)以三維的真實(shí)感。于是設(shè)計(jì)元素就成了鑲嵌在頁面上的寶石,而不是平鋪在上面的一張毫無動(dòng)感的紙。
Tutorial9.net上的細(xì)節(jié)
David Leggett 對(duì)于如何制造 單像素更邊條 有很深的理解。他更近重新設(shè)計(jì)的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 處你能看到,他是如何**通過添加一條1像素的高光,而將導(dǎo)航標(biāo)簽變得更有質(zhì)感。Example 2 處使用的技巧則更多了。相機(jī)圖標(biāo)的投影,下方白色區(qū)域的陰影與高光,以及導(dǎo)航條上的1像素高光。
RedBrick Health上 按鈕和分割線上的**像素級(jí)細(xì)節(jié)
這個(gè)漂亮的導(dǎo)航菜單,由Ryan Scherf 創(chuàng)造,是使用**像素級(jí)細(xì)節(jié)提升設(shè)計(jì)品質(zhì)的更佳實(shí)例。紅色按鈕有1像素的高亮,鏈接之間的分割線也有同等的品質(zhì)與細(xì)節(jié)。正如你所看到的,他沒有滿足于只用一條灰色線分割,Ryan還在下面添加了一條1像素寬的高光線,避免了設(shè)計(jì)看起來過于平坦。
使用網(wǎng)格輔助網(wǎng)頁設(shè)計(jì),歡迎咨詢合作。
查看更多寧波網(wǎng)站制作網(wǎng)頁設(shè)計(jì)網(wǎng)格