尋尋覓覓
尋尋覓覓...
每次畫完圖標的時候都在思索、總結
每次畫完圖標找其他資深設計師尋找意見
每次都會翻閱大量文章設計資料，以及各種類型的應用里的圖標做對比分析
一套優(yōu)秀的圖標要具備：
一.實用性
二.美觀
三.精致
我在這里把實用性放在了第一位，因為作為一名設計師不僅要考慮美觀，我們做的圖標是服務于用戶所以要站在用戶的角度考慮，在實用和美觀相沖突的時候應該把實用性放在第一位。而且在用戶的實際使用場景中只要圖標不是做的很丑絕大多數用戶他們感知度不是很大的，但是圖標做的不夠實用是會很明顯帶給用戶很差的體驗。
實用性是指什么？
概念：發(fā)明或者實用新型申請的主題必須是能夠在產業(yè)上制造或者使用，并且能夠產生積極效果。
在圖標的設計上：能夠一眼或者是在較短的時間內感知到它的含義，實在很難表義的可以配合文字充分解釋，相輔相成。（呼應產生積極效果）
dribbble圖片
如上圖所示，即使沒有文字信息絕大多數圖標也可以看出是什么含義。
有些小伙伴在這里就會產生異議“這里的有些圖標并不能一眼看出什么意思?。?rdquo;
【如果你不理解一個產品，你就使用不了它的功能--至少不能很好地用。哦，當然，你可以把基本操作步驟記住，不需要反反復復地去記。如果很好地明白了一項操作，你就會說:“啊，我明白了。”此后你便不需要更多解釋及提醒了。“只學一次，永不忘懷”應該被奉為設計的箴言。】——來源于唐納德·諾曼 【設計心理學】
1）應該怎么才能提高圖標的實用性？
1.尊重用戶的使用習慣，如果用戶都對某個圖標形成了共識，就盡量不要修改它的含義或者另辟蹊徑畫一個比較個性，自己認為比較有設計感的圖標。
2.尊重歷史，（eg：藍牙的 LOGO 來自后弗薩克文的符文組合， Runic letter ior.svg（Hagall，?）和 Runic letter berkanan.svg（Bjarkan，?）的組合，也就是Harald Blåtand的首字母HB的合寫，成為了今天大家熟知的藍色徽標。——百度搜索）有些信息擁有很深的歷史淵源，需要深層次的挖掘才能將把圖標設計的更有理念更貼合實際。
想了解更加全面的信息點擊 藍牙名字和logo的由來
3.尊重物體形態(tài)，舉一個夸張的例子：如果設計一個危險的圖標，最后畫成鎖的樣子是不是就徹底拋棄了他原有的含義，用戶使用起來根本不知所以然，反而背道而馳。眾所周知“鎖”代表著安全、保密，和危險沒有任何關系。如果讓設計一個保密的圖標，畫成鎖的的樣式，就可以很好的被用戶識別。內心還會產生滿滿的安全感。
4.基因繼承，在我們的實際生活中，都是一些尖銳的器具（刀子、叉子、劍...）更容易給我們造成傷害，所以我們經常把這些器具放的更容易觸摸不到的地方，就算見到了也會有意識的主動避讓開來保證自己的安全。而那些可以護人安全的盾牌是不是看上去就比較圓潤、厚重、可靠。
元素提取、應用（素材源于網上）
在實際的應用中，馬路上危險的標牌幾乎都是尖銳的三角形容器再配合警示的黃色（顏色也屬于基因的一部分，不同的顏色在不同的場景給人的感受也是不一樣的，對顏色精準的把控可以使自己的設計如虎添翼）會讓駕駛中的司機在看到的第一眼就會有意識的遠遠的避開。
因此在設計的時候也要學會提取代表它們可以帶給人相應感受的元素和基因，應用到相應的圖標上，才會讓我們設計的圖標擁有靈魂，不至于最后畫出的圖標雖然很美但是總感覺哪里怪怪的。
2）美觀
美觀在我看來，是作為設計師最基礎的能力！
想要圖標看上去好看首先要“眼高”只有多看多學，審美才能在潛移默化中不斷的提升，如果眼界都不高那么自身繪制的圖標最大的限度也只能達自己目前眼界的高度。
如何設計一組美觀的圖標
1.保證體量一致：體量不單單指展示面積，最終需要保證的是視覺體量一致。
圖一
圖二
初級設計師畫圖標的時候經常在一個限定的范圍框內設計，總以為在這個里面畫的圖標最差也不會差到哪去，可以保持體量一致，設計的圖標更加統(tǒng)一，最后容易忽略審查的步驟。圖一兩個圖形都在固定的的限定框內畫的圖標，但是視覺上正方形比圓形要大的多。這個時候就不能完全的依賴限定框。要以使用者的視覺去審視，主觀的去調節(jié)保持視覺大小一致。
2.保證相同形狀、屬性、含義的圖標圓角值一致
3.保證相同形狀、屬性、含義的圖標描邊粗細一致
重要的事情再次強調一下【相同形狀、屬性、含義的圖標才能保持圓角、描邊粗細的一致】。很多設計師在這里有很大的誤區(qū)，為了盡量的保持圖標一致性，有些本來尖銳、方正的圖形也畫的很圓潤，這樣真的好嗎？
我們下面看兩組圖標：
來源 dribbble
snapseed 圖標
是的每組圖標都不丑，但是哪組圖標的實用性更強呢？
第一組圖標很協(xié)調很統(tǒng)一，第一眼看上去沒有什么問題。但是就是因為太過協(xié)調，導致每個圖標的相似度太高沒有把每個圖標的個性、特展展示出來。
第二組圖標舍棄了部分的統(tǒng)一性（但是相同形狀、屬性、含義的線條以及圓角還是保持一致的），這里面有面性、線性、圓潤、尖銳的。但是整體視覺效果還是保持一致的。在保持一致的前提下每個圖標的識別度還是非常高。不僅照顧視覺感受還考慮到了實際的使用效率。在混亂中尋找統(tǒng)一，在統(tǒng)一中尋找不一樣。當然做這種類型的圖標設計師就要考慮的就非常多，面臨的挑戰(zhàn)也是巨大的！這樣繪制的圖標才更有深度有意義?。≡谶^方案的時候才能侃侃而談，敘述每個圖標的故事...
“統(tǒng)一”在我看來不僅僅是指線條粗細、圓角大小更要重要的是表現(xiàn)手法eg：透視角度、磨砂效果、斷點、顏色...
來源dribbble-統(tǒng)一顏色，磨砂效果
來源dribbble-統(tǒng)一透視角度
來源dribbble-統(tǒng)一磨砂效果
來源網絡-相同的表現(xiàn)手法
著名的圖標設計師Hemmo de Jonge在他的演講里提到，在他和他的團隊為荷蘭政府設計圖標系統(tǒng)的時候，在每一個圖標中都添加了一個「切口」（notch），通過這樣的小細節(jié)，使得整個圖標系統(tǒng)能夠整合在一起。同時增了情感化以及設計感，使得簡單的圖標不在那么單調。
3）精致
何為精致，不妨從漂亮女孩說起。漂亮的的女孩都有一個相同的特性：身材、五官的大小比例協(xié)調；眉毛、眼睛、鼻子、嘴巴、耳朵的間距合適；眼線、眼影、口紅、彎彎的睫毛這些細節(jié)的妝容也恰到好處。
大小、間距、細節(jié)，這些標準也可以用到我們圖標設計中，來審核圖標的精致度是否做到。
1.大小，系統(tǒng)內的圖標一般不會太過復雜，而它小小的體量不足以支撐起很大的畫面。所以這個時候它的大小定位就尤其重要，太大會顯的豪放、粗獷，進而會感覺粗糙。太小就會影響用戶識別度點擊困難。所以在這種情況只能憑借設計師多年的經驗多試錯，多對比，選出最合適的那個。
2.間距，畫圖標的時候間距的設定也會影響到圖標的美觀以及精致度，之前看到一本設計書寫到線性圖標元素之間的間距最好大于等于線條粗細的1.3倍，經過多次嘗試我建議最好大于等于線條粗細的1.5倍。這里的間距也類似頁面設計的留白，目的是保留一定的呼吸空間。當然這里說的數據只是參考，具體的設計也要具體的研究不斷的嘗試，才能找到比較合適的那個。
3.細節(jié)，圖標的細節(jié)對精致度的影響最為重要。
飛行模式
上面這個圖標雖然也可以看出是個飛行模式的圖標，但是細看的話沒有任何細節(jié)只能說基本比例沒有什么問題。
那么細節(jié)應該怎么設計？參照實物，尊重用戶認知！
圖標設計過程
在設計圖標之前就要考慮好這個圖標含義，有沒有參照的實物，對應的人群，表達什么樣的功能，更深一步表達什么樣的情緒。
在設計飛行模式的時候就會考慮到什么情況下會用到飛行模式，和什么場景關系最為密切。用什么來表達最為合適，最貼合用戶的“心里模型”。按照飛機的模型繪制出它的形態(tài)只是第一步，因為在工業(yè)設計中，尤其像飛機這種大型的交通工具。設計師更注重的是實用性畢竟能保證乘客的生命安全是至關重要的。而設計圖標的時候就要在其基本的形態(tài)下繼續(xù)優(yōu)化，保留、放大必要的特征，丟棄繁瑣沒必要的細節(jié)，適當調整相應的比例。
總結
繪圖不難，難的的是想法。有些內容可說太多反而沒有太多的用處，需要設計師不斷的去摸索，去嘗試。敢于詢問自己的內心，打破固有思維。
以上內容很少涉及比較基礎的概論（eg：圓角不同的大小，線條不同的粗細所代表的不同的含義及情緒；差異化大的圖標還有哪些方式去統(tǒng)一；通過什么方式或理論來驗證自己設計的如何？后面有時間也會陸續(xù)發(fā)表相應的文章）。
此內容僅做參考，
相信每個設計師都有自己的意見和技巧。
想要成為更好的自己
就是去盡可能的閱讀各種書籍，放低姿態(tài)多學習多方面充實自己，讓自己變得越來越優(yōu)秀。
Powered by Froala Editor
7
作品
2
粉絲
5
關注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊