>
學(xué)校機(jī)構(gòu) >
交互時(shí)代UI實(shí)訓(xùn)基地 >
學(xué)習(xí)資訊>
界面UI設(shè)計(jì)中優(yōu)秀圖標(biāo)的雙要素
界面UI設(shè)計(jì)中優(yōu)秀圖標(biāo)的雙要素
68 2017-06-01
之前,交互時(shí)代有與大家簡(jiǎn)單的介紹過(guò),關(guān)于界面UI設(shè)計(jì)中圖標(biāo)的重要性,既然圖標(biāo)如此重要,那么界面UI設(shè)計(jì)中那些優(yōu)秀的圖標(biāo)又該如何進(jìn)行設(shè)計(jì)呢?今天,交互時(shí)代就來(lái)和大家說(shuō)說(shuō)關(guān)于界面UI設(shè)計(jì)中優(yōu)秀圖標(biāo)的雙個(gè)要素。
1.不管做大還是做小,好看的同時(shí)要有特色
圖標(biāo)的界面UI設(shè)計(jì)會(huì)出現(xiàn)在各種屏幕和菜單中。有些設(shè)備可能支持視網(wǎng)膜顯示屏,有些則沒(méi)有。在界面UI設(shè)計(jì)中設(shè)計(jì)這些圖標(biāo)時(shí),必須適配各種硬件環(huán)境及分辨率。
應(yīng)用的界面UI設(shè)計(jì)尺寸可能從1024x1024像素到10x10像素不等。
所以AppIconTemplate給出了很好的建議:
設(shè)計(jì)不同尺寸的界面UI設(shè)計(jì)的圖標(biāo),并在多種環(huán)境下測(cè)試。
界面UI設(shè)計(jì)的圖標(biāo)要簡(jiǎn)單,專注于單個(gè)要素或形狀。
縮放時(shí),圖標(biāo)應(yīng)清晰可辨。
我們發(fā)現(xiàn),大多數(shù)界面UI設(shè)計(jì)師都借助Illustrator、Photoshop或Sketch等軟件來(lái)實(shí)現(xiàn)圖標(biāo)的可縮放性。而對(duì)于第一次參與圖標(biāo)設(shè)計(jì)的新手來(lái)說(shuō),最好使用模板。
2.簡(jiǎn)單明了
一般應(yīng)用商店匯集了數(shù)百萬(wàn)個(gè)應(yīng)用。而應(yīng)用商店的界面UI設(shè)計(jì)一般是假設(shè)從左向右讀的設(shè)計(jì),所以用戶首先看到的是圖標(biāo),其次是應(yīng)用的標(biāo)題和預(yù)覽圖。如果通過(guò)圖標(biāo)就能大概了解應(yīng)用的功能,用戶會(huì)覺(jué)得很方便。
總是依賴于應(yīng)用的預(yù)覽圖像并不可靠(例如,如果進(jìn)入熱門(mén)榜單,應(yīng)用的預(yù)覽圖像就不予顯示)。因此圖標(biāo)的界面UI設(shè)計(jì)要有特色,要與眾不同。
以下是交互時(shí)代的一些經(jīng)驗(yàn)法則:
優(yōu)秀圖標(biāo)的界面UI設(shè)計(jì)的共同點(diǎn)之一是設(shè)計(jì)簡(jiǎn)單明了。但如果你的產(chǎn)品不是像Facebook或Google一樣的知名品牌,就別太依賴自身logo。
無(wú)論主要功能(例如可以使用購(gòu)物車的優(yōu)惠券應(yīng)用)、主要角色(例如游戲類應(yīng)用)是什么,圖標(biāo)的界面UI設(shè)計(jì)都應(yīng)該代表應(yīng)用的核心品牌價(jià)值。
圖標(biāo)的界面UI設(shè)計(jì)顏色應(yīng)醒目,同時(shí)反映應(yīng)用內(nèi)的配色方案。
Gmail、Dropbox和《跳跳先生(Mr.Jump)》的圖標(biāo)的界面UI設(shè)計(jì)在傳達(dá)應(yīng)用理念方面做得非常出色。它們?cè)趥鬟_(dá)信息的同時(shí),還突出了應(yīng)用的獨(dú)特賣(mài)點(diǎn)。
以上就是交互時(shí)代這次給大家?guī)?lái)的關(guān)于界面UI設(shè)計(jì)中優(yōu)秀圖標(biāo)的兩個(gè)個(gè)要素。如果想要了解更多關(guān)于UI設(shè)計(jì)的內(nèi)容,就多多關(guān)注交互時(shí)代的官網(wǎng)吧,或者掃描下方二維碼,關(guān)注交互時(shí)代的微信公眾平臺(tái),也能第一時(shí)間接收到我們的信息哦。
請(qǐng)聯(lián)系網(wǎng)站客服,了解詳細(xì)的優(yōu)惠課程信息~
優(yōu)質(zhì)、權(quán)威、便捷、省心
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號(hào)
獵學(xué)網(wǎng)服務(wù)號(hào)