- 相關(guān)推薦
十個(gè)簡單好用的設(shè)計(jì)技巧
文中強(qiáng)調(diào)復(fù)雜的高級(jí)效果能為設(shè)計(jì)增色不少，但如果用得不對(duì)，只會(huì)影響用戶對(duì)重點(diǎn)內(nèi)容的關(guān)注。高級(jí)效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在，但即便如此，也還是需要一些更簡單的效果與其配合。
簡單的效果和技巧是建造當(dāng)今設(shè)計(jì)的基石。比方說，如果你都不知道如何正確選擇顏色和文字效果，燦爛的 星光效果又能有什么用?
本著“少就是多”的理念，通過十個(gè)簡單好用的設(shè)計(jì)技巧 ，就足以大大提升你設(shè)計(jì)的專業(yè)性和感染力�；A(chǔ)先行。 學(xué)會(huì)走之前要先學(xué)會(huì)爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計(jì)的概念開始。
1. 增加對(duì)比
很可惜，添加額外的對(duì)比是最被忽視和棄用的技巧之一。
Joost de Valk 采用了細(xì)的高對(duì)比度邊線，讓訪客能更容易區(qū)分頁面的不同區(qū)域。在上圖中放大了的部分，你可以看到，大多數(shù)時(shí)候這種對(duì)比只是一條1像素的高亮線挨著1像素的暗線。
話說回來，這個(gè)頁面上的“More”和“Go”按鈕與周圍的對(duì)比度太小，即使你刻意在找也很容易被忽略掉。
WordPress 為頁面中最受歡迎的鏈接 “Download(下載)” 使用了對(duì)比色。 這種紅色在冷灰色調(diào)的頁面中自己跳了出來。但這紅色在明度方面有所收斂，避免了影響頁面整體效果。
如果你對(duì)于該不該使用對(duì)比猶豫不決，就把這一決定過程當(dāng)做是化妝。你要做的不是讓人們大吼“看吶，對(duì)比色!”，你需要的是自然而然的吸引他們注意頁面中重要的內(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)。這會(huì)給訪客造成困擾，起伏變化的視覺流(visual flow)也削弱了可讀性。
使用漸變時(shí)，保證好的視覺流很重要：請(qǐng)保守而精致地使用漸變。最重要的一點(diǎn)，僅當(dāng)對(duì)整體設(shè)計(jì)有幫助時(shí)才使用漸變。
3. 色彩
合理使用顏色很有挑戰(zhàn)性。在挑選完美的色彩組合和為各種色調(diào)找到合適位置的過程中，時(shí)間嘩啦啦地就流走了。
Realmac Software 大膽地在404頁面采用了全色系漸變。這樣做有以下原因：首先，Realmac已經(jīng)將頁面背景設(shè)成了中性灰色，更重要的是，頁面其余部分沒有明顯的色彩的，除了藍(lán)色的文字鏈接和一些零星的毫無沖擊力的色彩。
全譜色彩漸變完美地吸引了人們的注意。它保持了簡單性，有著灰色的配合，也不會(huì)讓眼睛感到不適。但在一項(xiàng)設(shè)計(jì)中采用四種或五種以上的顏色通常都顯得太過了。除非你非常確信你的設(shè)計(jì)需要那么多顏色，還是采用簡單的四色組合比較好。
當(dāng)你在設(shè)計(jì)中克制而明智地使用色彩時(shí)，吸引訪客對(duì)重要項(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)，能對(duì)標(biāo)題、段落、logo等文字相關(guān)內(nèi)容造成巨大影響。其遠(yuǎn)不止每個(gè)字符之間的距離那么簡單。
Krop’s 的新作品集創(chuàng)建器，在處理文字的時(shí)候，十分吝嗇空間。該網(wǎng)站上大部分基于文字的圖片中的字符間距都很小，使敘述內(nèi)容顯得更為簡潔有力。
上圖表現(xiàn)了字符間距對(duì)你的設(shè)計(jì)可能產(chǎn)生的負(fù)面影響。小而無抗鋸齒的字體如果沒有適當(dāng)?shù)淖址g距，將更加難以閱讀。
如果你以前沒有在意，試試現(xiàn)在對(duì)你設(shè)計(jì)中的字符間距做一些調(diào)整，你會(huì)為調(diào)整后帶來的不同而震驚。推薦圖片中使用“Myriad Pro” 字體，HTML文字中使用“Trebuchet MS”字體進(jìn)行嘗試。
【十個(gè)簡單好用的設(shè)計(jì)技巧】相關(guān)文章：
十個(gè)網(wǎng)頁設(shè)計(jì)技巧07-26
隱藏的神技巧讓iPad更好用08-04
簡單易用的網(wǎng)頁設(shè)計(jì)技巧07-22
簡單實(shí)用的網(wǎng)頁設(shè)計(jì)技巧07-18
英語閱讀理解解題超好用技巧09-12
雅思詞匯記憶的二十個(gè)技巧11-11
二十個(gè)開車技巧與原則06-17
Word處理文字比較好用的技巧06-17
十個(gè)實(shí)用的PS隱藏技巧07-28