成也排版敗也排版：一個(gè)選擇的過(guò)程

作為設(shè)計(jì)師有一個(gè)重要的技能：如何選擇文字。這是因?yàn)槲淖质窃O(shè)計(jì)師和客戶溝通的主要方式之一。那么排版就是決定你設(shè)計(jì)好壞的重要因素。

大家覺(jué)得排版即美麗又復(fù)雜。幸運(yùn)的是，很多人把精力都投入到了排版上并且他們有很多作品，所以我們可以在線上找到很多資源。

這篇文章的主旨是幫助你如何選擇對(duì)你設(shè)計(jì)有用的文字排版。并鼓勵(lì)你探索字體與字體之間的組合。

明確你的目的

在你做任何事情之前，首先要確定你的設(shè)計(jì)目的。你想傳達(dá)的是什么信息？以及你要用什么方式來(lái)實(shí)現(xiàn)？

良好設(shè)計(jì)的排版與其設(shè)計(jì)目的應(yīng)該是一致的。這是因?yàn)榕虐媸窃O(shè)計(jì)風(fēng)格和感情定位的關(guān)鍵。

例如：如果你正在設(shè)計(jì)一張插圖風(fēng)格的賀卡，請(qǐng)選擇符合插圖風(fēng)格的字體。 與你設(shè)計(jì)的其余部分協(xié)調(diào)一致。

選擇一個(gè)適合您的插圖風(fēng)格的字體

如果你正在設(shè)計(jì)一個(gè)登錄頁(yè)，請(qǐng)選擇不會(huì)影響你圖像并能夠強(qiáng)調(diào)信息的簡(jiǎn)單的字體。

如果圖像是設(shè)計(jì)的焦點(diǎn)，請(qǐng)選擇簡(jiǎn)單的字體，使圖像脫穎而出

明確定位你的用戶

確定你設(shè)計(jì)的目的后，要明確你的用戶群體，這一步很重要，因?yàn)槟挲g，興趣和文化認(rèn)知會(huì)影響你對(duì)字體的選擇。

例如，一些字體更適合兒童。當(dāng)兒童開(kāi)始學(xué)習(xí)閱讀時(shí)，他們需要的是字型大方并且高度清晰的字體。一個(gè)好的例子就是Sassoon Primary 字體，Rosemary Sassoon在她 “對(duì)于孩子們什么樣的字母最容易閱讀” 的研究基礎(chǔ)上發(fā)明了這款字體。

Rosemary Sassoon 是Sassoon Primary字體的發(fā)明者

其他的字體更適合中老年人。友好的字體使用方便閱讀的尺寸大小，高對(duì)比的顏色，并避免了裝飾樣式。

選擇字體時(shí)，請(qǐng)考慮你用戶及其需求。簡(jiǎn)單的說(shuō)，要有同理心。

尋找靈感

觀看其他設(shè)計(jì)師的作品時(shí)，試著理解為什么他們選擇這種字體。

字體啟發(fā)

對(duì)于字體的啟發(fā)，CreativeBloq的《The 100 Best Free Fonts》是一篇可以告訴你如何正確選擇字體的文章。這篇文章解釋了選擇每個(gè)字體后面的動(dòng)機(jī)。

另一篇Awwwards的《100 Greatest Free Fonts Collection for 2015 》也非常有用。

Invison編制了一套《 giant repo of typography resources》。你可以在那里找到很多資源。

Typ.io從網(wǎng)絡(luò)上整理字體靈感

實(shí)際網(wǎng)站的可以查看Typ.io. 該網(wǎng)站搜集來(lái)自網(wǎng)絡(luò)的字體靈感。此外，它還提供了每個(gè)靈感樣本底部的CSS字體定義。

另外，查看你喜歡的網(wǎng)站，并探索他們使用什么字體。有一個(gè)很好用的工具“WhatTheFont”。這個(gè)工具是一個(gè)Chrome擴(kuò)展程序，可以通過(guò)將鼠標(biāo)懸停在網(wǎng)頁(yè)上檢查網(wǎng)頁(yè)字體。

字體搭配

除了選擇合適的字體之外，還要選擇合適的字體進(jìn)行搭配。字體搭配與字體本身一樣重要。良好的字體搭配有助于建立視覺(jué)層次結(jié)構(gòu)，提高設(shè)計(jì)的可讀性。

字體搭配與字體本身一樣重要

對(duì)于字體的搭配，可以從Typewolf開(kāi)始。Typewolf的靈感來(lái)自不同網(wǎng)站的字體組合。除此之外，他們還有字體推薦和排版指南。這是屬于排版設(shè)計(jì)師的寶庫(kù)。

FontPair（http://fontpair.co/）是字體搭配網(wǎng)站，專門(mén)針對(duì)Google字體。你可以根據(jù)類型風(fēng)格排序，比如無(wú)襯線和襯線，或者襯線和襯線。

最后，設(shè)計(jì)師在線創(chuàng)建了大量的字體搭配集合。例如 Typography: Google Fonts Combinations 和Typography: Google Fonts Combinations – Volume 2 ；只需在Behance和Dribbble等網(wǎng)站上搜索“font pairing”。

選擇你的字體

通過(guò)調(diào)研你已經(jīng)準(zhǔn)備好選擇你的字體了。關(guān)于選擇類型，請(qǐng)牢記以下原則：可讀性，易讀性和目的。

在選擇字體之前，研究其預(yù)期目的

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

因此，在選擇字體之前，研究其預(yù)期目的。

配對(duì)字體相互對(duì)照

在字體搭配方面，保持簡(jiǎn)單，最多可以有三種不同的字體。這樣做將有助于引導(dǎo)讀者的眼睛，首先是標(biāo)題，然后到內(nèi)容文本。 您還可以使用不同的字體大小，顏色和重量創(chuàng)建視覺(jué)對(duì)比度。

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

確定字體大小

設(shè)置完字體的組合之后就該確定字體大小了。Adobe的排版負(fù)責(zé)人Tim Brown提供了一個(gè)很好的工具。

Modular Scale是一種通過(guò)歷史上令人滿意的比例來(lái)為文字大小創(chuàng)建尺度的系統(tǒng)。

例如，你可以使用基于黃金分割的比例。 這將是你計(jì)算出的前五個(gè)字體大小的選項(xiàng)：

GoldenRatio (1:1.618)

1.000x 1.618 = 1.618

1.618x 1.618 = 2.618

2.618x 1.618 = 4.236

4.236x 1.618 = 6.854

6.854x 1.618 = 11.089

有一個(gè)問(wèn)題你可能會(huì)遇到的是，需要較大的比例。那看一下基于黃金比例的計(jì)算繼續(xù)下去會(huì)發(fā)生什么變化。

GoldenRatio (1:1.618)

…

11.089x 1.618 = 17.942

17.942x 1.618 = 29.03

29.030x 1.618 = 46.971

46.971x 1.618 = 75.999

75.999x 1.618 = 122.966

如你所見(jiàn)，數(shù)字之間的間隔開(kāi)始變大。但是對(duì)于大多數(shù)界面，你需要較小的間隔。幸運(yùn)的是，Modular Scale 具有基于幾何，自然和音樂(lè)的各種比例。

MinorSecond 15:16

MajorSecond 8:9

MinorThird 5:6

Major Third 4:5

…

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

PerfectFourth (3:4)

…

9.969x 1.333 = 13.288

13.288x 1.333 = 17.713

17.713x 1.333 = 23.612

23.612x 1.333 = 31.475

31.475x 1.333 = 41.956

41.956x 1.333 = 55.927

一旦你定了一個(gè)尺度，你可以從列表中挑選字體大小，并將它們四舍五入到最接近的大小。

FontSizes

Header1: 55px

Header2: 42px

Header3: 31px

Header4: 24px

Header5: 14px

Body:17px

Caption:14px

Modular Scale是使用精確的數(shù)學(xué)來(lái)生成字體大小。但是，這只是一個(gè)參考。我們用這種方法作為參考，然后用自己的雙眼來(lái)調(diào)整字體大小。

創(chuàng)建排版風(fēng)格指南

這個(gè)過(guò)程最后一步是為你的排版創(chuàng)建一個(gè)樣式指南，來(lái)幫助標(biāo)準(zhǔn)化你的設(shè)計(jì)中的文字。

Sketch中的共享樣式

在像Sketch這樣的程序中，你可以創(chuàng)建共享的文本樣式，以便快速插入已經(jīng)從準(zhǔn)則中應(yīng)用的樣式文本。

在這一步中，你可以調(diào)整和完成文本屬性，如顏色，寬度和大小。

選擇字體顏色的時(shí)候，要考慮到整個(gè)色系。要選擇和你色系協(xié)調(diào)的顏色。

使用樣式指南來(lái)標(biāo)準(zhǔn)化您的設(shè)計(jì)中的文字

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

谷歌的Material Design 是一個(gè)很好的例子，包含了風(fēng)格指南。還有Mailchimp，Apple 和FocusLabs也是很好的指南。

排版既是科學(xué)又是藝術(shù)

我鼓勵(lì)你離開(kāi)自己的舒適區(qū)，在你的設(shè)計(jì)中探索文字。

網(wǎng)站題目：成也排版敗也排版：一個(gè)選擇的過(guò)程
URL鏈接：http://www.bm7419.com/news/212357.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、外貿(mào)建站、網(wǎng)站收錄、網(wǎng)站維護(hù)、軟件開(kāi)發(fā)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)