十個(gè)簡(jiǎn)單好用的設(shè)計(jì)技巧

本文格式為Word版，下載可任意編輯——十個(gè)簡(jiǎn)單好用的設(shè)計(jì)技巧十個(gè)簡(jiǎn)樸好用的設(shè)計(jì)技巧

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

簡(jiǎn)樸的效果和技巧是建立當(dāng)今設(shè)計(jì)的基石。比方說(shuō)，假設(shè)你都不知道如何正確選擇顏色和文字效果，璀璨的星光效果又能有什么用?

本著"少就是多'的理念，通過(guò)十個(gè)簡(jiǎn)樸好用的設(shè)計(jì)技巧，就足以大大提升你設(shè)計(jì)的專(zhuān)業(yè)性和感染力。根基先行。學(xué)會(huì)走之前要先學(xué)會(huì)爬，讓我們從最根基的簡(jiǎn)樸有效設(shè)計(jì)的概念開(kāi)頭。

1.增加比較

很悵然，添加額外的比較是最被忽略和棄用的技巧之一。

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

話說(shuō)回來(lái)，這個(gè)頁(yè)面上的"More'和"Go'按鈕與周邊的比較度太小，即使你刻意在找也很輕易被疏忽掉。

WordPress為頁(yè)面中最受接待的鏈接"Download下載'使用了比較色。這種紅色在冷灰色調(diào)的頁(yè)面中自己跳了出來(lái)。但這紅色在明度方面有所收斂，制止了影響頁(yè)面整體效果。

假設(shè)你對(duì)于該不該使用比較躊躇不決，就把這一抉擇過(guò)程當(dāng)做是打扮。你要做的不是讓人們大吼"看吶，比較色!'，你需要的是自然而然的吸引他們留神頁(yè)面中重要的內(nèi)容，高亮出已經(jīng)存在的重點(diǎn)。

2.漸變

技術(shù)的進(jìn)展為全體想使用漸變的人供給了各種創(chuàng)造漸變的工具。但漸變真的很好么?

MediaTemple網(wǎng)站的每一個(gè)頁(yè)面都使用了漸變，不過(guò)其漸變使用的節(jié)制和精妙才是設(shè)計(jì)告成的關(guān)鍵。logo，大標(biāo)題，按鈕和背景都有輕微的或者鏡像的漸變，以強(qiáng)調(diào)內(nèi)容。最繁雜的漸變用在了那些簡(jiǎn)樸的120像素寬的按鈕子頁(yè)面中的"ACTIVATE'和"LEARNMORE'上，由于它們是需要訪客留神的重點(diǎn)。

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

從黑色到灰色的水平線性漸變，位于頁(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)的色調(diào)組合一樣的道理，設(shè)計(jì)師也需要為每個(gè)工程選擇適合的漸變組合。

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

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

3.色調(diào)

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

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

全譜色調(diào)漸變完備地吸引了人們的留神。它保持了簡(jiǎn)樸性，有著灰色的合作，也不會(huì)讓眼睛感到不適。但在一項(xiàng)設(shè)計(jì)中采用四種或五種以上的顏色通常都顯得太過(guò)了。除非你分外確信你的設(shè)計(jì)需要那么多顏色，還是采用簡(jiǎn)樸的四色組合對(duì)比好。

當(dāng)你在設(shè)計(jì)中克制而明智地使用色調(diào)時(shí)，吸引訪客對(duì)重要工程的留神力就變得相當(dāng)輕易。在Interspire的"AboutUs關(guān)于我們'頁(yè)面中，訪客的留神力被急速吸引到頁(yè)面頂部LOGO那紅色的一點(diǎn)上，然后是標(biāo)題，然后是頁(yè)面右邊的LOGO照片。

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

4.字符間距

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

Krops的新作品集創(chuàng)造器，在處理文字的時(shí)候，特別吝嗇空間。該網(wǎng)站上大片面基于文字的圖片中的字符間距都很小，使表達(dá)內(nèi)容顯得更為干脆有力。

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