6個(gè)步驟教你設計一個(gè)完美的Icon發(fā)布者：本站     時(shí)間：2020-06-05 15:06:13

6個(gè)步驟將會(huì )運用到改進(jìn)一只狗上（確切地說(shuō)，是一只柯基），這個(gè)圖標是由iconfinder的用戶(hù)Kem Bardly最近提交的。這個(gè)圖標是有潛質(zhì)的，但還不是夠優(yōu)美到可以稱(chēng)為“高質(zhì)量”。我們給Kem一些簡(jiǎn)單的小技巧，只要做一些小小的改進(jìn)。他的圖標已經(jīng)準備被作為優(yōu)質(zhì)圖標通過(guò)了。下面展示的圖片顯示了Kem的圖標改進(jìn)前后的版本。在接下來(lái)的章節，我們將循序漸進(jìn)地解釋它是怎么從最初版變到最終版的。


左邊的圖片是原始圖標。右邊的圖片是重新設計過(guò)的圖標，運用了本文中提到的原則。

注意，文章中討論的原則適應到網(wǎng)頁(yè)圖標時(shí)，他們通常也適用于印刷圖標。典型的300 dpi的印刷材料，使得像素化呈現本質(zhì)上是毫無(wú)意義的。如果你是一個(gè)平面印刷設計師，文中提到的所有原則都是適應的，但是你可以忽略像素化呈現的作品。

有效圖標設計的三個(gè)特性

對于組成圖標的3個(gè)屬性：形式、統一審美和識別性，好的圖標顯示了一套系統的經(jīng)過(guò)深思熟慮的方法。當新設計一套圖標，把這些屬性都考慮在迭代的途徑中，從整體（形式）出發(fā)，進(jìn)入到細節（識別性）。即使你只設計單個(gè)圖標，這3個(gè)屬性也仍然能被應用，能從單個(gè)圖標中推測出。

毋庸置疑，設計一個(gè)有效的圖標不止這3個(gè)屬性，但有這3個(gè)精選屬性是設計一個(gè)好的圖標的開(kāi)端。為了相對簡(jiǎn)潔性，我們專(zhuān)注于考慮這3個(gè)主要的屬性。

形式

形式是一個(gè)圖標根本的結構，或者說(shuō)是它的組成部分。如果你忽視圖標的細節，在主要圖形周?chē)?huà)了一條線(xiàn)，那他們是形成了一個(gè)方形、一個(gè)圓形、一個(gè)垂直或水平的矩形，一個(gè)三角形或者更多有組織的圖形？最主要的幾何形狀——圓形、方形和三角形——能為圖標設計打下一個(gè)穩固的視覺(jué)基礎。在Kem Bardly設計的柯基圖標示例中，狗的頭部是由兩個(gè)三角形和兩個(gè)橢圓形組成的。一個(gè)人開(kāi)始會(huì )畫(huà)一個(gè)最大最簡(jiǎn)單的形狀，然后才定義越來(lái)越多的細節。另一個(gè)人從最簡(jiǎn)單的形狀開(kāi)始設計圖標，然后添加更多的細節——但是只有盡可能多的需要溝通概念的細節被表達出來(lái)，它就會(huì )成為一個(gè)物體，一個(gè)想法或行動(dòng)。


這張圖片的關(guān)鍵線(xiàn)條展示了設計構型的基本形狀

審美的一致性

單個(gè)圖標的構成元素能運用到整套圖標中，就是我們說(shuō)的視覺(jué)的一致性。這些元素比如是圓形或方形的角，角度的大?。?像素，4像素…），被限制和保持一致的線(xiàn)條粗細（2像素，4像素…），圖標風(fēng)格（扁平的，線(xiàn)條的，被填充的線(xiàn)條或符號），配色等等。審美一致性是設計元素的集合，或是設計中你為其成為一個(gè)整體所貫穿使用的手法。在下面的例子中，會(huì )發(fā)現Kem圖標中的這3只狗都有一些共同元素，比如2像素的圓角，2像素寬的眼睛和心形嘴巴。


這3只狗圖標有共同的設計元素，形成了視覺(jué)的一致性

識別性

識別性是產(chǎn)品圖標的基本，它造就了圖標的唯一性。一個(gè)圖標是否從根本上起了作用，依賴(lài)于觀(guān)眾能多么容易地去理解這個(gè)圖形、它的含義及它描述的動(dòng)作。一致性包括展示觀(guān)眾普遍會(huì )和你的想法聯(lián)系在一起的特性，但是它也包括哪些獨特的，出乎意料的元素，像把狗狗的鼻子設計為心形。記住識別性不僅僅是指對形狀、想法或它表達的動(dòng)作的理解，也指識別出你的圖標。從這方面來(lái)說(shuō)，美學(xué)的一致性和識別性能經(jīng)常重合在一起的。下面的圖標，我們能識別出一只是柯基犬，一只是西伯利亞的愛(ài)斯基摩犬。因為他們獨特的顏色、頭部形狀和耳朵，但是仍然會(huì )認為他們是同一組圖標，因為他們有共同的設計元素。