這是一份實踐性的跨平臺設(shè)計指南
不同平臺的設(shè)計和開發(fā)感覺像是在不同的國家之間旅行。你要做同樣的吃吃睡睡看景點的事情，但是這些國家的風(fēng)俗習(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ā)工作之前，了解各個平臺的風(fēng)格和習(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ī)范，當(dāng)你是從iOS平臺轉(zhuǎn)移過來設(shè)計開發(fā)安卓應(yīng)用時，有幾個單獨的點是需要格外注意的。
表面&深度
iOS使用模糊效果來表示深度，而在安卓中，使用突起的表面和陰影來表示層級關(guān)系。這些特質(zhì)適用于Material design的對象，幫助你建立一個空間模型來，貫穿應(yīng)用于app中。
交互&運動
Material design非常強調(diào)能激起用戶主動發(fā)起的運動和觸摸反饋。當(dāng)你觸擊一個元件，你的手指會激起觸摸漪漣；當(dāng)你點擊一個按鈕，按鈕會上升（從實質(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ù)倍。
此外，文字和其他元素通常左對齊或者右對齊參考線，這就很類似于書籍和雜志里面的垂直排版規(guī)則。手機的標準參考線是16dp和72dp，但這些可以根據(jù)具體app的需求來重新制定。
字體
字體在安卓和material design中起到了非常重要的做用。安卓手機的默認字體是roboto字體系列，包含了很多字重和變體。和iOS一樣，應(yīng)該把品牌的字體調(diào)色板融合進app。由于安卓設(shè)備不同，安卓字體排版引擎和光柵化也各不相同，所以最好在多個安卓設(shè)備上進行字體測試。有時候同樣的字體，不同的字體格式看起來也會不同，可能會出現(xiàn)一種字體格式看起來好看，另一種不好看的情況。所以一定要為OTF和TTF的字體做樣本。最后，字體使用稍細的4dp的基線網(wǎng)格，所以字體的高度應(yīng)該是4dp的整數(shù)倍數(shù)，例如：20dp、24dp、32dp、32dp、36dp等等。
安卓系統(tǒng)到底有什么不同？
現(xiàn)在你了解了一點兒material design，讓我們談?wù)劙沧科脚_如何不同于iOS平臺吧。
使用密度獨立像素（dp）做單位，在做設(shè)計時做矢量的1倍圖。
在安卓端，很重要的一個特點就是測量單位使用了密度獨立像素（density-independent pixel），通常簡寫成DIP或DP。如果你之前一直是在iOS端或者web端做設(shè)計，DPs基本等同于iOS的點或者CSS的像素。以DP為單位可以保證你的設(shè)計有一致的物理尺寸，以便于跨越不同密度的安卓設(shè)備。
DPs在安卓定義：
1dp＝1px@1x（在一倍圖的情況下，1dp＝1px，一倍圖是指160dpi）
“以DPs作為單位來進行設(shè)計可以保證你的設(shè)計在不同密度的安卓設(shè)備上有一致的物理尺寸。”
從布局到圖標的一切設(shè)計都適用DPs作為單位，在設(shè)計的時候使用矢量設(shè)計軟件，例如sketch 或者illustrator 或者photoshop的形狀工具，可以使計算大小變的更容易，而且能在不犧牲任何視覺品質(zhì)的情況下，讓你的光柵圖像看起來正常。
當(dāng)導(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）變的強大的是：
-
1.他們貫穿于app的能力（就好像是本地桌面和iOS app的自定義url格式的增強版）
-
2.他們可以進行各種定義，甚至可以把信息返回給之前的活動（例如：在當(dāng)前的app中，打開照相機應(yīng)用拍攝照片，然后照片可以在當(dāng)前的app中使用。）
“意圖（intents）可以讓你不用重復(fù)構(gòu)造 一些東西。”
例如，假設(shè)你正在構(gòu)建一個傳送信息的app，發(fā)送照片是一個很常見的功能。你第一個反應(yīng)可能是設(shè)計一個相機的界面，然后是圖片選擇器，可能有一個照片編輯器的功能。幸運的是，意圖（intents）使你不需要再重新做相機、圖片選擇器、圖片編輯器等功能，而且你還可以讓用戶自己去選擇自己想要的相機app、圖片選擇器、圖片編輯器（當(dāng)然，前提是用戶已經(jīng)安裝了這些app）?，F(xiàn)在，這個流程變成了：
用戶點擊“發(fā)送照片”按鈕，然后觸發(fā)了一個“拍照或選擇照片”的意圖（intents）。大多數(shù)安卓相機應(yīng)用都支持這個意圖（intents）。
-
1.用戶就有了選擇相機應(yīng)用的權(quán)利。拍完照后，相機應(yīng)用可能會顯示“編輯照片”的選項，這會出發(fā)一個“編輯這張照片”的intents。
-
2.用戶可以會看到一個編輯圖片應(yīng)用的列表，然后用戶會選擇他們其中的一個。編輯完照片之后，用戶點擊“完成”，然后就會直接回到你的應(yīng)用界面。照片編輯app將編輯過的照片傳給了相機app，然后相機app又把這張照片傳回了你的app。
-
3.你的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)航欄），不過，當(dāng)你這么做的時候，最好在當(dāng)下脫離開系統(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)閉當(dāng)前頁面并且回到前一個頁面，即使前一個頁面是另一個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)航欄上，那么它代表的是當(dāng)前頁面的標題（而并非返回圖標的注釋）。
底部標簽
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的一些條欄可能會在你滑動的時候隱藏，但是當(dāng)你停止?jié)L動的時候它又會出現(xiàn)。
從屏幕左邊緣滑動和從屏幕右邊緣滑動也是一個常見的手勢。iOS左滑帶你返回之前的頁面，安卓把邊緣滑動定義為兩種習(xí)慣：第一是，如果左邊或右邊有隱藏抽屜菜單欄（漢堡菜單），從邊緣向內(nèi)部滑動就會打開這個隱藏抽屜菜單。第二個是，如果從邊緣向內(nèi)部滑動一個帶內(nèi)容的標簽，那么會改變這個標簽。
最后一個要考慮的是長按。在安卓設(shè)備上，長按一個元件，就是選擇他，要么開始拖動，要么什么也不做。應(yīng)該避免利用長按功能顯示情境上下文相關(guān)的菜單，也最好減少給長按功能賦予類似去到其他功能的快捷鍵的預(yù)期行為。因為長按功能是一個相當(dāng)隱藏的手勢，他的行為通常不明顯，所以最好堅持遵循平臺規(guī)范。如果你真的想讓一個元件有情境上下文相關(guān)的操作，最好通過屏幕上的提
示（比如溢出菜單和彈窗）。
小貼士：
1.安卓使用DP作為單位，基本等同于iOS和CSS的像素。1dp ＝ 1px @1x（160dpi）
2.在安卓設(shè)備上，app可以和其他app深入融合，不需要重新寫一些拍照、分享到社交網(wǎng)絡(luò)的功能。
3.安卓設(shè)備提供了系統(tǒng)的“返回”鍵、“HOME”鍵和“當(dāng)前任務(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è)計，以及這些版本的視覺風(fēng)格和用戶界面框架的差異。例如，雖然安卓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)容斷點，當(dāng)app從iOS平臺移植到安卓平臺，還需要記住下面幾點。和蘋果的iPad不同，絕大多數(shù)安卓平板都是16:9的屏幕比例（Nexus 9是個例外）。這意味著當(dāng)全屏看視屏是非常棒的，但是遇到稍短的橫屏布局，可能會需要垂直滾動，在稍窄的豎屏上可能很多內(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)意。
當(dāng)你在構(gòu)思你的下一個app時，看一看這些material design安卓app的例子。你發(fā)布你的app時，也可以在google＋和twitter上告訴我們。
