網(wǎng)站建設中圖標設計初階要先型發(fā)布者：本站     時(shí)間：2022-03-27 10:03:23

UI最重要組建之一就是圖標，隨著(zhù)扁平化設計的發(fā)展趨勢，越來(lái)越注重圖標的簡(jiǎn)潔與寓意表達，平面圖標已占主導地位。每位設計師所處的階段所關(guān)注的要點(diǎn)是不一樣的，我把圖標設計分為2個(gè)階段–初階與高階，這樣分是為了有步驟性的學(xué)習和進(jìn)階的加強，當然，能人的話(huà)一步到位，對于新人來(lái)講會(huì )較難，需要實(shí)際工作中輔導與自己經(jīng)驗總結。我不會(huì )華麗高大尚的語(yǔ)言，但是我可以分享一些實(shí)實(shí)在在的基礎方法，也是這幾年會(huì )給帶的學(xué)生反復必講的入門(mén)輔導，有自己成熟方法表達的設計師可忽略這里，這里先說(shuō)初階的設計關(guān)鍵要點(diǎn)。

目錄:
一. 概念類(lèi)別
二. 設計技法要點(diǎn)
三. 系列成型圖標
 ———————————————————————————————

【一】概念類(lèi)別
扁平化圖標大部分無(wú)非就是剪影表現，而這里為什么重點(diǎn)是講圖標的形狀設計，而非色彩，因為一切先有形才考慮下一步。形不好再怎么營(yíng)造整體風(fēng)格都白費力，好比建筑造型與裝修的關(guān)系，而色彩等營(yíng)造的風(fēng)格都可另起文章分析 。圖標造型表現上無(wú)非就是典型的2種：面與線(xiàn) 。運用這兩種基礎元素去造型也可以進(jìn)行多種組合不同的表現 。組合造型一般有單體造型、多個(gè)元素組合造型，線(xiàn)與面之間的獨立與結合的變化。

l 簡(jiǎn)化的微寫(xiě)實(shí)圖標
這類(lèi)通常是彩色一體表現，造型和組合上較寫(xiě)實(shí)，不是純剪影，是寫(xiě)實(shí)過(guò)渡來(lái)的簡(jiǎn)化，又接近剪影，扁平簡(jiǎn)化設計，這里主要是利用面和顏色來(lái)進(jìn)行造型的設計。質(zhì)感風(fēng)格上也有6種（已有人分析），大概是純平面、折疊、輕質(zhì)感、折紙風(fēng)、長(cháng)投影、微立體。這種相對剪影的好畫(huà)很多，也更加容易塑造風(fēng)格，更多是在色彩上有得發(fā)揮和考究，用在界面里也是最為突出的。最近還非常流行用色塊來(lái)進(jìn)行二維、三維的裝飾表達，叫所謂的“低面建?！?感興趣的去搜一下。

上面提到的元素組合，比如下圖這個(gè)圖標目前是2個(gè)元素–信封加信紙，如果還要再加什么功能狀態(tài)示意，最多在右上角加個(gè)很小的消息提醒。因為元素越多越復雜，所表達的含義也就越多，同時(shí)也會(huì )影響造型的調動(dòng)。不管多少個(gè)元素總有一個(gè)最重要的對象，其他為輔助圖形，在塑形大小復雜度上有區別。

圖標設計初階要先型
1.1本文半原創(chuàng )圖例

l  剪影的正負形圖標
這類(lèi)通常是單色表現，當然也有綜合彩色的。其更加簡(jiǎn)潔抽象， 言簡(jiǎn)意賅，高度提煉精華，講究表象意境，具有理解的門(mén)檻。所以這才是最難設計的一關(guān)。非?？季吭O計的理性與感性之間在功能傳達上的邏輯思維。也是UI界所謂現代極簡(jiǎn)主義的代表，注意，沒(méi)把握好就會(huì )變得很“空虛”，把握好了就是時(shí)尚的feel啦~

負形圖標是以線(xiàn)繪制的圖形，高度的輪廓概括，就跟畫(huà)骨骼一樣的要求精準到位，也叫線(xiàn)形圖標。負形剪影是所有圖標中最講究也最難表達型的一種風(fēng)格，如果畫(huà)不好就很容易俗氣和簡(jiǎn)陋。

正形圖標是以面繪制的圖形，也有和線(xiàn)綜合表現情況，自己根據需要進(jìn)行創(chuàng )造變化吧。通常與負形圖標之間做當前狀態(tài)的轉換，手機tab上最常見(jiàn)，如ios7。

優(yōu)點(diǎn)：簡(jiǎn)潔清新優(yōu)雅；極具現代感（雖然遠古時(shí)代就有高度概括的符號表達，這里指的范圍是互聯(lián)網(wǎng)上的全新應用）；具有設計與涵義綜合的拓展性；還可以完成一些抽象詞匯的圖形傳達。

圖標設計初階要先型

圖標設計初階要先型
1.2本文原創(chuàng )圖例

圖標為上傳到云端的之意，這里的主對象是云，所以箭頭和云的比例是不同的，上傳箭頭是輔助圖形。了解界定多元素之間的主次關(guān)系，就能夠把握一個(gè)整體的造型走向。典型的基礎表現就是上面兩種，然后在實(shí)際繪制中根據自己的喜好和設計來(lái)進(jìn)行融合，可以得出更加豐富的表現。

【二】設計技法要點(diǎn)
1、關(guān)鍵節點(diǎn)繪制法
擬物化設計就是盡可能的繪制繁瑣細節，追求豐富和相似度。而剪影圖標則是相反，以簡(jiǎn)練為繪制手段。但是細節就沒(méi)有嗎，不是的，而是更加謹慎認真的注重每一筆，且越來(lái)越優(yōu)雅。這里舉例剪影圖標繪制方法技巧，3步驟可以搞定，看似又簡(jiǎn)單又難，簡(jiǎn)單的是只是繪制參照物輪廓，保留基礎識別性，步驟很少；難的是這調整的過(guò)程與產(chǎn)品環(huán)境的融合性，易用性，還有你自己的創(chuàng )意想法。說(shuō)簡(jiǎn)單點(diǎn)就是去繁擇簡(jiǎn)并經(jīng)過(guò)思考改造過(guò)的設計過(guò)程。而最基本的最需要犀利眼神抓準的是造型的關(guān)鍵節點(diǎn)，雛形出來(lái)后再根據想法調整。

l 提煉精華勾勒輪廓
通常在繪制已有參照物的基礎上去設計一個(gè)圖標，可以根據你喜歡的造型參照物去進(jìn)行分析，先抓取到參照物的關(guān)鍵節點(diǎn)，幾何繪制出來(lái)一個(gè)相似的基本圖形。

l 調整線(xiàn)鋒優(yōu)雅得體
基礎雛形出來(lái)后就開(kāi)始加入自己的想法調整線(xiàn)鋒，線(xiàn)條走向決定造型。這個(gè)時(shí)候就得要調多幾個(gè)版本了。設計師的處女座精細和糾結情結就在這里灑汗了，不斷調整對比，挑選出一個(gè)最優(yōu)再進(jìn)行下一步。

l 增特有細節出風(fēng)格
最后一步的塑形，就是畫(huà)龍點(diǎn)睛！造型的特點(diǎn)就在這一步去完成。

圖標設計初階要先型
2.1 本文原創(chuàng )圖例

對于新老設計師來(lái)說(shuō)，這樣的方法都是比較可取好用的，交互設計師也可以這樣快速入門(mén)哦親！尤其是第一步驟，能否非?？焖俚某鲭r形。下面是其他案例的設計方法欣賞，跟我上面總結的一樣道理。

圖標設計初階要先型
2.2圖例來(lái)源于Digial Art

圖標設計初階要先型
2.3圖例來(lái)源于iconwerk

2、精致的基礎要素
精致即精細極致?？此坪?jiǎn)單的圖標其實(shí)并不是隨便了事，但知道了這些基本要素你就可以完成一個(gè)合格的圖標了。好的圖標是謹慎認真的注重每一筆每一像素每一矢量錨點(diǎn)的，盡可能的往精美優(yōu)雅的方向努力吧騷年~

l 犀利清晰
需要鍛煉厲害的眼睛，使出你的火眼金星捕捉每個(gè)像素之差，像素滿(mǎn)格才能清晰的呈現，細分出來(lái)通常會(huì )遇到以下3種情況，這也是最影響圖標基本質(zhì)量的問(wèn)題點(diǎn)。

1)    輪廓發(fā)虛

圖標一定要用矢量繪制，但是新手很容易犯的第一個(gè)錯誤就是圖標模糊的問(wèn)題，也不清楚為何會(huì )這樣。其實(shí)就是矢量邊緣模糊產(chǎn)生的問(wèn)題，也是個(gè)人繪制的不良習慣造成。避免這個(gè)問(wèn)題，必須在100%畫(huà)布上繪制圖形，而且不能直接推動(dòng)圖標放大縮小，即使這樣改變大小了也要放大畫(huà)布調整路徑的錨點(diǎn)，反復查看及校正是否對齊1px網(wǎng)格，而不是0.1~0.9px，正是不滿(mǎn)1px格才會(huì )生產(chǎn)虛線(xiàn)。而圓形的繪制保證十字架4個(gè)邊緣點(diǎn)對準就可以了。

圖標設計初階要先型
2.4本文原創(chuàng )圖例

2)    斜形發(fā)虛

斜線(xiàn)也是會(huì )有模糊與精致之分的，不仔細對比其實(shí)是比較難看到問(wèn)題，可能很多人都會(huì )碰到圖形進(jìn)行傾斜效果時(shí)是有鋸齒的，那就是角度的處理問(wèn)題了，自己進(jìn)行多角度對比下試試，會(huì )發(fā)現哪一個(gè)角度最清晰。也可以將圖層進(jìn)行雙層疊加，會(huì )非常犀利哦~

圖標設計初階要先型
2.5本文原創(chuàng )圖例

3)    像素不夠或多余

看下來(lái)都是像素發(fā)虛與清晰的原因都是一樣的，下面這個(gè)例子是箭頭在小尺寸情況下可點(diǎn)陣矢量像素繪制，如果是大尺寸（如上面最大的箭頭示例）可以直接鋼筆繪制。

圖標設計初階要先型
2.6本文原創(chuàng )圖例

總結一下上面的處理方法，堅持最少發(fā)虛原則：

圖標設計初階要先型
2.7本文原創(chuàng )圖例

l 比例協(xié)調
圖形內部結構要注意元素構成之間的比例，有黃金比例分割也有感性的平衡方法。嚴謹的圖標比例可參照蘋(píng)果IOS圖標規范案例，打好內部統一結構線(xiàn)進(jìn)行圖形繪制和比例分配。

圖標設計初階要先型
2.8來(lái)自蘋(píng)果圖標及來(lái)自Seevi Kargwal圖例

如果頭眼昏花嫌麻煩，也可靠經(jīng)驗感覺(jué)快速完成一個(gè)具有平衡感的圖標。

圖標設計初階要先型
2.9本文原創(chuàng )圖例

l 視差平衡
同一個(gè)尺寸規格，但根據不同形狀的圖標，會(huì )導致面積占比引起的視差大小不同，但要在參考尺寸范圍內繪制進(jìn)行調整。以下圖標示例都是撐滿(mǎn)方框邊緣繪制，按道理這好像是準確的，但由于人的肉眼會(huì )有視差問(wèn)題，所以做的設計就要暫時(shí)拋開(kāi)科學(xué)，以人的真實(shí)情況去判斷再調整。

圖標設計初階要先型
2.10本文原創(chuàng )圖例

【三】系列成型圖標
能夠熟悉掌握完以上基礎要素，恭喜你可以大膽的去創(chuàng )造系列圖標了，當個(gè)數圖標設計確定好后，接力的圖標必須延展其風(fēng)格設定：造型規則、樣式、細節特征等要素統一設計–繁衍具同視覺(jué)與內在含義屬性的圖標。