圖標是UI設(shè)計中的點睛之筆,更是賦予了UI設(shè)計靈魂。很多小伙伴留言說不會做圖標設(shè)計,所以今天AAA教育胡老師今天談?wù)?a href="http://5wd995.cn/ui/2842.html" target="_blank">圖標設(shè)計。
圖標是 UI 設(shè)計中必不可少的組成。通常我們理解圖標設(shè)計的含義,是將某個概念轉(zhuǎn)換成清晰易讀的圖形,從而降低用戶的理解成本,提升界面的美觀度。在我們的企業(yè)級應(yīng)用設(shè)計范圍中,圖標在界面設(shè)計的諸多元素中往往只占了很小的比重,在調(diào)用時也會被縮到比設(shè)計稿小很多倍的尺寸,加上在圖形素材極度豐富并且便于獲取的今天,在產(chǎn)品設(shè)計體系中實現(xiàn)一套美觀、一致、易用、便于延展的圖標體系往往會被不小心忽略掉。相信一整套優(yōu)質(zhì)的圖標對于設(shè)計質(zhì)量的影響是非常巨大的,這考驗著設(shè)計師的協(xié)作能力,以及對圖形塑造的系統(tǒng)性思維,同時也能反映一個團隊對于細節(jié)的追求。
尺寸
由于圖形化用戶界面的使用環(huán)境不同,導致圖形用戶界面在使用中的顯示環(huán)境不同。因此,圖形化用戶界面的圖標尺寸,也出現(xiàn)了不同。同時,隨著顯示技術(shù)的不斷發(fā)展,圖標對應(yīng) 的顯示尺寸越來越大,分辨率越來越高,這使得圖標的細節(jié),也不斷地在進行改進中。并且跨平 臺軟件的圖標大小或像素的數(shù)量,通常按照特定的技術(shù)規(guī)范進行設(shè)計 。一般的圖標標準尺寸有3種,分別為24*24 像素、32*32像素和48*48像素。其中48*48較為常見。
圖標設(shè)計,不同于其他的視覺設(shè)計。同一圖標,由于其尺寸不同,展示效果和制作細節(jié)也不盡相同。因此,在不同顯示系統(tǒng)下的圖標,在圖標設(shè)計時,都有其對應(yīng)的圖標效果。
高識別性原則
圖標設(shè)計的目的,是通過符號化的圖形傳達 信息。因此,圖標設(shè)計中高識別性原則就顯得尤其重要。圖標,是建立在虛擬世界和真實世界的一種隱喻或映射關(guān)系的橋梁。隱喻旨在“以一種更為明顯,更為熟悉的觀念符號來表示某種觀念”,觀念之間存在著類似性。
統(tǒng)一性原則
一個軟件或程序的系統(tǒng)中,圖標的設(shè)計風格 需要保持統(tǒng)一。因為統(tǒng)一的圖標比單一零散的圖標更具品質(zhì),更容易讓用戶理解和接受。(如下圖美團APP)
簡潔性與符號性原則
視覺圖案的寫實程度,與受眾對 視覺圖案的關(guān)注度,是成正比的。即越寫實的圖案,越容易引起受眾的關(guān)注。因此,設(shè)計師在進行圖標設(shè)計時,其設(shè)計的圖標的視覺表現(xiàn)越是逼真,越是可以引起用戶更多的注意,也可激發(fā)更多用戶的使用興趣。但是,形象寫實逼真的圖標設(shè)計,卻也從另一個方面影響了圖標信息的快速傳達。
象征性的符號,在圖標設(shè)計中也是常見的。符號圖標能夠更快地被用戶所接受、記憶和識別。同時,符號圖標所使用的圖形文件小,便于硬件的支持和運算效率的提高。因此,在圖標設(shè)計時,盡量不要使用過于復(fù)雜的圖案。過多的圖形和裝飾效果,會降低圖形的認知度,特別是在小尺寸圖標中,由于圖標尺寸偏小,導致視覺上的識別度降低。
文字應(yīng)用原則
在圖標設(shè)計中,除了圖形設(shè)計之外,還有一 個重要的組成部分就是文字。簡潔明快的文字標簽和清晰準確的文字說明,能更好地提高圖形化用戶界面的工作效率 。在設(shè)置圖標文字時,最好使用簡單通俗的文字作為圖標的說明文字。在圖標文字的選擇上,需要具備高度的概括性。同時,圖標文字又需要有高度的信息傳達性,能夠充分體現(xiàn)其是對圖標圖案的一種解釋和說明。
在圖標文字的設(shè)計中,需要對文字屬性和文字使用環(huán)境進行考慮。而文字的字體、尺寸和色彩等方面,也會對圖標的整體視覺和運行效果產(chǎn)生影響。在文字字體的選擇上,考慮圖標字體的形態(tài)不宜復(fù)雜。文字的識別度差異,在通常情況下,中文字體應(yīng)不小于14px,英文字體應(yīng)不小于 12px。另外,應(yīng)該盡量使用均勻的間距,使文字更為整齊清晰,易于辨體識。
圖標的設(shè)計是 UI 設(shè)計中非常容易被忽略的環(huán)節(jié),建立優(yōu)秀的圖形體系也不是一、二個設(shè)計人員的事,需要整個團隊在設(shè)計前、設(shè)計中以及設(shè)計后都能夠達成共識并且通力合作去完成共建。本次圖標的升級,僅僅是一個開始。我們會建議在調(diào)用圖標時,考慮具體業(yè)務(wù)對于圖形化寄予的期望,以及用戶操作時的心智模型等因素,結(jié)合實際情況做調(diào)用和適當?shù)亩卧O(shè)計。如果想學習更多的UI設(shè)計小技巧可以去AAA教育官網(wǎng)查看更多哦~
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!
?2007-2022/ 5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc