最近遇到一個(gè)同學(xué)，說做了很多稿圖標(biāo)的方案最終還是沒有確定下來，但眼看著產(chǎn)品馬上就要上線了，該怎么辦。經(jīng)過一輪溝通，發(fā)現(xiàn)他陷入幾個(gè)新手設(shè)計(jì)師在畫圖標(biāo)比較容易犯的問題：
從以上這幾個(gè)問題，我們進(jìn)行深入思考，會發(fā)現(xiàn)其實(shí)這些只是表面上的問題，實(shí)際上是在說什么呢？
基于以上這個(gè)案例，分享下我在日常設(shè)計(jì)中常用的一些方法，希望可以幫助遇到相同問題的小伙伴們進(jìn)行一些答疑，從而幫助你們打破壁壘，高效成長。
下面發(fā)改分成 3 個(gè)部分來進(jìn)行闡述：思考維度的鍛煉；圖形的設(shè)計(jì)方法；系統(tǒng)化方案呈現(xiàn)
當(dāng)我們要設(shè)計(jì)一個(gè)圖標(biāo)的時(shí)候最容易入手的就是圖標(biāo)的表意，從表意延伸到圖形的設(shè)計(jì)，然后再加以不同的設(shè)計(jì)手法（線、面、線面等等）。
1. 圖標(biāo)的表意
圖標(biāo)的表意方式，大概可以拆分為以下幾種：具有普識性的圖標(biāo)、可進(jìn)行表意延伸的圖標(biāo)、通過組合的圖標(biāo)、抽象的需要關(guān)聯(lián)的圖標(biāo)。
2. 普識型圖標(biāo)
即我們在現(xiàn)實(shí)生活中常見且具有常識性性的圖標(biāo)，例如：刪除、添加、放大、搜索、筆記本、手機(jī)、眼睛、禮物等等。這類的圖標(biāo)重點(diǎn)在于形體的打磨上需要多花一些時(shí)間，從不同的角度進(jìn)行嘗試，比如以刪除為例子，同樣的造型但可以有不同的設(shè)計(jì)表現(xiàn)。
3. 表意延伸的圖標(biāo)
即一個(gè)事物可以被延伸為一個(gè)或者多個(gè)圖形表現(xiàn)的圖標(biāo)，例如：點(diǎn)贊、瀏覽、設(shè)置、收藏、評論、事件等等。例如點(diǎn)贊-延伸為你很棒用大拇指來表達(dá)，游戲延伸為游戲手柄、設(shè)置-延伸為機(jī)械操作用齒輪來表達(dá)，評論延伸為對話使用對話框來表達(dá)，瀏覽-延伸為用眼睛的圖標(biāo)表達(dá)。
除此之外延伸表意的圖標(biāo)可以有多種設(shè)計(jì)方式，例如以事件為案例。
4. 組合型圖標(biāo)
主要是指該類圖標(biāo)的表意需要通過 2 個(gè)以上的圖形進(jìn)行組合才能更加準(zhǔn)確進(jìn)行表現(xiàn)，例如：群、群聊、好友、添加聯(lián)系人、情侶、轉(zhuǎn)賬、紅包。
5. 創(chuàng)造類圖標(biāo)
特指認(rèn)識中沒有，因?yàn)楫a(chǎn)品需要被二次創(chuàng)造出來的圖標(biāo)，一般在一些新生業(yè)務(wù)中會常出現(xiàn)，這類圖標(biāo)初期往往需要伴隨文字一同出現(xiàn)。例如：微信的朋友圈、視頻號、小程序、手機(jī)系統(tǒng)的 Wi-Fi、藍(lán)牙等類型等圖標(biāo)。
常規(guī)的圖標(biāo)表現(xiàn)方法（線形、線面、面形、插圖、疊色等等）我們基本都了解，但作為設(shè)計(jì)師更應(yīng)該知道潮流趨勢，清楚現(xiàn)在流行什么類型的設(shè)計(jì)，這樣才能讓你作出更加出彩的設(shè)計(jì)。
這里分享幾種目前最流行的圖標(biāo)設(shè)計(jì)類型：
1. 磨砂質(zhì)感圖標(biāo)
磨砂質(zhì)感圖標(biāo)作為 2020 年底最流行的圖標(biāo)，已經(jīng)在不少 APP 中看得了相關(guān)的設(shè)計(jì)，從設(shè)計(jì)方法上并不難，重點(diǎn)還是在于是否有需要和應(yīng)用場景。
2. 插圖+磨砂質(zhì)感
圖標(biāo)使用小插圖的方式進(jìn)行繪制，然后再結(jié)合高斯模糊的視覺表現(xiàn)手法，整體讓圖標(biāo)更具有層次感和通透感。
3. 3D 質(zhì)感圖標(biāo)
3D 作為這 2 年最流行的設(shè)計(jì)趨勢，自然也牽動著設(shè)計(jì)師的心。但 3D 的打磨相對會比較耗費(fèi)時(shí)間，不過仍然是值得一試的設(shè)計(jì)方式之一，目前在 APP 的設(shè)計(jì)中比較少見到應(yīng)用，或許會成為 2021 的趨勢之一。
4. 3D 磨砂質(zhì)感圖標(biāo)
基于 3D 與毛玻璃圖標(biāo)的結(jié)合，整體的表現(xiàn)結(jié)合了這 2 種風(fēng)格的特點(diǎn)，既保留了毛玻璃圖標(biāo)的通透，同時(shí)也具有 3D 的空間感。
5. 流光溢彩的圖標(biāo)
算是屬于漸變類型的一種，但顏色和細(xì)節(jié)的跨度相比常規(guī)的漸變圖標(biāo)更加豐富，整體讓人感覺具有流光的效果，更加具有未來感。不過從目前來說，更適合作為獨(dú)立的應(yīng)用 APP 設(shè)計(jì)，作為常規(guī)的圖標(biāo)設(shè)計(jì)需要一定的接受度。
想要了解設(shè)計(jì)的方法之前，我們得了解有哪些類型的圖標(biāo)，具體大家可以查看我之前撰寫過的文章，里面有詳細(xì)的分析了圖標(biāo)的設(shè)計(jì)類型。除此之外，這里還可以分享下我日常中設(shè)計(jì)圖標(biāo)使用的方法。
這個(gè)專題也有超詳細(xì)的分類和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基礎(chǔ)形
基礎(chǔ)形體使用普適性較高的圖標(biāo)造型，在圖標(biāo)的亮點(diǎn)或者點(diǎn)綴處通過表意關(guān)聯(lián)進(jìn)行創(chuàng)意設(shè)計(jì)，從而讓圖標(biāo)獲得新的感受，但又具有較高的識別性。案例：例如我們以日歷圖標(biāo)為案例，可以比較直觀的使用日歷的普識圖形，然后通過日期的方式來進(jìn)行強(qiáng)調(diào)賦予圖標(biāo)生命力，然后再疊加上顏色和質(zhì)感，并且增加一點(diǎn)小趣味的折角設(shè)計(jì)。
2. 關(guān)聯(lián)延展
基于實(shí)際場景的認(rèn)識來進(jìn)行圖形關(guān)聯(lián)延展，并且進(jìn)行一定的美感升級及圖形的優(yōu)化，延展出最終的圖標(biāo)設(shè)計(jì)，這種方法可以大大提高大家對于圖標(biāo)的識別度。案例：設(shè)計(jì)一個(gè)快速聊天表意的圖標(biāo)，聊天我們常規(guī)使用氣泡，快速我們可以關(guān)聯(lián)為閃電，然后把氣泡和閃電進(jìn)行結(jié)合。
3. 組合升級創(chuàng)意
利用一些正負(fù)形的創(chuàng)意方法，使用 A、B 圖形的進(jìn)行有機(jī)融合或剪切，使其獲得新的圖標(biāo)造型，讓整體的圖標(biāo)感受更具有創(chuàng)意點(diǎn)。案例：例如我們嘗試畫一個(gè)具有宇宙感受的游戲圖標(biāo)，可以通過手柄和星球的有機(jī)結(jié)合讓整體的圖標(biāo)帶有游戲和星球的意思，整體提升了表達(dá)的創(chuàng)意。
方案的呈現(xiàn)屬于設(shè)計(jì)的一部分，雖然不能起到?jīng)Q定性的作用，但好的呈現(xiàn)效果往往可以幫助我們得到更好的印象分，這里分享一下我在設(shè)計(jì)過程中嘗試的一些方法。方案的大小或者輸出的類型也決定著我們呈現(xiàn)方案的類型，下面根據(jù)不同的類型分享不同的呈現(xiàn)案例。
1. 縱橫對比法
適用于需要大量嘗試的時(shí)候，以窮舉輸出為典型案例，我們可以用最基礎(chǔ)的圖形為中心點(diǎn)，結(jié)合圖形的表意和圖形風(fēng)格進(jìn)行縱橫的發(fā)散性擴(kuò)展，例如橫向?yàn)楸硪?、縱向?yàn)閳D形風(fēng)格，中間部分屬于交叉部分。
案例模版
2. 單個(gè)圖標(biāo)創(chuàng)意思考
對于一些標(biāo)志類或重要的圖標(biāo)，我們需要闡述我們的設(shè)計(jì)想法或者來源，這種呈現(xiàn)的方式就可以很直觀且簡潔的表現(xiàn)我們的思考。
案例模版
3. 整套輸出
對于一整套的圖標(biāo)，我們需要在案例上呈現(xiàn)圖形的設(shè)計(jì)規(guī)則，包括但不限于有：圓角、角度、組合規(guī)范、斜度等等。除了呈現(xiàn)圖形之外，請補(bǔ)充上顏色的應(yīng)用規(guī)則、顏色的表意等等。
案例模版
圖標(biāo)設(shè)計(jì)雖然是一個(gè)小內(nèi)容但卻很重要，反映著著整個(gè)頁面的精致度，在 UI 界面來說是除界面排版之外最重要的一環(huán)，因此是很值得我們?nèi)パ芯康脑O(shè)計(jì)之一，建議在日常工作中多練習(xí)多看。
文章來源：優(yōu)設(shè)網(wǎng) 作者：ID設(shè)計(jì)站
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖標(biāo)風(fēng)格匯總
圖標(biāo)設(shè)計(jì)流程
案例講解
圖標(biāo)資源輸出
線性
面型
線面
單色
雙色
漸變
不透明度
一筆成形
斷點(diǎn)
該風(fēng)格設(shè)計(jì)感和個(gè)性都極強(qiáng)，很考驗(yàn)設(shè)計(jì)師對造型繪制的把控，功底不夠就很容易導(dǎo)致設(shè)計(jì)后出現(xiàn)識別問題。所以設(shè)計(jì)難度較大，且延展性較弱，難以表達(dá)復(fù)雜語義，使用需謹(jǐn)慎。
單色
雙色
不透明度
晶白
磨砂玻璃
等軸側(cè)（2.5d）
漸變
新擬態(tài)
輕質(zhì)感
明暗質(zhì)感
寫實(shí)
抽象
卡通插畫
像素風(fēng)格
面型不透明度風(fēng)格，通過調(diào)節(jié)前后不透明度可以帶來較強(qiáng)的空間感，使用場景較廣泛。
晶白嚴(yán)格來說也算質(zhì)感圖標(biāo)（白色質(zhì)感）的一種，常見于品類圖標(biāo)設(shè)計(jì)，通過透明度、投影、漸變等參數(shù)調(diào)節(jié)，使整體立體感和空間感都很強(qiáng)。
又叫毛玻璃風(fēng)格，是通過背景模糊，或剪切模糊圖層的技法來表達(dá)通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對比度不足難以識別的問題，所以在使用中需要注意無障設(shè)計(jì)。
也叫2.5d，有很強(qiáng)的趣味性，及識別度，適合重要入口或運(yùn)營設(shè)計(jì)。但這類風(fēng)格較為卡通，且表現(xiàn)花哨。使用需要注意應(yīng)用場景及目標(biāo)人群年齡段，避免干擾信息閱讀和不符和產(chǎn)品風(fēng)格。
這類風(fēng)格可以很好的吸引用戶注意力，在電商、美食類產(chǎn)品中較常見，主要注意配色干凈協(xié)調(diào)。
新擬態(tài)圖標(biāo)色彩相對單一，與背景融合度較高，通過高光、投影表現(xiàn)一定的立體感。通常是整個(gè)產(chǎn)品就是新擬態(tài)風(fēng)格時(shí)才使用。所以該風(fēng)格局限性較大，再有這類風(fēng)格與背景對比較弱，無障設(shè)計(jì)問題較大。
通過大量漸變、投影來表現(xiàn)立體感，整體風(fēng)格偏年輕化，常見在教育類產(chǎn)品中，使用注意配色干凈和諧。
通過調(diào)節(jié)同一色相不同明度、飽和度來營造前后空間感，整體風(fēng)格統(tǒng)一。
這類圖標(biāo)特點(diǎn)很明顯，有極高的識別度，目前美團(tuán)外賣品類區(qū)入口就是該風(fēng)格，整體偏年輕化。主要考驗(yàn)設(shè)計(jì)師造型繪制、技法表現(xiàn)能力。
通過幾何圖形組合、色彩使用來表達(dá)美的視覺感受。這類圖標(biāo)藝術(shù)（裝飾）價(jià)值更大，不追求識別度，美觀即可。
這類風(fēng)格既可以做圖標(biāo)又可以做空狀態(tài)插圖，設(shè)計(jì)美觀有特色即可。
這類移動端界面較少見，目前只在一個(gè)海外電商產(chǎn)品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。
線面
描邊插畫
粗線
細(xì)線
圓角
直角
力量感、穩(wěn)重、男性等感受
安全、親和、年輕
由于圖標(biāo)風(fēng)格繁多，所以以上列舉并不包含所有圖標(biāo)風(fēng)格。
明確語義
關(guān)鍵詞詳解發(fā)散
確定風(fēng)格
提取造型
創(chuàng)意輸出
圖標(biāo)存在的目的是起引導(dǎo)作用，在豐富頁面視覺的同時(shí)，幫助用戶更快的獲取信息（當(dāng)然圖標(biāo)的使用意義還有很多）。設(shè)計(jì)師在將文字翻譯成圖標(biāo)前，必須先理解其文字含義。因?yàn)樽罱K呈現(xiàn)的圖標(biāo)，需要用戶一眼能準(zhǔn)確反翻譯其中含義（藝術(shù)抽象、裝飾類圖標(biāo)除外）。
在C端設(shè)計(jì)中，以Tab為例，一些常見文案：首頁、分類、發(fā)現(xiàn)、我的，這類語義還算比較清晰的。但在B端設(shè)計(jì)或工具類APP中就會遇到一些復(fù)雜語義。以我的工作來說，目前在做一款網(wǎng)站搭建工具，后臺常會需要設(shè)計(jì)組件及對應(yīng)的圖標(biāo)，比如：滑動商品、多圖列表、上拉圖文列表這些語義比較復(fù)雜的圖標(biāo)，在一定程度上會比較難精準(zhǔn)傳達(dá)文案。
這一步有點(diǎn)類似情緒版使用，但不同的是：我們需要將確定的詞（A)進(jìn)行詳細(xì)解釋，再將解釋文案中關(guān)鍵的詞語進(jìn)行發(fā)散，得出一系列相關(guān)聯(lián)的詞（A1、A2、A3…）。有時(shí)間還可以根據(jù)這些詞找到對應(yīng)的圖片，再看在這些相關(guān)聯(lián)的圖片中，有哪些細(xì)節(jié)可以傳遞最開始我們確定的那個(gè)詞（A）的意思。
我們可以借助情緒版，根據(jù)產(chǎn)品定位和目標(biāo)用戶描述，再結(jié)合應(yīng)用場景，在目前已有的風(fēng)格中找到符合產(chǎn)品氣質(zhì)，符合當(dāng)前模塊視覺層級的圖標(biāo)風(fēng)格。
前面我們已經(jīng)了解了目前常見的圖標(biāo)風(fēng)格有三大類：線性、面型、線面，其中還有很多細(xì)分，比如在線性中又分粗線（沉穩(wěn)、力量）、細(xì)線（品質(zhì)）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創(chuàng)意前期，我們將每個(gè)點(diǎn)合理進(jìn)行隨機(jī)組合（如下圖）即可創(chuàng)造一種更新穎的風(fēng)格。
經(jīng)過關(guān)鍵詞詳解發(fā)散，其實(shí)我們已經(jīng)獲得了很細(xì)節(jié)點(diǎn)，接下來將這些細(xì)節(jié)點(diǎn)進(jìn)行合理融合后，就可以得到代表同一語義但形式各異的基礎(chǔ)圖標(biāo)樣式（此時(shí)還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細(xì)化）。
圖標(biāo)設(shè)計(jì)規(guī)范
圖標(biāo)設(shè)計(jì)注意點(diǎn)
常見圖標(biāo)尺寸
圖標(biāo)盒子使用
在界面圖標(biāo)設(shè)計(jì)中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
圖標(biāo)盒子即圖標(biāo)約束網(wǎng)格，來源于Material design。使用圖標(biāo)盒子有利于使我們創(chuàng)造的系列圖標(biāo)保持規(guī)范與統(tǒng)一。
簡潔美觀
易于識別
細(xì)節(jié)統(tǒng)一
像素對齊
視覺大小一致
飽滿透氣
融入品牌基因
圖標(biāo)是否美觀，會受設(shè)計(jì)師對圖標(biāo)造型把控、圖標(biāo)構(gòu)成元素比例、配色等設(shè)計(jì)能力影響。在UI界面功能圖標(biāo)設(shè)計(jì)中，通常會盡量減少不必要的細(xì)節(jié)，降低圖標(biāo)復(fù)雜度，來幫助用戶快速識別。當(dāng)然圖標(biāo)也有豐富細(xì)節(jié)的做法，常見在一些重要運(yùn)營入口上。
識別度的問題，在最前面明確語義中就有提到過，這里就不贅述。
在細(xì)節(jié)中包含：表現(xiàn)風(fēng)格、描邊粗細(xì)、端點(diǎn)類型、圓角大小、斜角角度、配色、投影參數(shù)等（不同風(fēng)格圖標(biāo)的細(xì)節(jié)不同，這里只是列舉部分），上述細(xì)節(jié)在系列圖標(biāo)中都應(yīng)保持一致。
在圖標(biāo)繪制中，需盡量避免坐標(biāo)位置xy或?qū)捀邊?shù)出現(xiàn)小數(shù)點(diǎn)，以此保證最終導(dǎo)出的圖標(biāo)是清晰的。
由于不同圖標(biāo)外輪廓不同，就會導(dǎo)致哪怕在物理大小上相同的圖標(biāo)（假設(shè)都是24x24），但視覺上可能還是會給人大小不一致的感受，因此我們需要借助前面提到的圖標(biāo)盒子進(jìn)行約束調(diào)整。
圖標(biāo)的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細(xì)節(jié)。而是盡可能在形成風(fēng)格的同時(shí)，簡化能影響識別度的關(guān)鍵筆畫，通過調(diào)節(jié)筆畫大小、長短、位置使圖標(biāo)達(dá)到一個(gè)最平衡狀態(tài)。
以如下途牛_我的頁面_功能區(qū)圖標(biāo)為例：
圖中標(biāo)紅圖標(biāo)就存在飽滿度不足，及內(nèi)部較擁擠的情況，第一感受是看起來不舒適，品質(zhì)感比較低。除此外，還存在如下問題：
圖標(biāo)大小很明顯不一致
設(shè)計(jì)語言不統(tǒng)一，有圓角有直角
圖標(biāo)風(fēng)格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實(shí)心形式
在圖標(biāo)中融入品牌基因可以有效的提升產(chǎn)品品牌感，作為高階設(shè)計(jì)師必備技能之一，常見提取維度：
顏色
設(shè)計(jì)語言
以我之前的豆果美食項(xiàng)目為例，提取到如下細(xì)節(jié)：
根據(jù)提取到的基因，最終得到如下兩套風(fēng)格不同，但語言相同且都具備品牌感的圖標(biāo)。
Logo輪廓：在圖標(biāo)中融入品牌logo外輪廓（Google Play），或根據(jù)logo輪廓結(jié)合應(yīng)用特性進(jìn)行延展（Microsoft）。
根據(jù)文案進(jìn)行詳細(xì)翻譯，幫助我們充分理解文案。
釋義：有專門的知識或經(jīng)驗(yàn)，受聘為機(jī)關(guān)團(tuán)體或單獨(dú)個(gè)人提供專門咨詢的人。
提取釋義中關(guān)鍵信息，生成關(guān)鍵詞：專業(yè)、專人，再根據(jù)關(guān)鍵形容詞發(fā)散一系列具象名詞。
根據(jù)產(chǎn)品調(diào)性和模塊視覺層級以及考慮延展性，初步確定如下風(fēng)格組合起來是比較適合：
在實(shí)際查看中，發(fā)現(xiàn)Tab的風(fēng)格為單色+不透明度+斷點(diǎn)風(fēng)格。
為了和Tab拉開差異，最終確定以如下風(fēng)格進(jìn)行組合表現(xiàn)比較符合產(chǎn)品調(diào)性：
線性：雙色
面性：單色、雙色、不透明度、輕質(zhì)感、明暗質(zhì)感
線面：線面
通過手繪或大腦想象進(jìn)行造型構(gòu)思，這里我就不展示手繪過程（行吧，我承認(rèn)就是畫的太丑了不敢放）。
由于不同風(fēng)格對圖標(biāo)造型構(gòu)思有所影響，且圖標(biāo)類型很多，不同特點(diǎn)組合起來樣式更多。案例精力有限，所以只以線性雙色風(fēng)格做演示，希望大家靈活使用。
這一步就是將手繪圖形矢量化，在矢量化創(chuàng)意過程中，我們可能會對手繪的圖形進(jìn)一步簡化細(xì)節(jié)或新增造型，這都很正常。只需注意在整個(gè)繪制過程中遵循圖標(biāo)設(shè)計(jì)規(guī)范，以及注意圖標(biāo)設(shè)計(jì)注意事項(xiàng)即可。
圖標(biāo)盒子使用
創(chuàng)意輸出
Tips：
1or2？
最后對專屬客服進(jìn)行多風(fēng)格嘗試，最終效果如下：
附上部分繪制過程中的淘汰稿：
SVG：縮放無損、體積小、支持前端樣式修改參數(shù)、單色情況下方便前端修改顏色來表達(dá)圖標(biāo)狀態(tài)，減少重復(fù)上傳。
PNG：支持透明格式
JPG：兼容性強(qiáng)，適合大尺寸高飽和度圖像
GIF：動態(tài)圖標(biāo)使用，缺點(diǎn)是透明情況下邊緣容易出現(xiàn)鋸齒。
這里主要介紹靜態(tài)圖標(biāo)中，svg格式在工作中如何輸出給前端同學(xué)使用（借助iconfont）。
1、圖標(biāo)資源優(yōu)化
在iconfont官方繪制指南中有描述，在導(dǎo)出前需要按如下規(guī)則優(yōu)化圖標(biāo)資源：
2、選中圖標(biāo)導(dǎo)出svg格式
以Figma為例，優(yōu)化圖標(biāo)資源后，選中圖標(biāo)將輸出格式選擇為導(dǎo)出svg。
3、上傳iconfont
在資源管理下，選擇需要上傳的位置。
去除顏色并提交：適合單色圖標(biāo)，去除顏色提交可以方便前端使用代碼修改參數(shù)，減少不同狀態(tài)圖標(biāo)重復(fù)上傳。
保存顏色并提交：適合多色圖標(biāo)（注意：在單色情況下，選擇保留顏色提交，前端則無法通過代碼修改圖標(biāo)顏色）。
最后當(dāng)我們把圖標(biāo)都上傳好后，就可以將前端同學(xué)拉入團(tuán)隊(duì)項(xiàng)目中開心進(jìn)行玩耍。
文章來源：站酷 作者：幺零三
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每天努力的用心的去做設(shè)計(jì)，挺開心的，其中最開心的細(xì)節(jié)就是“思考自己的設(shè)計(jì)如何與別人的不一樣”，讓你的差異化產(chǎn)出得到認(rèn)可后，這將是一件非常非常幸福的事情。
今天和大家分享一個(gè)前一陣子做的小案例，做的一個(gè)直播貨幣，名字叫星幣。
思考過程如下：
其實(shí)“星幣”可發(fā)散的空間很小，因?yàn)橐呀?jīng)非常具象了，無非就是星星、和錢幣。
我們可以看下大概的感覺：
但是如果按照上面的感覺做，那最后出來的效果一定很常規(guī)，這也就有了我接下來的思考。
我們仔細(xì)觀察，一般參考中的星星都是非常規(guī)矩的，無非就是尖角圓角的區(qū)別：
要么就是胖瘦的區(qū)別：
所以這次我打算做一個(gè)不那么規(guī)矩的，有點(diǎn)跳遠(yuǎn)的感覺、又有點(diǎn)星火的感覺，所以我把星星的一個(gè)腳拉長：
然后再把兩個(gè)胳膊往上抬一抬：
這樣就好像是一個(gè)跳躍的小人一樣，會相對來說活潑一些。
接下來為了讓整體更加和諧，我在錢幣周邊挖了一個(gè)小口：
目的就是配合那只伸出來的腳，讓整體感覺更加巧妙一點(diǎn)。
其實(shí)星幣很容易聯(lián)想到金黃色，如果按照這個(gè)設(shè)想來做，那就會比較普通，所以我選擇讓他和直播、社區(qū)的配色一致：
這樣在顏色方面也就有點(diǎn)自己的調(diào)性了。
剛才不是說讓這個(gè)星星看起來像個(gè)跳躍的小人嘛，那一般人都有表情的，所以我們完全可以再加上一個(gè)可愛的表情：
讓整體更加生動形象。
當(dāng)然，如果星幣在面積小的場景下是看不清表情的，所以需要做成兩種，一種是有表情的， 一種是沒有表情的。最后，還可以再做個(gè)有質(zhì)感的：
后來發(fā)現(xiàn)質(zhì)感做的有點(diǎn)臟，于是又優(yōu)化了一下質(zhì)感，效果如下：
整個(gè)構(gòu)思和執(zhí)行的過程還是可以的的，也得到了大家的認(rèn)可，不過很可惜的是，后來名字改了，改成了能量幣，哈哈哈哈，通過能量，我又聯(lián)想到了太陽，太陽能嘛，執(zhí)行原理都是一樣的，大概效果如下：
文章來源：優(yōu)設(shè)網(wǎng) 作者：菜心設(shè)計(jì)鋪
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天這個(gè)需求是直播間 pk 后，主播勝利與失敗的兩個(gè)狀態(tài)設(shè)計(jì)，過程經(jīng)歷了很多次修改，現(xiàn)在來分享一下自己的感受。
其實(shí)最開始我有點(diǎn)天真了，以為這種狀態(tài)直接畫個(gè)圈圈，寫個(gè)勝、敗兩個(gè)字，然后做下顏色區(qū)分就完事了：
但這根本行不通，看起來像是未完成的交互稿，一點(diǎn)設(shè)計(jì)感都沒有。
于是我開始思考如何增加設(shè)計(jì)感了。
如何增加設(shè)計(jì)感？
其實(shí)無非就是給這個(gè)狀態(tài)增加細(xì)節(jié)唄，尤其是這個(gè)勝利的狀態(tài)，我想到麥穗、翅膀等元素，最后選用了翅膀的元素，繪制了一個(gè)樣例如下：
但被說到這個(gè)結(jié)構(gòu)是亂畫的，哈哈，一下戳到了我的痛點(diǎn)，確實(shí)是胡亂畫的，各種圓圈沒什么邏輯。
于是后來仔細(xì)思考了一下，把圓圈分為三層：
效果如下：
然后最中間放主形象，兩邊放翅膀，頂部放皇冠，最終效果如下：
這樣整體看起來結(jié)構(gòu)就是清晰的。
我們可以看下結(jié)構(gòu)清晰和不清晰的對比：
后面因?yàn)檎w調(diào)性需要可愛一點(diǎn)，所以把翅膀改成了比較圓潤的造型：
效果還算不錯(cuò)。
其實(shí)這個(gè)點(diǎn)是我經(jīng)常和大家強(qiáng)調(diào)的，但有時(shí)候確實(shí)是當(dāng)局者迷，自己也容易犯這樣的錯(cuò)，比如最開始的那個(gè)效果，很明顯中間暗部和周邊亮部沒有拉開層次：
所以在后面的取色上，會把中間暗部做的很深，形成鮮明對比：
這樣層次才會更加明顯，不然就會糊在一起。
最開始本來想用圓形來做失敗的狀態(tài)，但是后來發(fā)現(xiàn)有點(diǎn)太慘淡了，于是想著還是加點(diǎn)細(xì)節(jié)吧，怎么加呢？
這時(shí)候是需求方那邊給的一點(diǎn)靈感，說失敗不就是很頹的樣子，就拿把翅膀下沉和勝利形成反差不就可以了，我感覺說的挺有道理，于是就嘗試做了下：
確實(shí)還可以。
本來想著勝利用紫色、失敗用藍(lán)綠色：
但是發(fā)現(xiàn)藍(lán)綠色多少還是會有點(diǎn)分散“勝利”的注意力，于是就在思考，失敗是表達(dá)一種負(fù)向的情緒，那是不是可以用灰一點(diǎn)的顏色？
于是嘗試了幾個(gè)不一樣的灰度：
最后選擇最后最后那個(gè)幾乎接近灰色的版本，干脆一點(diǎn)，對比強(qiáng)烈一點(diǎn)。
我們看下最終效果：
再看下過程稿吧：
調(diào)整了很對次，過程還是挺值得記錄的，回頭一看，很有成就感！
以上就是這個(gè)小需求過程中總結(jié)的一些知識點(diǎn)，后面還會加入一些微動效，增加氛圍感。
希望可以給大家一點(diǎn)靈感和啟發(fā)。
文章來源：優(yōu)設(shè)網(wǎng) 作者：菜心設(shè)計(jì)鋪
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天和大家聊一聊設(shè)計(jì)細(xì)節(jié)，每個(gè)提到的細(xì)節(jié)你們都能直接拿走，并且在項(xiàng)目中使用。
這個(gè)頁面相信大家平時(shí)工作中都會做到，有很多圖標(biāo)放在一起，里面可能是一些常用菜單，這個(gè)設(shè)計(jì)有什么問題呢？相信看在這里的小伙伴，腦海里有無數(shù)答案？不統(tǒng)一，還是什么？我們來分析下。
首先從大家關(guān)心的統(tǒng)一性來說，沒有任何問題，圖形都是在規(guī)范的圖標(biāo)柵格里面，也非常的統(tǒng)一，那么問題出在哪里？
仔細(xì)觀察，我們會發(fā)現(xiàn)「聯(lián)系人」和「歷史消息」的圖標(biāo)過于飽滿，雖然他們尺寸一樣，但是比「最近使用」這個(gè)圖標(biāo)要大很多，原因是什么呢？因?yàn)楹竺孢@兩個(gè)圖標(biāo)從視覺來說他們的重量太重了，所以看起來會比較大。
所以今天我們在做設(shè)計(jì)時(shí)候，如遇圖標(biāo)瘦長或者圓形等不夠飽滿的情況，請酌情將圖標(biāo)撐滿像素，來保證整體一致的視覺體量感。
如果圖標(biāo)較飽滿的情況下，可使用微縮，來保證整體一致的視覺體量感。我們文中案例之所以出現(xiàn)這種情況，是因?yàn)闆]有定義出圖形體量大小具體的繪制規(guī)則，所以導(dǎo)致圖形過于飽滿，看起來會顯得視覺重量不一致。
所以我們第一步，對圖形繪制規(guī)則進(jìn)行優(yōu)化，保證圖形在頁面中體感一致，我提供了 4 個(gè)基礎(chǔ)圖形繪制技巧和對應(yīng)的輔助線參考圖。
所以在實(shí)際應(yīng)用時(shí)，可略微在可變范圍內(nèi)微調(diào)，對于過于飽滿的圖形，高度變低時(shí)，需要增加寬度來保證視覺重量相等。
這樣調(diào)整后，整體的圖標(biāo)視覺重量就會更加均衡，也會更加規(guī)則。所以，今天如果你發(fā)現(xiàn)你們產(chǎn)品頁面中圖標(biāo)大小體量不一樣，或許是因?yàn)槟阃泴D標(biāo)體量進(jìn)行規(guī)范。
圖標(biāo)我們在界面中使用場景很多，很多時(shí)候用大圖標(biāo)，有時(shí)候用小圖標(biāo)，我們該如何去定義小圖標(biāo)大小，大圖標(biāo)大小，這是很多同學(xué)非常糾結(jié)的。有時(shí)候就亂定，導(dǎo)致頁面沒有秩序感。
第一步，我們要先去梳理頁面場景，看看哪些地方會用到圖標(biāo)，把全部場景列出來。
列出來后，我們根據(jù)你 APP 設(shè)計(jì)的最小單元的倍數(shù)來定義圖標(biāo)風(fēng)格，比如支付寶最小單元是 4，所有間距都是 4 的倍數(shù)，那么在圖標(biāo)這里，也是同樣的原則，全部的圖標(biāo)尺寸，我們根據(jù) 4 的倍數(shù)去定義幾種大小，比如 24X24，32X32，44X44，56X56，72X72 等等，如果頁面中不夠用，同樣的在 4 的倍數(shù)基礎(chǔ)上進(jìn)行新增。
我相信大家都有這種情況，一組圖標(biāo)在使用時(shí)候，會出現(xiàn)在各個(gè)場景，這個(gè)時(shí)候需要放大，甚至縮小，但是不知道放大后圖標(biāo)粗細(xì)該如何確定，直接放大，直接縮小會出現(xiàn)圖標(biāo)的細(xì)節(jié)粗細(xì)有問題，那么這種時(shí)候該如何處理？
直接放大縮小，圖標(biāo)粗細(xì)沒有任何說法，而且會顯得比例非常奇怪，如何去解決這個(gè)問題？
第一步：我們需要確定圖標(biāo)大小和線條比例，以支付寶為例，首先要確定圖標(biāo)大小和線條粗細(xì)比例為 14：1。當(dāng)然每個(gè)比例是不一樣的，你可以根據(jù)你們產(chǎn)品的調(diào)性去決定，如果你圖標(biāo)比較細(xì)，你可以設(shè)定為 10：1，這些都沒有固定標(biāo)準(zhǔn)。
這樣的話，假如你圖標(biāo)需要設(shè)計(jì)一個(gè) 140X140 的大小，那么你的圖標(biāo)粗細(xì)就應(yīng)該是 10px。
如果你圖標(biāo)是 112 尺寸大小，那么按照 14：1 的比例，那么你圖標(biāo)線條粗細(xì)就應(yīng)該是 8px，以此推動，通過這樣的方式來保證圖形的一致性和穩(wěn)定性。
以上三個(gè)小點(diǎn)，是絕大多設(shè)計(jì)師忽略掉的，也是設(shè)計(jì)中不太注意的細(xì)節(jié)，但是設(shè)計(jì)的專業(yè)程度往往就是由這些細(xì)節(jié)組成，今天這 3 個(gè)技巧，看會了之后，你就可以直接在項(xiàng)目中去運(yùn)用。
文章來源：優(yōu)設(shè)網(wǎng) 作者：我們的設(shè)計(jì)日記
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
不知道大家有沒有被說過，設(shè)計(jì)做的不精致？拿圖標(biāo)舉例，其實(shí)不精致的原因就是統(tǒng)一性沒做好。我們總說做圖標(biāo)要統(tǒng)一，但是到底要統(tǒng)一哪些要素？有沒有一個(gè)完整的自檢表呢？以前我總結(jié)了 5 到 6 個(gè)要統(tǒng)一的要素，最近觀察大家的練習(xí)之后，直接擴(kuò)增到 9 個(gè)了，今天就以線形圖標(biāo)為例，看看我們需要統(tǒng)一哪 9 個(gè)要素。
大綱如下：
這個(gè)很容易理解，就是一組圖標(biāo)看起來大小是一致的。但是最近發(fā)現(xiàn)了一個(gè)比較重要的點(diǎn)，就是很多同學(xué)做一組練習(xí)，相鄰的圖標(biāo)都差不太多，但是隔的比較遠(yuǎn)的圖標(biāo)放在一起就差很多了，比如下面這幾個(gè)圖標(biāo)，就是逐漸變大的：
所以對于大小統(tǒng)一，我們必須要做到，一組圖標(biāo)里，任意兩個(gè)圖標(biāo)拿出來都是大小統(tǒng)一的，否則就是不及格。
保持大小統(tǒng)一的方法見這篇 – 圖標(biāo)設(shè)計(jì)規(guī)范。
圓角統(tǒng)一也是比較好理解的點(diǎn)，無非就是圓角大小，像下面這兩個(gè)圖標(biāo)：
如果圓角差很多，你很容易發(fā)現(xiàn)，因?yàn)槎际遣畈欢啻笮〉木匦危俏覀兒苋菀缀雎砸恍┘?xì)節(jié)，比如下面第一個(gè)圖標(biāo)的三角形，和旁邊的日歷相比，就過于尖銳：
這是圖標(biāo)里面很細(xì)的細(xì)節(jié)，所以容易被忽視，大家一定要重視。
語言統(tǒng)一你可以理解為設(shè)計(jì)風(fēng)格統(tǒng)一，如果一組圖標(biāo)里面出現(xiàn)了多種風(fēng)格，那會顯得非常不專業(yè)。
比如下面這組練習(xí)：
大體看好像是一種語言，但仔細(xì)觀察其實(shí)還是有很多細(xì)節(jié)不統(tǒng)一的，比如外輪廓上面有的有白色，有的沒有，白色還分帶描邊和不帶描邊：
這就是在語言上不統(tǒng)一的案例，大家在做練習(xí)的時(shí)候，一定要想清楚你的語言是什么。
粗細(xì)統(tǒng)一就不用說了吧，基本就是用在線性圖標(biāo)線條粗的，比如像這種比較明顯的粗細(xì)不一致，就不應(yīng)該出現(xiàn)了：
這都是最最基礎(chǔ)的問題。
疏密統(tǒng)一其實(shí)是很多新人朋友容易犯的錯(cuò)，比如下面這一組圖標(biāo)：
大部分地方是比較透氣疏松的，但是只有第二個(gè)比較密集，這樣就會讓人感覺比較突兀，整體不夠和諧。這就是疏密程度的統(tǒng)一性，一定要把握住節(jié)奏感，否則就會不舒服。
這個(gè)點(diǎn)一般用在斷線圖標(biāo)上，也就是你開口大小的統(tǒng)一性，比如一個(gè)開很大，一個(gè)開很?。?
那就證明細(xì)節(jié)沒有做到位。
比例可以分很多種，比如顏色比例，像下面這個(gè)原作的顏色比例就沒有太統(tǒng)一：
在小 y 優(yōu)化臨摹之后，達(dá)到了顏色比例的平衡：
再比如之前說的一個(gè)案例，粗細(xì)線條的比例：
在這樣不統(tǒng)一的情況下，圖標(biāo)是一定不會精致的。這些都是比例統(tǒng)一問題出現(xiàn)的實(shí)際場景。
正負(fù)形也是沒那么容易看出來的，舉個(gè)例子，下面這組周楠做的圖標(biāo)，乍一看沒什么問題，但是仔細(xì)一觀察，其實(shí)我們會發(fā)現(xiàn)，白色面積的重量其實(shí)是不統(tǒng)一的，那個(gè)消息上面的“#”會偏重一點(diǎn)：
當(dāng)優(yōu)化之后，我們再看：
整體就會比之前統(tǒng)一精致很多。
角度，也是增加圖標(biāo)統(tǒng)一感的因素之一，最常見的角度統(tǒng)一方式就是按照一定的倍數(shù)來制定規(guī)范，比如 30 度的倍數(shù)：
再舉一個(gè)角度其他方面的例子，在做下面這組圖標(biāo)的時(shí)候，最初沒有考慮斷線的規(guī)律：
所以看久了會覺得有些凌亂，于是我將斷線處定為右下角 45 度，如遇到圓角拐角處，可挪動靠近拐角處進(jìn)行斷線：
這樣我們就會看到所有的圖標(biāo)斷線位置都大致出現(xiàn)在右下角的地方，最終效果如下：
很大程度上提高了圖標(biāo)的統(tǒng)一性，并且在延展執(zhí)行的時(shí)候節(jié)省了大量的思考時(shí)間（思考在哪里斷）。
但是對于斷線的位置是否一定要規(guī)定其出現(xiàn)的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統(tǒng)一和諧，且延展性高。
以上就是目前總結(jié)的 9 個(gè)需要統(tǒng)一的點(diǎn)，只要能把所有的統(tǒng)一性做好，精致一定是沒問題的。
文章來源：優(yōu)設(shè)網(wǎng) 作者：菜心設(shè)計(jì)鋪
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
這篇文章主要分享怎么做一套毛玻璃擬態(tài)圖標(biāo)，以及在這基礎(chǔ)上如何發(fā)散創(chuàng)意。帶著這個(gè)想法，我開始逛“避寒寺”和“追波”，找可以參考的作品。這套作品我挺喜歡的，作者還做出了 3D 視角的。
先分析一下圖標(biāo)的結(jié)構(gòu)。圖標(biāo)有三層：底部幾何色塊、毛玻璃主造型，帶有含義的白色圖形。
再分析俯視角度時(shí)圖標(biāo)的表現(xiàn)，方便用工具表現(xiàn)。
最后是顏色的歸納。作者用了飽和度非常高的顏色，基本都在右上角最尖尖的位置。
分析完以后可以開始臨摹了…因?yàn)樵煨捅容^簡單，我沒有臨摹，直接創(chuàng)意發(fā)散做了另一套。選主題的時(shí)候我隨便開了個(gè) APP（當(dāng)時(shí)打開的是微博），覺得個(gè)人中心的快捷入口圖標(biāo)主題可以拿來試試。我選了深色作為背景，所以這套圖標(biāo)用到界面會比較難適配，和原 APP 風(fēng)格也不符合。在這里單純利用主題來做練習(xí)。
做底部的幾何色塊時(shí)，形狀可以盡量跟主圖形相關(guān)性大一些，加強(qiáng)它們之間的關(guān)聯(lián)性，如果實(shí)在沒法關(guān)聯(lián)的也不必勉強(qiáng)。
我降低了幾何色塊的面積，增加了多一層毛玻璃形狀層，并且讓白色的圖形更靈活，而不是雕刻在毛玻璃層上。這是我理解了原作者圖標(biāo)的結(jié)構(gòu)之后，自己進(jìn)行的改變，效果還行。
做的過程中，發(fā)現(xiàn)草稿箱如果里面放一張白色的卡紙，視覺效果還不錯(cuò)，所以我又做了另一種效果。最終呈現(xiàn)出來的效果只有草稿箱比較出彩，其它很牽強(qiáng)。
拿「照片」這個(gè)圖標(biāo)來進(jìn)行拆分，參數(shù)分別如下：
這是最后呈現(xiàn)的效果：
封面圖參考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做會更逼真吧。
臨摹一套圖標(biāo)的時(shí)候，要帶著目的去臨摹，分析原作者每一步的處理。然后把圖標(biāo)拆分成不同的變量，修改這些變量的時(shí)候或許會得到不錯(cuò)的想法。
文章來源：優(yōu)設(shè)網(wǎng) 作者：牙線y2x
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
文章主路徑如下：
這組圖標(biāo)非常有活力和創(chuàng)意，色彩很活潑，原作者是菜心。我也常用微漸變來做圖標(biāo)，但是沒有嘗試過加上描邊，并且這種強(qiáng)烈的對比色也在我習(xí)慣用色外。臨摹這組圖標(biāo)可以突破我的用色習(xí)慣。
我們先逐步拆分，再進(jìn)行總結(jié)。
第一步，分析原作品的結(jié)構(gòu)。
圖標(biāo)可以拆分為線、面和小元素。我在 sketch 做的，形狀的線面轉(zhuǎn)換比較簡單。線跟面的圖層要分開，因?yàn)槊鎴D層帶有反光，而線圖層沒有。
第二步，確定光源的方向。
從作者的表現(xiàn)來看，光源在左上角，因此所有的圖標(biāo)應(yīng)該遵循同一光源方向的原則。光源的表現(xiàn)會因?yàn)椴馁|(zhì)的不同而不同。比如「LIKE 燈牌」帶有自發(fā)光、「鈴鐺」帶有高光。所有物體的反光比受光面要亮一點(diǎn)，讓人感覺很通透。
第三步，分析原作的顏色。
不要吸色，先自己調(diào)色。剛開始會有點(diǎn)難，但是這種練習(xí)會幫助我們提高眼睛辨色的能力，提高色感。對比自己和原作的顏色，發(fā)現(xiàn)我調(diào)色不夠準(zhǔn)確，沒有做到不同顏色飽和度一致，漸變色跳躍比較大。這表示我還沒有理解原作的用色，后續(xù)臨摹的時(shí)候需要修正。
第四步，總結(jié)作者的設(shè)計(jì)語言。
分析完以后開始臨摹。
先說一下體量感的問題，因?yàn)橛泻芏?/span>設(shè)計(jì)師在做圖標(biāo)的時(shí)候會忽略這一點(diǎn)。常見的方法是拿圖標(biāo)框來限定，但是問題又來了，有的人限定得太死板，不會根據(jù)實(shí)際情況來微調(diào)。針對這種情況，可以拿別人的整套圖標(biāo)作品做反推，在臨摹的時(shí)候，留意別人對體量感的把握。
定義了大概的體量之后，我會觀察圖標(biāo)大致的形狀和角度，憑印象先把造型做出來。過程中沒有把原作品放在旁邊，最多在忘記的時(shí)候去看一眼。這樣做的好處是，可以發(fā)現(xiàn)自己觀察的時(shí)候漏了什么（這個(gè)方法是跟菜心學(xué)的）。下圖就是第一次臨摹的草稿，orz…鈴鐺最不好畫了。
拿著草稿來對比原圖，把自己錯(cuò)漏的地方找出來。
統(tǒng)計(jì)錯(cuò)漏的地方，重新調(diào)整圖標(biāo)，達(dá)到 90%以上的相似度后，給圖標(biāo)上色。
做完這一步后，大概理解了作者做這套圖標(biāo)時(shí)的邏輯以及方法。我們可以開始做半原創(chuàng)的設(shè)計(jì)，在原作的基礎(chǔ)上延展幾個(gè)圖標(biāo)。我選擇電商主題的「充值、簽到 、賺錢、砍價(jià)」這四個(gè)圖標(biāo)來做。
我們先找參考素材。不管畫圖標(biāo)、做界面，還是畫插畫，學(xué)會找參考非常重要。參考不是照抄，而是給我們提供靈感來源，切記不要憑空想象。有一天，團(tuán)隊(duì)的設(shè)計(jì)師跟我說她不會畫衣服的褶皺，畫起來總是怪怪的。我叫她上網(wǎng)找相似衣服的圖片，看一下別人的褶皺和光影，她就茅塞頓開了。因?yàn)樗偸怯谩霸瓌?chuàng)”局限自己，沒有找實(shí)物參考。
原創(chuàng)絕不是憑空想象，而是有源設(shè)計(jì)的融合。
結(jié)合作者的設(shè)計(jì)語言做延展圖標(biāo)，放在原作里面也不違和的話，就成功一大半啦。
接下來是原創(chuàng)時(shí)間～我們將作者的設(shè)計(jì)語言其中一些變量改變，會得出不同的結(jié)果。
文章來源：優(yōu)設(shè)網(wǎng) 作者：牙線y2x
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在 UI 的設(shè)計(jì)體系中，圖標(biāo)是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計(jì)的必備條件。
網(wǎng)上現(xiàn)存不少關(guān)于圖標(biāo)繪制的文章和教學(xué)，但不是太籠統(tǒng)，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認(rèn)知中對它有比較全面、系統(tǒng)的認(rèn)識，所以大多數(shù)初級的 UI設(shè)計(jì)師，始終畫不好圖標(biāo)。
針對這個(gè)問題，我希望用一篇長文來講清楚圖標(biāo)設(shè)計(jì)的所有要點(diǎn)和具體的設(shè)計(jì)方法，讓所有設(shè)計(jì)新人更快地上手圖標(biāo)設(shè)計(jì)。
本文共分為5個(gè)部分：
圖標(biāo)，是一種圖形化的標(biāo)識，它有廣義和狹義兩種概念，廣義指的是所有現(xiàn)實(shí)中有明確指向含義的圖形符號，狹義主要指在計(jì)算機(jī)設(shè)備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI設(shè)計(jì)師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關(guān)鍵元素之一。
在當(dāng)下最常見的扁平化設(shè)計(jì)風(fēng)格中，界面的實(shí)際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標(biāo)。
△ 由圖片、文字、幾何、圖標(biāo)組成的界面
可以說，圖片、文字、幾何圖形的運(yùn)用，都只用到排版的技巧，而圖標(biāo)，是 UI設(shè)計(jì)中除了插畫元素以外唯一需要我們「繪制」、「創(chuàng)作」的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好的設(shè)計(jì)圖標(biāo)？
△ Clear APP 的截圖
這就涉及圖標(biāo)作用的探討了，為了節(jié)約篇幅，更快進(jìn)入大家最想看的重點(diǎn)干貨，我就不長篇大論從上古時(shí)期人類與圖形符號的糾葛開始寫了，就談對于圖形界面本身，為什么圖標(biāo)有這么重要的地位，沒它不行？
有兩個(gè)原因，第一文字雖然也是一種圖形符號，但相對于圖標(biāo)而言，文字實(shí)在太復(fù)雜了，在識別效率上有先天的劣勢。再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標(biāo)可以以一種更高效的方式，將我們想要傳遞的信息進(jìn)行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
△ 應(yīng)用文字替換了圖標(biāo)的對比
第二點(diǎn)，就是關(guān)于視覺的觀賞性。有些頁面中，如果把圖標(biāo)去掉了，也絲毫不會影響我們的操作效率，以及對內(nèi)容的理解。但沒有圖標(biāo)，缺少這些點(diǎn)綴，我們就會覺得這個(gè)頁面看起來太枯燥了，不得勁，最好的例子就是應(yīng)用的設(shè)置頁了，見下方案例。
△ 設(shè)置頁有圖標(biāo)和沒有圖標(biāo)的對比
既然知道了圖標(biāo)的作用和重要性，那么接下來，就要進(jìn)一步了解在工作中我們要設(shè)計(jì)哪些圖標(biāo)。
可以先劃分成三種大類：
下面，我們將對它們分別進(jìn)行介紹，以及展示相關(guān)的設(shè)計(jì)類型，方便讀者在開始學(xué)習(xí)具體設(shè)計(jì)前，對 UI設(shè)計(jì)會創(chuàng)作的圖標(biāo)有更全面的認(rèn)識。
首先，我們要說的是工具圖標(biāo)。這是我們在日常討論中提及最頻繁的圖標(biāo)類型，即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識。作為最常見的圖標(biāo)類型，我們就不需要做太多的說明了。
△ 常見的工具圖標(biāo)
雖然理解起來容易，但是它所包含的設(shè)計(jì)樣式卻并不少，可以把它們歸納成線性、面性兩個(gè)大類，再分別進(jìn)行細(xì)分。
1. 風(fēng)格1：線性風(fēng)格
線性圖標(biāo)，即圖形是通過線條的描邊輪廓勾勒出來的。多數(shù)人對它樣式認(rèn)識的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓，比如上圖案例，線性圖標(biāo)的創(chuàng)作空間看似不多，但實(shí)際上有非常多的調(diào)整空間。
下面我們把它們羅列出來。
△ 線性風(fēng)格的工具圖標(biāo)
2. 風(fēng)格2：面性風(fēng)格
面性圖標(biāo)，即使用對內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣，在這類圖標(biāo)中，也不是只能應(yīng)用純色的方式進(jìn)行填充，還有非常多的視覺表現(xiàn)類型。
△ 面性風(fēng)格的工具圖標(biāo)
3. 風(fēng)格3：混合風(fēng)格
當(dāng)然，在設(shè)計(jì)圖標(biāo)類型的時(shí)候，也不一定非線性和面性不可，有一些熱衷創(chuàng)造和嘗試的設(shè)計(jì)師，還創(chuàng)作出了混合型的圖標(biāo)，既有線性描邊的輪廓，又有色彩填充的區(qū)域。常見的樣式類型如下：
△ 混合風(fēng)格的工具圖標(biāo)
和工具圖標(biāo)比起來，裝飾圖標(biāo)的視覺性作用更多。對于一些比較復(fù)雜的應(yīng)用來說，過分的簡約并不能彌補(bǔ)信息過多的信噪問題，我們要通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，減少一屏內(nèi)顯示內(nèi)容的數(shù)量。
比如在分類列表里，是可以只使用線框和文字把大量內(nèi)容濃縮到一屏以內(nèi)，但實(shí)際瀏覽效率并不會增加，而且并不美觀。
△ 裝飾圖標(biāo)在識別性上的作用
還有就是國內(nèi)的界面設(shè)計(jì)環(huán)境，會根據(jù)運(yùn)營需求設(shè)計(jì)進(jìn)行特殊化處理，尤其在電商領(lǐng)域，首屏的圖標(biāo)都會改成首頁風(fēng)格的樣式，增加活動氛圍。
△ 節(jié)日活動中的裝飾圖標(biāo)
裝飾性的圖標(biāo)設(shè)計(jì)，雖然沒有明確的規(guī)范該怎么做，效果怎么好怎么來，但最常見的類型有四種，下面分別進(jìn)行介紹。
1. 扁平風(fēng)格
扁平風(fēng)格的裝飾圖標(biāo)，通?？梢岳斫獬墒怯帽馄讲瀹嫷姆绞疆嫵鰜淼膱D標(biāo)，除了繼承扁平的純色填充特性以外，也比普通圖標(biāo)有更豐富的細(xì)節(jié)與趣味性。
△ 扁平風(fēng)格的裝飾圖標(biāo)
2. 擬物風(fēng)格
擬物風(fēng)格的圖標(biāo)現(xiàn)在出現(xiàn)的頻率越來越高，集中在大型的運(yùn)營活動中，通常這些活動會通過擬物的方式將頭部設(shè)計(jì)成有故事性的場景，所以自然頂部的相關(guān)圖標(biāo)使用擬物的設(shè)計(jì)形式會更貼合。
△ 擬物風(fēng)格的裝飾圖標(biāo)
3. 2.5D風(fēng)格
2.5D是一種偏卡通、像素畫風(fēng)格的扁平設(shè)計(jì)類型，在一些非必要的設(shè)計(jì)環(huán)境中，使用2.5D會比較容易搭配主流的界面設(shè)計(jì)風(fēng)格，有更強(qiáng)的趣味性和層次感。
△ 2.5D風(fēng)格的裝飾圖標(biāo)
4. 炫彩漸變
這是一個(gè)拗口的原創(chuàng)名詞，找不到更合適的形容，還是覺得浮夸點(diǎn)符合它的氣質(zhì)。這種圖標(biāo)，就是通過一系列非常激進(jìn)的漸變和撞色實(shí)現(xiàn)，通常還會使用彩色的陰影。
使用這樣圖標(biāo)的區(qū)域，通常都會呈現(xiàn)出一副五彩斑斕的景象，只有在內(nèi)容非常豐富且用戶偏向年輕化的產(chǎn)品中可以使用，是一種非常難駕馭的設(shè)計(jì)風(fēng)格。
△ 炫彩漸變風(fēng)格的裝飾圖標(biāo)
5. 實(shí)物貼圖
最后一種，就是采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來的，但想想還是放進(jìn)來合適。因?yàn)檫@種圖標(biāo)的出現(xiàn)頻率非常高，有必要在后面掌握它的做法。
△ 應(yīng)用攝影實(shí)物的裝飾圖標(biāo)
最后，就要說說啟動圖標(biāo)了。啟動圖標(biāo)的設(shè)計(jì)比前面兩種類型的圖標(biāo)說起來更難，因?yàn)樗鼘?shí)際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。
除了掌握必要的規(guī)范以外，啟動圖標(biāo)的主體物設(shè)計(jì)就是 LOGO 的設(shè)計(jì)，已經(jīng)超出了圖標(biāo)繪制本身的知識點(diǎn)。所以，在后面我會針對這個(gè)問題講解一些比較套路易懂的設(shè)計(jì)方案供新手學(xué)習(xí)，這里我們先來了解一下它有哪幾種設(shè)計(jì)形式。
1. 文字形式
使用了文字作為圖標(biāo)主體物的類型，通常是這類應(yīng)用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
△ 文字類的啟動圖標(biāo)
2. 圖標(biāo)形式
對于一些偏工具，適合用簡單圖形傳達(dá)應(yīng)用功能的啟動圖標(biāo)，就會采取使用工具圖標(biāo)的方式設(shè)計(jì)。
△ 圖標(biāo)類的啟動圖標(biāo)
3. 圖形圖標(biāo)
圖形形式看起來和圖標(biāo)形式很接近，但實(shí)際上完全不屬于同一類型，之所以它不是圖標(biāo)，是因?yàn)檫@類圖標(biāo)的主體圖形是一種經(jīng)過高度抽象化的標(biāo)識，傳達(dá)的是品牌性，而不是圖形的含義。
△ 圖形類的啟動圖標(biāo)
4. 插畫形式
對于一些比較純粹的應(yīng)用，如讀本、漫畫、幼兒類應(yīng)用，就熱衷于采用卡通形象作為圖標(biāo)的主體進(jìn)行設(shè)計(jì)。
△ 插畫類的啟動圖標(biāo)
5. 擬物形式
雖然現(xiàn)在扁平化的設(shè)計(jì)占據(jù)主導(dǎo)地位，但依舊有很多應(yīng)用的啟動圖標(biāo)是通過擬物的方式設(shè)計(jì)的。因?yàn)閷τ谶@些應(yīng)用來說，擬物設(shè)計(jì)所傳遞的信息往往更直觀和準(zhǔn)確。
△ 擬物類的啟動圖標(biāo)
當(dāng)然，還有其它的數(shù)之不盡的啟動圖標(biāo)設(shè)計(jì)方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了。
前面介紹的三種圖標(biāo)，就是今后在進(jìn)入 UI 行業(yè)設(shè)計(jì)的內(nèi)容。雖然圖標(biāo)看起來簡單，但可以玩出的花樣不少。除了正確設(shè)計(jì)出圖標(biāo)以外，高低階的 UI設(shè)計(jì)師之間的區(qū)別也包含圖標(biāo)設(shè)計(jì)類型掌握的多寡。
所以，在開始學(xué)習(xí)前，不要將設(shè)計(jì)圖標(biāo)的目標(biāo)局限在最簡單的圖形繪制上，還有很多有趣的設(shè)計(jì)形式等待你們?nèi)L試。
了解了圖標(biāo)的類型，就要開始了解做出這些圖標(biāo)應(yīng)該使用哪些軟件了。通常，UI 主要使用的設(shè)計(jì)軟件包含 PS、AI、Sketch、XD四款，理論上，它們都包含了圖標(biāo)繪制的功能，如果我直接告訴大家去精通這4款軟件那么畫圖標(biāo)就一點(diǎn)難度都沒有了，這是非常不負(fù)責(zé)任的，所以為了對新人更友好一點(diǎn)（如果已經(jīng)全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標(biāo)設(shè)計(jì)的優(yōu)劣，以及需要掌握的部分。
1. Sketch / XD
這兩款軟件是我們設(shè)計(jì) UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創(chuàng)作和繪圖。
雖然它們都包含路徑、鋼筆、布爾運(yùn)算等功能（Sketch 相對 XD 更完善一點(diǎn)），想要繪制一些非?；A(chǔ)的線性或面性圖標(biāo)時(shí)沒有問題，但只要涉及到比較復(fù)雜的圖形，往往就束手無策。
所以，我建議所有學(xué)習(xí) UI 的新人，都不要從這兩個(gè)軟件中入手，而是先掌握 PS 和 AI，后面想要快速實(shí)現(xiàn)一些簡單的圖標(biāo)時(shí)，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應(yīng)用決定了我們圖標(biāo)設(shè)計(jì)的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款無論什么東西都設(shè)計(jì)得出來的設(shè)計(jì)軟件，但是，它本質(zhì)上是一款「位圖軟件」。后續(xù)的文章中會提及，在界面中采用矢量格式的圖標(biāo)是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復(fù)制到其它軟件中。
實(shí)際項(xiàng)目中，我們會用 PS 設(shè)計(jì)一些視覺表現(xiàn)相對復(fù)雜的圖標(biāo)，例如啟動圖標(biāo)、擬物圖標(biāo)、實(shí)物圖標(biāo)等等。
繪制圖標(biāo)需要用到的 PS 功能并不太多，需要在前期學(xué)習(xí)這個(gè)軟件的過程中加以篩選，重點(diǎn)是以下知識點(diǎn)：
雖然 PS 在實(shí)際項(xiàng)目中是用來畫復(fù)雜的圖標(biāo)，但并不妨礙我們使用 PS 從最基礎(chǔ)的圖標(biāo)開始畫起，因?yàn)橄胍炀氄莆丈戏降闹R點(diǎn)，簡易的工具圖標(biāo)是最好的磨刀石，之后再學(xué)習(xí) AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 設(shè)計(jì)必學(xué)的一款軟件，它的功能異常豐富，主要用來設(shè)計(jì)矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細(xì)節(jié)的調(diào)整上，是最全面最細(xì)膩的軟件，并且 AI 中的圖形還可以直接復(fù)制粘貼到其它應(yīng)用的畫布中。
如果掌握了上方提及的 PS 基礎(chǔ)，那么學(xué)習(xí) AI 也就輕松了不少，其中，AI 設(shè)計(jì)圖標(biāo)中有三個(gè)特殊的功能是需要重點(diǎn)掌握和學(xué)習(xí)的：
花幾個(gè)晚上，掌握了 PS 和 AI 的相關(guān)知識點(diǎn)以后，就為我們后續(xù)的學(xué)習(xí)提供了技術(shù)支持，可以進(jìn)入下一階段了。
這是圖標(biāo)系列文章的第一篇，信息量不算少。所以我們在結(jié)尾再總結(jié)一次，方便大家記憶。
文章來源：優(yōu)設(shè)網(wǎng) 作者：超人的電話亭
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
文章來源：藍(lán)藍(lán)設(shè)計(jì) 作者：張藝仁
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn