1. 增加對(duì)比2. 漸變3. 色彩4. 字符間距5. 大小寫6. 消鋸齒7. 制造瑕疵8. 模糊9. 對(duì)齊10. 消除累贅。

高級(jí)效果能為設(shè)計(jì)增色不少，但如果用得不對(duì)，只會(huì)影響用戶對(duì)重點(diǎn)內(nèi)容的關(guān)注。高級(jí)效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在，但即便如此，也還是需要一些更簡(jiǎn)單的效果與其配合。

1. 增加對(duì)比

很可惜，添加額外的對(duì)比是最被忽視和棄用的技巧之一。

10個(gè)網(wǎng)頁(yè)設(shè)計(jì)技巧方法讓深圳網(wǎng)頁(yè)設(shè)計(jì)讓更美觀，用戶體驗(yàn)更友好

采用了細(xì)的高對(duì)比度邊線，讓訪客能更容易區(qū)分頁(yè)面的不同區(qū)域。在上圖中放大了的部分，你可以看到，大多數(shù)時(shí)候這種對(duì)比只是一條1像素的高亮線挨著1像素的暗線。

頁(yè)面上的“More”和“Go”按鈕與周圍的對(duì)比度太小，即使你刻意在找也很容易被忽略掉。

wordpress網(wǎng)頁(yè)設(shè)計(jì)技巧

WordPress 為頁(yè)面中最受歡迎的鏈接 “Download(下載)” 使用了對(duì)比色。 這種紅色在冷灰色調(diào)的頁(yè)面中自己跳了出來(lái)。但這紅色在明度方面有所收斂，避免了影響頁(yè)面整體效果。

如果你對(duì)于該不該使用對(duì)比猶豫不決，就把這一決定過(guò)程當(dāng)做是化妝。你要做的不是讓人們大吼“看吶，對(duì)比色!”，你需要的是自然而然的吸引他們注意頁(yè)面中重要的內(nèi)容，高亮出已經(jīng)存在的重點(diǎn)。

2. 漸變

技術(shù)的發(fā)展為所有想使用漸變的人提供了各種創(chuàng)造漸變的工具。但漸變真的很好么?

網(wǎng)頁(yè)設(shè)計(jì)方法

Media Temple 網(wǎng)站的每一個(gè)頁(yè)面都使用了漸變，不過(guò)其漸變使用的節(jié)制和精妙才是設(shè)計(jì)成功的關(guān)鍵。logo，大標(biāo)題，按鈕和背景都有細(xì)微的或者鏡像的漸變，以強(qiáng)調(diào)內(nèi)容。最復(fù)雜的漸變用在了那些簡(jiǎn)單的120像素寬的按鈕(子頁(yè)面中的“ACTIVATE”和“LEARN MORE”)上，因?yàn)樗鼈兪切枰L客注意的重點(diǎn)。

網(wǎng)頁(yè)設(shè)計(jì)之對(duì)比漸變

Commission Junction的漸變運(yùn)用遠(yuǎn)沒(méi)有Media Temple的細(xì)致，而且采用了過(guò)于豐富的漸變類型：

從黑色到灰色的水平線性漸變，位于頁(yè)面頂部

頁(yè)眉處的綠色徑向漸變

登陸框背景的“CJ” 標(biāo)志上方模糊的斜向漸變

輸入框背景中淡淡的垂直線性漸變

導(dǎo)航條背景的垂直漸變

Webinar廣告中明亮的線性漸變

另一個(gè)垂直線性減弱，用在了大標(biāo)題處

這種設(shè)計(jì)有點(diǎn)冒險(xiǎn)，大部分漸變式有用的，但還是存在一些問(wèn)題。最突出的一點(diǎn)是，設(shè)計(jì)喪失了一致性。同選擇可辨性強(qiáng)的色彩組合一樣的道理，設(shè)計(jì)師也需要為每個(gè)項(xiàng)目選擇合適的漸變組合。

例如，大的水平漸變(1)引導(dǎo)眼睛橫向注視頁(yè)面。這本沒(méi)有什么問(wèn)題，但就在此漸變的正下方又出現(xiàn)了把視線吸引到中心的徑向漸變(2)和把視線引導(dǎo)到右下角的斜向漸變(3)。這會(huì)給訪客造成困擾，起伏變化的視覺(jué)流(visual flow)也削弱了可讀性。

使用漸變時(shí)，保證好的視覺(jué)流很重要：請(qǐng)保守而精致地使用漸變。最重要的一點(diǎn)，僅當(dāng)對(duì)整體設(shè)計(jì)有幫助時(shí)才使用漸變。

3. 色彩

合理使用顏色很有挑戰(zhàn)性。在挑選完美的色彩組合和為各種色調(diào)找到合適位置的過(guò)程中，時(shí)間嘩啦啦地就流走了。

網(wǎng)頁(yè)設(shè)計(jì)之色彩的應(yīng)用

4. 字符間距

網(wǎng)頁(yè)設(shè)計(jì)之字符間距的應(yīng)用

5. 大小寫

改變字母大小寫不過(guò)是按一下Shift或者Caps Lock鍵的功夫，但很少有設(shè)計(jì)師好好利用了這一技巧的潛能。

網(wǎng)頁(yè)設(shè)計(jì)之大小寫的作用

6. 消鋸齒7. 制造瑕疵

讀者自行體會(huì)

8. 模糊

如果你還在為如何讓內(nèi)容突出、消隱而一籌莫展，請(qǐng)?jiān)囋嚫鞣N不同的模糊方式。通過(guò)模糊前景、模糊背景，甚至整個(gè)設(shè)計(jì)，你可以動(dòng)態(tài)地增加你的項(xiàng)目的沖擊力。模糊的焦點(diǎn)，需要至少部分地相關(guān)聯(lián)。通過(guò)模糊一個(gè)元素，焦點(diǎn)被帶向另一內(nèi)容。

模糊在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

模糊應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中的重要性

9. 對(duì)齊

即使我們強(qiáng)調(diào)保證整潔和直線，你仍然有需要為你的設(shè)計(jì)添加一些額外趣味。

10. 消除累贅

這可能是最重要也最被忽視的設(shè)計(jì)技巧了。去掉不必要的部分，也是最難做的部分之一。

消除累贅在網(wǎng)頁(yè)設(shè)計(jì)中的作用

生活中也是如此，好事做得太好就不是一件好事了。上面的logo太小以至于難以辨認(rèn)，特色站點(diǎn)也難以同彼此區(qū)分開來(lái)。奇怪的是，頁(yè)面頂部的Twitter feed，相對(duì)于站點(diǎn)logo和導(dǎo)航來(lái)，又過(guò)分突出。