亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國(guó)推薦設(shè)計(jì)師 (詳情)
//百度統(tǒng)計(jì) 20220402 uicn

您的意見是我們 UI 中國(guó)進(jìn)步的動(dòng)力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入U(xiǎn)I中國(guó)官方反饋群進(jìn)行反饋!
群號(hào):302892100
備注:反饋問題后@管理員能讓我們及時(shí)了解您的意見

提交需求

賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!

0/20
0/200

設(shè)計(jì)大賽

  • 設(shè)計(jì)大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對(duì)UI中國(guó)的支持和信賴!
成也排版敗也排版:一個(gè)選擇的過程
0.0°

作為設(shè)計(jì)師有一個(gè)重要的技能:如何選擇文字。

翻譯:冬柏       校對(duì):逗砂    本文由非科班設(shè)計(jì)翻譯小組翻譯


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

 

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

 

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

 

明確你的目的

在你做任何事情之前,首先要確定你的設(shè)計(jì)目的。你想傳達(dá)的是什么信息?以及你要用什么方式來實(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)一致。


Image title

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


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


Image title

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

 

明確定位你的用戶

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

 

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


Image title

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

 

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


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

 

尋找靈感

觀看其他設(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》。你可以在那里找到很多資源。

 

Image title

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

 

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

 

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

 

字體搭配

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

Image title

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

 

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

 

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

 

Image title

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

 

選擇你的字體

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

Image title

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

 

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

 

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


Image title

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

 

在字體搭配方面,保持簡(jiǎn)單,最多可以有三種不同的字體。這樣做將有助于引導(dǎo)讀者的眼睛,首先是標(biāo)題,然后到內(nèi)容文本。 您還可以使用不同的字體大小,顏色和重量創(chuàng)建視覺對(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是一種通過歷史上令人滿意的比例來為文字大小創(chuàng)建尺度的系統(tǒng)。


Image title


例如,你可以使用基于黃金分割的比例。 這將是你計(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è)問題你可能會(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

 

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

 


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é)來生成字體大小。但是,這只是一個(gè)參考。我們用這種方法作為參考,然后用自己的雙眼來調(diào)整字體大小。



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

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


Image title

Sketch中的共享樣式

 

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


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

 

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


Image title

使用樣式指南來標(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ì)你離開自己的舒適區(qū),在你的設(shè)計(jì)中探索文字。


Image title


 


更新:2017-04-26

收藏

7人已收藏

  • 50

    作品

  • 1651

    粉絲

  • 22

    關(guān)注

  • 插畫自學(xué)指南:如何用臨摹來提升你的繪畫能力
  • 插畫自學(xué)指南:畫插畫需要哪些工具
  • 漸變是新的色彩?
  • 如何用臨摹來提升你的設(shè)計(jì)能力

    猜你喜歡

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

      0.0°

      你確定要舉報(bào)成也排版敗也排版:一個(gè)選擇的過程?

      如果查出惡意舉報(bào),十天內(nèi)禁止提交任何舉報(bào)申請(qǐng)。

      0/200

      上傳證據(jù): 超過10M的附件請(qǐng)使用網(wǎng)盤地址

      點(diǎn)擊上傳附件

      對(duì)誰可見:

      全部設(shè)計(jì)師
      • 全部設(shè)計(jì)師
      • 推薦設(shè)計(jì)師和認(rèn)證設(shè)計(jì)師

      您確認(rèn)要推薦?

      該作品發(fā)布時(shí)間:2017年04月26日

      評(píng)分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      7
      7
      1

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      登錄

      手機(jī)號(hào)

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯(cuò)誤

      登錄
      第三方賬號(hào)登錄
      <big id="oryzd"></big>
      <var id="oryzd"></var>