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