圖標如今它們無處不在,并且在用戶界面(UI設(shè)計)的中扮演著重要角色。無論您是一位有出色的用戶界面設(shè)計師,還是想要提高視覺設(shè)計技能的UX設(shè)計師,圖標設(shè)計過程都是至關(guān)重要的一步。今天AAA教育胡老師帶大家學習圖標設(shè)計五條黃金法則。
在接到新項目時從頭開始設(shè)計一組新圖標時,必須為該過程分配足夠的時間。還需要牢記一些準則,這將有助于確保圖標可識別且易于使用。
事不宜遲,下面給大家介紹圖標設(shè)計中的五條黃金法則,學會之后你離高級UI設(shè)計師又進了一步。
1.注意網(wǎng)格
圖標設(shè)計中的許多內(nèi)容都由網(wǎng)格控制。在設(shè)計圖標時,您需要密切注意像素網(wǎng)格以及圖標如何適應(yīng)像素網(wǎng)格。
確保圖標緊貼像素網(wǎng)格的最簡單方法是堅持整數(shù)。避免小數(shù)點-這些家伙會使圖標的邊緣產(chǎn)生模糊。讓我們看一下實際情況。
在下面,我繪制了一個簡單的房屋圖標,并打開了像素網(wǎng)格。在左側(cè),您可以看到一個圖標,該圖標由完全適合像素網(wǎng)格的筆觸組成。在右側(cè),筆觸略有下降。您可以通過查看組成像素網(wǎng)格的線來分辨它們,它們一直貫穿到筆畫。
現(xiàn)在,讓我們看一下構(gòu)成屋頂?shù)膶蔷€。這些并不完全位于網(wǎng)格上。我們將無法使它們合適,因為網(wǎng)格由垂直和水平線組成,沒有對角線。在這些情況下,我們確保構(gòu)成對角線的起點和終點位于網(wǎng)格上。
2.清晰度
我們有時會在很小的地方放圖標,例如iPhone上的標簽欄。隨著標簽欄的大小圖標也會適當?shù)淖冃?。這個適合圖標可能就會變模糊看不清。
在做小圖標的設(shè)計時,圖標的線條要比正常圖標的細一些。盡量做一些直角的圖標,避免圓角會模糊不清。要點就是確保即使小尺寸的圖標也能使用戶清晰的閱讀,給用戶良好的視覺體驗。
3.保持一致
當我們設(shè)計一組圖標時,它們應(yīng)該像一個家庭。它們看起來并不完全相同,但是具有相似的視覺屬性,使它們彼此相關(guān)。
在設(shè)計時,請做出一致的樣式選擇。例如,如果您使用了圓角并以一個圖標結(jié)束,請確保其余所有都使用。樣式,大小和詳細程度都應(yīng)保持一致。這有助于形成連貫的視覺語言,這是品牌塑造的關(guān)鍵部分!
4.測試
確保圖標與用戶清晰,快速地通信的最佳方法是對其進行測試。設(shè)計完圖標后,最好進行快速測試。
向朋友或團隊中的其他人顯示圖標。讓他們告訴您,當他們看到他們時想到的第一件事。如果它與您要交流的內(nèi)容保持一致,那么您的設(shè)計就成功了一半!
5.設(shè)計簡單的形狀
一切都可以分解為基本形狀如上面的房屋圖標案例?我們設(shè)計了兩個矩形和一個三角形。
定義完圖標后,請嘗試將其分解為簡單的形狀。這是開始構(gòu)建和簡化圖標的最佳方法。
填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!
?2007-2022/ www.mwtacok.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc