今天和大家聊一聊設(shè)計細(xì)節(jié)，每個提到的細(xì)節(jié)你們都能直接拿走，并且在項目中使用。
這個頁面相信大家平時工作中都會做到，有很多圖標(biāo)放在一起，里面可能是一些常用菜單，這個設(shè)計有什么問題呢？相信看在這里的小伙伴，腦海里有無數(shù)答案？不統(tǒng)一，還是什么？我們來分析下。
首先從大家關(guān)心的統(tǒng)一性來說，沒有任何問題，圖形都是在規(guī)范的圖標(biāo)柵格里面，也非常的統(tǒng)一，那么問題出在哪里？
仔細(xì)觀察，我們會發(fā)現(xiàn)「聯(lián)系人」和「歷史消息」的圖標(biāo)過于飽滿，雖然他們尺寸一樣，但是比「最近使用」這個圖標(biāo)要大很多，原因是什么呢？因為后面這兩個圖標(biāo)從視覺來說他們的重量太重了，所以看起來會比較大。
所以今天我們在做設(shè)計時候，如遇圖標(biāo)瘦長或者圓形等不夠飽滿的情況，請酌情將圖標(biāo)撐滿像素，來保證整體一致的視覺體量感。
如果圖標(biāo)較飽滿的情況下，可使用微縮，來保證整體一致的視覺體量感。我們文中案例之所以出現(xiàn)這種情況，是因為沒有定義出圖形體量大小具體的繪制規(guī)則，所以導(dǎo)致圖形過于飽滿，看起來會顯得視覺重量不一致。
所以我們第一步，對圖形繪制規(guī)則進(jìn)行優(yōu)化，保證圖形在頁面中體感一致，我提供了 4 個基礎(chǔ)圖形繪制技巧和對應(yīng)的輔助線參考圖。
所以在實際應(yīng)用時，可略微在可變范圍內(nèi)微調(diào)，對于過于飽滿的圖形，高度變低時，需要增加寬度來保證視覺重量相等。
這樣調(diào)整后，整體的圖標(biāo)視覺重量就會更加均衡，也會更加規(guī)則。所以，今天如果你發(fā)現(xiàn)你們產(chǎn)品頁面中圖標(biāo)大小體量不一樣，或許是因為你忘記對圖標(biāo)體量進(jìn)行規(guī)范。
圖標(biāo)我們在界面中使用場景很多，很多時候用大圖標(biāo)，有時候用小圖標(biāo)，我們該如何去定義小圖標(biāo)大小，大圖標(biāo)大小，這是很多同學(xué)非常糾結(jié)的。有時候就亂定，導(dǎo)致頁面沒有秩序感。
第一步，我們要先去梳理頁面場景，看看哪些地方會用到圖標(biāo)，把全部場景列出來。
列出來后，我們根據(jù)你 APP 設(shè)計的最小單元的倍數(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)在使用時候，會出現(xiàn)在各個場景，這個時候需要放大，甚至縮小，但是不知道放大后圖標(biāo)粗細(xì)該如何確定，直接放大，直接縮小會出現(xiàn)圖標(biāo)的細(xì)節(jié)粗細(xì)有問題，那么這種時候該如何處理？
直接放大縮小，圖標(biāo)粗細(xì)沒有任何說法，而且會顯得比例非常奇怪，如何去解決這個問題？
第一步：我們需要確定圖標(biāo)大小和線條比例，以支付寶為例，首先要確定圖標(biāo)大小和線條粗細(xì)比例為 14：1。當(dāng)然每個比例是不一樣的，你可以根據(jù)你們產(chǎn)品的調(diào)性去決定，如果你圖標(biāo)比較細(xì)，你可以設(shè)定為 10：1，這些都沒有固定標(biāo)準(zhǔn)。
這樣的話，假如你圖標(biāo)需要設(shè)計一個 140X140 的大小，那么你的圖標(biāo)粗細(xì)就應(yīng)該是 10px。
如果你圖標(biāo)是 112 尺寸大小，那么按照 14：1 的比例，那么你圖標(biāo)線條粗細(xì)就應(yīng)該是 8px，以此推動，通過這樣的方式來保證圖形的一致性和穩(wěn)定性。
以上三個小點，是絕大多設(shè)計師忽略掉的，也是設(shè)計中不太注意的細(xì)節(jié)，但是設(shè)計的專業(yè)程度往往就是由這些細(xì)節(jié)組成，今天這 3 個技巧，看會了之后，你就可以直接在項目中去運用。
文章來源：優(yōu)設(shè)網(wǎng) 作者：我們的設(shè)計日記
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
不知道大家有沒有被說過，設(shè)計做的不精致？拿圖標(biāo)舉例，其實不精致的原因就是統(tǒng)一性沒做好。我們總說做圖標(biāo)要統(tǒng)一，但是到底要統(tǒng)一哪些要素？有沒有一個完整的自檢表呢？以前我總結(jié)了 5 到 6 個要統(tǒng)一的要素，最近觀察大家的練習(xí)之后，直接擴增到 9 個了，今天就以線形圖標(biāo)為例，看看我們需要統(tǒng)一哪 9 個要素。
大綱如下：
這個很容易理解，就是一組圖標(biāo)看起來大小是一致的。但是最近發(fā)現(xiàn)了一個比較重要的點，就是很多同學(xué)做一組練習(xí)，相鄰的圖標(biāo)都差不太多，但是隔的比較遠(yuǎn)的圖標(biāo)放在一起就差很多了，比如下面這幾個圖標(biāo)，就是逐漸變大的：
所以對于大小統(tǒng)一，我們必須要做到，一組圖標(biāo)里，任意兩個圖標(biāo)拿出來都是大小統(tǒng)一的，否則就是不及格。
保持大小統(tǒng)一的方法見這篇 – 圖標(biāo)設(shè)計規(guī)范。
圓角統(tǒng)一也是比較好理解的點，無非就是圓角大小，像下面這兩個圖標(biāo)：
如果圓角差很多，你很容易發(fā)現(xiàn)，因為都是差不多大小的矩形，但是我們很容易忽略一些細(xì)節(jié)，比如下面第一個圖標(biāo)的三角形，和旁邊的日歷相比，就過于尖銳：
這是圖標(biāo)里面很細(xì)的細(xì)節(jié)，所以容易被忽視，大家一定要重視。
語言統(tǒng)一你可以理解為設(shè)計風(fēng)格統(tǒng)一，如果一組圖標(biāo)里面出現(xiàn)了多種風(fēng)格，那會顯得非常不專業(yè)。
比如下面這組練習(xí)：
大體看好像是一種語言，但仔細(xì)觀察其實還是有很多細(xì)節(jié)不統(tǒng)一的，比如外輪廓上面有的有白色，有的沒有，白色還分帶描邊和不帶描邊：
這就是在語言上不統(tǒng)一的案例，大家在做練習(xí)的時候，一定要想清楚你的語言是什么。
粗細(xì)統(tǒng)一就不用說了吧，基本就是用在線性圖標(biāo)線條粗的，比如像這種比較明顯的粗細(xì)不一致，就不應(yīng)該出現(xiàn)了：
這都是最最基礎(chǔ)的問題。
疏密統(tǒng)一其實是很多新人朋友容易犯的錯，比如下面這一組圖標(biāo)：
大部分地方是比較透氣疏松的，但是只有第二個比較密集，這樣就會讓人感覺比較突兀，整體不夠和諧。這就是疏密程度的統(tǒng)一性，一定要把握住節(jié)奏感，否則就會不舒服。
這個點一般用在斷線圖標(biāo)上，也就是你開口大小的統(tǒng)一性，比如一個開很大，一個開很?。?
那就證明細(xì)節(jié)沒有做到位。
比例可以分很多種，比如顏色比例，像下面這個原作的顏色比例就沒有太統(tǒng)一：
在小 y 優(yōu)化臨摹之后，達(dá)到了顏色比例的平衡：
再比如之前說的一個案例，粗細(xì)線條的比例：
在這樣不統(tǒng)一的情況下，圖標(biāo)是一定不會精致的。這些都是比例統(tǒng)一問題出現(xiàn)的實際場景。
正負(fù)形也是沒那么容易看出來的，舉個例子，下面這組周楠做的圖標(biāo)，乍一看沒什么問題，但是仔細(xì)一觀察，其實我們會發(fā)現(xiàn)，白色面積的重量其實是不統(tǒng)一的，那個消息上面的“#”會偏重一點：
當(dāng)優(yōu)化之后，我們再看：
整體就會比之前統(tǒng)一精致很多。
角度，也是增加圖標(biāo)統(tǒng)一感的因素之一，最常見的角度統(tǒng)一方式就是按照一定的倍數(shù)來制定規(guī)范，比如 30 度的倍數(shù)：
再舉一個角度其他方面的例子，在做下面這組圖標(biāo)的時候，最初沒有考慮斷線的規(guī)律：
所以看久了會覺得有些凌亂，于是我將斷線處定為右下角 45 度，如遇到圓角拐角處，可挪動靠近拐角處進(jìn)行斷線：
這樣我們就會看到所有的圖標(biāo)斷線位置都大致出現(xiàn)在右下角的地方，最終效果如下：
很大程度上提高了圖標(biāo)的統(tǒng)一性，并且在延展執(zhí)行的時候節(jié)省了大量的思考時間（思考在哪里斷）。
但是對于斷線的位置是否一定要規(guī)定其出現(xiàn)的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統(tǒng)一和諧，且延展性高。
以上就是目前總結(jié)的 9 個需要統(tǒng)一的點，只要能把所有的統(tǒng)一性做好，精致一定是沒問題的。
文章來源：優(yōu)設(shè)網(wǎng) 作者：菜心設(shè)計鋪
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
這篇文章主要分享怎么做一套毛玻璃擬態(tài)圖標(biāo)，以及在這基礎(chǔ)上如何發(fā)散創(chuàng)意。帶著這個想法，我開始逛“避寒寺”和“追波”，找可以參考的作品。這套作品我挺喜歡的，作者還做出了 3D 視角的。
先分析一下圖標(biāo)的結(jié)構(gòu)。圖標(biāo)有三層：底部幾何色塊、毛玻璃主造型，帶有含義的白色圖形。
再分析俯視角度時圖標(biāo)的表現(xiàn)，方便用工具表現(xiàn)。
最后是顏色的歸納。作者用了飽和度非常高的顏色，基本都在右上角最尖尖的位置。
分析完以后可以開始臨摹了…因為造型比較簡單，我沒有臨摹，直接創(chuàng)意發(fā)散做了另一套。選主題的時候我隨便開了個 APP（當(dāng)時打開的是微博），覺得個人中心的快捷入口圖標(biāo)主題可以拿來試試。我選了深色作為背景，所以這套圖標(biāo)用到界面會比較難適配，和原 APP 風(fēng)格也不符合。在這里單純利用主題來做練習(xí)。
做底部的幾何色塊時，形狀可以盡量跟主圖形相關(guān)性大一些，加強它們之間的關(guān)聯(lián)性，如果實在沒法關(guān)聯(lián)的也不必勉強。
我降低了幾何色塊的面積，增加了多一層毛玻璃形狀層，并且讓白色的圖形更靈活，而不是雕刻在毛玻璃層上。這是我理解了原作者圖標(biāo)的結(jié)構(gòu)之后，自己進(jìn)行的改變，效果還行。
做的過程中，發(fā)現(xiàn)草稿箱如果里面放一張白色的卡紙，視覺效果還不錯，所以我又做了另一種效果。最終呈現(xiàn)出來的效果只有草稿箱比較出彩，其它很牽強。
拿「照片」這個圖標(biāo)來進(jìn)行拆分，參數(shù)分別如下：
這是最后呈現(xiàn)的效果：
封面圖參考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做會更逼真吧。
臨摹一套圖標(biāo)的時候，要帶著目的去臨摹，分析原作者每一步的處理。然后把圖標(biāo)拆分成不同的變量，修改這些變量的時候或許會得到不錯的想法。
文章來源：優(yōu)設(shè)網(wǎng) 作者：牙線y2x
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文章主路徑如下：
這組圖標(biāo)非常有活力和創(chuàng)意，色彩很活潑，原作者是菜心。我也常用微漸變來做圖標(biāo)，但是沒有嘗試過加上描邊，并且這種強烈的對比色也在我習(xí)慣用色外。臨摹這組圖標(biāo)可以突破我的用色習(xí)慣。
我們先逐步拆分，再進(jìn)行總結(jié)。
第一步，分析原作品的結(jié)構(gòu)。
圖標(biāo)可以拆分為線、面和小元素。我在 sketch 做的，形狀的線面轉(zhuǎn)換比較簡單。線跟面的圖層要分開，因為面圖層帶有反光，而線圖層沒有。
第二步，確定光源的方向。
從作者的表現(xiàn)來看，光源在左上角，因此所有的圖標(biāo)應(yīng)該遵循同一光源方向的原則。光源的表現(xiàn)會因為材質(zhì)的不同而不同。比如「LIKE 燈牌」帶有自發(fā)光、「鈴鐺」帶有高光。所有物體的反光比受光面要亮一點，讓人感覺很通透。
第三步，分析原作的顏色。
不要吸色，先自己調(diào)色。剛開始會有點難，但是這種練習(xí)會幫助我們提高眼睛辨色的能力，提高色感。對比自己和原作的顏色，發(fā)現(xiàn)我調(diào)色不夠準(zhǔn)確，沒有做到不同顏色飽和度一致，漸變色跳躍比較大。這表示我還沒有理解原作的用色，后續(xù)臨摹的時候需要修正。
第四步，總結(jié)作者的設(shè)計語言。
分析完以后開始臨摹。
先說一下體量感的問題，因為有很多設(shè)計師在做圖標(biāo)的時候會忽略這一點。常見的方法是拿圖標(biāo)框來限定，但是問題又來了，有的人限定得太死板，不會根據(jù)實際情況來微調(diào)。針對這種情況，可以拿別人的整套圖標(biāo)作品做反推，在臨摹的時候，留意別人對體量感的把握。
定義了大概的體量之后，我會觀察圖標(biāo)大致的形狀和角度，憑印象先把造型做出來。過程中沒有把原作品放在旁邊，最多在忘記的時候去看一眼。這樣做的好處是，可以發(fā)現(xiàn)自己觀察的時候漏了什么（這個方法是跟菜心學(xué)的）。下圖就是第一次臨摹的草稿，orz…鈴鐺最不好畫了。
拿著草稿來對比原圖，把自己錯漏的地方找出來。
統(tǒng)計錯漏的地方，重新調(diào)整圖標(biāo)，達(dá)到 90%以上的相似度后，給圖標(biāo)上色。
做完這一步后，大概理解了作者做這套圖標(biāo)時的邏輯以及方法。我們可以開始做半原創(chuàng)的設(shè)計，在原作的基礎(chǔ)上延展幾個圖標(biāo)。我選擇電商主題的「充值、簽到 、賺錢、砍價」這四個圖標(biāo)來做。
我們先找參考素材。不管畫圖標(biāo)、做界面，還是畫插畫，學(xué)會找參考非常重要。參考不是照抄，而是給我們提供靈感來源，切記不要憑空想象。有一天，團(tuán)隊的設(shè)計師跟我說她不會畫衣服的褶皺，畫起來總是怪怪的。我叫她上網(wǎng)找相似衣服的圖片，看一下別人的褶皺和光影，她就茅塞頓開了。因為她總是用“原創(chuàng)”局限自己，沒有找實物參考。
原創(chuàng)絕不是憑空想象，而是有源設(shè)計的融合。
結(jié)合作者的設(shè)計語言做延展圖標(biāo)，放在原作里面也不違和的話，就成功一大半啦。
接下來是原創(chuàng)時間～我們將作者的設(shè)計語言其中一些變量改變，會得出不同的結(jié)果。
文章來源：優(yōu)設(shè)網(wǎng) 作者：牙線y2x
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在 UI 的設(shè)計體系中，圖標(biāo)是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門 UI設(shè)計的必備條件。
網(wǎng)上現(xiàn)存不少關(guān)于圖標(biāo)繪制的文章和教學(xué)，但不是太籠統(tǒng)，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認(rèn)知中對它有比較全面、系統(tǒng)的認(rèn)識，所以大多數(shù)初級的 UI設(shè)計師，始終畫不好圖標(biāo)。
針對這個問題，我希望用一篇長文來講清楚圖標(biāo)設(shè)計的所有要點和具體的設(shè)計方法，讓所有設(shè)計新人更快地上手圖標(biāo)設(shè)計。
本文共分為5個部分：
圖標(biāo)，是一種圖形化的標(biāo)識，它有廣義和狹義兩種概念，廣義指的是所有現(xiàn)實中有明確指向含義的圖形符號，狹義主要指在計算機設(shè)備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI設(shè)計師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關(guān)鍵元素之一。
在當(dāng)下最常見的扁平化設(shè)計風(fēng)格中，界面的實際視覺組成只有4種元素，圖片、文字、幾何圖形、圖標(biāo)。
△ 由圖片、文字、幾何、圖標(biāo)組成的界面
可以說，圖片、文字、幾何圖形的運用，都只用到排版的技巧，而圖標(biāo)，是 UI設(shè)計中除了插畫元素以外唯一需要我們「繪制」、「創(chuàng)作」的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好的設(shè)計圖標(biāo)？
△ Clear APP 的截圖
這就涉及圖標(biāo)作用的探討了，為了節(jié)約篇幅，更快進(jìn)入大家最想看的重點干貨，我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了，就談對于圖形界面本身，為什么圖標(biāo)有這么重要的地位，沒它不行？
有兩個原因，第一文字雖然也是一種圖形符號，但相對于圖標(biāo)而言，文字實在太復(fù)雜了，在識別效率上有先天的劣勢。再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標(biāo)可以以一種更高效的方式，將我們想要傳遞的信息進(jìn)行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
△ 應(yīng)用文字替換了圖標(biāo)的對比
第二點，就是關(guān)于視覺的觀賞性。有些頁面中，如果把圖標(biāo)去掉了，也絲毫不會影響我們的操作效率，以及對內(nèi)容的理解。但沒有圖標(biāo)，缺少這些點綴，我們就會覺得這個頁面看起來太枯燥了，不得勁，最好的例子就是應(yīng)用的設(shè)置頁了，見下方案例。
△ 設(shè)置頁有圖標(biāo)和沒有圖標(biāo)的對比
既然知道了圖標(biāo)的作用和重要性，那么接下來，就要進(jìn)一步了解在工作中我們要設(shè)計哪些圖標(biāo)。
可以先劃分成三種大類：
下面，我們將對它們分別進(jìn)行介紹，以及展示相關(guān)的設(shè)計類型，方便讀者在開始學(xué)習(xí)具體設(shè)計前，對 UI設(shè)計會創(chuàng)作的圖標(biāo)有更全面的認(rèn)識。
首先，我們要說的是工具圖標(biāo)。這是我們在日常討論中提及最頻繁的圖標(biāo)類型，即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識。作為最常見的圖標(biāo)類型，我們就不需要做太多的說明了。
△ 常見的工具圖標(biāo)
雖然理解起來容易，但是它所包含的設(shè)計樣式卻并不少，可以把它們歸納成線性、面性兩個大類，再分別進(jìn)行細(xì)分。
1. 風(fēng)格1：線性風(fēng)格
線性圖標(biāo)，即圖形是通過線條的描邊輪廓勾勒出來的。多數(shù)人對它樣式認(rèn)識的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓，比如上圖案例，線性圖標(biāo)的創(chuàng)作空間看似不多，但實際上有非常多的調(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è)計圖標(biāo)類型的時候，也不一定非線性和面性不可，有一些熱衷創(chuàng)造和嘗試的設(shè)計師，還創(chuàng)作出了混合型的圖標(biāo)，既有線性描邊的輪廓，又有色彩填充的區(qū)域。常見的樣式類型如下：
△ 混合風(fēng)格的工具圖標(biāo)
和工具圖標(biāo)比起來，裝飾圖標(biāo)的視覺性作用更多。對于一些比較復(fù)雜的應(yīng)用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內(nèi)容的觀賞性，減少一屏內(nèi)顯示內(nèi)容的數(shù)量。
比如在分類列表里，是可以只使用線框和文字把大量內(nèi)容濃縮到一屏以內(nèi)，但實際瀏覽效率并不會增加，而且并不美觀。
△ 裝飾圖標(biāo)在識別性上的作用
還有就是國內(nèi)的界面設(shè)計環(huán)境，會根據(jù)運營需求設(shè)計進(jìn)行特殊化處理，尤其在電商領(lǐng)域，首屏的圖標(biāo)都會改成首頁風(fēng)格的樣式，增加活動氛圍。
△ 節(jié)日活動中的裝飾圖標(biāo)
裝飾性的圖標(biāo)設(shè)計，雖然沒有明確的規(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)的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設(shè)計成有故事性的場景，所以自然頂部的相關(guān)圖標(biāo)使用擬物的設(shè)計形式會更貼合。
△ 擬物風(fēng)格的裝飾圖標(biāo)
3. 2.5D風(fēng)格
2.5D是一種偏卡通、像素畫風(fēng)格的扁平設(shè)計類型，在一些非必要的設(shè)計環(huán)境中，使用2.5D會比較容易搭配主流的界面設(shè)計風(fēng)格，有更強的趣味性和層次感。
△ 2.5D風(fēng)格的裝飾圖標(biāo)
4. 炫彩漸變
這是一個拗口的原創(chuàng)名詞，找不到更合適的形容，還是覺得浮夸點符合它的氣質(zhì)。這種圖標(biāo)，就是通過一系列非常激進(jìn)的漸變和撞色實現(xiàn)，通常還會使用彩色的陰影。
使用這樣圖標(biāo)的區(qū)域，通常都會呈現(xiàn)出一副五彩斑斕的景象，只有在內(nèi)容非常豐富且用戶偏向年輕化的產(chǎn)品中可以使用，是一種非常難駕馭的設(shè)計風(fēng)格。
△ 炫彩漸變風(fēng)格的裝飾圖標(biāo)
5. 實物貼圖
最后一種，就是采用了真實攝影物體的設(shè)計風(fēng)格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來的，但想想還是放進(jìn)來合適。因為這種圖標(biāo)的出現(xiàn)頻率非常高，有必要在后面掌握它的做法。
△ 應(yīng)用攝影實物的裝飾圖標(biāo)
最后，就要說說啟動圖標(biāo)了。啟動圖標(biāo)的設(shè)計比前面兩種類型的圖標(biāo)說起來更難，因為它實際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。
除了掌握必要的規(guī)范以外，啟動圖標(biāo)的主體物設(shè)計就是 LOGO 的設(shè)計，已經(jīng)超出了圖標(biāo)繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設(shè)計方案供新手學(xué)習(xí)，這里我們先來了解一下它有哪幾種設(shè)計形式。
1. 文字形式
使用了文字作為圖標(biāo)主體物的類型，通常是這類應(yīng)用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
△ 文字類的啟動圖標(biāo)
2. 圖標(biāo)形式
對于一些偏工具，適合用簡單圖形傳達(dá)應(yīng)用功能的啟動圖標(biāo)，就會采取使用工具圖標(biāo)的方式設(shè)計。
△ 圖標(biāo)類的啟動圖標(biāo)
3. 圖形圖標(biāo)
圖形形式看起來和圖標(biāo)形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標(biāo)，是因為這類圖標(biāo)的主體圖形是一種經(jīng)過高度抽象化的標(biāo)識，傳達(dá)的是品牌性，而不是圖形的含義。
△ 圖形類的啟動圖標(biāo)
4. 插畫形式
對于一些比較純粹的應(yīng)用，如讀本、漫畫、幼兒類應(yīng)用，就熱衷于采用卡通形象作為圖標(biāo)的主體進(jìn)行設(shè)計。
△ 插畫類的啟動圖標(biāo)
5. 擬物形式
雖然現(xiàn)在扁平化的設(shè)計占據(jù)主導(dǎo)地位，但依舊有很多應(yīng)用的啟動圖標(biāo)是通過擬物的方式設(shè)計的。因為對于這些應(yīng)用來說，擬物設(shè)計所傳遞的信息往往更直觀和準(zhǔn)確。
△ 擬物類的啟動圖標(biāo)
當(dāng)然，還有其它的數(shù)之不盡的啟動圖標(biāo)設(shè)計方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了。
前面介紹的三種圖標(biāo)，就是今后在進(jìn)入 UI 行業(yè)設(shè)計的內(nèi)容。雖然圖標(biāo)看起來簡單，但可以玩出的花樣不少。除了正確設(shè)計出圖標(biāo)以外，高低階的 UI設(shè)計師之間的區(qū)別也包含圖標(biāo)設(shè)計類型掌握的多寡。
所以，在開始學(xué)習(xí)前，不要將設(shè)計圖標(biāo)的目標(biāo)局限在最簡單的圖形繪制上，還有很多有趣的設(shè)計形式等待你們?nèi)L試。
了解了圖標(biāo)的類型，就要開始了解做出這些圖標(biāo)應(yīng)該使用哪些軟件了。通常，UI 主要使用的設(shè)計軟件包含 PS、AI、Sketch、XD四款，理論上，它們都包含了圖標(biāo)繪制的功能，如果我直接告訴大家去精通這4款軟件那么畫圖標(biāo)就一點難度都沒有了，這是非常不負(fù)責(zé)任的，所以為了對新人更友好一點（如果已經(jīng)全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標(biāo)設(shè)計的優(yōu)劣，以及需要掌握的部分。
1. Sketch / XD
這兩款軟件是我們設(shè)計 UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創(chuàng)作和繪圖。
雖然它們都包含路徑、鋼筆、布爾運算等功能（Sketch 相對 XD 更完善一點），想要繪制一些非?；A(chǔ)的線性或面性圖標(biāo)時沒有問題，但只要涉及到比較復(fù)雜的圖形，往往就束手無策。
所以，我建議所有學(xué)習(xí) UI 的新人，都不要從這兩個軟件中入手，而是先掌握 PS 和 AI，后面想要快速實現(xiàn)一些簡單的圖標(biāo)時，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應(yīng)用決定了我們圖標(biāo)設(shè)計的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款無論什么東西都設(shè)計得出來的設(shè)計軟件，但是，它本質(zhì)上是一款「位圖軟件」。后續(xù)的文章中會提及，在界面中采用矢量格式的圖標(biāo)是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復(fù)制到其它軟件中。
實際項目中，我們會用 PS 設(shè)計一些視覺表現(xiàn)相對復(fù)雜的圖標(biāo)，例如啟動圖標(biāo)、擬物圖標(biāo)、實物圖標(biāo)等等。
繪制圖標(biāo)需要用到的 PS 功能并不太多，需要在前期學(xué)習(xí)這個軟件的過程中加以篩選，重點是以下知識點：
雖然 PS 在實際項目中是用來畫復(fù)雜的圖標(biāo)，但并不妨礙我們使用 PS 從最基礎(chǔ)的圖標(biāo)開始畫起，因為想要熟練掌握上方的知識點，簡易的工具圖標(biāo)是最好的磨刀石，之后再學(xué)習(xí) AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 設(shè)計必學(xué)的一款軟件，它的功能異常豐富，主要用來設(shè)計矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細(xì)節(jié)的調(diào)整上，是最全面最細(xì)膩的軟件，并且 AI 中的圖形還可以直接復(fù)制粘貼到其它應(yīng)用的畫布中。
如果掌握了上方提及的 PS 基礎(chǔ)，那么學(xué)習(xí) AI 也就輕松了不少，其中，AI 設(shè)計圖標(biāo)中有三個特殊的功能是需要重點掌握和學(xué)習(xí)的：
花幾個晚上，掌握了 PS 和 AI 的相關(guān)知識點以后，就為我們后續(xù)的學(xué)習(xí)提供了技術(shù)支持，可以進(jìn)入下一階段了。
這是圖標(biāo)系列文章的第一篇，信息量不算少。所以我們在結(jié)尾再總結(jié)一次，方便大家記憶。
文章來源：優(yōu)設(shè)網(wǎng) 作者：超人的電話亭
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文章來源：藍(lán)藍(lán)設(shè)計 作者：張藝仁
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
常見的分類是簡單的線性分類，缺少立體化的圖標(biāo)分類思維。文章通過梳理來幫助大家對不同類型及風(fēng)格的圖標(biāo)有一個體系化的認(rèn)知。
大家好，我是Clippp?？吹胶玫膱D標(biāo)我們會習(xí)慣性地截圖保存，但隨著收集的圖標(biāo)越來越多，會發(fā)現(xiàn)對圖標(biāo)的分類會變得越來越混亂…做設(shè)計時也不清楚到底該參考或運用哪種風(fēng)格最合適。來看看如何解決這些問題！
對圖標(biāo)進(jìn)行分類時，普遍會遇到的問題是一個圖標(biāo)有多種風(fēng)格。例如下面這個水滴圖標(biāo)，樣式很簡單，但可以劃分到多個類別中。
首先將圖標(biāo)按尺寸大小分為兩類；
繼續(xù)細(xì)分對應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型；
最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。
利用這種結(jié)構(gòu)層級，可以明確定義圖標(biāo)類別。
圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷，但把它縮小到16px，這些酷炫的效果都無法呈現(xiàn)出來。
小尺寸圖標(biāo)用作UI控件，起到引導(dǎo)功能或裝飾目的。
利用這種簡單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中，所以在小圖標(biāo)分類中沒有展示。
大圖標(biāo)利用尺寸上的優(yōu)勢能展示更多內(nèi)容，分為多種組成形式。
1.2帶有背景色的面性圖標(biāo)
1.2漸變線性圖標(biāo)
1.3等距線性圖標(biāo)
1.4手繪線性圖標(biāo)
1.5斷線圖標(biāo)
1.6雙色線性圖標(biāo)
2.2帶有背景色的線面結(jié)合圖標(biāo)
2.3錯位線面結(jié)合圖標(biāo)
2.4色塊圖標(biāo)
2.4單色線面結(jié)合圖標(biāo)
3.2帶有容器的扁平化圖標(biāo)
3.3等距圖標(biāo)
3.4半陰影扁平圖標(biāo)
3.5長陰影扁平圖標(biāo)
希望大家能對圖標(biāo)的分類及設(shè)計有更全面深入的認(rèn)識，從而構(gòu)建一套完整的圖標(biāo)思維體系。
文章來源：站酷 作者：Clip設(shè)計夾
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
作為一名UI設(shè)計師，圖標(biāo)設(shè)計是我們剛?cè)腴T就必須學(xué)會的必備技能之一，它是用戶界面中絕對不可或缺的元素。通常我們理解圖標(biāo)設(shè)計的含義，是將某個概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設(shè)計風(fēng)格的普及，圖標(biāo)的風(fēng)格越來越簡約，看似簡單的圖形，實際要準(zhǔn)確的表達(dá)含義，也是需要注意很多細(xì)節(jié)的，在如今大同小異的圖標(biāo)中，如何讓你設(shè)計出的圖標(biāo)具有說服力也是一門學(xué)問，今天就給大家全面的剖析一下圖標(biāo)的知識，讓你做出的圖標(biāo)有理有據(jù)。
1、圖標(biāo)的定義及分類
2、圖標(biāo)的設(shè)計規(guī)范
3、圖標(biāo)的性格走向
4、圖標(biāo)的評判標(biāo)準(zhǔn)
5、總結(jié)
圖標(biāo)是具有高度概括性的、用于視覺信息傳達(dá)的圖像。圖標(biāo)常?？梢詡鬟_(dá)出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。
在數(shù)字設(shè)計領(lǐng)域，圖標(biāo)作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達(dá)成人機交互這一目標(biāo)的有效途徑。
釋意性圖標(biāo)是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標(biāo)記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標(biāo)來獲取信息。不過有時候圖標(biāo)表達(dá)的含義可能還不夠完整或者清晰，所以會將圖標(biāo)和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類：
2-1-1純圖標(biāo)：
例如火球買手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋，用戶也知道它表達(dá)的是什么。
2-1-2圖文結(jié)合：
例如造作APP中的“購物車圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：
例如開眼APP中視頻封面左上角“開眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。
交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶進(jìn)行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執(zhí)行不同的交互過程，這種類型圖標(biāo)也是APP中最常見的，常見的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點贊、收藏、掃一掃等。
裝飾性圖標(biāo)僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標(biāo)往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標(biāo)”。
圖標(biāo)基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
線性圖標(biāo)通過線來塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線過于復(fù)雜，在小面積中過多的線會對識別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì)所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。
面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計感的差別。
線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計的角度上說，由于元素的多樣化，設(shè)計更容易獲得好的效果。相反，如果運用不當(dāng)會顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。
這類圖標(biāo)的特點是通過細(xì)節(jié)和光影還原現(xiàn)實物品的造型和質(zhì)感，能給用戶極強的代入感，用戶可通過對現(xiàn)實事物的聯(lián)想，快速領(lǐng)會圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，因為用戶關(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運用在APP界面之內(nèi)。
相較于擬物風(fēng)格不會有太多復(fù)雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設(shè)計中，一般在面積比較大的區(qū)域我們會使用加入輕質(zhì)感的圖標(biāo)。
合理的遵循圖標(biāo)規(guī)范可以有利于設(shè)計師之間合作使用，指導(dǎo)設(shè)計師如何規(guī)范的去設(shè)計圖標(biāo)，以確保企業(yè)所有產(chǎn)品圖標(biāo)風(fēng)格的一致性和可用性達(dá)到統(tǒng)一，同時也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。
為了保證圖標(biāo)的尺寸大小一致性，我們往往會建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計中也會存在特殊的尺寸，例如谷歌在臺式機上設(shè)計圖標(biāo)，當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時，就會使用密集布局，基礎(chǔ)網(wǎng)格就會縮小到20。
下面就以常用的24x24為大家展示：
網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時將保留其所需的比例和周圍的空白區(qū)域，同時還能夠很好的平衡圖標(biāo)的視覺重心。
*在使用常規(guī)圖標(biāo)時避免一部分在出血位。
*在使用多個元素的圖標(biāo)時，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計相似比例的圖標(biāo)時有共同的參考準(zhǔn)則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域為2）：
當(dāng)把圖標(biāo)畫在網(wǎng)格上時可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。
在設(shè)計一整套系統(tǒng)化的圖標(biāo)時，我們一定要注意圖標(biāo)的像素大小，要運用相同的網(wǎng)格尺寸設(shè)計相同線條粗細(xì)的圖標(biāo)，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。
當(dāng)然，描邊像素的粗細(xì)并不是絕對的，如果我們要做一些密集型的圖標(biāo)時，可以考慮適當(dāng)?shù)目s小線的像素大小。如下，我們設(shè)定的系統(tǒng)圖標(biāo)線條粗細(xì)為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時就會顯得非常擁擠，并且在視覺上比其余圖標(biāo)更重，這時我們就可以把它的線條像素降級，設(shè)定為2px。
我們在用矢量工具繪制圖標(biāo)時，要仔細(xì)看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。
曲率簡單來講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。
外曲與內(nèi)曲并不一定同時存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無曲率）。如下圖：當(dāng)內(nèi)部結(jié)構(gòu)都是圓角時會發(fā)現(xiàn)整個圖標(biāo)稍顯臃腫，這時我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。淖兒缶蜁l(fā)現(xiàn)圖標(biāo)的整體結(jié)構(gòu)會顯得更加協(xié)調(diào)。需要注意的是如果一個圖標(biāo)做了這樣的處理，在同等情況下的圖標(biāo)都要做一樣的處理，不然圖標(biāo)會顯得非常雜亂，不統(tǒng)一。
根據(jù)像素的網(wǎng)格線來設(shè)置兩條對角線，會讓你的圖標(biāo)看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。
在做很多圖標(biāo)時都會用斷點的缺口來打破“全包邊圖標(biāo)”的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點，那么要保證斷點的形態(tài)保持一致。
確保圖標(biāo)內(nèi)每個細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標(biāo)時牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。
非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標(biāo)視覺重心并不在一條水平線上，需要微調(diào)才能保證平衡感。
在圖形的處理上，不要留有多余的節(jié)點，干掉多余的節(jié)點，保持圖形的整潔。
ICON命名要求較為嚴(yán)格，涉及到我們切圖給開發(fā)，所以我們命名爭取做對，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小
每個App應(yīng)該有自己獨特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細(xì)直）、精致（細(xì)圓）。
圖標(biāo)結(jié)構(gòu)特點：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為直角。
粗曠類圖標(biāo)讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線條的直角設(shè)計。
圖標(biāo)結(jié)構(gòu)特點：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為圓角。
活潑類圖標(biāo)讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線條較粗的圓角設(shè)計。
圖標(biāo)結(jié)構(gòu)特點：線條較細(xì)、拐角為直角。
商務(wù)類圖標(biāo)讓人看起來十分規(guī)矩、嚴(yán)謹(jǐn)、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類的圖標(biāo)。因為這類圖標(biāo)的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。
圖標(biāo)結(jié)構(gòu)特點：線條較細(xì)、拐角為圓角。
精致類圖標(biāo)讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類圖標(biāo)。
當(dāng)圖標(biāo)設(shè)計完后，我們應(yīng)該如何去評判一個圖標(biāo)的好壞？很多設(shè)計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標(biāo)進(jìn)行評判：識別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。
圖標(biāo)最主要的用途就是輔助用戶理解信息，特別是對于當(dāng)圖標(biāo)單獨存在時，一定不能讓用戶產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識別，我們可以從這2個方向入手：大眾認(rèn)知隱喻、真實世界映射。
在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶熟知認(rèn)可，對于這類隱喻圖標(biāo)用戶不用思考身體就已做出反應(yīng)，我們在設(shè)計圖標(biāo)時可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識別性，也能做出差異化。
選擇真實世界中的物品映射，能使人下意識對圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識別度。
每個App應(yīng)該有自己獨特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。
一致性是圖標(biāo)的基礎(chǔ)，我們在繪制整套圖標(biāo)時要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺上也更加和諧美觀。圖標(biāo)是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
3-1 尺寸大小：網(wǎng)格大小是否統(tǒng)一、是否遵守圖標(biāo)的keyline規(guī)則。
3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）
3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標(biāo)的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當(dāng)邊角像素在1-2px時內(nèi)外曲率為2px；當(dāng)邊角像素在3px時內(nèi)外曲為2px，內(nèi)曲為1px；當(dāng)邊角像素大于或等于4px時，外曲為2px，內(nèi)部則為直角。
3-4 描邊：描邊大小是否一致。
3-5 間距：是否遵守間距規(guī)范。
3-6 透視：透視是否一致，避免在同一套圖標(biāo)中出現(xiàn)正視圖/側(cè)視圖混雜的情況。
3-7顏色：在圖標(biāo)的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過大的配色。
一致性代表的是圖標(biāo)的基礎(chǔ)，而協(xié)調(diào)性則代表圖標(biāo)的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗證一致性是否合理的標(biāo)準(zhǔn)，當(dāng)協(xié)調(diào)性存在問題時，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點：視覺大小、飽滿度、透析感。
視覺大小對標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺大小不對等時，你就要回過去查看你的網(wǎng)格與keyline是否運用正確，確保正確后再查看你的圖標(biāo)是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來看描邊粗的圖標(biāo)視覺偏大）
飽滿度對標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿時，你就要去查看你設(shè)定的間距值是否偏大，是否合理。
透析感簡單來說就是留白區(qū)域。透析感對標(biāo)的也是一致性的間距，當(dāng)元素的描邊過大時，我們就要合理的設(shè)定間距的最小值，不然整個圖標(biāo)就顯得非常臃腫。
品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多APP都會發(fā)現(xiàn)他們的圖標(biāo)設(shè)計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動性。其實我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動、創(chuàng)新。
色彩是圖標(biāo)設(shè)計中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當(dāng)然品牌顏色除了可以直接用外，還可以在提取時適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時，使得整個圖標(biāo)更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運用在APP首頁標(biāo)簽。因為首頁是APP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強了用戶對App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標(biāo)簽就用了品牌LOGO。
我們可以在品牌中提取它識別性較強的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強相關(guān)的元素。例如QQ音樂，就把音符作為首頁圖標(biāo)。
如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨出現(xiàn)，因為它本身不具備引導(dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。
圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁標(biāo)簽。
設(shè)計師對自己做出的所有設(shè)計都必須要有理論支撐，圖標(biāo)也不例外，一套優(yōu)秀的圖標(biāo)是設(shè)計師不斷沉淀的結(jié)果?？赐瓯疚恼潞?，如果大家想要去練習(xí)圖標(biāo)，建議找大廠的圖標(biāo)放在keyline里臨摹，真的會讓你收獲不少。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
全新的2021已經(jīng)到來，在這個適合展望未來的時候，淘寶也迎來了品牌形象的升級，一個萬象更新的淘寶正在向我們走來。
全新的2021已經(jīng)到來，在這個適合展望未來的時候，淘寶也迎來了品牌形象的升級，一個萬象更新的淘寶正在向我們走來。
“淘寶直播很有趣味”，“淘寶人生很新潮”，“淘寶更好逛了”越來越多的用戶在感受淘寶的新變化。新淘寶，讓用戶在“淘好物”過程中更能感受到“逛”的樂趣，從產(chǎn)品、直播等多場景多維度帶給用戶全新體驗。作為淘寶的鏡子，我們的品牌也伴隨著產(chǎn)品的升級，在設(shè)計層面表達(dá)了全新內(nèi)核。
在新淘寶的大背景下，設(shè)計的挑戰(zhàn)在于如何將抽象的心智具象表達(dá)。此次品牌設(shè)計將圍繞“連接”“開放”“有趣”三大設(shè)計理念透過字體傳達(dá)淘寶的品牌新內(nèi)核。
連筆&連接
在新的字體中將有粘連但又不夠流暢的筆畫結(jié)構(gòu)，讓它們“一氣呵成”起來，通過連筆來表達(dá)“連接”，它寓意了新淘寶要更好地連接商業(yè)、用戶和內(nèi)容。
空隙&開放
“通透”是新的字體比較直觀的感覺，讓字體本身結(jié)構(gòu)上有“呼吸”的空間，它代表了新淘寶對外能夠提供充足的空間，同時也將生態(tài)體系打開，從而吸收更多的資源共贏共創(chuàng)。
弧度&有趣
新的字體在彎折筆畫的連接處做了弧度處理，讓整個字體看起來更加有活力，它要展現(xiàn)的是新淘寶將產(chǎn)出更加豐富多樣的內(nèi)容，讓消費者能體驗到更多趣味且好逛。
很榮幸本次升級邀請到了國內(nèi)著名的字體設(shè)計廠商方正字庫與知名品牌設(shè)計公司MetaDesign一起聯(lián)合完成我們的LOGO設(shè)計，整個過程中都提供了非常專業(yè)的指導(dǎo)。
全新“淘寶”品牌標(biāo)識，充分融合了中華傳統(tǒng)書法文化和現(xiàn)代的設(shè)計語言、設(shè)計手法，呈現(xiàn)出多元、豐富、有趣的品牌面貌。
全新升級的“淘寶”特別注入了自然書寫的筆勢，將寫意融入設(shè)計之中。在設(shè)計上借鑒了行書的技法，在字體的筆勢相承之處運用連筆書寫，線條流暢自如，筆畫之間氣息貫注、流動和諧。
連筆
字體部件的設(shè)計突出了筆畫的血脈與氣勢，字體起筆處注入能量，轉(zhuǎn)折時意氣相聚，呈現(xiàn)出蓄勢待發(fā)的姿態(tài)，末尾的鉤畫收筆果斷，整體給人一種勢如破竹、一氣呵成的視覺感受。
蓄勢
“淘寶”橫畫起筆處采取直切手法，如逆鋒蓄勢，運筆時線條微弧上揚，收筆處筆畫輕提，筆勢流麗、煥發(fā)風(fēng)采。
橫畫上揚
新“淘寶”的設(shè)計細(xì)節(jié)精微生動，通過適當(dāng)?shù)臏p細(xì)、避讓，字體筆畫結(jié)構(gòu)緊密得當(dāng)，布白停勻、筋骨相諧，穿插避讓恰到好處。
避讓
兩個單字點畫的筆形渾圓一致、遙相呼應(yīng)，形成左右顧盼的姿態(tài)，文字之間脈絡(luò)貫通，構(gòu)成一個有機的整體。
呼應(yīng)
中英文字標(biāo)互相呼應(yīng)；英文字標(biāo)需要足夠簡約才能滿足LOGO以中文為主，英文為輔的傳播需求。
優(yōu)化LOGO的筆劃及布白，提高LOGO在數(shù)字端上小尺寸下的可識別度。
當(dāng)淘寶的中文字標(biāo)設(shè)計逐漸成型，我們希望英文字標(biāo)能承載相同的設(shè)計理念。
‘T’的橫畫呼應(yīng)中文的橫劃特征:微弧上揚，以流暢的圓角收筆。
‘a(chǎn)’維持雙層結(jié)構(gòu),更能與相鄰的‘o’更能區(qū)分，保持高的視別度;頂部的拱形弧線與淘字的‘勹’部筆勢互相呼應(yīng)。
開放’o’字的內(nèi)白，平衡筆劃粗細(xì)的變化；確保外輪廓的弧線圖滑流暢，使造形更豐富生動。
升級后的英文字標(biāo)彰顯中文字標(biāo)的設(shè)計精髓，與時并進(jìn)。
新淘寶，新品牌，新形象。為了能夠讓用戶對于品牌有更具體的認(rèn)知，此次品牌升級還創(chuàng)造了淘寶自己的超級符號，結(jié)合業(yè)務(wù)豐富的場景，讓視覺語言更具專屬性和多樣性，讓用戶更好的感知到，一個更連接用戶、更開放平臺、更充滿趣味的新淘寶正在走來。
文章來源：UI中國 作者：AlibabaDesign
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
奇立德全能ui設(shè)計班學(xué)員的界面圖標(biāo)設(shè)計作品，看的好舒服
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com