圖標(biāo)|幫你成就優(yōu)質(zhì)APP圖標(biāo)的三個(gè)關(guān)鍵點(diǎn)
每個(gè)APP都必要一個(gè)漂亮的圖標(biāo),而每個(gè)設(shè)計(jì)師也都力圖讓本身APP的圖標(biāo)看起來(lái)漂亮而吸引人。為了在APP Store 和APP列表中脫穎而出,優(yōu)質(zhì)的圖標(biāo)設(shè)計(jì)是如此的讓設(shè)計(jì)師渴求。失敗的APP圖標(biāo)設(shè)計(jì)有著各不雷同的緣故原由,而成功的APP圖標(biāo)設(shè)計(jì)則有著相似的特征,這也是促成今天這篇文章的緊張緣故原由。
制作一個(gè)對(duì)用戶(hù)友愛(ài)、具備優(yōu)秀識(shí)別度的好的APP圖標(biāo),應(yīng)該遵循什么樣的設(shè)計(jì)規(guī)則?讀下去,下面所遴選的三個(gè)最實(shí)用的規(guī)則,應(yīng)該能夠幫你在迷霧中,辟開(kāi)一條道路。
1、設(shè)計(jì)一個(gè)高識(shí)別度的圖標(biāo)
首先,圖標(biāo)必要表情達(dá)意,傳達(dá)信息。一個(gè)必要讓用戶(hù)猜測(cè)的圖標(biāo)并不是一個(gè)稱(chēng)職的圖標(biāo)。
對(duì)于你的APP而言,圖標(biāo)就是它的臉面,一覽無(wú)余的圖標(biāo)設(shè)計(jì)能夠讓用戶(hù)曉暢你的APP的功能與意義。當(dāng)你為你的APP設(shè)計(jì)圖標(biāo)的時(shí)候,你應(yīng)當(dāng)時(shí)刻謹(jǐn)記一件事情:圖標(biāo)是借助隱喻和聯(lián)想來(lái)同用戶(hù)溝通的,假如它的形象或者暗示的操作不能讓用戶(hù)馬上曉暢,那么這個(gè)圖標(biāo)就不具備優(yōu)秀的可用性。因此,讓你的圖標(biāo)清晰直觀是至關(guān)緊張的:
不要使用抽象的圖標(biāo)設(shè)計(jì),由于抽象的圖標(biāo)設(shè)計(jì)很少能夠正常工作。用戶(hù)很難寄托以往的經(jīng)驗(yàn)來(lái)弄曉暢圖標(biāo)背后的含義,iOS中游戲中間的圖標(biāo)設(shè)計(jì)就是一個(gè)相稱(chēng)典型的反例。這個(gè)圖標(biāo)是一組多彩、具有玻璃質(zhì)感的圓圈組成的,它看起來(lái)像氣球,大概能夠喚起部分用戶(hù)的想象,但是人們通常很難曉暢它的確切含義。
而一個(gè)安全的設(shè)計(jì)思路是使用用戶(hù)能夠一眼分辨得出來(lái)的形象,如許用戶(hù)就很容易識(shí)別了。絕大多數(shù)的用戶(hù)都能夠清晰地認(rèn)出Home的圖標(biāo),打印和放大鏡這類(lèi)圖標(biāo)就更是廣泛地為用戶(hù)所了解。所以,當(dāng)我們看到Gmail 的圖標(biāo)的時(shí)候,哪怕是新用戶(hù),通常都能很快聯(lián)想到電子郵件。
2、盡力做到極簡(jiǎn)
找到一個(gè)能夠捕獲應(yīng)用程序本質(zhì)的元素,并盡量以簡(jiǎn)單的形態(tài)呈現(xiàn)出這個(gè)元素。然后,刪除這個(gè)圖標(biāo)中不需要的裝飾性的、冗余的內(nèi)容即可。
絕大多數(shù)的設(shè)計(jì)師盼望他們的APP的圖片看起來(lái)很棒,但是正像很多圖標(biāo)所共有的題目,核心的信息總是被太多的細(xì)節(jié)和冗余的裝飾所袒護(hù),很多過(guò)度設(shè)計(jì)的細(xì)節(jié)成為了阻礙用戶(hù)獲得優(yōu)秀體驗(yàn)的視覺(jué)噪音:
盡量不要在圖標(biāo)中包含沒(méi)有需要存在的、或者指向性或者涉及交互的文句,僅在需要的時(shí)候在LOGO中包含特定的筆墨。(至少如今沒(méi)需要在圖標(biāo)中加上“Free”的字樣了吧?)
不要在APP的圖標(biāo)中包含APP的名稱(chēng),由于APP的下方已經(jīng)有筆墨名稱(chēng)了。
不要在APP的圖標(biāo)中包含過(guò)度圖像細(xì)節(jié),由于這么小的尺寸,即使是視力正常的用戶(hù)也常??床磺迥敲葱〉募?xì)節(jié)。
不要包含照片和屏幕截圖啥的。
不要使用3D透視圖,由于3D透視和陰影在小圖標(biāo)上難于辨認(rèn)。
當(dāng)然,細(xì)節(jié)并非完全是圖標(biāo)的天敵。最緊張的事情照舊讓你的圖標(biāo)清晰而直觀,所以你必要做的更多的是平衡細(xì)節(jié)和團(tuán)體視覺(jué):
·當(dāng)你為你的圖標(biāo)選取一個(gè)合適的形象之時(shí),盡量選擇它最有代表性的特性,或者最常見(jiàn)、最具有識(shí)別度的特征來(lái)作為設(shè)計(jì)的基礎(chǔ),其他的部分盡量略去。
·設(shè)計(jì)圖標(biāo)的時(shí)候,盡量讓它擁有視覺(jué)焦點(diǎn),馬上捉住用戶(hù)的細(xì)致力,讓用戶(hù)記住你的APP。
以iOS的氣候APP為例,其中的太陽(yáng)和云是是讓用戶(hù)馬上記住“氣候”這一特性的元素。
3、在不同的背景下測(cè)試你所設(shè)計(jì)的APP圖標(biāo)
圖標(biāo)應(yīng)當(dāng)在所處的背景下清晰可見(jiàn)。
設(shè)計(jì)一個(gè)易于識(shí)別且極簡(jiǎn)的圖標(biāo)并非意味著你已經(jīng)完成設(shè)計(jì)了。正如同其他所有的UI元素一樣,完成設(shè)計(jì)之后必要對(duì)設(shè)計(jì)進(jìn)行測(cè)試和驗(yàn)證。你并不能控制用戶(hù)選擇屏幕背景,者也就意味著你必要測(cè)試不同的背景,確保你的APP 圖標(biāo)在不同的背景下都具有優(yōu)秀的識(shí)別度:
不要讓圖標(biāo)與背景融為一體。下面的股票APP在深色背景下幾乎無(wú)法識(shí)別。
不要使用透明的圖標(biāo)背景,確保你的圖標(biāo)能被輕松識(shí)別。
在具有動(dòng)態(tài)背景的手機(jī)上測(cè)試你的圖標(biāo)設(shè)計(jì),在背景的轉(zhuǎn)變與移動(dòng)過(guò)程中,測(cè)試你的APP圖標(biāo)的可用性。
結(jié)語(yǔ)
看了上面的三個(gè)技巧之后,你假如有所啟發(fā)并且發(fā)現(xiàn)你的圖標(biāo)尚有提拔空間的話,不妨動(dòng)手重新設(shè)計(jì)吧。
原文地址:
原文作者:Nick Babich
本文地址:http://m.likemindfilms.com/tutorial/di3983.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏