Android Widget設(shè)計(jì)指南
Widget是Android1.5版所引進(jìn)的特性之一.Widget,可讓用戶(hù)在主屏幕界面及時(shí)了解程序顯示的重要信息.標(biāo)準(zhǔn)的Android系統(tǒng)已包含幾個(gè)Widget的示例,如模擬時(shí)鐘,音樂(lè)播放器等.
用戶(hù)在主屏幕(HomeScreen)界面的空白區(qū)域長(zhǎng)按,選擇菜單的”小部件”項(xiàng),即可隨意選取所需的部件并顯示在主屏幕上.
此文檔介紹了如何設(shè)計(jì)一個(gè)Widget,使得和其它Widget以及主屏幕其它元素保持美觀一致.Android團(tuán)隊(duì)也于此文檔介紹了Widget源圖的一些設(shè)計(jì)標(biāo)準(zhǔn),還有Widget制圖的技巧訣竅.
對(duì)于開(kāi)發(fā)Widget的相關(guān)信息, 可參考開(kāi)發(fā)者指南的AppWidgets章節(jié)和AppWidgets博客.
標(biāo)準(zhǔn)Widget剖析
典型的AndroidWidget主要有三個(gè)組成部分:一個(gè)限位框,一個(gè)框架,還有Widget的圖形控件以及其它元素.設(shè)計(jì)周全的Widget會(huì)在限位框邊緣&框架之間,及框架內(nèi)邊緣&Widget的控件之間都保留一些內(nèi)填充(內(nèi)補(bǔ)白).Widget的外觀被設(shè)計(jì)得與主屏幕的其它Widget相匹配,并以主屏幕的其它元素為依據(jù)對(duì)齊;它們亦使用標(biāo)準(zhǔn)的陰影效果.此文檔說(shuō)明了所有的相關(guān)細(xì)節(jié).
標(biāo)準(zhǔn)Widget尺寸(縱向)
標(biāo)準(zhǔn)Widget尺寸(橫向)
【編輯推薦】
- Windows Phone 7 免費(fèi)線(xiàn)下培訓(xùn)火熱報(bào)名中
- Mobile Widget開(kāi)發(fā)入門(mén)
- Android開(kāi)發(fā)應(yīng)用詳解
- Android 3.0——蜂巢的世界
- Android UI自定義設(shè)計(jì)模板Dashboard
- 詳解Android Widget組件RelativeLayout實(shí)例
#p#
設(shè)計(jì)一個(gè)Widget
◆為你的Widget選擇限位框尺寸.
最有效的Widget會(huì)以最小型的尺寸來(lái)顯示程序有用或及時(shí)的數(shù)據(jù).用戶(hù)會(huì)衡量Widget的有用性或它所占的屏幕空間,因此越小越好.
所有Widget必須符合限位框的六種尺寸之一,或者更好的是,或更好的是在一對(duì)縱向和橫向的方位尺寸里,這樣在用戶(hù)切換屏幕方向時(shí),你的Widget看起來(lái)也會(huì)更舒適.
標(biāo)準(zhǔn)Widget尺寸以圖例說(shuō)明了六種Widget尺寸的限位規(guī)格(三種縱向三種橫向).
◆選擇匹配的框架.
標(biāo)準(zhǔn)Widget框架以圖例說(shuō)明了六種Widget尺寸的標(biāo)準(zhǔn)框架,你可以下載此鏈接的副本備用.你的Widget并非都必須使用這些框架,但若你用了,你的Widget可能與其它Widget看起來(lái)更一致.
◆對(duì)圖形應(yīng)用標(biāo)準(zhǔn)陰影效果.
此外,你并非必須使用此效果,但標(biāo)準(zhǔn)Widget陰影說(shuō)明了標(biāo)準(zhǔn)Widget使用的Photoshop設(shè)置.
◆若你的Widget包含按鈕,需繪制按鈕的三種狀態(tài)(默認(rèn),按下,被選中).
你可以下載一個(gè)音樂(lè)Widget播放按鈕的Photoshop文件(包含三種狀態(tài)) ,用來(lái)分析三種標(biāo)準(zhǔn)按鈕效果的Photoshop設(shè)置.
1.完成源圖的繪制并調(diào)整比例和對(duì)齊.
Widget對(duì)齊技巧訣竅介紹了一些對(duì)齊標(biāo)準(zhǔn)框架內(nèi)Widget圖形的技巧, 另外還有一些其它Widget圖形竅門(mén).
2.以正確的圖形文件設(shè)置保存你的Widget.
Windows圖形文件格式介紹了如何正確設(shè)置你的Widget圖形文件.
標(biāo)準(zhǔn)Widget尺寸
這里有六種基于4 x 4 (縱向)或 4 x 4 (橫向)單元的主屏幕網(wǎng)格的標(biāo)準(zhǔn)Widget尺寸.這些規(guī)格為六種標(biāo)準(zhǔn)Widget尺寸的限位框.這些尺度是六種標(biāo)準(zhǔn)Widget尺寸限位框.典型Widget的內(nèi)容并不繪制這些尺度的邊緣線(xiàn),但在限位框里填充一個(gè)框架正如設(shè)計(jì)一個(gè)Widget所說(shuō)到的.
縱向方位時(shí), 每個(gè)單元寬80像素高100像素(下圖展示了一個(gè)縱向方位的單元). 縱向方位支持的三種Widget尺寸為:
橫向方位時(shí),每個(gè)單元寬106像素高74像素.橫向方位支持的三種Widget尺寸為:
【編輯推薦】
- Windows Phone 7 免費(fèi)線(xiàn)下培訓(xùn)火熱報(bào)名中
- Mobile Widget開(kāi)發(fā)入門(mén)
- Android開(kāi)發(fā)應(yīng)用詳解
- Android 3.0——蜂巢的世界
- Android UI自定義設(shè)計(jì)模板Dashboard
- 詳解Android Widget組件RelativeLayout實(shí)例
#p#
標(biāo)準(zhǔn)Widget框架
針對(duì)六種標(biāo)準(zhǔn)Widget尺寸這里有標(biāo)準(zhǔn)的框架.你可以在以下內(nèi)容點(diǎn)擊框架圖片來(lái)下載該框架的Photoshop 文件用在你的Widget上.
4x1_Widget_Frame_Portrait.psd
3x3_Widget_Frame_Portrait.psd
2x2_Widget_Frame_Portrait.psd
4x1_Widget_Frame_Landscape.psd
3x3_Widget_Frame_Landscape.psd
2x2_Widget_Frame_Landscape.psd
標(biāo)準(zhǔn)Widget陰影
你可為你的Widget源圖應(yīng)用陰影效果,這樣會(huì)與其它標(biāo)準(zhǔn)AndroidWidget較為一致, 在Photoshop Layer Style對(duì)話(huà)框使用以下設(shè)置.
【編輯推薦】
- Windows Phone 7 免費(fèi)線(xiàn)下培訓(xùn)火熱報(bào)名中
- Mobile Widget開(kāi)發(fā)入門(mén)
- Android開(kāi)發(fā)應(yīng)用詳解
- Android 3.0——蜂巢的世界
- Android UI自定義設(shè)計(jì)模板Dashboard
- 詳解Android Widget組件RelativeLayout實(shí)例
#p#
Widget繪制技巧訣竅
Android團(tuán)隊(duì)展示了一些用于對(duì)齊標(biāo)準(zhǔn)Widget限位框及框架內(nèi)Widget源圖的竅門(mén),使數(shù)個(gè)Widget以及主屏幕上的其它元素在視覺(jué)上對(duì)齊,除此之外還有一些創(chuàng)建Widget的技巧.
◆使用Android SDK模擬器屏幕截圖工具來(lái)對(duì)齊主屏幕上的Widget控件形狀&陰影,搜索Widget,以及其它元素.
◆從全尺寸單元格裁剪Widget的富余部分,包括任何填充空間. (換言之, 對(duì)于 一個(gè)4 x 1的Widget, cut the asset at 320 by 100 pixels)
◆為了減少Widget輸出時(shí)的條狀色塊, 在你圖片應(yīng)用以下的Photoshop添加雜色設(shè)置.
◆應(yīng)用9-patch圖片格式技術(shù)以縮小圖片并設(shè)置內(nèi)容區(qū)域的內(nèi)填充. (此處查看細(xì)節(jié)指南.)
◆注意: 當(dāng)前AndroidWidget模板被設(shè)計(jì)成使用一個(gè)自定義的漸變角,意味著9-patch圖片格式技術(shù)無(wú)法用以?xún)?yōu)化資源尺寸.無(wú)論如何, 9-patch圖片格式技術(shù)都能設(shè)置內(nèi)容區(qū)域的內(nèi)填充.
◆某些情況下,低像素深度的設(shè)備會(huì)引發(fā)是視覺(jué)帶抖動(dòng)問(wèn)題.為了解決此問(wèn)題,應(yīng)用程序開(kāi)發(fā)者需通過(guò)一個(gè)定義為XML:的”代理”可繪區(qū)傳遞assets.這個(gè)技術(shù)參考了以下源圖,如”background.9.png”,并指示設(shè)備按需抖動(dòng).
Widget圖形文件格式
使用合適的限位框尺寸以PNG-24格式和8-bit色保存你的Widget源圖.
【編輯推薦】
