雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

UI圖標(biāo)設(shè)計五大原則,輕松解決你的設(shè)計疑問

Time: 2020-01-09

UI圖標(biāo)的設(shè)計在我們?nèi)粘I钪惺欠浅3R姷?,而且它的運用也是非常廣發(fā)的,但是有很多新手UI設(shè)計師卻對它非常頭疼,下面我們跟隨小編一起來了解一下UI圖標(biāo)設(shè)計的相關(guān)資料吧。


UI圖標(biāo)設(shè)計原則

一、統(tǒng)一性原則

  一個軟件或程序的系統(tǒng)中,圖標(biāo)的設(shè)計風(fēng)格需要保持統(tǒng)一。因為統(tǒng)一的圖標(biāo)比單一零散的圖標(biāo)更具品質(zhì),更容易讓用戶理解和接受。圖標(biāo)的造型設(shè)計,可以使用輕松詼諧的繪畫風(fēng)格,也可以使用簡潔明快的平面剪影效果或酷炫時尚的3D效果。

 ?、賵D標(biāo)的透視效果表現(xiàn),是圖標(biāo)造型中的重要因素。如果某一圖標(biāo)元素的造型設(shè)計成平行透視的表現(xiàn)效果,那么其他的圖標(biāo),也要按照平行透視效果來進(jìn)行設(shè)計。而如果圖標(biāo)元素視覺效果是成某一個特點角度,即成角透視效果,那么其他所有的圖標(biāo),都要按照這個特定角度進(jìn)行設(shè)計。

 ?、趫D標(biāo)的光影效果表現(xiàn),也能很好地體現(xiàn)圖標(biāo)的統(tǒng)一性。圖標(biāo)的光影效果,如果不是從同一光源角度射入,那么可能會導(dǎo)致整個圖標(biāo)系統(tǒng)視覺混亂。使用統(tǒng)一的光源效果,不僅可以使圖標(biāo)整體效果統(tǒng)一,而且也會讓使用者覺得圖標(biāo)的設(shè)計比較專業(yè)。

 ?、蹐D標(biāo)的色彩風(fēng)格,也需要和圖標(biāo)造型風(fēng)格相統(tǒng)一。特別是在色彩的選擇和搭配上,盡量考慮色彩三屬性的協(xié)調(diào),色相、明度或純度3項中至少有1項是相互統(tǒng)一協(xié)調(diào)的。同時,顏色選用也不宜過多,因為過多的顏色在一個很小的區(qū)域里出現(xiàn),會讓人產(chǎn)生雜亂的感覺,影響到最終視覺效果。


1.jpg

(圖片來自網(wǎng)絡(luò))


  二、用戶認(rèn)知性與識別性原則

  圖標(biāo)設(shè)計的目的,是通過符號化的圖形傳達(dá)信息。因此,圖標(biāo)的用戶認(rèn)知性與識別性原則,在圖標(biāo)設(shè)計中就顯得尤其重要。圖標(biāo),是建立在虛擬世界和真實世界的一種隱喻或映射關(guān)系的橋梁。隱喻旨在“以一種更為明顯,更為熟悉的觀念符號來表示某種觀念”,觀念之間存在著類似性。

  在圖標(biāo)設(shè)計中,隱喻是一個相當(dāng)重要的表現(xiàn)手法。通過歸納和聯(lián)想,使圖標(biāo)的圖案造型與圖標(biāo)的使用功能,可以建立起最為直接的聯(lián)想。但是,這種直接的聯(lián)想關(guān)系,取決于圖標(biāo)使用用戶的認(rèn)知水平和認(rèn)知習(xí)慣。相較之下,具有隱喻表現(xiàn)手法的界面圖標(biāo)設(shè)計,可以化繁為簡,將抽象事物的內(nèi)涵明確化,讓使用者更容易理解和認(rèn)知,因此顯著地提高了圖標(biāo)在人機交互間的有效性和準(zhǔn)確性。


  三、簡潔性與符號性原則

  視覺圖案的寫實程度,與受眾對視覺圖案的關(guān)注度,是成正比的。即越寫實的圖案,越容易引起受眾的關(guān)注。因此,設(shè)計師在進(jìn)行圖標(biāo)設(shè)計時,其設(shè)計的圖標(biāo)的視覺表現(xiàn)越是逼真,越是可以引起用戶更多的注意,也可激發(fā)更多用戶的使用興趣。但是,形象寫實逼真的圖標(biāo)設(shè)計,卻也從另一個方面影響了圖標(biāo)信息的快速傳達(dá)。

  在小尺寸圖標(biāo)中,由于圖標(biāo)尺寸偏小,導(dǎo)致視覺上的識別度降低。

  同時,也需要避免過多的元素在同一圖標(biāo)中出現(xiàn)。如果必須在圖標(biāo)中加入過多元素的話,那么就要盡量在圖標(biāo)設(shè)計時保持強烈的符號品質(zhì),讓主體圖案以符號化的形式出現(xiàn)。在圖標(biāo)中,應(yīng)謹(jǐn)慎地設(shè)置圖標(biāo)的圖形元素,因為不可能所有的圖標(biāo),都有使用簡約的黑白剪影效果。


2.jpg

(圖片來自網(wǎng)絡(luò))


  四、尺寸性原則

  由于圖形化用戶界面的使用環(huán)境不同,導(dǎo)致圖形用戶界面在使用中的顯示環(huán)境不同。因此,圖形化用戶界面的圖標(biāo)尺寸,也出現(xiàn)了不同。同時,隨著顯示技術(shù)的不斷發(fā)展,圖標(biāo)對應(yīng)的顯示尺寸越來越大,分辨率越來越高,這使得圖標(biāo)的細(xì)節(jié),也不斷地在進(jìn)行改進(jìn)中。并且跨平臺軟件的圖標(biāo)大小或像素的數(shù)量,通常按照特定的技術(shù)規(guī)范進(jìn)行設(shè)計 。一般的圖標(biāo)標(biāo)準(zhǔn)尺寸有4種,分別為像素、24×24 像素、32×32像素和48×48像素。

  ui圖標(biāo)設(shè)計,不同于其他的ui視覺設(shè)計。同一圖標(biāo),由于其尺寸不同,展示效果和制作細(xì)節(jié)也不盡相同。因此,在不同顯示系統(tǒng)下的圖標(biāo),在圖標(biāo)設(shè)計時,都有其對應(yīng)的圖標(biāo)效果。



  五、文字應(yīng)用原則

  在圖標(biāo)設(shè)計中,除了圖形設(shè)計之外,還有一個重要的組成部分就是文字。簡潔明快的文字標(biāo)簽和清晰準(zhǔn)確的文字說明,能更好地提高圖形化用戶界面的工作效率 。在設(shè)置圖標(biāo)文字時,最好使用簡單通俗的文字作為圖標(biāo)的說明文字。在圖標(biāo)文字的選擇上,需要具備高度的概括性。同時,圖標(biāo)文字又需要有高度的信息傳達(dá)性,能夠充分體現(xiàn)其是對圖標(biāo)圖案的一種解釋和說明。

  在圖標(biāo)文字的設(shè)計中,需要對文字屬性和文字使用環(huán)境進(jìn)行考慮。而文字的字體、尺寸和色彩等方面,也會對圖標(biāo)的整體視覺和運行效果產(chǎn)生影響。在文字字體的選擇上,考慮圖標(biāo)字體的形態(tài)不宜復(fù)雜。文字的識別度差異,在通常情況下,中文字體應(yīng)不小于14px,英文字體應(yīng)不小于 12px。另外,應(yīng)該盡量使用均勻的間距,使文字更為整齊清晰,易于辨體識。


3.png

(圖片來自網(wǎng)絡(luò))


  圖標(biāo)中的文字使用,是對圖標(biāo)圖案的說明,能夠讓用戶高效、快速地讀懂圖標(biāo)所需要傳達(dá)的全部信息。圖標(biāo)文字的設(shè)計,涉及到圖標(biāo)文字內(nèi)容的選擇、字體選取、字形安排以及文字的色彩的選用等多個方面,是綜合應(yīng)用的結(jié)果,也體現(xiàn)了圖標(biāo)文字應(yīng)用在圖形化界面中的重要性。


  其實小編覺得UI圖標(biāo)設(shè)計并沒有大家想象中的那么復(fù)雜,關(guān)鍵只要抓住UI圖標(biāo)的設(shè)計原則,這樣才能做出更好的UI設(shè)計圖標(biāo)哦!


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開