這是一個注意事項清單,也可以被視作為圖標設計指南,即使設計趨勢發(fā)生變化,這些規(guī)則和經驗依然適用。遵循這些規(guī)則和技巧,能夠確保圖標從設計到使用都可以更加無縫和順暢。今天AAA教育郭老師就針對UI設計中的圖標設計指南進行簡單的說明一下。
我們并沒有重新發(fā)明輪子,相反,我們會以這種方式來呈現(xiàn)我們的工作流程細節(jié),希望它也能幫你有效地組織工作。
循序漸進地設計圖標
像我們需要系統(tǒng)而大量地設計圖標,設計流程是最重要的事情。正如你所看到的,繪制流程在圖標繪制之前,就已經開始了。
了解你要創(chuàng)建的圖標的含義。明白不同圖標的使用場景,不同的圖標分別代表著什么,了解哪些圖標需要使用隱喻,哪些圖標使用現(xiàn)實世界中真實的形象。
梳理出圖標正確的隱喻,腦暴出可能的符號和形象。記住圖標的含義和形象之間的關聯(lián),以最佳的形式呈現(xiàn)圖標,直指本質。借助詞典和單詞集來獲取圖標相關的概念的關鍵詞,同義詞和定義。簡化和抽象你的想法,你會找到一個抽象概念「翻譯」出來的對象。
不要拘泥于現(xiàn)在當前的任務和狀態(tài),盡量進行徹底的調研,盡可能地搜集相關參考資料??赡苡腥艘呀洖檫@一主題設計了很不錯的圖標版本,可以參考已有的設計,獲取靈感。
確定圖標的樣式。圖標應該是扁平的,線性的,Material Design,是用符號還是借助手繪來呈現(xiàn)。有的 UI界面有很清晰的要求,比如 iOS 平臺和 Material Design,如果 UI 有非常清晰固定的設計風格,那么圖標的設計需要盡量貼近。
按照選定的方式來呈現(xiàn)設計,看看它最終呈現(xiàn)是否正確。保持整體設計的一致性。
注意圖標要矢量化,連基本的草圖都應該是矢量化的。
在 UI 布局中測試圖標的設計。
Icons8 的實戰(zhàn)案例
按照上面的流程,能夠繪制出不同樣式足夠優(yōu)秀的圖標合集。下面是我們在這樣的流程下所設計出來的圖標示例。
圖標設計
動物圖標
老式圖標
注意事項清單
如果你像我們一樣每天設計圖標的話,也會碰到各種各樣的問題。其中最重要的是下面的注意事項清單,它們能夠確保我們不同的人在不同的時期不同狀態(tài)下,設計出來的圖標能夠協(xié)調到一個主題、一個系統(tǒng)當中。如果你也要設計圖標的話,可以將下面的清單打印出來,貼在自己的桌子旁邊作為參考。
1. 像素完美
讓圖標踩在每個像素點上,確保清晰不模糊。
2. 視覺重量
用斜視的方法來感知圖標,看看成套的圖標是否都具有相同的大小。斜視、調整、再看、再調整,直至均勻理想。為了保持總體視覺重量的一致性,我們會使用「完美的圓形和正方形」來和所有的新圖標進行對比。
3. 幾何圖形
盡量使用簡單堅實的幾何形狀來繪制所有必要的線條,它們會讓你的圖標顯得更加牢固可靠,具有吸引力和說服力。
4. 清晰簡潔
刪除所有無法傳達圖標概念的細節(jié),避免讓圖標顯得沉重而復雜。
5. 足夠的空間
確保圖標內每個細節(jié)和元素都有足夠的空間,不會顯得過于擁擠或者空曠。
6. 對比度
在黑色和白色的背景上檢查圖標的全部細節(jié),看看是否其中的每種顏色都是可見的,以及元素之間的對比是否足夠。
7. 視覺統(tǒng)一
檢查線條的粗細重量,邊角的大小,配色方案,細節(jié)層次和設計元素在整個合集中是否是不變且一致的。
8. 圖層排序
確保圖標中圖層順序清晰而規(guī)整。這是一種良好的習慣和專業(yè)的精神。
總結
想要讓 圖標設計更加優(yōu)秀,其實在很多時候都需要在細節(jié)上打磨即可。郭老師之前也分享過《2020年UI設計的10個趨勢》、《UI設計中評論區(qū)設計指南》、《UI設計中啟動頁的三種設計類型》、《UI設計中響應式設計技巧》等,類似這樣的方法有很多,后面我還會繼續(xù)補充。如果你想了解更多的知識,請把問題留言給在線小姐姐,我會進行一一解答。想看更多,敬請關注AAA教育官網。
填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!
?2007-2021/ m.5wd995.cn 北京漫動者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc