前置知識(shí)

在開始正文前，我們先把本文涉及到的一些內(nèi)容提前定個(gè)基調(diào)。

Promise 哪些 API 涉及了微任務(wù)？

Promise 中只有涉及到狀態(tài)變更后才需要被執(zhí)行的回調(diào)才算是微任務(wù)，比如說(shuō) then、 catch 、finally ，其他所有的代碼執(zhí)行都是宏任務(wù)（同步執(zhí)行）。

上圖中藍(lán)色為同步執(zhí)行，黃色為異步執(zhí)行（丟到微任務(wù)隊(duì)列中）。

這些微任務(wù)何時(shí)被加入微任務(wù)隊(duì)列？

這個(gè)問(wèn)題我們根據(jù) ecma 規(guī)范來(lái)看：

• 如果此時(shí) Promise 狀態(tài)為 pending，那么成功或失敗的回調(diào)會(huì)分別被加入至 [[PromiseFulfillReactions]] 和 [[PromiseRejectReactions]] 中。如果你看過(guò)手寫 Promise 的代碼的話，應(yīng)該能發(fā)現(xiàn)有兩個(gè)數(shù)組存儲(chǔ)這些回調(diào)函數(shù)。
• 如果此時(shí) Promise 狀態(tài)為非 pending 時(shí)，回調(diào)會(huì)成為 Promise Jobs，也就是微任務(wù)。

了解完以上知識(shí)后，正片開始。

同一個(gè) then，不同的微任務(wù)執(zhí)行

初級(jí)

Promise.resolve()
  .then(() => { console.log("then1"); Promise.resolve().then(() => { console.log("then1-1");
    });
  })
  .then(() => { console.log("then2");
  });

以上代碼大家應(yīng)該都能得出正確的答案：then1 → then1-1 → then2。

雖然 then 是同步執(zhí)行，并且狀態(tài)也已經(jīng)變更。但這并不代表每次遇到 then 時(shí)我們都需要把它的回調(diào)丟入微任務(wù)隊(duì)列中，而是等待 then 的回調(diào)執(zhí)行完畢后再根據(jù)情況執(zhí)行對(duì)應(yīng)操作。

基于此，我們可以得出第一個(gè)結(jié)論：鏈?zhǔn)秸{(diào)用中，只有前一個(gè) then 的回調(diào)執(zhí)行完畢后，跟著的 then 中的回調(diào)才會(huì)被加入至微任務(wù)隊(duì)列。

中級(jí)

大家都知道了 Promise resolve 后，跟著的 then 中的回調(diào)會(huì)馬上進(jìn)入微任務(wù)隊(duì)列。

那么以下代碼你認(rèn)為的輸出會(huì)是什么？

let p = Promise.resolve();

p.then(() => { console.log("then1"); Promise.resolve().then(() => { console.log("then1-1");
  });
}).then(() => { console.log("then1-2");
});

p.then(() => { console.log("then2");
}); 

按照一開始的認(rèn)知我們不難得出 then2 會(huì)在 then1-1 后輸出，但是實(shí)際情況卻是相反的。

基于此我們得出第二個(gè)結(jié)論：每個(gè)鏈?zhǔn)秸{(diào)用的開端會(huì)首先依次進(jìn)入微任務(wù)隊(duì)列。

接下來(lái)我們換個(gè)寫法：

let p = Promise.resolve().then(() => { console.log("then1"); Promise.resolve().then(() => { console.log("then1-1");
  });
}).then(() => { console.log("then2");
});

p.then(() => { console.log("then3");
});

上述代碼其實(shí)有個(gè)陷阱，then 每次都會(huì)返回一個(gè)新的 Promise，此時(shí)的 p 已經(jīng)不是 Promise.resolve() 生成的，而是最后一個(gè) then 生成的，因此 then3 應(yīng)該是在 then2 后打印出來(lái)的。

順便我們也可以把之前得出的結(jié)論優(yōu)化為：同一個(gè) Promise 的每個(gè)鏈?zhǔn)秸{(diào)用的開端會(huì)首先依次進(jìn)入微任務(wù)隊(duì)列。

高級(jí)

以下大家可以猜猜 then1-2 會(huì)在何時(shí)打印出來(lái)？

Promise.resolve()
  .then(() => { console.log("then1"); Promise.resolve()
      .then(() => { console.log("then1-1"); return 1;
      })
      .then(() => { console.log("then1-2");
      });
  })
  .then(() => { console.log("then2");
  })
  .then(() => { console.log("then3");
  })
  .then(() => { console.log("then4");
  });

這題肯定是簡(jiǎn)單的，記住第一個(gè)結(jié)論就能得出答案，以下是解析：

• 第一次 resolve 后第一個(gè) then 的回調(diào)進(jìn)入微任務(wù)隊(duì)列并執(zhí)行，打印 then1
• 第二次 resolve 后內(nèi)部第一個(gè) then 的回調(diào)進(jìn)入微任務(wù)隊(duì)列，此時(shí)外部第一個(gè) then 的回調(diào)全部執(zhí)行完畢，需要將外部的第二個(gè) then 回調(diào)也插入微任務(wù)隊(duì)列。
• 執(zhí)行微任務(wù)，打印 then1-1 和 then2，然后分別再將之后 then 中的回調(diào)插入微任務(wù)隊(duì)列
• 執(zhí)行微任務(wù)，打印 then1-2 和 then3 ，之后的內(nèi)容就不一一說(shuō)明了

接下來(lái)我們把 return 1 修改一下，結(jié)果可就大不相同啦：

Promise.resolve()
  .then(() => { console.log("then1"); Promise.resolve()
      .then(() => { console.log("then1-1"); return Promise.resolve();
      })
      .then(() => { console.log("then1-2");
      });
  })
  .then(() => { console.log("then2");
  })
  .then(() => { console.log("then3");
  })
  .then(() => { console.log("then4");
  });

當(dāng)我們 return Promise.resolve() 時(shí)，你猜猜 then1-2 會(huì)何時(shí)打印了？

答案是最后一個(gè)才被打印出來(lái)。

為什么在 then 中分別 return 不同的東西，微任務(wù)的執(zhí)行順序竟有如此大的變化？以下是筆者的解析。

PS：then 返回一個(gè)新的 Promise，并且會(huì)用這個(gè) Promise 去 resolve 返回值，這個(gè)概念需要大家先了解一下。

根據(jù) Promise A+ 規(guī)范

根據(jù)規(guī)范 2.3.2，如果 resolve 了一個(gè) Promise，需要為其加上一個(gè) then 并 resolve。

if (x instanceof MyPromise) { if (x.currentState === PENDING) {
  } else {
    x.then(resolve, reject);
  } return;
}

上述代碼節(jié)選自手寫 Promise 實(shí)現(xiàn)。

那么根據(jù) A+ 規(guī)范來(lái)說(shuō)，如果我們?cè)?nbsp;then 中返回了 Promise.resolve 的話會(huì)多入隊(duì)一次微任務(wù)，但是這個(gè)結(jié)論還是與實(shí)際不符的，因此我們還需要尋找其他權(quán)威的文檔。

根據(jù) ECMA - 262 規(guī)范

根據(jù)規(guī)范 25.6.1.3.2，當(dāng) Promise resolve 了一個(gè) Promise 時(shí)，會(huì)產(chǎn)生一個(gè)NewPromiseResolveThenableJob，這是屬于 Promise Jobs 中的一種，也就是微任務(wù)。

This Job uses the supplied thenable and its then method to resolve the given promise. This process must take place as a Job to ensure that the evaluation of the then method occurs after evaluation of any surrounding code has completed.

并且該 Jobs 還會(huì)調(diào)用一次 then 函數(shù)來(lái) resolve Promise，這也就又生成了一次微任務(wù)。

這就是為什么會(huì)觸發(fā)兩次微任務(wù)的來(lái)源。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

輕擬物的核心知識(shí)

輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來(lái)講，最重要的東西實(shí)際上只有2個(gè)，形體、光影。

1. 形體表現(xiàn)

形體的表現(xiàn)，就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過(guò)去我們寫的圖標(biāo)分享中，有寫過(guò)面性圖標(biāo)進(jìn)階的設(shè)計(jì)中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。

輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫出來(lái)，而不是用抽象的圖形做填充而已。

比如大眾點(diǎn)評(píng)的快速入口圖標(biāo)，雖然看起來(lái)很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。

換句話說(shuō)，擬物插畫的圖形基底，類似扁平插畫風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過(guò)多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非?？简?yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。

并且，在描繪輪廓的時(shí)候，新手盡可能的采取正視圖來(lái)進(jìn)行繪制，而不要通過(guò)俯視圖、側(cè)視圖、斜視圖等方法來(lái)呈現(xiàn)圖形的多個(gè)面，這樣難度會(huì)大幅度上升，比如下面這種情況。

2. 光影表現(xiàn)

除了形體外，光影就是整個(gè)擬物的靈魂了。

當(dāng)一個(gè)完整的圖形完成填充色時(shí)，它是扁平圖案，如果完成光影呈現(xiàn)的時(shí)候，它就是三維空間的立體圖形，比如下面這個(gè)圓的案例：

在擬物的設(shè)計(jì)中，我們對(duì)光影的定義是至關(guān)重要的，所以首先就是針對(duì)該圖形確定光源的方向，是上方、前方、左上還右上，這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。

如果對(duì)光影沒有正確的解釋，那么在制作細(xì)節(jié)的漸變角度、投影的使用上，就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì)，造成光影視覺沖突和矛盾。

在創(chuàng)建了光源以后，物體受到光線的影響就會(huì)產(chǎn)生明暗面和投影，可以簡(jiǎn)單劃分成4個(gè)部分，高光、亮部、暗部、投影。

這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對(duì)光影的表現(xiàn)還會(huì)包含明暗交界、反光面，這對(duì)于輕擬物的來(lái)說(shuō)負(fù)擔(dān)太重，所以我們要去掉它們，接下來(lái)重點(diǎn)講講高光和暗部。

高光是物體作為受光物對(duì)光源的直接反映，比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長(zhǎng)期存在的高光配飾（多數(shù)動(dòng)畫的光頭角色都有）……

高光可以非常有效的增加畫面的層次和對(duì)比性，讓物體看上去更有沖擊力和觀賞性。

而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色?huì)變暗。在實(shí)際操作過(guò)程中，我們可以通過(guò)漸變的方式開控制明暗的表達(dá)，但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來(lái)，而是為它疊加暗部或亮部的黑白透明度漸變。

了解這幾個(gè)特性以后，下面，我們就通過(guò)一個(gè)實(shí)例來(lái)講解一下輕擬物設(shè)計(jì)的過(guò)程吧。

輕擬物實(shí)例演練

作為輕擬物的演示，直接畫個(gè)圖標(biāo)講一遍怎么操作是沒什么用的，我們要從實(shí)際場(chǎng)景出發(fā)，用它來(lái)解決一些真實(shí)的問(wèn)題。比如看看下面的 KFC 官方 APP 首頁(yè)：

總結(jié)它的問(wèn)題，不難發(fā)現(xiàn)首頁(yè)頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個(gè)（加滑動(dòng)的），雖然每個(gè)模塊圖標(biāo)單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。

我們要做的，就是通過(guò)輕擬物的方式，調(diào)整快速入口最大的三個(gè)圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺差異性。先從第一個(gè)圖標(biāo)開始，講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。

第一步：確認(rèn)輪廓造型

第一個(gè)操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng)，包括加粗車頭，減少高度，增加車燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。

形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。

第二步：完善圖形細(xì)節(jié)

這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。

第三步：增加基礎(chǔ)的暗部表現(xiàn)

在這里，我們就要開始為圖標(biāo)增加高光了，高光從右上角打下來(lái)，那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。

這一步在軟件中主要使用蒙版功能，通過(guò)蒙版在背景上方創(chuàng)建一個(gè)圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對(duì)暗部和投影的效果。

第四步：增加高光效果

接著，就是最后一步，將高光添加到畫面中來(lái)，將整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升。

通過(guò)上面的演示，我們可以將整個(gè)擬物設(shè)計(jì)流程精簡(jiǎn)成：

• 確定圖形基本輪廓、外形比例、模塊色彩
• 豐富細(xì)節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感
• 通過(guò)蒙版添加暗部來(lái)完善表現(xiàn)的明暗和層級(jí)關(guān)系
• 添加高光元素作為圖形的亮點(diǎn)，拉升層次感

然后，通過(guò)這樣的步驟，再來(lái)完成后續(xù)的兩個(gè)圖形，拆解完的效果如下。

然后，再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來(lái)的頁(yè)面，并做出對(duì)應(yīng)的修改，再來(lái)看看前后對(duì)比：

通過(guò)這個(gè)對(duì)比，我們就可以看出在這個(gè)復(fù)雜的首頁(yè)頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來(lái)，且不會(huì)顯得太突兀和復(fù)雜。

而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用，當(dāng)畫面元素已經(jīng)開始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí)，就是輕擬物登場(chǎng)的時(shí)候了。

總結(jié)

最后的總結(jié)，學(xué)習(xí)輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲(chǔ)備彈藥，以應(yīng)對(duì)越來(lái)越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。

我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來(lái)，一方面是因?yàn)闀r(shí)間上來(lái)不及，另一方面是希望大家不會(huì)被軟件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來(lái)。

文章來(lái)源：站酷    作者：超人的電話亭

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

文字是界面中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，它的承載體即是字體。

前半部分從字體的最基本屬性（字族、字號(hào)、字重、大小寫等）說(shuō)起，熟悉字體的那些特征，了解字體在界面中的作用，以及iOS與Android系統(tǒng)字體的使用規(guī)范。

字體基礎(chǔ)知識(shí)

字體是界面設(shè)計(jì)的基石

字體是排版中最重要的元素，對(duì)用戶的閱讀體驗(yàn)有著至關(guān)重要的作用。一般來(lái)說(shuō)，設(shè)計(jì)師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來(lái)已久，從最早的羅馬字體到現(xiàn)在蘋果手機(jī)中的SF-UI字體，經(jīng)歷了許多設(shè)計(jì)上的變革。而中文字體的發(fā)展并沒有西文字體那么順利，數(shù)量上也遠(yuǎn)遠(yuǎn)落后于其他字體。但中國(guó)設(shè)計(jì)正在崛起，我們也看到越來(lái)越多的設(shè)計(jì)團(tuán)隊(duì)和設(shè)計(jì)師加入字體設(shè)計(jì)的隊(duì)伍，數(shù)量上正在呈指數(shù)級(jí)別增加。

設(shè)計(jì)是一門非常嚴(yán)謹(jǐn)?shù)膶W(xué)科，里面蘊(yùn)含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過(guò)了將近千年的發(fā)展和演變，有非常多的專業(yè)知識(shí)。像平面設(shè)計(jì)一樣，在UI設(shè)計(jì)中字體的使用也有相應(yīng)的規(guī)范，設(shè)計(jì)師應(yīng)懂得這些基礎(chǔ)知識(shí)，才能將字體為自己所用。

本篇就從我們常用的設(shè)計(jì)軟件（sketch、Figma、P hotoshop）字符面板開始，來(lái)聊聊有關(guān)字體與排版應(yīng)用方面的知識(shí)。

字體的那些屬性

• Font 中文翻譯為「字型」，是指字的粗細(xì)、寬度和樣式，是一套具有同樣風(fēng)格和尺寸的字形。例如「Regular_16pt_SF-UI」。

• Typeface 中文翻譯為「字體」，是指一整套的字形，一個(gè)或多個(gè)字型的多尺寸的集合，例如「SF-UI」里有不同粗細(xì)（Regular、Blod、Light）和不同寬度（12pt、14pt、20pt）。

• Glyph 中文翻譯為「字形」，是指單個(gè)字的形體或是字體的骨骼。 同一字可以有不同的字形，而不影響其表達(dá)的意思，例如漢字中的「令」字，第三筆可以是一點(diǎn)或一撇， 最末兩筆可以作「ㄗ」或「マ」。

Font和Typeface常常被混淆使用，其實(shí)可以這樣理解，前者指一種設(shè)計(jì)，后者指具體的產(chǎn)品。

1. 族類 GenericFamily

族類就是不同字體類型，例如阿里巴巴普惠體、方正新書宋、站酷酷黑體等。

而這些眾多字體又可分為「襯線體」和「無(wú)襯線體」。

襯線體

宋體就是襯線體，特點(diǎn)就是筆畫開始和末端的地方都有額外的裝飾，且筆畫的粗細(xì)有所不同。在傳統(tǒng)的正文印刷中，普遍認(rèn)為襯線字體能帶來(lái)更加的可讀性。常見的襯線體有宋體、Times New Roman、Georgia等。

襯線體一般在APP中比較少見，文字閱讀類偏愛這種襯線體，例如「單讀」，大標(biāo)題用的是「華康標(biāo)宋體」、正文內(nèi)容用的是「蘋方-纖細(xì)」而英文用的是「XCross Traditional Bold」

黑體

黑體是無(wú)襯線字體，特點(diǎn)是筆畫沒有額外的裝飾，且筆畫的粗細(xì)差不多。相比嚴(yán)肅的襯線體，簡(jiǎn)單干凈的無(wú)襯線體給人一種休閑輕松的感覺。因此大多數(shù)App都是使用黑體作為默認(rèn)字體。如冬青黑體、思源黑體、Myriad等。

2. 字族 FontFamily

一個(gè)族類包含不同的字體，然而一個(gè)字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會(huì)發(fā)現(xiàn)超過(guò)40多個(gè)前綴是Helvetica的字族。這是為了協(xié)助人們?cè)诓煌氖褂脠?chǎng)景下表達(dá)合適的意思。

知識(shí)點(diǎn)：

基本字族包括細(xì)體、標(biāo)準(zhǔn)、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個(gè)著作」的含義。

例如：「若我們能以滿懷新鮮的眼神去觀照日常，「設(shè)計(jì)」的意義定會(huì)超越技術(shù)的層面，為我們的生活觀和人生觀注入力量。」（引自原研哉的《設(shè)計(jì)中的設(shè)計(jì)》）

3. X-height（X字高）

在西文字體中，x高度是指字母的基本高度，就是基線和主線之間的距離。它指一個(gè)字體中小寫字母的x高度，在現(xiàn)代字體設(shè)計(jì)領(lǐng)域，x高度代表了一個(gè)字體的設(shè)計(jì)因素，因此在一些場(chǎng)合字母x本身并不完全等于x字高。

除了字母a、c、e、m、n、o等高度一樣，還有一些小寫字母的字高都比x字高要大，并分為兩類：一是含有升部的字母，字母筆畫含有向上部分，如字母b、d、h；另一類是含有降部的字母，字母的筆畫向下超過(guò)了基線，如字母g、p、q。

4. 字號(hào) Font-size

字號(hào)就是字體大小，通常在網(wǎng)頁(yè)端使用px作為字號(hào)的單位。移動(dòng)端興起后，iOS字體單位是pt，Android是sp。

以iOS為例，正文字號(hào)不應(yīng)小于11pt，這樣才能被正常閱讀，建議在14-18pt之間。在使用較大的字體來(lái)獲得更好的易讀性的同時(shí)，我們也應(yīng)相應(yīng)地減小字體的字重，考慮Light、Thin，因?yàn)檫^(guò)重的字體會(huì)太過(guò)醒目，影響其他內(nèi)容的顯示效果。

當(dāng)字體大小為12-18pt時(shí)，建議使用Regular，18-24pt時(shí)，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過(guò)32pt時(shí)，建議使用Ultralight。

字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無(wú)序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。

設(shè)計(jì)中的最小字號(hào)

我們都知道在界面設(shè)計(jì)中最小字號(hào)不能低于20px，那是因?yàn)?，正常情況下，在手機(jī)距離眼睛30cm左右，使用視角計(jì)算公式，我們能識(shí)別到的的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我們經(jīng)常使用iPhone7的尺寸1334×750為例。iPhone7的dpi為324，也就是一英寸上顯示324個(gè)像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。

字號(hào)的基數(shù)關(guān)系

我們?cè)谧鲈O(shè)計(jì)時(shí)，字號(hào)的單位最好使用一個(gè)基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實(shí)我們?cè)谧鲆苿?dòng)端設(shè)計(jì)時(shí)，單位需要遵循偶數(shù)原則，因?yàn)殚_發(fā)中的單位是以一倍圖的基數(shù)來(lái)進(jìn)行計(jì)算。那么其實(shí)在制定字體規(guī)范中，使用2為單位會(huì)導(dǎo)致字號(hào)過(guò)多，且2號(hào)字體的差異化不大。所以在字號(hào)方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會(huì)出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。

5. 字重 FontWeight

Weight，中文翻譯為「字重」，是指字體筆畫的粗細(xì)，字體中很重要一個(gè)概念，不同字重傳遞出來(lái)視覺感受完全不一樣。一般在字體家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字體廠商劃分字重各有不同，例如「蘋方」字體就有6種不同的字重。

一般都有細(xì)體、正常、粗體三種基本字族。在應(yīng)用場(chǎng)景上，通常「細(xì)體」多用于超大號(hào)字體；「正?！褂糜谡膬?nèi)容；「粗體」表示強(qiáng)調(diào)，多用于標(biāo)題；

兩種字重屬性

輕字重：傳遞出輕盈放松的視覺感受，常配合粗的字重使用，在一些輔助信息，說(shuō)明文案時(shí)候使用；

重字重：視覺感受莊重，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，頁(yè)面大標(biāo)題，數(shù)字，引導(dǎo)行動(dòng)操作點(diǎn)上等；

例如百度網(wǎng)盤「發(fā)現(xiàn)」頁(yè)就用了Regular、Medium、Semibold三種字重以拉開信息層次對(duì)比；

知識(shí)點(diǎn)：

需要注意的是：在進(jìn)行界面設(shè)計(jì)時(shí)，不要用軟件自帶的文本加粗，它不僅破壞了字體本身的美感，還改變了文字原本的字寬，小字體下會(huì)模糊不清，合理的方式是使用字體本身的字重來(lái)控制粗細(xì)。

注意超細(xì)體的字體

字重超細(xì)的字體要謹(jǐn)慎使用。如果你設(shè)計(jì)的文本是裝飾性倒還好，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分低分辨率的手機(jī)屏幕上看起來(lái)會(huì)非常糟糕。

6. 字色 FontColor

字色即文字對(duì)應(yīng)的顏色，不做過(guò)多解釋。需要大家注意的是 遠(yuǎn)離純黑色和純灰色！

純黑色就像沒有生命力的深淵，能吞噬所有細(xì)節(jié)，使用戶陷入冷冰冰的極端情緒中。純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了就會(huì)感覺疲勞，讓用戶產(chǎn)生焦慮情緒。

還有就是真實(shí)世界中是不存在純黑色的。嘗試在色彩中加入一些色相，這樣就不會(huì)讓頁(yè)面看上去死氣沉沉的。例如iOS系統(tǒng)「設(shè)置」頁(yè)面背景色就是加入了白色的低飽和度藍(lán)色，看上去柔和自然。

7. 字符樣式 FontStyle

除了以上幾個(gè)最常用的文字屬性外，還有幾個(gè)使用頻率比較低的字體設(shè)置。例如帶下劃線的、刪除線的文本。「下劃線文本」一般出現(xiàn)在「文字按鈕」或帶鏈接的網(wǎng)址，而「刪除線文本」一般會(huì)出現(xiàn)在商品櫥窗的現(xiàn)價(jià)、原價(jià)

例如「CCtalk」的課程現(xiàn)價(jià)和原價(jià)的區(qū)分，原價(jià)用刪除文本，「微信讀書」文章底部「加入書架 隨時(shí)閱讀」就是帶鏈接的下劃線文本。

8. 字符選項(xiàng) Text options

Ps和Sketch都有文字（字符）選項(xiàng)一欄，主要針對(duì)西文字母大小寫格式變換的設(shè)置。最常見有默認(rèn)大小寫、全部大寫、全部小寫和小型大寫字母，Ps里面還有「上標(biāo)」和「下標(biāo)」。

• 默認(rèn)大小寫：即正常大小寫格式，軟件不做干預(yù)；

• 全部大寫：如果輸入的是小寫字母，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把小寫改為大寫；

• 全部小寫：如果輸入的是大寫字母，或者只是首字母大寫，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把所大寫改為小寫；

• 小型大寫字母：這個(gè)選項(xiàng)比較特殊，所謂「小型大寫」就是，在字號(hào)一樣的情況下，與小寫字母一樣高，外形與大寫字母保持一致。

注意英文大寫

純大寫的字母文本本身不太適合大篇幅閱讀，會(huì)加大閱讀障礙，用的時(shí)候注意要額外拉開字母之間的字間距，提升可讀性。

9. 全角與半角 Full-width and half-width

全角是指一個(gè)字符占用兩個(gè)標(biāo)準(zhǔn)字符的位置。中文字符、全角的英文字符、國(guó)標(biāo)GB2312-1980中的圖形符號(hào)、特殊符號(hào)都是全角字符。半角是指一個(gè)字符占用一個(gè)標(biāo)準(zhǔn)字符的位置。

通常情況下，英文字母、數(shù)字、符號(hào)等都是半角字符。半角和全角主要是針對(duì)標(biāo)點(diǎn)符號(hào)來(lái)說(shuō)的，因?yàn)檎Ｇ闆r下沒有打全角英文的需求。

知識(shí)點(diǎn)：

在設(shè)計(jì)作品時(shí)也一定要記得中文搭配全角符號(hào)，英文使用半角符號(hào)。否則會(huì)出現(xiàn)諸如「你好.」或者「t h a n k s。」這樣的錯(cuò)誤?？砂存I盤「capslock」鍵切換全角和半角。這個(gè)小知識(shí)點(diǎn)雖然非常基礎(chǔ)，卻也是設(shè)計(jì)中經(jīng)常出錯(cuò)的地方。

iOS與Android

眾所周知，iOS和Android兩大陣營(yíng)都有各自的設(shè)計(jì)系統(tǒng)，要作出符合平臺(tái)規(guī)范的設(shè)計(jì)，設(shè)計(jì)師應(yīng)熟讀各平臺(tái)的設(shè)計(jì)規(guī)則。因?yàn)楸酒灾v字體為主，我們就來(lái)看看iOS和Android各自字體的規(guī)范是什么樣的。

1. iOS字體規(guī)范

可用字體

在iOS系統(tǒng)規(guī)范中，中文字體是「蘋方」字體。英文字體是「San Francisco」也簡(jiǎn)稱「SF-UI」，英文還有另外一個(gè)襯線體「NewYork」。除了在iOS和Mac OS上，還單獨(dú)為Watch OS單獨(dú)對(duì)字體進(jìn)行了調(diào)整，命名為 San Francisco Compact。

字體設(shè)置

因?yàn)樵谟⑽淖煮w下，字體環(huán)境比較復(fù)雜，為了讓字體在任何地方看起來(lái)都最佳，蘋果官方針對(duì)不同字號(hào)開發(fā)了兩套「SF-UI Text」和「SF-UI Pro」字體，而每套字體下面又分為Text（文本模式）與Display（展示模式）兩種屬性，Text只有6個(gè)字重，而Display則有9個(gè)字重。

這么多類型的字體我們?cè)撛趺从媚?？iOS的建議是，在字號(hào)小于20pt時(shí)，使用SF-UI Text，大于或等于20pt時(shí)，則使用SF-UI Display。這需要我們?cè)诮缑嬖O(shè)計(jì)時(shí)手動(dòng)切換。

對(duì)于「NewYork」，小于20點(diǎn)的文本使用小號(hào)，20到35點(diǎn)之間的文本使用中號(hào)，36到53點(diǎn)之間的文本使用大號(hào)，54點(diǎn)或更大的文本使用特大號(hào)。

蘋方字體提供了6個(gè)字重供設(shè)計(jì)開發(fā)者使用。所以從iOS11開始，iOS使用Semibold中粗體、大字號(hào)作為界面的標(biāo)題變的更為流行起來(lái)，較為明顯的有 iOS 中的一些原生APP，比如App Store、Apple Music…

知識(shí)點(diǎn)：

在iOS中，默認(rèn)字體單位是「pt」，正文字號(hào)不應(yīng)小于11pt，建議在15-18pt之間。在使用較大的字體來(lái)獲得更好的易讀性同時(shí)，也應(yīng)該相應(yīng)地減小字體的字重，因?yàn)檫^(guò)重的字體會(huì)太過(guò)醒目厚重，影響其他內(nèi)容的顯示效果。

iOS更全面的文字設(shè)置

動(dòng)態(tài)類型可以通過(guò)讓讀者選擇他們喜歡的文本大小來(lái)提供額外的靈活性，除了標(biāo)準(zhǔn)的動(dòng)態(tài)類型大小之外，iOS系統(tǒng)還為有閱讀大字體的需求的用戶提供了許多字號(hào)上的調(diào)整（可在系統(tǒng)字體顯示大小設(shè)置）

iOS「顯示與亮度」下設(shè)置「文字大小」模式

「蘋方」和「SF-UI」字體可在iOS規(guī)范網(wǎng)站免費(fèi)下載

網(wǎng)址：https://developer.apple.com/fonts/

2. Android字體規(guī)范

可用字體

在Android設(shè)備中，Android始祖Google為了更好的追求視覺效果，聯(lián)合了Adobe設(shè)計(jì)發(fā)布了「思源黑體」(Noto)來(lái)作為中文默認(rèn)字體，「Roboto」為英文字體。

字體類型

思源黑體，英文名為「NotoSans CJK」。該字體不僅僅在字形上更易于在屏幕閱讀，并且擁有7種字重，充分滿足了設(shè)計(jì)的要求。

英文「Roboto」字體，只有6個(gè)字重，視覺語(yǔ)言與思源黑體Noto保持一致。該字體具有「現(xiàn)代的」和「平易近人」的氣質(zhì)，是「Material Design」設(shè)計(jì)風(fēng)格下的推薦字體。

字體設(shè)置

Material Design字體規(guī)范，字體類型比例支持的十三種樣式的組合。它包含可重用的文本類別，每種類別都有預(yù)期的應(yīng)用程序和含義。

注：Web瀏覽器根據(jù)根元素大小計(jì)算REM（根em大?。?。 現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認(rèn)值為16px，因此轉(zhuǎn)換為SP_SIZE / 16 = rem。

△Material Design設(shè)計(jì)類型比例。（字母間距值與Sketch兼容。）

知識(shí)點(diǎn)：

值得注意的是，在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式是：

px = sp*ppi/160 ，sp = px / (ppi / 160)

以iPhone7為例，尺寸是750×1334，密度326ppi 來(lái)?yè)Q算，那么Android的1dp = 1 * 326/160 ≈ 2px

「思源黑體」和「Roboto」字體可在GoogleFonts免費(fèi)下載，并且可以商用。

網(wǎng)址：http://www.googlefonts.cn/

3. 話題擴(kuò)展

值得一提的是，越來(lái)越多的手機(jī)廠商，為了能夠強(qiáng)化自身的品牌形象，推出了定制款的字體。

比如小米的「小米蘭亭」：

OPPO的「OPPO Sans」：

三星的「SamsungOne」：

字體基礎(chǔ)知識(shí)小結(jié)

正如開頭所說(shuō)，文字是界面中最核心的元素，字體作為基本語(yǔ)言，是設(shè)計(jì)中體現(xiàn)品牌很重要一點(diǎn)，字體選擇非常重要，字體也是設(shè)計(jì)中占比（約 80%）最大的內(nèi)容，所以我們一定要熟練掌握，接下來(lái)將從文字行高、字間距、行間距等說(shuō)起，圍繞字體排版繼續(xù)聊。

人們是如何閱讀的

設(shè)計(jì)中，好的排版能讓用戶愉快地閱讀，而不好的排版則會(huì)給用戶帶來(lái)糟糕的閱讀體驗(yàn)。因此排版的潛在重要性不容忽視。

無(wú)論是在西方國(guó)家還是亞洲國(guó)家，大部分人們的閱讀習(xí)慣都是從左到右。這種閱讀模式已經(jīng)延續(xù)了幾百年，因此如無(wú)特殊需求，你應(yīng)該使你的文本左對(duì)齊，這樣符合人們一貫的閱讀習(xí)慣（阿拉伯地區(qū)除外）。人缺乏耐性，在閱讀過(guò)程中更似是一種遠(yuǎn)近不定的跳躍「掃視」?？菰锏奈淖秩绻麤]有經(jīng)過(guò)任何排版處理，會(huì)讓讀者瞬間失去閱讀的興趣，除非非讀不可。所以通過(guò)改進(jìn)文字內(nèi)容的結(jié)構(gòu)和排版來(lái)提高閱讀性乃至「誘讀性」，是一件十分必要的事情。

文字排版中的常見元素

1. 字間距與字偶間距

字間距，英文名為「spacing」，即字符間的距離，事實(shí)上他是字符圖形外邊界框的尺寸和字符在方框中的位置的距離。

字偶間距，英文名為「Kerning」，也叫做「字距調(diào)整」，是在字間距的基礎(chǔ)上，為實(shí)現(xiàn)不同字偶（一對(duì)字符）可以有不同字間距的調(diào)整值。我們都知道，不同的字母外形不同，所以只有同樣的字間距是不協(xié)調(diào)的。例如，「NA」間是標(biāo)準(zhǔn)的字間距，而「WA」由于W和A的形狀可以重疊，所以需要負(fù)字偶間距才能達(dá)到協(xié)調(diào)一致的外觀。

在大段落文字排版時(shí)，我們一般不需要更改字間距和字偶間距，因?yàn)樽煮w設(shè)計(jì)師已經(jīng)對(duì)他們做過(guò)了最優(yōu)處理。在對(duì)一組字符單獨(dú)設(shè)計(jì)時(shí)，就需要考慮字偶間距，以達(dá)到更協(xié)調(diào)的視覺效果?？偟膩?lái)說(shuō)，字號(hào)越小，字距應(yīng)當(dāng)相對(duì)越大，行高也應(yīng)該相對(duì)越大。反之亦然。

西文字間距還分為：比例字體和等寬字體

比例字體：根據(jù)字符外形特點(diǎn)設(shè)置不同字寬的字體，使得字體外形協(xié)調(diào)，可讀性更好；

等寬字體：每個(gè)字符設(shè)置相同字寬的字體，字符間距較大，它們經(jīng)常被用于顯示計(jì)算機(jī)代碼示例；

2. 字間距的三種形式

標(biāo)準(zhǔn)間距：即默認(rèn)的字間距，字與字之間的距離不大也不小，在設(shè)計(jì)中要根據(jù)不同的字號(hào)設(shè)置不同的字間距來(lái)排版，往往需要我們根據(jù)字號(hào)、字重的不同動(dòng)態(tài)調(diào)節(jié)間距參數(shù)，避免千篇一律使用軟件默認(rèn)間距。

緊湊間距：字與字之間的距離向里縮進(jìn)，在字符工具里的「字間距」數(shù)值為負(fù)數(shù)，一般在-5%~-30%不等，通常用在標(biāo)題中。

寬松間距：與緊湊型間距相反，字與字之間間距向外擴(kuò)大，在字符工具里的「字間距」數(shù)值為正數(shù)，一般在5%~30%不等，通常用在正文中。

知識(shí)點(diǎn)：

提示：字間距雖然有以上三種形式，但是在實(shí)際工作中也要具體問(wèn)題具體分析，例如有些中文字體本身「外邊框」的距離就比較大，如果再加大字間距，就會(huì)顯得過(guò)于分散。

3. 西文詞距

在西文閱讀時(shí)，視覺上的自然界限是「詞距」而不是「字距」。如果排版時(shí)需要進(jìn)行例如「兩端對(duì)齊」的行內(nèi)間距調(diào)整，中文直接可以動(dòng)「字距」，把調(diào)整量均勻地放到每個(gè)字間里；而西文卻是動(dòng)「詞距」，只能把調(diào)整量加到詞距里，而單詞內(nèi)部的字距依然是保持字體設(shè)計(jì)師預(yù)設(shè)的原始字距，這是保證西文易讀性的關(guān)鍵所在。

4. 標(biāo)點(diǎn)避頭尾

在古代，書籍排版可以做到字間距恒定，原因是古代不存在「標(biāo)點(diǎn)」，也就沒有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問(wèn)題。而現(xiàn)代漢語(yǔ)存在標(biāo)點(diǎn)符號(hào)，有的標(biāo)點(diǎn)不能放在行首(如逗號(hào)、頓號(hào)、句號(hào)等)，有的不能放在行尾(引號(hào)、前括號(hào)等)。處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾，通過(guò)將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后，騰出了空間給本來(lái)排不到的逗號(hào)，確保了字間距的恒定（篇幅限制，本文暫不談文字編排具體調(diào)整方法）。更詳細(xì)的介紹可移步字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 了解。

5. 文本框

在設(shè)計(jì)軟件中，我們?cè)谔砑游谋緯r(shí)，就會(huì)創(chuàng)建一個(gè)文本區(qū)域，例如Sketch中文本區(qū)域有三種類型，自動(dòng)寬度、自動(dòng)高度、固定尺寸，而「固定尺寸」可配合「設(shè)置文字層垂直對(duì)齊方式」使用。

6. 對(duì)齊方式

文本的對(duì)齊方向有左、中、右三種對(duì)齊方式。文本對(duì)齊的標(biāo)準(zhǔn)是基于文本區(qū)域的邊界決定的，只有設(shè)置固定的文本區(qū)域?qū)R才有意義。

7. 行高

行高或行距是文字排版的基礎(chǔ)參數(shù)，也是排版品質(zhì)的先決要素之一。行高是一行文本垂直方向的高度，這個(gè)高度和字高無(wú)關(guān)，文字內(nèi)容水平居中，如下圖所示：

8. 英文行高

英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，基線（baseline）是英文字體結(jié)構(gòu)中的概念，在css里文字的元素都是按基線來(lái)對(duì)齊的。西文基本行高是字號(hào)的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來(lái)創(chuàng)造行間空隙。

9. 中文行高

中文的結(jié)構(gòu)屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文因?yàn)樽址軐?shí)且高度一致，所以一般行高需要更大，根據(jù)不同用戶人群（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5~2倍甚至更大。

知識(shí)點(diǎn)：

提示：不管是標(biāo)題、正文還是注釋文字，行高都不易過(guò)大或過(guò)小，會(huì)導(dǎo)致閱讀困難?？偟膩?lái)說(shuō)，字號(hào)越大行高應(yīng)該越小，字號(hào)越小行高應(yīng)該越大。

10. 行長(zhǎng)

在《中文排版需求》里，明確寫明了這項(xiàng)基本要求：

2.3.5 版心設(shè)計(jì)的注意事項(xiàng)：「一行的行長(zhǎng)應(yīng)為文字尺寸的整數(shù)倍，各行的位置盡可能頭尾對(duì)齊?！?

「一行的行長(zhǎng)應(yīng)為文字尺寸的整數(shù)倍」，這一基本的、理所應(yīng)當(dāng)?shù)男枨罂此坪?jiǎn)單，但是在實(shí)際操作中，卻往往由于單位換算等各個(gè)原因沒有得到實(shí)現(xiàn)。對(duì)于后半句提到的「頭尾對(duì)齊」，將另文討論，但顯然也和本文相關(guān)。正因?yàn)樵O(shè)計(jì)師想實(shí)現(xiàn)「頭尾對(duì)齊」才會(huì)盲目地用軟件的「兩端對(duì)齊」功能，大家可以看看身邊的印刷品，注意看一下每段的最后一行間距是不是統(tǒng)一，就可以知道設(shè)計(jì)師有沒有按照這個(gè)原則排版。

中文的一個(gè)字占兩個(gè)字符，英文一個(gè)字占一個(gè)字符。正文的行長(zhǎng)通常在40到60個(gè)字符之間。在行長(zhǎng)較寬的區(qū)域（例如桌面）中，包含最多120個(gè)字符的較長(zhǎng)行將需要將行高增大。行長(zhǎng)過(guò)長(zhǎng)易讀性就會(huì)變差，讀者閱讀時(shí)容易串行，造成閱讀困難。合理的行長(zhǎng)使用戶在行間跳轉(zhuǎn)時(shí)感到輕快和愉悅，反之則會(huì)使閱讀成為一種負(fù)擔(dān)。

11. 行間距

行距是指臨近兩行之間的距離。合適的行距讓用戶閱讀舒服，閱讀效率也高，行距太緊湊會(huì)讓內(nèi)容擠成一團(tuán)，實(shí)現(xiàn)無(wú)法正常閱讀；行距太寬松會(huì)讓內(nèi)容松散，產(chǎn)生了我們通常意義上的「河流」，阻斷了行的視線，Photoshop中默認(rèn)行距是1.2倍的字號(hào)，例如字號(hào)是30px，那么將行距設(shè)為36px和默認(rèn)「自動(dòng)」的效果一致。1.2倍的行距對(duì)中文排版來(lái)說(shuō)通常過(guò)小，合適的行間距通常為1.5～2倍之間。文本字體越小，兩行之間的行間距應(yīng)該越大，確保字與行呼吸的空間。

12. 英文行間距

英文的行間距指的是一行英文的底部線與下一行英文的頂部線之間的距離。可以簡(jiǎn)單的理解為「行與行之間的距離」。另外英文文字底部和頂部都有對(duì)應(yīng)的專有名詞，英文頂部的那條叫「升部線」，底部那條叫「降部線」。

13. 中文行間距

中文的行間距就比較好理解了，是指一行文字的最底部與下一行文字的最頂部之間的距離。即行與行之間的距離。

14. 段間距

段間距：段落與段落之間的距離，可保持頁(yè)面節(jié)奏，與字體、行高相互關(guān)聯(lián)。

為保證文章易讀性，正文段間距，可以簡(jiǎn)單地取一個(gè)空行（也就是一個(gè)行高），這是比較常規(guī)也比較合適的做法。舉個(gè)例子：字號(hào)12，行高設(shè)定20，段間距 = 行高 + 行間距。行間距越大，段間距就越大；行間距越小，段間距就越小，行距與段間距成正比。段落之間首尾的行之間間距應(yīng)該大于段內(nèi)的間距，這時(shí)候就應(yīng)該增加段間距，使得文本的閱讀體驗(yàn)得到進(jìn)一步的提升。

排版的CRAP原則

在任何一個(gè)設(shè)計(jì)中都需要把各個(gè)元素進(jìn)行分級(jí)，分清主次，這樣才能更好地抓住重點(diǎn)。為了能分清各元素的主次，就需要用到CRAP原則。這四個(gè)原則分別是對(duì)比、重復(fù)、對(duì)齊、親密性。

1. 對(duì)比 Contrast （增強(qiáng)效果、組織信息）

對(duì)比的基本作用是突出重點(diǎn)，增加可讀性。附加作用是有效增強(qiáng)視覺效果，打破平淡，吸引讀者注意。

一些界面排版混亂，可讀性非常差，用戶的視線不知道集中在哪，導(dǎo)致這種情況的發(fā)生都是因?yàn)榻缑鎯?nèi)容對(duì)比不明顯造成。在同一個(gè)視覺區(qū)域內(nèi)的邏輯不同的元素應(yīng)該有所區(qū)別，以避免視覺上的相似，這樣就可以有效的分清主次，為了使主要元素更突出，次要元素更弱化，可以盡量使它們的顏色，字體、大小，留白不同。如果兩個(gè)元素不盡相同，那就讓他們截然不同。比如，使用「14 號(hào)字」和「15 號(hào)字」進(jìn)行對(duì)比，差異就很不明顯，而使用「14號(hào)字」和「24 號(hào)字」，差異就明顯得多，一眼就能看到大號(hào)的字體。

在這點(diǎn)上，「微信讀書」的列表頁(yè)就做得非常好，它通過(guò)標(biāo)題與描述的字體粗細(xì)、大小、顏色進(jìn)行對(duì)比，把最有用的信息直觀地呈現(xiàn)在用戶面前標(biāo)題是吸引用戶關(guān)注的關(guān)鍵，作者和評(píng)分只是給用戶一種參考，不起決定性作用。因此，如果沒有對(duì)比原則，標(biāo)題和描述的字體同樣粗細(xì)、大小，你就會(huì)發(fā)現(xiàn)視線總是會(huì)情不自禁的被評(píng)分所干擾。

大小對(duì)比

為了區(qū)分文字、圖片、圖標(biāo)等元素的重要性，通常采用尺寸的大小來(lái)做對(duì)比。例如文章的正副標(biāo)題，副標(biāo)題一般用來(lái)解釋主標(biāo)題的內(nèi)容，因此副標(biāo)題的文字應(yīng)該通過(guò)大小和顏色調(diào)整變成次級(jí)，讓用戶閱讀時(shí)分清主次。

顏色對(duì)比

在排版中，首先要產(chǎn)生對(duì)比效果的就是背景和文字。文字與背景如果在顏色上很接近，那么就不容易區(qū)分開來(lái)吸引用戶注意力，一般來(lái)說(shuō)，人們習(xí)慣白紙黑字（也是因?yàn)槿祟愑袝鴮懶枨笠詠?lái)形成的），即白色背景和黑色文字。也有黑紙白字，例如現(xiàn)在APP都在做的DarkMode暗色模式，但其實(shí)暗色背景搭配淺色文字并不適合大量閱讀。當(dāng)然這也是為了配合用戶使用場(chǎng)景，在夜晚光線較暗的環(huán)境下，深色模式或許更利于閱讀?！咐渲R(shí)：暗色模式其實(shí)就是廠商為了解決電池耗電量而出的計(jì)策，只是換了個(gè)噱頭而已」總之，不管設(shè)計(jì)中使用黑白、紅綠、藍(lán)黃哪一種配色，一定要注意文字和背景的對(duì)比是否清晰便于閱讀。

2. 重復(fù) Repeated （統(tǒng)一有秩序）

重復(fù)是保持整齊的重要準(zhǔn)則。既包括字體、字號(hào)的重復(fù)，也包括顏色、風(fēng)格的重復(fù)。對(duì)于新人來(lái)說(shuō)，要時(shí)刻牢記，盡量統(tǒng)一字體、字號(hào)、顏色等一系列元素，在統(tǒng)一的基礎(chǔ)上，找出需要強(qiáng)調(diào)的部分，進(jìn)行更改，通過(guò)對(duì)比原則進(jìn)行強(qiáng)化。

如果相同內(nèi)容（如標(biāo)題）屬于同一種邏輯關(guān)系，則應(yīng)該使他們的字體、顏色、留白盡量保持一致。這樣可以增加內(nèi)容的條理性，并加強(qiáng)設(shè)計(jì)的統(tǒng)一性。在重復(fù)原則下，用戶會(huì)因?yàn)橐曈X慣性繼續(xù)選招設(shè)計(jì)線索，根據(jù)重復(fù)性設(shè)計(jì)線索順場(chǎng)地瀏覽下去。

知識(shí)點(diǎn)：

重復(fù)不是單一的機(jī)械式的元素重復(fù)，我們可以理解為用統(tǒng)一的重復(fù)元素塑造一個(gè)新的元素。當(dāng)然這是在保留基本的元素時(shí)所塑造出來(lái)的高度統(tǒng)一性的畫面，從而增強(qiáng)我們所想要的設(shè)計(jì)效果。

3. 對(duì)齊 Alignment （統(tǒng)一而有條理）

在頁(yè)面設(shè)計(jì)上每一元素都應(yīng)該與頁(yè)面上的另一個(gè)元素存在某種視覺聯(lián)系，這樣才能建立清晰的結(jié)構(gòu)。任何元素內(nèi)容在在版面上都應(yīng)該盡量上下左右對(duì)齊，對(duì)于設(shè)計(jì)新人來(lái)說(shuō)，最好嚴(yán)格遵循一種對(duì)齊方式，不然就會(huì)導(dǎo)致混亂，實(shí)在不行，至少保證在同一內(nèi)容版塊中遵循一種對(duì)齊方式。方法也很簡(jiǎn)單，就是找到一條明確的對(duì)齊線，并用它來(lái)對(duì)齊。

對(duì)齊包括左對(duì)齊、居中對(duì)齊、右對(duì)齊 3 種方式。

• 左對(duì)齊：頁(yè)面中的元素以左基線對(duì)齊。左對(duì)齊是最常見的對(duì)齊方式，簡(jiǎn)潔大方，利于閱讀；

• 居中對(duì)齊：頁(yè)面中的元素以中基線對(duì)齊。居中對(duì)齊給人一種嚴(yán)肅與正式感，不過(guò)也會(huì)有呆板的感覺；

• 右對(duì)齊：頁(yè)面中的元素以右基線對(duì)齊。相對(duì)少見的對(duì)齊方式，給人一種人為干預(yù)的感覺，加強(qiáng)了形式感，降低了閱讀效率；

4. 親密性 Proximity （實(shí)現(xiàn)組織性）

親密性是實(shí)現(xiàn)視覺邏輯化的第一步，它是指關(guān)系越近的內(nèi)容，在視覺上應(yīng)該靠得越近，反之，關(guān)系越疏遠(yuǎn)的內(nèi)容，在視覺上應(yīng)該越遠(yuǎn)。簡(jiǎn)單的來(lái)講就是要把畫面中的元素分類，把每一個(gè)分類做成一個(gè)視覺單位，而不是眾多的孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。

那做好親密性有哪些方法呢，私以為有以下幾點(diǎn)：

留白：留白是設(shè)計(jì)中通用的萬(wàn)金油原則，通過(guò)留白建立距離關(guān)系進(jìn)行內(nèi)容區(qū)分；

左圖歌曲封面和歌曲名信息間隔比每首歌曲上下間距還大，導(dǎo)致用戶的視線流呈垂直方向。

分割：簡(jiǎn)單來(lái)說(shuō)就是分組，建立組合關(guān)系。常見的形式有線條分割，卡片分割等；

色相：通過(guò)顏色的對(duì)比，不同顏色的信息會(huì)暗示這是同一類。常見的日歷行程就是通過(guò)不同顏色來(lái)區(qū)分時(shí)間和具體事項(xiàng)。

方向：不同的排版方式也可以很好的區(qū)分信息；

什么是信噪比及在設(shè)計(jì)中的作用

「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領(lǐng)域的概念。在互聯(lián)網(wǎng)產(chǎn)品中把 「信噪比」概念借用到了用戶體驗(yàn)。合理的信噪比可改善與用戶的交流。加大信號(hào)可以將有用的信息快速準(zhǔn)確的傳達(dá)給用戶，減少噪音并使信號(hào)脫穎而出。

從人機(jī)交互角度，我們應(yīng)該刪除與任務(wù)不相關(guān)的內(nèi)容或設(shè)計(jì)元素。你甚至可以將高信噪比的目標(biāo)與極簡(jiǎn)主義聯(lián)系起來(lái)。但是「信號(hào)」和「噪音」的確切含義會(huì)有所不同，一個(gè)人的信號(hào)可能是對(duì)另一個(gè)人的干擾，因此，用戶界面的信噪比有低有高，取決于具體的用戶和具體的任務(wù)。在用戶界面中，信噪比所涉及的「信息」可以是任何內(nèi)容，包括文本內(nèi)容，視覺元素或動(dòng)畫等。為了提高設(shè)計(jì)傳達(dá)信息的效率并幫助用戶完成任務(wù)，需要提高信噪比。

知識(shí)點(diǎn)：

用戶始終喜歡清晰、簡(jiǎn)單、自然、好用的設(shè)計(jì)和產(chǎn)品。但需要注意的是，除了交流必要信息之外，我們還希望界面在視覺上具備吸引力，以喚起用戶的某些情感。有了額外的目標(biāo)（比如品牌宣傳、業(yè)務(wù)目標(biāo)等），應(yīng)該以合理的信噪比為目標(biāo)，而不是以絕對(duì)的方式排除所有「無(wú)關(guān)」的信息。

例如iOS6到iOS7圖標(biāo)擬物到扁平到改變，讓用戶可以更快速準(zhǔn)確的獲取到有效信息。而這一過(guò)程，就是典型的放大「信號(hào)」。

還有蝦米音樂的駕駛模式

我們都知道，在開車的時(shí)候操作手機(jī)是非常危險(xiǎn)的。在40km/h的速度下，看手機(jī)3秒，相當(dāng)于盲駛了35米。但有些情況下又不得不操作手機(jī)，比如緊急來(lái)電或者導(dǎo)航出錯(cuò)……這時(shí)，駕駛模式的界面就顯得尤為重要了，讓用戶能夠快速準(zhǔn)確的識(shí)別信息并進(jìn)行操作，可以大大提高行車的安全性。

在界面中無(wú)論是何種分割方式(分割線、卡片陰影、分割色塊)，過(guò)于濃重的表現(xiàn)都會(huì)影響有效信息的獲取，成為界面中的「噪音」，因此我們應(yīng)該讓它們細(xì)一點(diǎn)、淡一點(diǎn)來(lái)降低表現(xiàn)，或者干脆不要(留白分割)。

圖版率的高低對(duì)設(shè)計(jì)的影響

圖版率就是頁(yè)面中圖片面積的所占比。在頁(yè)面設(shè)計(jì)中，除了文字之外，通常都會(huì)加入圖片或是插圖等視覺直觀性的內(nèi)容。這種文字和圖片所占的比率，對(duì)于頁(yè)面的整體效果和其內(nèi)容的易讀性會(huì)產(chǎn)生巨大的影響。當(dāng)然，除圖片本身外，我們也可以通過(guò)填充底色，圖形疊底等方式來(lái)提高界面中的圖版率。

圖版率高低的區(qū)別：同樣的設(shè)計(jì)風(fēng)格下，圖版率高的頁(yè)面會(huì)給人以熱鬧而活躍的感覺，反之圖版率低的頁(yè)面則會(huì)傳達(dá)出沉穩(wěn)、安靜的效果。提高圖版率可以活躍版面，優(yōu)化版面的視覺度。但完全沒有文字的版面也會(huì)顯得空洞，反而會(huì)削弱版面的視覺度。

在沒有圖像素材的情況下想要呈現(xiàn)出高圖版率，可以通過(guò)以下幾種方式來(lái)實(shí)現(xiàn)：

• 通過(guò)填充頁(yè)面底色，取得與提高圖版率相似的效果，從而改變頁(yè)面所呈現(xiàn)出來(lái)的視覺效果；

• 如果素材圖像尺寸小，可以通過(guò)色塊的延伸或是圖像的重復(fù)來(lái)組織頁(yè)面結(jié)構(gòu)，同樣可以提高圖版率；

• 利用排版的節(jié)奏感以及跳躍率（文字和圖片的跳躍率，是指版面中最大標(biāo)題和最大的圖與最小正文字體和圖片大小之間的比率）讓無(wú)趣的版面充滿活力，富有節(jié)奏的設(shè)計(jì)也能間接優(yōu)化頁(yè)面的圖版率；

• 增加頁(yè)面中的圖形也可以改善圖版率低的問(wèn)題。無(wú)論是數(shù)字、序號(hào)、圖標(biāo)，甚至是視覺處理后的標(biāo)題文字，都能提高頁(yè)面的視覺度，并給用戶留下活躍生動(dòng)的印象；

• 如果頁(yè)面中沒有圖片和插圖，那么通過(guò)對(duì)文字及其顏色的處理，也可以起到提高圖版率的作用；

上面的例子中，對(duì)于標(biāo)題文字都進(jìn)行了視覺加工，起到了整體頁(yè)面的裝飾效果。借助對(duì)這種文字大小、顏色、形狀的靈活運(yùn)用，來(lái)突出頁(yè)面的重點(diǎn)，避免視覺上的單調(diào)感。

文字在代碼中的實(shí)現(xiàn)及標(biāo)注

1. 文字在代碼中的實(shí)現(xiàn)

在開發(fā)落地的過(guò)程中，文字排版的開發(fā)實(shí)現(xiàn)是很重要的一個(gè)環(huán)節(jié)，也是經(jīng)常讓設(shè)計(jì)師和開發(fā)小哥哥頭疼不已的地方。字體和排版在實(shí)現(xiàn)上經(jīng)常會(huì)出現(xiàn)偏差，主要原因在于開發(fā)的標(biāo)注方式和設(shè)計(jì)軟件不一致。因此理解文字開發(fā)的實(shí)現(xiàn)方式，細(xì)節(jié)問(wèn)題的解決方法至關(guān)重要。在Android中，文字開發(fā)工作是通過(guò)一個(gè)叫TextView控件來(lái)實(shí)現(xiàn)的，主要承擔(dān)文本顯示的任務(wù)，任何APP都不可避免的會(huì)用到它。TextView常用屬性如下圖：

2. 字體字重對(duì)應(yīng)的font-weight值

在前文聊過(guò)，每種字體都對(duì)應(yīng)有好幾種字重（Regular、Normal、Medium、Light ），在給開發(fā)的 UI 設(shè)計(jì)稿中，我們給的字體標(biāo)注通常有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不會(huì)直接給開發(fā) font-weight 的值。雖然這需要開發(fā)去熟記，但作為設(shè)計(jì)師了解它們的對(duì)應(yīng)關(guān)系，可以更順暢的和開發(fā)溝通。

在W3C Fonts節(jié)章的規(guī)范標(biāo)準(zhǔn)中有給具體數(shù)值（100至900）：

這些有序排列中的每個(gè)值，對(duì)應(yīng)字體的字重。其大致符合下列通用重量名稱：

當(dāng)然，并不是每一種字體都有這么多字重，那遇到有些字體只有2、3種字重，該怎么對(duì)應(yīng)font-weight 值呢？W3C Fonts也給出了解決方案，例如字重和400大致符合將會(huì)歸為Regular、Book、Roman；和700大致符合將會(huì)歸為Bold。若一個(gè)重量所指定的字形不存在，則應(yīng)當(dāng)使用相近重量的字形。通常，較重的重量會(huì)映射到更重的字形、較輕的重量會(huì)映射到更輕的字形。下圖所示：灰色表示該重量的字形不存在、使用的是相近重量的字形。

△ 只包含400、700和900重量字形的字體家族的對(duì)應(yīng)字重

△ 只包含300和600重量字形的字體家族的對(duì)應(yīng)字重

3. 文本框行高的問(wèn)題

我們都知道在設(shè)計(jì)的時(shí)候，可能字體使用的24pt，但其實(shí)字體本身占用的距離是包含了升部及降部區(qū)域的，這樣就導(dǎo)致其占用空間大于24pt，而變成了33pt。每個(gè)字體都有相應(yīng)設(shè)定的「字高」比例，可以通過(guò)sketch選中字體后的height值來(lái)進(jìn)行查看。線高越大，問(wèn)題就越大。下面的示例顯示文本框之間的距離設(shè)置為32px。如你所見，即使你將所有垂直間距都設(shè)置為相同的值，它們?cè)谝曈X上也遠(yuǎn)大于32px。

△ 雖然標(biāo)注出來(lái)的參數(shù)都是一樣大，但視覺上間距卻是不一樣的

4. Leading-Trim：數(shù)字排版的未來(lái)

去年六月，Microsoft Design贊助了一個(gè)新的css規(guī)范，稱為「Leading-Trim」。這個(gè)css方案能很好的解決上面這個(gè)問(wèn)題。

我們常用的UI設(shè)計(jì)工具，例如Figma和Sketch，似乎已經(jīng)采用了「half-leading」模式并以此方式渲染文本。因此，我們?cè)谠O(shè)計(jì)工具和瀏覽器中都遇到了這個(gè)問(wèn)題。

設(shè)計(jì)方面的解決方法相對(duì)容易：你可以忽略邊界框，而直接根據(jù)文本的大寫高度和基線來(lái)測(cè)量空間。這是一個(gè)手動(dòng)過(guò)程，因?yàn)榇蠖鄶?shù)設(shè)計(jì)工具沒有上限高度和基線的參照目標(biāo)，盡管設(shè)計(jì)師將盡一切努力使我們的設(shè)計(jì)看起來(lái)更好！但是，如果采用這種方法，開發(fā)人員仍將僅在CSS中實(shí)現(xiàn)邊界框間距。因此，它們會(huì)出現(xiàn)隨機(jī)的間距值。

為了緩解此隨機(jī)性問(wèn)題，開發(fā)人員可以在CSS中以負(fù)邊距「裁剪」文本框。但是負(fù)邊距將需要手動(dòng)確定，并且是特定于字體的，因此是「隨機(jī)的」。任何字體，瀏覽器，操作系統(tǒng)或語(yǔ)言環(huán)境的更改都將不可避免地導(dǎo)致你不小心設(shè)置邊距。此外，該技術(shù)通常不是良好的編碼實(shí)踐，并且可能導(dǎo)致意外的副作用。

Leading-Trim新規(guī)范

Leading-trim是CSS工作組正在引入的新CSS屬性。顧名思義，它就像文本框剪刀一樣工作。你只需使用兩行CSS，就可以從你選擇的參考點(diǎn)中修剪掉所有多余的空間。

代碼示例：

上面的示例首先使用text-edge（也是新屬性）來(lái)告訴瀏覽器，所需的文本邊緣是大寫高度和字母基線。然后，從兩側(cè)修剪多余部分。請(qǐng)注意，采用修剪僅會(huì)影響文本框。它不會(huì)切斷其中的文本。這兩行簡(jiǎn)單的CSS創(chuàng)建了一個(gè)干凈的文本框。這可以幫助你獲得更準(zhǔn)確的間距并創(chuàng)建更好的視覺層次。

使用后再來(lái)對(duì)比一下：

△使用新規(guī)范對(duì)比發(fā)現(xiàn)，右圖文字上下間距舒服多了，也更合理。

Leading-Trim修復(fù)對(duì)齊問(wèn)題

借助Leading-Trim，可以解決在APP上看到的所有奇怪的對(duì)齊問(wèn)題。例如，即使文字位于文本框內(nèi)，你的文本也不總是在容器中垂直居中。

默認(rèn)行高中保留的多余空間會(huì)導(dǎo)致文本不總是在文本框中居中。使用Leading-Trim修剪，就可以很省心的使文本垂直居中。

知識(shí)點(diǎn)：

原因是每種字體的設(shè)計(jì)也不同。它具有自己的默認(rèn)行高，并且其中的文本可以具有不同的大小和基線位置，并不都是水平居中對(duì)齊的。因此，有時(shí)即使字體大小，行高和文本框位置保持不變，更改字體也會(huì)改變文本的對(duì)齊方式，如下例所示，文字很明顯沒有對(duì)齊。

在第二個(gè)示例中，你可以看到Leading-Trim如何防止這種情況并使文本完美對(duì)齊。

一致性和工作流程的改進(jìn)

Leading-trim修整超出了使間距和對(duì)齊更準(zhǔn)確的范圍。它在建立的間距系統(tǒng)，為設(shè)計(jì)準(zhǔn)確性和一致性以及的設(shè)計(jì)到開發(fā)交接鋪平道路方面發(fā)揮著關(guān)鍵作用。

擁有間距系統(tǒng)有很多好處。設(shè)計(jì)師可以更快地確定間距，開發(fā)人員可以設(shè)置相應(yīng)的間距變量以消除代碼中的隨機(jī)間距值。但是目前，即使我們?cè)O(shè)置了間距系統(tǒng)，由于文本框中的額外空間，對(duì)于文本元素來(lái)說(shuō)也不是很準(zhǔn)確。如果我們嘗試忽略設(shè)計(jì)中的邊界框并在代碼中「裁剪」文本框，則會(huì)遇到那些棘手的解決方法問(wèn)題。

△應(yīng)用于文本元素且沒有Leading-trim修剪的間距系統(tǒng)

借助領(lǐng)先的文字間隔系統(tǒng)，從設(shè)計(jì)到開發(fā)的交接過(guò)程也將更加順暢，因?yàn)殚_發(fā)人員將能夠建立完全相同的系統(tǒng)，并且避免在布局錯(cuò)誤上花費(fèi)大量時(shí)間。最重要的是，領(lǐng)先的微調(diào)間距系統(tǒng)將幫助我們提供用戶信賴和喜歡的外觀更美觀的產(chǎn)品。

5. 設(shè)計(jì)中修改文字行高的方法

上面我們介紹了利用Leading-trim修剪字高的先進(jìn)方法，但是這個(gè)新CSS的規(guī)范還在編寫中，還未世界范圍的推進(jìn)，不過(guò)有「微軟」團(tuán)隊(duì)的扶持相信國(guó)際化也不會(huì)太遠(yuǎn)了。

在這之前，我們想要盡可能的解決字符多出的間距問(wèn)題，就需要在設(shè)計(jì)軟件里手動(dòng)修改了，手動(dòng)把文字行高與客戶端系統(tǒng)默認(rèn)行高保持一致，從而給出準(zhǔn)確的文字間距。開發(fā)在實(shí)現(xiàn)的時(shí)候iOS使用系統(tǒng)默認(rèn)行高，Android系統(tǒng)去掉文字上下padding。

這種方式雖會(huì)花費(fèi)不少時(shí)間，但也最，你可以據(jù)此設(shè)置出最美觀合理的間距，而不用擔(dān)心上線稿的還原度問(wèn)題，也便于我們后期的頁(yè)面校對(duì)和調(diào)整。

△在Sketch中修改文字高度

6. 什么是彈性適配

文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁(yè)邊距，中間彈性拉伸。這種方式可以做到較好的適配，也是做快速常用的適配方法。

7. 標(biāo)注工具

設(shè)計(jì)師將設(shè)計(jì)文件交付開發(fā)之前，應(yīng)站在程序員的角度著想，做好前期溝通，提供他們開發(fā)所需要的資源。設(shè)計(jì)文件的標(biāo)注可以使用Sketch插件或直接上傳「藍(lán)湖」，拿Sketch插件「Sketch Measure」為例，它是一款十分智能的標(biāo)注插件，主要功能包含兩大塊：標(biāo)注和規(guī)范。

工具欄匯合了Measure所有功能的快捷工具，永遠(yuǎn)置于畫布頂層，有了它就不用再頻繁通過(guò)菜單欄去使用功能。

做好規(guī)范后，點(diǎn)擊「導(dǎo)出規(guī)范」一鍵自動(dòng)生成Html頁(yè)面，瀏覽器打開頁(yè)面點(diǎn)擊其中任何元素都可以查看其屬性和間距，還包括代碼樣式，交給開發(fā)開發(fā)工程師后，不用溝通都能看明白。

△Sketch Measure導(dǎo)出標(biāo)注的網(wǎng)頁(yè)界面

設(shè)計(jì)驗(yàn)收環(huán)節(jié)

產(chǎn)品功能開發(fā)完成后，對(duì)產(chǎn)品對(duì)功能，視覺和交互操作進(jìn)行測(cè)試和驗(yàn)收，確保產(chǎn)品的可用性。一般在功能模塊驗(yàn)收完成后，就可以開始具體的視覺設(shè)計(jì)驗(yàn)收，這也是由主要設(shè)計(jì)師負(fù)責(zé)的模塊，主要驗(yàn)收顏色、字體、圖形、間距、控件和空狀態(tài)等。

因本文主講字體與排版，就拿這部分來(lái)說(shuō)，需要檢視的就有：

• 字體：是否用的平臺(tái)默認(rèn)字體，如果是內(nèi)置字體檢查字體顯示有沒問(wèn)題；

• 字號(hào)：導(dǎo)航欄、欄目名稱、分類頁(yè)簽、tab等字號(hào)大小是否符合規(guī)范；

• 字重：標(biāo)題和正文字重是否正確，粗體用的是哪一種，是Medium，還是SemiBold；

• 字色：標(biāo)題、正文、注釋、提示等文字顏色；

• 字間距：檢查中文間距和英文間距，段落文字標(biāo)點(diǎn)有無(wú)避頭尾；

• 行間距：段落文字行間距，有沒有出現(xiàn)多余的行高 ；

• ……

在檢視過(guò)程中如發(fā)現(xiàn)問(wèn)題，截圖標(biāo)示問(wèn)題所在，并出具檢視報(bào)告。

△ 視覺檢視表示例

視覺設(shè)計(jì)的驗(yàn)收要追求細(xì)節(jié)上的完美，因?yàn)樵O(shè)計(jì)上的細(xì)節(jié)是很容易被挑錯(cuò)的，同時(shí)需要耐性和細(xì)心，要有像素級(jí)的視角，只有這樣才能完美的還原設(shè)計(jì)稿。

寫在最后

原本只是想結(jié)合工作積累，寫一篇字體應(yīng)用知識(shí)總結(jié)，沒成想給自己挖了一坑，涉及的知識(shí)點(diǎn)真是超級(jí)多，很多地方都可以單獨(dú)拿出來(lái)再另寫一篇。另外其實(shí)在工作中，也建議大家對(duì)自己的經(jīng)驗(yàn)進(jìn)行總結(jié)，對(duì)關(guān)鍵信息進(jìn)行提煉加以沉淀，一方面能讓自己的知識(shí)更加牢固，另一方面也可以幫助后來(lái)者學(xué)習(xí)成長(zhǎng)。字體與排版基礎(chǔ)就分享到這里，希望對(duì)大家有所幫助。因?yàn)槠^長(zhǎng)，幾經(jīng)修改，有細(xì)節(jié)不正確的地方，歡迎留言矯正，感謝閱讀。

參考文獻(xiàn)：

• 《W3C-CSS字體規(guī)范標(biāo)準(zhǔn)》

• 《從「行長(zhǎng)為字號(hào)的整數(shù)倍」說(shuō)起》

• 《Leading-Trim: The Future of Digital Typesetting》

• 《關(guān)于UI設(shè)計(jì)中字體應(yīng)用的干貨》

• 《字體與排版》

• 《深度剖析Baseline設(shè)計(jì)原理》

文章來(lái)源：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

可能很多人認(rèn)為搜索設(shè)計(jì)很簡(jiǎn)單：在主頁(yè)頂部設(shè)計(jì)一個(gè)搜索框或者搜索圖標(biāo)，就可以完成操作。但搜索前、中、后的體驗(yàn)大家有沒有仔細(xì)考慮過(guò)呢？

在搜索過(guò)程中需要展示什么？如何幫助用戶盡快找到他們想要的？搜索的體驗(yàn)如何與其他體驗(yàn)相聯(lián)系？這是很多設(shè)計(jì)師思維模糊的地方。

在本文中，將介紹搜索設(shè)計(jì)需要了解的內(nèi)容，以及在不同App和案例中的搜索體驗(yàn)。 

一、搜索前的體驗(yàn)

搜索是產(chǎn)品中不可或缺的一部分，無(wú)論打開哪個(gè)App, 我們都能很快找到搜索功能。搜索作為一個(gè)功能入口，簡(jiǎn)單的呈現(xiàn)方式對(duì)用戶來(lái)說(shuō)很重要。

搜索設(shè)計(jì)常見的形式有3種:

• 頂部搜索框

• 圖標(biāo)(放大鏡)搜索

• 底部搜索導(dǎo)航

從視覺和優(yōu)先程度來(lái)看，底部導(dǎo)航>搜索框>圖標(biāo)。那么每種形式的優(yōu)缺點(diǎn)是什么，又分別在什么時(shí)候使用呢？ 

1、頂部搜索框

搜索框通常位于App主頁(yè)的頂部，作為一個(gè)大的觸摸目標(biāo)，更容易被用戶發(fā)現(xiàn)和使用。搜索框的組成一般包括容器、預(yù)設(shè)文字、操作按鈕。

容器通常填充為白色或灰色，里面帶有預(yù)設(shè)好的產(chǎn)品文案。但是容器什么時(shí)候用白色，什么時(shí)候用淺灰色呢？這取決于App主頁(yè)的背景色。

設(shè)計(jì)準(zhǔn)則是始終將容器的顏色與頁(yè)面背景色相對(duì)比。拿谷歌地圖和微信讀書相比較，灰色背景下用白色的搜索框，反之亦然。

當(dāng)然也有例外，Airbnb在白色背景上就有一個(gè)白色的搜索框。為什么這樣設(shè)計(jì)呢？因?yàn)樗乃阉骺驇в嘘幱埃芎捅尘白鞒鰠^(qū)分，也是一種可行的設(shè)計(jì)方法。

預(yù)設(shè)文字的作用是提示用戶要搜索的內(nèi)容或搜索方向，告訴用戶可以從搜索中得到什么。在App Store中，預(yù)設(shè)文字告訴用戶可以搜索“游戲、應(yīng)用、故事等”，Messenger中的預(yù)設(shè)文字只有“搜索”，為用戶提供功能入口。

預(yù)設(shè)文字在內(nèi)容瀏覽類App中很常見——不僅可以展示擁有的內(nèi)容類別，還能結(jié)合搜索趨勢(shì)來(lái)積極地推廣熱門內(nèi)容。比如微信讀書的搜索框使用最近流行的書作為預(yù)設(shè)文字，以此提高內(nèi)容的曝光率，吸引用戶閱讀。

操作按鈕雖然與搜索相關(guān)，但擺放的位置不固定?？赡茉谒阉骺騼?nèi)部，也可能在搜索框兩側(cè)。哪些圖標(biāo)/文本按鈕對(duì)搜索有幫助呢？最常見的是搜索框中的語(yǔ)音輸入功能和二維碼圖標(biāo)。

另外一個(gè)好的搜索體驗(yàn)的關(guān)鍵是能從視覺上區(qū)分與搜索相關(guān)的圖標(biāo)。

2、搜索圖標(biāo)

如果一款產(chǎn)品希望用戶專注于瀏覽內(nèi)容，或者不需要頻繁使用搜索，可以采用圖標(biāo)的樣式將搜索入口放在頁(yè)面頂部。例如，在Medium上用戶通常是漫無(wú)目的地瀏覽內(nèi)容，而不是搜索特定的主題；Facebook上的用戶通常只想瀏覽朋友的帖子，很少搜索內(nèi)容。 

3、底部搜索導(dǎo)航

與前兩種形式相比，底部搜索導(dǎo)航離用戶距離最近，更容易作為接觸目標(biāo)也被賦予更多的特性。

UberEats通過(guò)主頁(yè)的排序和過(guò)濾，幫助用戶分類感興趣的餐廳，并將搜索作為底部導(dǎo)航的第二個(gè)標(biāo)簽，這樣用戶就能夠不斷看到和探索新餐廳。

Tiktok也將搜索入口放在第二導(dǎo)航中，完整的首頁(yè)有利于為瀏覽視頻的用戶提供沉浸式的體驗(yàn)。

二、搜索頁(yè)內(nèi)容展示

當(dāng)用戶想搜索某個(gè)內(nèi)容，點(diǎn)擊搜索框之后該做什么呢？App應(yīng)該如何幫助用戶搜索？

用戶點(diǎn)擊搜索框時(shí)會(huì)彈出一個(gè)頁(yè)面，我們將其定義為“搜索頁(yè)”。搜索頁(yè)的目的是讓用戶做好搜索的準(zhǔn)備，對(duì)要尋找的內(nèi)容進(jìn)行提示，拓寬用戶對(duì)要搜索的內(nèi)容的看法。

彈出的搜索頁(yè)幫助產(chǎn)品完成兩個(gè)主要任務(wù)：

• 利用視覺和交互告訴用戶已經(jīng)做好搜索的準(zhǔn)備；

• 通過(guò)頁(yè)面上的內(nèi)容提醒用戶他們正在尋找的東西，或者為他們提供可能感興趣的東西。 

1、視覺和交互——做好搜索的準(zhǔn)備

當(dāng)我們有一個(gè)特定的搜索目標(biāo)時(shí)，我們的注意力就會(huì)完全放在搜索框(或搜索圖標(biāo))上，如果突然被引導(dǎo)到一個(gè)新的頁(yè)面，可能會(huì)帶來(lái)零碎的體驗(yàn)。

所以要把“搜索前”到“搜索頁(yè)”的轉(zhuǎn)換做得更自然，讓用戶感覺仍然在同一個(gè)頁(yè)面上操作一樣。點(diǎn)擊Facebook的搜索圖標(biāo)，圖標(biāo)通過(guò)平滑的動(dòng)效擴(kuò)展成一個(gè)搜索框。

無(wú)論搜索在什么位置，顯示搜索框的不同狀態(tài)很重要，告訴用戶“已經(jīng)準(zhǔn)備好進(jìn)行搜索”。以領(lǐng)英為例，分析一下從搜索前到搜索頁(yè)面發(fā)生了哪些變化：

• 從搜索中返回的方法：取消。這對(duì)所有的搜索體驗(yàn)都是必要的，可以使用取消或者返回圖標(biāo)。

• 搜索框改變了填充色。搜索框從灰色變?yōu)榘咨?，反映?dāng)前搜索操作處于焦點(diǎn)狀態(tài)。

• 只留下必要的圖標(biāo)。二維碼能幫助搜索所以仍然保留，而左邊的個(gè)人資料圖標(biāo)和搜索圖標(biāo)都會(huì)消失。

• 彈出光標(biāo)來(lái)鼓勵(lì)用戶輸入文字。

在某些App中，搜索框在“搜索前”和“搜索頁(yè)”中的位置可能不相同，這樣做的目的是在兩種體驗(yàn)之間進(jìn)行平滑的過(guò)渡。Google的搜索框向上滑動(dòng)來(lái)展示搜索內(nèi)容，保證過(guò)渡動(dòng)效的流暢性。

有些搜索體驗(yàn)不可能讓用戶停留在同一頁(yè)面上。Airbnb的搜索需要一系列的引導(dǎo)將用戶轉(zhuǎn)移到一個(gè)全屏的流程中。

關(guān)鍵的地方在于，搜索頁(yè)面在屏幕中間彈出，鍵盤向上滑動(dòng)，用戶可以通過(guò)無(wú)縫的交互從“搜索前”平滑過(guò)渡到“搜索中”。 

2、內(nèi)容——提示搜索的信息

歷史記錄可以幫助用戶進(jìn)行有針對(duì)性的搜索，因?yàn)檫^(guò)去的興趣是當(dāng)前興趣的有力指標(biāo)。但是只顯示歷史搜索記錄會(huì)將用戶的注意力集中到過(guò)去的搜索上，而不是保持搜索的狀態(tài)。所以除了顯示搜索記錄外，顯示推薦內(nèi)容能拓寬用戶對(duì)潛在事物的興趣。

關(guān)鍵點(diǎn)1：“沒有內(nèi)容可推薦”

當(dāng)一款產(chǎn)品的功能主要是為了讓用戶完成某個(gè)特定的任務(wù)或達(dá)到某個(gè)目標(biāo)，那么它可能就沒有動(dòng)機(jī)去推廣任何內(nèi)容。這類產(chǎn)品只會(huì)顯示最近的搜索記錄，比如Notion是一個(gè)筆記應(yīng)用，只負(fù)責(zé)存儲(chǔ)用戶的筆記，因此只顯示過(guò)去的搜索記錄來(lái)幫助用戶進(jìn)行搜索。

關(guān)鍵點(diǎn)2：“在搜索前推廣內(nèi)容”

有的產(chǎn)品通過(guò)將各種內(nèi)容提供給用戶查看和探索，為用戶實(shí)現(xiàn)某個(gè)目標(biāo)。谷歌地圖的搜索框下面有熱門的標(biāo)簽，用戶很可能會(huì)從標(biāo)簽中找到他們感興趣的類別。用戶點(diǎn)擊搜索框后，谷歌就會(huì)假設(shè)用戶有特定的去處，只專注于幫助他們到達(dá)想去的地方。

關(guān)鍵點(diǎn)3：“平衡內(nèi)容推薦和歷史搜索”

主頁(yè)上的推薦內(nèi)容可能很容易被忽略(因?yàn)樗赡芘c用戶的操作無(wú)關(guān))，但是搜索頁(yè)上的熱門推薦很少會(huì)被忽視。因?yàn)?strong style="outline:0px;margin:0px;padding:0px;">用戶是帶著目標(biāo)主動(dòng)進(jìn)入搜索頁(yè)，所以不會(huì)省略頁(yè)面上的任何信息。

熱門類別

通過(guò)在最近搜索頁(yè)上將各種美食放在首位，UberEats和Doordash這類送餐App就可以引導(dǎo)用戶嘗試更多的餐廳。

熱門話題

展示熱門話題能為用戶創(chuàng)造一種社區(qū)感，會(huì)讓用戶覺得他們與更大的社會(huì)保持聯(lián)系。Quora是很大的問(wèn)答平臺(tái)，它不僅顯示推薦的話題，還顯示了關(guān)注者的數(shù)量?？吹竭@一點(diǎn)，用戶會(huì)想：“如果一個(gè)話題有13萬(wàn)追隨者，那一定很好！我也想成為其中的一員?！?

熱門新聞

新聞?lì)愃阉骶哂泻軓?qiáng)的時(shí)效性，用戶很清楚明天的內(nèi)容將不同于今天的內(nèi)容。所以有些App會(huì)對(duì)新聞或熱搜進(jìn)行實(shí)時(shí)排名，向用戶展示最熱門的資訊。

Reddit展示了當(dāng)前的趨勢(shì)，讓用戶了解的內(nèi)容，Robinhood每小時(shí)都會(huì)更新華爾街關(guān)于股市的文章，這樣用戶就可以做出及時(shí)和明智的財(cái)務(wù)選擇。

搜索推薦

通過(guò)算法，很多App都能從用戶過(guò)去的興趣中推斷用戶的喜好，然后不斷推送相似的內(nèi)容，比如淘寶的相似商品推薦。

同樣的策略也可以應(yīng)用于搜索頁(yè)。小紅書作為一款流行App，搜索頁(yè)顯示根據(jù)用戶口味定制的推薦；Twitter的“For you”標(biāo)簽根據(jù)過(guò)去的搜索展示的相關(guān)內(nèi)容。顯示更多與用戶相關(guān)的內(nèi)容可以拉近與產(chǎn)品的距離，用戶也會(huì)花更多的時(shí)間使用產(chǎn)品。

搜索細(xì)分

Medium的搜索做得很聰明，它將搜索頁(yè)面細(xì)分為兩個(gè)步驟：先點(diǎn)擊搜索框來(lái)瀏覽不同的主題，再次點(diǎn)擊會(huì)顯示光標(biāo)和搜索記錄。通過(guò)這種分解體驗(yàn)，用戶在搜索時(shí)獲得了更多的信息量和更簡(jiǎn)潔的體驗(yàn)。

總結(jié)

以上是關(guān)于搜索前和搜索頁(yè)的體驗(yàn)設(shè)計(jì)。產(chǎn)品的搜索體驗(yàn)受到多方面的影響：自身目的、內(nèi)容種類、受眾類型。希望這篇文章能夠讓你了解搜索體驗(yàn)的可能性，為搜索設(shè)計(jì)帶來(lái)更清晰的方向。

文章來(lái)源：站酷      作者：Clippp

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

伴隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，5G通信，人工智能，物聯(lián)網(wǎng)等新技術(shù)的發(fā)展也越趨成熟，人們接觸信息的效率不斷在提高，接受信息的緯度也更廣泛，如何消化我們?cè)谏钪斜淮罅壳懈畹乃槠瘯r(shí)間，如何能讓用戶更聚焦內(nèi)容不被打擾，拉長(zhǎng)用戶的停留時(shí)間，我們正身處在一個(gè)內(nèi)容快速消費(fèi)的時(shí)代。

長(zhǎng)短視頻，動(dòng)畫電影，互動(dòng)裝置等形式能夠更容易吸引用戶的注意力，無(wú)論是消費(fèi)者，創(chuàng)作者或是設(shè)計(jì)的從業(yè)者，制作的門檻降低了，以往是一個(gè)團(tuán)隊(duì)的輸出，現(xiàn)在一個(gè)人也能夠打造高質(zhì)量的爆款，人人都是內(nèi)容的生產(chǎn)者成為了這個(gè)時(shí)代的標(biāo)簽。文章從設(shè)計(jì)從業(yè)者的角度出發(fā)，從攝影攝像，視頻動(dòng)畫，動(dòng)態(tài)圖形，交互裝置等四個(gè)緯度來(lái)闡述內(nèi)容設(shè)計(jì)的制作方法與近幾年的風(fēng)格趨勢(shì)。

攝影攝像｜ Photo & Video

實(shí)拍一直是多媒體領(lǐng)域最常見也是最不可替代的呈現(xiàn)方式，在他的發(fā)展歷程中這項(xiàng)技術(shù)也衍生出了不少有趣的風(fēng)格和玩法，隨著技術(shù)的進(jìn)步，各種實(shí)拍新技術(shù)也是不停一直在影響著攝影師拍攝。

1. 微距拍攝

微距，特別適合用來(lái)展示被攝物體的細(xì)節(jié)，比如小昆蟲的五官，花蕊上的露水，冰霜上的晶體結(jié)構(gòu)等等。您可以在攝影棚或室外環(huán)境中拍攝微觀照片和視頻，只要您充分放大被攝體即可。通常來(lái)講人眼最近對(duì)焦距離是15cm，低于這個(gè)距離就看不清東西了，而專業(yè)的光學(xué)矯正鏡頭按照近距離拍攝進(jìn)行設(shè)計(jì)可以拍攝出一個(gè)極端的近景視圖，可以得到肉眼無(wú)法看到的細(xì)節(jié)。

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

產(chǎn)品為了吸引消費(fèi)者的購(gòu)買熱情，自然離不開產(chǎn)品宣傳片，如今的產(chǎn)品廣告不再局限于片面的展示產(chǎn)品，而是開始尋找不同的視感令自己的產(chǎn)品看上去更具吸引力。在很多產(chǎn)品拍攝當(dāng)中會(huì)經(jīng)常用到微距拍攝的手法，正如前面所說(shuō)，利用微距拍攝手法展示產(chǎn)品部分的細(xì)節(jié)有的時(shí)候或許可以讓畫面更有質(zhì)感。

△ 威士忌廣告片段

△ TOREAD探路者戶外新品面料-「遇水搭橋」系列主題微距圖拍攝

微距攝影是區(qū)別于常規(guī)攝影的一種特殊的攝影方法，這門拍攝技術(shù)帶來(lái)的視感也非常的吸引人，但是往往這種特殊的拍攝手法卻非常受限于硬件設(shè)備，正如我們前面所說(shuō)的設(shè)備參數(shù)都是專門的微距鏡頭設(shè)計(jì)的。為了抓住這一點(diǎn)，讓更多人知道這個(gè)有趣的拍攝手法，市面上也出現(xiàn)了越來(lái)越多不同的微距鏡頭給不同需求的攝影師使用。近兩年比較經(jīng)典的一個(gè)就是LAOWA24mm鏡頭，在于它獨(dú)特的形狀可以到達(dá)普通鏡頭無(wú)法企及的位置，機(jī)位更加獨(dú)特。

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

2. 升格拍攝

升格拍攝無(wú)疑是讓視頻表現(xiàn)提升幾個(gè)檔次的常用手段之一，電影的標(biāo)準(zhǔn)幀速率是24幀每秒，但是為了實(shí)現(xiàn)升格就需要一些技巧，比如拍攝的幀數(shù)高于24幀每秒，這就是我們常見的「慢動(dòng)作」?，F(xiàn)有的升格拍攝幀數(shù)基本上分為30幀，60幀，120幀，240幀，再往上則是影視和特殊拍攝會(huì)用到的了。由于肉眼觀察高速運(yùn)動(dòng)物體是有限制的，在拍攝高速運(yùn)動(dòng)的物體的時(shí)候，利用升格將畫面播放速度變慢便可以更好的觀察到物體高速運(yùn)動(dòng)時(shí)的狀態(tài)。

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

在廣告拍攝當(dāng)中升格鏡頭也是一個(gè)十分常用的拍攝手法，正如我們所說(shuō)肉眼觀察高速運(yùn)動(dòng)物體的速度是有限， 往往人們沒辦法看清楚快速運(yùn)動(dòng)的物體，有些產(chǎn)品廣告使用慢動(dòng)作升格鏡頭加上充分美化的畫面便更能吸引消費(fèi)者的目光。

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

拍攝影片的時(shí)候在不同的環(huán)境之下也會(huì)利用升格烘托氣氛，在我們看到的很多片子里面有緊張刺激的，煽情的，都會(huì)利用升格來(lái)烘托片子的氣氛。由于相機(jī)技術(shù)的進(jìn)步，拍攝變得比以往任何時(shí)候都更加容易。今天任何人都可以通過(guò)相機(jī)和高質(zhì)量的麥克風(fēng)輕松地成為vlogger拍攝出好看的旅拍視頻，加上升格鏡頭在硬件技術(shù)的加持下可以快速的出效果，令這部分人群創(chuàng)作出更好的拍攝作品。

3. 無(wú)人機(jī)航拍

航拍一直以來(lái)都是一個(gè)不可或缺的拍攝手法，很多的電影以及廣告宣傳片當(dāng)中我們都可以看到不少的大范圍運(yùn)鏡片段，天空中的視角對(duì)與陸地上行走的人來(lái)說(shuō)還是一個(gè)十分新奇的視角，一般來(lái)說(shuō)也很難看得到，所以片子中加入航拍的元素往往可以增加不少高級(jí)感。

△ 來(lái)源于網(wǎng)絡(luò)片段

如今技術(shù)發(fā)展，無(wú)人機(jī)的民用化推進(jìn)，市面上各大廠商開始推出自己的航拍無(wú)人機(jī)，航拍也開始出現(xiàn)在了普通人的視野中，讓普通人也可以在高空拍出想要的風(fēng)景。加上如今4G和5G技術(shù)的發(fā)展，短視頻的流行，令網(wǎng)絡(luò)上的自媒體人也擁有了更好的展現(xiàn)自己作品的平臺(tái)，這些拍攝技術(shù)的平民化讓自媒體人們可以更好的發(fā)揮視頻創(chuàng)作，而不會(huì)總是局限于技術(shù)。

△ 來(lái)源于網(wǎng)絡(luò)片段

4. 高質(zhì)量色彩呈現(xiàn)

如果你有自己拍攝視頻，那或許有聽說(shuō)過(guò)LOG配置文件，LOG模式通常在專業(yè)和專業(yè)消費(fèi)級(jí)相機(jī)中所配置的拍攝模式，LOG模式的顏色看起來(lái)非常平均，因?yàn)檫@樣可以地減少截取捕獲的高光或陰影。這使得輸出的視頻幾乎沒法直接使用，直到對(duì)其進(jìn)行編輯。它的優(yōu)點(diǎn)在于，以輸出高比溶度的視頻方式來(lái)調(diào)整顏色和對(duì)比度（即，對(duì)其進(jìn)行分級(jí)）從而可以得到自己想要的視頻顏色風(fēng)格。

△ 威士忌廣告片段

△ ANGIE’S爆米花廣告

LOG指的是數(shù)學(xué)上的曲線函數(shù)，并不是一個(gè)獨(dú)立的拍攝風(fēng)格，而是風(fēng)格用上了LOG函數(shù)轉(zhuǎn)換，在這個(gè)模式下我們可以看到無(wú)論是明處或暗部LOG都將細(xì)節(jié)保留了下來(lái)，在這個(gè)基礎(chǔ)之上調(diào)出我們想要的顏色方可得到一個(gè)更加清晰的圖像。在數(shù)據(jù)圖當(dāng)中我們也可以看到log模式下所有的顏色數(shù)據(jù)都處于中間值，不會(huì)有過(guò)度夸張的位置，編輯之后的圖像所有顏色的明暗都區(qū)分開來(lái)了，也形成了自己想要的色調(diào)。

△ QQ x MINISO

實(shí)拍產(chǎn)業(yè)作為一個(gè)主流多媒體形式一直在發(fā)生著改變，隨著科技的進(jìn)步，曾經(jīng)我們需要大費(fèi)周章才能拍出來(lái)的效果，如今也越來(lái)越簡(jiǎn)單。各種新技術(shù)的出現(xiàn)不斷地改變著人們拍攝的方式和形式，新的玩法也層出不窮并不斷影響著其他的多媒體形式。未來(lái)實(shí)拍將會(huì)更加的簡(jiǎn)單平民化，讓普通人也能拍出曾經(jīng)大費(fèi)周章才能做到效果。

視頻動(dòng)畫｜Animation

縱觀整個(gè)互聯(lián)網(wǎng)設(shè)計(jì)行業(yè)發(fā)展史,計(jì)算機(jī)圖形技術(shù)一直在影響著設(shè)計(jì)。

1. 和高質(zhì)量輸出

在計(jì)算機(jī)圖形輸出里，最終效果呈現(xiàn)靠的是圖像渲染（Renderding），渲染又分離線渲染和實(shí)時(shí)渲染，以往字面上理解則是實(shí)時(shí)渲染，高質(zhì)量則是離線渲染。下面介紹一下為了如何可以將兩者結(jié)合實(shí)現(xiàn)高質(zhì)量輸出CG，視頻動(dòng)畫。

Realtime-Render （實(shí)時(shí)渲染）：在虛擬世界的圖形表現(xiàn)中，實(shí)時(shí)渲染占有很重要的地位。所謂實(shí)時(shí)渲染，就是圖形數(shù)據(jù)的實(shí)時(shí)計(jì)算和輸出。如果說(shuō)實(shí)時(shí)渲染的概念對(duì)你很陌生，那如果用實(shí)時(shí)渲染領(lǐng)域中的一個(gè)重頭戲來(lái)給你舉例，相信你就不會(huì)有陌生的感覺：那就是游戲。游戲因?yàn)樾枰婕胰セ?dòng)，因而對(duì)渲染的實(shí)時(shí)性有很高的要求。隨著計(jì)算機(jī)圖形技術(shù)的不斷發(fā)展、硬件計(jì)算能力的不斷升級(jí)，游戲?qū)崟r(shí)渲染的畫面逐漸從簡(jiǎn)陋走向逼近真實(shí)。

△ Unreal engine 4

以上Demo 是專業(yè)團(tuán)隊(duì)制作完成的高質(zhì)量短片，但是普通用戶想要達(dá)到這種級(jí)別還是有些難度的。放出這些短片也代表現(xiàn)有的軟件技術(shù)和硬件設(shè)備已經(jīng)可以達(dá)到這個(gè)水平，當(dāng)然有也商業(yè)競(jìng)爭(zhēng)的成分Unity和Unreal 是目前用戶最多游戲開發(fā)引擎，想要在游戲以外其他領(lǐng)域競(jìng)爭(zhēng)實(shí)時(shí)渲染市場(chǎng)份額。也不斷在更新自己的技術(shù)。這代表除了游戲行業(yè)以為其他跟圖形有關(guān)的（像電影，廣告，互聯(lián)網(wǎng)）行業(yè)也慢慢開始進(jìn)入實(shí)時(shí)渲染時(shí)代，到目前為止實(shí)時(shí)渲染還沒有真正得到廣泛應(yīng)用是因?yàn)閷?shí)時(shí)渲染還不能達(dá)到想離線渲染那樣影視廣告級(jí)別高質(zhì)量的畫面。

△ Visual ASMR Rock by Onesal

離線渲染大概的流程需要經(jīng)過(guò)模型-場(chǎng)景-綁定-材質(zhì)-燈光--合成-輸出，每一個(gè)步驟都需要大量的技術(shù)支持，像上面阿凡達(dá)這類大片級(jí)別的影片，為了某個(gè)效果很研究開發(fā)一些新的技術(shù)，所以要詳細(xì)說(shuō)明要花很多時(shí)間，我們就不詳細(xì)說(shuō)明了，回到主題高質(zhì)量輸出上面。所以每一步廣告影視作品，都是靠大量的時(shí)間和人力堆出來(lái)的。那么廣告影視這種渲染方式為離線渲染，而游戲?yàn)閷?shí)時(shí)渲染。

△ Unreal engine 5

實(shí)際上二者的區(qū)別也就在這，但是就是因?yàn)檫@二者的這一個(gè)區(qū)別，就引發(fā)了不少的技術(shù)差別在里面。離線渲染對(duì)時(shí)間往往沒有很極端的要求，用接近現(xiàn)實(shí)的光線跟蹤算法技術(shù)，設(shè)置很高的采樣值和迭代次數(shù)，就如阿凡達(dá)每一幀畫面需要渲染幾十個(gè)小時(shí)以上，只要畫面質(zhì)量夠真實(shí)，這些時(shí)間成本都可以被容忍。而游戲畫面的渲染，也就是實(shí)時(shí)渲染的話，則在時(shí)間上的資源尤其地珍貴游戲所用的實(shí)時(shí)渲染就沒有那么滋潤(rùn)了，先不說(shuō)幾分鐘渲染一張這么的事情，就連1秒鐘出一張，都不夠人看的。對(duì)于游戲來(lái)說(shuō)，再不濟(jì)，也要有1秒20多張，才能給玩家看（還不算能流暢操作的情況）。那么實(shí)時(shí)渲染有可能用于畫面要求高質(zhì)量的影視廣告等行業(yè)嗎。

虛幻5

2020年5月13號(hào),Unreal engine官網(wǎng)發(fā)布了Unreal Engine 5 并在Playstation5上運(yùn)行進(jìn)行展示Demo（「Lumen in the Land of Nanite」）

△ Unreal engine 5

該演示展示了虛幻引擎5的兩大全新核心技術(shù)：

△ Unreal engine 5

Nanite

虛擬微多邊形幾何體可以讓美術(shù)師們創(chuàng)建出人眼所能看到的一切幾何體細(xì)節(jié)。Nanite虛擬幾何體的出現(xiàn)意味著由數(shù)以億計(jì)的多邊形組成的影視級(jí)美術(shù)作品可以被直接導(dǎo)入虛幻引擎——無(wú)論是來(lái)自Zbrush的雕塑還是用攝影測(cè)量法掃描的CAD數(shù)據(jù)。Nanite幾何體可以被實(shí)時(shí)流送和縮放，因此無(wú)需再考慮多邊形數(shù)量預(yù)算、多邊形內(nèi)存預(yù)算或繪制次數(shù)預(yù)算了；也不用再將細(xì)節(jié)烘焙到法線貼圖或手動(dòng)編輯LOD，畫面質(zhì)量不會(huì)再有絲毫損失。

△ Unreal engine 5

傳統(tǒng)的模型資產(chǎn)做法–先是用Zbrush等雕刻軟件又或者是3D掃描等數(shù)據(jù)模型–重新拓?fù)錇楦?、中、底三種面數(shù)模型–展UV上材質(zhì)–烘培法線、凹凸等貼圖–導(dǎo)入游戲引擎中使用，那么為什么要做那么復(fù)雜呢？游戲引擎運(yùn)行資源越大，可能會(huì)導(dǎo)致游戲的流程度和游戲體驗(yàn)不好，為了讓玩家有流程的操作體驗(yàn)，通過(guò)高精度多邊形幾何體烘焙法線凹凸等貼圖用在低精度多邊形幾何體上可以保留高模的細(xì)節(jié)從而節(jié)省運(yùn)行資源提升游戲流暢度，Nanite完美解決了這個(gè)問(wèn)題。

Lumen

是一套全動(dòng)態(tài)全局光照解決方案，能夠?qū)?chǎng)景和光照變化做出實(shí)時(shí)反應(yīng)，且無(wú)需專門的光線追蹤硬件。該系統(tǒng)能在宏大而精細(xì)的場(chǎng)景中渲染間接鏡面反射和可以無(wú)限反彈的漫反射；小到毫米級(jí)、大到千米級(jí)，Lumen都能游刃有余。美術(shù)師和設(shè)計(jì)師們可以使用Lumen創(chuàng)建出更動(dòng)態(tài)的場(chǎng)景，例如改變白天的日照角度，打開手電或在天花板上開個(gè)洞，系統(tǒng)會(huì)根據(jù)情況調(diào)整間接光照。Lumen的出現(xiàn)將為美術(shù)師省下大量的時(shí)間，大家無(wú)需因?yàn)樵谔摶镁庉嬈髦幸苿?dòng)了光源再等待光照貼圖烘焙完成，也無(wú)需再編輯光照貼圖UV。同時(shí)光照效果將和在主機(jī)上運(yùn)行游戲時(shí)保持完全一致。官方的宣傳已經(jīng)非常親民了，很多業(yè)外人士基本知道是怎么回事，也知道虛幻引擎5的優(yōu)勢(shì)。簡(jiǎn)而概之：簡(jiǎn)化的制作復(fù)雜程度，模型師的工作量將大大縮小，二是畫質(zhì)效果又將邁向更高的一個(gè)品質(zhì)。

△ Unreal engine 5

Unreal 5 這兩大功能可以說(shuō)是克服了現(xiàn)階段的難題讓實(shí)時(shí)渲染更接近影視級(jí)渲染，然后簡(jiǎn)化了以前復(fù)雜的工作流程，讓創(chuàng)造變得更簡(jiǎn)單了。這代表著以后只要涉及CG類的行業(yè)都會(huì)發(fā)展巨變。

2019年11月12日Quixel 公司被Epic Game（Unreal的公司）收購(gòu)并宣布Quixel 旗下Bridge(材質(zhì)管理軟件) Mixer(材質(zhì)編輯軟件) Megascans(3D掃描資產(chǎn))對(duì)所有Unreal engine 用戶免費(fèi)，這一爆炸新聞。此前Quixel 是靠賣高精度3D掃描資產(chǎn)盈利的。用Megascans 的3D資產(chǎn)可以創(chuàng)造電影級(jí)4K-8K的真實(shí)畫面，Unreal engine 5的dome也是用的Megascans 的資產(chǎn)，下面的案例（Rebirth）也是用的Megascans的資產(chǎn)。

△ Rebirth

在沒有免費(fèi)開放Megascans的之前想要制作8K的3D掃描資產(chǎn)是非常困難的，需要大量的設(shè)備和人力支持，在網(wǎng)絡(luò)上購(gòu)買價(jià)格也不便宜導(dǎo)致普通個(gè)人用戶是很難制作這樣高精度的畫面，這一消息讓更多的自由職業(yè)者和個(gè)人藝術(shù)家加入了實(shí)時(shí)渲染的潮流趨勢(shì)中。讓4K創(chuàng)造不再那么困難。

Megascans Ecosystem: Giving more Power to Artists(Megascans生態(tài)系統(tǒng))

△ After the mountain Rain

來(lái)自中國(guó)的藝術(shù)家Fisher Dai（戴鑫祺）使用Megascans和Unreal engine4創(chuàng)造的4K個(gè)人作品。

△ After the mountain Rain(戴鑫祺)

2020年7月14日Unreal Engine 官方發(fā)布一條宣傳片（Unreal for all Creator ）by The Mill,視頻展示了Unreal Engine實(shí)時(shí)渲染在互聯(lián)網(wǎng)、游戲、電影、電視、建筑、汽車等行業(yè)驚人的表現(xiàn)。

https://www.youtube.com/watch?v=6xbxA8tnlbY

△ Unreal for all Creators by The Mill

2. 更真實(shí)的自然質(zhì)感

伴隨硬件技術(shù)的發(fā)展和軟件性能各方面的提升，能夠更加真實(shí)的模擬自然的運(yùn)動(dòng)規(guī)律和真實(shí)的質(zhì)感；畫面趨向更為克制的顏色呈現(xiàn)；在一些品牌廣告短片中，使產(chǎn)品的屬性與抽象的自然屬性相結(jié)合，使用相似的自然形態(tài)去表現(xiàn)產(chǎn)品的特性，突顯產(chǎn)品的特點(diǎn)。

△ 《Bloom》by Hubert Blajer

△ 《Mostly wood》by Nejc Polovsak

△ 《Digital Design Days 2020 titles》

R&D

（Research and development研究與開發(fā)）在三維領(lǐng)域是一直有存在的，只是以前大公司才會(huì)有的職位，R&D早期是服務(wù)存在于影視動(dòng)畫公司的，像工業(yè)光魔，迪士尼，皮克斯，這些公司都會(huì)有自己的R&D部門，最近幾年隨著三維技術(shù)進(jìn)步簡(jiǎn)化，使得更多的人加入這個(gè)行業(yè)，很多個(gè)人R&D藝術(shù)家大量的出現(xiàn)在網(wǎng)絡(luò)社交品平臺(tái)上，不只是影視動(dòng)畫，還有廣告，汽車，消費(fèi)品等行業(yè)。舉例R&D在廣告行業(yè)的應(yīng)用，藝術(shù)家們會(huì)對(duì)某個(gè)產(chǎn)品的材質(zhì)和物理學(xué)的多方面進(jìn)行研究，并用三維軟件(houdini C4D等)視覺化出來(lái)，比如下面這個(gè)案例的海綿材質(zhì)物理碰撞模擬。

△ Manvsmachine 《No stress Test》

△ 《A website makes it real》

△ Lukas Vojir R&Dshowreel

3. 突破傳統(tǒng)建模方式

使用VR設(shè)備進(jìn)行環(huán)境建模工作。

The Loch by Boxfort

4. 2D與3D的結(jié)合

同樣的環(huán)境下，人們對(duì)于手繪等真實(shí)樸實(shí)的質(zhì)感又有了新的追求，各類動(dòng)畫的制作方式得到了不斷優(yōu)化和流程上的整合，在軟件使用上也多了更多選擇，使得動(dòng)畫的呈現(xiàn)方式趨向于多種形式結(jié)合。

例如常見的3D的場(chǎng)景和鏡頭運(yùn)動(dòng)搭配2D的角色動(dòng)畫，使用非常流暢的鏡頭運(yùn)動(dòng)和豐富細(xì)致的3D場(chǎng)景，而視覺表現(xiàn)上保留傳統(tǒng)2D動(dòng)畫的一些特性，兩者結(jié)合形成的一種新奇動(dòng)畫語(yǔ)言，在未來(lái)還會(huì)繼續(xù)流行。

△ 《PlusOne Manifesto》 By Martijn Hogenkamp

△ 《Disney XD And Children’s Health》By BLIRP STUDIO

△ 《企鵝誕生記》By ISUX

Blender 是現(xiàn)階段很熱門的開源（免費(fèi)）三維制作軟件，因?yàn)槭情_源的而且功能豐富所以在市面上已經(jīng)有了很多個(gè)人藝術(shù)家使用。Grease Pencil只是個(gè)方便三維空間中起稿的輔助性工具，在版本2.8之后這個(gè)功能被大幅加強(qiáng)成為了一個(gè)超級(jí)強(qiáng)大的畫筆工具 ，發(fā)布以后出現(xiàn)了很多優(yōu)秀的藝術(shù)家用它來(lái)創(chuàng)作。

△ 《Futuro Darko》 By Craig Farquharson

5. 影視手法的動(dòng)態(tài)呈現(xiàn)

在這個(gè)快速變化的時(shí)代，我們趨向追求更快更緊張的刺激感受。受到《蜘蛛俠平行宇宙》、《阿麗塔》這樣的動(dòng)畫電影的出現(xiàn)所帶來(lái)的影響，動(dòng)畫廣告在一定程度上混合了影視和游戲常用的一些表現(xiàn)方式，比如更大的鏡頭畸變和游戲風(fēng)格的未來(lái)元素，快節(jié)奏的剪輯手法配合游戲電音，能夠在短時(shí)間內(nèi)給觀眾帶來(lái)強(qiáng)烈的感官刺激與情感體驗(yàn)。

△ 《Gogoro S3 Future Fast》 By MIXCODE STUDIO

6. 復(fù)古懷舊風(fēng)格回歸

在充滿了未來(lái)感科技感的3D大趨勢(shì)下，顏色丟失，色調(diào)分離，質(zhì)量損失的顆粒質(zhì)感，低飽和低保真的畫面呈現(xiàn)，也開始帶來(lái)一種新的視覺感受。過(guò)往的動(dòng)畫風(fēng)格與當(dāng)下科技感、未來(lái)感的潮流碰撞又呈現(xiàn)了新的表現(xiàn)方式。這種風(fēng)格應(yīng)用在街頭潮流的時(shí)尚產(chǎn)品的時(shí)候，跟以往60或80年代的復(fù)古元素相結(jié)合，使用新的設(shè)計(jì)語(yǔ)言去包裝整合，能夠強(qiáng)化產(chǎn)品的故事感，引起大家強(qiáng)烈的共鳴和代入感，激發(fā)大家頭腦中那段美好回憶。

△ 《The Legend of IQOO 戦う！鉄拳》 by 茶山有鹿

△ 《MouseQ 滑板俱樂部》By ISUX

△ 《ACE OF SPADES》 by Tony Babel

△ 《Can of worms》 by Tony Babel

7. 更克制的色調(diào)與秩序感

在充斥著各式各樣的新鮮元素的當(dāng)下，節(jié)奏更快顏色更有吸引力，各類信息視覺都在捕捉你的視線。干凈的色調(diào)、簡(jiǎn)單的視覺、真實(shí)的肌理、強(qiáng)調(diào)秩序感的動(dòng)畫的出現(xiàn)，使得人在視覺上獲得了舒適的體驗(yàn)，很大程度上緩解了極速發(fā)展的時(shí)代所帶給人們的焦慮。

△ 《BIC》by Artem ‘Hinz’ Yudin

△ 《Microsoft SharePoint 》

△ 《Beautyrest》 by Tendril

動(dòng)態(tài)圖形｜ Motion Graphic

突破限制的版式

在當(dāng)下許多海報(bào)等平面視覺都有了動(dòng)態(tài)化表現(xiàn)的需求的情況下，動(dòng)態(tài)視覺的加入打破了很多條框和顏色的禁忌，去掉了華麗的修飾性的元素，在內(nèi)容的呈現(xiàn)上體現(xiàn)了更多的創(chuàng)意，畫面中不斷變化的圖形排列、動(dòng)態(tài)的3D圖形和字體起到了非常吸睛的效果。在大量時(shí)尚品牌和藝術(shù)活動(dòng)的宣發(fā)當(dāng)中，畫面結(jié)合強(qiáng)烈的撞色熒光色，以及波譜的拼貼藝術(shù)手法，能夠更好的表達(dá)品牌傳遞的時(shí)尚感和新鮮感。

1. 視覺設(shè)計(jì)

2. 網(wǎng)頁(yè)設(shè)計(jì)

△ CreativeCrew

△ Le Cantiche 1320

△ reed.be

3. 界面設(shè)計(jì)

△ Olympic Sports Website by Daniel Tan

4. 交互裝置｜Interactive Installation

近些年來(lái)各媒介手段和智能裝置應(yīng)用的興起，人們已經(jīng)不滿足于單一的視覺感受。電子音樂與擬態(tài)三維全息投影相互配合，在不斷變化的聲光交互光影和空間場(chǎng)景中，能迅速把觀眾帶入多個(gè)不同的全新場(chǎng)景的沉靜式體驗(yàn)。

AR/VR

△ Fórum Internacional de Gaia 2019

2. 沉浸式視聽設(shè)計(jì)

△ 《JOURNEY》 by NOHLAB

3. 多媒體交互裝置

△ 《Teleport 》By PITCH

在信息爆炸的2020年，Motion的流行趨勢(shì)在不斷變化，有的風(fēng)格將會(huì)繼續(xù)延續(xù)，例如在各個(gè)場(chǎng)景中大量應(yīng)用的3D視覺，會(huì)在未來(lái)更加普及和優(yōu)化并趨向于更輕量化的新極簡(jiǎn)主義；有的風(fēng)格重新回歸到大眾視野，例如Y2K、色損故障、顆粒等復(fù)古風(fēng)格和逐幀動(dòng)畫，它們與新環(huán)境下的設(shè)計(jì)語(yǔ)言相互碰撞，給人們帶來(lái)新鮮的視覺感受；在視覺設(shè)計(jì)領(lǐng)域，網(wǎng)頁(yè)設(shè)計(jì)中融入了更多精彩的交互動(dòng)畫，界面的UI設(shè)計(jì)中體現(xiàn)了更多激動(dòng)人心動(dòng)效語(yǔ)言，版式設(shè)計(jì)有了動(dòng)畫的加持更大膽更具活力且不斷突破現(xiàn)有規(guī)則。

隨著硬件和軟件的跟新迭代，同時(shí)我們也看到了更多其他方向的可能性，例如實(shí)時(shí)渲染以及虛擬現(xiàn)實(shí)。據(jù)資料顯示，虛擬現(xiàn)實(shí)的市場(chǎng)規(guī)模預(yù)計(jì)將達(dá)到447億美元，復(fù)合年增長(zhǎng)率為33.47％，這個(gè)市場(chǎng)會(huì)逐步打開，影視廣告等行業(yè)將迎來(lái)前所未有的技術(shù)革命浪潮。大批更智能的應(yīng)用軟件橫空出世，學(xué)習(xí)門檻的降低使得更多藝術(shù)家和設(shè)計(jì)師共同參與，跨媒介的應(yīng)用將在未來(lái)百花齊放。

多媒體的設(shè)計(jì)趨勢(shì)在未來(lái)會(huì)如何發(fā)展，我們拭目以待。

文章來(lái)源：站酷    作者：騰訊ISUX

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)