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

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

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

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

　　1.注意網(wǎng)格
 

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

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

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

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

　　2.清晰度
 

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

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

　　3.保持一致
 

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

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

　　4.測試
 

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

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

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

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

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