這是一份實(shí)踐性的跨平臺(tái)設(shè)計(jì)指南

2018-08-20 1351 0

這是一份實(shí)踐性的跨平臺(tái)設(shè)計(jì)指南

 


 

不同平臺(tái)的設(shè)計(jì)和開發(fā)感覺像是在不同的國家之間旅行。你要做同樣的吃吃睡睡看景點(diǎn)的事情,但是這些國家的風(fēng)俗習(xí)慣社會(huì)制度會(huì)制約你如何吃吃睡睡游覽景點(diǎn)。在一些國家,把人推進(jìn)火車這件事情是OK的,用刀叉吃漢堡也是OK的,在另外一些國家就可能不能這樣。同樣的,如果你先在iOS平臺(tái)開發(fā)你的產(chǎn)品,你就不要想著把它直接移植到安卓平臺(tái)并且什么問題也沒有,你的app會(huì)在安卓平臺(tái)中感到迷失。在設(shè)計(jì)和開發(fā)之前,理解每個(gè)平臺(tái)的習(xí)慣和約定是非常重要的。按照平臺(tái)規(guī)范來設(shè)計(jì)開發(fā)app,這樣能使該平臺(tái)上的用戶能夠理解并且易于使用你的app,無論在哪個(gè)平臺(tái),你都能獲得最清晰最真實(shí)的產(chǎn)品版本。本文將告訴你一些實(shí)用的技巧,幫助你把你的app從iOS平臺(tái)轉(zhuǎn)移到安卓(或者從安卓到iOS),避免出現(xiàn)平臺(tái)文化間的鴻溝。
 



“在做設(shè)計(jì)和開發(fā)工作之前,了解各個(gè)平臺(tái)的風(fēng)格和習(xí)慣是很重要的。”



 

了解Material design


 

 

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


 


 

Material design設(shè)計(jì)規(guī)范提供了全方位的規(guī)范,當(dāng)你是從iOS平臺(tái)轉(zhuǎn)移過來設(shè)計(jì)開發(fā)安卓應(yīng)用時(shí),有幾個(gè)單獨(dú)的點(diǎn)是需要格外注意的。


 

表面&深度

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


 

交互&運(yùn)動(dòng)

Material design非常強(qiáng)調(diào)能激起用戶主動(dòng)發(fā)起的運(yùn)動(dòng)和觸摸反饋。當(dāng)你觸擊一個(gè)元件,你的手指會(huì)激起觸摸漪漣;當(dāng)你點(diǎn)擊一個(gè)按鈕,按鈕會(huì)上升(從實(shí)質(zhì)上講是影子變長),來滿足你的手指反饋。這種“磁性”的反應(yīng)是常見的觸摸反饋,而不是像iOS和web背離現(xiàn)實(shí)的顏色改變反饋。這種磁性的反應(yīng)是“真實(shí)的數(shù)字化”(Authentically Digital)。
 


 

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


 


 

布局
 

 

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


 


 

此外,文字和其他元素通常左對(duì)齊或者右對(duì)齊參考線,這就很類似于書籍和雜志里面的垂直排版規(guī)則。手機(jī)的標(biāo)準(zhǔn)參考線是16dp和72dp,但這些可以根據(jù)具體app的需求來重新制定。


 


字體

字體在安卓和material design中起到了非常重要的做用。安卓手機(jī)的默認(rèn)字體是roboto字體系列,包含了很多字重和變體。和iOS一樣,應(yīng)該把品牌的字體調(diào)色板融合進(jìn)app。由于安卓設(shè)備不同,安卓字體排版引擎和光柵化也各不相同,所以最好在多個(gè)安卓設(shè)備上進(jìn)行字體測(cè)試。有時(shí)候同樣的字體,不同的字體格式看起來也會(huì)不同,可能會(huì)出現(xiàn)一種字體格式看起來好看,另一種不好看的情況。所以一定要為OTF和TTF的字體做樣本。最后,字體使用稍細(xì)的4dp的基線網(wǎng)格,所以字體的高度應(yīng)該是4dp的整數(shù)倍數(shù),例如:20dp、24dp、32dp、32dp、36dp等等。
 


 


 

安卓系統(tǒng)到底有什么不同?

 

現(xiàn)在你了解了一點(diǎn)兒material design,讓我們談?wù)劙沧科脚_(tái)如何不同于iOS平臺(tái)吧。
 


使用密度獨(dú)立像素(dp)做單位,在做設(shè)計(jì)時(shí)做矢量的1倍圖。
 

 

在安卓端,很重要的一個(gè)特點(diǎn)就是測(cè)量單位使用了密度獨(dú)立像素(density-independent pixel),通常簡寫成DIP或DP。如果你之前一直是在iOS端或者web端做設(shè)計(jì),DPs基本等同于iOS的點(diǎn)或者CSS的像素。以DP為單位可以保證你的設(shè)計(jì)有一致的物理尺寸,以便于跨越不同密度的安卓設(shè)備。
 


 


 

DPs在安卓定義:

1dp=1px@1x(在一倍圖的情況下,1dp=1px,一倍圖是指160dpi)


 

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


 

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


 

當(dāng)導(dǎo)出icons或者其他靜態(tài)圖像時(shí),導(dǎo)出的關(guān)鍵分辨率轉(zhuǎn)換如下:


 

請(qǐng)注意安卓會(huì)縮放你的資源,所以你不用總是為每一個(gè)尺寸都提供一個(gè)資源。開發(fā)者也有很多的自動(dòng)生成縮小的工具。此外,安卓5.0有內(nèi)置矢量圖標(biāo),而且也有很多工具,可以導(dǎo)出各種密度的icon資源。更多關(guān)于單位和密度的信息,請(qǐng)查閱material design規(guī)范和 Sebastien Gabriel’s設(shè)計(jì)師DPI指南。


 


Apps vs. 活動(dòng)
 

 

安卓應(yīng)用是一種“活動(dòng)”的集合,每一個(gè)“活動(dòng)”都是app的一個(gè)內(nèi)頁。“活動(dòng)”們被“意圖”(intents)所連結(jié)。例如,你在活動(dòng)A的頁面中按下了按鈕,這會(huì)激發(fā)一個(gè)意圖“啟動(dòng)活動(dòng)B”。聽起來很簡單,對(duì)嗎?真正讓意圖(intents)變的強(qiáng)大的是:
 


 

  • 1.他們貫穿于app的能力(就好像是本地桌面和iOS app的自定義url格式的增強(qiáng)版)

  • 2.他們可以進(jìn)行各種定義,甚至可以把信息返回給之前的活動(dòng)(例如:在當(dāng)前的app中,打開照相機(jī)應(yīng)用拍攝照片,然后照片可以在當(dāng)前的app中使用。)


 

“意圖(intents)可以讓你不用重復(fù)構(gòu)造 一些東西。”


 

例如,假設(shè)你正在構(gòu)建一個(gè)傳送信息的app,發(fā)送照片是一個(gè)很常見的功能。你第一個(gè)反應(yīng)可能是設(shè)計(jì)一個(gè)相機(jī)的界面,然后是圖片選擇器,可能有一個(gè)照片編輯器的功能。幸運(yùn)的是,意圖(intents)使你不需要再重新做相機(jī)、圖片選擇器、圖片編輯器等功能,而且你還可以讓用戶自己去選擇自己想要的相機(jī)app、圖片選擇器、圖片編輯器(當(dāng)然,前提是用戶已經(jīng)安裝了這些app)?,F(xiàn)在,這個(gè)流程變成了:


 

用戶點(diǎn)擊“發(fā)送照片”按鈕,然后觸發(fā)了一個(gè)“拍照或選擇照片”的意圖(intents)。大多數(shù)安卓相機(jī)應(yīng)用都支持這個(gè)意圖(intents)。

  • 1.用戶就有了選擇相機(jī)應(yīng)用的權(quán)利。拍完照后,相機(jī)應(yīng)用可能會(huì)顯示“編輯照片”的選項(xiàng),這會(huì)出發(fā)一個(gè)“編輯這張照片”的intents。

  • 2.用戶可以會(huì)看到一個(gè)編輯圖片應(yīng)用的列表,然后用戶會(huì)選擇他們其中的一個(gè)。編輯完照片之后,用戶點(diǎn)擊“完成”,然后就會(huì)直接回到你的應(yīng)用界面。照片編輯app將編輯過的照片傳給了相機(jī)app,然后相機(jī)app又把這張照片傳回了你的app。

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


 

iOS8提供的很多應(yīng)用擴(kuò)展,等同于上述所說的在安卓中使用意圖(intents)。舉個(gè)例子,允許其他應(yīng)用和你的應(yīng)用之間分享照片和文字,只需要確保“編寫信息”活動(dòng)(activity)支持“分享這段文本”和“分享這張照片”的意圖。


 

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


 


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

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


 


 

安卓設(shè)備同樣也會(huì)提供一個(gè)持續(xù)的狀態(tài)欄,提供本地時(shí)間、信號(hào)強(qiáng)度、電池用量和通知等信息。


 

安卓系統(tǒng)也會(huì)計(jì)算好應(yīng)用的導(dǎo)航欄(如果有),自動(dòng)留出空間,減少一些占用屏幕的比例,剩下的部分可以放置你的應(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)你這么做的時(shí)候,最好在當(dāng)下脫離開系統(tǒng)的UI,把界面設(shè)計(jì)的允許用戶能夠隨時(shí)可以使用些系統(tǒng)的功能。安卓4.4和安卓5.0介紹了新的功能:允許你在系統(tǒng)UI的基礎(chǔ)上,去重新設(shè)計(jì)UI來呈現(xiàn)你的app,使你的app更具沉浸感。


 

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


 


系統(tǒng)返回鍵

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


 

作為設(shè)計(jì)師,很少會(huì)去重新定義“返回”按鈕,通常也沒必要自定義安卓的自動(dòng)返回按鈕的行為習(xí)慣。默認(rèn)的情況下,按下“返回”按鈕等同于關(guān)閉當(dāng)前頁面并且回到前一個(gè)頁面,即使前一個(gè)頁面是另一個(gè)app的(例如,另一個(gè)app使用“意圖”(intents)打開照片編輯app。)如果你只打開了一個(gè)app,而且是在這個(gè)app的首屏,那么按下“返回”按鈕就會(huì)回到Home界面。在Home界面按下“返回”按鈕是不會(huì)有任何效果的,還是留在Home界面。


 

請(qǐng)注意,“返回”按鈕和app細(xì)節(jié)頁面(如二級(jí)三級(jí)頁面)頂部導(dǎo)航欄上的“返回”是不同的。“返回”按鈕可以做為臨時(shí)的導(dǎo)向,而頂部的導(dǎo)航欄的返回按鈕是針對(duì)于整個(gè)app的層次結(jié)構(gòu)的導(dǎo)航,永遠(yuǎn)不會(huì)把用戶帶出app。請(qǐng)記住,頂部導(dǎo)航欄上的返回圖標(biāo),和它右邊的文字是無關(guān)的,這一點(diǎn)和iOS剛好相反。如果有文字在導(dǎo)航欄上,那么它代表的是當(dāng)前頁面的標(biāo)題(而并非返回圖標(biāo)的注釋)。




底部標(biāo)簽

iOS系統(tǒng)里通常使用底部標(biāo)簽欄來切換模塊頁面,而安卓平臺(tái)規(guī)范建議使用頂部標(biāo)間欄來切換模塊頁面。此外,安卓應(yīng)用可能會(huì)使用底部欄來顯示操作(比如“完成”按鈕、“下一步”按鈕等等)。
 


 


“在安卓系統(tǒng)上,最好避免使用底部標(biāo)簽欄。”


 


 

在安卓系統(tǒng)上,最好避免使用底部標(biāo)簽欄。這有助于安卓平臺(tái)上的不同app保持一致的體驗(yàn),防止操作和頁面和模塊切換的混亂。


 

iOS的底部標(biāo)簽欄通常是在app的信息層次結(jié)構(gòu)的頂層,經(jīng)常會(huì)把導(dǎo)航欄放在這里。因此,這些標(biāo)簽通常會(huì)一直貫穿于整個(gè)app。在安卓系統(tǒng)中,如果有隱藏抽屜菜單導(dǎo)航欄,應(yīng)該把它的優(yōu)先級(jí)放高,標(biāo)簽放到層次結(jié)構(gòu)的二級(jí)。點(diǎn)擊一個(gè)標(biāo)簽,回來到帶有頂部返回圖標(biāo)的新頁面(標(biāo)簽已經(jīng)不在了)。


 


 

手勢(shì)

手勢(shì)操作會(huì)讓使用app的體驗(yàn)更加迅速、流暢、令人愉悅。在某一個(gè)平臺(tái)上,你總是會(huì)注意到手勢(shì)交互的用戶期望。在安卓平臺(tái)上,大多數(shù)手勢(shì)是通用的,用戶也會(huì)期待你的app也是這樣。在material design規(guī)范中有一個(gè)完整的關(guān)于手勢(shì)的講解,不過在實(shí)際應(yīng)用中最重要的是把幾個(gè)關(guān)鍵的手勢(shì)使用正確。
 


 

水平滑動(dòng)在觸摸設(shè)備上幾乎是無所不在的。不過,和iOS不同的是,在安卓設(shè)備上水平滑動(dòng)一個(gè)標(biāo)簽,是切換標(biāo)簽——這是一個(gè)很關(guān)鍵的預(yù)期行為。除了對(duì)標(biāo)簽的操作,滑動(dòng)通常是切換輪播,把元素從集合中剔除掉(例如把元素從列表中移除)。水平滾動(dòng)瀏覽頁面在安卓平臺(tái)上不太常見,固定的頁面邊界是比較常見。


 

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


 

從屏幕左邊緣滑動(dòng)和從屏幕右邊緣滑動(dòng)也是一個(gè)常見的手勢(shì)。iOS左滑帶你返回之前的頁面,安卓把邊緣滑動(dòng)定義為兩種習(xí)慣:第一是,如果左邊或右邊有隱藏抽屜菜單欄(漢堡菜單),從邊緣向內(nèi)部滑動(dòng)就會(huì)打開這個(gè)隱藏抽屜菜單。第二個(gè)是,如果從邊緣向內(nèi)部滑動(dòng)一個(gè)帶內(nèi)容的標(biāo)簽,那么會(huì)改變這個(gè)標(biāo)簽。


 

最后一個(gè)要考慮的是長按。在安卓設(shè)備上,長按一個(gè)元件,就是選擇他,要么開始拖動(dòng),要么什么也不做。應(yīng)該避免利用長按功能顯示情境上下文相關(guān)的菜單,也最好減少給長按功能賦予類似去到其他功能的快捷鍵的預(yù)期行為。因?yàn)殚L按功能是一個(gè)相當(dāng)隱藏的手勢(shì),他的行為通常不明顯,所以最好堅(jiān)持遵循平臺(tái)規(guī)范。如果你真的想讓一個(gè)元件有情境上下文相關(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ù)”鍵來進(jìn)行任務(wù)切換。

4.安卓應(yīng)用不要再底部標(biāo)簽欄,而是使用可以滑動(dòng)切換的頂部標(biāo)簽欄。

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


 


 


 

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

 


 

現(xiàn)在,已經(jīng)闡述了一些iOS和安卓的核心差異,讓我們?cè)倏纯匆恍┖芎玫膶?shí)戰(zhàn)建議吧。
 


 

設(shè)計(jì)時(shí),畫布應(yīng)該設(shè)置多大尺寸?

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


 


 


什么是可拉伸的UI元素?

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


 

因?yàn)辄c(diǎn)九圖包含一些額外的信息,他們的文件名必須以“.9.png”作為后綴,以區(qū)分于普通的png圖像文件。
 


 

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


 


 

安卓的舊版本

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


 

你可能立刻會(huì)想到,你需要為你的app設(shè)計(jì)兩個(gè)版本,一個(gè)為material design和安卓5.0及更高的版本,一個(gè)為其他的安卓早期版本。雖然這種方法可行,但是其實(shí)是沒有必要的。


 


“大多數(shù)material design的元素,都有一個(gè)非常明確,精準(zhǔn)的路徑,可以被用在跨系統(tǒng)的版本里面。”


 


 

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


 

  • 1.基本的UI組件,像工具欄、抽屜導(dǎo)航、標(biāo)簽、懸浮按鈕,動(dòng)態(tài)彩色形狀控件等等,在AppCompat和Android Design library里都有跨品臺(tái)的支持。

  • 2.大多數(shù)的內(nèi)容元素,比如字體,icon,和圖片是不依賴于特定平臺(tái)發(fā)布的,所以他們時(shí)很容易實(shí)現(xiàn)跨平臺(tái)版本的。

  • 3.雖然有很多新的過渡和動(dòng)畫,比如矢量可運(yùn)動(dòng)的drawables,circular reveal,共享元素過渡等,但是這些都只是在安卓5.0上可用。如果想在以前的安卓版本上實(shí)現(xiàn)這些效果,可以用簡單的消失,滑動(dòng),大小縮放等來達(dá)到同樣的效果。這并不需要另外再做一個(gè)獨(dú)立的app——只需要加上很小的功能。


 


 

“和開發(fā)者的及時(shí)及早溝通是非常重要的。”


 

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


 


安卓平板設(shè)計(jì)

其實(shí)并不需要重新設(shè)計(jì)一個(gè)完全獨(dú)立的app,除非你想要為安卓平板用戶做些獨(dú)特的功能。應(yīng)該設(shè)計(jì)一個(gè)單一的應(yīng)用,讓他在手機(jī)和平板上都適配。
 


 

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


 

  1. 1.每行最多多少字?(每行超過75個(gè)字符?)

  2. 2.圖片縱橫比是多少,最多有多寬而不會(huì)使布局變的很奇怪?

  3. 3.按鈕最多有多寬?


 

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


 

如果你理解了自然內(nèi)容斷點(diǎn),當(dāng)app從iOS平臺(tái)移植到安卓平臺(tái),還需要記住下面幾點(diǎn)。和蘋果的iPad不同,絕大多數(shù)安卓平板都是16:9的屏幕比例(Nexus 9是個(gè)例外)。這意味著當(dāng)全屏看視屏是非常棒的,但是遇到稍短的橫屏布局,可能會(huì)需要垂直滾動(dòng),在稍窄的豎屏上可能很多內(nèi)容放不下。再說一次,基于內(nèi)容的斷點(diǎn)式你的最好的朋友——設(shè)計(jì)之前總是要先想一下內(nèi)容,再想一下屏幕的大小。


 

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


 

小貼士:

1.設(shè)計(jì)你的應(yīng)用程序,然后為平板設(shè)備和舊安卓設(shè)備優(yōu)化設(shè)計(jì)——不用為每個(gè)尺寸的設(shè)備單獨(dú)設(shè)計(jì)應(yīng)用程序。

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


 

3.設(shè)計(jì)框架或者做原型的時(shí)候,使用通用的畫板尺寸。


 

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

 


 

 

下一步

 

為安卓的material design設(shè)計(jì)是和為其他移動(dòng)平臺(tái)設(shè)計(jì)不同的,這里有一套核心的平臺(tái)標(biāo)準(zhǔn),以及一套完整的精心記錄的建議和指南。
 


 

更重要的是,這讓設(shè)計(jì)師有了更多的創(chuàng)意和創(chuàng)新的空間。Material design是靈活、開放的,專注于交互、視覺、運(yùn)動(dòng)設(shè)計(jì)的基礎(chǔ),把這些貫穿于整個(gè)產(chǎn)品和平臺(tái),使設(shè)計(jì)師可以自由的表現(xiàn)他們的創(chuàng)意。


 

當(dāng)你在構(gòu)思你的下一個(gè)app時(shí),看一看這些material design安卓app的例子。你發(fā)布你的app時(shí),也可以在google+和twitter上告訴我們。


 


25
評(píng)論區(qū)(0)
正在加載評(píng)論...