網(wǎng)站設(shè)計(jì)：十個(gè)簡單好用的設(shè)計(jì)技巧

【編者按】本文作者M(jìn)ark Praschan是一位具有將近十年經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)師，Web開發(fā)師，Web項(xiàng)目經(jīng)理人。 文中強(qiáng)調(diào)復(fù)雜的高級效果能為設(shè)計(jì)增色不少，但如果用得不對，只會影響用戶對重點(diǎn)內(nèi)容的關(guān)注。高級效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在，但即便如此，也還是需要一些更簡單的效果與其配合。

簡單的效果和技巧是建造當(dāng)今設(shè)計(jì)的基石。比方說，如果你都不知道如何正確選擇顏色和文字效果，燦爛的 星光效果又能有什么用?

本著“少就是多”的理念，通過十個(gè)簡單好用的設(shè)計(jì)技巧 ，就足以大大提升你設(shè)計(jì)的專業(yè)性和感染力?；A(chǔ)先行。 學(xué)會走之前要先學(xué)會爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計(jì)的概念開始。

1. 增加對比

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

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

話說回來，這個(gè)頁面上的“More”和“Go”按鈕與周圍的對比度太小，即使你刻意在找也很容易被忽略掉。

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

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

2. 漸變

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

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

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

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

頁眉處的綠色徑向漸變

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

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

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

Webinar廣告中明亮的線性漸變

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

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

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

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

3. 色彩

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

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

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

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

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

4. 字符間距

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

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

上圖表現(xiàn)了字符間距對你的設(shè)計(jì)可能產(chǎn)生的負(fù)面影響。小而無抗鋸齒的字體如果沒有適當(dāng)?shù)淖址g距，將更加難以閱讀。

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

5. 大小寫

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

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

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

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

6. 消鋸齒

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

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

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

7. 制造瑕疵

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

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

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

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

8. 模糊

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

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

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

9. 對齊

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

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

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

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

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

接下來，最重要的是…

10. 消除累贅

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

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

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

網(wǎng)頁標(biāo)題：網(wǎng)站設(shè)計(jì)：十個(gè)簡單好用的設(shè)計(jì)技巧
本文URL：http://muchs.cn/news/158488.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)