距離上一次介紹 The Stocks 已經超過五年，前段時間無意間瀏覽到這個網站，才想起我以前好像也寫過文章，不過網站現在變得不太一樣而且內容又更完整了，非常推薦加入收藏，因為真的很方便。如果你還不知道 The Stocks，它整合各種設計相關免費資源，最早只有將一些免費圖庫整合在一起，讓找圖的使用者透過側邊欄選單快速切換各個不同圖庫網站，加速搜尋圖庫的效率。

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

對于平常會需要搜尋設計相關資源的使用者來說，The Stocks 是很好用的工具。

不過 The Stocks 現在會加入一些贊助商「推薦」內容，如果使用者進入這些服務，也有付費購買的話 The Stocks 開發者就能獲得回饋（其實就是 Affiliate），網站主要還是以收錄免費服務為主。

The Stocks 2

網站鏈接：http://thestocks.im/

使用教學

開啟 The Stocks 網站后會隨機顯示一個免費圖庫，The Stocks 主要功能列在左側，點選選單上的網站名稱會將網頁顯示于右側，方便在各個外部網站跳轉和搜尋，不過有些網站不允許被嵌入其他頁面，這時候就會以開新分頁方式替代。

左上角是 The Stocks 收錄的免費資源類型，包括免費圖庫、配色工具、免費圖標、免費影片、免費字體和 Mockups 素材網站，點選后下方的網站列表就會實時更新。

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

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

最近因為疫情關系，很多公司改為在家上班，如果要開會就會透過一些視頻會議軟件例如 Zoom ，The Stocks 也有提供 Zoom 適用的免費虛擬背景（特別是家里背景很雜亂的朋友可以稍微隱藏一下），這些素材可以在網站右上角 Zoom Virtual Backgrounds 找到。

值得一試的三個理由：

• 整合免費圖庫、配色工具、免費圖標、免費影片、免費字體等相關網站
• 點選網站鏈接即可在同一頁面快速切換瀏覽

• 對于要搜尋素材來說很方便很有用

文章來源：優設    作者：Pseric

有時候做國風的設計作品，如果選擇黑體和宋體可能太過端正，但選擇書法字體的話，可能因為飛白或過度連筆導致字體不容易識別，那選什么字體呢？我建議大家選擇楷體，注意不是選系統自帶的楷體，而是今天推薦的演示悠然小楷，字體手稿由一位美麗女生書寫，其字體有著悠然自得、閑情逸致的氣質。

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

字體案例演示

1. 青春/知識

△ By@偉崇

2. 文學/歷史

△ By@偉崇

3. 游戲/小說

△ By@小敏

4. 中式地產

△ By@偉崇

5. 商務風

△ By@偉崇

8. 主視覺設計

△ By@畫生

△ By@畫生

9. 海報物料

△ By@畫生

△ By@畫生

△ By@畫生

10. 電商廣告

△ By@畫生

△ By@畫生

△ By@畫生

11.文字排版

△ By@畫生

△ By@畫生

12. 品牌形象設計延展

△ By@畫生

△ By@畫生

△ By@畫生

字體搭配

1. 思源宋體

△ By@澄音

2. 方正宋刻本秀楷

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

△ By@畫生

3. Garamond

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

△ By@畫生

4. 阿里巴巴普惠體

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

△ By@畫生

字體下載

• 字體名稱：演示悠然小楷字體
• 系統名稱：slideyouran（有的軟件顯示不出中文字體，就用這個來搜索）
• 網頁 CSS 字體屬性：font-family:slideyouran
• 字體版權：永久免費，包括商用

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

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

雙20年終究還是來了，互聯網產品對于這個時代不是什么新鮮事了，互聯網人也從未停止對優秀產品的探索和創新。而做為一個設計人的我們，在前行的腳步中也應該溫故知新，就讓我跟大家一起來對iOS、Android的設計規范、適配問題做一次全面的梳理和復習吧。

iOS設計規范

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

以下為蘋果手機歷代產品明細（話說你擁有過那幾代產品，歡迎留言交流）

一代：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設計規范，這里我總結了一個方法“iOS五點兩圖記憶法”，也就是五個點+兩張圖。

1、設計尺寸：375x667pt @1x（750x1334px @2x）為基準設計。

2、設計工具：Sketch、Adobe XD、Photoshop

3、預覽效果：Sketch Mirror、Adobe XD或Ps Play

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

5、標注工具：藍湖，摹客

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

考考你：

1、iPhone8尺寸的設計稿如何快速變成iPhoneX的設計稿？

2、@2倍圖被當作@3倍進行開發，會導致什么樣的后果？

3、為什么要用375x667pt @1倍圖進行設計？（后文也有詳細答案哦）

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

這里我們首先重點理解下PX和PT這兩個單位， 弄清楚為什么建議使用一倍圖進行UI設計，才能在設計中以不變應萬變。（說明：該部分內容優化自靜電老師的總結。公眾號@靜Design）

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

請注意， 在不同尺寸的顯示器上，這些點的單位面積并不是一樣的。比如一臺22英寸的1080p液晶顯示器與一臺27英寸的1080p液晶顯示器，可以發現這兩臺顯示器的像素分布就是27英寸的顯示效果明顯遜于22英寸顯示器的效果，一個重要的原因就是兩臺液晶面板中的“像素”顆粒大小不一。

由此可見，像素這個單位是一個相對單位，不能用厘米、毫米等這些絕對度量單位來衡量他的長度或者寬度，因為1像素只代表一個單位的“點”。

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

同樣用簡單直觀的例子來演示，拿兩臺不同型號的iPhone，比如一臺ip11和一臺ip11pro Max，打開同樣一款應用（如QQ音樂），準備好一把尺子，使用尺子分別測量最上方title“音樂館”文字尺寸。經測量，可以發現不同型號的“音樂館”文字的尺寸都一樣。也可以請iOS開發人員分別寫兩個針對不同尺寸機型適配的同一個文件，并在兩部手機安裝，確保這個文件中的字體使用一個字號（30PT）。在兩個手機中運行并用尺子測量，我們發現他們的物理尺寸完全一樣。

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

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

sketch作為一款純矢量的移動端ui設計軟件，不管是設計還是后期與開發工程師的配合，都嚴格遵從開發原理，這種設計方法可以最大限度保證設計稿的復現，同時也可以減小文件體積和系統資源消耗，不管是從哪個方面看，都是設計師制作ui界面的明智之選。

最后總結一下原因，設計師使用一倍基準尺寸作圖，主要是單位轉換方便，輸出切圖方便，理解簡單。對于工程師，他們不用再進行復雜的換算，有助于完美復現設計稿。

我們繼續熟悉iOS中一些必不可少的頁面規范細則。

一、引導頁

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

二、圖標

以1024x1024px尺寸進行圖標創作即可。再通過現成尺寸模版資源，一鍵生成整套尺寸導出即可。（模版鏈接：https://developer.apple.com/design/resources/Template-AppIcons-iOS）

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

其他設備圖標尺寸

三、狀態欄和導航欄（具體尺寸見五點二圖）

狀態欄：顯示時間、運營商信息、電池電量等信息區域。(齊劉海區域)

導航欄：狀態欄下面的區域，含頁面標題、功能圖標等信息區域。

狀態欄跟導航欄一般會進行一體化設計?，F在流行大標題導航欄設計，也就是加大導航欄的高度，融入頁面內容的標題，當內容上滑時，大標題再回歸到常規導航高度。（大標題導航欄的高度一般為116pt（232px），這里包括了20pt（40px）狀態欄的高度，同時也能放得下34pt（68px）的大標題和輔助信息（如返回等圖標）。

導航欄中的元素必須遵守如下幾個對齊原則:

1、返回按鈕必須在左邊對齊。

2、當前界面的標題必須在導航欄正中。（可無）

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

四、標簽欄（具體尺寸見五點二圖）

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

五、iTunes 上傳頁面

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

微信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上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以，只要符合產品氣質并且在色彩心理學理論范圍內。官方建議的系統色彩如下：

iPhone的系統色

八、控件

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

但得注意兩件事：第一，點擊區域基本符合44pt（88px）原則，也就是在手機上大小大概是7mm-9mm，適合手指點擊。第二，要設計操作的不同狀態，不要只設計一種狀態。

默認控件

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

之前我們介紹過，人手指點擊區域為7mm - 9mm，在@2x中就是44pt（88px）。蘋果的導航條、列表、工具欄都充滿了44pt（88px）這個神秘數字。我們在設計時一定也要考慮到手指的點擊區域。

 無處不見的44pt（88px）

九、界面設計原則

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

在移動端頁面的設計中，頁面中元素的邊距和間距的設計規范是非常重要的，一個頁面是否美觀、簡潔、通透和邊距、間距的設計規范緊密相連。

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

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

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

（2）卡片間距

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

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

總結：卡片間距的設置是靈活多變的，一定要根據產品的氣質和實際需求去設置，平時也可以多截圖測量一下各類APP的卡片間距都是怎么設置的，看的多了并融會貫通，卡片間距設置自然會更加合理，更加得心應手。

（3）內容間距

一款APP除了各種欄（狀態欄、導航欄、標簽欄、工具欄）和控件icon，就是內容了，內容的布局形式多種多樣，這里不去探討內容具體應該如何去布局，我們來說一說內容的間距設置問題。

格式塔鄰近性原則：

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

在UI設計中內容布局時，一定要重視鄰近性原則的運用 

2.內容布局

在APP的設計中內容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

（1）列表式布局

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

（2）卡片式布局

這種布局形式相對靈活。其特點在于每張卡片的內容和形式相互獨立，互不干擾，所以可以在同一個頁面中出現不同的卡片承載不同的內容?？ㄆ讲季窒鄬r尚、前衛，很多to C產品經常用到。另外，雙欄卡片的布局形式，也常見于以圖片信息為主導的App，例如一些商城的商品陳列頁面。這種形式能在一屏里顯示更多的內容（至少4張），同時，由于分開左右兩欄的顯示，用戶可以更加方便地對比左右兩欄卡片的內容。

3.界面圖片設計比例

在UI設計中，對于圖片的尺寸和比例沒有嚴格的規范，設計師往往憑借經驗和感覺設置一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設置圖片的尺寸，可以獲得最優的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。

4.APP版式設計規范

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

（1）對齊

對齊是貫穿版式設計最基礎，最重要的原則之一，它能建立起一種整齊規矩的外觀，帶給用戶有序一致的瀏覽體驗。

（2）對稱

對稱是對立統一規律的本質屬性，呈現出一種和諧自然的美，在應用界面的設計中，引導頁設計、注冊登錄輸入框和按鈕等無一不是對稱的設計。

（3）分組

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

十、切圖命名規范

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

切圖命名對照表

然后我們要按照”功能_類型_名稱_狀態@倍數”來命名每個切圖，比如我們導航條上有一個搜索圖標，那么它的名稱就是： 

navi_icon_search_default@2x.png

(導航_圖標_搜索_正常@2x.png)

Android設計規范

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

一、安卓開發單位是DP、SP

DP：安卓專用長度單位。

以160 DPI屏幕為標注，則1DP=1PX

計算公式：dp x dpi/160=px

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

SP：安卓專用字體單位。

以160 DPI屏幕為標注，則1SP=1PX

計算公式：sp x dpi/160=px

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

二、安卓設計尺寸：以1080x1920px作為設計稿標準尺寸

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

2.大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。

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

三、安卓圖標尺寸

四、安卓字體

中文：思源黑體 / Noto Sans Han

英文：Roboto

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

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

五、切圖規范

1.切圖尺寸必須為雙數

2.單像素的圖會出現邊緣模糊的情況

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

如何用iOS的設計稿適配安卓

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

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設計尺寸進行設計是可以適配Android的。（前提是必須和安卓工程師溝通清楚）

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

iOS開發語言

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

iOS開發里單位是pt

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

轉自：站酷-蝸牛和筆

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

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

與思源黑體有何不同？

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

開發者：Celestial Phineas

字體文件以SIL Open Font License 1.1發布，構建字體開發的代碼以MIT License發布。

發布地址：github.com/welai/glow-sans

如何下載？

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

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

文章來源：優設    作者：GrayDesign

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

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

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

那么今天我用我的項目示例，教給大家一個科學推導顏色搭配的方法。也許能夠帶你發現一些色彩背后的數學秘密。

區分顏色模式

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

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

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

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

雖然 RGB 在機器表現上很友好，但并不夠人性化。因為人們判斷顏色，往往是通過「這是什么顏色？是不是太鮮艷了？亮了還是暗了？」這樣的感官維度，而很難通過紅綠藍的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。

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

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

HSL 和 HSB 稍微有一些不同，我們在兩個顏色模式下輸入相同的數值，會發現顏色實際是不一樣的。雖然 H、S 指代的都是色相和飽和度，但 L（Lightness：亮度）與 B（Brightness：明度）分別被認為是「顏色中白色的量」和「顏色中光線的量」。

Lightness 和 Brightness 的概念要深度研究下去的話其實是計算機算法領域的問題了，感興趣的朋友可以查閱更多資料，但我個人認為對于 UI 來說沒有太大必要。

關于 HSB、HSL 的使用場景，記住以下兩點即可：

• 前端 CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對接時，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會與設計稿有出入。
• 我們接下來講到的配色推導，是基于 HSB 顏色模式的，因為它更容易理解，數值變化在色系坐標中的產生的結果更加直觀。

配色推導

支付寶 Alipay Design 團隊提出過一個配色原則：

以同色系配色為主導，多色搭配為輔。

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

那么知道了這個原則，我們又該如何科學、合理地得出產品的色彩系統呢？接下來我就用我的一個項目示例給大家做講解。

步驟一：找到符合產品調性的品牌色

我負責的該項目主要業務與高校支付、繳費相關，所以希望整個產品視覺風格首先要給用戶帶來安全感。又因為主要用戶群體是高校師生居多，新潮、年輕化是主要用戶的一大標簽，所以我們選擇了用飽和度較高的藍色來作為品牌色。

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

步驟二：提取24色

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

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

我們知道，想得到鄰近色、類似色、互補色這一系列的顏色，我們就會使用到色環。

• 鄰近色：色相差值 15° 以內的顏色為鄰近色;
• 類似色：色相差值 30° 以內的顏色為類似色;
• 互補色：色相差值 180° 的顏色為互補色。

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

步驟三：找到同色系配色

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

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

我們各在兩條線段上均分取得 5 個點坐標（包含首位兩點）。這樣兩條線段一共就會產生 11 個（S，B）坐標值，對應著 11 個同色系色組。

經過上圖的計算，我們可以得到基于品牌色的同色系色階。

步驟四：多色搭配

用于搭配的輔助色應滿足以下兩個條件：

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

于是根據以上條件，基于品牌色可衍生出 3 個輔助色：一個與品牌色傳遞調性有明顯區分的類似色；兩個互補色的鄰近色。

步驟五：感官明度校準

經過計算后，我們已經得出了品牌色和三個輔助色。

可以看出，雖然我們提取出的輔助色明度色值都一致，但因為顏色本身自帶的感官明度屬性有所區別。為了讓輔助色和品牌色的感官明度盡量一致，我們要對第一次提取出的輔助色進行感官明度校準。

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

這樣我們終于得到以品牌色為基準的 3 個輔助色了。

步驟六：全色系輸出

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

但因為明度過低時，顏色已經非常接近于黑色，色相在肉眼上幾乎已經趨于一致。所以刪除最左邊的三種同色系顏色。最后得到基于品牌色推導出的全色系色階色板。

總結

完成了以上的工作，當然還不算結束。一套標準的色彩系統還會包含中性色規范、顏色的使用規范等等。但相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學的方法，色彩的使用最終還是要融合設計師個人的共情能力。

比如許多產品有了一套自己的色彩方案后，設計師還會根據具體的業務場景去賦予 icon、卡片背景等元素不一樣的色彩方案。

希望這個方法能夠帶你發現一些色彩背后的數學秘密。

文章來源：優設    作者：UCD耍家

知名的免費圖標網站 Iconfinder 要和大家一起對抗新冠病毒，和圖標設計師聯手推出一系列「防疫免費圖標集」（Coronavirus awareness icons），超過 200 個與公共衛生、病毒傳播相關圖標，這些圖案包括常見的 PNG 和 SVG 格式，可以將它們加入標志、海報、傳單或類似的內容使用。

如果你想要制作廣告牌，提醒在這個區域要洗手或戴口罩，這里有免費圖標可讓信息更容易被閱讀。

依照 Iconfinder 網站說明，這些圖標可用于洗手說明、衛生建議或是其他預防病毒傳染散播的提醒信息，所有圖標采用 Creative Commons BY-SA 3.0 授權釋出，使用時需要標示出處，并以相同方式分享。

Coronavirus awareness icons

網站鏈接：https://www.iconfinder.com/p/coronavirus-awareness-icons

值得一試的三個理由：

• Iconfinder 和設計師合作推出「防疫免費圖標集」下載；
• 提供超過 200 個公共衛生、病毒傳播相關圖案；
• 可使用于標志、海報、傳單或類似的內容。

前往 Iconfider 的「Coronavirus awareness icons」網站，就能看到這套專為對抗新冠病毒提供的免費圖標集，點選 Download all icons 下載打包好的完整圖標。

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

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

值得一試的三個理由：

• Iconfinder 和設計師合作推出「防疫免費圖標集」下載；
• 提供超過 200 個公共衛生、病毒傳播相關圖案；

• 可使用于標志、海報、傳單或類似的內容。

文章來源：優設    作者：Pseric

方正集團倒閉？

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

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

如何避免字體侵權

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

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

方正免費字體

如果你實在要免費用方正字庫的字體的話，那么就選擇「方正黑體簡體、方正書宋簡體、方正仿宋簡體、方正楷體簡體」這四種字體吧，已經向方正字庫授權服務官方求證過，這四款字體可以直接免費商用，不需要書面授權。

免費可商用字體推薦

不過有那么多免費、適用度廣、并且可以商用的字體，為什么要執著于方正呢？優設標題黑和優設好身體這兩款字體，無論是做 banner、海報還是文字設計都很合適，還沒擁有的設計師們快來下載。

優設標題黑：

優設好身體：

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

字體網站推薦

最后，介紹兩個可以查詢和下載免費可商用字體的網站。

1. 字由網 

網站鏈接：https://www.hellofont.cn/home

第一個是字由網，雖然需要下載客戶端激活字體進行使用，不過截至今日，字由擁有 511 款免費可商用字體，對比一下亂用字體可能產生的侵權費用和煩惱，還是下載客戶端性價比比較高。

網站及使用介紹：

2. 貓啃網

網站鏈接：http://novicehou.gz01.bdysite.com/

第二個是貓啃網，是免費開源可商用的公益字體網站，截至今日，網站上共有 155 款字體，可供設計師們選擇和下載使用。

文章來源：優設   

本文要介紹的「Palettable」是一個線上配色工具，Palettable 通過互動方式協助使用者找出最合適的色彩組合，開啟網站后會先隨機顯示顏色，使用者可點選喜歡、不喜歡（或是使用快捷鍵）重新顯示顏色或將顏色固定在頁面中，最后就能得出五個搭配好的顏色組合。

依照說明，Palettable 收錄數百萬設計師的知識結晶，這些顏色可以協助我們產生漂亮的調色盤，利用控制選項亦可個別調整每個顏色，最后匯出帶有色碼的PNG 圖片或固定網址。

Palettable

網站鏈接：https://www.palettable.io/

使用教學

開啟Palettable 后會隨機顯示一個顏色，可點選下方的喜歡或不喜歡（快捷鍵為L 和D），喜歡會將顏色固定并開始選擇下一個顏色，不喜歡就會繼續演算其他顏色。

每個顏色中間會有HEX 色碼，點選下方的設定選項會出現調色盤，可以更直覺選擇你要的顏色。

點選喜歡后前一個顏色會被固定，接著就繼續選下一個顏色。

在我十分鐘的使用經驗，重復幾次不同的配色組合，發現Palettable 會隨著使用者喜歡的顏色而選擇更為貼近、可互相搭配且不重復的色彩，這部份相較于其他只能隨機選色的服務來說應該更有優勢。

持續重復到第五個顏色，Palettable會跳出最多只有5個顏色的提示訊息，點選「Export」匯出結果。

Palettable 支援匯出為固定網址（會帶有你剛才選定的五個顏色組合）或是輸出為PNG 格式，如果你想把顏色組合保存下來，儲存為圖片會更易于整理和使用。

下圖就是我透過Palettable 建立的配色組合，每個顏色會有預覽，下方帶有HEX 色碼。

值得一試的三個理由：

• 透過互動方式協助使用者找出最合適的色彩組合
• 利用使用者選擇的顏色，計算出更貼近、可互相搭配的色彩
• 匯出為帶有色碼PNG 圖片格式，或是產生固定網址

文章來源：優設    作者：Pseric