#p#副標(biāo)題#e#

設(shè)計(jì)：The Woork Co

界面缺乏美感，其實(shí)都是我們的細(xì)節(jié)沒(méi)有處理好。很多優(yōu)秀的設(shè)計(jì)作品，都是細(xì)節(jié)處理很到位。今天就和大家分享一些小技巧，來(lái)提高設(shè)計(jì)美感。

使用投影

有時(shí)候我們?cè)谧鲈O(shè)計(jì)時(shí)候，很容易忽略投影這個(gè)小細(xì)節(jié)。投影處理得當(dāng)可以提升細(xì)節(jié)美感，處理投影時(shí)候需要注意的兩點(diǎn)：

1.使用品牌色

用按鈕來(lái)舉例，可以看出左側(cè)投影輕量且?guī)в邪粹o顏色，看著舒服；右側(cè)是黑色投影，顯得有些臟，細(xì)節(jié)反而沒(méi)了。

2.注意透明度

有時(shí)候我們投影是加進(jìn)去了，設(shè)計(jì)感也有了一些，但透明度屬性可千萬(wàn)別馬虎，如上面右側(cè)按鈕，就是投影過(guò)重了，很多新人容易犯的錯(cuò)。

下面來(lái)看下其他案例，運(yùn)用在卡片或者關(guān)鍵的功能模塊。

運(yùn)用在卡片上面，增加層次感，豐富設(shè)計(jì)細(xì)節(jié)

只關(guān)鍵功能上面使用，如選中狀態(tài)

備注：使用投影時(shí)候，切勿滿篇幅使用，可以在關(guān)鍵地方加上投影，給整個(gè)界面布起到畫龍點(diǎn)睛作用。

圖文疊加

可以使用文字作為背景來(lái)增強(qiáng)畫面形式感和視覺(jué)沖擊力。

很多時(shí)候我們構(gòu)圖，直接將元素圖片放中心設(shè)計(jì)，然后就完事了，其實(shí)仔細(xì)思考，還可以去豐富下細(xì)節(jié)。

在人物背景后面添加與圖相關(guān)的主體文字，作為背景修飾。看下案例：

巧妙將數(shù)字與前景圖進(jìn)行排版，畫面有了縱深感

商品圖和LOGO組合排版

平面海報(bào)圖文疊加設(shè)計(jì)手法，也是屢見(jiàn)不鮮

融入圓形

圓形在設(shè)計(jì)中出現(xiàn)頻次很高，原因其親和力給人主觀感受上要強(qiáng)于其他圖形，因此可以借用圓形去設(shè)計(jì)。

如果單純的將頁(yè)面排版在畫面中，會(huì)顯得呆板，很常規(guī)。

如圖，加上圓形背景，畫面瞬間就活起來(lái)了，細(xì)節(jié)層次豐富，下面看看實(shí)際案例。

圓形和人物組合排版，這里圓形品牌圖形

圓形作為修飾背景，強(qiáng)調(diào)主體人物

粗細(xì)有節(jié)奏

粗細(xì)對(duì)比雖然很常聽(tīng)說(shuō)，但是很少有人注意到它在界面中使用細(xì)節(jié)，粗細(xì)文字排版增強(qiáng)對(duì)比的作用，提升品質(zhì)感。

通常大部分伙伴第一次估計(jì)就想到上面這種設(shè)計(jì)，這樣比較粗暴一些，比較常規(guī)。

如果將兩個(gè)文字粗細(xì)調(diào)整下，再添加文字背景，設(shè)計(jì)感就上來(lái)了，下面看看案例。

粗細(xì)對(duì)比增加細(xì)節(jié)感 

這張海報(bào)同樣的在設(shè)計(jì)中使用粗細(xì)對(duì)比

寫在最后

今天分析四個(gè)小技巧提升設(shè)計(jì)美感，在日常工作中需要多加以運(yùn)用，才可孰能生巧，隨機(jī)應(yīng)變各種設(shè)計(jì)。

當(dāng)然上面的方法并不是單一使用的，大家可以組合使用，會(huì)得到意想不到的視覺(jué)效果。

原文地址：功夫UX（公眾號(hào)）

作者：功夫UX

本文的寫作目的主要有兩點(diǎn)，其一，探究在設(shè)計(jì)中，影響Web和App界面可讀性和易讀性的因素有哪些；其二，提出相應(yīng)的解決辦法，即如何提升界面設(shè)計(jì)的可讀性。

再動(dòng)人心魄的故事，如果無(wú)法以清晰易懂的方式講給讀者，讀者永遠(yuǎn)也不可能被你的故事吸引。同樣地，對(duì)設(shè)計(jì)師而言，無(wú)論你的設(shè)計(jì)多么用心，如果可讀性無(wú)法保障，用戶也絕對(duì)不會(huì)有非常愉快的用戶體驗(yàn)。今天我們就來(lái)專門說(shuō)說(shuō)這個(gè)事兒-——如何提升界面設(shè)計(jì)的可讀性。

要完完全全弄懂這個(gè)問(wèn)題，以下這些問(wèn)題都是必要的：

• 可讀性和易讀性究竟是什么？
• 為什么要重視設(shè)計(jì)中的可讀性和易讀性問(wèn)題？
• 影響Web和App界面可讀性和易讀性的因素有哪些？
• 如何提升界面設(shè)計(jì)的可讀性？

倘若看到此文的你，還在糾結(jié)是不是要花費(fèi)大量時(shí)間弄懂設(shè)計(jì)的可讀性問(wèn)題，那么我可以肯定的告訴你：這是必須的。原因很簡(jiǎn)單，如果用戶連你頁(yè)面上的內(nèi)容都看不清楚，他們還愿意欣賞你的設(shè)計(jì)么？還會(huì)認(rèn)真了解你的產(chǎn)品么？答案顯而易見(jiàn)，用戶絕對(duì)不會(huì)。

那么不廢話了，正式開(kāi)始吧~

第一部分 什么是可讀性和易讀性？（這里主要針對(duì)數(shù)字內(nèi)容）

可讀性和易讀性這兩個(gè)概念非常相似，以至于很多設(shè)計(jì)師把他們混作一談，但這兩者本質(zhì)上是不盡相同的。用戶在閱讀某一內(nèi)容時(shí)，會(huì)產(chǎn)生不同的感知，根據(jù)感知結(jié)果的不同，可以細(xì)分成可讀性和易讀性——

可讀性：內(nèi)容的可讀性強(qiáng)調(diào)的是用戶理解某一內(nèi)容的難易程度。

可以這么說(shuō)，可讀性關(guān)注的問(wèn)題更加深入，它涉及到了用戶對(duì)文本內(nèi)容的理解問(wèn)題，而不是僅僅停留在用戶查看內(nèi)容和識(shí)別內(nèi)容的層面上。基于此，要解決內(nèi)容的可讀性問(wèn)題，就要思考更多，諸如，語(yǔ)言是否簡(jiǎn)單易懂？思維是否清晰？信息是否有用？結(jié)構(gòu)是否合理？

易讀性：內(nèi)容的易讀性強(qiáng)調(diào)的是用戶如何查看內(nèi)容以及如何區(qū)分內(nèi)容。

從這個(gè)角度來(lái)看，設(shè)計(jì)師需要解決的問(wèn)題有兩點(diǎn)：第一，確保用戶可以順利查看內(nèi)容；第二，確保用戶可以區(qū)分內(nèi)容并準(zhǔn)確識(shí)別內(nèi)容，比如識(shí)別字符、單詞、句子，以及數(shù)字等等。基于此，我們可以這么認(rèn)為，易讀性主要解決內(nèi)容視覺(jué)呈現(xiàn)的相關(guān)問(wèn)題，使內(nèi)容變得容易“讀”，并讓用戶快速了解頁(yè)面上的信息。

在當(dāng)今的設(shè)計(jì)師眼中，這兩個(gè)術(shù)語(yǔ)的定義又略有變化，設(shè)計(jì)師們普遍認(rèn)為，可讀性的定義更加廣義，在思考可讀性問(wèn)題的時(shí)候，他們也更傾向于將視覺(jué)呈現(xiàn)和內(nèi)容本身相結(jié)合。他們甚至認(rèn)為，可讀性問(wèn)題就是用戶如何區(qū)分文本的不同元素的問(wèn)題，而易讀性則強(qiáng)調(diào)如何區(qū)分特定文本中的某些特定字符和符號(hào)的問(wèn)題。

但其實(shí)無(wú)論你如何理解這些術(shù)語(yǔ)，歸根結(jié)底始終是一個(gè)事兒：用戶如何輕松查看并快速閱讀你的內(nèi)容。

第二部分 影響Web和App界面設(shè)計(jì)中可讀性和易讀性的因素有哪些？

很多因素都會(huì)影響內(nèi)容的可讀性和易讀性，這里主要集中和設(shè)計(jì)過(guò)程直接相關(guān)的要點(diǎn)來(lái)探討。

背景色

和書本、報(bào)紙等紙質(zhì)媒介一樣，在數(shù)字界面中，背景色對(duì)閱讀體驗(yàn)、區(qū)分交互元素以及識(shí)別內(nèi)容有著至關(guān)重要的作用。我們都知道，在不同的背景下看同一個(gè)物體，會(huì)有不同的視覺(jué)體驗(yàn)。類似地，相同的文字內(nèi)容，在白色或淺色背景上顯示為黑色時(shí)，字體看起來(lái)會(huì)比在深色背景上的顯示為白色時(shí)大很多。

之所以有這種差異，原因在于配色。錯(cuò)誤的配色方案極可能會(huì)帶來(lái)糟糕的可讀性，進(jìn)而導(dǎo)致失敗的用戶體驗(yàn)，致使用戶無(wú)法快速瀏覽數(shù)據(jù)、文字，或者其他任何內(nèi)容。一旦內(nèi)容本身不可讀了，即使數(shù)據(jù)之間具備相關(guān)性，用戶也會(huì)產(chǎn)生緊張情緒，不僅無(wú)法理解內(nèi)容，甚至還會(huì)錯(cuò)過(guò)一些重要信息。

如果設(shè)計(jì)師有研究過(guò)不同背景色，并且理解了不同的背景色會(huì)帶來(lái)不同的閱讀感知，并搭配了合適的字體，那么理論上講，則任何配色方案都可以保障足夠的可讀性，就看具體怎么設(shè)計(jì)了。此外，不同類型的頁(yè)面也要有不同的解決方案：如果是文字很多的頁(yè)面，則傾向于使用淺色背景，并可以采用多種配色方案；如果頁(yè)面上圖片很多，則常常采用深色背景，這樣可以突出圖片，帶來(lái)更為震撼的視覺(jué)效果。

Travel Planner app使用了淺色背景確保每個(gè)頁(yè)面都是可讀的

這是一個(gè)關(guān)于飲茶的網(wǎng)站，專門留出了白色背景的一塊，展示文案

這是一個(gè)書店網(wǎng)站，深色背景，使用了特定的字體和字體大小，形成對(duì)比，確保可讀性

排版

排版是什么？排版就是文本內(nèi)容的外觀。說(shuō)到排版，字體就不得不提，它不僅會(huì)直接影響用戶閱讀的速度和體驗(yàn)，還會(huì)影響到識(shí)別的速度。此外，字體的大小，字體的寬度，字體的顏色以及文本結(jié)構(gòu)，每個(gè)點(diǎn)都特別重要。字體作為頁(yè)面的必備元素，和圖片一樣，會(huì)影響整體的視覺(jué)樣式。設(shè)計(jì)師在排版時(shí)，要做到美觀和功能的統(tǒng)一其實(shí)遠(yuǎn)比想象中艱難。

要做好排版，這些問(wèn)題都要注意：

• 留白（負(fù)空間）：元素之間的空白區(qū)域
• 對(duì)齊：放置并對(duì)齊文本
• 字間距：字和字之間的間距
• 字母間隙：兩個(gè)字母之間的間距
• 行距：文本線之間的間距
• 行長(zhǎng)：一行文字的長(zhǎng)度

設(shè)計(jì)師會(huì)根據(jù)以上要點(diǎn)來(lái)設(shè)計(jì)文本，最大程度做到設(shè)計(jì)上賞心悅目，而且體驗(yàn)上易于閱讀。任何細(xì)節(jié)，比如字間距太小，行間距太窄，字體太小或者文字顏色無(wú)法和背景形成對(duì)比——所有這些問(wèn)題都會(huì)使內(nèi)容變得難以閱讀，讓用戶產(chǎn)生不適感，但又說(shuō)不清楚問(wèn)題究竟是什么。此外，如果有多行文字，把每行的字?jǐn)?shù)控制在合適的長(zhǎng)度可以讓閱讀更順利。

Nature Encyclopedia App：使用可讀性較好的無(wú)襯線字體，讓文本易于閱讀。此外，對(duì)于有更多文字的慈善頁(yè)面，背景色用了更淺的顏色。這種對(duì)比既提高了可讀性，又和封面作了區(qū)分。

視覺(jué)層次

視覺(jué)層次結(jié)構(gòu)是一種內(nèi)容組織的方法，可以明確內(nèi)容優(yōu)先級(jí)。它基于格式塔理論，涉及到了很多元素視覺(jué)感知的心理學(xué)，并闡述了用戶為何喜歡統(tǒng)一的視覺(jué)元素。視覺(jué)層次幫助設(shè)計(jì)師合理組織和布局UI元素，以便用戶可以根據(jù)對(duì)象的物理差異（例如大小，顏色，對(duì)比度，樣式等）來(lái)區(qū)分信息。

對(duì)于用戶而言，打開(kāi)一個(gè)網(wǎng)頁(yè)后，他們更加傾向于瀏覽內(nèi)容，而不是逐字逐句地閱讀。回想一下，當(dāng)我們打開(kāi)一篇博客，我們最先看的一定是文章題目，其實(shí)是副標(biāo)題，最后才是正文部分。那既然如此，是不是說(shuō)正文的重要性沒(méi)有那么突出了？當(dāng)然不是！

用戶的心理其實(shí)是這樣的：先看看大標(biāo)題和副標(biāo)題，快速確認(rèn)這個(gè)內(nèi)容是不是他們想要的。如果標(biāo)題的層次結(jié)構(gòu)和正文的排版可以很好的讓用戶get到這個(gè)內(nèi)容就是他們想看的，那么他們則會(huì)真正去閱讀。反之，如果用戶首先看大的是冗長(zhǎng)的文字，心理上就會(huì)立即產(chǎn)生負(fù)擔(dān)，他們不知道閱讀文章需要多長(zhǎng)時(shí)間，也會(huì)懷疑這個(gè)內(nèi)容是否值得投入時(shí)間和精力去閱讀。

視頻播放器

可持續(xù)能源生產(chǎn)創(chuàng)新服務(wù)的主頁(yè)分部分列出了內(nèi)容，并按清晰的元素層次進(jìn)行組織。

因此，對(duì)于文本內(nèi)容，采用逐漸呈現(xiàn)信息的方法顯得至關(guān)重要。對(duì)于文本部分，這里涵蓋了可以囊括到視覺(jué)層次中的全部元素，包括標(biāo)題、副標(biāo)題、正文、CTA按鈕，標(biāo)題等等，可以按照以下視覺(jué)層次結(jié)構(gòu)劃分：

• 第一級(jí)：比如頭條新聞中的大標(biāo)題，它旨在提供核心信息，讓用戶立即判斷這內(nèi)容是不是他們想看的。
• 第二級(jí)：比如文章的二級(jí)標(biāo)題，可以讓用戶快速了解一篇文章的結(jié)構(gòu)。
• 第三級(jí)：比如正文和其他數(shù)據(jù)，和核心信息相關(guān)但不是最主要的信息。

負(fù)空間

負(fù)空間（或稱空白）就是頁(yè)面中的空白區(qū)域。留白會(huì)出現(xiàn)的地方，不僅僅是某一元素的周圍，也會(huì)是某些元素之間甚至是元素內(nèi)部。留白就像是頁(yè)面上的一個(gè)氣口，是空的，純粹的，可呼吸的。在講排版時(shí)，我們已經(jīng)提到過(guò)了留白的作用，不僅僅是對(duì)于頁(yè)面排版，留白對(duì)界面布局中文字和非文字元素之間的連接也很重要。比如，在瀏覽一張圖片很多的頁(yè)面時(shí)，留白的大小和數(shù)量可以幫助你確認(rèn)文字和圖片的比例是否合理，關(guān)系是否連貫。

使用留白增強(qiáng)Web界面內(nèi)容感知

文案

這里還是有必要說(shuō)一下文案本身，界面中出現(xiàn)的文本內(nèi)容要保證至少以下4個(gè)基本功能：

• 清晰：用戶理解你在說(shuō)什么，核心信息清晰易懂
• 簡(jiǎn)潔：每段文字都是有意義的，直奔主題的，沒(méi)有大量修飾，沒(méi)有空話、套話
• 有用：內(nèi)容為用戶提供了必要的信息，或者幫助用戶更好地使用產(chǎn)品
• 一致：內(nèi)容表述的語(yǔ)氣一致、手法一致

對(duì)于App、網(wǎng)站和博客的內(nèi)容打造，其實(shí)只需記住一點(diǎn)，你的用戶都是人，因此打造一種與人交流的氛圍就是制勝點(diǎn)。無(wú)論是網(wǎng)頁(yè)，還是著陸頁(yè)，還是郵件，把編排文案想象成你是在和一個(gè)人對(duì)話，使用簡(jiǎn)單易懂的語(yǔ)言，不要過(guò)度夸張的描述，這只會(huì)讓用戶感到疑惑不解。

第三部分 如何提升設(shè)計(jì)的可讀性？

1. 文案需要精簡(jiǎn)和一致

有一個(gè)技巧，提前確定一些主要術(shù)語(yǔ)和某種操作的命名，然后在任何同場(chǎng)景下都使用這一種表述。例如，如果把刪除這個(gè)動(dòng)作命名為“Delete”，那么所有需要?jiǎng)h除的地方全部都命名成“Delete”，不要再用其他比如“Remove”之類的任何表述了。再比如，如果想要告知用戶此時(shí)需付款，可以直接用“Pay”這個(gè)詞，這個(gè)詞會(huì)比“Make a payment”看上去更加簡(jiǎn)潔。此外，用“Pay”一個(gè)字時(shí)，還可以加大字號(hào)，讓這個(gè)CTA更加醒目。

數(shù)字產(chǎn)品中的這種文案用法和文章以及書中是不一樣的，我們?cè)趯憱|西的時(shí)候，傾向于使用更復(fù)雜但更高級(jí)的短語(yǔ)來(lái)表達(dá)同一個(gè)意思，這樣文字看起來(lái)會(huì)更加生動(dòng)有趣，也更具文學(xué)性。但對(duì)于數(shù)字產(chǎn)品而言，用戶主要是使用它們來(lái)解決問(wèn)題的，因此如果使用文學(xué)手法，反而會(huì)破壞用戶體驗(yàn)。

2. 自定義選項(xiàng)

個(gè)性化用戶界面可以更加準(zhǔn)確地把控用戶偏好，比如說(shuō)，讓用戶去自定義背景顏色和文字大小。自定義功能對(duì)增加內(nèi)容可讀性具有重大影響，因?yàn)榉彩露际且蛉硕悾愫茈y去了解并照顧到每一個(gè)用戶，但是用戶自己知道自己喜歡什么，所以給他們選擇的機(jī)會(huì)就好了。

Upper App的UI設(shè)計(jì)案例研究：允許用戶選擇最喜歡的主題顏色

3. 分屏顯示

分屏顯示不同的內(nèi)容現(xiàn)在已經(jīng)非常流行了，基本的原理就是采用深色背景和淺色背景兩種方案來(lái)展示不同的內(nèi)容。通常使用淺色背景來(lái)展示文本居多的頁(yè)面或者核心數(shù)據(jù)塊，深色則展示圖片或少文字的內(nèi)容，這不僅確保了可讀性，還形成了頁(yè)面對(duì)比，一舉兩得。

澆水追蹤器應(yīng)用程序設(shè)計(jì)

4. 一個(gè)段落一個(gè)重點(diǎn)

前面已經(jīng)說(shuō)過(guò)了，現(xiàn)在用戶的閱讀習(xí)慣就是瀏覽內(nèi)容。因此，為了方便用戶可以快速瀏覽重要信息，切勿使用大篇幅段落。

建議使用小段落，比如3到5行字就是一段，這樣用戶不僅可以瀏覽，還可以快速過(guò)濾掉自己不感興趣的內(nèi)容。更重要的是，用戶不會(huì)錯(cuò)過(guò)自己真正需要的內(nèi)容，因?yàn)槊總€(gè)段落都有專門的主題和重點(diǎn)。

5. 使用數(shù)字

Nielsen Norman曾在博客中分享過(guò)一個(gè)有趣的現(xiàn)實(shí)：根據(jù)用戶在掃描網(wǎng)頁(yè)時(shí)進(jìn)行的眼動(dòng)跟蹤研究，人的視線在遇到數(shù)字時(shí)通常會(huì)停滯不前，并駐足觀察，即使這些數(shù)字夾雜在大片文字中間。

人在潛意識(shí)中會(huì)將數(shù)字與某種事實(shí)、統(tǒng)計(jì)數(shù)據(jù)、物體大小以及空間距離等信息關(guān)聯(lián)起來(lái)，而這類信息通常也就是他們想要的內(nèi)容。因此，寫文案時(shí)直接使用阿拉伯?dāng)?shù)字是一個(gè)不可忽視的小技巧。

環(huán)保社區(qū)網(wǎng)站設(shè)計(jì)：使用數(shù)字作為設(shè)計(jì)布局的一部分，這種方式可以引起用戶的關(guān)注

6. 列表

使用帶有數(shù)字或項(xiàng)目符號(hào)的列表可以增加內(nèi)容可讀性，原因很簡(jiǎn)單，列表可以清晰地羅列信息，組織結(jié)構(gòu)，因此很是吸引用戶注意力。

7. 突出重點(diǎn)信息

使用加粗、斜體、文字顏色等手法來(lái)突出顯示某些內(nèi)容，這已經(jīng)是非常廣泛的做法，卻始終受用。當(dāng)你的文本內(nèi)容中有某一點(diǎn)需要讀者特別注意，就可以突出顯示。此外，錨文本也要突出顯示，告知用戶這個(gè)內(nèi)容是可以點(diǎn)擊的。常見(jiàn)的做法有加下劃線、設(shè)置文字顏色或者加粗。

8. 對(duì)比

對(duì)比可以直接區(qū)分文本元素，并幫助讀者快速瀏覽。但要把握好度，對(duì)比度太低會(huì)導(dǎo)致文本元素混在一起，難以辨認(rèn)；對(duì)比度太高會(huì)導(dǎo)致視覺(jué)疲勞。要合理地運(yùn)用對(duì)比，前提是要掌握色彩理論知識(shí)，其次，在不同的界面上做嘗試，不斷測(cè)試，直到找到最佳方案。

9. 使用常規(guī)字體

選擇字體時(shí)，設(shè)計(jì)師們總想嘗試一些原創(chuàng)又精美的字體。這個(gè)想法是對(duì)的，好看確實(shí)很重要，但是保證可讀性更加重要！但這兩者的關(guān)系倒不是魚與熊掌那樣不可兼得，如果既想使用一些特別的字體，又要保證可讀性，排版就顯得愈發(fā)重要了。

一般來(lái)講，Sans-serif字體更易讀，而襯線字體看起來(lái)會(huì)更優(yōu)雅。對(duì)于一些標(biāo)語(yǔ)而言，即使使用相對(duì)復(fù)雜的字體也不會(huì)破壞可讀性，因?yàn)闃?biāo)語(yǔ)的內(nèi)容是極簡(jiǎn)短的；但如果是一段話，使用非常規(guī)字體就可能是另一番體驗(yàn)了。

此外，配色的選擇也是一個(gè)重要影響因素。例如，深色背景上的文字就需要更多的留白，因?yàn)樯钌珪?huì)吸光，而淺色背景則沒(méi)有這個(gè)問(wèn)題存在。

招聘藝術(shù)家網(wǎng)站設(shè)計(jì)插圖：此登錄頁(yè)面的標(biāo)題使用了襯線字體Domaine，它在視覺(jué)上和插畫相得映彰；正文段落則使用了高度可讀的無(wú)襯線字體

10. 留白

如果元素之間沒(méi)有足夠的留白空間，可讀性會(huì)變差。盡管許多用戶無(wú)法明確意識(shí)到這個(gè)問(wèn)題，但無(wú)合理留白的設(shè)計(jì)確實(shí)會(huì)對(duì)用戶的眼睛和大腦造成壓力。留白和音樂(lè)中的停頓有異曲同工之處，給出空間，給出緩沖和思考的時(shí)間，從而讓內(nèi)容更加易讀。

11. 分段

最常用的內(nèi)容分段辦法就是使用副標(biāo)題、水平分割線或者或垂直分割線。分段可以幫助用戶輕松地將不同的元素分開(kāi)，并在統(tǒng)一的布局中了解它們的相互聯(lián)系。第10點(diǎn)中提到的留白也可以用于分段，此外，還可以使用圖片做隔斷。

使用圖片來(lái)進(jìn)行內(nèi)容分段乍看似乎不合邏輯，但是圖片確實(shí)有助于使內(nèi)容更清晰可讀。在文章中插入圖片，圖片就成了一種更加好看的分割線，既可以說(shuō)明上下文內(nèi)容，又可以分隔文本的不同部分，承上啟下。

此外，插入圖片還可以讓用戶有短暫的放松感，尤其是在閱讀長(zhǎng)文的時(shí)候，圖片可以很好的緩解用戶內(nèi)心焦慮。當(dāng)然，你還可以使用各種插圖、照片甚至3D圖形，相比起文字內(nèi)容，它們都更具吸引力，并且識(shí)別速度更快。

總之，插入圖片是一種非常棒的辦法，它還可以根據(jù)上下文語(yǔ)義刺激用戶點(diǎn)擊。現(xiàn)在很多的網(wǎng)站設(shè)計(jì)，都會(huì)使用相關(guān)性的大圖搭配文本內(nèi)容，相互補(bǔ)充，相互成就，營(yíng)造出一種大氣蓬勃的設(shè)計(jì)感。

12. 合理利用大寫

對(duì)于英語(yǔ)國(guó)家的人而言，使用大寫來(lái)標(biāo)記文本層次結(jié)構(gòu)依舊是一個(gè)重要手段，這也是為什么關(guān)于使用句首字母大寫還是詞首字母大寫的話題已經(jīng)被討論了無(wú)數(shù)次的原因。

關(guān)于大寫的用法，要注意以下幾點(diǎn)：

• 詞首字母大寫：標(biāo)簽、CTA，菜單以及頁(yè)面標(biāo)題
• 句首字母大寫：較長(zhǎng)的文本，例如頁(yè)面或字段描述以及工具提示
• 全部字母大寫：但僅適用于非常重要的內(nèi)容，比如簡(jiǎn)短的標(biāo)語(yǔ)，品牌名稱，網(wǎng)站的核心導(dǎo)航點(diǎn)，簡(jiǎn)短的CTA按鈕文字以及OK的縮寫等等。

但無(wú)論你怎么選擇，都要記住一點(diǎn)：保持統(tǒng)一。如果按鈕使用了全部字母大寫，那么每個(gè)頁(yè)面的按鈕都要這么做了。

Health Blog的設(shè)計(jì)：CTA和頂部導(dǎo)航用了全部字母大寫；大標(biāo)題用了詞首字母大寫；正文用了句首字母大寫

第四部分 總結(jié)

關(guān)于提升設(shè)計(jì)可讀性的內(nèi)容，今天就暫時(shí)討論到這里。其實(shí)上面的每個(gè)點(diǎn)都可以再展開(kāi)具體分析，但限于篇幅，就暫時(shí)不深入了。所以如果你有其他想法，歡迎來(lái)交流。最后，希望本文對(duì)你有做幫助。

原文地址：mockplus

作者：Marina Yalanska

譯者：Trista

網(wǎng)易考拉品牌升級(jí)明確規(guī)定中英文字體運(yùn)用

▲字體在設(shè)計(jì)中重要程度越來(lái)越高，文字不僅是閱讀形式一種，不同的字體不僅能影響排版，同時(shí)也能反應(yīng)出產(chǎn)品的性格！越來(lái)越多的品牌把字體設(shè)計(jì)融于品牌DNA中，在網(wǎng)易考拉改版設(shè)計(jì)中，針對(duì)中英文字體和整體品牌的融合 。

▲韓國(guó)知名電商11街的視覺(jué)升級(jí)中，對(duì)于中英文字體，有著明確的規(guī)范。

▲UBER的設(shè)計(jì)規(guī)范中，同樣也對(duì)字體有著明確的要求，英文字體，印刷字體，以及詳細(xì)使用規(guī)則。

越來(lái)越多的公司慢慢對(duì)字體在設(shè)計(jì)中運(yùn)用進(jìn)行規(guī)范，今天我們一起來(lái)聊聊界面設(shè)計(jì)中如何去定義我們的字體，以及UI中字體一些運(yùn)用規(guī)則。

字體的情感 

▲字體是影響品牌的很關(guān)鍵詞元素，如果了解色彩心理學(xué)的同學(xué)，應(yīng)該知道不同的顏色其實(shí)有對(duì)應(yīng)的色彩情感，那么同樣的不同字形，筆畫等等都也是有品牌情感的。

▲比如我們常用的西文常見(jiàn)字體之一，Helvetica作為一種無(wú)襯線字體，整體字體筆畫安全，專業(yè)，嚴(yán)謹(jǐn)廣泛適用于各種場(chǎng)合，尤其受品牌商標(biāo)的偏愛(ài), 包括3M，寶馬，雀巢, 曾經(jīng)的蘋果等等。另外，該字體很受政府青睞，美國(guó)稅單上用的字體就是 Helvetica。

圖片來(lái)源：https://www.behance.net/gallery/41054815/Typography-Google-Fonts-Combinations-Volume-2

▲Roboto是為Android操作系統(tǒng)設(shè)計(jì)的一個(gè)無(wú)襯線字體家族。該字型特點(diǎn)為“現(xiàn)代的、平易近人”也一直是安卓系統(tǒng)默認(rèn)英文字體。

▲《機(jī)械姬》這個(gè)電影大家應(yīng)該很熟悉，作者使用幾何版型襯線字體，整體呈現(xiàn)科技感。

▲《鋼鐵俠》電影中，整套設(shè)計(jì)來(lái)源Territorystudio團(tuán)隊(duì)設(shè)計(jì)的虛擬界面。里面一整套虛擬界面，包括圖形，字體等，整體風(fēng)格高度一致，整體字體呈現(xiàn)未來(lái)和科技感。

所以一套字體一定是和整個(gè)品牌DNA是相延續(xù)的，它們之前有整體品牌調(diào)性，而不是單獨(dú)存在，就像我們內(nèi)衣，看不見(jiàn)但是很重要，字體也是如此。

中文字體 

iOS和安卓都有官方推薦默認(rèn)字體，見(jiàn)上圖，但是很多時(shí)候我們的品牌，整體設(shè)計(jì)語(yǔ)言都有自己獨(dú)特個(gè)性化，所以有時(shí)候也需要去重新制定一套新的字體，那么對(duì)于這些字體，我們要如何去選擇呢？

在選擇字體時(shí)候，一定要根據(jù)整體品牌調(diào)性去選擇最合適的字體，下面是一些界面中常用的中文字體，而且版權(quán)也比較容易買到。

▲華文黑體視覺(jué)感受：字形方正，筆畫較粗，整體給人易識(shí)別，可讀性高。

▲思源黑體視覺(jué)感受：由adobe和Google 聯(lián)合推出的開(kāi)源字體。字體家族龐大，涵蓋了中日韓用字。由日本設(shè)計(jì)師主導(dǎo)，與小冢黑體風(fēng)格上一脈相承，字體堅(jiān)固穩(wěn)定，字符空間均勻，整體給人專業(yè)，硬朗感受。

▲微軟黑體視覺(jué)感受：是方正第一代屏顯字體，也開(kāi)創(chuàng)了中文屏顯字體設(shè)計(jì)先河，字形略呈扁方而飽滿，筆畫簡(jiǎn)潔而舒展，易于閱讀，視覺(jué)感受清新和優(yōu)美。

▲冬青黑體視覺(jué)感受：字的結(jié)構(gòu)是日本的印刷字設(shè)計(jì)與中國(guó)用字習(xí)慣有諸多不一致的地方，盡管冬青黑體簡(jiǎn)體針對(duì)中國(guó)大陸而設(shè)計(jì)，卻保留了原設(shè)計(jì)的風(fēng)格，這反倒讓字體顯得別具風(fēng)味，有個(gè)性，錘子系統(tǒng)貌似運(yùn)用的此款字體。

▲黑體-簡(jiǎn)視覺(jué)感受：黑體字是現(xiàn)代漢字體系中最重要的字體之一，特點(diǎn)：非常突出，方正、粗獷、樸素、簡(jiǎn)潔、無(wú)裝飾、橫豎筆形粗細(xì)視覺(jué)相等、筆形方頭方尾、黑白均勻，因此非常醒目，運(yùn)用廣泛。

▲蘋方-簡(jiǎn)視覺(jué)感受：蘋方是蘋果新一代主題字，整體字體特點(diǎn)：專業(yè)，便捷，排版嚴(yán)謹(jǐn)，比較容易識(shí)別，是蘋果官方中文字體，也是大多數(shù)app首選字體。

▲方正蘭亭黑感受：方正蘭亭黑系列是微軟雅黑的延續(xù)設(shè)計(jì)，字面略為縮小，字重梯度多，獲得了更廣泛的適用性，其中用在品牌營(yíng)銷中很多，它的特點(diǎn)：靈活多變，個(gè)性化營(yíng)銷字體，排版嚴(yán)謹(jǐn)，識(shí)別性高，比如天貓?zhí)詫毢芏酄I(yíng)銷banner規(guī)范都是運(yùn)用的蘭亭黑。

關(guān)于字重  

字重：字體中很重要一個(gè)概念，不同字重傳遞出來(lái)視覺(jué)感受完全不一樣。

輕字重：傳遞出輕盈，放松視覺(jué)感受，常配合粗的字重使用，在一些引導(dǎo)頁(yè)面，閱讀頁(yè)面，說(shuō)明文案時(shí)候使用。

重字重：視覺(jué)感受莊重，嚴(yán)謹(jǐn)，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，數(shù)字，引導(dǎo)行動(dòng)操作點(diǎn)上，或者頁(yè)面中大的標(biāo)題，banner主標(biāo)題等等。

英文字體 

英文字體相對(duì)中文來(lái)說(shuō)，字體包更小，所以選擇性更大一些，今天主要推薦一些谷歌免費(fèi)開(kāi)源字體，谷歌字體真的非常棒，搭配好了，能帶來(lái)很多不一樣視覺(jué)效果！

1.Playfair Display

受很多設(shè)計(jì)師喜歡的襯線字體，整體搭配出來(lái)雜志感，大牌特別強(qiáng)，在很多高品質(zhì)的產(chǎn)品頁(yè)面，或者H5頁(yè)面中有應(yīng)用到。

界面來(lái)源于網(wǎng)絡(luò)

▲這個(gè)字體是我喜歡字體排前10，常常和一些非襯線字體搭配起來(lái)，用作大標(biāo)題或者主題非常優(yōu)雅和藝術(shù)雜志美感！字體非常優(yōu)雅和經(jīng)典。

界面來(lái)源于網(wǎng)絡(luò)

▲在UI設(shè)計(jì)中也是廣受熱愛(ài)，在一些PC頁(yè)面，或者閱讀類產(chǎn)品中，配合優(yōu)美的排版，整體非常現(xiàn)代。

2.Nunito Sans

英文界面常用的字體，國(guó)外設(shè)計(jì)師用的比較多，字形很現(xiàn)代，干凈，字母之間添加一些字間距，看起來(lái)更加干凈。

界面來(lái)源于網(wǎng)絡(luò)

▲Nunito Sans無(wú)論在平面設(shè)計(jì)中，或者UI設(shè)計(jì)中都非常干凈，現(xiàn)代，有利于閱讀，所以另外在做設(shè)計(jì)時(shí)候非常喜歡用，有個(gè)小竅門，在做英文時(shí)候，字母之間加一個(gè)字間距，可以讓設(shè)計(jì)看起來(lái)更舒服。

3. Montserrat

這種字體很獨(dú)特，不像nunito sans那樣干凈。但每個(gè)字母上的一個(gè)小裝飾，使得UI看起來(lái)非常有吸引力。

界面來(lái)源于網(wǎng)絡(luò)

▲可以看出Montserrat字體深受一些大廠喜愛(ài)，無(wú)論是大小寫組合，還是正文閱讀，都很獨(dú)特。

在UI界面中也是如此，讓整體設(shè)計(jì)更加獨(dú)一無(wú)二，充滿著細(xì)節(jié)。

4.Roboto

谷歌產(chǎn)品界面默認(rèn)字體，PC和無(wú)線上默認(rèn)字體，可見(jiàn)在谷歌的重視程度，如果你做一個(gè)英文頁(yè)面，不知道選什么字體，那么選擇這個(gè)是最安全的。

界面來(lái)源于網(wǎng)絡(luò)

▲這個(gè)字體通用性很強(qiáng)，字重也很豐富，無(wú)論是粗體還是細(xì)體，用在各類產(chǎn)品網(wǎng)站和移動(dòng)界面中非常簡(jiǎn)潔優(yōu)雅。

5.Open Sans

Open Sans是一種無(wú)襯線字體，移動(dòng)設(shè)計(jì)中也是運(yùn)用比較多的一個(gè)字體，比較現(xiàn)代和簡(jiǎn)潔視覺(jué)感受。

▲運(yùn)用在網(wǎng)站中很干凈，幾乎沒(méi)有多余的筆畫正式，字重對(duì)比強(qiáng)烈！

▲它配合這其他字體運(yùn)用，都很OK，幾乎百搭，在國(guó)外很多經(jīng)典的官方網(wǎng)站都有運(yùn)用到。

6.PT Sans

1998年發(fā)布，基于俄羅斯的無(wú)襯線字體,一般常用于雜志，美食產(chǎn)品。

▲PTSans在美食頁(yè)面中的運(yùn)用，和食物本身也融合的很好。

▲PTSans在雜志排版中運(yùn)用也同樣很和諧。

7.Futura PT

Futura PT是一種無(wú)襯線字體，也是深受設(shè)計(jì)師喜歡的一款字體，整體視覺(jué)感受現(xiàn)代時(shí)尚，我們一起來(lái)看看它是視覺(jué)魅力。

▲作為大標(biāo)題的運(yùn)用，簡(jiǎn)單清晰干凈。

▲作為設(shè)計(jì)公司網(wǎng)站的運(yùn)用，配上網(wǎng)格的布局，非常的時(shí)尚。

▲寶馬御用字體之一，用在寶馬官方APP和網(wǎng)站上，可見(jiàn)尊貴感。

▲時(shí)尚雜志的官網(wǎng)運(yùn)用，干凈簡(jiǎn)潔。

英文系列字體還有很多，后續(xù)有機(jī)會(huì)再和大家推薦，今天推薦的這些英文字體在界面中完全可以用到，并且很容易下載，都在 fonts.google.com 網(wǎng)站中。

最后 

正如前面開(kāi)頭所說(shuō)，字體是設(shè)計(jì)中體現(xiàn)品牌很重要一點(diǎn)，字體選擇非常重要，字體也是設(shè)計(jì)中最大量的內(nèi)容，所以我們一定要掌握起來(lái)，下一篇我將會(huì)圍繞數(shù)字字體運(yùn)用分享給大家，下周見(jiàn)！

原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）

作者：sky