這是一份實踐性的跨平臺設(shè)計指南

不同平臺的設(shè)計和開發(fā)感覺像是在不同的國家之間旅行侧馅。你要做同樣的吃吃睡睡看景點的事情搬设，但是這些國家的風俗習(xí)慣社會制度會制約你如何吃吃睡睡游覽景點。在一些國家膘婶，把人推進火車這件事情是OK的恒水，用刀叉吃漢堡也是OK的倔幼，在另外一些國家就可能不能這樣继薛。同樣的修壕，如果你先在iOS平臺開發(fā)你的產(chǎn)品，你就不要想著把它直接移植到安卓平臺并且什么問題也沒有遏考，你的app會在安卓平臺中感到迷失慈鸠。在設(shè)計和開發(fā)之前，理解每個平臺的習(xí)慣和約定是非常重要的诈皿。按照平臺規(guī)范來設(shè)計開發(fā)app林束，這樣能使該平臺上的用戶能夠理解并且易于使用你的app像棘，無論在哪個平臺稽亏，你都能獲得最清晰最真實的產(chǎn)品版本。本文將告訴你一些實用的技巧缕题，幫助你把你的app從iOS平臺轉(zhuǎn)移到安卓（或者從安卓到iOS）截歉，避免出現(xiàn)平臺文化間的鴻溝。

“在做設(shè)計和開發(fā)工作之前烟零，了解各個平臺的風格和習(xí)慣是很重要的瘪松。”

了解Material design

Material design是一種新的跨產(chǎn)品锨阿、跨平臺的設(shè)計方法，Material design采用了模仿真實的層級關(guān)系、大膽的圖形設(shè)計变秦，和有意義的運動來幫助軟件定義它的行為展現(xiàn)障癌。它是安卓5.0以上設(shè)備的默認視覺語言，所以學(xué)習(xí)系統(tǒng)原理會對你的項目開發(fā)很有幫助。

Material design設(shè)計規(guī)范提供了全方位的規(guī)范烟馅，當你是從iOS平臺轉(zhuǎn)移過來設(shè)計開發(fā)安卓應(yīng)用時说庭，有幾個單獨的點是需要格外注意的。

表面&深度

iOS使用模糊效果來表示深度郑趁，而在安卓中刊驴，使用突起的表面和陰影來表示層級關(guān)系。這些特質(zhì)適用于Material design的對象寡润，幫助你建立一個空間模型來捆憎，貫穿應(yīng)用于app中。

交互&運動

Material design非常強調(diào)能激起用戶主動發(fā)起的運動和觸摸反饋悦穿。當你觸擊一個元件攻礼，你的手指會激起觸摸漪漣；當你點擊一個按鈕栗柒，按鈕會上升（從實質(zhì)上講是影子變長）礁扮，來滿足你的手指反饋。這種“磁性”的反應(yīng)是常見的觸摸反饋瞬沦，而不是像iOS和web背離現(xiàn)實的顏色改變反饋太伊。這種磁性的反應(yīng)是“真實的數(shù)字化”（Authentically Digital）。

此外逛钻，正常狀態(tài)和按下狀態(tài)的觸摸漪漣和磁性反饋效果的平滑過渡要比使用兩張圖片要好的多僚焦。這在material design視覺設(shè)計的連續(xù)性概念的微觀層面上是個很好例子。

布局

安卓和material design上嚴格遵循著柵格化系統(tǒng)曙痘，和平面設(shè)計一樣芳悲。一切都是遵循8dp網(wǎng)格法則（見下面的DPs）,創(chuàng)建視覺節(jié)奏一致貫穿的app。例如边坤，按鈕通常都是48dp高名扛，app的欄通常是56dp，元件之間的間距通常也是8dp的整數(shù)倍茧痒。

DPs在安卓定義：

1dp＝1px@1x（在一倍圖的情況下肮韧，1dp＝1px，一倍圖是指160dpi）

“以DPs作為單位來進行設(shè)計可以保證你的設(shè)計在不同密度的安卓設(shè)備上有一致的物理尺寸旺订∨螅”

從布局到圖標的一切設(shè)計都適用DPs作為單位，在設(shè)計的時候使用矢量設(shè)計軟件区拳，例如sketch 或者illustrator 或者photoshop的形狀工具拘领，可以使計算大小變的更容易，而且能在不犧牲任何視覺品質(zhì)的情況下樱调，讓你的光柵圖像看起來正常约素。

當導(dǎo)出icons或者其他靜態(tài)圖像時洽瞬，導(dǎo)出的關(guān)鍵分辨率轉(zhuǎn)換如下：

請注意安卓會縮放你的資源，所以你不用總是為每一個尺寸都提供一個資源业汰。開發(fā)者也有很多的自動生成縮小的工具伙窃。

此外，安卓5.0有內(nèi)置矢量圖標样漆，而且也有很多工具为障，可以導(dǎo)出各種密度的icon資源。

更多關(guān)于單位和密度的信息放祟，請查閱material design規(guī)范和 Sebastien Gabriel’s設(shè)計師DPI指南鳍怨。

Apps vs. 活動

安卓應(yīng)用是一種“活動”的集合，每一個“活動”都是app的一個內(nèi)頁跪妥⌒“活動”們被“意圖”（intents）所連結(jié)。例如眉撵，你在活動A的頁面中按下了按鈕侦香，這會激發(fā)一個意圖“啟動活動B”。聽起來很簡單纽疟，對嗎罐韩？真正讓意圖（intents）變的強大的是：

他們貫穿于app的能力（就好像是本地桌面和iOS app的自定義url格式的增強版）

他們可以進行各種定義，甚至可以把信息返回給之前的活動（例如：在當前的app中污朽，打開照相機應(yīng)用拍攝照片散吵，然后照片可以在當前的app中使用。）

“意圖（intents）可以讓你不用重復(fù)構(gòu)造 一些東西蟆肆》溃”

例如，假設(shè)你正在構(gòu)建一個傳送信息的app炎功，發(fā)送照片是一個很常見的功能枚冗。你第一個反應(yīng)可能是設(shè)計一個相機的界面，然后是圖片選擇器亡问，可能有一個照片編輯器的功能官紫。幸運的是肛宋，意圖（intents）使你不需要再重新做相機州藕、圖片選擇器、圖片編輯器等功能酝陈，而且你還可以讓用戶自己去選擇自己想要的相機app床玻、圖片選擇器、圖片編輯器（當然沉帮，前提是用戶已經(jīng)安裝了這些app）⌒馑溃現(xiàn)在贫堰，這個流程變成了：

用戶點擊“發(fā)送照片”按鈕，然后觸發(fā)了一個“拍照或選擇照片”的意圖（intents）待牵。大多數(shù)安卓相機應(yīng)用都支持這個意圖（intents）其屏。用戶就有了選擇相機應(yīng)用的權(quán)利。拍完照后缨该，相機應(yīng)用可能會顯示“編輯照片”的選項偎行，這會出發(fā)一個“編輯這張照片”的intents。

用戶可以會看到一個編輯圖片應(yīng)用的列表贰拿，然后用戶會選擇他們其中的一個蛤袒。編輯完照片之后，用戶點擊“完成”膨更，然后就會直接回到你的應(yīng)用界面妙真。照片編輯app將編輯過的照片傳給了相機app，然后相機app又把這張照片傳回了你的app荚守。

你的app就得到了一張編輯好的照片珍德，然后用戶就可以把它放在一條信息中發(fā)送出去了。

iOS8提供的很多應(yīng)用擴展矗漾，等同于上述所說的在安卓中使用意圖（intents）菱阵。舉個例子，允許其他應(yīng)用和你的應(yīng)用之間分享照片和文字缩功，只需要確鼻缂埃“編寫信息”活動（activity）支持“分享這段文本”和“分享這張照片”的意圖。

意圖（intents）也允許在應(yīng)用內(nèi)部打開網(wǎng)頁嫡锌。例如虑稼，app的一個具體的活動（activity）聲明他可以支持“查看 www.example.com/item/*”的意圖（intents），那么點擊網(wǎng)頁鏈接后就會給用戶兩個選項：在瀏覽器瀏覽或者是在app中瀏覽網(wǎng)頁（可能會保存偏好設(shè)置）势木。

系統(tǒng)狀態(tài)欄蛛倦、導(dǎo)航欄、物理按鈕

在安卓系統(tǒng)中啦桌，用戶總是可以使用“返回鍵”溯壶、“退至主界面鍵”、“多任務(wù)鍵”（最近使用的任務(wù)）的功能甫男。安卓系統(tǒng)把這三個物理按鍵作為硬件密匙和軟件底部的導(dǎo)航欄（不要和iOS的導(dǎo)航欄混淆且改，iOS導(dǎo)航欄更像是安卓系統(tǒng)中的帶有小房子圖標標題和動作的頂欄）。

安卓設(shè)備同樣也會提供一個持續(xù)的狀態(tài)欄板驳，提供本地時間又跛、信號強度、電池用量和通知等信息若治。

安卓系統(tǒng)也會計算好應(yīng)用的導(dǎo)航欄（如果有）慨蓝，自動留出空間感混，減少一些占用屏幕的比例，剩下的部分可以放置你的應(yīng)用程序礼烈。例如弧满，在Nexus 5上，屏幕大小是360 x 640 dp此熬，在屏幕豎直的情況下谱秽，導(dǎo)航欄的高度是48dp，狀態(tài)欄的高度是24dp摹迷，所以你的app還有360 x 568 dp的空間去呈現(xiàn)疟赊。

你可以隱藏狀態(tài)欄（在有些條件下，甚至可以隱藏導(dǎo)航欄）峡碉，不過近哟，當你這么做的時候，最好在當下脫離開系統(tǒng)的UI鲫寄，把界面設(shè)計的允許用戶能夠隨時可以使用些系統(tǒng)的功能吉执。安卓4.4和安卓5.0介紹了新的功能：允許你在系統(tǒng)UI的基礎(chǔ)上，去重新設(shè)計UI來呈現(xiàn)你的app地来，使你的app更具沉浸感戳玫。

最后，實體鍵的音量鍵都是可用的未斑，所以在大多數(shù)情況下咕宿，就不需要再app里面體現(xiàn)音量控制了。

系統(tǒng)返回鍵

無論是實體鍵系統(tǒng)導(dǎo)航欄的安卓設(shè)備還是虛擬鍵系統(tǒng)導(dǎo)航欄的安卓設(shè)備蜡秽，都有系統(tǒng)返回鍵府阀。

作為設(shè)計師，很少會去重新定義“返回”按鈕芽突，通常也沒必要自定義安卓的自動返回按鈕的行為習(xí)慣试浙。默認的情況下，按下“返回”按鈕等同于關(guān)閉當前頁面并且回到前一個頁面寞蚌，即使前一個頁面是另一個app的（例如田巴，另一個app使用“意圖”（intents）打開照片編輯app。）如果你只打開了一個app挟秤，而且是在這個app的首屏壹哺，那么按下“返回”按鈕就會回到Home界面。在Home界面按下“返回”按鈕是不會有任何效果的煞聪，還是留在Home界面斗躏。

請注意逝慧，“返回”按鈕和app細節(jié)頁面（如二級三級頁面）頂部導(dǎo)航欄上的“返回”是不同的昔脯∽牟冢“返回”按鈕可以做為臨時的導(dǎo)向，而頂部的導(dǎo)航欄的返回按鈕是針對于整個app的層次結(jié)構(gòu)的導(dǎo)航云稚，永遠不會把用戶帶出app隧饼。請記住，頂部導(dǎo)航欄上的返回圖標静陈，和它右邊的文字是無關(guān)的燕雁，這一點和iOS剛好相反。如果有文字在導(dǎo)航欄上鲸拥，那么它代表的是當前頁面的標題（而并非返回圖標的注釋）拐格。

底部標簽

iOS系統(tǒng)里通常使用底部標簽欄來切換模塊頁面，而安卓平臺規(guī)范建議使用頂部標間欄來切換模塊頁面刑赶。此外捏浊，安卓應(yīng)用可能會使用底部欄來顯示操作（比如“完成”按鈕、“下一步”按鈕等等）撞叨。

“在安卓系統(tǒng)上金踪，最好避免使用底部標簽欄∏７螅”

在安卓系統(tǒng)上胡岔，最好避免使用底部標簽欄。這有助于安卓平臺上的不同app保持一致的體驗枷餐，防止操作和頁面和模塊切換的混亂靶瘸。

iOS的底部標簽欄通常是在app的信息層次結(jié)構(gòu)的頂層，經(jīng)常會把導(dǎo)航欄放在這里毛肋。因此奕锌，這些標簽通常會一直貫穿于整個app。在安卓系統(tǒng)中村生，如果有隱藏抽屜菜單導(dǎo)航欄惊暴，應(yīng)該把它的優(yōu)先級放高，標簽放到層次結(jié)構(gòu)的二級趁桃。點擊一個標簽辽话，回來到帶有頂部返回圖標的新頁面（標簽已經(jīng)不在了）。

手勢

手勢操作會讓使用app的體驗更加迅速卫病、流暢油啤、令人愉悅。在某一個平臺上蟀苛，你總是會注意到手勢交互的用戶期望益咬。在安卓平臺上，大多數(shù)手勢是通用的帜平，用戶也會期待你的app也是這樣幽告。在material design規(guī)范中有一個完整的關(guān)于手勢的講解梅鹦，不過在實際應(yīng)用中最重要的是把幾個關(guān)鍵的手勢使用正確。

水平滑動在觸摸設(shè)備上幾乎是無所不在的冗锁。不過齐唆，和iOS不同的是，在安卓設(shè)備上水平滑動一個標簽冻河，是切換標簽——這是一個很關(guān)鍵的預(yù)期行為箍邮。除了對標簽的操作，滑動通常是切換輪播叨叙，把元素從集合中剔除掉（例如把元素從列表中移除）锭弊。水平滾動瀏覽頁面在安卓平臺上不太常見，固定的頁面邊界是比較常見擂错。

安卓設(shè)備上習(xí)慣于垂直連續(xù)滾動瀏覽頁面廷蓉，而不鼓勵固定頁面的邊界。Material design鼓勵使用滾動技術(shù)马昙，比如定點去優(yōu)化各個滾動位置的布局桃犬。一個具體的例子：app的一些條欄可能會在你滑動的時候隱藏，但是當你停止?jié)L動的時候它又會出現(xiàn)行楞。

從屏幕左邊緣滑動和從屏幕右邊緣滑動也是一個常見的手勢攒暇。iOS左滑帶你返回之前的頁面，安卓把邊緣滑動定義為兩種習(xí)慣：第一是子房，如果左邊或右邊有隱藏抽屜菜單欄（漢堡菜單）形用，從邊緣向內(nèi)部滑動就會打開這個隱藏抽屜菜單。第二個是证杭，如果從邊緣向內(nèi)部滑動一個帶內(nèi)容的標簽田度，那么會改變這個標簽。

最后一個要考慮的是長按解愤。在安卓設(shè)備上镇饺，長按一個元件，就是選擇他送讲，要么開始拖動奸笤，要么什么也不做。應(yīng)該避免利用長按功能顯示情境上下文相關(guān)的菜單哼鬓，也最好減少給長按功能賦予類似去到其他功能的快捷鍵的預(yù)期行為监右。因為長按功能是一個相當隱藏的手勢，他的行為通常不明顯异希，所以最好堅持遵循平臺規(guī)范健盒。如果你真的想讓一個元件有情境上下文相關(guān)的操作，最好通過屏幕上的提示（比如溢出菜單和彈窗）。

小貼士：

1. 安卓使用DP作為單位扣癣，基本等同于iOS和CSS的像素惰帽。1dp ＝ 1px @1x（160dpi）

2.?在安卓設(shè)備上，app可以和其他app深入融合搏色，不需要重新寫一些拍照善茎、分享到社交網(wǎng)絡(luò)的功能券册。

3. 安卓設(shè)備提供了系統(tǒng)的“返回”鍵频轿、“HOME”鍵和“當前任務(wù)”鍵來進行任務(wù)切換。

4. 安卓應(yīng)用不要再底部標簽欄烁焙，而是使用可以滑動切換的頂部標簽欄航邢。

5. 長按可以選擇物體拖動或者什么也不做。但是最好不要使用長按來進行預(yù)期外的行為骄蝇。

安卓設(shè)計在實踐中的應(yīng)用

現(xiàn)在膳殷，已經(jīng)闡述了一些iOS和安卓的核心差異，讓我們再看看一些很好的實戰(zhàn)建議吧九火。

設(shè)計時赚窃，畫布應(yīng)該設(shè)置多大尺寸？

設(shè)計師開始設(shè)計時畫布應(yīng)該設(shè)置多大是最熱門的問題之一岔激。雖然沒有一組精確的數(shù)字能適配所有安卓設(shè)備勒极，下面的表格應(yīng)該是了解這個問題的很好的起點。作為通用的規(guī)則虑鼎，一般用5寸手機屏幕和9寸平板設(shè)備作為設(shè)計的尺寸辱匿。

什么是可拉伸的UI元素？

安卓有內(nèi)置的程序可以支持可拉伸的圖像（比如自定義按鈕之類的）炫彩，和iOS的可拉伸圖形構(gòu)成差不多匾七。在安卓系統(tǒng)中，可拉伸的圖像被稱之為“點九圖”江兢。安卓的點九圖包含沿著圖形周圍拉伸的像素昨忆，填充顏色和光學(xué)邊界信息。

因為點九圖包含一些額外的信息杉允，他們的文件名必須以“.9.png”作為后綴扔嵌，以區(qū)分于普通的png圖像文件。

自從material design興趣夺颤，點九圖其實用的很少了痢缎，因為material design提倡的是簡單的形狀（圓角矩形等），這些形狀可以用代碼直接寫出來世澜。但是独旷，點九圖還是為我們提供了很高自由度的自定義UI元素。如果你用點九來創(chuàng)建可拉伸的UI元件，記得提供相應(yīng)的點九圖來應(yīng)對各種不同的分辨率嵌洼，這樣能使你的UI元件在任何屏幕上都看起來干凈利落案疲。有一些工具能使你到處不同分辨率的點九圖變的簡易，比如Asset Studio.

安卓的舊版本

有一個大家都很關(guān)心的問題麻养，為各種版本的安卓系統(tǒng)設(shè)計褐啡，以及這些版本的視覺風格和用戶界面框架的差異。例如鳖昌，雖然安卓5.0為共享元素轉(zhuǎn)換提供了很好的支持备畦，但是他們依舊在早期安卓版本上不可用。

你可能立刻會想到许昨，你需要為你的app設(shè)計兩個版本懂盐，一個為material design和安卓5.0及更高的版本，一個為其他的安卓早期版本糕档。雖然這種方法可行莉恼，但是其實是沒有必要的。

“大多數(shù)material design的元素速那，都有一個非常明確俐银，精準的路徑，可以被用在跨系統(tǒng)的版本里面端仰〈废В”

在現(xiàn)實中，早期安卓版本的設(shè)計（和開發(fā)）并不是那么有挑戰(zhàn)性的榆俺。對于大多數(shù)material design的元素都有明確精準的路徑支持他們實現(xiàn)跨版本應(yīng)用售躁。例如：

1. 基本的UI組件，像工具欄茴晋、抽屜導(dǎo)航陪捷、標簽、懸浮按鈕诺擅，動態(tài)彩色形狀控件等等市袖，在AppCompat和Android Design library里都有跨品臺的支持。

2. 大多數(shù)的內(nèi)容元素烁涌，比如字體苍碟，icon，和圖片是不依賴于特定平臺發(fā)布的撮执，所以他們時很容易實現(xiàn)跨平臺版本的微峰。

3. 雖然有很多新的過渡和動畫，比如矢量可運動的drawables抒钱，circular reveal蜓肆，共享元素過渡等颜凯，但是這些都只是在安卓5.0上可用。如果想在以前的安卓版本上實現(xiàn)這些效果仗扬，可以用簡單的消失症概，滑動，大小縮放等來達到同樣的效果早芭。這并不需要另外再做一個獨立的app——只需要加上很小的功能彼城。

“和開發(fā)者的及時及早溝通是非常重要的⊥烁觯”

和開發(fā)者盡早討論好你的app在早前的安卓系統(tǒng)版本上最好的實現(xiàn)方法是非常重要的募壕。你就可以不用為了早期的系統(tǒng)版本做很多額外的設(shè)計工作了。

安卓平板設(shè)計

其實并不需要重新設(shè)計一個完全獨立的app帜乞，除非你想要為安卓平板用戶做些獨特的功能司抱。應(yīng)該設(shè)計一個單一的應(yīng)用筐眷，讓他在手機和平板上都適配黎烈。

大屏幕成功適配的關(guān)鍵是自適應(yīng)。安卓平板屏幕的大小從7寸到12寸都有匀谣，所以不能只是為一種尺寸設(shè)計一個固定的大小照棋。應(yīng)該像響應(yīng)式網(wǎng)頁設(shè)計（responsive web design）一樣，考慮好app應(yīng)該如何在不同尺寸的屏幕上布局武翎。更具體的說烈炭，好好想一下app主要的內(nèi)容元素，然后問自己幾個問題：

1. 每行最多多少字宝恶？（每行超過75個字符符隙？）

2. 圖片縱橫比是多少，最多有多寬而不會使布局變的很奇怪垫毙？

3. 按鈕最多有多寬霹疫？

回答這些問題可能會幫助你發(fā)現(xiàn)你的內(nèi)容觸及更大的空間，圖像大小综芥，文字大小丽蝎，或額外的內(nèi)容和導(dǎo)航之后可能出現(xiàn)的自然內(nèi)容斷點。這種方法會讓你得到一個更加靈活的用戶界面膀藐，而不是你純粹更具設(shè)備大小的設(shè)計的那種局限性屠阻。這也使支持豎屏和橫屏切換變的更加簡單，這是安卓平板用戶都很期待的一個功能额各。

如果你理解了自然內(nèi)容斷點国觉，當app從iOS平臺移植到安卓平臺，還需要記住下面幾點虾啦。和蘋果的iPad不同麻诀，絕大多數(shù)安卓平板都是16:9的屏幕比例（Nexus 9是個例外）蚜枢。這意味著當全屏看視屏是非常棒的，但是遇到稍短的橫屏布局针饥，可能會需要垂直滾動厂抽，在稍窄的豎屏上可能很多內(nèi)容放不下。再說一次丁眼，基于內(nèi)容的斷點式你的最好的朋友——設(shè)計之前總是要先想一下內(nèi)容筷凤，再想一下屏幕的大小。

更多關(guān)于安卓平板的設(shè)計苞七，請查看material design規(guī)范里面的layout structure藐守，app sturcture和whiteframes資源，還有 this-oldie-but-goodie article.

小貼士：

1. 設(shè)計你的應(yīng)用程序蹂风，然后為平板設(shè)備和舊安卓設(shè)備優(yōu)化設(shè)計——不用為每個尺寸的設(shè)備單獨設(shè)計應(yīng)用程序卢厂。

2. 有干凈、規(guī)范的方法實現(xiàn)material design惠啄，而且也是適用于各種安卓版本慎恒。

3. 設(shè)計框架或者做原型的時候，使用通用的畫板尺寸撵渡。

4. 安卓系統(tǒng)提供了點九圖工具融柬，內(nèi)置拉伸信息，而不是拉伸圖形本身趋距。

下一步

為安卓的material design設(shè)計是和為其他移動平臺設(shè)計不同的粒氧，這里有一套核心的平臺標準，以及一套完整的精心記錄的建議和指南节腐。

更重要的是外盯，這讓設(shè)計師有了更多的創(chuàng)意和創(chuàng)新的空間。Material design是靈活翼雀、開放的饱苟，專注于交互、視覺锅纺、運動設(shè)計的基礎(chǔ)掷空，把這些貫穿于整個產(chǎn)品和平臺，使設(shè)計師可以自由的表現(xiàn)他們的創(chuàng)意囤锉。

當你在構(gòu)思你的下一個app時坦弟，看一看這些material design安卓app的例子。你發(fā)布你的app時官地，也可以在google＋和twitter上告訴我們酿傍。