20條不該打破的設(shè)計規(guī)則

 

在設(shè)計中，我們常被允許、鼓勵打破設(shè)計規(guī)則，這時你至少需要知道這些規(guī)則，才能正確的打破它們。

 

本文列出了一些基本的規(guī)則和技巧，從字體、排版到色彩、樣式，涵蓋了大部分設(shè)計中常見的錯誤，幫助你在設(shè)計中避免它們。

 

1. 不要忘了字間距。

設(shè)計中糟糕的字間距是常犯的錯誤，初期定好恰當(dāng)?shù)淖珠g距很重要。

 

字間距是指兩個字母之間的距離，這也許看起來不起眼，但是好的間距會使你的設(shè)計更加美觀、有序。

 

2. 不要為了視覺的美感而忽略文字的可讀性/清晰度。

設(shè)計的首要任務(wù)是與用戶進行信息交流，所以把文字的可讀性和清晰度放在首位是有道理的。

 

是什么妨礙了文字的可讀性和清晰度呢？我們列舉了如下情況：

 

文字色與背景色對比不明顯：

需通過提高兩者間的對比度來解決。

 

濫用大寫字母：

大寫字母在帶給用戶“大聲呼喊”般震撼的同時，也會影響眼睛對字母的辨識度。這是因為當(dāng)文字都大寫時，每個字母都是相同高度，并且都是相似的方形，而小寫字母的高低不齊更易被辨認。

 

文字過小：

有時為了讓設(shè)計看起來精致，我們會縮小字號，但請換位思考一下，用戶在閱讀這些小字時是否會覺得困難？

有一個方法是找其他人來實際體驗以發(fā)現(xiàn)問題，因為我們可以很容易辨認自己設(shè)計中的文字，但其他人不會。

 

千萬不要為了追求美觀，而犧牲與用戶的順暢交流，請謹(jǐn)慎對待你的排版！

 

3. 文本寬度保持在適合的范圍內(nèi)。

你是否很吃力的閱讀過一篇文章？或在閱讀過程中一次次迷失在文字的換行中？其實這些都是因為文本寬度設(shè)置不當(dāng)。

 

文本寬度的黃金數(shù)字是：每行不少于6個單詞，且一行大約30～40個字母（包括空格）。過少會導(dǎo)致頻繁換行，過多則會讓句子變的冗長而難以閱讀。

 

4. 讓文本顯得有層次。

和許多自然法則一樣，一個完善而清晰的結(jié)構(gòu)層次會很有效。

 

在設(shè)計中，視覺元素的組織關(guān)系到文字層次，可以凸顯重點信息。因此，重要的部分需要用字號、顏色、字體等方式加以突出，無關(guān)緊要的部分就讓他們普通一些。

 

元素的層級結(jié)構(gòu)在排版中最為明顯，讓我們看一下上圖的實例。左圖邀請函中所有的文字都是相同的字體、字號和粗細，在你快速瀏覽時，重要信息很容易被 忽略。右邊的例子則相反，使用了不同字體以拉開層次，并將文字中的重要信息，在顏色、字號和粗細上加以強調(diào)，使信息更容易被識別。

 

請有原因的強調(diào)你的文字。

 

5. 保持單詞間適當(dāng)?shù)木嚯x。

作為一名設(shè)計師，處理文字是一項必要而艱巨的任務(wù)。要考慮很多規(guī)則和要點，其中一條格外重要：單詞間距和字母間距。這里有兩個主要的參考標(biāo)準(zhǔn)：Tracking 和 Leading。

 

 

Leading: 行間距。

Kerning: 兩個特定字母間的距離。

Tracking: 指定區(qū)域內(nèi)，統(tǒng)一的字母間距。

 

Leading:

指每行文字之間的垂直距離。許多因素會影響到行間距，例如字體，文字?jǐn)?shù)量等。有一個經(jīng)驗：當(dāng)每行文字都較長時，通常適合更大的行間距。

 

Kerning & Tracking:

Kerning 值一般是手動調(diào)整的，當(dāng)你遇到大量文本且設(shè)計交付時間很緊的情況，沒有時間去手動調(diào)整每個字母間距時，Tracking 就派上用場了。Tracking 工具會統(tǒng)一調(diào)整整段文字的字母間距，可以很好的規(guī)避排版中的過大空隙或不協(xié)調(diào)行寬。

 

這里有一個技巧：較大的 Tracking 值對應(yīng)較長得句子，較小的 Tracking 值對應(yīng)較短的句子，這樣可以獲得最佳的可讀性。

 

另一個技巧是：文字較少的段落，最好手動調(diào)整字母間距。參照小寫字母”i”來調(diào)整，見本節(jié)圖1。

 

當(dāng)然，這些都取決于實際的字體和情況。

 

 

6. 使用正確的對齊方式。

不論你是設(shè)計行業(yè)的老手還是新人，一定都接觸過對齊工具。

對齊方式有四種：左對齊、右對齊、居中對齊和兩端對齊，讓我們快速瀏覽一下它們的使用規(guī)則。

 

左對齊：

最常見的一種對齊方式（你正在閱讀的這篇文章也是左對齊的），之所以常見是有道理的，因為它使文本更易于閱讀，左側(cè)邊界整齊而美觀。

在排版難以確定時，用左對齊是最保險的方法。

 

右對齊：

修飾性的文字或某些印刷品中常會用到右對齊，不過它并不適用于大段的文字，因為他違背了人們從左到右的閱讀習(xí)慣，參差不齊的左側(cè)邊緣會使閱讀更加困難。

 

居中對齊：

很多領(lǐng)域都會運用到居中對齊，如海報、邀請函、logo設(shè)計等，它易于保持文字與版面間的均衡，并有助于美觀。它同樣不適用于大段文字，因為邊緣不整齊的文本會造成閱讀困難。

 

兩端對齊：

它有時具有欺騙性，整齊的左右邊界，不正是你想要的完美排版嗎？在某些情況下，兩端對齊是一個不錯得方法，小說的排版就經(jīng)常用到它。但是它也存在問題，如果一行僅有幾個單詞，它會把文字從左到右生硬得拉開，留下不協(xié)調(diào)的單詞和字母間距。

 

7. 總是使用網(wǎng)格。

 

掌握幾個基本的網(wǎng)格也許是每個初出茅廬的設(shè)計師的必備技能之一。一個好的網(wǎng)格工具就像仙女魔法棒，能使平庸的設(shè)計變得井然有序。

 

網(wǎng)格有很多形狀和尺寸，你可以靈活的創(chuàng)建它們，使之與你的設(shè)計相配。網(wǎng)格幫助設(shè)計師在頁面中對齊相關(guān)的元素，創(chuàng)造一個更整潔而富有邏輯的設(shè)計。請見上圖，一個包含兩欄、三欄和四欄的網(wǎng)格樣式，常常會在許多方面幫助你更合理的布局圖像和文字。

 

網(wǎng)格列數(shù)越少，設(shè)計將越統(tǒng)一。你的元素會有強烈的對齊感，但這樣你也失去了更多列數(shù)的網(wǎng)格所帶來的靈活性。然而，在實際設(shè)計中，網(wǎng)格的運用方式往往不是單一的。請看上圖右側(cè)的網(wǎng)格，它有四欄，有些元素會延伸出去以貫穿兩欄，而其他元素依舊保持在一欄中，這樣就可以允許一些不同尺寸的文本和圖片添加到設(shè)計中，在網(wǎng)格的框架下使設(shè)計的版式更加豐富。

 

多嘗試不同的網(wǎng)格并找到適合你的。

 

8. 始終為你的觀眾設(shè)計。

大多數(shù)設(shè)計師會從一個想法著手，常常在設(shè)計中有意無意地帶上個人喜好。要仔細考慮一個問題“我在為誰設(shè)計？”每一個設(shè)計都有它的觀眾群，那些有可能看到設(shè)計并接收信息的人群是誰？認真的考慮他們是十分有必要的。

 

上圖是一個兒童音樂會的宣傳設(shè)計。它的觀眾群是孩子和他們的家長。

左側(cè)案例：

用了簡潔的版式配以黑白對比強烈的文字，這也許能清晰的傳達音樂會的信息，但卻不吻合它所面向的觀眾。

右側(cè)案例：

明顯更加吻合兒童音樂會這一主題。與音樂相關(guān)的圖形配以明亮的色彩，會吸引更多孩子的目光，符合觀眾人群的口味和接收環(huán)境。

 

請記住，也許你的設(shè)計看起來不錯，但不一定是能與目標(biāo)觀眾產(chǎn)生交流的最好方案。當(dāng)遇到疑問時，不妨回顧一下最初設(shè)計的訴求。

 

9. 避免孤行(widow)和寡字(orphan)。

在排版中，不協(xié)調(diào)的孤行和寡字肯定是不可避免的，但是發(fā)現(xiàn)并處理好它們?nèi)匀皇侵匾囊徊?。這可以讓你的設(shè)計擺脫業(yè)余感，變得更加專業(yè)精致。

孤行：是指在出現(xiàn)在頁面頂端，新開一列的單行文字。

寡字：與孤行類似，通常是被遺棄在單獨一行的某個單詞。

有幾個方法可以解決孤行寡字的問題：

如果條件允許，你可以手動調(diào)整合適的文本寬度來解決這兩個問題。

另一個訣竅就是像圖中示范的那樣，在寡字的前面一個單詞按軟回車（shift＋enter鍵），把它帶到寡字所在的一行。

還有一個圖中示范的技巧，就是調(diào)整你的文本框或行寬，不斷調(diào)整直到?jīng)]有孤行寡字出現(xiàn)為止。

 

10. 使用有邏輯的色彩搭配。

色板對設(shè)計師來說是強大的工具，設(shè)置一個經(jīng)過深思熟慮、協(xié)調(diào)統(tǒng)一的色彩搭配是設(shè)計中重要的一步。

當(dāng)編輯一個色板時，建議參考色彩理論和一些配色案例，色彩理論中指出色調(diào)會對用戶產(chǎn)生一定程度的影響。比如橙色可以激發(fā)出食欲，這也是為什么快餐設(shè)計中常常會用到橙色。

 

請看圖中所給的兩個Logo的例子，flowers是一個專營浪漫花束的花店Logo，PAINTBALL是致力于給顧客帶來精彩時光的彩彈游戲中心的Logo。左圖的這兩個標(biāo)志的配色明顯不大起作用，而右圖就合適多了。

 

設(shè)計時可以參考一些針對色彩的規(guī)范和慣例，反復(fù)嘗試不同的配色方案有助于獲得更具沖擊力的設(shè)計，但同時要保證你使用的顏色不能太讓人分心，或使你的信息含糊不清。

 

11. 統(tǒng)一的字符樣式。

 

和色板一樣，字體樣式同樣需要謹(jǐn)慎選擇。字體有著一種與之相對應(yīng)的“情緒”或“情感”所以你不太可能在律師事務(wù)所的Logo上使用Curlz MT字體（見下圖）。

 

許多設(shè)計師建議，使用的字體不要超過3種，避免設(shè)計看起來太繁復(fù)。嘗試選擇互補字體，這樣你的信息可以被的接收并更具邏輯性。

互補字體：

很多字體都具有鮮明的情緒、?格特征（莊重,隨性,有趣,優(yōu)雅等）。你希望所選的字體情緒是吻合你設(shè)計目的的。舉個例?，一種圓潤像?球般形態(tài)的字體也許更適合孩子的??派對邀請函，但卻不適用于你的商務(wù)宣傳冊。

?人的性格來比喻字體，“內(nèi)斂”和“外向”結(jié)合起來會是很好的平衡。如果你有?個獨具風(fēng)格的字體（通常指用于展?或修飾類的字體）就用一些中規(guī)中矩或保守的字體與之搭配,形成一種平衡的設(shè)計。

 

12. 正文永遠不要使用過于花哨的字體。

在正文中用花哨的字體就如同穿了條舞裙去菜市場，時間場合都不相符，而且也會使他人感到困惑，不是個明智之舉。

 

花哨的字體適合小區(qū)域的文字，而非正文。它們經(jīng)常比那些正文字體更加華麗，也正因如此，它們經(jīng)常出現(xiàn)在那些短標(biāo)題或副標(biāo)題上。

 

請看圖中使用的富有裝飾性的Yellowtail字體。這個字體的設(shè)計是為了體現(xiàn)手寫的美感，而不是為了字形的清晰可讀。如果用它做正文，讀一段時 間就會感到困難和厭倦。若是用專門為正文設(shè)計的字體就好得多，比如Georgia。當(dāng)然花哨的字體有它專門的用途，但絕不是在大面積的正文上。

12. 永遠不要拉伸字體。

不要拉伸字體，很多情況下，字體的形狀和比例都是精心設(shè)計好的，所以拉伸而導(dǎo)致的變形將失去字體原有的特色。

 

通常，人們?nèi)ダ熳煮w是因為他們想要文字看起來更高或者更寬一點。這里有一個既不用拉伸字體又可以滿足這種需求的方法?？梢灾苯邮褂酶叩淖煮w（推薦 Bebas Neue字體）或矮的字體（像Silverfake字體），以及這兩者之間的字體，這都完全取決于你。有些可能會花點錢，但是找到一個完美的字體是非常寶 貴的。

（未完待續(xù)）