Android設(shè)計(jì) - 圖標(biāo)設(shè)計(jì)概述(Iconography)

2014-10-30 張?jiān)骑wVIR 翻譯自:https://developer.android.com/design/style/iconography.html
Iconography 圖標(biāo)設(shè)計(jì)概述

一個(gè)圖標(biāo)是一個(gè)圖像底洗,它占據(jù)了一小部分屏幕不動(dòng)產(chǎn).并且為一個(gè)活動(dòng)(action)甘晤,狀態(tài)(status),或者一個(gè)app提供了一個(gè)快速邻眷,直觀的程序榛斯。

當(dāng)你為你的app設(shè)計(jì)圖標(biāo)時(shí),重要的需要留下的是,你的app可能被安裝在那些提供一個(gè)范圍的像素密度的多種設(shè)備中囤萤,就像 Devices and Displays 中提到的那樣。但是你可以在所有的設(shè)備上通過(guò)為每個(gè)圖標(biāo)提供多尺寸 來(lái)為你的圖標(biāo)提供更好的視覺(jué)效果是趴。當(dāng)你的app運(yùn)行時(shí)涛舍,安卓檢查設(shè)備屏幕的特性并且加載適當(dāng)?shù)闹付芏鹊哪鉧pp中的資源文件。

因?yàn)槟銓槊總€(gè)圖標(biāo)實(shí)現(xiàn)多個(gè)尺寸以支持多個(gè)不同的密度唆途,下面的設(shè)計(jì)指南使用 dp
作為圖標(biāo)尺寸的 計(jì)量單位
富雅,它是以中等密度(MDPI)屏幕作為 像素尺寸的基礎(chǔ)。



這樣肛搬,要?jiǎng)?chuàng)建一個(gè)適合不同密度的圖標(biāo)没佑,你應(yīng)該遵守在主要的5個(gè)密度(medium, high, x-high, xx-high, and xxx-high respectively)中使用 2:3:4:6:8 縮放比例。例如温赔,考慮到啟動(dòng)圖標(biāo)的尺寸的規(guī)范是48x48dp蛤奢。這個(gè)意思是 基線(MDPI)的資源是 48x48 px,并且 高密度(HDPI)資源應(yīng)該指定為1.5倍于基線的尺寸即72x72像素陶贼,并且 x高密度(x-hight 密度)資源應(yīng)該是2倍于基線即96x96 px,以此類推啤贩。

注意: 安卓也支持 低密度(low-density LDPI),但是一般情況下不要以這個(gè)尺寸創(chuàng)建自定義的資源拜秧,因?yàn)闀?huì)有效的向下縮放 1/2 倍 你的HDPI資源來(lái)匹配期望的大小瓜晤。

啟動(dòng)圖標(biāo)
啟動(dòng)圖標(biāo)是在主屏幕或者所有的app屏幕時(shí),你的app的可視化的代表腹纳。由于用戶可以更換主屏幕的墻紙痢掠,要確保你的啟動(dòng)圖標(biāo)在不同類型的背景下清晰可見(jiàn)驱犹。


尺寸和縮放
啟動(dòng)圖標(biāo)在移動(dòng)設(shè)備中必須是48x48dp
在Google Play顯示的啟動(dòng)圖標(biāo)必須是512*512像素

比例大小
完整的資源,48x48 dp

樣式
使用獨(dú)特的側(cè)影足画,三維的雄驹,前景視圖的,
使用一個(gè)輕微的透視好像從上看一樣淹辞,
這樣讓用戶的感覺(jué)有一些深度


活動(dòng)欄(Action Bar)
action bar 圖標(biāo)是一些圖形按鈕医舆,它在你的app里呈現(xiàn)了 對(duì)用戶非常重要的活動(dòng)。每一個(gè)圖標(biāo)應(yīng)該使用 一個(gè)簡(jiǎn)單的隱喻以呈現(xiàn)一個(gè)讓很多人瞄一眼就能明白的 簡(jiǎn)單的概念象缀,

預(yù)定義的一些圖形通常用于一些 確定的普通 活動(dòng)蔬将,比如 “搜索”,“分享“央星。下面的下載鏈接提供了一個(gè) 為支持多種屏幕密度的經(jīng)過(guò)縮放處理的圖標(biāo)下載包霞怀,可以和Holo Light 和Holo Dark 主題一起使用。這個(gè) 包 里也包含了一些 未樣式化 的圖標(biāo)莉给,那可以修改和匹配你的主題毙石,另外還有 Adobe? Illustrator? 的源文件以支持更多的自定義。
點(diǎn)擊下載這個(gè)action bar 的包 Download the Action Bar Icon Pack

尺寸和縮放
手機(jī)上的action bar 圖標(biāo)應(yīng)該是32x32dp

焦點(diǎn)區(qū)和尺寸
完整的資源颓遏,32x32 dp
視覺(jué)矩形區(qū)徐矩,24x24 dp

樣式
象形的,扁平的叁幢,不要太詳細(xì)滤灯,
使用平滑的曲線或者尖銳的圖形。
如果圖形是細(xì)條的曼玩,讓它向左旋轉(zhuǎn)45°
或者向右填滿焦點(diǎn)空間鳞骤。
筆畫的厚度和負(fù)空間應(yīng)該最小為2dp

顏色
顏色: #333333啟用時(shí): 60% 不透明度禁用時(shí): 30% 不透明度

顏色: #FFFFFF啟用時(shí): 80% 不透明度禁用時(shí): 30% 不透明度

小的/上下文關(guān)系 的圖標(biāo)
在你的app的內(nèi)部,使用小圖標(biāo)去表現(xiàn)活動(dòng)演训,或者為指定的項(xiàng)提供狀態(tài)弟孟。例如贝咙,在Gmail app中样悟,每個(gè)消息 都有一個(gè)星星的圖標(biāo),這個(gè)圖標(biāo)標(biāo)記了這個(gè)消息是重要的庭猩。




尺寸和縮放
小圖標(biāo)應(yīng)該是 16x16 dp

焦點(diǎn)區(qū)域和比例
完整的資源窟她, 16x16 dp
視覺(jué)平方區(qū)域,12x12 dp

樣式
中性的蔼水,平面的震糖,和簡(jiǎn)單的。填滿的性狀相對(duì)于細(xì)筆畫來(lái)說(shuō)是很容易看的趴腋。
使用一個(gè)簡(jiǎn)單的可視隱喻可以使用能夠很容易的認(rèn)出來(lái)和明白它的意圖


顏色
有目的的使用少量的 非中性 的吊说。例如论咏,Gmail使用了黃色
的星星圖標(biāo),為了指示一個(gè)做過(guò)書簽的消息颁井。如果一個(gè)圖標(biāo)
是活動(dòng)的厅贪,選擇一個(gè)和背景色形成對(duì)比的顏色。

通知圖標(biāo)(Notification Icons)
如果你的app產(chǎn)生了一個(gè)通知雅宾,提供一個(gè) 每當(dāng)一個(gè)消息可用時(shí)系統(tǒng)可以顯示在狀態(tài)欄上的 圖標(biāo) 养涮。




尺寸和縮放
通知圖標(biāo)必須是 24x24 dp

焦點(diǎn)區(qū)域和比例
完整的資源,24x24 dp
視覺(jué)平方區(qū)域,22x22 dp

樣式
保存樣式 平面和簡(jiǎn)單,
使用同樣的加單眉抬,可視化的隱喻作為你的啟動(dòng)圖標(biāo)

顏色
通知圖標(biāo)必須是完全的白色贯吓,
系統(tǒng)可以向下縮放 和使圖標(biāo) 變黑一些。

設(shè)計(jì)提示
這里是一些你會(huì)發(fā)現(xiàn)的蜀变, 在你創(chuàng)建圖標(biāo)或者其他drawable資源對(duì)你的app有用的提示悄谐。這些提示假設(shè)你使用了 Adobe? Photoshop? 或者一個(gè)類似的電子?xùn)鸥窕蛘呤噶繄D形編輯程序。

可能使用矢量圖形地方
許多圖形編輯程序昏苏,比如 Adobe? Photoshop? 運(yùn)行你 一個(gè)組合的矢量圖尊沸,和柵格層和更多效果∠凸撸可能的時(shí)候洼专,使用矢量圖,那樣如果 需求產(chǎn)生孵构,資源可以向上縮放屁商,而不丟失細(xì)節(jié)和脆化邊緣。
使用矢量圖也可以很容易的做到 對(duì)齊邊緣和 角落到像素邊界 的較小的解決方案颈墅。

使用大紙板開(kāi)始
因?yàn)槟阈枰獮椴煌钠聊幻芏葎?chuàng)建資源蜡镶,最好在大的多倍于目標(biāo)圖標(biāo)尺寸的紙板上開(kāi)始你的圖標(biāo)設(shè)計(jì)。例如恤筛,啟動(dòng)圖標(biāo)是 48,72,96官还,或者144像素寬度的,依賴于不同的屏幕密度(mdpi, hdpi, xhdpi, and xxhdpi, 分別的)毒坛。如果你最初在864x864 大的紙板上開(kāi)始繪制啟動(dòng)圖標(biāo)望伦,當(dāng)你為了最終的資源創(chuàng)作向下縮放紙板到目標(biāo)支持時(shí),它將被很容易的清晰的調(diào)整圖標(biāo)煎殷。

當(dāng)根據(jù)需要縮放屯伞,重畫位圖圖層
如果你要從一個(gè)位圖圖層向上縮放一個(gè)圖像,而不是從一個(gè)矢量圖層開(kāi)始豪直,那些圖層將需要被手動(dòng)的重畫而脆弱呈現(xiàn)在更高的密度下劣摇。例如,如果一個(gè)被繪制在 mdpi的 60x60 的圓形被顯示在 hdpi下將被重畫為90x90 的圓型弓乙∧┤冢【譯者注:大意是:將一個(gè)位圖放大的話钧惧,會(huì)導(dǎo)致圖像失真,變得模糊脆弱】

為圖標(biāo)資源使用公共的命名規(guī)范
嘗試去為文件命名勾习,這樣的話垢乙,當(dāng)它們按字母順序排列時(shí),相關(guān)聯(lián)的的資源將會(huì)作為一組在一起存在于一個(gè)文件夾內(nèi)语卤。特別的追逮,對(duì)于為每個(gè)圖標(biāo)類型使用公共的前綴來(lái)說(shuō),它是有幫助粹舵。例如:



注意: 你不需要為一些類型使用共享的前綴钮孵,僅在對(duì)你有便利時(shí)才這樣做。

設(shè)置一個(gè)按密度組織文件的工作空間(working space)
至此多種屏幕密度意味著你需要為相同的圖標(biāo)創(chuàng)建多倍的版本眼滤。幫助保持多份拷貝的文件的安全和容易去找到巴席,我們建議 在你的工作空間 創(chuàng)建一個(gè) 基于目標(biāo)屏幕密度來(lái)組織資源文件的文件夾結(jié)構(gòu)。例如:
art/... mdpi/... _pre_production/... working_file.psd finished_asset.png hdpi/... _pre_production/... working_file.psd finished_asset.png xhdpi/... _pre_production/... working_file.psd finished_asset.png xxhdpi/... _pre_production/... working_file.psd finished_asset.png

因?yàn)樵谀愕墓ぷ骺臻g里的結(jié)構(gòu) 和 你程序里結(jié)構(gòu)是相似的诅需,你可以快速的決定哪一個(gè)資源應(yīng)該被拷貝到每個(gè)資源文件夾漾唉。通過(guò)屏幕密度分離的資源也幫你察覺(jué)一些跨越密度的文件名中的差異。這個(gè)是非常重要的堰塌,因?yàn)殛P(guān)于不同密度的相應(yīng)的資源必須共享相同的文件名稱赵刑。
為了比較,下面是在一個(gè)經(jīng)典的應(yīng)用程序中的資源文件夾的結(jié)構(gòu):
res/... drawable-ldpi/... finished_asset.png drawable-mdpi/... finished_asset.png drawable-hdpi/... finished_asset.png drawable-xhdpi/... finished_asset.png drawable-xxhdpi/... finished_asset.png

關(guān)于如何在應(yīng)用程序的項(xiàng)目中保存資源的更多信息场刑,請(qǐng)參閱: 提供資源 Providing Resources.

提供一個(gè) xxx 高密度(xxx-high-density) 的 啟動(dòng)圖標(biāo)
一些設(shè)備向上縮放啟動(dòng)圖標(biāo)多達(dá)25%般此。比如,如果你的最高密度的啟動(dòng)圖標(biāo)圖像已經(jīng)在 xx-high密度下牵现,縮放進(jìn)程將會(huì)使得它展示的較少的松脆铐懊。這樣你應(yīng)該提供一個(gè)更高的密度的啟動(dòng)圖標(biāo)在drawable-xxxhdpi文件夾下,這個(gè)是系統(tǒng)用來(lái)替代向上縮放一個(gè)較小版本的圖標(biāo)瞎疼。
注意: drawable-xxxhdpi 這個(gè)限定詞僅僅在提供一個(gè) 在xxhdpi設(shè)備上比平常能展示更大點(diǎn)的 啟動(dòng)圖標(biāo)時(shí)需要科乎。你不需要去為你app的所有圖像資源提供 xxxhdpi 資源。
閱讀 支持多種屏幕Supporting Multiple Screens 以獲得更多信息贼急。

從最終的資源(資產(chǎn)asserts)中刪除不需要的元數(shù)據(jù)
盡管安卓SDK工具將會(huì)自動(dòng)的壓縮 png圖像資源(PNGs)茅茂,當(dāng)打包應(yīng)用程序資源到二進(jìn)制的應(yīng)用程序時(shí),一個(gè)好的實(shí)踐是竿裂,從你的PNG資源中移除不必要的頭(headers)和元數(shù)據(jù)(metadata)玉吁。這樣的工具 OptiPNG 或者 Pngcrush 可以確保這樣照弥,包括 這個(gè)元數(shù)據(jù)被刪除 和 你的圖像資源文件尺寸被優(yōu)化腻异。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市这揣,隨后出現(xiàn)的幾起案子悔常,更是在濱河造成了極大的恐慌影斑,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件机打,死亡現(xiàn)場(chǎng)離奇詭異矫户,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)残邀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門皆辽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人芥挣,你說(shuō)我怎么就攤上這事驱闷。” “怎么了空免?”我有些...
    開(kāi)封第一講書人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵空另,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蹋砚,道長(zhǎng)扼菠,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任坝咐,我火速辦了婚禮循榆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘墨坚。我一直安慰自己冯痢,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布框杜。 她就那樣靜靜地躺著浦楣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪咪辱。 梳的紋絲不亂的頭發(fā)上振劳,一...
    開(kāi)封第一講書人閱讀 52,457評(píng)論 1 311
  • 那天,我揣著相機(jī)與錄音油狂,去河邊找鬼历恐。 笑死,一個(gè)胖子當(dāng)著我的面吹牛专筷,可吹牛的內(nèi)容都是我干的弱贼。 我是一名探鬼主播,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼磷蛹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼吮旅!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起味咳,我...
    開(kāi)封第一講書人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤庇勃,失蹤者是張志新(化名)和其女友劉穎檬嘀,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體责嚷,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鸳兽,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了罕拂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揍异。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖爆班,靈堂內(nèi)的尸體忽然破棺而出蒿秦,到底是詐尸還是另有隱情,我是刑警寧澤蛋济,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布棍鳖,位于F島的核電站,受9級(jí)特大地震影響碗旅,放射性物質(zhì)發(fā)生泄漏渡处。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一祟辟、第九天 我趴在偏房一處隱蔽的房頂上張望医瘫。 院中可真熱鬧,春花似錦旧困、人聲如沸盯捌。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至梢睛,卻和暖如春召娜,著一層夾襖步出監(jiān)牢的瞬間闸与,已是汗流浹背恰力。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留陡蝇,地道東北人痊臭。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像登夫,于是被迫代替她去往敵國(guó)和親广匙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,306評(píng)論 25 707
  • 使用sketch最重要的一點(diǎn)是設(shè)計(jì)好控件的規(guī)范。 為做好設(shè)計(jì)規(guī)范需要對(duì)色彩進(jìn)行編號(hào),比如:color_a”_1蹋凝,c...
    youyeath閱讀 26,178評(píng)論 2 237
  • 5 圖標(biāo)和圖像設(shè)計(jì) 5.1 圖標(biāo)和圖像尺寸 任何app都需要app圖標(biāo)和啟動(dòng)文件或者圖片。除此之外总棵,一些app需要...
    Willry閱讀 1,504評(píng)論 4 10
  • 今天帶你去衛(wèi)生所看病鳍寂,本以為就是感冒和日常的其他小病,所以并沒(méi)有太放心上情龄,只是像往常一樣迄汛,扶著你慢慢的走,去熟悉的...
    木偶公子閱讀 342評(píng)論 0 0
  • 現(xiàn)在我還在等體檢通知≈枋樱現(xiàn)在在回家的火車上鞍爱。心情還挺平靜的,想著去年的這個(gè)時(shí)候我在回家的火車上不知道自己該怎么辦专酗,不...
    Lannnnner閱讀 293評(píng)論 0 0