設(shè)計(jì)排版的6個(gè)基本步驟

2017-09-14 15533 0


By @jonathanzwhite

作為一個(gè)設(shè)計(jì)師的最重要技能之一就是你要學(xué)習(xí)如何去選擇排版。這是因?yàn)槲谋臼窃O(shè)計(jì)師與用戶溝通的主要方式之一。排版能成就你的設(shè)計(jì),也能毀滅你的設(shè)計(jì)。

一個(gè)美觀又復(fù)雜的排版。有些人將他們?nèi)康氖聵I(yè)奉獻(xiàn)在了排版上。值得慶幸的是,他們的工作是有據(jù)可查的,所以我們有大量的在線排版資源。

本文的目的是作為一個(gè)起點(diǎn)幫助你學(xué)習(xí)如何為你的設(shè)計(jì)選擇排版。它將激勵(lì)你探索超乎你所認(rèn)知的字體間的組合。

確定你的目標(biāo)

在你做任何事之前,你首先要確定你設(shè)計(jì)的目標(biāo)。你想要傳達(dá)的是什么信息?你的設(shè)計(jì)媒介是什么?

優(yōu)秀的設(shè)計(jì)使其排版與其目的具有一致性。這是因?yàn)榕虐媸窃O(shè)計(jì)中的情緒,音調(diào)和風(fēng)格的關(guān)鍵。

例如,如果你正在設(shè)計(jì)一張插圖豐富的賀卡,你需要選擇適合你插圖風(fēng)格的字體。與你設(shè)計(jì)的其余部分協(xié)調(diào)一致。


Choose a font that suits the style of your illustration

如果您正在設(shè)計(jì)一個(gè)圖像驅(qū)動(dòng)的登錄頁面,你需要選擇不會(huì)影響圖像的簡單字體。使用排版作為強(qiáng)調(diào)溝通信息意義的方式。


If images are the focus of your design, choose simple fonts so that the images stand out

確定你的受眾

明確你的設(shè)計(jì)目的后,確定你的受眾。這一步很重要,因?yàn)槟挲g和興趣愛好會(huì)影響你的字體選項(xiàng)。

闡明你的設(shè)計(jì)目的后,確定你的受眾。這一步驟至關(guān)重要,因?yàn)橛嘘P(guān)你的用戶信息(如年齡,興趣和文化成長)可能會(huì)影響你對排版做出的決定。

例如,一些字體更適合兒童使用。當(dāng)閱讀時(shí),兒童需要高度清晰并且較大的字體。Sassoon Primary是一個(gè)很好的例子。Sassoon小學(xué)由Rosemary Sassoon開發(fā),根據(jù)她的研究結(jié)果,發(fā)現(xiàn)了孩子們很容易閱讀哪些字母。


Sassoon Primary was developed Rosemary Sassoon

其他字體更適合老年人使用。高級友好的字體且使用可讀的尺寸,高對比度的顏色,并要避免腳本和裝飾的風(fēng)格。

選擇排版時(shí),請考慮你的受眾及其需求。簡單地說,設(shè)身處地從用戶的角度感受。

找尋靈感

看看其他設(shè)計(jì)師的工作。嘗試了解他們?nèi)绾巫龀雠虐娴臎Q定。

字體啟發(fā)

對于字體的靈感,CreativeBloq的The 100 Best Free Fonts是一個(gè)很好的文章,以便讓你有正確的心態(tài)去選擇排版。在文章中,CreativeBloq解釋了每種字體背后的動(dòng)機(jī)。

另外一個(gè)有用的資源是Awwwards的 100 Greatest Free Fonts Collection for 2015。

Invision還編制了giant repo of typography resources。在這你會(huì)發(fā)現(xiàn)更多的靈感來源。


Typ.io curates font inspiration from around the web

從網(wǎng)站的實(shí)際靈感來看,查看 Typ.io.該網(wǎng)站策劃的字體靈感來自于網(wǎng)絡(luò)。此外,它在每個(gè)靈感樣本的底部都提供了CSS的字體定義。

查看專用字體靈感網(wǎng)站,訪問你最喜歡的網(wǎng)站,并查看他們使用的是什么字體。WhatTheFont是一個(gè)很不錯(cuò)的工具。WhatTheFont是Chrome的一個(gè)擴(kuò)展,可以通過鼠標(biāo)懸停在網(wǎng)頁上來檢查網(wǎng)頁中的字體。

配對靈感

除了字體外,還要看字體的配對靈感。字體配對與字體本身一樣重要。良好的字體配對有助于建立視覺層次結(jié)構(gòu),提高設(shè)計(jì)的可讀性。


Font pairing is just as important as the fonts themselves

為了靈感,從 Typewolf開始。Typewolf的策劃來自不同網(wǎng)站的字體配對靈感。除此之外,他們還有字體建議和深入的排版指南。這是排版的寶庫。

FontPair還策劃字體配對靈感,專門針對 Google Fonts。你可以按排版的風(fēng)格組合排序,如無襯線和襯線,或襯線和襯線。

最后,設(shè)計(jì)師在線創(chuàng)建了大量的字體配對集合。例Typography: Google Fonts CombinationsTypography:Google Fonts Combinations Volume 2。只需在如Behance和Dribbble上搜索“字體配對”。

選擇字體

用研究和靈感來支撐。關(guān)于選擇排版,請牢記以下原則:可讀性,易讀性和目的性。


Before choosing a font, research into its intended purpose

選擇常規(guī)且易于閱讀的字體。避免高度修飾的字體,有利于簡單實(shí)用的字體。另外,需要注意字體的目的。例如,一些字體更適合作為標(biāo)題而不是正文。

為此,在選擇字體之前,需要研究其預(yù)期所達(dá)到目的。


Pair fonts that contrast one another

在字體配對方面,保持簡化,最多可以有三種不同的字體。另外,配對字體組織之間相互對比。這樣做將有助于引導(dǎo)讀者的視線,首先是標(biāo)題,然后到正文文本。你還可以使用不同的字體大小,顏色和權(quán)重創(chuàng)建視覺對比度。

對于網(wǎng)絡(luò)字體,你可以使用 Google Fonts, TypekitFont Squirrel。Google Fonts是免費(fèi)的,Typekit和Font Squirrel都有免費(fèi)和付費(fèi)的字體。

確定字體大小

確定字體組合后的下一步是確定字體的大小。 Adobe的排版主管Tim Brown提供了一個(gè)很好的工具是 Modular Scale。模塊化量表是一個(gè)系統(tǒng),以確定歷史上令人滿意的比例創(chuàng)建尺度,來確定排版的大小。


Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes

例如,你可以使用一個(gè)基于Golden Ratio的刻度。這將是你的前五個(gè)計(jì)算字體大小的選項(xiàng):

Golden Ratio(1:1.618)

1.000 x 1.618     = 1.618

1.618 x 1.618     = 2.618

2.618 x 1.618     = 4.236

4.236 x 1.618     = 6.854

6.854 x 1.618     = 11.089

你可能會(huì)遇到的一個(gè)問題是你的比例太大??匆幌禄贕olden Ratio的基礎(chǔ)上的后期間隔會(huì)發(fā)生什么。

Golden Ratio(1:1.618)

...

11.089 x 1.618    = 17.942

17.942 x 1.618    = 29.032

9.030 x 1.618    = 46.971

46.971 x 1.618    = 75.999

75.999 x 1.618    = 122.966

正如你所見,數(shù)字之間的間隔開始變得很大。對于大多數(shù)界面,你需要較小的間隔。值得慶幸的是,Modular Scale具有幾何,自然和音樂的各種比例。

Minor Second    15:16

Major Second    8:9

Minor Third     5:6

Major Third     4:5

...

所以不用使用黃金比例,你可以使用像Perfect Fourth那樣產(chǎn)生較小間隔的比率。

Perfect Fourth (3:4)

...

9.969  x 1.333     = 13.288

13.288 x 1.333     = 17.713

17.713 x 1.333     = 23.612

23.612 x 1.333     = 31.475

31.475 x 1.333     = 41.956

41.956 x 1.333     = 55.927

一旦你定了一個(gè)刻度,你可以從列表中挑選字體大小,并將它們舍入到最接近的十進(jìn)制。

Font Sizes

Header 1: 55px

Header 2: 42px

Header 3: 31px

Header 4: 24px

Header 5: 14px

Body: 17px

Caption: 14px

Modular Scale方法使用數(shù)學(xué)精度來生成字體大小。但是,這只是一個(gè)引導(dǎo)。使用此方法作為起點(diǎn),然后利用人眼調(diào)整大小。

創(chuàng)建一個(gè)排版風(fēng)格的引導(dǎo)

該過程的最后一步是為你的排版創(chuàng)建一個(gè)風(fēng)格指導(dǎo),以幫助你的設(shè)計(jì)排版標(biāo)準(zhǔn)化。


Shared styles in Sketch

在像Sketch這樣的程序中,你可以創(chuàng)建共享的文本樣式,以便快速插入已經(jīng)從引導(dǎo)中應(yīng)用的樣式的文本。

在此過程的這一步中,你可以調(diào)整完成文本屬性,如顏色,比重和大小。

顏色一詞:在選擇顏色時(shí),請考慮你的調(diào)色板。選擇與你的調(diào)色板協(xié)調(diào)一致的顏色。


Use styleguides to standardize type across your designs

在你的風(fēng)格指南中,請確保至少包含以下內(nèi)容:字體定義,字體大小,字體顏色和示例用法。

Google’s Material Design typography guidelines 是包含在風(fēng)格指南的一個(gè)很好的例子。其他幾個(gè)包括排版指南的例子Mailchimp, Apple Focus Labs

排版是實(shí)驗(yàn)。它既是科學(xué)又是藝術(shù)。

原文地址:https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe

原文作者:Jonathan Z. White(Designer & developer)


121
評論區(qū)(0)
正在加載評論...