因為文章實在太長，所以會分為上下兩篇發布，本篇為下篇，主要內容為：

    - 02. 字體字號

    - 03. 圖標大小

    - 04. 組件尺寸

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

而在對控件和文字都掌握熟練以后，才能進入后面的組件設計，這是我認為的一個比較合理的學習過程。

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

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

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

一、英文的字號

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

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

在 UI 中，最小字號的依據一般有兩個，一個是人眼的可見度，另一個是屏幕的顯示極限，綜合兩者最小的字號應該在 9pt 。而最大的字號，以 iOS11 的標題字號 34pt 為準即可。

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

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

    注：單位均為pt

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

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

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

二、中文字體

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

至于最大的中文，因為蘋方并沒有 SF pro 字體那么豐富的字重，字號過大會有正負形失衡的違和感，所以，最大字號的尺寸也應比英文小。

下面是我在中文應用中建議使用的字號：

    ? 標題：28、24、22、20
    ? 正文：18、16、14
    ? 注釋：12、11

    注：單位均為pt

前面做過的原型，應用的就是這些字號。

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

三、文字的邊距

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

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

因為前面我們已經說過控件的尺寸如何設置，所以當我們在設置文字時，很多時候是根據所定義的控件的高度，結合邊距來選擇文字的字號，下面通過一些控件來舉例。

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

?
而如果設置了一個 24pt 按鈕，那么得到的結論應該是 12pt。

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

?
字號的選擇，除了本身的定位（如標題或正文）以外，是可以通過比較的方式得出最優結果的。只要稍微花一點點時間，像上方案例演示的一樣將設計元素復制排列出來，就可以很快選出最適合的數值。

最后，前面說到的關于文字字號的設定，結合控件的尺寸規范，就能在下面決定組件的設計尺寸，缺一不可。

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

這一節要講講關于圖標的尺寸，應該是最容易的地方，因為前面的內容中，我們已經規范并習慣了使用 4 的倍數作為尺寸的最小量度，那么在圖標中只需要同樣遵循這樣的原則。從相關的圖標素材下載網站就可以發現這種規律，如 iconfont、iconsearch 等等。

一、圖標的權重

在設置具體的尺寸前，我們還是要談談權重的問題。正常的 APP，通常會包含大量的圖標，而這些圖標，大小并不會完全一樣。如下面的案例：

之所以這些圖標的大小不一樣，和它們代表的功能和權重分不開關系。我們可以簡單將應用內會出現的圖標分成 3 類，代表不同級別的權重。

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

?

中等：底部導航欄用的圖標

?
最低：一般的工具類圖標

當然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應用，就還可以劃分出更細致的權重類型。而不同的權重實際上就對應了不同尺寸的圖標，如果有 3 種權重，那么我們在設計的過程里就會設計三種尺寸的圖標。

二、圖標的尺寸

首先劃重點：圖標的尺寸，主要指的是圖標在應用中占據的矩形區域，而不是圖標本身圖形的區域。

我們在設計具體圖形前，是先通過確定矩形區域的尺寸，再制作參考線然后進行設計的。而不是隨意設計了圖標再對應縮放到指定的位置。

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

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

    ? 最大：64、56、48
    ? 中等：44、36、32
    ? 最?。?8、24、20

    注：單位均為pt

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

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

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

首先我們要知道組件是什么，它是一個包含了控件、文字、圖標的功能合集?？梢允且粋€獨立的信息展示單元，也可以完成一個復雜的操作流，是學習 App 設計中最重要的環節。

?
一、組件的尺寸原則

定義組件的長和寬，方式有兩種，一種是根據外部環境制定，一種是根據內容調節。

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

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

當然，也有混合的定義方式，如一開始定好寬，根據內容設定高，像花瓣瀑布流的卡片，或者定義好高來調節寬。具體使用什么形式，就要因地制宜了。

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

二、動態卡片

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

三、設置列表

設置列表中，由高度相同的列表項組成，它們的高和寬應該是根據設計的風格一開始就制定好，如比較緊湊的風格我們采用 48pt 的高，比較寬松的風格就采用 64pt 的高。然后我們再排列內部的元素，進行垂直居中。

四、班次信息

常見的班次信息，我們在定義它尺寸時，也是根據內容來考慮的。首先確認它是一個撐滿屏幕的組件即 375pt 寬，再填入對應的字段內容。

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

?
五、瓷片區

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

例如劃分為兩行的瓷片區，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據這個內容區域進行排版。

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

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

Part1

——————————

界面設計工具的發展歷程

隨著互聯網行業的日益繁榮，界面設計領域逐漸走向成熟，界面設計工具也一直在以驚人的速度發展。界面設計工具的發展歷經了三個階段：

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

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

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

Part2

——————————

界面設計工具的未來發展趨勢

界面設計工具的發展改變著設計師們的工作方式。界面設計工具也漸漸從單一專注設計本身向云端性、協作性、通用性發展，旨在實現更高效的設計生產活動。

云端性

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

協作性

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

通用性

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

Part3

——————————

界面設計工具推薦

1 UI工具篇

1.1 Figma

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

Figma與Sketch相比，亮點功能有哪些？

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

與sketch只支持蘋果生態系統相比，Figma最大的好處是windows用戶也可以使用。他支持在Mac、windowsPC機甚至ipad上使用，理論上只要你能打開瀏覽器，就可以使用Figma愉快地設計。

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

Figma創建的文件全部存儲在用戶的云端賬戶中，不占用本地內存。當文件過大時，sketch會出現卡頓現象，拖拽一個圖層都會變得很困難。而Figma對本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。設計師們最關心的無網或若網情況下Figma的使用問題，Figma也給出了相應的解決方案。其支持離線編輯，離線時會自動把內容保存在本地，當網絡恢復后自動同步到云端。

（3）一鍵導入sketch文件

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

（4）更強大的組件功能

Figma和Sketch都擁有組件功能。當原始組件更改時，復制組件就會同步變化，在這點上二者是相同的。但Figma在組件邏輯上比Sketch更進一步，復制組件可以靈活處理與原始組件的同步關系。當設計師修改復制組件的樣式時，原始組件不受影響。此時二者的關聯邏輯仍然存在，當再次修改原始組件，復制組件仍然會同步變化。相比于Sketch，Figma把組件做的更加靈活限制更少。

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

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

（5）與代碼緊密結合

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

（6）一鍵恢復歷史版本

Figma會將設計師的每一次修改存成對應的歷史版本，當老板說想要某一版時，設計師只要恢復至老板想要的版本就ok啦。如果其他設計師誤刪除或錯誤修改文件，也有機會一鍵搶救。

（7）團隊協作

團隊協作功能可謂是Figma最大的核心競爭力。當幾位設計師需要維護同一份設計文件時，Figma可以支持幾位設計師同時在線修改，只要將文件鏈接分享給對方并給到相應權限（查看、編輯權限）即可。如果使用sketch，設計師一般會發送源文件給對方修改來達到協作效果。來回傳輸源文件不僅容易造成文件同步出錯，而且有一定的下載時間成本和存儲成本，相比之下Figma的優勢顯而易見。

除了設計師之間的協作，Figma也有效提高了設計評審的效率。與在工作群截設計圖標紅再描述相比，Figma的評論功能使得同事可以在設計文件中實時標注討論方案，提高了線上評審效率。

小結

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

2 動效工具篇

2.1 Framer Web

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

Framer Web的核心亮點是什么？

（1）網頁端全平臺可用

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

（2）文件導入

Framer Web可通過import選項導入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動效。

（3）輕松實現復雜動效

Framer一直主打利用代碼實現復雜可控的交互動效,。雖然可以保證輸出高質量的動效，但對于設計師們來講十分不友好，學習成本過高。此次發布的Framer Web為了解決這一問題，增加了適合設計師使用的可視化界面控制動效，設計師可以通過Magic Motion輕松實現復雜動效。

Magic Motion與principle、keynote的動畫實現原理類似。當你選擇目標元素添加了交互行為后，可以在Magic Motion中選擇一個過渡方式。只要兩個畫板中的元素名稱一致且在不同面板中擁有不同的形態，那么在畫板切換時該元素就會生成補間動畫發生相應變化。

同時Framer也新增了一些特別的交互控制實現一些特殊動效。比如自帶控件中的video，本身會有一些獨特的交互行為如End、Pause、Play（播放、停止、暫停），當進行這些操作時，會觸發相應的頁面變化。

（4）從設計到代碼

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

（5）高效協作

Framer Web和Figma一樣，也非常注重團隊協作。設計師可以將鏈接分享對方進行查看、編輯，方便幾位設計師合作一個項目的情況。與需要反復傳輸文件相比，Framer Web省時省力，大大提高了設計師的工作效率。

小結

Framer Web放棄了攻占界面設計領域的策略，轉而和Figma官方達成積極的戰略合作，專注于做專業的動效設計軟件。因此Framer Web非常適合和Figma搭配使用。隨著產品策略的調整，相信在不久的將來Framer Web還會為設計師們提供更豐富、高效的動效設計功能，非常值得期待。

3 插件篇

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

3.1 Design Lint（Figma）

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

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

3.2 TinyImage Compressor（Figma）

設計師在做較大項目時導出的設計稿過大，存儲和傳播的成本高。用這款插件最多可以比Figma默認導出的文件小90%。同時支持導出多格式文件，導出多個圖片時還會自動生成一個zip壓縮包。

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

3.3 Design System Organizer（Figma）

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

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

3.4 Juuust Handoff（Figma）

Figma本身自帶交付功能，但該插件的好處是生成的是離線文件，導出的文件可直接交付開發。開發同學可以不受網絡影響隨時查看間距、色值等信息。

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

3.5 Image Optim （Sketch）

設計師在導出設計稿時有時圖片過大，Image Optim可以在導出圖片時壓縮圖片，但不會影響圖片的質量。使用時需先安裝app再安裝Sketch插件。

https://oursketch.com/plugin/imageoptim

3.6 FontFinder（Sketch）

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

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

3.7 Craft（Sketch）

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

https://www.invisionapp.com/craft

3.8 BaseAlign（Sketch）

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

https://oursketch.com/plugin/basealign

4 協作工具篇

4.1 XSHOW

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

網址：https://xshow.tencent.com

XSHOW是如何實現高效協作的？

對于設計師

（1）可視化上傳文件

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

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

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

（3）靈活豐富的分享權限

對于項目分享的權限，XSHOW的設置更為靈活，除了支持私密、公開、指定人或團隊可見外，也可以控制權限的時效。

對于項目管理者

（1） 直觀了解團隊輸出,組建團隊展示能力空間

XSHOW除了個人使用外還可以組建團隊。項目管理者可以通過XSHOW直觀查看整個團隊的設計稿件輸出修改情況，同時可以組件團隊展示能力空間。

（2）方案變更及時知道

XSHOW有記錄所有版本迭代的能力，因此作為項目管理者可以及時知道團隊成員對方案的修改變更，解決了團隊內部有時同步不及時的問題。

（3）便捷組建項目和管理團隊成員

項目管理者可以在XSHOW便捷組建項目和管理團隊成員，大大提高了項目管理者的管理效率。

對于合作產品經理或甲方

（1）多端查看更方便

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

2. 查看歷史變更

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

對于開發工程師

（1）便捷查看標注與管理切片

設計師將文件上傳到XSHOW后，只要將鏈接分享給開發，開發就可以直接在線查看文件標注、下載切片。

作者：騰訊ISUX       來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 

ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

發現一個非常好用插畫神器

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

能自動生成各種你需要的插畫形式，重點是這些插畫都是可以免費商用的，肯定能幫到你。

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

1.如何使用

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

1）下載插件并安裝

裝好后，從插件菜單點開Blush插件，會出現一個插畫庫界面。

2）生成插畫

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

2.選一個你喜歡的插畫風格，點下封面右上角的隨機圖標 

3.生成之后，你還可以針對它的組件各個部位再次隨機，當然你也可以根據自己的喜好直接選擇對應的部件 

3）導出插畫

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

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

1）城市元素 

2）裝飾背景 

3）人物場景 

3.這種插畫在實際項目中運用如何？

彩云隨便做了幾個，大家可以感受下，效果應該還可以 。

1) 引導頁 

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

2）網頁頭圖 

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

3）作品集包裝

4）登錄頁

使用了插件中的Cityscapes主題 

4.結語

這個插件的原理是把插畫進行組件化，利用sketch和figma的組件功能進行拆分再重組，構成大量的隨機插畫?？梢钥吹?，組件化已經成為一種思維方式，最初是用在UI中，現在已經擴展到了插畫領域，未來還有哪些可以組件化？我們可以一起思考。

作者：彩云Sky         來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 

ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司