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

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

　　話(huà)說(shuō)回來(lái)，這個(gè)頁(yè)面上的“More”和“Go”按鈕與周?chē)�的對比度太小，即使你刻意在找也很容易被忽略掉�?/p>

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

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

　　2. 漸變

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

　　Media Temple 網(wǎng)站的每一個(gè)頁(yè)面都使用了漸變，不過(guò)其漸變使用的節制和精妙才是設計成功的關(guān)鍵。logo，大標題，按鈕和背景都有細微的或者鏡像的漸變，以強調內容。最復雜的漸變用在了那些簡(jiǎn)單的120像素寬的按鈕(子頁(yè)面中的“ACTIVATE”和“LEARN MORE”)上，因為它們是需要訪(fǎng)客注意的重點(diǎn)。

　　Commission Junction的漸變運用遠沒(méi)有Media Temple的細致，而且采用了過(guò)于豐富的漸變類(lèi)型：

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

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

　　登陸框背景的“CJ” 標志上方模糊的斜向漸變

　　輸入框背景中淡淡的垂直線(xiàn)性漸變

　　導航條背景的垂直漸變

　　Webinar廣告中明亮的線(xiàn)性漸變

　　另一個(gè)垂直線(xiàn)性減弱，用在了大標題處

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

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

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

　　3. 色彩

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

　　Realmac Software 大膽地在404頁(yè)面采用了全色系漸變。這樣做有以下原因：首先，Realmac已經(jīng)將頁(yè)面背景設成了中性灰色，更重要的是，頁(yè)面其余部分沒(méi)有明顯的色彩的，除了藍色的文字鏈接和一些零星的毫無(wú)沖擊力的色彩。

　　全譜色彩漸變完美地吸引了人們的注意。它保持了簡(jiǎn)單性，有著(zhù)灰色的配合，也不會(huì )讓眼睛感到不適。但在一項設計中采用四種或五種以上的顏色通常都顯得太過(guò)了。除非你非常確信你的設計需要那么多顏色，還是采用簡(jiǎn)單的四色組合比較好。

　　當你在設計中克制而明智地使用色彩時(shí)，吸引訪(fǎng)客對重要項目的注意力就變得相當容易。在Interspire的 “About Us(關(guān)于我們)” 頁(yè)面中，訪(fǎng)客的注意力被迅速吸引到頁(yè)面頂部LOGO那紅色的一點(diǎn)上，然后是標題，然后是頁(yè)面右邊的LOGO照片。

　　在字體上花點(diǎn)功夫。字體的藝術(shù)博大精深，遠遠超出我們大部分人的想象。字體中超出x高度部分(ascenders )和邊位(side bearings)處的創(chuàng )作空間巨大，你可以在此處添加一些有趣的細節。不過(guò)還是運用接下來(lái)的一些技巧更重要。

　　4. 字符間距

　　字符間距，或者稱(chēng)為字距調整 (kerning)，能對標題、段落、logo等文字相關(guān)內容造成巨大影響。其遠不止每個(gè)字符之間的距離那么簡(jiǎn)單。

　　Krop’s 的新作品集創(chuàng )建器，在處理文字的時(shí)候，十分吝嗇空間。該網(wǎng)站上大部分基于文字的圖片中的字符間距都很小，使敘述內容顯得更為簡(jiǎn)潔有力。

　　上圖表現了字符間距對你的設計可能產(chǎn)生的負面影響。小而無(wú)抗鋸齒的字體如果沒(méi)有適當的字符間距，將更加難以閱讀。

　　如果你以前沒(méi)有在意，試試現在對你設計中的字符間距做一些調整，你會(huì )為調整后帶來(lái)的不同而震驚。推薦圖片中使用“Myriad Pro” 字體，HTML文字中使用“Trebuchet MS”字體進(jìn)行嘗試。

　　5. 大小寫(xiě)

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

　　MSNBC’s 對大小寫(xiě)的使用很值得參考。logo是全小寫(xiě)的，頁(yè)面其他部分的字體大小寫(xiě)更有著(zhù)微妙的變化。頁(yè)面上方的大橫幅通告，一般用大寫(xiě)字母寫(xiě)著(zhù)“WATCH LIVE(觀(guān)看直播)”或者 “BREAKING NEWS(最新消息)” 。這些通告都是非常重要的內容，這種方式很好地吸引了訪(fǎng)客的注意。

　　另外，采用純大寫(xiě)的按鈕，讓他們的小按鈕足夠清楚易讀。 在這種5像素高的應用里，小寫(xiě)字母，如a,m, x，可能只有2到3像素高，非常難以辨認。

　　繼續關(guān)注新聞?wù)军c(diǎn)， CNN 在字體大小寫(xiě)上缺少變化來(lái)平衡頁(yè)面。導航條是全部大寫(xiě)的，但頁(yè)面中的其余部分則很傳統地幾乎全部采用了首字母大寫(xiě)。

　　6. 消鋸齒

　　雖然技術(shù)上比較復雜，消鋸齒仍可以歸納為“使邊緣平滑”，在各種設計中都有運用到。在Web設計的世界里，是否消鋸齒部分決定于文字是要出現在圖片還是HTML文字中。另有一個(gè)讓事情變得復雜的情況，部分瀏覽器或操作系統會(huì )自動(dòng)在一定程度上消鋸齒，但總的來(lái)說(shuō)，HTML文字是不具有抗鋸齒功能的。

　　Stockxpert 非常聰明地在廣告頁(yè)面中部分使用消鋸齒，而部分文字不消鋸齒。大部分文字都有平滑邊緣，但頁(yè)面頂部和底部的小字則保留了鋸齒。同上面說(shuō)的MSNBC按鈕一個(gè)道理，5像素高的文字需要有盡量銳利的邊緣來(lái)保持可讀性。這種情況中的模糊或平滑邊緣會(huì )讓眼睛很累，最終放棄閱讀。

　　混搭是王道! 完美的東西一般都顯得很假或者乏味。樹(shù)木的枝葉并不完全對稱(chēng);任何形式的照明都不會(huì )產(chǎn)生平衡的影子;照相機鏡頭有時(shí)會(huì )讓部分景物模糊，以及產(chǎn)生鏡頭光暈…… 有些設計需要干凈的人造風(fēng)格，另一些則需要混搭一點(diǎn)~

　　7. 制造瑕疵

　　任何人都能在使用一臺電腦十分鐘后告訴你它并不完美。但在設計過(guò)程中，電腦可以為你創(chuàng )造完美的結果。在你最喜歡的設計工具中使用直線(xiàn)工具時(shí)，只需要采用默認設置，你就能畫(huà)出特定兩點(diǎn)間的完美直線(xiàn)。

　　這個(gè)懷舊Ace牌的教程提供了很多步驟來(lái)讓這張牌看起來(lái)不完美。不得不說(shuō)，這一過(guò)程并不簡(jiǎn)單。不過(guò)其中的概念十分簡(jiǎn)單——讓事物顯得老舊，創(chuàng )造不完美，給你的作品以獨特的肌理。

　　這張蝴蝶照片看起來(lái)就像是20世紀中期拍攝的，另一個(gè)不完美的例子。其實(shí)它是用數碼相機拍攝的，使用了一些濾鏡和顏色調整，賦予其懷舊效果。

　　為設計創(chuàng )造藝術(shù)風(fēng)格化的瑕疵比你想象中要容易。你只需要將素材變成灰色或褐色，再添加一點(diǎn)細節……

　　8. 模糊

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

　　Ios V2 壁紙使用簡(jiǎn)單的模糊創(chuàng )造平靜的、生機勃勃的感官。一些明銳的線(xiàn)條用來(lái)形成圖像的焦點(diǎn)，而模糊的背景對于壁紙的整體效果至關(guān)重要。

　　模糊亦可形成深度和層次覆蓋的感覺(jué)。 Windows Vista的Aero效果將窗口后面的內容模糊掉，形成很酷的漫反射玻璃效果。使用高斯模糊 即可創(chuàng )造類(lèi)似效果。

　　9. 對齊

　　即使我們強調保證整潔和直線(xiàn)，你仍然有需要為你的設計添加一些額外趣味。

　　這個(gè)示例標志中的“l(fā)ogo”幾個(gè)字母被提到了右上角。更改設計元素的對齊方式可以讓它們更容易被記住，更容易被人們討論起，結果是讓整個(gè)設計更高效。

　　這一技巧并不只是用于文字。部分設計師在思考一項設計概念時(shí)會(huì )利用模板化內容或者個(gè)人工作習慣。這可以加快給客戶(hù)回應的速度，但也經(jīng)常會(huì )限制了創(chuàng )意——尤其是在內容對齊方面。

　　Icon Designer通過(guò)旋轉某些元素讓自己與眾不同。這一頁(yè)面很容易成為稀松平常的無(wú)聊之作，但簡(jiǎn)單的幾個(gè)旋轉讓它趣味十足。

　　現在的網(wǎng)頁(yè)大部分是700到900像素寬，一般在瀏覽器中居中，并且是方盒子式的構造。大部分案例中，這樣做使內容安排有序，但也有一些站點(diǎn)，需要設計師考慮跳出盒子，創(chuàng )造特色。

　　接下來(lái)，最重要的是…

　　10. 消除累贅

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

　　通過(guò)去掉所有不必要的部分， CSS Remix只留下了必要部分，可以同時(shí)展示7個(gè)大廣告 (128 * 96 像素),，53個(gè)favico廣告 (16 *16 像素) ，以及一大群網(wǎng)站(56個(gè))——全部在頁(yè)面上方1000像素內!甚至網(wǎng)站的logo都被削減到了53乘 7 像素。

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