圖標(biāo)設(shè)計(jì)五條黃金法則

　　圖標(biāo)如今它們無處不在，并且在用戶界面(UI設(shè)計(jì))的中扮演著重要角色。無論您是一位有出色的用戶界面設(shè)計(jì)師，還是想要提高視覺設(shè)計(jì)技能的UX設(shè)計(jì)師，圖標(biāo)設(shè)計(jì)過程都是至關(guān)重要的一步。今天AAA教育胡老師帶大家學(xué)習(xí)圖標(biāo)設(shè)計(jì)五條黃金法則。
 

　　在接到新項(xiàng)目時(shí)從頭開始設(shè)計(jì)一組新圖標(biāo)時(shí)，必須為該過程分配足夠的時(shí)間。還需要牢記一些準(zhǔn)則，這將有助于確保圖標(biāo)可識(shí)別且易于使用。
 

　　事不宜遲，下面給大家介紹圖標(biāo)設(shè)計(jì)中的五條黃金法則，學(xué)會(huì)之后你離高級(jí)UI設(shè)計(jì)師又進(jìn)了一步。
 

　　1.注意網(wǎng)格
 

　　圖標(biāo)設(shè)計(jì)中的許多內(nèi)容都由網(wǎng)格控制。在設(shè)計(jì)圖標(biāo)時(shí)，您需要密切注意像素網(wǎng)格以及圖標(biāo)如何適應(yīng)像素網(wǎng)格。
 

　　確保圖標(biāo)緊貼像素網(wǎng)格的最簡單方法是堅(jiān)持整數(shù)。避免小數(shù)點(diǎn)-這些家伙會(huì)使圖標(biāo)的邊緣產(chǎn)生模糊。讓我們看一下實(shí)際情況。
 

　　在下面，我繪制了一個(gè)簡單的房屋圖標(biāo)，并打開了像素網(wǎng)格。在左側(cè)，您可以看到一個(gè)圖標(biāo)，該圖標(biāo)由完全適合像素網(wǎng)格的筆觸組成。在右側(cè)，筆觸略有下降。您可以通過查看組成像素網(wǎng)格的線來分辨它們，它們一直貫穿到筆畫。
 

　　現(xiàn)在，讓我們看一下構(gòu)成屋頂?shù)膶?duì)角線。這些并不完全位于網(wǎng)格上。我們將無法使它們合適，因?yàn)榫W(wǎng)格由垂直和水平線組成，沒有對(duì)角線。在這些情況下，我們確保構(gòu)成對(duì)角線的起點(diǎn)和終點(diǎn)位于網(wǎng)格上。
 

　　2.清晰度
 

　　我們有時(shí)會(huì)在很小的地方放圖標(biāo)，例如iPhone上的標(biāo)簽欄。隨著標(biāo)簽欄的大小圖標(biāo)也會(huì)適當(dāng)?shù)淖冃?。這個(gè)適合圖標(biāo)可能就會(huì)變模糊看不清。
 

　　在做小圖標(biāo)的設(shè)計(jì)時(shí)，圖標(biāo)的線條要比正常圖標(biāo)的細(xì)一些。盡量做一些直角的圖標(biāo)，避免圓角會(huì)模糊不清。要點(diǎn)就是確保即使小尺寸的圖標(biāo)也能使用戶清晰的閱讀，給用戶良好的視覺體驗(yàn)。
 

　　3.保持一致
 

　　當(dāng)我們?cè)O(shè)計(jì)一組圖標(biāo)時(shí)，它們應(yīng)該像一個(gè)家庭。它們看起來并不完全相同，但是具有相似的視覺屬性，使它們彼此相關(guān)。
 

　　在設(shè)計(jì)時(shí)，請(qǐng)做出一致的樣式選擇。例如，如果您使用了圓角并以一個(gè)圖標(biāo)結(jié)束，請(qǐng)確保其余所有都使用。樣式，大小和詳細(xì)程度都應(yīng)保持一致。這有助于形成連貫的視覺語言，這是品牌塑造的關(guān)鍵部分!
 

　　4.測(cè)試
 

　　確保圖標(biāo)與用戶清晰，快速地通信的最佳方法是對(duì)其進(jìn)行測(cè)試。設(shè)計(jì)完圖標(biāo)后，最好進(jìn)行快速測(cè)試。
 

　　向朋友或團(tuán)隊(duì)中的其他人顯示圖標(biāo)。讓他們告訴您，當(dāng)他們看到他們時(shí)想到的第一件事。如果它與您要交流的內(nèi)容保持一致，那么您的設(shè)計(jì)就成功了一半！
 

　　5.設(shè)計(jì)簡單的形狀
 

　　一切都可以分解為基本形狀如上面的房屋圖標(biāo)案例?我們?cè)O(shè)計(jì)了兩個(gè)矩形和一個(gè)三角形。
 

　　定義完圖標(biāo)后，請(qǐng)嘗試將其分解為簡單的形狀。這是開始構(gòu)建和簡化圖標(biāo)的最佳方法。