如何改進(jìn)層次提升設(shè)計(jì)

2017/7/27 9:47:14來源：不詳

　　設(shè)計(jì)是需要層次感的，層次對(duì)于排版來說是一個(gè)很大的概念，即使你對(duì)這個(gè)概念并不熟悉，你也一定看到過很多不同的層次排版。比如報(bào)紙，就有很明確的層次—主標(biāo)題，副標(biāo)題和正文。

　　這是很典型的三級(jí)排列。現(xiàn)在很多打印品和線上設(shè)計(jì)仍在使用這種排版。20世紀(jì)早期到中期的報(bào)紙為我們提供了鮮明的例子：

　　盡管現(xiàn)在，我們的主標(biāo)題不再必須用6英寸的大字體來吸引讀者的注意力，上圖還是一個(gè)很好的參考——不同的層次可以更好地向讀者展示哪些是重要信息。

　　讀者隨意一瞥就能掌握到整體的排版，從而更快速地找到自己需要的信息。

　　增強(qiáng)可讀性和可用性是這種排版最重要的幾個(gè)好處之一。

　　如果不遵循一定的層次排量房噶，就會(huì)像下圖例子中的前兩個(gè)一樣——讓人抓不住重點(diǎn)。讀者會(huì)很難分清圖中的層次，找不到主次。

　　前三個(gè)例子可以通過換字體、改變字體大小、增加行間距、改變風(fēng)格、增大不同區(qū)域的距離等增加易讀性。

　　所以怎樣才能在設(shè)計(jì)中打造一個(gè)合理的層次呢?

　　經(jīng)過大家的多番實(shí)驗(yàn)證明，設(shè)計(jì)出三種層次是一個(gè)很好下手的方式。

　　主級(jí)：

　　一般來說，你的一級(jí)層次應(yīng)該是你的所有信息中最為重要的那些;應(yīng)該是你的設(shè)計(jì)中最顯眼的元素。

　　次級(jí)：

　　次級(jí)元素可以將你的設(shè)計(jì)整理成幾個(gè)不同的部分或是把相近的內(nèi)容組合。次級(jí)信息不能向主級(jí)一樣搶眼，但是可以明確地指引讀者找到他們需要的信息。

　　三級(jí)：

　　對(duì)于文字內(nèi)容較多的設(shè)計(jì)來說，三級(jí)文字，就是整個(gè)設(shè)計(jì)中最主要的部分。它可長(zhǎng)可短——整篇文章，或是幾句話，或是一個(gè)簡(jiǎn)介，不過最重要的就是一定要便于閱讀，因?yàn)橥ǔ碚f這一級(jí)的文字大小都較小。

　　下圖是一個(gè)很簡(jiǎn)單的產(chǎn)品宣傳，雖然簡(jiǎn)潔，但是還是分出了至少三個(gè)不同的層次。

　　1､產(chǎn)品的名字，是主級(jí)內(nèi)容;

　　2､價(jià)格是次級(jí)內(nèi)容;

　　3､產(chǎn)品介紹是三級(jí)內(nèi)容。

　　注意產(chǎn)品簡(jiǎn)介部分的文字雖然很小，但是行間距很大，所以不會(huì)不好辨認(rèn)。

　　Dribbble/Sam Thibault for Handsome

　　其實(shí)你有很多種排列組合的方法。許多方法可能只是一些小細(xì)節(jié)，但是正如美國一位有影響力的設(shè)計(jì)師Charles Eames所說：“細(xì)節(jié)不單單只是細(xì)節(jié)，細(xì)節(jié)成就設(shè)計(jì)”。讓我們來看看在層次方面我們可以做的一些細(xì)節(jié)嘗試吧：

　　如何安排排版層次?

　　01. 調(diào)整字體大小

　　改變字體大小是最簡(jiǎn)單的區(qū)分不同層次的方式。

　　對(duì)于三級(jí)層次排版來說，通常一級(jí)信息的文字是最大的，隨著信息的次要程度增加，文字越來越小，到三級(jí)達(dá)到最小的文字。

　　我們通常的閱讀習(xí)慣是從左至右，從上至下，所以上下層的結(jié)構(gòu)是最容易使讀者接受的。這是書籍、雜志、網(wǎng)頁等等非常常見的排版。

　　Bloomberg Politics

　　記住，改變層次都是為了使你最重要的信息更加突出。無論這個(gè)信息是一個(gè)名字、一篇文章或博客的標(biāo)題、廣告上的促銷折扣等等，如果這個(gè)部分你能使用最大的字體，那么它肯定就能最夠吸引別人的注意力。

　　比如說，下圖中的折后價(jià)錢$97就要比其他信息大的多。同時(shí)還使用了亮紅色來強(qiáng)調(diào)。

　　Dribbble/Flavius Nechita

　　02. 選擇一組差異較大的字體

　　再想一想我們前面看到過的報(bào)紙的例子。它是不是同時(shí)使用了粗體的無襯線字體和斜體襯線字體來做出對(duì)比?

　　雖然我們的字體對(duì)比不用非要那么強(qiáng)烈，但是對(duì)比絕對(duì)是成功的字體組合的關(guān)鍵。

　　多年來，襯線字體和無襯線字體的組合一直被很多設(shè)計(jì)師使用。對(duì)任何設(shè)計(jì)來說，這種經(jīng)典組合都是一個(gè)很好的開始。就算只在主級(jí)文字中使用與其他部分不同的字體，也會(huì)打造出非常好的效果。

　　Dribbble/Filip Slováček

　　一定要記住不要選擇太多字體，過多的字體只會(huì)讓你的設(shè)計(jì)顯得擁擠。對(duì)于絕大多數(shù)設(shè)計(jì)來說2-3種字體就足夠了。在選擇字體時(shí)同時(shí)注意一定要注意字體是否與內(nèi)容相匹配。

　　比如說，你肯定不能在重要信息處使用那種時(shí)髦的、難以辨認(rèn)的字體吧。或是在大段的文字內(nèi)容中使用讀起來會(huì)很累的連體字體。還有的字體調(diào)小了之后會(huì)很難辨認(rèn)。

　　03. 嘗試不同的字體風(fēng)格和寬度

　　許多字體都提供不同的風(fēng)格和粗細(xì)選擇。不同的風(fēng)格包括斜體、小型大小字母、縮小的或是擴(kuò)大的字體。

　　寬度指字體的不同的粗細(xì)。如果你的字體有細(xì)、中、粗、加粗，這就是不同的寬度。

　　這些元素幫助你在設(shè)計(jì)中擁有了更多的選擇。以下圖中的newsletter為例。所有的無襯線字體都使用了同樣的字體大小，但是使用了不同的寬度。加粗的

　　Newsletter使標(biāo)題更加醒目。

　　Dribbble/Whitney for Switch.co

　　下圖中的標(biāo)簽都使用了不同的字體風(fēng)格和寬度。

　　Dribbble/Hoefler & Co.

　　04. 添加一些顏色

　　就像風(fēng)格和寬度一樣，顏色也可以使你的文字內(nèi)容更加突出。由于顏色通常都有自己傳達(dá)的含義，所以在選擇時(shí)要確保正確的顏色要在合適的位置。

　　下圖中是一家秉承可持續(xù)發(fā)展的咖啡公司的活動(dòng)邀請(qǐng)函。這個(gè)設(shè)計(jì)就很好地使用了自然、樸實(shí)的顏色襯托公司的發(fā)展理念和活動(dòng)主題。

　　Dribbble/Krista Engler

　　同樣的道理，對(duì)比色的碰撞更能吸引注意力，下圖的名片使用了顯眼的黃藍(lán)配色來抓人眼球。

　　05. 注意間隔

　　設(shè)計(jì)時(shí)，文字的間隔——包括行間距和字間距——都可以使一個(gè)清晰、簡(jiǎn)潔易讀的設(shè)計(jì)變成擁擠、令人費(fèi)解的排版。

　　比如下面這個(gè)例子，充分的間距使下圖的設(shè)計(jì)清晰易讀，就算是小標(biāo)簽上的文字，也能看清楚。

　　如果設(shè)計(jì)保留了足夠的間距的話，我們很快就可以知道應(yīng)該如何閱讀，提取信息。相反地，如果沒有留下足夠的間距，我們就需要瞇起眼睛仔細(xì)地辨別這些文字?；蚴菈焊幌肟催@個(gè)設(shè)計(jì)了，因?yàn)樵O(shè)計(jì)得過于雜亂。

　　下面這個(gè)展示文稿，使用了足夠的間距、將文字分散放置、加入一些空白元素來避免了間距不夠的問題，同時(shí)，顏色的板塊和幾何圖形使各個(gè)板塊排列有序。

　　Dribbble/Rob Luke for Skookum Digital Works

　　06. 注意間隔

　　間隔不單單指將各個(gè)元素分離，同時(shí)還包括將相似的元素靠近。減少兩個(gè)相似的板塊間的距離也有利于讀者處理信息。

　　尤其是對(duì)于文字很多的設(shè)計(jì)來說，將同類文字靠近是保持總體排版平衡的關(guān)鍵。

　　Dribbble/Elysse Ricci

　　07. 玩轉(zhuǎn)各種方向

　　有的時(shí)候平行的文字可能并不能達(dá)到你想要的效果，這個(gè)時(shí)候不如試一試將文字旋轉(zhuǎn)，或是傾斜和扭曲，這些都可以使這一部分的文字內(nèi)容與其他的文字分隔開，也會(huì)更吸引注意力。

　　Dribbble/Bethany Heck

　　在打造層次的時(shí)候，你八成會(huì)使用到上面提到的所有方法或是其中的大部分方法，就像下面這個(gè)婚前派對(duì)邀請(qǐng)函一樣。

　　這個(gè)設(shè)計(jì)使用了不同的字體大小、不同的字體、不同的顏色、增加間距、減少間距和文字變形來打造出一個(gè)完整的分層設(shè)計(jì)。

　　合理地使用這些方法可以使你的設(shè)計(jì)更加吸引人，同時(shí)也對(duì)讀者更加的友好。所以下次你再做設(shè)計(jì)的時(shí)候，試一試上面提到的這些方法吧。