編輯導讀：作為一個設計師，有時候在工作中會過度重視美感和創意，辨識度是有了，但是缺失了品牌感。沒有了品牌感，這個圖標就可以放在任意一個產品上使用，無法與品牌產生強聯系。那么，如何設計一個有品牌感的圖標呢？本文將從三個方面展開分析，希望對你有幫助。
我們在畫圖標的時候，往往會忽略掉一個重要的問題：缺失品牌感。也就是說，這個圖標和我們的實際品牌、業務并沒有什么聯系，它僅僅滿足了可辨識這個溫飽需求。
圖標缺失品牌感，就會導致同質化的問題，這些圖標放在任意一個產品上都可以通用。
對于產品，記憶點的缺失導致用戶看完后對于我們的業務、品牌不會產生任何深刻的印象。對于我們設計師，圖標和業務的斷層則很容易讓我們陷入反復改稿的被動局面，并且設計話語權也越來越小。
那么，有沒有什么系統、易于理解的方法來讓我們的圖標具備品牌感？
當然有。
接下來的這個圖標三步品牌化是我一直在用的辦法，而且屢試不爽，基本用了這個方法，需求方基本一稿過～
文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求，需要在首屏下的優勢板塊中繪制六個圖標，分別對應平臺的六大優勢。接下來，我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關的圖標。
品牌符號從廣義上來講也就是形狀。
比如天貓最近的雙十一購物節，便是用一個貓頭來作為這次大促的品牌符號，通過每年固定時間節點的品牌形象建立心智。
再比如之前大熱的騰訊綜藝《演員請就位》，它的品牌符號就是不同矩形色塊的疊加組合形態。
通過承載的不同信息可以擴展為不同的類型，比如下面的固態層、圖片層和文字層就分別承載了內容、圖片和文字。
Google在18年于material design中新增了一整塊章節來闡述圖形語言。
google原話是：形狀可以引導注意力，讓用戶易于識別組件，識別狀態和品牌語言傳達。
也就是說，形狀并非我們以往認知中的作用，品牌同樣可以借助形狀來加強效應。
最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業務icon，顯著加強了品牌記憶點。
再比如國內的螞蟻財富，便是通過提煉logo中的箭頭符號，將其延展到三個優勢圖標當中，一樣得傳達了螞蟻財富的品牌表達。
所以，基于業務目標以及行業特征，我們將倒三角這個符號作為我們這次項目的品牌符號。
至于為什么選擇這個形狀，主要考慮到了穩定性（三角形自身的穩定性、象征專線的穩定可靠）、保障性（倒三角常被用于保障承諾類的徽章標志）、隱喻物流（由飛機和定位的圖標變形而來）和三者的戰略合作（開鑼、中國制造網和京東）。
第二步相對而言就比較簡單了，不過考慮到顏色在各個場景及狀態到通用性，這里需要基于原本的品牌色額外不同明度的顏色。
這里我簡單擴展出淡色和深色，為了避免頁面過冷加入了暖色作為點綴色以提升溫度。
將圖標與業務緊密結合，能夠與其他競品拉開差異化，這是個相對簡單但是很容易出效果的品牌化的方法。
具體的操作辦法就是：首先根據所給文案腦爆出圖標所對應的關鍵詞，然后根據所在行業的特征篩選關鍵詞，或者進行二次聯想及轉化。
下面我通過此項目中的三個圖標案例來簡單講述下設計過程，僅為大家提供下思路：
運營所給文案如下：
這段文案意思就是，由于我們平臺和清關行合作，因此讓我們的業務更具有保障性，貨物可以按時送到客戶手中。
這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象，并且傳統得用了盾牌符號傳達保障性。
這種任何行業平臺都可通用的形象，并不能關聯我們這個物流類的平臺。
后面聯想到到我們跨境、外貿的行業特征，將“雨傘”這個形象變形轉化為降落傘，來代替盾牌符號。
一來，降落傘外形似傘，相當于是貨物的保護傘一樣體現”保障“的感受， 另外，這種”空運“式的表達也額外傳遞出按時遞交的概念，很好得體現出典型的”跨境物流“的行業特征。
運營所給文案如下：
同樣，一開始我著眼于”跟蹤“”實時“”軌跡“這些關鍵詞，腦暴出定位、雷達之類的事物。
但是結合我們行業特征的話，其實有空間去更貼切到業務本身。
我們平臺的業務線包含了兩個站點——美國（主站）和馬來西亞。供應商發貨后，貨物的軌跡必然是反映在世界地圖中，從起點至終點得分布。
因此我用了地球儀映射全球，以定位來映射包裹收貨地，以延展到定位icon中的虛線映射軌跡。這樣產出的圖標，不僅僅是指代了文案意思，同時表達出對應的行業特征，和業務緊密貼合。
文案如下：
一開始，我傳統得想到了一個時鐘圖標來代表。但是仔細想想，這個時鐘圖標僅能代表”時效“的特征，而不能傳達”快“的感受。如何更好得傳達“快”？
發散思維，我聯想到交通運輸工具，飛機、輪船、火箭等等，最終我選取了飛機這類跨境物流專線主要使用的運輸工具，它所帶來的快捷相比輪船更加深入人心，又不像火箭那樣脫離現實。
當然并非所有的圖標一定需要去結合行業特征，其余的三個圖標暫未想到更適合的元素，所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法，但是身為設計師，我們依然需要掌控我們的項目，充分發揮自己的創造力來賦予產品更多的power。
最后，我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力，增加用戶愉悅度，另一方面通過動態的表達引導用戶更好理解平臺優勢，比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫，來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態圖標是不是更好理解了？
更重要的是，動畫的加入也貼合了我們物流行業“運動”的特征~
篇幅原因，動畫的制作今天先略過，后面可能另抽時間單獨出個教程出來。當然，動力來自于你們的在看或轉發啊～～（手動斜眼）
我們每次接手一個需求時，都要想想，這個設計可以在哪些地方和我們的業務、品牌進行關聯？而不是每次都好像在做一個完全獨立于業務外的項目，這很容易讓你陷入反復改稿的被動局面，而且話語權也越來越小。
總之，品牌思維是需要設計師格外關注的！
最后，我們再來回顧一下這個圖標三步品牌化這個方法！
第一步，融入品牌符號；第二步，注入品牌顏色；第三步，結合行業特征。
但愿今日份的分享對你有所幫助！
文章來源：人人都是產品經理 作者：Andrewchen
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標是UI設計中除了文字之外最不可或缺的視覺元素，在設計中看似只占一個很小的區域，但是它卻是考驗設計師基本功的重要標準，了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
本文將對圖標進行系統的介紹，篇幅所限，本文只針對圖標設計中最重要的設計概念和設計思路為主。大家如果對圖標的其他方面感興趣，歡迎給留言，后續出相關系列內容。過程中也有針對幾種典型的圖標進行實操代練。想要把圖標設計的更好，這就需要我們在平時勤加練習外，還要進行深度的思考，希望我的這篇梳理可以給大家帶來幫助。
圖標，也稱為icon或Picoto，是計算機世界對現實世界的隱喻和概括，代表軟件產品中的功能及操作。
圖標做為國際通用性語言，生活中隨處可見，例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等，又或者是日常手機里使用的那些App圖標，如微信、電話、短信等。的確，圖標的形式有很多種，它可以應用在很多場景中，并且表現方式非常豐富，有線的、有面的、還有擬物的等。
粗淺劃分的話，UI設計中常見的圖標大致分為兩大類，第一類我們稱之為「標志性圖標」，比如手機中應用啟動圖標；第二類我們稱之為「功能性圖標」，這類圖標經常出現于 App 或網站中，用于功能性指示引導或操作。
2. 圖標的重要性
對于UI設計而言，圖標可以說是整個產品的點睛之筆，它甚至可以直接影響著一款產品的形象和氣質。在不少 UI 界面中，圖標幾乎是這個頁面的核心支撐體，它直接影響著產品的視覺體驗和產品調性。它有以下幾點好處：
3. 起源
圖標的發展歷程其實有些類似中文、英文等語言的發展，大體也分為兩個階段：
實物 → 符號；符號 → 新符號
來看一個小例子：
左邊這個東西叫軟盤，可能很多小伙伴沒見過（事實上我也沒有），「保存」圖標就是將「軟盤」符號化之后形成的圖形，「軟盤」是「保存」圖標的實體。但隨著時間的推移，人們逐漸將長期接觸的符號本身作為一種新的實體，在大家的眼里，它不再是一個具象事物的抽象符號，而是直接當成一個實體來使用，甚至這個符號的實體已經淡出歷史，但人們還在習慣性使用這個符號。
如你所知，圖標、標識都不是界面設計師所創造的概念，它的存在可以追溯到人類文明誕生之初，在漫長的歷史長河當中，早期用來傳達信息的圖標演變為系統的文字，而在地圖、圖書、壁畫和建筑等各種各樣的地方，還存在著用來代表和傳達特定概念的圖標和標識。
隨著技術的發展，計算機誕生了，而顯示器的出現，也為圖形化界面的誕生，鋪平了道路。20世紀70年代，施樂在位于帕羅奧托的研究所當中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野，但是它的后續機型施樂之星在1981年問世，并且成為了計算機史上的重要里程碑，而 Xerox Alto 對于喬布斯和比爾蓋茨的啟發，更是引發了計算機歷史上最著名的一場戰爭：蘋果VS微軟，Windows 對抗 Macintosh。當然這都是后話。
4. 擬物圖標
80年代，想做的具象（擬物），卻因為像素和機能的限制無法實現，所以對好的標準是越具象越好 。到了1995年計算機顯卡的顯示能力得到革命性的改變，Photoshop 5.0的發布，恰好讓憋屈了這么多年的圖形和UI設計師們巴不得立馬上天（終于可以施展拳腳了）。從win95開始，到osx/win7的這十來年正是UI擬物化發展壯大并大行其道的階段。同時也是顯示技術飛速發展的十年，從640×480，到800×600，到1024×768，到1920×1080 / 1920×1200，再到4k，再到retina屏，平面顯示技術能達到的水準基本已經是人眼能感受到的。
當人們對計算機尚不熟悉的時候，用戶的需求是“弄懂這玩意到底是干嘛的”，是用戶體驗的核心。擬物化的圖標和界面會給予用戶具象化的引導，比如回收站，音樂，電腦，文件夾的圖標，用戶可以直接聯想到現實中的物品并更快的理解這些程序或者文件的作用。包括立體的按鈕引導用戶點擊，用戶都可以通過聯想，更快的理解操作/互動的方式。這樣可以降低用戶的學習成本，縮短學習周期，讓用戶更快的適應計算機的使用，弄懂這玩意到底是干嘛的。
來自蘋果的Macintosh系統在圖形化界面發展史上是無法繞過的里程碑。1991年，蘋果借由Macintosh，首次發布了彩色的圖標設計。圖標所能容納的信息量比起上一個黑白界面的時代更大，全新的樣式使得它在信息傳達的功能性上有了明顯的提升。
但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾。如今人們對各種常規交互模式人們也早已了然于胸，用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗的重心。
再者，大家都熟悉的事物其實非常有限，而 APP 的創新卻在不斷進行，很多創新的產品本身在現實世界就沒有參照物，所以也決定了擬物圖標必然會被扁平化取代。
5. 扁平化
從iMac到iPhone引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標的質感、光影會分散用戶的注意力，形成「視覺噪聲」。于是UI設計師開始探索更新的表現形式來設計界面中的圖標。如微軟引領的Metro風格圖標設計和Google引領的長投影風格的圖標設計。 不管你喜歡與否，當年的微軟讓 Metro 和扁平化賺足了眼球，甚至讓人一看到扁平化就想到Metro。
區別于擬物化更加接近于真實的實物，扁平化則是簡化真實的物體，轉而通過抽象、簡化、符號化的設計元素來表現。
2013年，蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。在iOS7中對整個界面的圖標、按鈕、字體、信息層級等各方面都進行扁平化設計。蘋果的這一系列動作打破了人們對扁平化風格的芥蒂，并最終推動了整個移動端扁平化設計的進程。
那么，蘋果公司在堅持了多年的擬物化設計風格之后，曾經作為該風格的引領者和受益者，為何會突然轉向，熱情地擁抱起扁平化設計來了呢？難道是因為我們視覺疲勞了嗎？答案很簡單，
總之，扁平化這種二維設計已經成為一種更加流行的設計風格。所有元素的邊界都很干凈利落，較多使用色塊和符號化的圖形以及無襯線修飾的字體，界面更加整齊簡潔。使用這種設計風格的優點是可以更加簡單直接的將信息和事物的工作方式展示出來，將一切干擾信息弱化，減少認知障礙的產生。
雖然扁平化的優點有很多，也適合當下技術發展需要的，但是缺點也是顯而易見的。譬如表現形式太過于抽象、缺乏情感的傳遞，而事實上發展到今天的扁平化設計確實也在不斷的優化自己~使得自己更加的適應時代的發展。另外還有一個點就是所謂的 “審美疲勞”。當你一直看著簡單的東西，久而久之就會越來越煩，你就會越來越想要看那些豐富多彩的東西。反之亦然。這也表明 UI 新的趨勢再一部向“突出內容”的本質靠攏，即“認知簡約”。也許當滿世界都是扁平化后，擬物化的設計卻又變得更顯眼了呢？最近流行的“新擬物”風格就是最好的證明。
6. 微扁平、輕擬物
由于扁平風格表現形式單一，同質化嚴重，缺乏個性，圖標慢慢開始發展到微扁平輕擬物的方向。相較于擬物風格不會有太多復雜的視覺元素，與扁平風格又有了更豐富的情感內容，所以現在界面中，在面積比較小的區域我們使用扁平圖標或線形圖標；在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。
7.「新擬物」風格圖標
蘋果在 WWDC2020 搞了個大新聞：macOS 將與 iOS 統一步調，從X86 平臺遷移至ARM 平臺，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。
macOS Big Sur是第一個將「新擬物」設計投入大規模商用的操作系統，這可視為「新擬物」在實用化道路上的首次勝利。值得一提的是，在 Big Sur 的 ” 外觀 ” 設置里，多了一項名為” 自適應強調色 “的選項。蘋果將主題色的指定權留給開發者，這是否暗示新一代 App 在光影上會有更豐富的效果？
「新擬物」設計的精髓在于對光線的絕妙運用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間，進而打造一種全新的視覺體驗。
不同于傳統的擬物，「新擬物」雖然將符合物理規律的光影效果引入界面，但它所模擬的材質是自然界不存在的。換句話說，「新擬物」是將真實光線用于虛擬對象，而 ” 擬物 ” 是還原實際物品在特定光照下的效果；
由于整個設計界將不得不考慮新擬物風格，圍繞該風格的可能性將會有爆炸性的發展，并且這種新的數字空間設計理念如何能夠合理地適用于用戶界面設計和功能性將取得更大的突破。與以往一樣，第三方應用將比蘋果更大膽、更快速地推動這一風格——這也是我們將會真正開始解鎖新擬物優勢的時候。
產品應用圖標（也叫啟動圖標），是指產品「品牌標識」中獨立的圖形，也是產品品牌的核心組成元素。作為產品所有視覺通信中必不可少的元素，其使用率非常高，所以該獨立圖形在設計中應做到最簡化。
一個小問題：為什么iOS系統中圖標形狀是統一的圓角矩形？
蘋果官方給出的解釋是在空間有限的的區域，太多形狀顯得雜亂，如果形狀不規則，就無法控制統一間距，設計師水平也不一樣，這樣統一規范能保證標準。推薦一個iOS啟動圖標資源網站，設計時可以找找靈感。
△ iOSIcon gallery
而安卓應用圖標就沒那么規范，處于百花齊放的狀態，各家廠商都在設計獨屬于自己的視覺語言。大家都不一樣，也就導致沒有個性之美。
安卓應用圖標設計規范網站
應用圖標的類型
應用圖標有不同的風格，這些風格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過不同的設計風格可以更加標新立異，從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要，將產品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。
中文是我們的母語，每一個漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國內的產品都會使用文字作為自己的產品圖標。中文設計模式即字體設計，提取應用名稱中的一個或多個漢字，進行設計變形，變形后的字體圖形具有產品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。
單字
提取產品名稱中最具代表性的文字，通過對筆畫及整體骨架進行字體設計，以達到符合產品特性和視覺差異化的目的。其優點是可以直截了當的傳遞產品信息，識別性強。
多字
多字圖標設計要注意的是整體的協調性和可讀性，一般為2-3個字，最多兩行（四個字）排列。
其優點是更加直接的告訴用戶產品名稱，達到品牌推廣的目的，減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣，會顯得重復啰嗦，像介紹了兩遍自己一樣。
字加圖形組合
文字加輔助圖形的組合，也是常見的產品圖標設計方法，相比純文字圖標，顯得更加豐富有獨特的產品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。
英文設計與中文設計的設計模式相似，通常是提取應用名稱的首字母融合產品的功能賣點或行業屬性進行創意加工，新的字母圖形依舊保持本身的識別性。
單字母
通常提取英文首字母進行設計，由于英文字母本身結構簡潔，稍加改動就很容易達到設計感于識別性兼備的產品圖標。需要注意的是英文字母本來就少，都用字母很容易創意雷同，難以形成差異化。
多字母
提取產品全稱或幾個單詞的首字母組合而成，形成獨有的產品簡稱，方便用戶記憶。
字母加圖形組合
字母加圖形組合的設計形式比較廣泛，圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創意加工，可以使應用圖標視覺表現更加飽滿。
直接用數字做應用圖標的相對較少，但是數字識別性強，易于傳播的特點。利用數字進行設計能給人親和力。難點是怎樣與品牌形成強關聯性。
由于符號本身的含義會對產品屬性有一定限制，所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯性的產品，無法運用在與此屬性無關的產品上。不過也正是由于自身屬性強的特點，可以很好的詮釋關聯的產品屬性。
除了中英文圖標，還有圖形類圖標比較常見。這種類型的設計模式的優點就是直觀醒目和簡潔大方，視覺沖擊力強。常見的有以下幾種：
幾何圖形的設計模式給人簡約、現代、個性等視覺感受，從單個具象圖形到復雜的空間感營造，幾何圖形的表現形式非常豐富。不同的形狀給人的情感表達不同，如三角形給人傳達個性、穩定、現代、時尚等，添加圓角后又會更加親民、可愛。我們可以結合產品特征，合理的選擇適合的形狀圖形進行創意。此類型較考驗設計師的圖形創意能力。
單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設計模式的優點是簡潔明確，易于用戶在眾多的應用圖標陣列中快速找到目標。
線形的設計模式分為兩種設計方式，在深色的背板上讓圖標反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標填充顏色，圖標可以是單色也可以是漸變色，或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質，適合于文藝、清新的應用，在界面設計時保持這種干凈明快的風格，才能與應用圖標設計表里如一。線性風格一定注意不可太細，如果做得太細，在手機上看會非常尖銳，顯得不易點擊。例如airbnb，它的背景是一個微漸變，線性風格曲線組成“A”，同時是一個小蜜蜂。
動物作為圖標設計元素是比較常見的方式之一，通過提取動物整體形象或者局部特征部位作為設計元素，背景填充單色或漸變色，簡潔明了。動物給人的印象比較可愛，有助于加深用戶對產品的印象。常見的表現形式有剪影、線性描邊風格、面性風格等。
卡通風格的產品圖標會讓用戶更有好感，一個可愛的卡通形象有助于加深用戶對產品的印象。很多決策者會認為卡通是一種低齡的審美，這種想法其實是錯誤的?？ㄍ梢哉f是一種各年齡層都能接受的風格，例如Bear，它的卡通形象是一頭潔白的北極熊，簡潔的形象設計與產品的閱讀體驗一致。
以正形為底突出負形特征，以負形表達產品屬性，傳遞產品信息。例如NPR One，圖標中的負形圖形是對話氣泡，告訴我們這是一個媒體或社交的應用，而正形圖形強調產品氣質。
白色漸變的設計模式與透明白色相似，都是通過白色不透明度來構建出圖形的立體控件感，它比單純的剪影圖形更加具有質感，這種質感帶給了我們視覺上的享受。例如印象筆記·圈點，它是一只白色的鵝毛形象，垂直的線型漸變使鵝毛富有了生命力一般，顯得更加輕柔。
色彩比任何圖形都更能抓住用戶的注意力，同時色彩更加具有情緒，能傳遞出應用的產品氣質。比起白色漸變圖形，彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。應用圖標的背景和圖形的色彩要拉開對比，一般為白色或淺色背景。
無，即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特，但我們并不鼓勵，因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。
打開率是一款移動應用的重要數據，應用只有被打開才有它的運營價值。在我們手機里安裝了許許多多的應用，除了一些我們每天必須使用的應用如微信，其他大多數的應用在沒有使用場景時很難想到去打開他們。因此，這些應用如何在手機屏幕上吸引用戶的注意，鼓勵用戶打開顯得非常重要。于是在應用圖標上做文章就顯得很有必要，常見的設計手法有：
在設計模板還沒有如今這么發達時，設計師需要設計啟動圖標（1024x1024px）之后按照程序員的要求切出幾十個不同尺寸的圖標。比如，在手機中@3x情況下桌面圖標尺寸為180x180px，在@2x情況下為120x120px；在應用商店圖標需要使用的尺寸是1024x1024px；這個工作太煩人了，好在現在我們只需要專注在啟動圖標設計本身上了。在蘋果給我們的這套資源中，有 Template-AppIcons-iOS 這個文件。打開這個文件，用我們自己設計的啟動圖標替換掉智能對象里的內容，你會發現所有尺寸的圖標都變成了我們的圖標。iOS的圓角圖標并不是標準的圓角矩形，而是某種連續曲線。
我們把兩個圓角曲線放大重疊后進行對比，其中灰色線框為標準圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點，區別在于其曲線稍微向中心收緊。
事實上，我們很難在Retina屏幕上區分這么細微的差別，因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角，直接繪制成直角矩形交給開發同學即可，如果應用圖標需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。
安卓應用圖標同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設計師提供給程序員的同樣是直角矩形，然后程序員通過代碼進行切割使其變成圓角圖標。
在我之前的設計作品中，有個“影記”的攝影社區APP，本篇我們就以此為產品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。
尋找隱喻
隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為，即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯想。例如說到攝影，馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯想詞，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然后從中提取一些形狀和色彩作為產品圖標的主要造型。
競品分析
應用市場各類產品不勝其數，在同類應用中存在大量相似的應用圖標設計，如何保持應用圖標的唯一識別性非常重要。唯一識別性不單單指圖形與其他應用有所差異，避免創意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預期。
提取關鍵詞
根據收集的圖片，創建情緒版，結合自己的產品提取關鍵詞，然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關機”，并依次將關鍵詞描繪成下列圖形。
抽象圖形
確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形，接下來將繪制好的3個圖形相結合，即完成初步設想。
圖標柵格線
使用iOS應用圖標柵格線作為設計依據有助于建立和諧的圖標繪制比例，并與iOS系統保持統一，下圖為iOS系統天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調整大小并注意圖形與其比例協調。
豐富細節
通過上面圖形組合已基本完成應用圖標的設計，接下來我們還應從顏色、質感、背板等著手豐富圖形的細節，建立起應用的產品氣質?！坝坝洝弊鳛閿z影師分享佳作平臺，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應用的主色。白色的信號燈過于普通，使用相機本身發出的橘紅色燈光作為信號燈的顏色，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。
多場景測試
將應用圖標設計稿交付開發提交至App Store上架，正確的圖標設計稿應是直角矩形，iOS會自動應用一個圓角遮罩將圖標的4個角遮住，假如圖標設計稿自帶圓角，就有可能露出圖標透明區域。
△ 注：上圖非實際大小，僅表明不同分辨率下的比例關系
此外，應用圖標還會以不同的分辨率出現在不同場景中，例如在iPhone 8plus上需@3x(120px)的圖，而在iPhone7的設置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時，一些細節就會丟失，使畫面變得模糊，因此設計師應對小尺寸圖標進行細微調整，去除不必要的裝飾元素，以確保應用圖標在小分辨率應用場景下也能保持清晰的識別度。
除了產品圖標，還有一種圖標被稱為功能（或系統）圖標，功能圖標指的是擔負一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復雜，如微信底部四個系統圖標就使用了比較簡潔的線性風格。
功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時設計精致、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗。
圖標是良好設計系統的基本組成部分，對營銷材料非常有幫助。他們是插畫內容的基礎構建塊，但他們也具有很高的技術性。因此科學嚴謹的設計規范能幫助我們設計精致、風格統一的圖標。
一致性是設計圖標的關鍵，在繪制時，一定要確保所有的圖標都相同大小。在UI界面設計中，網格的大小必須要是4或12的倍數（安卓是8的倍數，iOS是4的是倍數）。@2x下作圖要保證是4的倍數，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數了，這個數值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標尺寸24*24px、48*48px。這里建議用48px做為常規圖標設計尺寸。
通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發人員根據倍數調整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。
不過當我們的圖標涉及一些復雜的細節時，還是需要根據尺寸大小單獨繪制。比如我們的系統圖標可能是24px，但是營銷圖標是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節。
知識點：
這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多，也能的保留圖標原始狀態。
圖標繪制基于48x48px畫布繪制的線性圖標，線寬默認為4px，不同場景縮放比例使用：
如果你要繪制描邊圖標，那么需要保證所有的筆畫都是相同的粗細，并且筆畫之間的間距不要比筆畫本身更細。
圖標網格為圖形元素的一致但靈活的定位建立了明確的規則，keyline是網格的基礎-。通過使用這些核心形狀作為知道，你可以跨系統保持一致的視覺比例。
圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內容輪廓邊界，關鍵線有助于促進圖標統一性，簡化設計過程中比例調整成本，繪制小圖形需要參照小正方形的keyline。
直角拐角：當基礎圖形為滿容器正方形時，建議使用3X圓角，當基礎圖形為滿高（寬）矩形時，建議使用2X圓角。當基礎圖形為較小（小于1/2寬高）矩形時，建議使用1X圓角。
非直角拐角：根據圖標場景，通常情況下無論角度，默認均為1X圓角；特殊弧度的曲線“拐角”情況除外，根據圖標設計需要單獨考慮。
封閉區域，有閉合曲線構成的為封閉區域，可以進行獨立顏色填充；
非封閉區域，由非閉合曲線構成的非封閉區域，原則上是不能進行獨立的顏色填充；
封閉區域為曲線形狀且有相交線段時，原則上是不能進行獨立的顏色填充；
當線段與曲線相交或者與直線非垂直相交時，線段末端用圓頭端點；
當線段與直線垂直相交時，線段末端用方頭端點；
當圓點的直徑與線寬一樣時，圓點用圖形繪制，不用線段；
當圓形和方形在小于16px時建議用圖形繪制，不要用線；
傾斜角度
根據像素的網格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。圖標中的傾斜角度應為45的倍數，保持與keyline中的對角線或十字垂直相交線保持平行關系，若是矩形外框，傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系。應避免用13.7°，81°等這些奇怪的數值。
線段和端點
為保證風格的整體一致性，圖標所有線段端點默認均應為與線段同寬的圓角端點，通常情況下線段端點和可編輯節點坐標以整數坐標為佳。默認基于48px畫布繪制的線性圖標，線寬默認為4px，無論直線和曲線在任何時候線寬都應均保持一致。
圖標斷口與間距
內部結構與外框的間距不得不小于線寬，內部元素之間的間距不得不小于線寬的1/2px。
外形框的端口尺寸關系：4px、8px、12px，建議尺寸為4的倍數。
圖標風格變換
圖標在特定規律下允許不同風格之間的變換，分別為線性風格（默認）、填充風格、混合風格、多色混合風格。
單雙像素描邊
如果為圖標設置1像素的邊框，邊框應該使用外部或內部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊。雙數用居中描邊，單數用外描邊，所有錨點要與網格對齊不能出現偏移。
線段閉合
所有線段結合處應為閉合狀態，避免錯位出現。
統一透視
如果圖標有透視需求的話，就要統一透視角度，例如圖標透視方向朝左，那就統一所有圖標的透視角度都朝左邊。
除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器，這樣它們在導出時就都是相同的尺寸了。添加內邊距可以讓圖標在視覺上看起來更加平衡，避免以后開發時還需要重新調整。
繪制圖標不光要滿足物理上大小統一，還要實現視覺上大小統一。設計師要懂得調節圖標大小以避開視覺上的覺錯。
UI界面的圖標通常可以近似的看做以下的基本格式之一：橫向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會發現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。
根據圖標形狀，將它們放在相應的框架中。你就會發現，方形圖標比三角形或細長圖標更緊湊。
清晰是圖標的基本要素，在sketch中，參數不要有小數點，讓圖標占滿像素網格。因為計算機不能識別小數點，導出圖標時計算機會把不能識別參數的部分拉伸填滿像素網格，導致圖標出現虛邊。
通常從一套圖標中最復雜的那個開始，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。
默認顏色：如果是功能圖標，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜，不利于和其他設計師協作。而對于營銷圖標，出于品牌宣傳的目的，你可能會想要使用兩種顏色，個人認為圖標最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標。
選擇狀態顏色：未選擇圖標顏色為#000000，透明度為87%；未激活圖標顏色為#000000，透明度為54%；禁用圖標顏色為#000000，透明度為38%。
功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁、或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，起作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時，設計精美、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來良好一致的使用體驗。
常見的功能性圖標風格大致有三種：線性圖標、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式，所以歸根到底，基礎的圖標風格有兩大類：「線性圖標」和「面型圖標」；
線性圖標
線性圖標是通過線條來表現物體的輪廓，它比面形圖標更能塑造優美的外觀，且作為貫穿圖標繪制的線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標，如果線條粗細不一致，會給人一種權重上存在差異的感覺。所以，在繪制線型圖標時，通常會使用統一粗細的線條。
線性圖標具有辨識度高，清晰，簡約易識別等優點，線性圖標不會對頁面造成太多的視覺干擾。缺點是：線性圖標的創作空間較少，太復雜的線性圖標對識別性產生較大的困擾。
常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個別 App 的底部標簽欄圖標采用粗線條設計，但粗線條的 ICON 圖形較為極簡才適用。
線性圖標根據樣式還可以分為：雙色線性圖標、線面填充圖標、線性漸變圖標。
線性圖標使用場景
在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計，很多APP產品的標簽欄都選擇用線性風格的圖標設計。無疑，線性圖標可以減少視覺干擾，讓用戶集中在產品核心功能上，同時輕量化的視覺語言也與扁平化的設計風格更為融合。它比面形圖標更能塑造優美的外觀，且線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。
通常，在UI設計中，線性圖標很少和背板同時存在，因為線條的圖形視覺表現力較弱，容易埋沒在背景色中，但也不是必須的，如果掌握好一定的規則，一些簡單的線性圖標和背板的組合也會很協調。
面形圖標
面形圖標是以面為主要表現形式的圖標，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。在「微信」底部標簽欄中，未選中的圖標是線性圖標，而選中的圖標則是面形圖標，同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態。面形圖標占用的面積要比線性圖標多，所以更加顯眼。實際上，蘋果在新的設計規范中也建議開發者在APP底部標簽欄中全部使用面形圖標，是否處于點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。
面形圖標具有表意能力強，細節豐富，情緒感強，視覺突出，創作空間大等優點。面性圖標可以讓用戶迅速定位圖標位置，預知點擊后的狀態。但是面性圖標在頁面中不可過多出現，否則會造成頁面臃腫，難分主次，用戶視覺疲勞。
面性圖標根據不同的配色樣式可以分為：單色飽和度填充圖標，純色漸變圖標和多色漸變圖標。
基于最基本的「線性圖標」和「面型圖標」，通過不同的形態和風格的組合，再結合豐富的 表現手法，就可以設計出形形色色的圖標風格了。比如：不同粗細線條線性圖標的組合，或者面面組合，或者線面組合。大家在設計圖標的時候，需要根據自己的產品特征、受眾和使用場景，去選擇適合自己的表現形式。
面形圖標使用場景
面形圖標具有廣泛適用性，通常在運動、時尚類應用的標簽欄出現。由于面形圖標的視覺占比最大化，具有強烈的視覺表現力。
功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標，正形即圖標直接填充色彩且無背板。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例，雖沒有嚴格的繪制標準，但從整體視覺效果上考慮，圖標尺寸最好不低于背板直徑但1/2，最大不超過背板直徑的0.618(黃金比例)，同時還要考慮所有圖標的視差一致。
扁平化圖標實際上是線性圖標和面形圖標的一種組合形式，這種類似插畫感覺的圖形一開始多用于引導頁、空狀態也的情感化設計，后來逐漸在標簽欄、首頁主要功能入口也出現了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目，拉近了與用戶之間的距離，從而建立起良好的用戶印象。
品類區圖標的衛視通常是位于搜索框、banner之下（也俗稱“金剛區”），而且品類區區域通常會占屏幕22%-25%不等，且位于屏幕頭部，從用戶閱讀屏幕內容的視覺流來說位置至關重要，而且是聚合各類子版塊的入口，為各個子版塊分發內容引導流量。所以其重要性不言而喻，產品要讓用戶通過不同類型展示方式的組件找到相應的功能，而圖標具備精煉高度概括內容的特性，識別度也大于文字，所以「金剛區」的圖標設計通常以圖標+說明文字為主。
常見的設計手法有：圓形底板+45度漸變+白色面形+微投影；45度漸變+扁平圖標+微投影；簡單線性；45度漸變+不透明度+面形圖標。
文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號，英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性，因此在某些場景下，采用文字或字符作為圖標，是一種很不錯的表現手法。
比如「提示」圖標，使用一個圓圈包裹一個英文字母「i」，意為 information，表示「注釋信息」的含義；比如停車場直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱的使用方式。還有一些場景，很難用象形或者表意的方式進行表達，那么就很適合使用文字符號，例如京東/天貓某些商品具備「正品保證」的標識，這個概念太抽象了，很難用象形去概括，創造新的表意符號又很難被大眾接受，這時「正」字就很適合作為這個場景特定的圖標符號，作為針對中國用戶群體的產品圖標，簡單粗暴且有效。
知識點：
如果可能的話，盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等)，那么請你自己繪制，而不是直接使用字體。
這幾年動效設計的熱度穩定增長，只有靜態排版的時代正在過去。動效的出現，也讓圖標擁有了更多的可能性。動態圖標可以讓你的app或網站生動有趣，在我們所常見的各種數字產品當中，UI組件和各色元素都已經動畫化了。
運動中的物體比靜態的物體更能快速引起人們的注意，在UI設計中嘗試添加一些動畫及動畫圖標，不僅能在視覺上快速吸引用戶，還能使產品更具交互性，提升產品的趣味性。分享幾個動態圖標資源網站：
useAnimations：支持所有設備、網站、Android和iOS，可以免費用于個人和商業用途。
Lordicon：每一個圖標都提供線性輪廓和面形剪影兩種風格樣式，并且圖標是基于Lottie動畫引擎的矢量動畫圖標，大小完全可擴展，兼容所有主流瀏覽器。
Icons8 Animated icons 2.0：提供的動態圖標格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式，透過網頁可以搜尋、預覽動態圖標效果。
△ https://icons8.com/animated-icons
Feather：設計師Cole Bemis制作的一個開源圖標庫，可自行調節圖標大小和線條粗細。
科學和的命名規則能夠幫助我們快速定位到自己制作的圖標，并且幫助開發縮短命名時間，加強團隊寫作效率。切圖可按照“業務_類型_功能_大小_狀態”的格式進行命名。
切圖命名的格式建議為全英文，可在切圖之前對圖層進行命名，常用切圖命名對照表如下所示。
圖標的繪制方式主要有兩種：布爾運算 和 貝塞爾曲線。
布爾運算
布爾指的是喬治·布爾，19世紀的一位數學家，為了紀念布爾在符號邏輯運算中的杰出貢獻，所以將這種運算稱為布爾運算。
布爾運算聽起來比較難，但其實非常簡單，布爾運算采用的數字邏輯推演法，主要有數字邏輯的聯合、相交、相減。設計師在使用軟件過程中引用了這種邏輯運算方法，對應到設計軟件中，就有：合并形狀、減去頂層形狀、與形狀區域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算。
基本上通過布爾運算，我們能繪制出常見的大部分圖標了，但有時我們需要針對某些線條進行單獨的調整，又或者我們需要打造一套手繪風的矢量圖標，這個時候就需要用到貝塞爾曲線了。
貝塞爾曲線
貝塞爾曲線適用于二維圖形繪制的數學曲線。1962年法國工程師皮埃爾·貝塞爾（Pierre Bézier）所發表。他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線是繪制矢量圖形時的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。
貝塞爾曲線包括：節點、控制點、控制線、曲線這幾個基本概念。
矢量圖形便是由這幾個基本概念構成的。圖形由基礎節點作為支撐構成，控制點和節點之間的線段稱為控制線，控制線就像皮筋一樣，調整控制點的位置，可以改變曲線的形狀，就像被皮筋（控制線）拉扯一樣。
節點包括 4 種基礎屬性類型，一種是沒有控制點和控制線的「直線節點」；另一種是「鏡像關聯節點」，這種節點控制其中一側的控制點，另一側的控制點會發生鏡像變化，適合繪制對稱結構的曲線；再有一種是「無關聯節點」，即節點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響；最后一種是「不對稱關聯節點」，這種類型下，節點兩側的控制點和節點會永遠保持在同一條直線上，但是卻不會對稱控制線的長度。
知識點：
在 Sketch 中，我們可以在選中節點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節點的類型，加快繪制效率。
鋼筆工具
繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜，但是一但上手，會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網站，以游戲的形式練習鋼筆工具，通關的時候你對鋼筆工具就已經輕車熟路了。
繪制實戰
這里選擇了幾個比較典型的圖標，簡單演示下繪制方法和各自的繪制思路：
面性
眼睛：布爾運算相交 / 相減 / 合并形狀
繪制一個正圓，然后復制這個正圓形，通過布爾運算「與形狀區域相交」得到眼睛外輪廓，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。
位置定位：旋轉 / 相減
這個圖標由兩個大小圓形相減，得到環形，再繪制一個和大圓半徑相等的正方形，和圓環左、下對齊，最后逆時針旋轉45度完成。
WIFI：相加 / 相減 / 旋轉
繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標。
齒輪：旋轉 / 相減
通過兩個圖形的布爾運算得到環形，然后繪制一個梯形，復制一個鏡像，將其對齊環形兩端，復制梯形編組并旋轉復制三次（45度），最后合并全部形狀完成。
鈴鐺：相加 / 相減
由3個矩形組成鈴鐺主體，鈴鐺頂部圓頂結構通過設置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進行布爾運算，完成。
線性
放大鏡：旋轉 / 相加
繪制一個正圓和一條線，用對齊工具將其居中對齊，編組后逆時針旋轉45度即可。
時鐘：鋼筆 / 剪刀工具
繪制一個正圓和一個矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點，再用剪刀工具減去多余的線條即可。
雨傘：相減 / 剪刀工具
繪制一個正圓，再繪制一個矩形與其相減得到傘頂，然后繪制一個矩形，通過剪刀工具減去多余部分，得到傘架，傘把手圓角化處理，完成。
相機：合并
繪制一個矩形和一個梯形，通過合并得到相機主體，再繪制一個正圓完成相機鏡頭部分，完成。
愛心：相加 / 旋轉
繪制兩個正圓和一個直徑與圓形等寬的正方形，然后逆時針旋轉45度所得。
無規矩不成方圓，規矩的出現可以讓一切雜亂的東西變得合理，統一起來。在設計上也是如此，規范具有統一輸出，指引細節、便于查看的好處，規范就是一組圖標中的規矩，所有圖標的繪制都按照規矩來，最終的成品就會顯得井然有序。
小小的圖標是由很多圖形元素組成的，在這些圖標中，元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異，也將幫助我們學會圖標設計的底層結構，依次是筆畫末端、圓角、留白、筆觸、內部角、禁繪區。
在制定規范時，我們通常先繪制出一個符合業務風格的圖標，然后根據這一個圖標定制后續的圖標規范，依次按照上述圖標元素進行規范。如果是漸變填充圖標還要規定它的漸變角度，光影角度等。在一組中的圖標需要在這些圖形屬性中進行統一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。
制定規范的三個過程：
△ 圖標設計規范
設計中，我們應該是用「線性圖標」還是「面性圖標」呢？
其實二者沒有太明顯的選擇優劣，很多場景下已經越來越模糊，但總的來說，還是有一些法則可以作為參考：
常用的手法：在App的底部導航欄，選中狀態使用面型圖標，而非選中狀態使用線性圖標；
16px左右的小圖標慎用線性圖標，線性圖標在16px下，可排布像素的區域較小，這個時候線性圖標不容易設計；
面型圖標比起線性圖標，除裝飾性外具備更強的視覺信息層次感，更具引導性，比如金剛區功能圖標、IOS設置界面，使用面型圖標；
車載等系統界面，更適合用面型圖標，面型圖標的視覺面積較大，短時間內更加容易識別；
線性圖標看起來通常會更加細膩精致，適合比較精致簡潔的設計或者女性化產品設計；
文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標，那么可能會提供1x、2x和3x.的png文件，以適應多種設備。而對于開發和其他設計人員，則通常需要導出.svg文件，這些文件可以在設計程序中編輯，并且可以通過代碼在應用程序或瀏覽器中繪制。導出的svg可以用sketch的官方插件「sketch-SVGO」進行代碼優化，壓縮svg的體積，精簡svg代碼。
△ sketch-SVGO 插件官方下載頁
svg格式僅支持居中描邊的圖標，并且不支持投影，因此對于復雜豐富的圖標還是切img圖為好。
完成圖標后需要進行視覺檢視，避免任何多余的線條或形狀，保證盡可能整潔。檢查所有線條是否都在標準框架內，讓其他人幫忙來檢查你的圖標是否整潔是非常有必要的。對圖標精心設計評審，合格后再加入資源庫，這樣避免多人同時修改而造成混亂，同時提升團隊協作效率。推薦一個免費的圖標管理工具：Nucleo，團隊協作需要付費。
△ 圖標資源管理工具：Nucleo
我們了解了 icon 的基本知識，那么如何設計一個好的 icon 呢？怎樣評判我們的 icon 是否合適，是否貼合整個產品呢？我們需要了解什么才是一個好的 icon 。
我們可以從以下五個方面來檢驗，分別是：識別性，規范性、統一性、呼吸感與品牌感。
1. 識別性
圖標就是幫助用戶理解信息，所以識別性（也可以說是可訪問性）是一個圖標最重要的一項，尤其在沒有文字說明的情況下，一定不能讓用戶產生疑惑。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比，不論是黑色還是白色的背景都可以看清圖標的全部細節，還需要確保圖標中的每一種顏色都是可見的。
圖標識別性可以分為兩類，分別是含義識別和視覺識別。
靈活的設計思路，在保證識別度的前提下靈活發揮，嘗試各種不同風格的表現形式。
當然，腦洞也不要太大，失去了原本的含義，造成誤解。
2. 規范性
規范性也是做好一個圖標的基礎，我們要保證圖標在視覺大小的一致性，圖標飽滿度、遵循同一種規律，細節統一性。
視覺大小的一致性：在相同尺寸的基礎上分析形狀間的視覺差異，來審視視覺上是否統一，如一樣尺寸大小的圓和方形的視覺大小就不一致，那么我們可以規定它的最大尺寸，進而在尺寸規范中適當調整，使得視覺大小達到統一；
3. 統一性
在繪制多個類型相同的圖標時，我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中，會有很多種圖標，但是圖標的功能不一樣，所表達的內容也不同。這時，圖標一致性的意義就體現出來了，根據格式塔原理中的相似性原則：人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統一匹配。
圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同，而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重，邊角的大小，配色方案，細節層次和設計元素在整個合集中是否是不變且一致的。
圖標的統一性可以從：線條粗細、設計語言、復雜程度、顏色規范四個大的方向去著手。
線條粗細：相同功能類型的圖標線寬粗細統一，有背板的圖標線條不易過細；
設計語言：可拆分為透明度（拉開層次）、圓角（圓角還是直角）、斷線開口（開口位置）、設計特征四個緯度去規范；
復雜程度：如果不能簡化圖標，就保持同一組圖標的墨水重量一致，簡化太復雜的圖標，增強辨識度；
顏色規范：對于線面結合的扁平圖標建議最多用兩種顏色，活動入口圖標如果需要的色彩數量多，那就需要保持敏感，從一種色彩的周圍小幅度提取另一種色彩或多種色彩，調整其色相、飽和度、明度就能搭配出許多和諧的顏色。
4. 呼吸感
呼吸感的意思就是適當留白。不管是圖標還是界面，適當的留白可以突出主體內容，讓內容具備易看性。在圖標的繪制過程中，我們應該注意圖標元素之間的間距不宜過近，元素也不宜過多。圖標是一個物體的簡略縮影，目的是為了表達內容，讓用戶快速理解，太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素，避免使圖標變得太過復雜難以識別。
5. 品牌感
品牌感就是我們上面談到的要與品牌理念相符，傳達給用戶的感受一致，通過吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解，尋找自己產品獨特的品牌氣質，挑選合適的技法。然后把這些元素具象化，融入在界面設計中。
那么，該如何提升品牌感，打造屬于自己App的獨特風格呢？品牌基因為我們提供了一些線索，這是近年來非常流行的一種趨勢。
我們都知道圖標在APP設計中的重要性，但是打開許多APP你會發現他們的圖標設計都非常普通，似乎是在圖標網站上下載的素材。雖然一些優秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言，但是仍逃脫不了與其他APP設計雷同、毫無個性的通病，使得UI看上去普通、不精致，缺少產品氣質。
那么，該如何打造屬于自己APP的獨特風格呢？品牌基因為我們提供了一些線索。它是由平面設計中的VIS（視覺識別系統）引入的一種設計策略，通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象，代表了與眾不同的氣質。接下來，我們就來學習如何利用品牌基因進行圖標設計。
1. 提取品牌圖形
通常一個App的第一個tab是首頁，是用戶進入App后看到的第一個頁面，最常見的圖標設計是一個小房子的圖形。首頁是App中最重要的頁面，承載了整個產品的核心功能，是用戶瀏覽最多的地方，因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標是必要的，不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象，加強了用戶對App的良好印象。例如網易云音樂的首頁標簽就直接使用了它的品牌圖形，其優點不言而喻。
但是請注意，這種設計策略并不適合于所有的App，當第一個tab被賦予特定功能，就不可使用品牌圖形，否則用戶會難以理解。例如微信第一個tab是聊天列表，此時使用氣泡就比品牌圖形更加合適。
還有另外一種情況。通常一個App的最后一個tab是個人中心，即“我的”。如果App的品牌圖形是動物圖形，也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。
2. 提取品牌色彩
色彩也是圖標設計中重要的構成元素之一，合理協調的色彩搭配讓用戶在瀏覽頁面時感覺舒服。從品牌形象中提取色彩作為圖標設計的依據，可以給用戶帶來由內而外一致的視覺體驗。在設計時提取品牌色彩可適當調整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標背景色，使圖標之間形成色彩上的關聯。直播應用Bigo Live的品牌色是青藍色，在標簽欄的圖標設計上（選中態）將圖形局部元素填充青藍漸變色，活潑清爽的搭配帶給用戶輕快的感覺，與整體品牌調性高度一致。
3. 提取設計語言
在VI設計中通常提取輔助圖形作為設計元素，這在圖標設計中同樣適用，當所有的圖標都具備了相同的設計元素，他們就構成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫字母F演變成的翅膀造型，因此可以看到“我的”小人圖標的也使用了類似的輪廓，這樣他們就形成了某種視覺聯系。
4. 提取產品氣質
品牌形象決定了產品的氣質，而產品的氣質決定了吸引什么樣的用戶。就如當我們第一次看到一個人的時候，往往會根據他的外貌形象特征，產生一個大致的印象，這就是一個人的氣質。APP也同樣，例如傳遞傳統手工藝人社交的「東家」，其產品流淌著古樸、溫潤、精致的人文氣息，它將宋體漢字的筆畫進行拆解組合，創造出具有東方韻味且極具形式感的圖標設計。
5. 拆分品牌名稱
App標簽欄圖標最常見的形式是圖形加文字的組合，由于文字本身就能傳達最直接的含義，因此圖形的識別性并不那么重要了，我們就可以在其視覺表現形式上賦予更多創意和個性。MONO是一款閱讀類App，它的標簽欄圖標直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應的功能模塊本身并沒有直接聯系，但加上標簽文字的輔助也不會造成閱讀困難，而且產品本身的用戶人群就是比較能接受新鮮事物的年輕人，因此這樣的創意反而給App設計加分了。
6. 展開形象聯想
我們日常使用的眾多App大多數都有著相同的功能模塊：首頁、發現、動態、我的等，因此也就出現了很多雷同的圖標設計。比如“首頁”是尖頂房子，“發現”是眼睛，“動態”是氣泡，如果有差別也只是設計風格的差異，有的直角有的圓角，有的線性有的面形。這樣的設計沒有品牌歸屬感，試一下將這些圖標單獨拿出來就無法判斷它是誰，它從哪兒來？
優秀的設計師不僅要具備將圖標繪制精美的能力，還要具備豐富的設計想象力，不拘泥于設計規范的條條框框，有時候打破規則才能設計出優秀的圖標。“首頁”除了小房子我們還可以想到什么？馬蜂窩的做法就很巧妙，“首頁”圖標是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設計與品牌形象緊密相連，簡直完美！不過的改版好像已經改沒了。
知識點：
總之，要想在繪制整套圖標時建立統一風格，就要從外觀和顏色上確立主風格，在局部尋求個性特征，將兩者結合，并融合產品屬性和符合用戶定位，先在腦海中構思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個最佳方案上機完成，只有不斷地思考和打磨才能創作出最佳的設計方案。
圖標設計是UI設計中非常重要的環節，在尺寸有限的界面上，小小的 icon 可以更加簡單的表達含義，傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格，以滿足不同的業務需求。另外，關于如何繪制keyline線，還有的iphone12樣機，有需要的同學可以出門右轉私信我。
圖標概述及發展歷程
1. 圖標的定義
應用圖標的類型及作用
1. 中文文字圖標
2. 英文字母圖標
3. 數字圖標
4. 特殊符號圖標
5. 幾何圖形
6. 單雙形/剪影
7. 線形
8. 動物圖形/剪影
9. 卡通形象
10. 正負形
11. 白色漸變
12. 彩色漸變
13. 無
14. 應用圖標的作用
應用圖標繪制方法及流程
1. iOS應用圖標
2. 安卓應用圖標
3. iOS應用圖標設計流程
功能圖標的設計規范
1. 圖標的規范
2. 圖標尺寸
3. 圖標的keyline
4. 圖標關鍵圖形
5. 圖標的拐角
6. 圖標區域 封閉和非封閉
7. 圖標繪制規則
8. 視覺柵格
9. 視覺重量
10. 圖標繪制細節
11. 圖標的顏色
12. 功能圖標的風格
13. 扁平圖標的使用場景
14. 品類區圖標
15. 文字圖標
16. 動態圖標
17. 圖標命名規則
如何繪制功能圖標
1. 圖標繪制方法
2. 制定規范
3. 線性or面性
4. 圖標導出
5. 圖標管理和交付
圖標設計的評判標準
圖標的品牌感
寫在最后
文章來源：優設 作者：印跡時光
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
1. 形體表現
形體的表現，就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節、內部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現得太抽象，也不能增加過多的細節，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
2. 光影表現
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節的漸變角度、投影的使用上，就會產生錯誤的設計，造成光影視覺沖突和矛盾。
在創建了光源以后，物體受到光線的影響就會產生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現還會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現，再或者一拳超人中男主光頭上長期存在的高光配飾（多數動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發現首頁頂部業務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區分。
形體的重要性在于要對圖形本身有比較合理的呈現，不要讓比例失調和圖不達意。
第二步：完善圖形細節
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產生一個向下的投影。并且反向暗部的表現，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創建一個圖層，然后添加深色的透明度漸變，就可以表現出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，將整個圖標的質感進行拉升。
通過上面的演示，我們可以將整個擬物設計流程精簡成：
然后，通過這樣的步驟，再來完成后續的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
最后的總結，學習輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創意增加一些儲備彈藥，以應對越來越復雜的互聯網產品和職業要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因為時間上來不及，另一方面是希望大家不會被軟件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
文章來源：站酷 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果要設計產品或開發界面，我們通常會需要風格相同的圖標，若無法自行繪制或不希望付費購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎、簡單的圖標設計，可用于產品開發設計，這套圖標一共收錄186種圖案，同時提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預覽圖標，也能切換不同尺寸下的呈現樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細，可以快速下載圖標圖案或取得源碼。
Basicons也有一個內嵌（Embed）語法產生器，能產生帶入圖標圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網站一次下載所有圖標，再依照需求使用即可。這套圖標集以MIT授權方式釋出。（即可以免費使用、修改、出售，附上協議即可）
使用教學
STEP 1
開啟Basicons 從首頁就能預覽完整圖標圖案，這套圖標特色是以非常精簡、干凈的線條繪制而成的圖形，每個圖案下方會有名稱，應該能夠很快速聯想到圖標代表的意思（否則就失去圖標的意義…），可以稍微預覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會更新加入新的圖案。
STEP 2
從右側的「Customize」自訂選項可以調整圖標尺寸、線條粗細，調整后會直接呈現于左側。
STEP 3
點選要下載的圖標后再按下右側的「Download」就能下載.svg圖標格式（或是從上方點選Download All將所有186個圖標完整下載），如果想直接取用SVG原始碼的話可點選「Copy SVG」復制程式碼。
除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結和原始碼。
文章來源：優設 作者：Pseric
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一直有很多朋友會問一些關于移動端實現動效的方法，平時也會給大家做一些解答，但是可能沒有那么系統性，這次抽點時間總結歸納下這方面的內容，跟大家分享下我日常設計中是如何完成動畫實現的。
設計輸出的方式大概可以分為位圖和矢量兩種，與常規的圖片輸出并無太大的差異。位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動畫。
當然除了以設計提供的方式之外，還可以設計完成好demo，開發通過代碼進行實現例如：javascript直接實現、SVG（可伸縮矢量圖形）、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開講了。
實現動畫，首先還是得了解有哪些工具可以制作及合成相關的動效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。
接下來講解下各個軟件輸出對應格式的方法，實際上操作并不會太難，動效本身更重要的還是在于創意本身，因此當你把握了這些方式之后可以考慮進行創意設計。
由于GIF文件多種工具都可以輸出，這里就不再作詳細說明
1. PNG序列
具體如下視頻
2. APNG
如上導出到PNG序列幀，拖拽到iSparta軟件中，合成即可。合成時可以選擇幀率、循環次數（0為無限循環）、導出質量等。如下視頻
3. Lottie
更多Lottie相關可以前往https://lottiefiles.com/學習，里面有豐富等Lottie動畫效果和一些插件下載，去研究下吧
4. SVG動畫
建議大家自己下載軟件后嘗試
5. 格式大小比
通過試驗幾種格式的大小大概是排序依次為：PNG序列>APNG>GIF(質量較差)>Lottie / SVG，json文件和SVG動畫文件比較接近，因此可以根據實際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質量也較差，因此建議慎重考慮。
動效在UI設計中的應用場景很多，這里梳理了一下，之前我在項目中嘗試過的動效，給大家分享下一些案例，希望可以對大家有所啟發。
學習用什么工具導出什么格式的文件只是第一步，更重要的還是如何制造出一個有創意的動效，因此不要過于強調工具，更多應該培養自己思考設計的習慣。
文章來源：優設 作者：ID設計站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
按鈕在界面設計中，屬于最基礎的元素部分組成，按鈕設計的精致，整個頁面的品質也會上升不少的檔次。今天給大家分享這篇文章，主要講解在設計按鈕時我們應該考慮哪些因素，包括視覺上，有哪些萬能的方法及公式，能夠正確的制定按鈕的設計標準，來提升整個設計的系統性。
在設計按鈕之前，需要先理解按鈕起到的代表含義。什么地方該加按鈕，什么地方不加按鈕，在系統化設計思路中需要非常有講究。通常按鈕在頁面，主要起到以下三點作用：
1. 某一類型的功能操作
這種比較常見，如一些控件形態的按鈕，比如加減、折疊、展開，下拉等。這類按鈕會起到一些功能形態的作用，常用于交互場景。所以在這類按鈕設計中，應當弱化按鈕形式，重點強調功能，突出主體信息。
2. 下一步的明確指引
當頁面內容信息過多后，用戶容易失去信息焦點，從而忘記下一步操作。信息種類越多，用戶權衡的時間就會越久，用戶選擇罷手及跳出的幾率也會越大。所以這個時候，在合適的地方增添按鈕，能夠很好的引導用戶進行下一步操作，提升整體操作的成功率。其次從體驗層面，也一定程度能起到頁面動線的引導作用，比如下方的一組卡片，在增添了按鈕后行動點很明確，非常有點擊欲望~
3. 固定習慣，明確心理預期
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長期以往用戶就會形成使用這個按鈕的習慣，這樣對提升復訪及固定心智是非常有效果。
所以如果你認為你負責的產品或者是內容，能持續為用戶帶來價值，那么在頁面的關鍵節點，不如將按鈕設計的更醒目。這樣用戶下次再看到這個按鈕時，固定習慣會引導他持續的點擊。
這里我不以按鈕的長相來區分按鈕的類型，如漢堡按鈕或者別的什么的，意義不大。我主要還是想通過以按鈕的功能區分，來劃分類型，這樣大家理解起來更為清晰。
1. 功能性質按鈕
這類按鈕見到的最多，我們常用的APP里，大量都充斥了這類按鈕，這類按鈕會起到重點的功能交互，幫助用戶得到TA想要的信息。其次樣式上面，其實圓形的點擊欲，會更強一些，看起來也更利于點擊。而方型的按鈕，則顯得更為正式、嚴謹。
公式：如果是圓形按鈕，圓角的半徑=高度的50%比較合適，而如果是方按鈕，邊角的小圓角半徑控制在15%以下比較合適，我個人喜好用10%。
2. 聚焦大按鈕
這類按鈕通常見于一些核心頁面的強指引，比如登錄、注冊、提交表單、或者是保存，等對頁面全局進行操作的一些按鈕。需要注意的是，這類按鈕只適合對頁面全局進行操作，而且頁面中大按鈕的數量不宜超過2個，信息盡量需要保持聚焦。
公式：基于@2x，這類大按鈕的高度≥72px是比較合適的，通常的尺寸有 80px、88px、96px，大家可以根據產品面向的人群來定高度，如果頁面面向的人群較為廣泛，我建議采用 88px 或者是 96px 的這種大號版本，畢竟操作起來更為方便。
3. 吸底按鈕
這類按鈕的優先級，在整個頁面屬于最高，頁面的所有信息，都將聚焦在這個按鈕中。由于按鈕是吸底的，所以會一直浮在頁面上，不受頁面篇幅影響控制。
需要注意的是，吸底按鈕一定是頁面最重要的功能，或者是整個頁面的下一步指引，比如淘寶的立即購買，或者是餓了么、美團的立即下單，又或者是常見的充值界面。
公式：基于@2x，吸底的高度≥80px是比較合適，常見的尺寸有88px、100px、112px ，按鈕的大小可以根據內容來定，建議高度保持在72px以上比較合適。這里需要注意的是，吸底的按鈕，需要產出兩套設計稿，一套為常規稿，一套為iPhoneX的適配稿。iPhoneX底部控件的區域高度為68px，所以iPhoneX設計稿的吸底高度=常規設計稿吸底高度+68px
另外在設計按鈕的時候，也別忘了補充按鈕的多個狀態的設計稿。常見的狀態，有以下四種：
1. Normal-正常態
這個為按鈕的正常顯示態，就是正常頁面中的顯示效果。
2. Hover-懸浮態
這個為按鈕的懸浮態，一般只會出現在使用鼠標的時候。當鼠標指針停留在按鈕時，按鈕發出的特殊反饋，則為懸浮態。這類形式在移動端交互中無作用，所以移動界面設計中不需要考慮這個狀態。
公式：正常情況 Hover 態增加 10% 黑色就可以，原理如下
3. Pressed-點擊態
這個為按鈕的按壓態，就是按鈕在被點擊或者是按壓后的效果。
公式：在APP設計中，點擊后的效果我們設一個標準值讓開發實現就好了。常用的值有按鈕減少20%的透明度，或者增添20%的暗度，這兩個都可以。通常我建議在亮色上的按鈕，使用暗度疊加（增添20%的黑色），在暗色上的按鈕，則使用透明度減少（透明度改為80%），實現效果原理參考 Hover 態那張配圖
4. Disable-禁用態
當信息未填充完整，或者是某類條件未到，按鈕會出現不可點擊的狀態，處于禁用形式，這個時候，按鈕就會呈現禁用態。這個禁用態無論是web還是app，很多場景都會用到，所以建議設定一套標準的設計規范，避免重復定義這個效果。
公式：禁用態尺寸及大小不變，僅使用色值做區分。建議使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要盡可能把樣式做弱，避免用戶做無效的點擊。
在目前移動互聯網設計中，雖然按鈕的種類很多，但風格變的逐漸統一，更多都是色值及細節上的差異。從大的風格來看，按鈕還是分為這這幾種類型：扁平化、輕擬物、重擬物及游戲按鈕。
1. 扁平化按鈕
這類按鈕我們設計用的最多，信息簡潔，操作方便，形式追隨功能。這里也給大家分享一下我在設計扁平化按鈕的一些經驗，比如高度寬度，以及陰影的色值。
公式：按鈕高度，這個通常是文字字號的2.4倍然后取4的倍數整數，比如字號是24，那么按鈕的高度=57.6，離4倍數最近的是56，所以高度=56，圓角=10%的高度，取整后是6px。
另外如果覺得不合適，也可以單位往8遞增或者是遞減即可，例如 56、64、72、80、88 px
按鈕寬度：如果不是那種全局按鈕，通常按鈕的寬度=最多容納字數的寬度+按鈕高度，就好啦。還是以上面那個例子為例，按鈕高度=56，文字寬度=96，那么按鈕的寬度=56+96=152
2. 輕擬物按鈕
這類按鈕近幾年變的非常流行，甚至QQ、淘寶，都開始大面積使用，因為這類按鈕在保持信息簡潔的同時，仍然有較強的點擊欲，視覺上面也能夠增添頁面的品質感。
公式：漸變方向，建議采用水平漸變，重色在右側，輕色在左側更為合適。陰影色值我之前就寫過，不知道大家還記得么，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴展=按鈕高度的 -15%，高級又簡單，完美！
如果覺得這個彌散陰影太大的同學，也可以自己手動簡單調整下，不礙事。（這個公式僅適用于Sketch，用PS的同學，也可以按照這個邏輯自行研究一下）
另外說一句，實際上這個陰影公式并沒有什么很多的依據，大多數都是我個人原創總結出來的，簡單好用。比如下面的這些按鈕的樣式，用了公式后的效果大家可以自行感受~
3. 重擬物及游戲按鈕
在一些營銷頁面中，按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕，大部分會采取游戲場景中的元素，再采用擬物的手法，來進行打造。
通常游戲化的按鈕，需要重點幾個部分組成，學過素描的同學應該會知道，立體的物體，通常會有幾大特征，分別為高光，亮部，暗部，投影及反光。那么如果我們需要繪制一個在營銷或者游戲場景中使用的按鈕，只需要保證這個按鈕有高光，亮部，暗部，投影及反光的這些特征，然后飽滿一點就，立馬就可以出效果啦。
當然，我舉的這幾個例子都是最基礎版本，如果你想做的更豐富一些，那也是沒問題的，這個可以case by case 來定。
這個沒有太多的公式可以總結，更多的是看設計師的基礎美術水平啦~~
在寫這篇文章的時候，突然刷到了一套新擬態的控件設計風格，有種眼前一亮的感覺。雖然這套設計視覺上很有層次很好看，不過感覺短時間之內，比較難大面積推廣，因為開發實現起來還是會比較耗費成本。
我把源文件保存下來了，對這個感興趣或者好奇這種效果如何實現的同學，可以下載源文件研究~~ sketch、psd、Figma 格式都有。
文章來源：優設 作者：UX小學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
還記得2019年4月上映的復仇者聯盟4么，漫威電影宇宙的第三階段結束了，電影很精彩，但最令人震撼的是先導版的電影海報！就是那個「五彩斑斕」的黑～
從設計上看，海報的設計師是把光運用到極限了，通過逆光和環境塑造出了酷+神秘的視覺感受。光是一切視覺表現的基礎，是構圖和傳遞調性的關鍵，也是視覺表現重要的組成部分。所以今天就和大家聊聊啥樣的光是一個牛X的光以及如何塑造一個合格的光影？
常見形式1-聚光
△ 圖片來源：小米米家臺燈1S
聚光是最常見光，也是在設計中用到最多的光，通常在塑造一個物體的時候就會用的到。
因為聚光的原因，場景更像個舞臺，凸顯「主角」的存在。具體的原理可以根據下圖去理解。
常見形式2-自然光
自然光其實就是陽光，理論上講其實光源是太陽也是聚光，但由于光源太過于龐大，無法真正的聚焦，所以就把這種光當成一種泛光源就好。在產品設計中也會經常看到類似的光源出現，比如行為召喚按鈕：
因為不需要強有力的表現和氛圍的營造，所以通常產品設計中更需要自然光來作為核心光源，通過泛光源去統一控制產品的光影體系就好（發布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會講到）。
常見形式3-逆光
坦誠的講逆光也是聚光的一種，只不過由于角度特殊，呈現的視覺效果也非常不一樣，所以就單獨把逆光拿出來說一說。當畫面需要逆光來營造氛圍的時候，只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個處于逆光的物體了。
小米是典型的逆光氛圍營造高手，但萬變不離其宗，依舊可以從海報里看到相同的方法。
△ 圖片來源：小米傳播物料
通常現實中的光源并非那么理想，光線的復雜超出肉眼所見。所以我們在繪制的過程需要注意到，可以適當的抽象。舉個例子，自然光是普照的，所以我們抽象為四個小光源平均分布，依次打到物體上：
在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個辦法就可以獲得光影的層級關系，在繪制輕擬態的圖標或者運營活動中更加細膩。
△ 圖片來源：09UI設計工作室-陌陌直播禮物設計
所有的光影其實都是幫助主體塑造體積感，一個合格的立體圖形必須具備：高光/過度色/明暗交界線和反光這四個基本屬性。
然后需要一點超現實主義的手法，把太陽光過濾下，從「赤橙黃綠青藍紫」的色調里提取跟主體和諧的顏色（通常是補色），營造出介于真實與玄幻之間的美妙效果hiahia～
然后再在投影上加一點點色彩傾向，一個完美的黑八就出現啦～按照這種方法，你可以試著去嘗試更多的物體/場景。（下圖是筆者作品「插著紅旗的地球」hiahia）
影響主體的除了光影之外就是材質了，近年來的三大巨頭apple/Microsoft/Google的設計都在材質上下足了功夫，蘋果的毛玻璃，微軟的亞克力和谷歌的「紙」。
從趨勢上看，材質的引入對產品中拉開層級關系上有巨大意義，以往的設計僅僅是通過光影和焦距來拉開關系，這兩個維度在少量的疊加界面中還能有效果，但到了復雜的多窗口互壓互疊里就不是那么奏效了，所以鐵子們要善于運用材質區分產品顯示的優先級。
△ 圖片來源：Eric Hoffman – Big Sur Mac Icons
△ 圖片來源：JIAJIE – WeSing Live gift
圖標好壞除了造型之外最重要的就是質感了，通常圖標也就是4種形式（如下圖），類似蘋果的系統圖標和抖音直播間禮物的圖標都是最后一種形式。
但如果僅僅是這樣就太水了，既然都說了是干貨預警，那就要拿出哥們看家的本領～此圖是大家關注公號后就會收到的推圖，主體就是一個POI的圖標加上微信的對話框和代表干貨的小星星營造出的氛圍。
刨析下這個圖，三個發光體和底下的投影，通過上文的講解依次繪制完成～
之后就到了amazing的時刻了，打開photoshop找到「濾鏡-模糊畫廊-場景模糊」設置幾個key-point，調試模糊值和透明度/亮度，最終完成對光影的塑造。
空氣中的灰塵相信大家都不陌生，這種情況多數是一束光影從窗戶里射入后，在光的折射下把平時看不到的灰塵統統照了個遍。
如果你是mac用戶一定熟知keynote里的動畫效果「轟然墜落」，這個效果是在模擬物體振動后彈開周圍灰塵，非常震撼。在PPT的設計中你也可以同樣借助光和霧來營造你想要的效果，下圖是我在做工作總結的時候為了凸顯Q4工作采用的辦法。
光影輕擬物在產品設計中的應用面還是很廣的，比如：圖標、數據可視化、插圖等等。而在大量扁平設計時代適量使用會顯得很出彩，當然再好的教程也比不上大家多動手試試練練，所以鐵汁們行動起來咯~
文章來源：優設 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一套 UI 界面當中，核心的 APP 圖標是用戶每天都要接觸、經常使用的視覺組件和交互對象。設計圖標的時候，要用到大家最熟悉的元素才能貼合用戶認知，要醒目、統一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來自著名的 Tubik Studio 團隊，他們為華為旗下的 EMUI 10 系統設計了核心的圖標系統，來看看他們的設計過程吧。
我們總不會低估一個操作系統基礎圖標，對于產品的可用性和合意性的影響?；A圖標雖然小巧，但是對于整個操作系統而言，總是極具影響力的，因為他們是用戶界面的核心元素，幫助用戶快速直觀地在系統中定位、瀏覽、導航。但是，對于設計師而言，圖標的設計始終是挑戰，它看起來最為簡單，但實則為最為艱難的工作。
圖標需要，讓人一目了然，但是也要具備良好的可識別性，在傳統和創新之間達到平衡。這一次，Tubik Studio 設計團隊將要給華為的 EMUI 10 來設計圖標，而這篇文章將會為你揭示背后的設計過程。
這次的項目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負責。這次的設計項目從最初的探索構思入手，逐漸開始繪制草圖，探索樣式，一直到最后打磨，完成設計。
為華為 EMUI 10 系統的用戶界面設計基礎的圖標
我們在 2019 年夏季，收到了來自華為的邀約，這次的項目要重新設計 EMUI 這套基于 Android 系統的用戶界面基礎圖標，這套圖標會用來適配華為旗下的旗艦手機，這些圖標將會隨著新版的系統部署到這些手機產品當中。我們的任務，是創建總計 54 款符合當下潮流趨勢的圖標，這些圖標要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。
這個圖標設計項目如今已經在當下的華為旗下手機產品中應用且部署好了，最早使用這套圖標的智能手機型號為 Mate 30 ，緊接其后的是 P40。
在整個操作系統中，這些圖標是始終位于用戶視野以內、最基礎的最核心的交互元素，通常用戶每天都會同這些核心的基礎 APP 進行交互，有時候一天多達幾十次，因此它們應當具備良好的功能性，還應該足夠美觀，給用戶帶來滿足感。同時，這套圖標的設計，也應當足夠統一，以協調的體驗切入到整個 EMUI 的設計系統當中，貼合整體的樣式特征。
所以，我們使用了一整套圖標網格系統，應對不同需求，在設計的過程中，這套網格有助于確保所有圖標外部尺寸的一致性，也保證了內部元素的統一性。
為了發掘全新的視角，我們決定從傳統的手繪圖標開始，尋找重新塑造圖標設計的方法。這些圖標所涉及到的元素，早已為全球數百萬用戶所熟知，要重新設計圖標外觀，并且還要成套且統一，這本身就是一個巨大的挑戰。
比如「電話」圖標所對應的聽筒元素、「信息」圖標所對應的氣泡對話框這樣的元素，是不可能完全拋棄重新創造的，所以我們的真正的切入點是在形態和色彩上尋求解決方案。
越是簡單的東西，重塑起來就越難。
在實際的設計過程中，我們嘗試了數以百計的造型變體，從完全放飛、非常規的的外部造型，到極其常規，大家熟知的造型解決方案，我們都逐一試過。而在色彩上的嘗試相對會顯得更加具有實驗性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進行混搭。
當然，我們很清楚，這樣的實驗性的工作是探索過程中的一小步，但是它是必須的，是創造新設計的種子，是尋求正確答案的必經之路。
在設計過程在，有一件有趣的事情發生在設計「相機」圖標的過程中。我們嘗試過很多不同的圖標造型，不同的元素，不同的樣式，但是其中始終有一個細節是不變的，那就是右上角的小紅點。這是為了暗示用戶，華為的攝像頭模組來自徠卡，這個紅色的小點就是向其致敬的標識。
而下面的概念設計，則是強化了圖標之間的幾何輪廓的差異，從而提升圖標在智能手機屏幕上的對比度和識別度。
下一步，我們基于幾何圖形外觀差異性，設計了多種造型不同但同樣優雅的圖標。在基于這種風格概念進行延伸的過程中，我們會優先考慮圓形的元素。而「天氣」圖標明顯既不適合圓形也不適合方形來呈現，所以我們使用的是云和太陽兩種元素的組合。「錢包」圖標使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對自由的，但是所有的圖標都是遵循圖標網格，并且在視覺權重上盡可能統一。
在色彩和樣式上，我們則更加傾向于漸變。沒有色彩漸變，純扁平的圖標顯得過于幼稚和「古早」，沒有足夠的品質感，所以，我們在新的圖標設計上，開始加入漸變色彩，提升質感。
不過，在最終版本當中，我們還是保留了圖標外部的圓角矩形的外輪廓，然后將圖標元素的內徑進行了適當地縮減，漸變和核心的簡約幾何特征依然是整套設計的最高優先級。
這套設計方案展現了在整套 UI 界面中，圖標這個小元素的設計上所需要投入的精力和潛在的難度。想要圖標足夠協調、美觀、易用還要貼合品牌特征、還要區別于以往，是一件相當不容易的事情。
細節里藏著魔鬼，任何細小的元素、線條輪廓、色彩的變化都可能會在屏幕上放大、被感知到。
文章來源：優設 作者：Tubik Studio藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大家平常都習慣去哪些免費圖庫網站找圖呢？雖然有一些老牌、圖片數量充足的圖庫，像是 Unsplash、Pixabay、Pexels，但后來經過人工智能和大數據學習的搜尋工具更深得我心，也能通過算法將質量較低、不適合使用的圖庫圖片先排除掉，大幅節省搜尋時間。如果在尋找圖片素材時想盡量避免使用和其他人重復的內容，試試看由攝影師親自拍攝的小型圖庫或許是個不錯的方法。
往期回顧：
本文要介紹的「DesignersPics」是一個持續更新、每個月都會加入新相片的圖庫，由攝影師 Jeshu John 親自拍攝修圖，收錄各種類型的相片，包括建筑、商業活動、概念、美食和飲料、大自然、人物、科技等等，照片數量不多，但有一定的獨特性。
DesignersPics 的相片都具有非常高的分辨率和畫質，可自由下載用于個人或商業用途，例如網站、投影片、包裝、標簽、HTML/PSD 模版、T-Shirts、廣告橫幅、商店或辦公室裝飾等等，無需標示出處來源。
網站鏈接：http://www.designerspics.com/
使用教學
開啟 DesignersPics 從右上角的「Categories」選擇要瀏覽的相片分類，或是直接從首頁以日期方式瀏覽，網站亦提供搜尋功能，不過圖庫本身相片量不多，瀏覽上不會耗費太多時間。
每張相片會有預覽圖、標題和免費下載的按鈕。
進入圖片頁面，還能看到圖片尺寸、大小等等信息，點選「Download」就能下載取得 .jpg 格式的圖片文件。雖然 DesignersPics 沒有硬性規定必須標示作者來源，但如果你喜歡可以協助推廣。
值得一試的三個理由：
文章來源：優設 作者：Pseric
2020潘通流行色
一覺醒來，2020 年潘通年度色就這么發布了。
這款被命名為為「經典藍」（Classic Blue）的色彩沉穩耐看，雋永優雅，按照潘通官方的說法，「經典藍」仿佛暮色四合時的天空，寧神靜心，讓人駐足。「經典藍」是一種穩固可靠的色彩，給人確信感，撫慰著每一個期待穩定者的心靈。
為什么會選擇這樣一種藍色，潘通色彩研究所的執行董事 Leatrice Eiseman 在潘通官網上，予以詳細的解釋。
「我們生活在一個亟需信念和信任的時代。潘通 19-4052 經典藍 ，這種色彩正是自信和恒久的外化體現，這種堅實可靠的藍色調，更能與人產生深層的共鳴，令人心安。一望無際的藍色能夠喚起人類對于廣袤無垠夜空的無限遐想，經典藍鼓勵著我們透過顯而易見的事實，拓展思維，放飛想象。
經典藍敦促著我們更加深入地思考，開闊視野，進行更加深入的交流?！?
——Leatrice Eiseman 潘通色彩研究所執行董事
從色彩心理學的角度上來看，藍色色相本身有著信任、信念的含義，也是的色相。在此之前，潘通曾經多次選擇藍色作為年度色， 2000 年的時候選擇天藍色（Cerulean），在 2005 年的時候則選擇了藍綠色（Blue Turquoise），2008 年的年度色叫鳶尾藍（Blue Iris），2016 年的年度色則是靜謐藍（Serenity）。
相比于這4種藍色，「經典藍」更為沉靜穩重，沒有一點攻擊性，也不顯得沉重，輕松而易于互動。
「經典藍」無疑是一個略顯保守，但是非常貼合當下語境的色彩。它充滿了確信感，讓人覺得安全，屏蔽了焦慮。同 2019 年充滿前進感的「活力珊瑚橙」相比，「經典藍」更加內斂和篤定，悄無聲息地增加每一個的信心。
除了發布這一年度色彩之外，潘通色彩研究所還專門制定了5套配色方案，這些配色方案應該會在接下來的 2020 年，得到更加廣泛的應用。
沉思
這是一套舒緩的配色方案，涼爽的藍色調和同樣柔和的暖色組合到一起，給人以沉靜的感覺。
呼吸
這套名為呼吸的配色方案當中，加入了更為經典的黑白色，選擇了對比更加強烈、更加富有活力的搭配方式。這樣的色彩搭配更容易喚起觀者的幸福感，讓你的設計更加具有田園牧歌的氣息。
沙漠暮色
「經典藍」的靈感來源之一就是夜幕降臨時的天空。而這套名為沙漠暮色的配色方案，就與此相關。充滿金屬質感的潘通色更能夠凸顯「沙漠」的閃亮質感，而恰為對比色的「經典藍」讓這套配色方案優雅無比。
異域風情
這套配色方案比起之前的配色更加豐富，更顯混搭，仿佛加入了天然的調味料。這種健康而自我的色彩搭配方式，讓人仿佛身在異域，不同于此地的文化，迥異與此時的感覺，獨特卻令人著迷。
非傳統
打破常規的桎梏，選擇異乎尋常的色彩搭配，而足夠傳統的「經典藍」恰恰構成了這種搭配方式當中，作為基礎的底色。這套配色方案指向時尚，突破規則，如同小品，有趣而俏皮。
為了更加方便線上的設計師來使用這些配色方案，優設的小編從官方提供的這些配色方案當中，精心挑選了 9 套適合進行數字設計的配色方案，并且標注上了相應的 HEX 值便于精準取色，請盡情取用：
轉自：站酷——hicatherine86
藍藍設計的小編 http://www.syprn.cn