[ 平面理論教程 ] 6個頂尖設計師分享的圖標設計優化指南- 設計教程 - 骨子愛創意

教學主題: 6個頂尖設計師分享的圖標設計優化指南

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 6個頂尖設計師分享的圖標設計優化指南

這教學的重點為這幾點 [ 優化,指南,設計,圖標,設計師,分享,頂尖,一個,我們,像素 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

UI的工作曾經被很多人等同於畫圖標，然而大家真的會畫圖標么?優質的圖標和不夠好的圖標的區別其實非常小，但是這些細微的差別對於設計質量的影響卻是很大。這篇文章分享的是如何用6個步驟來優化圖標的設計。少有的icon設計理論結合實踐的文章，強烈建議閱讀。

UI的工作曾經被很多人等同於畫圖標，然而大家真的會畫圖標么?優質的圖標和不夠好的圖標的區別其實非常小，但是這些細微的差別對於設計質量的影響卻是很大。這篇文章分享的是如何用6個步驟來優化圖標的設計。少有的icon設計理論結合實踐的文章，強烈建議閱讀。

這6個步驟應該作為一個指南而非教條來准守。

這篇文章中我們會將這六個步驟應用到一隻柯基犬的圖標上。這個圖標有潛質，但是還不足以被認為是優秀的。下圖是修改前和修改後的對比，接下來我們將詳細說明具體步驟。

左邊的是原來的icon. 右邊的是按照本文原則重新設計過的icon

有效icon設計的三個屬性

系統和深思熟慮的設計icon主要依靠三個屬性：形式、審美統一、可辨識性。無論是設計一套還是設計單個的icon，都需要考慮這三點。

1、形式

形式是關於一個圖標如何製作而成的最底層的結構。如果你忽略一個圖標的細節，畫一條線去表達它，看看它是不是變成了一個正方形、三角形、圓形、水平或者垂直的矩形?主要的幾何圖形——圓、三角和正方形——是創造一個icon視覺設計的的基礎。在我們的例子中， Kem Bardly設計的小狗的頭部是由兩個三角和兩個橢圓組成的。正如我們畫素描之前要用儘可能大的簡單的形狀打草稿然後再去添加更多的細節一樣，我們也是從簡單的形狀開始設計一個圖標，然後再去添加更多的細節。

這張圖片的關鍵線顯示了由基本形狀定義的設計形式

2、審美統一

我們說的審美統一是指在一個或者多個icon中共享同樣的設計要素。比如說都是圓形或者方形的角，角的具體尺寸(2像素、4像素、等等)，一致的線的粗細(2像素、4像素、等等)、風格(面、線、填充的線、字形)、顏色等等。審美統一讓你的設計看起來是一個整體。在下面的例子中，三隻狗狗都有共同的設計要素，比如2像素的圓角，2像素眼睛和鼻子的圓。

這三隻狗狗用共同的設計和風格元素，創造了審美上的統一

3、可識別性

可識別是一個icon作為一個產品的本質或一個icon獨特的原因。一個圖標最終是否起作用取決於觀看者能不能容易的識別icon所描繪的對象、想法、或者行為。可識別包括大家對於一個事物普遍的看法，但它也可以包括一些獨特而意外的元素比如心形的小狗的鼻子。需要記住的是可識別性並不只是對事物單純的描述，它還包含你對此獨特的理解。在這方面審美統一和可識別能夠並且經常的相互重疊在一起。

每隻狗狗的獨特性他們可以被識別，然而一致的元素和風格又讓它們看起來是一組的。

目前為止，我們了解了有效的icon設計的三個主要屬性。接下來，我們將深入了解如何用留個步驟來妥善處理這三個方面的問題。

六個步驟

1、從一個網格開始

我們這裡使用一個32×32-pixel網格。我們的網格也包含一些基本的指導來幫助我們在每個圖標的設計中創建基本樣式。

在這裡，我們看到了一個 32 × 32-pixel 的網格, 用一個 2-pixel邊界 (或 “禁區”) 來留出喘息的空間。

網格外面的2像素是我們所說的“禁區”。除非絕對必要，避免圖標出現在這個區域。“禁區”的目的主要是為了在圖標周圍創建一些喘息的空間。

對於icon可以用基礎形狀概括的，你可以畫一條外邊緣線來做邊界框，這些邊界框通常是一個正方形、圓形、三角形矩形等~

圓形的iocn以網格為中心，通常會接觸到內容區的最外層的邊緣，但不會進入禁區。注意，最常見打破禁區的情況是可以讓一些微量的需要強調的元素向圓外延伸以保證設計的完整性 ，如下圖所示。

△ 用網格和輪廓線對齊的圓形圖標

方形的圖標也是以網格為中心但並不會這麼做，在大多數情況下，它會擴展到主要內容區的最外層的邊緣。當需要和圓形或者三角形的圖標保持一致的視覺重量時，大多數的長方形圖標或正方形圖標要對齊到中間的輪廓線(下圖的橙色區域)。讓圖標本身的視覺重量去決定怎麼去對齊這些輪廓線，這需要在練習中去感覺。看看下面方形的設計圖，有三個同心方塊被強調，淺藍色、橙色、淺綠色。

△ 調整成一樣視覺重量后的方形和圓形的圖標

在32-pixel的正方形里，你會注意到20 × 28-pixel大小的水平或垂直的矩形。我們鬆散的遵循這些矩形圖標是橫向或是豎向的，並試圖使這些圖標匹配20 × 28-pixel的尺寸。

△ 調整后的垂直和水平方向的矩形與網格的關係

對角圖標的大小是以圓形的邊緣線來調整的。注意，最外層的點與圓形的參考線基本一致就行，不需要特別的精確，接近就可以了。

△ 調整后的對角圖標大小與網格的關係

記住，你不用每次都嚴格遵循網格和參考線. 網格在這裡的作用是為了幫助你讓圖標保持一致性, 但是如果你需要在製作一個偉大的圖標和遵循這個規則之間二選一的話，那就打破它。有着“荷蘭圖標”美稱的Hemmo de Jonge說過：

一個獨特icon的精華比設置一致感要重要的多。

這6個步驟應該作為一個指南而非教條來准守。

2、從簡單的形狀着手

用簡略的輪廓線(圓形、三角形、方形)來開始你的設計。即使一個圖標在自然狀況下是有機的，也最好從AI的形狀工具開始。當我們開始製作圖標，特別是屏幕上小尺寸的圖標，手繪導致的不規則的邊緣會讓一個圖標看起來不那麼精緻。從基本的幾何形狀開始設計，將會使一個圖標擁有更加清晰的邊緣(特別是曲線的情況下)，並且可以更加快速的對圖標加以調整，以及確保你遵循着網格和形式設計。

在這個柯基的icon由基本的幾何圖形——兩個三角和兩個橢圓組成。

3、數據化：邊、線、角、曲線和角度

不要試圖用自己的眼睛去隨意定義圖標的細節，比如線的粗細和角度等，要用嚴格的數字去定義它們。這些細微的差別會降低一個圖標的質量。

角度

在大多數情況下，堅持使用45°角，或者它的倍數。由於像素的原因，45°角的情況下是抗鋸齒的，這個角度下會有一個完美的清晰的邊緣線，人眼看起來會很舒服。如果非要打破這個規則，試着使用45°的一半(22.5°、11.25°、等)或15°的倍數，這麼做的好處是，這些角度在抗鋸齒上的表現仍然很好。

近距離觀看45°角度下的抗鋸齒效果。

曲線

還有一個會降低圖標質量的地方是，不完美的曲線。這可能意味着專業和業餘的差別。人的手眼之間的協調是有極限的，不可能達到一個完美的精度。去依靠形狀和數字來創建曲線而不是靠手繪。當你需要繪製曲線時，使用AI或者其它矢量軟件。 手繪的彎角導致的不盡人意的效果.

正如我們看到的”最初“的圖像，手繪的不規則的曲線，嚴重損害了設計的質量。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

這些精確的曲線是由AI里的貝塞爾工具創建的，而不是手工繪製。

角

一個共同的圓角半徑的大小是2pix。在一個32 × 32-pixel的圖標里，2像素就足夠大了，可以清楚的看到圓潤但不至於太軟。具體數值取決於你想要什麼樣的設計風格。

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

精確的圓角

這是經過我們重新設計的柯基現在的樣子。

通過一致的圓角，光滑的曲線，統一的線的粗細，新版本的設計得到了大幅的提高。

完美的像素

進行小尺寸的設計時，像素級別的校準是非常重要的。小尺寸圖標邊緣的鋸齒可以使圖標變得模糊。如果線不能對齊到像素網格之間會產生鋸齒並且使圖標變得模糊。所以講圖標對其到像素網格，使其邊緣清晰，需要更加精確的角度和曲線。

我們之前有提到，45°角是最好的，因為它遵循了像素的堆疊方式，它會讓形狀有個完美的對角線。但是在高分辨率的屏幕上，比如說視網膜屏，這種完美的像素就顯得不那麼重要了。

線的粗細

當涉及到線的粗細的時候，2種是理想的，3種有時候也是必要的。目標是在不引入太多破壞圖標一致的多樣性前提下，提供視覺層次。當超過三種時會讓圖標失去統一性。2像素和4像素的線非常好用。因為線的粗細正好是成倍增加的。在大多數情況下，避免使用非常細的線，特別是文字和扁平化的圖標上，除非你你想製造一個“線形”的圖標，依靠光線和陰影來定義形狀，而不是線。

這個iPhone的圖標演示了線粗細上的一致性。

4、使用一致的設計元素和風格

Hemmo de Jonge在2015icon沙龍上發表了關於圖標設計的精彩的談話。在他長達兩年的為荷蘭政府設計圖標系統的項目中。Hemmo和他的小夥伴們在每個圖標上都放置了一個缺口。並不是嚴格每個都這樣，但是大多數是如此。這個缺口成為了一種風格，把整個圖標集聯繫到了一起。

使用一致的設計元素。

在我們狗狗的例子里。我們採用了一個心形的鼻子。這個元素不僅把每隻狗狗聯繫到了一起，而且賦予了這些四條腿朋友們一些情感化的東西。

狗狗圖標里共有的元素。

在許多情況下，即使一個圖標集的風格發生了改變。他們之間統一的元素仍然能夠使它們看起來是一個整體。下面這張圖是我們為這三個圖標重新創建的風格，他們看起來仍然是一致的。

保持元素統一的，另外一種風格狗狗的圖標。

5、節制的使用細節和裝飾

icon應該快速的傳達一個物體、思想或者行為。太多小的細節將會引起混亂，從而讓圖標變得不容易辨認，特別是小尺寸的時候。一個或者一組圖標的細節也是審美統一和可識別性的一個重要方面。最合適的添加細節的方式是，在可以識別出圖標意義的前提下，儘可能的減少細節。

用最小的細節傳達出這個物體是什麼。

經過之前的一系列動作，我們已經基本上完成了我們的優化設計了。耳朵旁邊的黑色輪廓線已經用毛髮一樣的顏色替代。臉部的輪廓也是用兩像素的線勾勒出。注意現在仍然有一些元素是之前遺留下來的，比如小狗普通的鼻子。這個我們會在下一步解決。

6、讓它有個性

每天都有才華的設計師製作出大量優質的圖標，其中還有很多是免費的。不幸的是他們中的很多人過於依賴趨勢或者那些最受歡迎的設計師的風格。作為一個創意行業的創業者，我們應該在圖標以外去尋找靈感，建築、字體、工業設計、心理學、自然或其他領域。最近圖標之間看起來越來越像，所以讓你的設計是獨特的變得更加的重要。

柯基狗上心形的鼻子讓它變得獨特而有個性。

在最後完成的圖片上，我們有一個特別的心形的鼻子，這給設計增加了一點新奇和希望。

這些簡單的步驟應該被視為一個起點，而不是一個明確的指南。並沒有一個單一的方式來設計圖標。在這篇文章中，我們概述了一個設計的基礎知識，但其他設計師當然也可能有自己的意見和技術。成為一個更好的設計師，最好的辦法就是儘可能多的去看，去閱讀各種材料、定期的素描(帶着速寫本無論你走到哪裡)，和實踐，實踐，再實踐。

結論

我們分享了如何創造一個優質圖標的基礎知識。這些基本的技能任何人都能通過練習和實踐掌握它們。記住，創造一個更好的圖標，從一般性(樣式)開始朝着特殊性(可識別)努力。保持你的圖標內部和外部的一致性。一旦你掌握了基本的技術，就可以把精力放在如何使一個圖標脫穎而出：你獨特的創造性視野。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 6個頂尖設計師分享的圖標設計優化指南 這教學會喜歡

文章標題: 骨子愛創意- 6個頂尖設計師分享的圖標設計優化指南–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 優化,指南,設計,圖標,設計師,分享,頂尖,一個,我們,像素

本文永久連結 :6個頂尖設計師分享的圖標設計優化指南

本文轉載自 :VIA