- 相關(guān)推薦
APP中圖標設計的小技巧
在早期的計算機圖形學(xué)領(lǐng)域內，圖標只能在有限的范圍內被使用。下面是小編分享的APP中圖標設計的小技巧，歡迎大家參考!
從人機交互的角度來(lái)說(shuō)，使用圖標比使用文本更具有優(yōu)勢，原因如下：
簡(jiǎn)單、醒目、而且友好，可以取代一段冗長(cháng)枯燥的描述;
隨著(zhù)屏幕尺寸變的越來(lái)越小，使用圖標可以節省空間，這點(diǎn)是很受歡迎的;
使用圖標看起來(lái)很舒服，并能增加設計的藝術(shù)感染力;
最后(但同樣重要的是)，在大多數應用中使用圖標，是一種為用戶(hù)熟知的設計模式。
盡管圖標有這些潛在的優(yōu)點(diǎn)，但如果設計時(shí)不考慮其潛在的負面影響，也會(huì )常常導致可用性問(wèn)題這篇文章致力于總結UI中與圖標相關(guān)的一系列主要問(wèn)題，并提出一套對這些問(wèn)題的解決方法。您可以在圖標設計中使用這些技巧作為起步，來(lái)更好地完成工作。
1.圖標應傳達含義
設計師們有時(shí)會(huì )過(guò)于注重形式，忽略了本身的功能，導致圖標難以識別，這打破了它最重要的圖形意象屬性-圖標的傳達含義功能必須放在首位。按照定義，圖標是一個(gè)對象或動(dòng)作的視覺(jué)體現。如果對于用戶(hù)而言，這個(gè)對象或行動(dòng)不明確，該圖標就立刻失去它的實(shí)用價(jià)值，并成為一個(gè)視覺(jué)干擾。
以下是一些在用戶(hù)心中享有普遍共識的圖標。(首頁(yè)、打印機、用于搜索的放大鏡都是屬于這種類(lèi)型)。
但除了這些例子，對用戶(hù)而言大部分圖標的意思仍舊模棱兩可，以為它們還具有不同的含義。例如游戲中心圖標，是一組色彩鮮艷玻璃感的圓圈。這代表了什么含義?它與游戲有什么關(guān)系?
看看另一個(gè)例子︰ 當谷歌決定簡(jiǎn)化 Gmail 用戶(hù)界面，把所有功能隱藏在一個(gè)抽象的圖標之下，他們得到的是一大堆用戶(hù)的幫助請求，比如“我的谷歌日歷在哪里?”
無(wú)論你能理解多少這個(gè)圖標的含義和代表的功能，對初次看到這個(gè)圖標的用戶(hù)來(lái)說(shuō)體驗仍舊可能完全不同。假定用戶(hù)都熟悉這些抽象的圖形是一個(gè)普遍的錯誤。
圖標的首要任務(wù)是引導用戶(hù)去他們需要去的地方，所以請確保他們能夠實(shí)現這個(gè)目標︰
使用 5 秒鐘規則︰ 如果花了你超過(guò)5 秒考慮一個(gè)合適的圖標。這個(gè)圖標不太可能有效地傳達含義。
選擇熟悉的圖標：用戶(hù)對圖標的理解往往基于以前的經(jīng)驗。讓自己熟悉競品所使用的圖標和常用的目標平臺上的圖標(現有系統圖標)，那些是用戶(hù)最容易辨認的。
2.保持圖標的簡(jiǎn)單和示意
在大多數情況中，設計圖標無(wú)需發(fā)揮創(chuàng )意。別誤會(huì )，并不是說(shuō)創(chuàng )新圖標是不好的，但基本功能太花哨的圖標可能會(huì )對用戶(hù)體驗產(chǎn)生負面影響。如果你想展示你的設計技能，你可以依靠其他設計元素傳達你的產(chǎn)品信息，同時(shí)保持系統圖標的設計簡(jiǎn)單、現代、友好。
圖標設計理念的本質(zhì)是減到最簡(jiǎn)形態(tài)-簡(jiǎn)化圖標是出于降低學(xué)習曲線(xiàn)的需要。設計應確保即使圖標在小尺寸更具有可讀性和清晰度，所以精心設計的圖標應該能夠快速辨認，一目了然。
3.包含清晰可見(jiàn)的文本標簽
良好的用戶(hù)體驗可以定義在很多方面，但衡量標準之一是減少了多少用戶(hù)思考的成本。清晰是一個(gè) 好界面的最重要特征。圖標的設計應該幫助用戶(hù)毫不費力知曉他們要做什么。但是，圖標的問(wèn)題在于用戶(hù)會(huì )基于之前的經(jīng)驗對每個(gè)圖標聯(lián)想出不同的含義。假定用戶(hù)(特別是手機用戶(hù))會(huì )為了探索每個(gè)圖標的功能而一一試用是另一個(gè)常見(jiàn)的誤解。
事實(shí)上，用戶(hù)面對不熟悉的界面常常有不安全感，而且并不會(huì )到他們的舒適區域之外探索。在一些特殊的上下文環(huán)境里，為避免幾乎所有圖標都可能會(huì )產(chǎn)生的歧義，應該在圖標周?chē)O計一個(gè)文本標簽用于清晰表達其含義。為用戶(hù)在點(diǎn)擊前設定清楚的預期。
UserTesting(一家為開(kāi)發(fā)者提供測試用戶(hù)的創(chuàng )業(yè)公司)進(jìn)行了一系列關(guān)于是否是要標簽的測試，結果發(fā)現：
對于帶有標簽的圖標，88%的情況下，用戶(hù)輕點(diǎn)圖標時(shí)可以準確地預測接下來(lái)會(huì )發(fā)生什么。
對于沒(méi)有標簽的圖標，這個(gè)數字下降到60%。對于那些特殊的圖標，這個(gè)數字只有34%。
這里有三個(gè)重要的情境需要考慮：
對于更多復雜且抽象的功能來(lái)說(shuō)，圖形化的表達具有局限性。所以他們應該使用合適的文本標簽來(lái)展示。
文本標簽應該始終保持可見(jiàn)，不應讓用戶(hù)進(jìn)行任何交互才能看見(jiàn)。有的設計師發(fā)現文本標簽破壞了他們使用圖標想達到的效果并且使界面變的散亂，往往會(huì )在圖標旁添加教程、引導遮罩、彈出提示框。但是用戶(hù)會(huì )跳過(guò)這些教程并很快忘記他們剛剛學(xué)習到的。同樣不要想著(zhù)依賴(lài)鼠標懸浮現實(shí)文本標簽：不僅是因為這樣需要額外操作，在觸屏上也不太適用。
文本標簽和圖形結合在一起比單獨使用其中之一效果更好。但是，如果僅能使用其一文本比單使用圖形要好。在表達清晰度這一點(diǎn)上，文本標簽總是更勝一籌。
4. 使圖標的觸控體驗更佳(手機應用)
人們使用手指與基于觸控的界面進(jìn)行交互。較小的目標和錯誤的行為會(huì )使用戶(hù)沮喪，所以UI控件要足夠大才能承載手指尖的動(dòng)作。下圖顯示成人手指的平均寬度大約在11mm，嬰兒的是8mm，而一些籃球運動(dòng)員竟會(huì )具有超過(guò)19mm的寬度!
人們常常譴責自己具有“胖手指”。但是即使是嬰兒的手指也會(huì )比多數點(diǎn)擊目標要寬。
觸屏對象的推薦點(diǎn)擊目標尺寸大約是7-10mm。以下是蘋(píng)果和谷歌平臺的規范(iOS人機界面規范和material 設計)：
蘋(píng)果推薦的最小點(diǎn)擊目標尺寸為44×44像素。由于物理像素的尺寸會(huì )隨著(zhù)屏幕分辨率發(fā)生變化，在3.5寸的屏幕上，蘋(píng)果推薦的尺寸是320*480。
谷歌則推薦觸控目標的尺寸至少為48x48dp。多數情況下，這些觸控目標應使用至少8dp的空間分隔來(lái)確保信息密度的平衡性與可用性。無(wú)論屏幕尺寸有多大，一個(gè)48x48dp的觸控目標需要9mm的物理尺寸。觸控目標包括響應用戶(hù)輸入的區域。觸控目標的面積往往超過(guò)一個(gè)元素的可視區域：比如一個(gè)圖標形狀是24x24dp，但是加上周?chē)拈g距，共同組成了48x48dp的觸控面積。
需要考慮的重要情境：
觸控目標之間的有效間距。設置觸控目標間的最小距離是為了防止用戶(hù)引起錯誤的操作。這在兩個(gè)相鄰操作互斥時(shí)尤為重要：比如“保存”和“取消”圖標并列存在時(shí)使用至少2mm的間距。
5. 不要跨平臺使用圖標
當你在設計Android/iOS應用時(shí)，不要使用其他平臺特定的UI元素。各平臺為某些常用功能使用一套典型的圖標，比如分享、新建和刪除。當你轉換應用到另一個(gè)平臺時(shí)，你應替換掉相對應的圖標。
6.測試你的圖標
圖標的使用應極盡小心：始終進(jìn)行可用性測試。一旦你已經(jīng)熟悉一個(gè)界面，很難再使用全新的眼光審視它并使用直觀(guān)的感覺(jué)分辨它。所以，觀(guān)察一個(gè)新用戶(hù)如何與UI交互很重要，因為他可以幫助你判斷圖標是否足夠清晰。
測試圖標的可識別性。詢(xún)問(wèn)用戶(hù)期望圖標可以代表哪些功能。避免設計一些用戶(hù)看到后不知道他們該做什么的圖標，因為沒(méi)人會(huì )想玩捉迷藏。
測試圖標的可記憶性。難以記憶的圖標常常使用低效。告訴一組用戶(hù)圖標代表的含義，幾個(gè)星期后再詢(xún)問(wèn)他們是否還記得。
小結
圖標圖形學(xué)是UI設計的核心：對于界面的可用性來(lái)說(shuō)，它是一把雙刃劍。如同用戶(hù)體驗設計的方方面面，界面中使用的所有圖標都應有目的性。當你設計對路的時(shí)候，圖標能幫助你簡(jiǎn)單而直觀(guān)的引導用戶(hù)。
【APP中圖標設計的小技巧】相關(guān)文章：
APP中圖標設計的應用技巧06-07
網(wǎng)頁(yè)設計中的小技巧08-04
設計中配色的小技巧10-19
網(wǎng)頁(yè)設計中優(yōu)化圖片的小技巧09-02
Java架構設計和開(kāi)發(fā)中的小技巧09-28
ps中的配色小技巧10-24
網(wǎng)頁(yè)設計小技巧06-03
Fireworks打造水晶圖標的技巧07-21
網(wǎng)頁(yè)設計中的模糊技巧10-13