很多朋友面對(duì)AE表達(dá)式望而生畏，不過再難的東西都會(huì)有它最本質(zhì)的規(guī)則，如果你理解了基本的原理和常用的表達(dá)式命令，這也許會(huì)提高你的工作效率。我通過自己對(duì)AE表達(dá)式的理解，嘗試用最簡單的語言解釋一些看似復(fù)雜的操作，如果此篇文章能給你帶來一些啟發(fā)，不勝榮幸~

首先什么是表達(dá)式呢？

表達(dá)式就是AE內(nèi)部基于JS編程語言開發(fā)的編輯工具，可以理解為簡單的編程，不過沒有編程那么復(fù)雜。其次表達(dá)式只能添加在可以編輯的關(guān)建幀的屬性上，不可以添加在其他地方；表達(dá)式的使用根據(jù)實(shí)際情況來決定，如果關(guān)鍵幀可以更好的實(shí)現(xiàn)你想要的效果，使用關(guān)鍵幀就可以啦，表達(dá)式大部分情況下是可以更節(jié)約時(shí)間，提高工作效率的。

接下來看一下如何添加表達(dá)式

表達(dá)式工具

A.表達(dá)式開關(guān) B.表達(dá)式圖表 C.表達(dá)式關(guān)聯(lián)器 D.表達(dá)式語言菜單

由于AE里不同的屬性的參數(shù)不同，常用的我們可以分為：數(shù)值（旋轉(zhuǎn)/不透明度）、數(shù)組（位置/縮放）、布爾值（true代表真、false代表假/0代表假、1代表真）這三種形式來進(jìn)行書寫表達(dá)式。對(duì)于表達(dá)式AE也有很多內(nèi)置的函數(shù)命令，直接可以在表達(dá)式語言菜單里面進(jìn)行調(diào)用。

接下來一起看看常用的表達(dá)式有哪些吧！

1. time表達(dá)式

原理:

time表示時(shí)間，以秒為單位，time*n =時(shí)間（秒數(shù)）*n （若應(yīng)用于旋轉(zhuǎn)屬性，則n表示角度）

舉例:

若在旋轉(zhuǎn)屬性上設(shè)置time表達(dá)式為time*60，則圖層將通過1秒的時(shí)間旋轉(zhuǎn)60度，2秒時(shí)旋轉(zhuǎn)到120度以此類推（數(shù)值為正數(shù)時(shí)順時(shí)針旋轉(zhuǎn)，為負(fù)數(shù)時(shí)逆時(shí)針旋轉(zhuǎn)）

注意事項(xiàng):

time只能賦予一維屬性的數(shù)據(jù)。(位置屬性可進(jìn)行單獨(dú)尺寸的分離，從而可單獨(dú)設(shè)置X或Y上的time)

2. 抖動(dòng)/擺動(dòng)表達(dá)式

wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)

原理:

freq=頻率（設(shè)置每秒抖動(dòng)的頻率）；amp=振幅（每次抖動(dòng)的幅度）；octaves=振幅幅度（在每次振幅的基礎(chǔ)上還會(huì)進(jìn)行一定的震幅幅度，很少用）；amp_mult=頻率倍頻（默認(rèn)數(shù)值即可，數(shù)值越接近0，細(xì)節(jié)越少；越接近1，細(xì)節(jié)越多）；t=持續(xù)時(shí)間（抖動(dòng)時(shí)間為合成時(shí)間，一般無需修改）；一般只寫前兩個(gè)數(shù)值即可

舉例:

若在一維屬性中，為位置屬性添加wiggle(10,20)，則表示圖層每秒抖動(dòng)10次，每次隨機(jī)波動(dòng)的幅度為20；若在二維屬性中，為縮放添加n=wiggle(1,10);[n[0],n[0]]，則表示圖層的縮放XY在每秒抖動(dòng)10次，每次隨機(jī)波動(dòng)的幅度為20；若在二維屬性中，想單獨(dú)在單維度進(jìn)行抖動(dòng)，需要將屬性設(shè)置為單獨(dú)尺寸后添加wiggle(10,20)，表示圖層的縮放X軸在每秒抖動(dòng)10次，每次隨機(jī)波動(dòng)的幅度為20。

注意事項(xiàng):

可直接在現(xiàn)有屬性上運(yùn)行，包括任何關(guān)鍵幀

3. index表達(dá)式（索引表達(dá)式）

原理:

為每間隔多少數(shù)值來產(chǎn)生多少變化

舉例:

若為圖層1的旋轉(zhuǎn)屬性添加表達(dá)式index*5 ，則第一個(gè)圖層會(huì)旋轉(zhuǎn)5度，之后按Ctrl+D去復(fù)制多個(gè)圖層時(shí)，第2個(gè)圖層將旋轉(zhuǎn)10度，以此類推；若想第一層圖形不產(chǎn)生旋轉(zhuǎn)保持正常形態(tài)，復(fù)制后的圖形以5度遞增，表達(dá)式可寫為(index-1)*5

4. value表達(dá)式

原理:

在當(dāng)前時(shí)間輸出當(dāng)前屬性值

舉例:

若對(duì)位置屬性添加表達(dá)式為value+100，則位置會(huì)在關(guān)鍵幀數(shù)值的基礎(chǔ)上對(duì)X軸向右偏移100（正數(shù)向右側(cè)，負(fù)數(shù)像左側(cè)）；若想控制Y軸的位置屬性，則可對(duì)位置屬性進(jìn)行單獨(dú)尺寸的分割，從而可單獨(dú)控制Y軸（正數(shù)向下，負(fù)數(shù)向上）

注意事項(xiàng):

更多的使用場景是結(jié)合其他表達(dá)式一起應(yīng)用

5. random表達(dá)式（隨機(jī)表達(dá)式）

原理:

random(x,y)在數(shù)值x到y(tǒng)之間隨機(jī)進(jìn)行抽取，最小值為x，最大值為y

舉例:

若為數(shù)字源文本添加表達(dá)式random(20)，則數(shù)據(jù)會(huì)隨機(jī)改變，最大值不會(huì)超過20；

若為數(shù)字源文本添加表達(dá)式random(10,100)，則數(shù)據(jù)會(huì)在10<數(shù)值<100之間隨機(jī)改變； 若為數(shù)字源文本添加表達(dá)式seedRandom(5, timeless = false)，random(50)，則數(shù)據(jù)會(huì)在50以內(nèi)隨機(jī)改變（前面的5是種子數(shù)，如一張畫面中需要多個(gè)相同區(qū)間的數(shù)值做隨機(jī)變化，就要為他們添加不同的種子數(shù)，防止兩者隨機(jī)變化雷同）,若希望數(shù)字隨機(jī)變化為整數(shù)則應(yīng)添加表達(dá)式為Math.round(random(2,50))，表示在2和50之間隨機(jī)改變無小數(shù)

注意事項(xiàng):

隨機(jī)表達(dá)式不僅局限于數(shù)據(jù)上的使用，其他屬性也可以應(yīng)用，若數(shù)值為整數(shù)Math的M要大寫

6. loopOut表達(dá)式（循環(huán)表達(dá)式）

原理:

• loopOut(type=”類型”,numkeyframes=0)對(duì)一組動(dòng)作進(jìn)行循環(huán)
• loopOut(type=”pingpong”,numkeyframes=0)是類似像乒乓球一樣的來回循環(huán)；
• loopOut(type=”cycle”,numkeyframes=0)是周而復(fù)始的循環(huán)；
• loopOut(type=”continue”)延續(xù)屬性變化的最后速度，
• loopOut(type=”offset”,numkeyframes=0)是重復(fù)指定的時(shí)間段進(jìn)行循環(huán)；
• numkeyframes=0是循環(huán)的次數(shù)，0為無限循環(huán)，1是最后兩個(gè)關(guān)鍵幀無限循環(huán)，2是最后三個(gè)關(guān)鍵幀無限循環(huán)，

以此類推

舉例:

如下圖gif

7. timeRemap表達(dá)式（抽幀）

原理:

timeRemap*n，n以幀為單位

舉例:

將圖層設(shè)置為timeRemap*10，代表每隔10幀就抽掉1幀畫面，(根據(jù)要抽取的速率決定)

注意事項(xiàng):

使用timeRemap表達(dá)式之前要啟用時(shí)間重映射，否則無法使用此表達(dá)式

8. linear表達(dá)式（線性表達(dá)式）

原理:

• linear(t, tMin, tMax, value1, value2)表示linear(time, 開始變化的時(shí)間, 結(jié)束變化的時(shí)間, 開始變化時(shí)的數(shù)值, 結(jié)束變化的數(shù)值);
• linear(t, value1, value2)表示當(dāng)time在0到1之間時(shí)，從value1變化到value2；
• ease(t, tMin, tMax, value1, value2)的含義與linear一樣， 區(qū)別是在tMin和tMax點(diǎn)處，進(jìn)行緩入緩出，使數(shù)據(jù)更加平滑；
• easeIn(t, tMin, tMax, value1, value2)與linear的含義一樣， 區(qū)別是在tMin處，進(jìn)行緩入，使數(shù)據(jù)更加平滑；
• easeOut(t, tMin, tMax, value1, value2)與linear的含義一樣， 區(qū)別是在tMax點(diǎn)處，進(jìn)行緩出，使數(shù)據(jù)更加平滑

舉例:

見下圖均以(time,0,3,131,1000)為例，若為數(shù)字的源文本屬性添加此表達(dá)式可以制作出倒計(jì)時(shí)的效果n=linear(time, 0, 3, 3, 0)表示從0-3秒數(shù)字從3到0，希望數(shù)字為整體需添加Math.floor(）

注意事項(xiàng):

倒計(jì)時(shí)的用法比較常用，整數(shù)M要大寫

9. Other Math（角度弧度）

原理:

degreesToRadians(degrees) 角度轉(zhuǎn)為弧度（degrees度的變量或表達(dá)式）radiansToDegrees(radians)弧度轉(zhuǎn)為角度（radians弧度的變量或表達(dá)式）

舉例:

常用語數(shù)學(xué)中的一些計(jì)算sin，cos，tan，sec，csc，cot等

10. layer表達(dá)式

原理:

layer(index)中index 是數(shù)值，按照編號(hào)檢索圖層；layer(name)中name 是一個(gè)字符串，按照名稱檢索圖層（若沒有圖層名稱，則根據(jù)源名稱）；layer(otherLayer, relIndex)中otherLayer 表示圖層對(duì)象，relIndex 表示數(shù)值，檢索屬于圖層對(duì)象的數(shù)值圖層

舉例:

• layer(index)—thisComp.layer(1).position；
• layer(name)—thisComp.layer(“形狀圖層1”)；
• layer(otherLayer, relIndex)—thisComp.layer(thisLayer, 1).active 將返回 true

11. marker表達(dá)式

原理:

marker.key(index)中index 是數(shù)值；marker.key(name)中name 是一個(gè)字符串

舉例:

thisComp.marker.key(1).time表示返回第一個(gè)合成標(biāo)記的時(shí)間;thisComp.marker.key(“我叫注釋名稱”).time表示返回具有名稱”我叫注釋名稱”的合成標(biāo)記的時(shí)間

12. comp(合成屬性和方法)width與height表達(dá)式

原理:

width表示返回合成寬度；height表示返回合成高度

舉例:

[thisComp.width/2, thisComp.height/2]表示寬度和高度為合成的一半也就是居中的位置

13. param表達(dá)式

原理:

param(name)中name表示字符串；param(index)表示數(shù)值

舉例:

effect(“高斯模糊”).param(“模糊度”)效果控制點(diǎn)始終位于圖層空間中

14. 彈性表達(dá)式

原理:

復(fù)制粘貼表達(dá)式使用就可以，amp表示振幅,freq表示頻率,decay表示衰減（根據(jù)不同需求做不同的調(diào)整）

舉例:

n = 0; if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){n–;}}

if (n == 0){t = 0;}else{

t = time – key(n).time;}

if (n > 0){

v = velocityAtTime(key(n).time – thisComp.frameDuration/10);

amp = .03;

freq = 2.5;

decay = 4.0;

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}else{value;}

上述內(nèi)容復(fù)制粘貼使用即可

注意:motion2腳本也帶此功能，方法不唯一

15. 反彈表達(dá)式

原理:

k表示反彈最終結(jié)果，a表示反彈阻力，b表示反彈變化時(shí)間

舉例:

k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根據(jù)不同情況調(diào)節(jié)kab的數(shù)值即可）

16. 數(shù)字遞增表達(dá)式

原理:

StartNumber表示開始時(shí)的數(shù)值，EndNumber表示結(jié)束時(shí)的數(shù)值，StartTime表示開始的時(shí)間，EndTime表示結(jié)束的時(shí)間，和前面的linear表達(dá)式相對(duì)應(yīng)

舉例:

StartNumber=1;

EndNumber=20;

StartTime=0;

EndTime=3;

t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)

17. 擠壓與伸展

原理:

spd表示擠壓拉伸的速度，maxDev表示擠壓拉伸的大小，decay表示衰減

舉例:

spd =20;maxDev =10;

decay = 1;

t = time – inPoint;

offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);

scaleX = scale[0] + offset;scaleY = scale[1] – offset;

[scaleX,scaleY]

18. 運(yùn)動(dòng)拖尾

原理:

delay表示要延遲的幀數(shù)

舉例:

為位置屬性添加表達(dá)式delay = 0.5;

d = delay*thisComp.frameDuration*(index – 1);

thisComp.layer(1).position.valueAtTime(time – d)；

如想要實(shí)現(xiàn)不透明度拖尾需為不透明度屬性添加表達(dá)式opacityFactor =.80;

Math.pow(opacityFactor,index – 1)*100(調(diào)整好一個(gè)圖層后復(fù)制多個(gè))

文章來源：優(yōu)設(shè)    作者：凌旬 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

一轉(zhuǎn)眼，夏天就來了，設(shè)計(jì)中需要清新又抓人眼球的圖片，老板又要求使用各年齡段都喜歡的插畫風(fēng)格，應(yīng)用場景要廣，但是預(yù)算又沒有那么多，該怎么辦呢？這也不是熬夜就能熬出來的，不要煩惱，下面這個(gè)網(wǎng)站立馬解決你上面所有需求的同時(shí)，還能幫助提升你的工作效率，延緩你禿頭的時(shí)間。

這個(gè)創(chuàng)造性超強(qiáng)的插畫制作網(wǎng)站就是 BLUSH ，你可以根據(jù)自己的想法進(jìn)行元素的替換，也可以直接使用 8 位網(wǎng)站合作設(shè)計(jì)師的現(xiàn)有作品，超清新的顏色和多樣的搭配空間，絕對(duì)會(huì)讓你十分滿意的，無論是做 Banner、海報(bào)還是用作文章中的插圖都十分合適。最重要的是，可以免費(fèi)商用！接下來就跟著我一起，走進(jìn)這個(gè)網(wǎng)站吧。

網(wǎng)站鏈接：https://blush.design/

網(wǎng)站內(nèi)擁有 12 大種類的插畫圖庫，包含人物、城市風(fēng)景、植物、甜點(diǎn)、涂鴉等等。選擇你喜歡或者需要的一類，就可以開始你的創(chuàng)作。操作類似于換裝游戲，在各個(gè)你需要改變的地方更換你喜歡的元素就可以。如果你要摸清整個(gè)網(wǎng)站可以產(chǎn)生多少種搭配的話，可能需要花上你不止一天的時(shí)間哦。

從上圖可以看出，單在人物上，網(wǎng)站就提供了不同的風(fēng)格，有像兒童形象的「Friendly ones」，也有極簡線條的「Big Shoes」，還有夸張超炫的「Power Moves」等等。接下來，為了更好的理解網(wǎng)站提供的服務(wù)和操作的方式，我選取實(shí)用多變的「Croods」來演示。

首先在欄目左側(cè)選擇「Croods」，就會(huì)看到下面這樣的界面。最上面是設(shè)計(jì)師的作品，下面則是可以由你自由創(chuàng)造作品的入口，造型可以選擇站著或者坐著，場景可以選擇談話、聚會(huì)、公園等等，整體的背景也有五大類供你選擇。

這里我選擇點(diǎn)擊「Peaceful Place」。網(wǎng)站出現(xiàn)的作品很符合現(xiàn)在多數(shù)人在家辦公的狀態(tài)，如果你不想自己動(dòng)手，那直接選擇這張圖片或者點(diǎn)擊「Randomiza」再隨機(jī)生成一張圖片，自己滿意之后，點(diǎn)擊「Download」便可以獲取 PNG 格式的圖片，不過，高品質(zhì) PNG 和 SVG 格式則需要付費(fèi)。

當(dāng)然，你也可以通過改變圖片上的各個(gè)元素，生成你所需要的場景插畫。例如想要一個(gè)盤著腿坐在沙發(fā)上發(fā)消息，和朋友聊天聊的很開心的一個(gè)形象，就可以通過下方給予的元素進(jìn)行個(gè)性化定制，把表情改成開心，電腦換成手機(jī)，右上方替換成聊天框，最后導(dǎo)出為下圖的樣子。如果想要多人的場景，在上一步選擇多人的場景進(jìn)入就可以了。

同時(shí)，網(wǎng)站也支持下載插件，方便眾位設(shè)計(jì)師在 Figma 中更好的運(yùn)用。在首頁點(diǎn)擊右上角的「Get Plugin」進(jìn)入頁面，注冊(cè)賬號(hào)就可以順利安裝插件。大家可以根據(jù)自己的需要選擇下載插件或者直接在網(wǎng)站上在線制作。

最后，不得不提的一點(diǎn)是，網(wǎng)站圖庫在兼顧多樣性和平等性上做了很大的努力，人物的膚色可以隨你改變，殘疾人也有一席之地，可以選擇為人物匹配輪椅，或者給人物戴上假肢，涵蓋盡可能多的人物情況和場景。相信這樣的網(wǎng)站一定能滿足你豐富的設(shè)計(jì)需求，快去使用吧！

文字來源：優(yōu)設(shè)    作者：山楂

距離上一次介紹 The Stocks 已經(jīng)超過五年，前段時(shí)間無意間瀏覽到這個(gè)網(wǎng)站，才想起我以前好像也寫過文章，不過網(wǎng)站現(xiàn)在變得不太一樣而且內(nèi)容又更完整了，非常推薦加入收藏，因?yàn)檎娴暮芊奖恪Ｈ绻氵€不知道 The Stocks，它整合各種設(shè)計(jì)相關(guān)免費(fèi)資源，最早只有將一些免費(fèi)圖庫整合在一起，讓找圖的使用者透過側(cè)邊欄選單快速切換各個(gè)不同圖庫網(wǎng)站，加速搜尋圖庫的效率。

在全新的 The Stocks 2 除了免費(fèi)圖庫，加入配色工具、免費(fèi)圖標(biāo)、免費(fèi)影片、免費(fèi)字體和 Mockups 素材網(wǎng)站共六種項(xiàng)目，相較于早期來說在資源數(shù)量上增加不少，現(xiàn)在一樣可以從網(wǎng)站側(cè)邊選單選取你要瀏覽的素材類型，The Stocks 就會(huì)出現(xiàn)一整排的網(wǎng)站列表讓使用者直接選擇，再從這些網(wǎng)站去尋找你要的免費(fèi)資源。

對(duì)于平常會(huì)需要搜尋設(shè)計(jì)相關(guān)資源的使用者來說，The Stocks 是很好用的工具。

不過 The Stocks 現(xiàn)在會(huì)加入一些贊助商「推薦」內(nèi)容，如果使用者進(jìn)入這些服務(wù)，也有付費(fèi)購買的話 The Stocks 開發(fā)者就能獲得回饋（其實(shí)就是 Affiliate），網(wǎng)站主要還是以收錄免費(fèi)服務(wù)為主。

The Stocks 2

網(wǎng)站鏈接：http://thestocks.im/

使用教學(xué)

開啟 The Stocks 網(wǎng)站后會(huì)隨機(jī)顯示一個(gè)免費(fèi)圖庫，The Stocks 主要功能列在左側(cè)，點(diǎn)選選單上的網(wǎng)站名稱會(huì)將網(wǎng)頁顯示于右側(cè)，方便在各個(gè)外部網(wǎng)站跳轉(zhuǎn)和搜尋，不過有些網(wǎng)站不允許被嵌入其他頁面，這時(shí)候就會(huì)以開新分頁方式替代。

左上角是 The Stocks 收錄的免費(fèi)資源類型，包括免費(fèi)圖庫、配色工具、免費(fèi)圖標(biāo)、免費(fèi)影片、免費(fèi)字體和 Mockups 素材網(wǎng)站，點(diǎn)選后下方的網(wǎng)站列表就會(huì)實(shí)時(shí)更新。

有些標(biāo)示為 Featured 就是本文前面提到的贊助商推薦內(nèi)容，大多都是付費(fèi)服務(wù)，例如銷售相片圖片的 Shutterstock、iStock 圖庫，如果有在找圖的朋友應(yīng)該不陌生，其實(shí)很多免費(fèi)圖庫也是透過刊登付費(fèi)圖庫廣告來獲取收益。

當(dāng)然 The Stocks 收錄的網(wǎng)站仍以免費(fèi)資源居多，點(diǎn)選后就能快速瀏覽網(wǎng)站，如果操作上發(fā)現(xiàn)有些問題或無法正確顯示，亦可搜尋該網(wǎng)站名稱直接在瀏覽器開啟。

最近因?yàn)橐咔殛P(guān)系，很多公司改為在家上班，如果要開會(huì)就會(huì)透過一些視頻會(huì)議軟件例如 Zoom ，The Stocks 也有提供 Zoom 適用的免費(fèi)虛擬背景（特別是家里背景很雜亂的朋友可以稍微隱藏一下），這些素材可以在網(wǎng)站右上角 Zoom Virtual Backgrounds 找到。

值得一試的三個(gè)理由：

• 整合免費(fèi)圖庫、配色工具、免費(fèi)圖標(biāo)、免費(fèi)影片、免費(fèi)字體等相關(guān)網(wǎng)站
• 點(diǎn)選網(wǎng)站鏈接即可在同一頁面快速切換瀏覽

• 對(duì)于要搜尋素材來說很方便很有用

文章來源：優(yōu)設(shè)    作者：Pseric

有時(shí)候做國風(fēng)的設(shè)計(jì)作品，如果選擇黑體和宋體可能太過端正，但選擇書法字體的話，可能因?yàn)轱w白或過度連筆導(dǎo)致字體不容易識(shí)別，那選什么字體呢？我建議大家選擇楷體，注意不是選系統(tǒng)自帶的楷體，而是今天推薦的演示悠然小楷，字體手稿由一位美麗女生書寫，其字體有著悠然自得、閑情逸致的氣質(zhì)。

「演示悠然小楷」是由 keynote 研究所 x 秋葉 PPT 聯(lián)合發(fā)布的一款免費(fèi)商用字體，推薦設(shè)計(jì)師們收藏或下載。下載地址見文末。

字體案例演示

1. 青春/知識(shí)

△ By@偉崇

2. 文學(xué)/歷史

△ By@偉崇

3. 游戲/小說

△ By@小敏

4. 中式地產(chǎn)

△ By@偉崇

5. 商務(wù)風(fēng)

△ By@偉崇

8. 主視覺設(shè)計(jì)

△ By@畫生

△ By@畫生

9. 海報(bào)物料

△ By@畫生

△ By@畫生

△ By@畫生

10. 電商廣告

△ By@畫生

△ By@畫生

△ By@畫生

11.文字排版

△ By@畫生

△ By@畫生

12. 品牌形象設(shè)計(jì)延展

△ By@畫生

△ By@畫生

△ By@畫生

字體搭配

1. 思源宋體

△ By@澄音

2. 方正宋刻本秀楷

清刻本悅宋用得多了，不如試試這款有些相似但又有不同的「方正宋刻本秀楷」，較之前者字形更為周正，筆畫更為果決，娟秀之中蘊(yùn)藏力量。

△ By@畫生

3. Garamond

Garamond 是一款古樸傳統(tǒng)的襯線字體，在西文體系中歷史悠久，恰因沒有特殊的個(gè)性而被廣泛使用，是老式襯線體中最具代表性的字體，與同樣以端正工整為名的楷書作搭，最能相互映襯。

△ By@畫生

4. 阿里巴巴普惠體

基礎(chǔ)黑體的字體沒有復(fù)雜的修飾，進(jìn)一步弱化次要信息，強(qiáng)烈對(duì)比下讓主角得以更好的突顯，也讓畫面層次感更加豐富，而基礎(chǔ)型的黑體，必然首推阿里巴巴普惠體。

△ By@畫生

字體下載

• 字體名稱：演示悠然小楷字體
• 系統(tǒng)名稱：slideyouran（有的軟件顯示不出中文字體，就用這個(gè)來搜索）
• 網(wǎng)頁 CSS 字體屬性：font-family:slideyouran
• 字體版權(quán)：永久免費(fèi)，包括商用

下載地址：https://pan.baidu.com/s/1ohOK2RSEA9vsfHAbfvpZmw 提取碼：ypae

本文6000字上下，反復(fù)校對(duì)6遍以上，初步閱讀完大概需要25分鐘，若是深入理解并完全吸收則建議“先收藏再反復(fù)的品，細(xì)細(xì)的品”。希望對(duì)各位朋友有所幫助，不足之處望校正，祝閱讀愉快。

雙20年終究還是來了，互聯(lián)網(wǎng)產(chǎn)品對(duì)于這個(gè)時(shí)代不是什么新鮮事了，互聯(lián)網(wǎng)人也從未停止對(duì)優(yōu)秀產(chǎn)品的探索和創(chuàng)新。而做為一個(gè)設(shè)計(jì)人的我們，在前行的腳步中也應(yīng)該溫故知新，就讓我跟大家一起來對(duì)iOS、Android的設(shè)計(jì)規(guī)范、適配問題做一次全面的梳理和復(fù)習(xí)吧。

iOS設(shè)計(jì)規(guī)范

蘋果自07年1月9日正式發(fā)布iPhone到目前為止的iPhone11Pro Max，已經(jīng)歷了十三代產(chǎn)品。19年9月11日推出的11、11Pro、11Pro Max并沒有新增尺寸，所以對(duì)設(shè)計(jì)師而言也就沒有額外新增工作量了，還是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做設(shè)計(jì)稿，再提供@2x、@3x切圖。

以下為蘋果手機(jī)歷代產(chǎn)品明細(xì)（話說你擁有過那幾代產(chǎn)品，歡迎留言交流）

一代：iPhone

二代：iPhone3G

三代：iPhone3GS

四代：iPhone 4

五代：iPhone 4s

六代：iPhone 5

七代：iPhone 5s、iPhone 5c

八代：iPhone6、iPhone6 Plus

九代：iPhone 6s、iPhone 6s Plus

十代：iPhone7、iPhone7 Plus

十一代：iPhone8、iPhone8 Plus、iPhone X

十二代：iPhone XS、iPhone XS Max、iPhone XR

十三代：iPhone11、iPhone11Pro、iPhone11Pro Max

如何有效記住iOS設(shè)計(jì)規(guī)范，這里我總結(jié)了一個(gè)方法“iOS五點(diǎn)兩圖記憶法”，也就是五個(gè)點(diǎn)+兩張圖。

1、設(shè)計(jì)尺寸：375x667pt @1x（750x1334px @2x）為基準(zhǔn)設(shè)計(jì)。

2、設(shè)計(jì)工具：Sketch、Adobe XD、Photoshop

3、預(yù)覽效果：Sketch Mirror、Adobe XD或Ps Play

4、切圖輸出：@2x @3x兩套

5、標(biāo)注工具：藍(lán)湖，摹客

兩圖psd下載鏈接：https://pan.baidu.com/s/15g2x0vDd1yZevADuUj1V3g 提取碼: i4ai

考考你：

1、iPhone8尺寸的設(shè)計(jì)稿如何快速變成iPhoneX的設(shè)計(jì)稿？

2、@2倍圖被當(dāng)作@3倍進(jìn)行開發(fā)，會(huì)導(dǎo)致什么樣的后果？

3、為什么要用375x667pt @1倍圖進(jìn)行設(shè)計(jì)？（后文也有詳細(xì)答案哦）

4、iPhone8顯示為34px的文字在iPhone11 pro Max里面是不是也是34px？

這里我們首先重點(diǎn)理解下PX和PT這兩個(gè)單位， 弄清楚為什么建議使用一倍圖進(jìn)行UI設(shè)計(jì)，才能在設(shè)計(jì)中以不變應(yīng)萬變。（說明：該部分內(nèi)容優(yōu)化自靜電老師的總結(jié)。公眾號(hào)@靜Design）

PX大家可能比較熟悉，就是像素，英文pixel的簡稱。最通俗的理解就是找一個(gè)放大鏡（不是電腦中的放大鏡，是真實(shí)的放大鏡），然后對(duì)準(zhǔn)自己面前的顯示器或者手機(jī)屏幕觀看，大部分顯示器會(huì)在放大鏡下出現(xiàn)一個(gè)個(gè)點(diǎn)。這就是我們平時(shí)所說的像素概念。在一臺(tái)物理分辨率為1080x1920px的顯示器中，橫向分布1920個(gè)點(diǎn)，縱向則有1080個(gè)點(diǎn)。這些點(diǎn)通過顯示器的光學(xué)特性，為我們組成不同的圖像。

請(qǐng)注意， 在不同尺寸的顯示器上，這些點(diǎn)的單位面積并不是一樣的。比如一臺(tái)22英寸的1080p液晶顯示器與一臺(tái)27英寸的1080p液晶顯示器，可以發(fā)現(xiàn)這兩臺(tái)顯示器的像素分布就是27英寸的顯示效果明顯遜于22英寸顯示器的效果，一個(gè)重要的原因就是兩臺(tái)液晶面板中的“像素”顆粒大小不一。

由此可見，像素這個(gè)單位是一個(gè)相對(duì)單位，不能用厘米、毫米等這些絕對(duì)度量單位來衡量他的長度或者寬度，因?yàn)?像素只代表一個(gè)單位的“點(diǎn)”。

另一個(gè)重要單位是PT，英文point的簡稱，這個(gè)單位也是iOS開發(fā)過程中使用的單位，與px這樣的相對(duì)單位不同，PT（Point）是一個(gè)絕對(duì)單位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。

同樣用簡單直觀的例子來演示，拿兩臺(tái)不同型號(hào)的iPhone，比如一臺(tái)ip11和一臺(tái)ip11pro Max，打開同樣一款應(yīng)用（如QQ音樂），準(zhǔn)備好一把尺子，使用尺子分別測(cè)量最上方title“音樂館”文字尺寸。經(jīng)測(cè)量，可以發(fā)現(xiàn)不同型號(hào)的“音樂館”文字的尺寸都一樣。也可以請(qǐng)iOS開發(fā)人員分別寫兩個(gè)針對(duì)不同尺寸機(jī)型適配的同一個(gè)文件，并在兩部手機(jī)安裝，確保這個(gè)文件中的字體使用一個(gè)字號(hào)（30PT）。在兩個(gè)手機(jī)中運(yùn)行并用尺子測(cè)量，我們發(fā)現(xiàn)他們的物理尺寸完全一樣。

請(qǐng)大家記住一點(diǎn)，px是相對(duì)單位，pt為絕對(duì)單位（類似單位為厘米，毫米等等）。在不確定屏幕密度的情況下，px與pt沒有任何可比性。

在開發(fā)工程師眼中，你如果使用750px的分辨率作圖，那么按原大小標(biāo)注設(shè)計(jì)稿中的尺寸的話，他們同樣在開發(fā)環(huán)境中是要換算為一倍尺寸的，比如你標(biāo)注了字號(hào)為40px，那么最終開發(fā)工程師寫在代碼里的就是20pt，除以2的關(guān)系。但是呢，如果使用一倍基準(zhǔn)分辨率作圖，那么就不用除以2啦，所有尺寸開發(fā)工程師直接拿過去隨取隨用。

sketch作為一款純矢量的移動(dòng)端ui設(shè)計(jì)軟件，不管是設(shè)計(jì)還是后期與開發(fā)工程師的配合，都嚴(yán)格遵從開發(fā)原理，這種設(shè)計(jì)方法可以最大限度保證設(shè)計(jì)稿的復(fù)現(xiàn)，同時(shí)也可以減小文件體積和系統(tǒng)資源消耗，不管是從哪個(gè)方面看，都是設(shè)計(jì)師制作ui界面的明智之選。

最后總結(jié)一下原因，設(shè)計(jì)師使用一倍基準(zhǔn)尺寸作圖，主要是單位轉(zhuǎn)換方便，輸出切圖方便，理解簡單。對(duì)于工程師，他們不用再進(jìn)行復(fù)雜的換算，有助于完美復(fù)現(xiàn)設(shè)計(jì)稿。

我們繼續(xù)熟悉iOS中一些必不可少的頁面規(guī)范細(xì)則。

一、引導(dǎo)頁

引導(dǎo)頁是一張完整圖，不能適配，因此需要單獨(dú)出設(shè)計(jì)圖，iOS共需提供6套尺寸，當(dāng)然也支持視頻形式。（目前5以下的適配基本淘汰）

二、圖標(biāo)

以1024x1024px尺寸進(jìn)行圖標(biāo)創(chuàng)作即可。再通過現(xiàn)成尺寸模版資源，一鍵生成整套尺寸導(dǎo)出即可。（模版鏈接：https://developer.apple.com/design/resources/Template-AppIcons-iOS）

注意：最終提交給到程序員的切圖是直角，非圓角圖標(biāo)。

設(shè)備名稱	應(yīng)用圖標(biāo)	App Store                 圖標(biāo)	Spotlight                 圖標(biāo)	設(shè)置圖標(biāo)
iPhone11P, 11P Max, X, Xs, 8P , 7P , 6s P , 6P	180 x 180 px	1024 x 1024 px	120 x 120 px	87 x 87 px
iPhone11, XR, 8, 7, 6s, 6, SE，5s, 5c, 5,4s, 4	120 x 120 px	1024 x 1024 px	80 x 80 px	58 x 58 px
iPhone 1, 3G, 3GS	57 x 57 px	1024 x 1024 px	29 x 29 px	29 x 29 px
iPad Pro 12.9, 10.5	167 x 167 px	1024 x 1024 px	80 x 80 px	58 x 58 px
iPad Air 1 & 2, Mini 2 & 4,3 & 4	152 x 152 px	1024 x 1024 px	80 x 80 px	58 x 58 px
iPad 1, 2, Mini 1	76 x 76 px px	1024 x 1024 px	40 x 40 px	29 x 29 px

其他設(shè)備圖標(biāo)尺寸

三、狀態(tài)欄和導(dǎo)航欄（具體尺寸見五點(diǎn)二圖）

狀態(tài)欄：顯示時(shí)間、運(yùn)營商信息、電池電量等信息區(qū)域。(齊劉海區(qū)域)

導(dǎo)航欄：狀態(tài)欄下面的區(qū)域，含頁面標(biāo)題、功能圖標(biāo)等信息區(qū)域。

狀態(tài)欄跟導(dǎo)航欄一般會(huì)進(jìn)行一體化設(shè)計(jì)?，F(xiàn)在流行大標(biāo)題導(dǎo)航欄設(shè)計(jì)，也就是加大導(dǎo)航欄的高度，融入頁面內(nèi)容的標(biāo)題，當(dāng)內(nèi)容上滑時(shí)，大標(biāo)題再回歸到常規(guī)導(dǎo)航高度。（大標(biāo)題導(dǎo)航欄的高度一般為116pt（232px），這里包括了20pt（40px）狀態(tài)欄的高度，同時(shí)也能放得下34pt（68px）的大標(biāo)題和輔助信息（如返回等圖標(biāo)）。

導(dǎo)航欄中的元素必須遵守如下幾個(gè)對(duì)齊原則:

1、返回按鈕必須在左邊對(duì)齊。

2、當(dāng)前界面的標(biāo)題必須在導(dǎo)航欄正中。（可無）

3、其他控制按鈕必須在右邊對(duì)齊。

四、標(biāo)簽欄（具體尺寸見五點(diǎn)二圖）

標(biāo)簽欄：即Tab欄，為底部快速入口，iOS規(guī)范中Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式。分為“純圖標(biāo)標(biāo)簽”和“圖標(biāo)加文字標(biāo)簽”兩種形式。

五、iTunes 上傳頁面

在程序上傳App Store時(shí)我們需要提供多張App截圖，供用戶了解APP的功能。這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。也支持視頻形式。（微信目前采用的是五張靜態(tài)頁面形式）

微信iTunes上傳用截圖 

六、 字體

中文字體：PingFang SC，英文字體：SF UI Text 、SF UI Display，其中SF UI Text適用與小于19pt的文字，SF UI Display適用于大于20pt的文字。

鏈接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35

七、色彩

在iPhone上顯示的色域要比我們作圖時(shí)的RGB色域要廣。所以在iPhone上設(shè)計(jì)怎樣的顏色都可以，只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論范圍內(nèi)。官方建議的系統(tǒng)色彩如下：

iPhone的系統(tǒng)色

八、控件

控件包括：輸入框、按鈕、滑桿、頁卡、開關(guān)等，在設(shè)計(jì)模板中已經(jīng)全部列出。（下載地址：https://developer.apple.com/design/resources/）為了讓設(shè)計(jì)更符合整體產(chǎn)品品牌調(diào)性，這些控件可以做二次設(shè)計(jì)。

但得注意兩件事：第一，點(diǎn)擊區(qū)域基本符合44pt（88px）原則，也就是在手機(jī)上大小大概是7mm-9mm，適合手指點(diǎn)擊。第二，要設(shè)計(jì)操作的不同狀態(tài)，不要只設(shè)計(jì)一種狀態(tài)。

默認(rèn)控件

控件中無處不在的44pt（88px）

之前我們介紹過，人手指點(diǎn)擊區(qū)域?yàn)?mm - 9mm，在@2x中就是44pt（88px）。蘋果的導(dǎo)航條、列表、工具欄都充滿了44pt（88px）這個(gè)神秘?cái)?shù)字。我們?cè)谠O(shè)計(jì)時(shí)一定也要考慮到手指的點(diǎn)擊區(qū)域。

 無處不見的44pt（88px）

九、界面設(shè)計(jì)原則

1.邊距和間距（@2x）

在移動(dòng)端頁面的設(shè)計(jì)中，頁面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的，一個(gè)頁面是否美觀、簡潔、通透和邊距、間距的設(shè)計(jì)規(guī)范緊密相連。

（1）全局邊距（iOS13，@2x）

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁面整體視覺效果的統(tǒng)一。在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計(jì)語言，全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身。

iOS原生態(tài)頁面“設(shè)置”和“通用”頁面的邊距都是40px。（@2x） 

微信和支付寶的邊距都是32px。（@2x）

（2）卡片間距

在移動(dòng)端頁面設(shè)計(jì)中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定，通常最小不低于16px，過小的間距會(huì)造成用戶緊張情緒，使用最多的間距是20px、24px、30px、40px，當(dāng)然間距也不宜過大，過大的間距會(huì)使界面變得松散，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些。

以iOS（750*1334px）為例，設(shè)置頁面卡片間距為70px，而通知中心承載了大量的信息，因此采用了較小的16px作為卡片的間距。

總結(jié)：卡片間距的設(shè)置是靈活多變的，一定要根據(jù)產(chǎn)品的氣質(zhì)和實(shí)際需求去設(shè)置，平時(shí)也可以多截圖測(cè)量一下各類APP的卡片間距都是怎么設(shè)置的，看的多了并融會(huì)貫通，卡片間距設(shè)置自然會(huì)更加合理，更加得心應(yīng)手。

（3）內(nèi)容間距

一款A(yù)PP除了各種欄（狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄）和控件icon，就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來說一說內(nèi)容的間距設(shè)置問題。

格式塔鄰近性原則：

單個(gè)元素之間的相對(duì)距離會(huì)影響我們的感知，互相靠近的元素看起來屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃分組外。來看下圖，左圖中的圓在水平方向比垂直距離近，那么，我們看到了4排圓點(diǎn)，而右圖則看成4列。

在UI設(shè)計(jì)中內(nèi)容布局時(shí)，一定要重視鄰近性原則的運(yùn)用 

2.內(nèi)容布局

在APP的設(shè)計(jì)中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

（1）列表式布局

列表式布局方式非常普遍，隨便打開一個(gè)APP，基本都存在這種布局方式。特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。這也是一種非常容易理解的展示形式。

（2）卡片式布局

這種布局形式相對(duì)靈活。其特點(diǎn)在于每張卡片的內(nèi)容和形式相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁面中出現(xiàn)不同的卡片承載不同的內(nèi)容。卡片式布局相對(duì)時(shí)尚、前衛(wèi)，很多to C產(chǎn)品經(jīng)常用到。另外，雙欄卡片的布局形式，也常見于以圖片信息為主導(dǎo)的App，例如一些商城的商品陳列頁面。這種形式能在一屏里顯示更多的內(nèi)容（至少4張），同時(shí)，由于分開左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。

3.界面圖片設(shè)計(jì)比例

在UI設(shè)計(jì)中，對(duì)于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺設(shè)置一個(gè)看起來不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。

4.APP版式設(shè)計(jì)規(guī)范

版式設(shè)計(jì)又叫做版面編輯，即在有限的版面空間里，將版面的構(gòu)成要素（文字、圖片、控件）根據(jù)特定的內(nèi)容進(jìn)行組合排列。一個(gè)優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，在UI設(shè)計(jì)中版面設(shè)計(jì)的基礎(chǔ)原則有哪些呢？

（1）對(duì)齊

對(duì)齊是貫穿版式設(shè)計(jì)最基礎(chǔ)，最重要的原則之一，它能建立起一種整齊規(guī)矩的外觀，帶給用戶有序一致的瀏覽體驗(yàn)。

（2）對(duì)稱

對(duì)稱是對(duì)立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出一種和諧自然的美，在應(yīng)用界面的設(shè)計(jì)中，引導(dǎo)頁設(shè)計(jì)、注冊(cè)登錄輸入框和按鈕等無一不是對(duì)稱的設(shè)計(jì)。

（3）分組

物以類聚，人以群分。分組是將同類別的信息組合在一起，直觀的呈現(xiàn)在用戶面前，這樣的設(shè)計(jì)能夠減少用戶的認(rèn)知負(fù)擔(dān)，在移動(dòng)端界面的設(shè)計(jì)中最常見的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗(yàn)。

十、切圖命名規(guī)范

切圖最后需要命名成規(guī)范格式，方便程序員查找。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點(diǎn)簡單的詞匯量。借由上述工具切圖后，需要整理切圖命名，或在切圖之前對(duì)圖層命名亦可。以下是切圖元素的中英文對(duì)照：

 

切圖命名對(duì)照表

 

然后我們要按照”功能_類型_名稱_狀態(tài)@倍數(shù)”來命名每個(gè)切圖，比如我們導(dǎo)航條上有一個(gè)搜索圖標(biāo)，那么它的名稱就是： 

navi_icon_search_default@2x.png

(導(dǎo)航_圖標(biāo)_搜索_正常@2x.png)

Android設(shè)計(jì)規(guī)范

接下來，再一起來看看Android設(shè)計(jì)規(guī)范，這里只是把安卓規(guī)范中一些關(guān)鍵信息做了匯總，更詳細(xì)的不過多贅述，網(wǎng)上已經(jīng)有很多大佬產(chǎn)出過此類文章，大家可自行搜索。

一、安卓開發(fā)單位是DP、SP

DP：安卓專用長度單位。

以160 DPI屏幕為標(biāo)注，則1DP=1PX

計(jì)算公式：dp x dpi/160=px

例：以720x1280px （320dpi）為例， 1dp x 320 dpi/160=2px

SP：安卓專用字體單位。

以160 DPI屏幕為標(biāo)注，則1SP=1PX

計(jì)算公式：sp x dpi/160=px

例：以720x1280px （320dpi）為例， 1sp x 320 dpi/160=2px

二、安卓設(shè)計(jì)尺寸：以1080x1920px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸

1.從中間尺寸向上、下適配，界面調(diào)整幅度最小，最方便適配。

2.大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸，會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。

3.用主流尺寸來做設(shè)計(jì)稿尺寸，極大的提高了視覺還原和其他機(jī)型適配。

三、安卓圖標(biāo)尺寸

四、安卓字體

中文：思源黑體 / Noto Sans Han

英文：Roboto

大小：主題文字 36-34px    正文 28-26px     提示文字 24-22px

鏈接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35

五、切圖規(guī)范

1.切圖尺寸必須為雙數(shù)

2.單像素的圖會(huì)出現(xiàn)邊緣模糊的情況

一般情況下，我們只需要提供3套切圖資源就可以滿足安卓工程師的適配，分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。

如何用iOS的設(shè)計(jì)稿適配安卓

現(xiàn)在絕大多數(shù)公司限于人力物力的限制，不能把iOS和安卓的設(shè)計(jì)稿全部執(zhí)行出來，因此就存在一稿兩用的情況；設(shè)計(jì)師以iOS版本的設(shè)計(jì)稿來適配安卓，下面我們來看一組有趣的數(shù)學(xué)換算題：

1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是說，1242*2208（iOS@3倍尺寸）與1080*1920（安卓尺寸）是可以等比縮放的，所以，iOS與Android的尺寸是可共用1242*2208px。因此，以iOS設(shè)計(jì)尺寸進(jìn)行設(shè)計(jì)是可以適配Android的。（前提是必須和安卓工程師溝通清楚）

另一種方式，就是把750×1334px等比例調(diào)整尺寸到安卓1080×1920px，對(duì)各個(gè)控件進(jìn)行微調(diào)，重新提供標(biāo)注（用dp標(biāo)注）。也就是需要提供兩套標(biāo)注，一套給iOS，一套給Android。

iOS開發(fā)語言

作為iOS開發(fā)工程師，最重要的三個(gè)工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語言；而Swift開發(fā)非常。一般iOS工程師會(huì)在這兩個(gè)語言中選擇一種作為開發(fā)工具。UIKit是蘋果系統(tǒng)自帶的一套框架，這個(gè)框架里有設(shè)置按鈕、滑竿、狀態(tài)欄、電池電量、鍵盤等接口可供調(diào)用。所以我們看到很多第三方APP的界面中，有許多控件和蘋果自帶程序是一致的，這就是UIKit的功勞。

iOS開發(fā)里單位是pt

750×1334尺寸的換算關(guān)系 1pt=2px，也就是說程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是pt了。（這也是為什么建議設(shè)計(jì)師用@1倍圖做設(shè)計(jì)稿的原因）

轉(zhuǎn)自：站酷-蝸牛和筆

未來熒黑是一個(gè)基于思源黑體、Fira Sans和Raleway的開源字體項(xiàng)目，支持簡體中文、繁體中文與日文。

思源黑體的7種字重被擴(kuò)展為9種字重，并增加了5種字體寬度，全家族共包含44款字體。

與思源黑體有何不同？

相比于思源黑體，未來熒黑的造型更加簡明現(xiàn)代，版面效果清新輕快。未來熒黑的中宮與字面更加收斂，重心在字重之間經(jīng)過了重新配置；筆畫細(xì)節(jié)上處理得更加干練，簡潔而平直化。

開發(fā)者：Celestial Phineas

字體文件以SIL Open Font License 1.1發(fā)布，構(gòu)建字體開發(fā)的代碼以MIT License發(fā)布。

發(fā)布地址：github.com/welai/glow-sans

如何下載？

網(wǎng)盤地址：https://pan.baidu.com/s/1f2UuFO8ZxWa8v5XXYUEmig 提取碼 2e8w

備份下載鏈接：https://pan.baidu.com/s/1E1woRsZX91bCrq5FT1SAzg 提取碼: 92t2

文章來源：優(yōu)設(shè)    作者：GrayDesign

各行各業(yè)的設(shè)計(jì)師每天都在和顏色打交道，UI 設(shè)計(jì)師設(shè)計(jì)用戶界面也不例外。

用戶界面是一個(gè)設(shè)計(jì)師用理性思維解決用戶感性需求的窗口。如果對(duì)色彩的運(yùn)用不加以克制，界面可能會(huì)顯得花哨而沒有主次；但過于拘謹(jǐn)又容易使界面保守，難以激發(fā)用戶情緒。所以如何讓色彩的搭配平衡，是 UI 設(shè)計(jì)師需要修煉的一課。

但色彩畢竟是感性的元素，我們總是仰慕一些對(duì)色彩天賦異稟的設(shè)計(jì)師，總能不拘繩墨給作品帶來驚艷的視覺效果。我們難以偷習(xí)他們的天賦，但或許你有沒有想過，干脆我們另辟蹊徑，用理性推導(dǎo)來制定一套色彩系統(tǒng)？

那么今天我用我的項(xiàng)目示例，教給大家一個(gè)科學(xué)推導(dǎo)顏色搭配的方法。也許能夠帶你發(fā)現(xiàn)一些色彩背后的數(shù)學(xué)秘密。

區(qū)分顏色模式

在此之前我們需要先熟悉一下顏色模式。

在 PS 菜單欄的「圖像-模式」下可以看到非常多的顏色模式：RGB、CMYK、Lab 等等。那是因?yàn)?PS 是一個(gè)需要滿足設(shè)計(jì)行業(yè)水平領(lǐng)域的軟件，要解決各類設(shè)計(jì)師需求，所以涵蓋的顏色模式非常豐富。

但 UI 大多數(shù)時(shí)候需要關(guān)注的是線上場景，成果的展示渠道一般是自發(fā)光設(shè)備。所以弄明白垂直領(lǐng)域軟件 Sketch 中的幾種顏色模式，其實(shí)就足夠了，分別是 RGB、HSB 和 HSL。

RGB 是指通過 R（Red：紅）、G（Green：綠）、B（Blue：藍(lán)）三個(gè)顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色。三個(gè)通道分別有「0-255」這 256 個(gè)值，這些值分別代表著各通道的亮度層級(jí)。

雖然 RGB 在機(jī)器表現(xiàn)上很友好，但并不夠人性化。因?yàn)槿藗兣袛囝伾?，往往是通過「這是什么顏色？是不是太鮮艷了？亮了還是暗了？」這樣的感官維度，而很難通過紅綠藍(lán)的亮度層級(jí)去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。

HSB 是指通過 H（Hue：色相）、S（Saturation：飽和度）、B（Brightness：明度）來控制顏色。Hue（色相）的取值范圍是色環(huán)上 0-360° 的圓心角度；而 Saturation（飽和度）與 Brightness（明度）是在 0-100% 的量占比。

HSL 中的 H、S 與 HSB 相同，都是指 Hue（色相）、Saturation（飽和度）。但 L 所指的則是 Lightness（亮度）。

HSL 和 HSB 稍微有一些不同，我們?cè)趦蓚€(gè)顏色模式下輸入相同的數(shù)值，會(huì)發(fā)現(xiàn)顏色實(shí)際是不一樣的。雖然 H、S 指代的都是色相和飽和度，但 L（Lightness：亮度）與 B（Brightness：明度）分別被認(rèn)為是「顏色中白色的量」和「顏色中光線的量」。

Lightness 和 Brightness 的概念要深度研究下去的話其實(shí)是計(jì)算機(jī)算法領(lǐng)域的問題了，感興趣的朋友可以查閱更多資料，但我個(gè)人認(rèn)為對(duì)于 UI 來說沒有太大必要。

關(guān)于 HSB、HSL 的使用場景，記住以下兩點(diǎn)即可：

• 前端 CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對(duì)接時(shí)，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會(huì)與設(shè)計(jì)稿有出入。
• 我們接下來講到的配色推導(dǎo)，是基于 HSB 顏色模式的，因?yàn)樗菀桌斫猓瑪?shù)值變化在色系坐標(biāo)中的產(chǎn)生的結(jié)果更加直觀。

配色推導(dǎo)

支付寶 Alipay Design 團(tuán)隊(duì)提出過一個(gè)配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場景中，具有非常好的延展性。

那么知道了這個(gè)原則，我們又該如何科學(xué)、合理地得出產(chǎn)品的色彩系統(tǒng)呢？接下來我就用我的一個(gè)項(xiàng)目示例給大家做講解。

步驟一：找到符合產(chǎn)品調(diào)性的品牌色

我負(fù)責(zé)的該項(xiàng)目主要業(yè)務(wù)與高校支付、繳費(fèi)相關(guān)，所以希望整個(gè)產(chǎn)品視覺風(fēng)格首先要給用戶帶來安全感。又因?yàn)橹饕脩羧后w是高校師生居多，新潮、年輕化是主要用戶的一大標(biāo)簽，所以我們選擇了用飽和度較高的藍(lán)色來作為品牌色。

最終選擇品牌色的 Hex 值為 #1585FF ，HSB = （211,92,100）。

步驟二：提取24色

選定了品牌色之后，以品牌色的 H（色相）為基礎(chǔ)，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個(gè)顏色，也就是將 360° 色環(huán)分割為 24 份，可以得到 24 色。

為什么要提取 24 色，并且以 15 為公差呢？

我們知道，想得到鄰近色、類似色、互補(bǔ)色這一系列的顏色，我們就會(huì)使用到色環(huán)。

• 鄰近色：色相差值 15° 以內(nèi)的顏色為鄰近色;
• 類似色：色相差值 30° 以內(nèi)的顏色為類似色;
• 互補(bǔ)色：色相差值 180° 的顏色為互補(bǔ)色。

而 24 色色板是幫助我們提取輔助色的便捷工具。

步驟三：找到同色系配色

同色系是指與品牌色 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產(chǎn)生的色組。同色系色組的推導(dǎo)需要借助拾色板坐標(biāo)。

我們建立一個(gè)基于 S（飽和度）與 B（明度）的平面坐標(biāo)系，設(shè)定當(dāng)前品牌色為色值為（S?，B?），連接品牌色色值點(diǎn)與右上純白點(diǎn)（0，100）、右下純黑點(diǎn)（100，0），得到兩條線段。

我們各在兩條線段上均分取得 5 個(gè)點(diǎn)坐標(biāo)（包含首位兩點(diǎn)）。這樣兩條線段一共就會(huì)產(chǎn)生 11 個(gè)（S，B）坐標(biāo)值，對(duì)應(yīng)著 11 個(gè)同色系色組。

經(jīng)過上圖的計(jì)算，我們可以得到基于品牌色的同色系色階。

步驟四：多色搭配

用于搭配的輔助色應(yīng)滿足以下兩個(gè)條件：

• 和品牌色有明顯區(qū)分：盡量避免所選輔助色感官上給用戶視覺區(qū)別與品牌色差距不大，傳遞的調(diào)性太過一致；
• 不能過于突兀：根據(jù)色彩原理來說，互補(bǔ)色是最能與品牌色本色產(chǎn)生視覺感官對(duì)比的顏色，但可能會(huì)有些突兀。為了讓顏色的輔助起到豐富畫面的作用，而不是反而讓整個(gè)版面顯得不和諧，所以我們選擇互補(bǔ)色的鄰近色作為輔助色，而不要直接使用互補(bǔ)色。

于是根據(jù)以上條件，基于品牌色可衍生出 3 個(gè)輔助色：一個(gè)與品牌色傳遞調(diào)性有明顯區(qū)分的類似色；兩個(gè)互補(bǔ)色的鄰近色。

步驟五：感官明度校準(zhǔn)

經(jīng)過計(jì)算后，我們已經(jīng)得出了品牌色和三個(gè)輔助色。

可以看出，雖然我們提取出的輔助色明度色值都一致，但因?yàn)轭伾旧碜詭У母泄倜鞫葘傩杂兴鶇^(qū)別。為了讓輔助色和品牌色的感官明度盡量一致，我們要對(duì)第一次提取出的輔助色進(jìn)行感官明度校準(zhǔn)。

校準(zhǔn)方式是：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調(diào)整為 Hue（色相），就可以通過無彩色系下的明度色值，進(jìn)行對(duì)比。

這樣我們終于得到以品牌色為基準(zhǔn)的 3 個(gè)輔助色了。

步驟六：全色系輸出

將得到的輔助色依次進(jìn)行步驟三的計(jì)算，可以得到輔助色的同色系色階。

但因?yàn)槊鞫冗^低時(shí)，顏色已經(jīng)非常接近于黑色，色相在肉眼上幾乎已經(jīng)趨于一致。所以刪除最左邊的三種同色系顏色。最后得到基于品牌色推導(dǎo)出的全色系色階色板。

總結(jié)

完成了以上的工作，當(dāng)然還不算結(jié)束。一套標(biāo)準(zhǔn)的色彩系統(tǒng)還會(huì)包含中性色規(guī)范、顏色的使用規(guī)范等等。但相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個(gè)理性科學(xué)的方法，色彩的使用最終還是要融合設(shè)計(jì)師個(gè)人的共情能力。

比如許多產(chǎn)品有了一套自己的色彩方案后，設(shè)計(jì)師還會(huì)根據(jù)具體的業(yè)務(wù)場景去賦予 icon、卡片背景等元素不一樣的色彩方案。

希望這個(gè)方法能夠帶你發(fā)現(xiàn)一些色彩背后的數(shù)學(xué)秘密。

文章來源：優(yōu)設(shè)    作者：UCD耍家

知名的免費(fèi)圖標(biāo)網(wǎng)站 Iconfinder 要和大家一起對(duì)抗新冠病毒，和圖標(biāo)設(shè)計(jì)師聯(lián)手推出一系列「防疫免費(fèi)圖標(biāo)集」（Coronavirus awareness icons），超過 200 個(gè)與公共衛(wèi)生、病毒傳播相關(guān)圖標(biāo)，這些圖案包括常見的 PNG 和 SVG 格式，可以將它們加入標(biāo)志、海報(bào)、傳單或類似的內(nèi)容使用。

如果你想要制作廣告牌，提醒在這個(gè)區(qū)域要洗手或戴口罩，這里有免費(fèi)圖標(biāo)可讓信息更容易被閱讀。

依照 Iconfinder 網(wǎng)站說明，這些圖標(biāo)可用于洗手說明、衛(wèi)生建議或是其他預(yù)防病毒傳染散播的提醒信息，所有圖標(biāo)采用 Creative Commons BY-SA 3.0 授權(quán)釋出，使用時(shí)需要標(biāo)示出處，并以相同方式分享。

Coronavirus awareness icons

網(wǎng)站鏈接：https://www.iconfinder.com/p/coronavirus-awareness-icons

值得一試的三個(gè)理由：

• Iconfinder 和設(shè)計(jì)師合作推出「防疫免費(fèi)圖標(biāo)集」下載；
• 提供超過 200 個(gè)公共衛(wèi)生、病毒傳播相關(guān)圖案；
• 可使用于標(biāo)志、海報(bào)、傳單或類似的內(nèi)容。

前往 Iconfider 的「Coronavirus awareness icons」網(wǎng)站，就能看到這套專為對(duì)抗新冠病毒提供的免費(fèi)圖標(biāo)集，點(diǎn)選 Download all icons 下載打包好的完整圖標(biāo)。

在網(wǎng)站中展示一些收錄在這套圖標(biāo)集的防疫相關(guān)圖案，每套圖案都有不同風(fēng)格，例如以單純線條為主的設(shè)計(jì)，或是采用平面化設(shè)計(jì)的彩色圖標(biāo)，可以依照自己的需求選擇。當(dāng)然你也可以按下右上角的按鈕前往 Iconfinder 找到這套圖標(biāo)的完整版本。

下載后就能取得完整的圖標(biāo)集，依照不同名稱分類，有些是 SVG 格式，有些則包括 SVG 和不同大小的 PNG 文件，其中有個(gè) iconfider_freebies.zip 在解壓縮后還能取得一些和防疫相關(guān)的圖標(biāo)。

值得一試的三個(gè)理由：

• Iconfinder 和設(shè)計(jì)師合作推出「防疫免費(fèi)圖標(biāo)集」下載；
• 提供超過 200 個(gè)公共衛(wèi)生、病毒傳播相關(guān)圖案；

• 可使用于標(biāo)志、海報(bào)、傳單或類似的內(nèi)容。

文章來源：優(yōu)設(shè)    作者：Pseric

方正集團(tuán)倒閉？

最近方正集團(tuán)負(fù)債千億，被銀行申請(qǐng)破產(chǎn)重整的消息讓眾多設(shè)計(jì)師興奮不已，心里暗自在想，那方正字庫一萬多款字體是不是就可以免費(fèi)使用了？醒一醒，不太可能，身為設(shè)計(jì)工作者，尊重他人的設(shè)計(jì)和擁有版權(quán)意識(shí)是很重要的。

方正字庫屬于北京北大方正電子有限公司，而這個(gè)公司是方正集團(tuán)的子公司。就算方正集團(tuán)真的破產(chǎn)倒閉了，根據(jù)我國法律，方正字庫何去何從也跟這兩家公司的法人是否一致有關(guān)，如果一致，那么就可能被收購重組，如果不一致，那么就繼續(xù)獨(dú)立運(yùn)營。關(guān)鍵是，無論是什么結(jié)果，方正字庫里所有的字體都是有版權(quán)的，如果隨意商用，就會(huì)導(dǎo)致侵權(quán)，乃至把整個(gè)公司都賠進(jìn)去。

如何避免字體侵權(quán)

直接去網(wǎng)頁搜索，便有數(shù)不清的方正字體侵權(quán)案例。大到電影和游戲的宣發(fā)，小到淘寶店鋪的頁面，只要你使用了方正字庫的必須購買版權(quán)才可商用的字體，都有可能收到來自方正字庫的律師函。那么該如何避免字體侵權(quán)呢？其實(shí)最好的方法就是使用免費(fèi)可商用的字體，或者乖乖去買下字體的使用權(quán)。

一篇文章告訴你，該怎么判別字體是否侵權(quán)：

方正免費(fèi)字體

如果你實(shí)在要免費(fèi)用方正字庫的字體的話，那么就選擇「方正黑體簡體、方正書宋簡體、方正仿宋簡體、方正楷體簡體」這四種字體吧，已經(jīng)向方正字庫授權(quán)服務(wù)官方求證過，這四款字體可以直接免費(fèi)商用，不需要書面授權(quán)。

免費(fèi)可商用字體推薦

不過有那么多免費(fèi)、適用度廣、并且可以商用的字體，為什么要執(zhí)著于方正呢？優(yōu)設(shè)標(biāo)題黑和優(yōu)設(shè)好身體這兩款字體，無論是做 banner、海報(bào)還是文字設(shè)計(jì)都很合適，還沒擁有的設(shè)計(jì)師們快來下載。

優(yōu)設(shè)標(biāo)題黑：

優(yōu)設(shè)好身體：

還有優(yōu)設(shè)精心為大家挑選整理成的 2020 年免費(fèi)可商用中文字體最全合集，鏈接給你們，正好需要的話，就快去下載使用。

字體網(wǎng)站推薦

最后，介紹兩個(gè)可以查詢和下載免費(fèi)可商用字體的網(wǎng)站。

1. 字由網(wǎng) 

網(wǎng)站鏈接：https://www.hellofont.cn/home

第一個(gè)是字由網(wǎng)，雖然需要下載客戶端激活字體進(jìn)行使用，不過截至今日，字由擁有 511 款免費(fèi)可商用字體，對(duì)比一下亂用字體可能產(chǎn)生的侵權(quán)費(fèi)用和煩惱，還是下載客戶端性價(jià)比比較高。

網(wǎng)站及使用介紹：

2. 貓啃網(wǎng)

網(wǎng)站鏈接：http://novicehou.gz01.bdysite.com/

第二個(gè)是貓啃網(wǎng)，是免費(fèi)開源可商用的公益字體網(wǎng)站，截至今日，網(wǎng)站上共有 155 款字體，可供設(shè)計(jì)師們選擇和下載使用。

文章來源：優(yōu)設(shè)