矩形色塊為背景色，圓形色塊為畫面中圖片元素或文字使用的顏色。根據(jù)需要可以把其中的某些純色轉(zhuǎn)變?yōu)閱紊珴u變，或者也可以把某些單色漸變轉(zhuǎn)化為純色。另外，在不包含黑白灰的色彩組合里，仍可以根據(jù)需要自行加入黑白灰，比如用于填充文字的顏色。

1. 高端

視覺調(diào)性高端的色彩，通常具有明度低、飽和度低、顏色數(shù)量少等特點(diǎn)，所以很多高端的設(shè)計(jì)都會以深色作為背景色，因?yàn)樯钌@低調(diào)、更具神秘感，所以給人的感覺更高貴。然后以亞金色、銀色、桔紅色、白色等作為輔助色。

2.科技

想要表現(xiàn)科技感，色彩的整體調(diào)性通常會偏冷色系，明暗對比要強(qiáng)，且通常會使用漸變色。比如以深藍(lán)色到藍(lán)色的漸變作為背景色，然后用高飽和度、高亮度的青色和紫色作為輔助色，這時(shí)這些輔助色就會非常的跳躍，具有一種發(fā)光的效果。

3.時(shí)尚

其實(shí)所有調(diào)性的配色都應(yīng)該要盡量時(shí)尚一點(diǎn)，即使是想表現(xiàn)復(fù)古，也不能太土，所以這里所說的時(shí)尚特指偏向年輕、潮流的時(shí)尚。這種色彩通常具有飽和度高、明度適中、色相對比較大等特點(diǎn)。蔥爺這里概括了兩類，一類是以純色作為背景，這種色彩比較適合于品牌設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、畫冊設(shè)計(jì)等；一類是以漸變色作為背景，這種色彩比較適合于電商設(shè)計(jì)、廣告設(shè)計(jì)等。

4.酷炫

酷炫是指那種視覺效果特別張揚(yáng)、甚至是極具個(gè)性的色彩搭配，比如近幾年比較火的蒸汽波風(fēng)格、酸性風(fēng)格、賽博朋克風(fēng)格、故障風(fēng)格，其色彩就屬于酷炫類的。該類設(shè)計(jì)通常也是以深色作為背景，圖片元素會使用高飽和度且對比很強(qiáng)的漸變色，色彩相對較多。

5.好吃

即讓人感覺很有食欲的色彩搭配，這種色彩通常以暖色為主，比如紅色、橙色、黃色。飽和度較高、明度較低的組合方式通常用于餐飲行業(yè)；而飽和度較低、明度較高的色彩組合通常用于甜點(diǎn)、飲料等行業(yè)。

6.夏天

目前正值火熱的夏季，所以蔥爺專門整理了一些適合表現(xiàn)夏季的好看色彩，該類色彩通常會以藍(lán)色、青色、綠色這種冷色系最為主要顏色，然后以黃色或紅色、白色作為輔助色，這種色彩組合會給人清涼、快樂的感覺。

7.清新

小清新的視覺感受為輕松、柔和、淡雅，要達(dá)到這樣的效果，顏色的明度通常是比較高的，飽和度偏低，常用的顏色有淺青色、淺綠色、淺黃色、粉紅色等，在奶茶、女性護(hù)膚品的相關(guān)設(shè)計(jì)中比較常見。

8.快樂

快樂是張揚(yáng)的、是活潑的，所以快樂的色彩飽和度較高、明度不會太低、色彩的種類會比較多，通常也是以暖色為主，但是會搭配冷色一起使用。黃色具有很強(qiáng)的快樂、陽光屬性，所以想要表達(dá)快樂，黃色通常是少不了的。

9.可愛

跟兒童、年輕女性相關(guān)的設(shè)計(jì)，通常需要表現(xiàn)出可愛的調(diào)性，這類色彩通常是用冷色和暖色相互組合，顏色的明度同樣不會太低，否則會有壓抑的感覺，另外飽和度也不要過高，飽和度稍低一點(diǎn)效果會更柔和一些。

10.健康

想到健康我們立馬就會想藍(lán)天白云、青山、綠色的草地和樹葉，還有黃色的小野花等等，所以藍(lán)色、綠色、青色、黃色、白色都是常用于表現(xiàn)健康的色彩，紅色也可以偶爾作為點(diǎn)綴色加進(jìn)來。由于健康的調(diào)性也是要給人一種舒適、輕松的感覺，所以整體的顏色明度不要太低。

11.運(yùn)動(dòng)

要想讓色彩動(dòng)起來，對比一定要強(qiáng)，可以是色相對比、也可以是明度對比和飽和度對比。橙色和黃色是兩個(gè)很具活力的的顏色，所以常用于表現(xiàn)運(yùn)動(dòng)的設(shè)計(jì)里。

12.科幻

這是一些科幻電影、機(jī)動(dòng)游戲的海報(bào)設(shè)計(jì)常用的色彩搭配組合，給人的視覺感受是穩(wěn)重而大氣，科技感和神秘感并存，所以背景色通常也比較暗，喜歡用青色和黃色這種比較亮的顏色作為點(diǎn)綴。

13.喜慶

在設(shè)計(jì)節(jié)日海報(bào)或促銷海報(bào)時(shí)，通常需要表現(xiàn)出喜慶的調(diào)性，有些設(shè)計(jì)師會局限在大紅色、黃色、和橙色里，這樣搭配出來的色彩容易土，而想要解決這個(gè)問題，一方面可以加入冷色搭配使用，另一方面顏色的飽和度和亮度也不要過高。

14.復(fù)古

這類色彩的特點(diǎn)是顏色的飽和度會相對低一點(diǎn)，而且大多數(shù)情況下，整體的明度通常也不會太高，常用類比色搭配和對比色搭配。

15.中國風(fēng)

具有中國風(fēng)特色的顏色和色彩組合有很多，蔥爺這里僅列舉了8個(gè)組合。這類色彩同樣飽和度不會達(dá)到最高，有點(diǎn)復(fù)古和充滿文化氣息的感覺。胭脂（暗紅色）、緗色（中黃）、紺青（深藍(lán)色）、黛（褐色）等是中國風(fēng)常用的顏色。

16.夢幻

夢幻具有奇妙和神秘的感覺，好像在黑暗中找到了一點(diǎn)曙光，奇遇了驚喜一般，所以大多數(shù)情況下，背景色會使用從深色到亮色的漸變。顏色相對會比較豐富，而且以漸變色居多。

17.女性

女性是溫柔的，是感性的，所以該類色彩組合通常為類比色，偶爾會用一點(diǎn)對比色作為點(diǎn)綴，以增加畫面的活潑氣息，顏色的明度和飽和度都不能太低，當(dāng)然飽和度最好也不要過高，粉色、紫色是常用于表現(xiàn)女性的色彩。

18.優(yōu)雅

優(yōu)雅可以理解為低調(diào)、高級、溫和、安靜，所以這類色彩的對比通常不會太強(qiáng)，飽和度也會比較低，整體的色彩調(diào)性會偏中性，常用卡其色、麻色，還有單色組合及類比色組合。

19.經(jīng)典色彩組合

除了以上十八大調(diào)性，蔥爺還給大家推薦一些經(jīng)典的配色，很難把它們具體歸為哪一類，但是我們在做很多設(shè)計(jì)時(shí)，用上這種配色總能得到不錯(cuò)的效果，比如紅黃黑、紅白藍(lán)、黃綠黑、等等，在很多平面海報(bào)設(shè)計(jì)中經(jīng)常能看到。

作者：蔥爺      來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

因?yàn)槲恼聦?shí)在太長，所以會分為上下兩篇發(fā)布，本篇為下篇，主要內(nèi)容為：

    - 02. 字體字號

    - 03. 圖標(biāo)大小

    - 04. 組件尺寸

本小節(jié)要開始介紹前面沒有說的文字了，文字的尺寸至關(guān)重要，但首先理解了前面所講的控件之后，再去思考文字尺寸的用法，會相對更容易一些，它們之間也有一些有趣的聯(lián)系。

而在對控件和文字都掌握熟練以后，才能進(jìn)入后面的組件設(shè)計(jì)，這是我認(rèn)為的一個(gè)比較合理的學(xué)習(xí)過程。

首先我們知道，安卓和 iOS 應(yīng)用的中英文字體各不相同，蘋果是用蘋方和 San Francisco，安卓使用思源黑體和 Roboto。
?

如果不知道該去哪里下載這些字的同學(xué)，可以在我公眾號里回復(fù)“字體”下載對應(yīng)的字體源文件。

在后面我們主要以 iOS 作為說明的對象，安卓則同理，可以直接參照 iOS 的字體尺寸設(shè)置。

一、英文的字號

在蘋果的官方建議中，有羅列出比較完整的文字字號建議，但大家一定要謹(jǐn)記，那些就是建議，并不需要在非官方的組件中應(yīng)用那些字號。下圖是蘋果默認(rèn)字體尺寸，詳見我們翻譯的 iOS 規(guī)范第 124 頁 (公眾號中回復(fù)“iOS”可獲得下載鏈接)。

首先我們要先劃分出一個(gè)文字字號的取用范圍，之后所有字體的字號設(shè)置就在那里面挑選。

在 UI 中，最小字號的依據(jù)一般有兩個(gè)，一個(gè)是人眼的可見度，另一個(gè)是屏幕的顯示極限，綜合兩者最小的字號應(yīng)該在 9pt 。而最大的字號，以 iOS11 的標(biāo)題字號 34pt 為準(zhǔn)即可。

?
從 9-34，理論上其中每一個(gè)整數(shù)都可以使用，但我還是建議要應(yīng)用一定的習(xí)慣。下面，就是我在英文應(yīng)用設(shè)計(jì)中會使用的字體字號列表，為了便于記憶，我就只拆分成三種類型，初學(xué)者在使用時(shí)直接套用就可以。

    ? 標(biāo)題：34、28、24、22、20
    ? 閱讀：18、16、14、12
    ? 注釋：11、10、9

    注：單位均為pt

在英文應(yīng)用中，我們應(yīng)用的字號大小隨項(xiàng)目復(fù)雜度決定，通常，尺寸會在五種以上，兩種標(biāo)題、兩種正文、一種注釋類字號，當(dāng)然，我們還會通過字重和色彩進(jìn)一步劃分，不過那不在這里的討論范圍中。例如下面我使用五種字號尺寸設(shè)計(jì)出來的原型案例：

另外，在 iOS 中，字號小于 20pt 使用 SF Pro Text，大于等于 20pt 時(shí)則使用 SF Pro Display 字體，這點(diǎn)大家需要牢記。

?
數(shù)字字體則可以等同于英文，但如果有需要展示數(shù)據(jù)的需求，那么最大尺寸就要靠自己的判斷了。

二、中文字體

中文字體和英文字體的最大差異在于筆畫數(shù)，很多中文的筆畫和結(jié)構(gòu)都異常復(fù)雜，如 “嚷”、“饕”、“餐”等，所以，最小的尺寸不可能和英文相等。建議最小中文字號使用 11pt。

至于最大的中文，因?yàn)樘O方并沒有 SF pro 字體那么豐富的字重，字號過大會有正負(fù)形失衡的違和感，所以，最大字號的尺寸也應(yīng)比英文小。

下面是我在中文應(yīng)用中建議使用的字號：

    ? 標(biāo)題：28、24、22、20
    ? 正文：18、16、14
    ? 注釋：12、11

    注：單位均為pt

前面做過的原型，應(yīng)用的就是這些字號。

?
中文的字號選擇范圍是比英文小的，并且，中文字重?cái)?shù)遠(yuǎn)少于英文，我們在做中文應(yīng)用的排版遠(yuǎn)遠(yuǎn)比英文應(yīng)用的容易。很多新手誤以為英文更容易設(shè)計(jì)，那都是源自對英文的陌生，只是將字符純粹的當(dāng)成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本，而如果涉及到需要閱讀的英文文本設(shè)計(jì)時(shí)，字體、字號、字間距以及行高的選擇就會變得異常復(fù)雜。

三、文字的邊距

講完了字號的選擇范圍，這里我們就要再來討論下一個(gè)問題，就是如何更細(xì)化地去選擇字號。

首先，合理的字號是和環(huán)境息息相關(guān)的，而這種聯(lián)系最多的體現(xiàn)在文本區(qū)域的邊距上。能被合理閱讀的文本段落，是需要留白的，過于擁擠的文字排列只會造成閱讀的不適。

因?yàn)榍懊嫖覀円呀?jīng)說過控件的尺寸如何設(shè)置，所以當(dāng)我們在設(shè)置文字時(shí)，很多時(shí)候是根據(jù)所定義的控件的高度，結(jié)合邊距來選擇文字的字號，下面通過一些控件來舉例。

例如我們定義了一個(gè) 40pt 高的按鈕，在設(shè)置文字時(shí)，嘗試將多種文字字號置入，過多的間距和過小的間距都會讓按鈕看起來不精致。合適的字體大小應(yīng)該是 16pt。

?
而如果設(shè)置了一個(gè) 24pt 按鈕，那么得到的結(jié)論應(yīng)該是 12pt。

?
輸入框的文字應(yīng)用和按鈕相同，也以上下間距作為主要參考。

?
字號的選擇，除了本身的定位（如標(biāo)題或正文）以外，是可以通過比較的方式得出最優(yōu)結(jié)果的。只要稍微花一點(diǎn)點(diǎn)時(shí)間，像上方案例演示的一樣將設(shè)計(jì)元素復(fù)制排列出來，就可以很快選出最適合的數(shù)值。

最后，前面說到的關(guān)于文字字號的設(shè)定，結(jié)合控件的尺寸規(guī)范，就能在下面決定組件的設(shè)計(jì)尺寸，缺一不可。

多做針對性練習(xí)，以提升對控件和文字的掌握熟練度是很有必要的。建議多做一些簡單界面的臨摹，并套用前面提到的元素尺寸，這樣很快就能適應(yīng)這種高效規(guī)范的方式了。

這一節(jié)要講講關(guān)于圖標(biāo)的尺寸，應(yīng)該是最容易的地方，因?yàn)榍懊娴膬?nèi)容中，我們已經(jīng)規(guī)范并習(xí)慣了使用 4 的倍數(shù)作為尺寸的最小量度，那么在圖標(biāo)中只需要同樣遵循這樣的原則。從相關(guān)的圖標(biāo)素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律，如 iconfont、iconsearch 等等。

一、圖標(biāo)的權(quán)重

在設(shè)置具體的尺寸前，我們還是要談?wù)剻?quán)重的問題。正常的 APP，通常會包含大量的圖標(biāo)，而這些圖標(biāo)，大小并不會完全一樣。如下面的案例：

之所以這些圖標(biāo)的大小不一樣，和它們代表的功能和權(quán)重分不開關(guān)系。我們可以簡單將應(yīng)用內(nèi)會出現(xiàn)的圖標(biāo)分成 3 類，代表不同級別的權(quán)重。

最高：頁面中重要的功能入口

?

中等：底部導(dǎo)航欄用的圖標(biāo)

?
最低：一般的工具類圖標(biāo)

當(dāng)然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應(yīng)用，就還可以劃分出更細(xì)致的權(quán)重類型。而不同的權(quán)重實(shí)際上就對應(yīng)了不同尺寸的圖標(biāo)，如果有 3 種權(quán)重，那么我們在設(shè)計(jì)的過程里就會設(shè)計(jì)三種尺寸的圖標(biāo)。

二、圖標(biāo)的尺寸

首先劃重點(diǎn)：圖標(biāo)的尺寸，主要指的是圖標(biāo)在應(yīng)用中占據(jù)的矩形區(qū)域，而不是圖標(biāo)本身圖形的區(qū)域。

我們在設(shè)計(jì)具體圖形前，是先通過確定矩形區(qū)域的尺寸，再制作參考線然后進(jìn)行設(shè)計(jì)的。而不是隨意設(shè)計(jì)了圖標(biāo)再對應(yīng)縮放到指定的位置。

例如，設(shè)計(jì)快速入口時(shí)，一開始我們定義出的這個(gè)組件為分割成兩行四列的矩形塊，即每個(gè)入口的實(shí)際大小。

所以，下面就是我對矩形尺寸定義的建議：

    ? 最大：64、56、48
    ? 中等：44、36、32
    ? 最小：28、24、20

    注：單位均為pt

根據(jù)圖標(biāo)所處區(qū)域的上下間距，從上方挑選合理尺寸即可，過程與字號設(shè)置是一樣的，這里就不多做演示了。

還需要注意，在一套 App 中，圖標(biāo)出現(xiàn)的尺寸數(shù)盡可能減少，尤其對于新手，只需要應(yīng)用 2-4 套不同的尺寸即可，否則也會對視覺體驗(yàn)帶來明顯的破壞。

最后，就要說說組件的尺寸是怎么設(shè)置了。

首先我們要知道組件是什么，它是一個(gè)包含了控件、文字、圖標(biāo)的功能合集?？梢允且粋€(gè)獨(dú)立的信息展示單元，也可以完成一個(gè)復(fù)雜的操作流，是學(xué)習(xí) App 設(shè)計(jì)中最重要的環(huán)節(jié)。

?
一、組件的尺寸原則

定義組件的長和寬，方式有兩種，一種是根據(jù)外部環(huán)境制定，一種是根據(jù)內(nèi)容調(diào)節(jié)。

第一種，即通過外部的元素來確定組件的尺寸。例如我們要設(shè)計(jì)一個(gè)頭部的 banner 輪播圖組件，以左右可以滾動(dòng)的形式展現(xiàn)。那么首先要確定我們希望輪播圖在屏幕中占多少比例，再確定高度。例如我們覺得大致要有屏幕 1/3 高，那么可以設(shè)定高度為 220pt（664/3），而根據(jù)上下對齊的原則，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。

?
第二種，是根據(jù)我們里面添加的內(nèi)容元素來確定寬和高。例如在首頁輪播圖下方，添加左右滾動(dòng)的卡片，那么我們先設(shè)定里面的控件和文字尺寸，然后再通過添加內(nèi)邊距的形式確定組件的尺寸。

當(dāng)然，也有混合的定義方式，如一開始定好寬，根據(jù)內(nèi)容設(shè)定高，像花瓣瀑布流的卡片，或者定義好高來調(diào)節(jié)寬。具體使用什么形式，就要因地制宜了。

下面會通過幾個(gè)常見的組件案例，來演示如何定義它們的尺寸。

二、動(dòng)態(tài)卡片

動(dòng)態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)。每條動(dòng)態(tài)通常占據(jù)內(nèi)容區(qū)域的整列，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343 pt 的寬。而高度，就要根據(jù)里面所包含的元素了，如下圖所示。

三、設(shè)置列表

設(shè)置列表中，由高度相同的列表項(xiàng)組成，它們的高和寬應(yīng)該是根據(jù)設(shè)計(jì)的風(fēng)格一開始就制定好，如比較緊湊的風(fēng)格我們采用 48pt 的高，比較寬松的風(fēng)格就采用 64pt 的高。然后我們再排列內(nèi)部的元素，進(jìn)行垂直居中。

四、班次信息

常見的班次信息，我們在定義它尺寸時(shí)，也是根據(jù)內(nèi)容來考慮的。首先確認(rèn)它是一個(gè)撐滿屏幕的組件即 375pt 寬，再填入對應(yīng)的字段內(nèi)容。

這時(shí)候可以將上下的內(nèi)容拆分成3個(gè)不同的子模塊：班次、時(shí)間、更多操作，班次和更多操作采用固定高度 44pt 的方式，時(shí)間則根據(jù)內(nèi)容設(shè)置邊距的方式，最后得到的高度的和，就是班次信息組件的高度。

?
五、瓷片區(qū)

主流的瓷片區(qū)，其實(shí)也由若干子模塊組合而成，而如淘寶這類會有很多瓷片區(qū)并列的狀態(tài)，我們優(yōu)先要考慮的，是每個(gè)瓷片區(qū)在屏幕中的占比，也就是先定義好瓷片區(qū)的高度，再拆分內(nèi)容的子模塊。

例如劃分為兩行的瓷片區(qū)，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據(jù)這個(gè)內(nèi)容區(qū)域進(jìn)行排版。

完成一個(gè)完整的組件，是根據(jù)它的內(nèi)容和周圍的環(huán)境決定，我們只要感覺前面幾個(gè)部分所說的參數(shù)設(shè)置進(jìn)行分解，就可以很輕松的定義出組件的實(shí)際尺寸。而無論任何組件，它們都沒有固定的尺寸值，需要大家不斷的練習(xí)掌握制定的思路。之后再設(shè)計(jì)完整的頁面，或整套應(yīng)用時(shí)，就能大大提升效率和設(shè)計(jì)質(zhì)量。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系

作者：酸梅干超人。 來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

近年來界面設(shè)計(jì)工具不斷推陳出新，一些新興的實(shí)用界面設(shè)計(jì)工具漸漸走進(jìn)設(shè)計(jì)師們的視野，逐步改變著設(shè)計(jì)師的工作模式。作為互聯(lián)網(wǎng)設(shè)計(jì)師，效率至上的工作原則敦促我們不斷嘗試新工具，建立新的工作模式。本文將回顧界面設(shè)計(jì)工具的發(fā)展歷程，并著眼界面設(shè)計(jì)工具的發(fā)展趨勢，為大家推薦一些新興、高效的界面設(shè)計(jì)工具，涉及UI、動(dòng)效設(shè)計(jì)領(lǐng)域，希望對大家有所幫助。

Part1

——————————

界面設(shè)計(jì)工具的發(fā)展歷程

隨著互聯(lián)網(wǎng)行業(yè)的日益繁榮，界面設(shè)計(jì)領(lǐng)域逐漸走向成熟，界面設(shè)計(jì)工具也一直在以驚人的速度發(fā)展。界面設(shè)計(jì)工具的發(fā)展歷經(jīng)了三個(gè)階段：

1. 第一階段是最早期界面設(shè)計(jì)領(lǐng)域剛剛起步，設(shè)計(jì)師普遍使用PS來制作界面。但PS是一個(gè)全面的而非專門針對界面設(shè)計(jì)的工具，因此界面設(shè)計(jì)師在界面的繪制、文件的交付上都存在一定不便。

2. 第二階段是Sketch的出現(xiàn)。雖然Sketch是一款Mac端軟件，但其作為一款專門針對界面設(shè)計(jì)的工具，以其高效、小巧的優(yōu)勢迅速占領(lǐng)界面設(shè)計(jì)市場，逐步取代PS成為各大設(shè)計(jì)團(tuán)隊(duì)的首選。由于Sketch在動(dòng)效制作方面的欠缺，出現(xiàn)了Principle、Flinto、Protopie等專門設(shè)計(jì)界面動(dòng)效的工具，一般設(shè)計(jì)師都會將其搭配使用。

3. 當(dāng)前階段各種新興設(shè)計(jì)工具如XD、Figma、Framer Web逐漸走進(jìn)設(shè)計(jì)師們的視野，它們專注于界面設(shè)計(jì)領(lǐng)域，不斷挖掘和突破Sketch的短板，為設(shè)計(jì)師們打造更良好的使用體驗(yàn)。

Part2

——————————

界面設(shè)計(jì)工具的未來發(fā)展趨勢

界面設(shè)計(jì)工具的發(fā)展改變著設(shè)計(jì)師們的工作方式。界面設(shè)計(jì)工具也漸漸從單一專注設(shè)計(jì)本身向云端性、協(xié)作性、通用性發(fā)展，旨在實(shí)現(xiàn)更高效的設(shè)計(jì)生產(chǎn)活動(dòng)。

云端性

隨著云計(jì)算的發(fā)展，界面設(shè)計(jì)工具也在逐步走向云端化。設(shè)計(jì)從本地轉(zhuǎn)向云端，不再依賴于本地硬件的性能，云端的計(jì)算能力讓使用性能得以提高。設(shè)計(jì)也不再受時(shí)間和空間的限制，只要有網(wǎng)絡(luò)，設(shè)計(jì)師可以隨時(shí)隨地的工作，臨時(shí)使用其他電腦工作時(shí)省去了安裝軟件、同步設(shè)計(jì)文件的麻煩。 設(shè)計(jì)文件的共享從傳送本地文件給對方，變成發(fā)送鏈接給對方。前者耗費(fèi)本地內(nèi)存與下載時(shí)間，后者有網(wǎng)即可打開。設(shè)計(jì)工具的云端性使得設(shè)計(jì)的靈活度增強(qiáng)，設(shè)計(jì)效率大大提高。

協(xié)作性

注重不同工種之間的高效協(xié)作也是設(shè)計(jì)工具的一個(gè)發(fā)展趨勢。新興的設(shè)計(jì)工具（如Figma、Framer Web）試圖將產(chǎn)品、設(shè)計(jì)、開發(fā)、測試融為一個(gè)整體，讓不同工種之間可以高效討論、同步設(shè)計(jì)方案。實(shí)現(xiàn)整個(gè)團(tuán)隊(duì)效率的最大化。利用技術(shù)降低反復(fù)溝通的成本、減少同步不一致情況的發(fā)生，掃除各工種之間的協(xié)作障礙。

通用性

今年9月Figma舉辦的第二屆Config Europe大會，其主題是讓設(shè)計(jì)和代碼連接更緊密?？梢钥闯鲈O(shè)計(jì)工具越來越注重其通用性，設(shè)計(jì)工具不僅可以幫助設(shè)計(jì)師輸出設(shè)計(jì)稿本身，而且致力于打破設(shè)計(jì)與代碼之間的壁壘，降低交接成本。讓設(shè)計(jì)實(shí)現(xiàn)變得更加輕松高效。

Part3

——————————

界面設(shè)計(jì)工具推薦

1 UI工具篇

1.1 Figma

Figma是一款全平臺通用的在線界面設(shè)計(jì)軟件。2019年UXTOOLS設(shè)計(jì)工具使用報(bào)告中顯示，F(xiàn)igma的使用率從12%增長至26%，在今年的Config Europe大會上Figma也預(yù)告了一些即將推出的功能迭代，其便捷高效的特性使其受到眾多設(shè)計(jì)師的追捧，正在逐步搶占sketch的用戶市場。

Figma與Sketch相比，亮點(diǎn)功能有哪些？

（1）Windows用戶也可隨心使用

與sketch只支持蘋果生態(tài)系統(tǒng)相比，F(xiàn)igma最大的好處是windows用戶也可以使用。他支持在Mac、windowsPC機(jī)甚至ipad上使用，理論上只要你能打開瀏覽器，就可以使用Figma愉快地設(shè)計(jì)。

（2）云端文件使用不卡頓，支持離線編輯

Figma創(chuàng)建的文件全部存儲在用戶的云端賬戶中，不占用本地內(nèi)存。當(dāng)文件過大時(shí)，sketch會出現(xiàn)卡頓現(xiàn)象，拖拽一個(gè)圖層都會變得很困難。而Figma對本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。設(shè)計(jì)師們最關(guān)心的無網(wǎng)或若網(wǎng)情況下Figma的使用問題，F(xiàn)igma也給出了相應(yīng)的解決方案。其支持離線編輯，離線時(shí)會自動(dòng)把內(nèi)容保存在本地，當(dāng)網(wǎng)絡(luò)恢復(fù)后自動(dòng)同步到云端。

（3）一鍵導(dǎo)入sketch文件

Figma可導(dǎo)入Sketch文件，大大降低了文件遷移成本。如果你想遷移全部工作到Figma是十分便捷快速的。

（4）更強(qiáng)大的組件功能

Figma和Sketch都擁有組件功能。當(dāng)原始組件更改時(shí)，復(fù)制組件就會同步變化，在這點(diǎn)上二者是相同的。但Figma在組件邏輯上比Sketch更進(jìn)一步，復(fù)制組件可以靈活處理與原始組件的同步關(guān)系。當(dāng)設(shè)計(jì)師修改復(fù)制組件的樣式時(shí)，原始組件不受影響。此時(shí)二者的關(guān)聯(lián)邏輯仍然存在，當(dāng)再次修改原始組件，復(fù)制組件仍然會同步變化。相比于Sketch，F(xiàn)igma把組件做的更加靈活限制更少。

同時(shí)Figma也在不斷優(yōu)化其組件功能，在Config Europe大會上，F(xiàn)igma預(yù)告在今年11月會正式上線組件Variants功能。該功能是將一系列有關(guān)聯(lián)的內(nèi)容生成一個(gè)Variants組件，在使用時(shí)可以直接通過識別出來的組件屬性改變組件樣式。其優(yōu)勢在于使用組件時(shí)可以更輕松的切換所需組件的不同狀態(tài),再也不需要像在sketch中一樣逐級尋找了。

如下圖中的按鈕組件，設(shè)計(jì)師可以將所有的按鈕狀態(tài)都列舉出來并按層級、顏色、狀態(tài)、大小命名。然后選中所有按鈕將其組成一個(gè)Variants組件。

（5）與代碼緊密結(jié)合

在使用sketch輸出設(shè)計(jì)稿時(shí)，設(shè)計(jì)師往往需要借助藍(lán)湖或zeplin輸出標(biāo)注文件。Figma則與代碼緊密結(jié)合，本身自帶交付功能。 其文件中的每個(gè)模塊都有代碼模式，只需要將開發(fā)同學(xué)的賬號開通查看權(quán)限并發(fā)送鏈接，就可以直接在設(shè)計(jì)文件上獲取標(biāo)注，也可自行導(dǎo)出所需的CSS、ios、Android樣式。

（6）一鍵恢復(fù)歷史版本

Figma會將設(shè)計(jì)師的每一次修改存成對應(yīng)的歷史版本，當(dāng)老板說想要某一版時(shí)，設(shè)計(jì)師只要恢復(fù)至老板想要的版本就ok啦。如果其他設(shè)計(jì)師誤刪除或錯(cuò)誤修改文件，也有機(jī)會一鍵搶救。

（7）團(tuán)隊(duì)協(xié)作

團(tuán)隊(duì)協(xié)作功能可謂是Figma最大的核心競爭力。當(dāng)幾位設(shè)計(jì)師需要維護(hù)同一份設(shè)計(jì)文件時(shí)，F(xiàn)igma可以支持幾位設(shè)計(jì)師同時(shí)在線修改，只要將文件鏈接分享給對方并給到相應(yīng)權(quán)限（查看、編輯權(quán)限）即可。如果使用sketch，設(shè)計(jì)師一般會發(fā)送源文件給對方修改來達(dá)到協(xié)作效果。來回傳輸源文件不僅容易造成文件同步出錯(cuò)，而且有一定的下載時(shí)間成本和存儲成本，相比之下Figma的優(yōu)勢顯而易見。

除了設(shè)計(jì)師之間的協(xié)作，F(xiàn)igma也有效提高了設(shè)計(jì)評審的效率。與在工作群截設(shè)計(jì)圖標(biāo)紅再描述相比，F(xiàn)igma的評論功能使得同事可以在設(shè)計(jì)文件中實(shí)時(shí)標(biāo)注討論方案，提高了線上評審效率。

小結(jié)

設(shè)計(jì)師受文件本地存儲的限制，在工作中把源文件給同事、設(shè)計(jì)稿給產(chǎn)品、切圖給開發(fā)、一項(xiàng)簡單的輸出對接任務(wù)變得瑣碎起來。Figma的出現(xiàn)打破了設(shè)計(jì)師長久以來的孤島工作狀態(tài)，設(shè)計(jì)師只需分享一個(gè)鏈接，同事可以修改設(shè)計(jì)稿、產(chǎn)品可以評審、開發(fā)可以查看界面模塊的屬性甚至查看代碼，大大提升了設(shè)計(jì)師的工作效率。如果您的團(tuán)隊(duì)正在考慮更換設(shè)計(jì)工具,Figma是一個(gè)不錯(cuò)的選擇。

2 動(dòng)效工具篇

2.1 Framer Web

Framer Web是一款在線動(dòng)效設(shè)計(jì)軟件，于今年5月上線正式版，相比于Framer家族的前兩款產(chǎn)品Framer classic、Framer X, Framer Web突破了其以代碼為操作核心的理念，上線的新版本對設(shè)計(jì)師來說更加易用友好。

Framer Web的核心亮點(diǎn)是什么？

（1）網(wǎng)頁端全平臺可用

相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦，F(xiàn)ramer Web是一款基于瀏覽器的在線設(shè)計(jì)工具，因此windows用戶也可以安心使用。同時(shí)個(gè)人版本免費(fèi)，大大降低了設(shè)計(jì)師的使用成本。

（2）文件導(dǎo)入

Framer Web可通過import選項(xiàng)導(dǎo)入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動(dòng)效。

（3）輕松實(shí)現(xiàn)復(fù)雜動(dòng)效

Framer一直主打利用代碼實(shí)現(xiàn)復(fù)雜可控的交互動(dòng)效,。雖然可以保證輸出高質(zhì)量的動(dòng)效，但對于設(shè)計(jì)師們來講十分不友好，學(xué)習(xí)成本過高。此次發(fā)布的Framer Web為了解決這一問題，增加了適合設(shè)計(jì)師使用的可視化界面控制動(dòng)效，設(shè)計(jì)師可以通過Magic Motion輕松實(shí)現(xiàn)復(fù)雜動(dòng)效。

Magic Motion與principle、keynote的動(dòng)畫實(shí)現(xiàn)原理類似。當(dāng)你選擇目標(biāo)元素添加了交互行為后，可以在Magic Motion中選擇一個(gè)過渡方式。只要兩個(gè)畫板中的元素名稱一致且在不同面板中擁有不同的形態(tài)，那么在畫板切換時(shí)該元素就會生成補(bǔ)間動(dòng)畫發(fā)生相應(yīng)變化。

同時(shí)Framer也新增了一些特別的交互控制實(shí)現(xiàn)一些特殊動(dòng)效。比如自帶控件中的video，本身會有一些獨(dú)特的交互行為如End、Pause、Play（播放、停止、暫停），當(dāng)進(jìn)行這些操作時(shí)，會觸發(fā)相應(yīng)的頁面變化。

（4）從設(shè)計(jì)到代碼

代碼一直是Framer的核心功能。Framer Web默認(rèn)隱藏了代碼面板，設(shè)計(jì)師還是可以在設(shè)定了動(dòng)效后，通過點(diǎn)擊頂部的handoff調(diào)出相應(yīng)代碼。如果你是一個(gè)需要使用代碼的設(shè)計(jì)師，你仍然可以通過編輯代碼實(shí)現(xiàn)更復(fù)雜的動(dòng)效。對于設(shè)計(jì)師來說，F(xiàn)ramer提供的豐富動(dòng)效已經(jīng)可以滿足絕大部分訴求。絕大部分設(shè)計(jì)師已經(jīng)無需再關(guān)注代碼部分，通過可視化界面完全可以做出很豐富的交互效果。而Framer Web最終的野心是希望設(shè)計(jì)師通過可視化界面設(shè)計(jì)出參數(shù)化的動(dòng)效，可以直接導(dǎo)出相應(yīng)的能交付生產(chǎn)端的代碼。目前Framer Web 已經(jīng)可以實(shí)現(xiàn)導(dǎo)出相應(yīng)動(dòng)效代碼，但導(dǎo)出的效果仍有待完善，只是可以導(dǎo)出Transiton的參數(shù)而已。

（5）高效協(xié)作

Framer Web和Figma一樣，也非常注重團(tuán)隊(duì)協(xié)作。設(shè)計(jì)師可以將鏈接分享對方進(jìn)行查看、編輯，方便幾位設(shè)計(jì)師合作一個(gè)項(xiàng)目的情況。與需要反復(fù)傳輸文件相比，F(xiàn)ramer Web省時(shí)省力，大大提高了設(shè)計(jì)師的工作效率。

小結(jié)

Framer Web放棄了攻占界面設(shè)計(jì)領(lǐng)域的策略，轉(zhuǎn)而和Figma官方達(dá)成積極的戰(zhàn)略合作，專注于做專業(yè)的動(dòng)效設(shè)計(jì)軟件。因此Framer Web非常適合和Figma搭配使用。隨著產(chǎn)品策略的調(diào)整，相信在不久的將來Framer Web還會為設(shè)計(jì)師們提供更豐富、高效的動(dòng)效設(shè)計(jì)功能，非常值得期待。

3 插件篇

雖然云端化的設(shè)計(jì)工具正逐漸興起，但sketch仍然是目前較為主流的界面設(shè)計(jì)工具。因此接下來除了為大家介紹一些可以提升工作效率的Figma插件外，也會介紹一些好用的sketch插件，大家可以根據(jù)自己的需求自行嘗試體驗(yàn)。

3.1 Design Lint（Figma）

設(shè)計(jì)師在做較大項(xiàng)目時(shí)可能會繪制幾十個(gè)頁面，難免會存在界面丟失元素的情況。Design Lint就能幫助你解決這一問題。它可以在你工作的時(shí)候進(jìn)行實(shí)時(shí)更正，檢查不同界面直接的差異，包括顏色、字體、填充、半徑值等樣式差異并糾正錯(cuò)誤。如果你做了一些修改，Desgn Lint也會根據(jù)你的修改實(shí)時(shí)更新。這款插件可以讓你更專注于設(shè)計(jì)本身，而不用浪費(fèi)時(shí)間檢查不同頁面的元素是否使用正確，大大提高了設(shè)計(jì)師的工作效率。

https://www.figma.com/community/plugin/801195587640428208/Design-Lint

3.2 TinyImage Compressor（Figma）

設(shè)計(jì)師在做較大項(xiàng)目時(shí)導(dǎo)出的設(shè)計(jì)稿過大，存儲和傳播的成本高。用這款插件最多可以比Figma默認(rèn)導(dǎo)出的文件小90%。同時(shí)支持導(dǎo)出多格式文件，導(dǎo)出多個(gè)圖片時(shí)還會自動(dòng)生成一個(gè)zip壓縮包。

https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl

3.3 Design System Organizer（Figma）

這款插件幫助設(shè)計(jì)師在設(shè)計(jì)組件系統(tǒng)時(shí)管理組件系統(tǒng)。在設(shè)計(jì)組件系統(tǒng)時(shí)，會遇到如圖所示的：“Buttons-Small-Default...”的組織形式。該插件可以對組件進(jìn)行管理、如分組、取消分組、移動(dòng)、重命名。當(dāng)重命名組后，該組中所有組件的名稱都會隨之改變，十分方便。

https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

3.4 Juuust Handoff（Figma）

Figma本身自帶交付功能，但該插件的好處是生成的是離線文件，導(dǎo)出的文件可直接交付開發(fā)。開發(fā)同學(xué)可以不受網(wǎng)絡(luò)影響隨時(shí)查看間距、色值等信息。

https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff

3.5 Image Optim （Sketch）

設(shè)計(jì)師在導(dǎo)出設(shè)計(jì)稿時(shí)有時(shí)圖片過大，Image Optim可以在導(dǎo)出圖片時(shí)壓縮圖片，但不會影響圖片的質(zhì)量。使用時(shí)需先安裝app再安裝Sketch插件。

https://oursketch.com/plugin/imageoptim

3.6 FontFinder（Sketch）

設(shè)計(jì)師在做較大項(xiàng)目時(shí)可能會繪制幾十個(gè)頁面，難免會存在字體使用錯(cuò)誤的情況，F(xiàn)ont FInder就能幫助你解決這一問題。它可以檢測出文件中存在的所有字體，你可以勾選想要更改的字體就可以一鍵將其改成目標(biāo)字體。再也不需要在幾十個(gè)頁面中逐個(gè)尋找更改，大大提升了工作效率。

https://oursketch.com/plugin/font-finder

3.7 Craft（Sketch）

Craft插件十分強(qiáng)大，其中填充功能可以大大提升設(shè)計(jì)師的效率。在設(shè)計(jì)如列表頁時(shí)，設(shè)計(jì)師為了效果需要編輯不同的標(biāo)題、圖片，都要冥思苦想編內(nèi)容。Craft可以一鍵填充文字，如姓名、文章、日期、郵箱、地址、國家等。不同類別下面也設(shè)置了一些分類，方便設(shè)計(jì)師選擇。除此之外，Craft還可以一鍵填充真實(shí)不重復(fù)的照片,為設(shè)計(jì)師節(jié)省了很多時(shí)間。

https://www.invisionapp.com/craft

3.8 BaseAlign（Sketch）

Sketch自帶的對齊工具對形狀來說很好用，但對于文字來講一般是文字的文本框?qū)R，并不是文字本身對齊。BaseAlign插件使用的是文字自身的基線對齊，這樣就以保證不同大小的文字都可以對齊，設(shè)計(jì)效果更完美。

https://oursketch.com/plugin/basealign

4 協(xié)作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研發(fā)的高效設(shè)計(jì)協(xié)作平臺。XSHOW連接了產(chǎn)品經(jīng)理、開發(fā)等各個(gè)不同工種，提高了設(shè)計(jì)資源輸出和分發(fā)效率。設(shè)計(jì)師將設(shè)計(jì)文件上傳到XSHOW，就可以將文件鏈接分享給產(chǎn)品經(jīng)理、開發(fā)等同學(xué)。產(chǎn)品經(jīng)理在手機(jī)小程序上就可以預(yù)覽方案，設(shè)計(jì)師每次更新的方案也可以直接預(yù)覽。開發(fā)同學(xué)可以直接查看標(biāo)注和切片。同組設(shè)計(jì)師也可以直接下載源文件、甚至查看歷史迭代版本。

網(wǎng)址：https://xshow.tencent.com

XSHOW是如何實(shí)現(xiàn)高效協(xié)作的？

對于設(shè)計(jì)師

（1）可視化上傳文件

設(shè)計(jì)師先在Sketch中安裝XSHOW插件，可使用快捷鍵或直接點(diǎn)選需要上傳的文件畫板，接著直接選擇XSHOW中的“導(dǎo)出”，就可直觀快速的將文件上傳到XSHOW。

（2）記錄所有版本迭代，輕松找回第一稿

設(shè)計(jì)師每一次上傳的文件都會有云端記錄，設(shè)計(jì)師可以通過時(shí)間軸便捷找回歷史文件，輕松找回第一稿。

（3）靈活豐富的分享權(quán)限

對于項(xiàng)目分享的權(quán)限，XSHOW的設(shè)置更為靈活，除了支持私密、公開、指定人或團(tuán)隊(duì)可見外，也可以控制權(quán)限的時(shí)效。

對于項(xiàng)目管理者

（1） 直觀了解團(tuán)隊(duì)輸出,組建團(tuán)隊(duì)展示能力空間

XSHOW除了個(gè)人使用外還可以組建團(tuán)隊(duì)。項(xiàng)目管理者可以通過XSHOW直觀查看整個(gè)團(tuán)隊(duì)的設(shè)計(jì)稿件輸出修改情況，同時(shí)可以組件團(tuán)隊(duì)展示能力空間。

（2）方案變更及時(shí)知道

XSHOW有記錄所有版本迭代的能力，因此作為項(xiàng)目管理者可以及時(shí)知道團(tuán)隊(duì)成員對方案的修改變更，解決了團(tuán)隊(duì)內(nèi)部有時(shí)同步不及時(shí)的問題。

（3）便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員

項(xiàng)目管理者可以在XSHOW便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員，大大提高了項(xiàng)目管理者的管理效率。

對于合作產(chǎn)品經(jīng)理或甲方

（1）多端查看更方便

XSHOW支持web和小程序兩種沉浸式查看方案的方式。在小程序上查看方案方便合作方直觀感受方案在手機(jī)上的真實(shí)效果，如果合作方身邊沒有電腦也可以及時(shí)查看稿件。

2. 查看歷史變更

XSHOW的歷史變更功能可以使合作方也及時(shí)了解方案的變更情況，大大提升了信息同步效率。

對于開發(fā)工程師

（1）便捷查看標(biāo)注與管理切片

設(shè)計(jì)師將文件上傳到XSHOW后，只要將鏈接分享給開發(fā)，開發(fā)就可以直接在線查看文件標(biāo)注、下載切片。

作者：騰訊ISUX       來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

發(fā)現(xiàn)一個(gè)非常好用插畫神器

地址是https://blush.design/zh-CN/sketch 

能自動(dòng)生成各種你需要的插畫形式，重點(diǎn)是這些插畫都是可以免費(fèi)商用的，肯定能幫到你。

它有Figma和sketch2個(gè)不同的版本，下面彩云就以sketch為例來說說這個(gè)插件怎么用。（沒有Mac電腦不能使用sketch的同學(xué)，也可以用figma來生成插畫哦，所以在win下也是可以用的，使用方法跟sketch類似） 

1.如何使用

使用非常簡單，只需要簡單幾步就能搞定： 

1）下載插件并安裝

裝好后，從插件菜單點(diǎn)開Blush插件，會出現(xiàn)一個(gè)插畫庫界面。

2）生成插畫

1.創(chuàng)建一個(gè)矩形，先給定一個(gè)大小，目的是為了給生成的插畫一個(gè)位置和范圍（也可以后面再調(diào)整，不是太重要） 

2.選一個(gè)你喜歡的插畫風(fēng)格，點(diǎn)下封面右上角的隨機(jī)圖標(biāo) 

3.生成之后，你還可以針對它的組件各個(gè)部位再次隨機(jī)，當(dāng)然你也可以根據(jù)自己的喜好直接選擇對應(yīng)的部件 

3）導(dǎo)出插畫

免費(fèi)版把插畫的尺寸改到中型尺寸再生成。效果調(diào)整好之后，按正常的sketch選擇導(dǎo)出png圖片就行。想導(dǎo)出svg矢量格式的需要付費(fèi)，但我覺得2x的Png圖，已經(jīng)足夠用了。

2.插件包含了哪些類型的插畫資源呢？

1）城市元素 

2）裝飾背景 

3）人物場景 

3.這種插畫在實(shí)際項(xiàng)目中運(yùn)用如何？

彩云隨便做了幾個(gè)，大家可以感受下，效果應(yīng)該還可以 。

1) 引導(dǎo)頁 

使用了插件中的Tech Life主題插畫 

2）網(wǎng)頁頭圖 

使用了插件中的Tech Life主題插畫 

3）作品集包裝

4）登錄頁

使用了插件中的Cityscapes主題 

4.結(jié)語

這個(gè)插件的原理是把插畫進(jìn)行組件化，利用sketch和figma的組件功能進(jìn)行拆分再重組，構(gòu)成大量的隨機(jī)插畫。可以看到，組件化已經(jīng)成為一種思維方式，最初是用在UI中，現(xiàn)在已經(jīng)擴(kuò)展到了插畫領(lǐng)域，未來還有哪些可以組件化？我們可以一起思考。

作者：彩云Sky         來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司