前置知識

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

Promise 哪些 API 涉及了微任務？

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

上圖中藍色為同步執(zhí)行，黃色為異步執(zhí)行（丟到微任務隊列中）。

這些微任務何時被加入微任務隊列？

這個問題我們根據(jù) ecma 規(guī)范來看：

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

了解完以上知識后，正片開始。

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

初級

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

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

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

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

中級

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

那么以下代碼你認為的輸出會是什么？

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");
}); 

按照一開始的認知我們不難得出 then2 會在 then1-1 后輸出，但是實際情況卻是相反的。

基于此我們得出第二個結(jié)論：每個鏈式調(diào)用的開端會首先依次進入微任務隊列。

接下來我們換個寫法：

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

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

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

順便我們也可以把之前得出的結(jié)論優(yōu)化為：同一個 Promise 的每個鏈式調(diào)用的開端會首先依次進入微任務隊列。

高級

以下大家可以猜猜 then1-2 會在何時打印出來？

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é)論就能得出答案，以下是解析：

• 第一次 resolve 后第一個 then 的回調(diào)進入微任務隊列并執(zhí)行，打印 then1
• 第二次 resolve 后內(nèi)部第一個 then 的回調(diào)進入微任務隊列，此時外部第一個 then 的回調(diào)全部執(zhí)行完畢，需要將外部的第二個 then 回調(diào)也插入微任務隊列。
• 執(zhí)行微任務，打印 then1-1 和 then2，然后分別再將之后 then 中的回調(diào)插入微任務隊列
• 執(zhí)行微任務，打印 then1-2 和 then3 ，之后的內(nè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");
  });

當我們 return Promise.resolve() 時，你猜猜 then1-2 會何時打印了？

答案是最后一個才被打印出來。

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

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

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

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

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

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

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

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

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

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 還會調(diào)用一次 then 函數(shù)來 resolve Promise，這也就又生成了一次微任務。

這就是為什么會觸發(fā)兩次微任務的來源。

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

輕擬物的核心知識

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

1. 形體表現(xiàn)

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

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

比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。

換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現(xiàn)得太抽象，也不能增加過多的細節(jié)，需要一種恰到好處的平衡（玄學），這就非常考驗設計師的判斷和經(jīng)驗了。

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

2. 光影表現(xiàn)

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

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

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

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

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

這和我們學習的素描有一定的差異，美術中對光影的表現(xiàn)還會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。

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

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

而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。

了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。

輕擬物實例演練

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

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

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

第一步：確認輪廓造型

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

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

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

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

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

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

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

第四步：增加高光效果

接著，就是最后一步，將高光添加到畫面中來，將整個圖標的質(zhì)感進行拉升。

通過上面的演示，我們可以將整個擬物設計流程精簡成：

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

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

然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：

通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。

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

總結(jié)

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

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

文章來源：站酷    作者：超人的電話亭

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

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

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

字體基礎知識

字體是界面設計的基石

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

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

本篇就從我們常用的設計軟件（sketch、Figma、P hotoshop）字符面板開始，來聊聊有關字體與排版應用方面的知識。

字體的那些屬性

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

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

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

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

1. 族類 GenericFamily

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

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

襯線體

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

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

黑體

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

2. 字族 FontFamily

一個族類包含不同的字體，然而一個字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會發(fā)現(xiàn)超過40多個前綴是Helvetica的字族。這是為了協(xié)助人們在不同的使用場景下表達合適的意思。

知識點：

基本字族包括細體、標準、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個著作」的含義。

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

3. X-height（X字高）

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

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

4. 字號 Font-size

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

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

當字體大小為12-18pt時，建議使用Regular，18-24pt時，使用Light，24-32pt,使用Thin，當字體大小超過32pt時，建議使用Ultralight。

字號大小決定了信息的層級和主次關系，合理有序的字號設置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號使用會讓界面混亂不堪，影響閱讀體驗。

設計中的最小字號

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

字號的基數(shù)關系

我們在做設計時，字號的單位最好使用一個基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實我們在做移動端設計時，單位需要遵循偶數(shù)原則，因為開發(fā)中的單位是以一倍圖的基數(shù)來進行計算。那么其實在制定字體規(guī)范中，使用2為單位會導致字號過多，且2號字體的差異化不大。所以在字號方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。

5. 字重 FontWeight

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

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

兩種字重屬性

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

重字重：視覺感受莊重，很重要，常用在重點強調(diào)的文字，頁面大標題，數(shù)字，引導行動操作點上等；

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

知識點：

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

注意超細體的字體

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

6. 字色 FontColor

字色即文字對應的顏色，不做過多解釋。需要大家注意的是 遠離純黑色和純灰色！

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

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

7. 字符樣式 FontStyle

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

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

8. 字符選項 Text options

Ps和Sketch都有文字（字符）選項一欄，主要針對西文字母大小寫格式變換的設置。最常見有默認大小寫、全部大寫、全部小寫和小型大寫字母，Ps里面還有「上標」和「下標」。

• 默認大小寫：即正常大小寫格式，軟件不做干預；

• 全部大寫：如果輸入的是小寫字母，選擇這個選項，軟件會強制把小寫改為大寫；

• 全部小寫：如果輸入的是大寫字母，或者只是首字母大寫，選擇這個選項，軟件會強制把所大寫改為小寫；

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

注意英文大寫

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

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

全角是指一個字符占用兩個標準字符的位置。中文字符、全角的英文字符、國標GB2312-1980中的圖形符號、特殊符號都是全角字符。半角是指一個字符占用一個標準字符的位置。

通常情況下，英文字母、數(shù)字、符號等都是半角字符。半角和全角主要是針對標點符號來說的，因為正常情況下沒有打全角英文的需求。

知識點：

在設計作品時也一定要記得中文搭配全角符號，英文使用半角符號。否則會出現(xiàn)諸如「你好.」或者「t h a n k s?！惯@樣的錯誤。可按鍵盤「capslock」鍵切換全角和半角。這個小知識點雖然非常基礎，卻也是設計中經(jīng)常出錯的地方。

iOS與Android

眾所周知，iOS和Android兩大陣營都有各自的設計系統(tǒng)，要作出符合平臺規(guī)范的設計，設計師應熟讀各平臺的設計規(guī)則。因為本篇以講字體為主，我們就來看看iOS和Android各自字體的規(guī)范是什么樣的。

1. iOS字體規(guī)范

可用字體

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

字體設置

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

這么多類型的字體我們該怎么用呢？iOS的建議是，在字號小于20pt時，使用SF-UI Text，大于或等于20pt時，則使用SF-UI Display。這需要我們在界面設計時手動切換。

對于「NewYork」，小于20點的文本使用小號，20到35點之間的文本使用中號，36到53點之間的文本使用大號，54點或更大的文本使用特大號。

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

知識點：

在iOS中，默認字體單位是「pt」，正文字號不應小于11pt，建議在15-18pt之間。在使用較大的字體來獲得更好的易讀性同時，也應該相應地減小字體的字重，因為過重的字體會太過醒目厚重，影響其他內(nèi)容的顯示效果。

iOS更全面的文字設置

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

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

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

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

2. Android字體規(guī)范

可用字體

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

字體類型

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

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

字體設置

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

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

△Material Design設計類型比例。（字母間距值與Sketch兼容。）

知識點：

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

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

以iPhone7為例，尺寸是750×1334，密度326ppi 來換算，那么Android的1dp = 1 * 326/160 ≈ 2px

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

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

3. 話題擴展

值得一提的是，越來越多的手機廠商，為了能夠強化自身的品牌形象，推出了定制款的字體。

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

OPPO的「OPPO Sans」：

三星的「SamsungOne」：

字體基礎知識小結(jié)

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

人們是如何閱讀的

設計中，好的排版能讓用戶愉快地閱讀，而不好的排版則會給用戶帶來糟糕的閱讀體驗。因此排版的潛在重要性不容忽視。

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

文字排版中的常見元素

1. 字間距與字偶間距

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

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

在大段落文字排版時，我們一般不需要更改字間距和字偶間距，因為字體設計師已經(jīng)對他們做過了最優(yōu)處理。在對一組字符單獨設計時，就需要考慮字偶間距，以達到更協(xié)調(diào)的視覺效果。總的來說，字號越小，字距應當相對越大，行高也應該相對越大。反之亦然。

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

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

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

2. 字間距的三種形式

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

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

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

知識點：

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

3. 西文詞距

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

4. 標點避頭尾

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

5. 文本框

在設計軟件中，我們在添加文本時，就會創(chuàng)建一個文本區(qū)域，例如Sketch中文本區(qū)域有三種類型，自動寬度、自動高度、固定尺寸，而「固定尺寸」可配合「設置文字層垂直對齊方式」使用。

6. 對齊方式

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

7. 行高

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

8. 英文行高

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

9. 中文行高

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

知識點：

提示：不管是標題、正文還是注釋文字，行高都不易過大或過小，會導致閱讀困難?？偟膩碚f，字號越大行高應該越小，字號越小行高應該越大。

10. 行長

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

2.3.5 版心設計的注意事項：「一行的行長應為文字尺寸的整數(shù)倍，各行的位置盡可能頭尾對齊?！?

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

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

11. 行間距

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

12. 英文行間距

英文的行間距指的是一行英文的底部線與下一行英文的頂部線之間的距離?？梢院唵蔚睦斫鉃椤感信c行之間的距離」。另外英文文字底部和頂部都有對應的專有名詞，英文頂部的那條叫「升部線」，底部那條叫「降部線」。

13. 中文行間距

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

14. 段間距

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

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

排版的CRAP原則

在任何一個設計中都需要把各個元素進行分級，分清主次，這樣才能更好地抓住重點。為了能分清各元素的主次，就需要用到CRAP原則。這四個原則分別是對比、重復、對齊、親密性。

1. 對比 Contrast （增強效果、組織信息）

對比的基本作用是突出重點，增加可讀性。附加作用是有效增強視覺效果，打破平淡，吸引讀者注意。

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

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

大小對比

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

顏色對比

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

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

重復是保持整齊的重要準則。既包括字體、字號的重復，也包括顏色、風格的重復。對于新人來說，要時刻牢記，盡量統(tǒng)一字體、字號、顏色等一系列元素，在統(tǒng)一的基礎上，找出需要強調(diào)的部分，進行更改，通過對比原則進行強化。

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

知識點：

重復不是單一的機械式的元素重復，我們可以理解為用統(tǒng)一的重復元素塑造一個新的元素。當然這是在保留基本的元素時所塑造出來的高度統(tǒng)一性的畫面，從而增強我們所想要的設計效果。

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

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

對齊包括左對齊、居中對齊、右對齊 3 種方式。

• 左對齊：頁面中的元素以左基線對齊。左對齊是最常見的對齊方式，簡潔大方，利于閱讀；

• 居中對齊：頁面中的元素以中基線對齊。居中對齊給人一種嚴肅與正式感，不過也會有呆板的感覺；

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

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

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

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

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

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

分割：簡單來說就是分組，建立組合關系。常見的形式有線條分割，卡片分割等；

色相：通過顏色的對比，不同顏色的信息會暗示這是同一類。常見的日歷行程就是通過不同顏色來區(qū)分時間和具體事項。

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

什么是信噪比及在設計中的作用

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

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

知識點：

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

例如iOS6到iOS7圖標擬物到扁平到改變，讓用戶可以更快速準確的獲取到有效信息。而這一過程，就是典型的放大「信號」。

還有蝦米音樂的駕駛模式

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

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

圖版率的高低對設計的影響

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

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

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

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

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

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

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

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

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

文字在代碼中的實現(xiàn)及標注

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

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

2. 字體字重對應的font-weight值

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

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

這些有序排列中的每個值，對應字體的字重。其大致符合下列通用重量名稱：

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

△ 只包含400、700和900重量字形的字體家族的對應字重

△ 只包含300和600重量字形的字體家族的對應字重

3. 文本框行高的問題

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

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

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

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

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

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

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

Leading-Trim新規(guī)范

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

代碼示例：

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

使用后再來對比一下：

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

Leading-Trim修復對齊問題

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

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

知識點：

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

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

一致性和工作流程的改進

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

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

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

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

5. 設計中修改文字行高的方法

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

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

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

△在Sketch中修改文字高度

6. 什么是彈性適配

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

7. 標注工具

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

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

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

△Sketch Measure導出標注的網(wǎng)頁界面

設計驗收環(huán)節(jié)

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

因本文主講字體與排版，就拿這部分來說，需要檢視的就有：

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

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

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

• 字色：標題、正文、注釋、提示等文字顏色；

• 字間距：檢查中文間距和英文間距，段落文字標點有無避頭尾；

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

• ……

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

△ 視覺檢視表示例

視覺設計的驗收要追求細節(jié)上的完美，因為設計上的細節(jié)是很容易被挑錯的，同時需要耐性和細心，要有像素級的視角，只有這樣才能完美的還原設計稿。

寫在最后

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

參考文獻：

• 《W3C-CSS字體規(guī)范標準》

• 《從「行長為字號的整數(shù)倍」說起》

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

• 《關于UI設計中字體應用的干貨》

• 《字體與排版》

• 《深度剖析Baseline設計原理》

文章來源：優(yōu)設網(wǎng)

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

可能很多人認為搜索設計很簡單：在主頁頂部設計一個搜索框或者搜索圖標，就可以完成操作。但搜索前、中、后的體驗大家有沒有仔細考慮過呢？

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

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

一、搜索前的體驗

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

搜索設計常見的形式有3種:

• 頂部搜索框

• 圖標(放大鏡)搜索

• 底部搜索導航

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

1、頂部搜索框

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

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

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

當然也有例外，Airbnb在白色背景上就有一個白色的搜索框。為什么這樣設計呢？因為它的搜索框帶有陰影，能和背景作出區(qū)分，也是一種可行的設計方法。

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

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

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

另外一個好的搜索體驗的關鍵是能從視覺上區(qū)分與搜索相關的圖標。

2、搜索圖標

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

3、底部搜索導航

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

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

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

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

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

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

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

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

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

1、視覺和交互——做好搜索的準備

當我們有一個特定的搜索目標時，我們的注意力就會完全放在搜索框(或搜索圖標)上，如果突然被引導到一個新的頁面，可能會帶來零碎的體驗。

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

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

• 從搜索中返回的方法：取消。這對所有的搜索體驗都是必要的，可以使用取消或者返回圖標。

• 搜索框改變了填充色。搜索框從灰色變?yōu)榘咨从钞斍八阉鞑僮魈幱诮裹c狀態(tài)。

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

• 彈出光標來鼓勵用戶輸入文字。

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

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

關鍵的地方在于，搜索頁面在屏幕中間彈出，鍵盤向上滑動，用戶可以通過無縫的交互從“搜索前”平滑過渡到“搜索中”。 

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

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

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

當一款產(chǎn)品的功能主要是為了讓用戶完成某個特定的任務或達到某個目標，那么它可能就沒有動機去推廣任何內(nèi)容。這類產(chǎn)品只會顯示最近的搜索記錄，比如Notion是一個筆記應用，只負責存儲用戶的筆記，因此只顯示過去的搜索記錄來幫助用戶進行搜索。

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

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

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

主頁上的推薦內(nèi)容可能很容易被忽略(因為它可能與用戶的操作無關)，但是搜索頁上的熱門推薦很少會被忽視。因為用戶是帶著目標主動進入搜索頁，所以不會省略頁面上的任何信息。

熱門類別

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

熱門話題

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

熱門新聞

新聞類搜索具有很強的時效性，用戶很清楚明天的內(nèi)容將不同于今天的內(nèi)容。所以有些App會對新聞或熱搜進行實時排名，向用戶展示最熱門的資訊。

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

搜索推薦

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

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

搜索細分

Medium的搜索做得很聰明，它將搜索頁面細分為兩個步驟：先點擊搜索框來瀏覽不同的主題，再次點擊會顯示光標和搜索記錄。通過這種分解體驗，用戶在搜索時獲得了更多的信息量和更簡潔的體驗。

總結(jié)

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

文章來源：站酷      作者：Clippp

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

伴隨著移動互聯(lián)網(wǎng)的快速發(fā)展，5G通信，人工智能，物聯(lián)網(wǎng)等新技術的發(fā)展也越趨成熟，人們接觸信息的效率不斷在提高，接受信息的緯度也更廣泛，如何消化我們在生活中被大量切割的碎片化時間，如何能讓用戶更聚焦內(nèi)容不被打擾，拉長用戶的停留時間，我們正身處在一個內(nèi)容快速消費的時代。

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

攝影攝像｜ Photo & Video

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

1. 微距拍攝

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

△ 來源于網(wǎng)絡

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

△ 威士忌廣告片段

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

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

△ 來源于網(wǎng)絡

2. 升格拍攝

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

△ 來源于網(wǎng)絡

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

△ 來源于網(wǎng)絡

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

3. 無人機航拍

航拍一直以來都是一個不可或缺的拍攝手法，很多的電影以及廣告宣傳片當中我們都可以看到不少的大范圍運鏡片段，天空中的視角對與陸地上行走的人來說還是一個十分新奇的視角，一般來說也很難看得到，所以片子中加入航拍的元素往往可以增加不少高級感。

△ 來源于網(wǎng)絡片段

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

△ 來源于網(wǎng)絡片段

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

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

△ 威士忌廣告片段

△ ANGIE’S爆米花廣告

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

△ QQ x MINISO

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

視頻動畫｜Animation

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

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

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

Realtime-Render （實時渲染）：在虛擬世界的圖形表現(xiàn)中，實時渲染占有很重要的地位。所謂實時渲染，就是圖形數(shù)據(jù)的實時計算和輸出。如果說實時渲染的概念對你很陌生，那如果用實時渲染領域中的一個重頭戲來給你舉例，相信你就不會有陌生的感覺：那就是游戲。游戲因為需要玩家去互動，因而對渲染的實時性有很高的要求。隨著計算機圖形技術的不斷發(fā)展、硬件計算能力的不斷升級，游戲?qū)崟r渲染的畫面逐漸從簡陋走向逼近真實。

△ Unreal engine 4

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

△ Visual ASMR Rock by Onesal

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

△ Unreal engine 5

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

虛幻5

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

△ Unreal engine 5

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

△ Unreal engine 5

Nanite

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

△ Unreal engine 5

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

Lumen

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

△ Unreal engine 5

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

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

△ Rebirth

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

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

△ After the mountain Rain

來自中國的藝術家Fisher Dai（戴鑫祺）使用Megascans和Unreal engine4創(chuàng)造的4K個人作品。

△ After the mountain Rain(戴鑫祺)

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

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

△ Unreal for all Creators by The Mill

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

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

△ 《Bloom》by Hubert Blajer

△ 《Mostly wood》by Nejc Polovsak

△ 《Digital Design Days 2020 titles》

R&D

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

△ Manvsmachine 《No stress Test》

△ 《A website makes it real》

△ Lukas Vojir R&Dshowreel

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

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

The Loch by Boxfort

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

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

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

△ 《PlusOne Manifesto》 By Martijn Hogenkamp

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

△ 《企鵝誕生記》By ISUX

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

△ 《Futuro Darko》 By Craig Farquharson

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

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

△ 《Gogoro S3 Future Fast》 By MIXCODE STUDIO

6. 復古懷舊風格回歸

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

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

△ 《MouseQ 滑板俱樂部》By ISUX

△ 《ACE OF SPADES》 by Tony Babel

△ 《Can of worms》 by Tony Babel

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

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

△ 《BIC》by Artem ‘Hinz’ Yudin

△ 《Microsoft SharePoint 》

△ 《Beautyrest》 by Tendril

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

突破限制的版式

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

1. 視覺設計

2. 網(wǎng)頁設計

△ CreativeCrew

△ Le Cantiche 1320

△ reed.be

3. 界面設計

△ Olympic Sports Website by Daniel Tan

4. 交互裝置｜Interactive Installation

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

AR/VR

△ Fórum Internacional de Gaia 2019

2. 沉浸式視聽設計

△ 《JOURNEY》 by NOHLAB

3. 多媒體交互裝置

△ 《Teleport 》By PITCH

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

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

多媒體的設計趨勢在未來會如何發(fā)展，我們拭目以待。

文章來源：站酷    作者：騰訊ISUX

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