編寫:XizhiXu - 原文:http://developer.android.com/training/design-navigation/multiple-sizes.html
雖然上節(jié)中的界面完備圖在手持設備和相似大小設備上可行,但并不是和某個設備因素綁死的。Android應用需要適配一大把不同類型的設備,從3"的手機到10"的平板到42"的電視。這節(jié)課中我們探討把完備圖中不同界面組合起來的策略和原因。
Note: 為電視設計應用程序還需要注意其他的因素,包括互動方式(就是說,它沒觸屏),長距離情況下文本的可讀性,還有其他的。雖然這個討論在本課范疇之外,你仍然可以在 Google TV 文檔的設計模式中找到有關(guān)為電視設計的信息。
多視窗布局(Multi-pane Layout)設計
設計指南請閱讀 Android 設計部分的多視窗布局。
3 到 4英寸的屏幕通常只適合每次展示單個縱向內(nèi)容視窗,一個列表,或某列表項的具體信息,等等。所以在這些設備上,界面通常對映于信息層次上的某一級(類別 → 列表 → 詳情)。
更大的諸如平板和電視上的屏幕通常會有更多的可用界面空間,并且他們能夠展示多個內(nèi)容視窗。橫屏中,視窗從左到右以細節(jié)程度遞增的順序排列。因常年使用桌面應用和網(wǎng)站,用戶變得特別適應大屏上的多視窗。很多桌面應用和網(wǎng)站提供左側(cè)導航視窗,或者使用總/分(master/detail)兩個視窗布局。
為了符合這些用戶期望,通常很有必要為平板提供多個信息視窗來避免留下過多空白或無意間引入尷尬的交互,比如 10 x 0.5" 按鈕。
下面圖例示范了當把 UI 設計遷移到更大的布局時出現(xiàn)的一些問題,并且展示了如何用多視窗布局來處理這些問題:
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-multipane-bad.png" alt="app-navigation-multiple-sizes-multipane-bad" />
圖 1. 大橫屏使用單視窗導致尷尬的空白和過長行。
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-multipane-good.png" alt="app-navigation-multiple-sizes-multipane-good" />
圖 2. 橫屏多視窗布局產(chǎn)生更好的視覺平衡,更大的效用和可讀性。
實現(xiàn)提醒: 當決定好了區(qū)分使用單視窗布局和多視窗布局的屏幕大小基準線后,你就可以為不同屏幕大小區(qū)間(例如
large/xlarge
)或最低屏幕寬度(例如sw600dp
)提供不同的布局了。實現(xiàn)提醒: 單一界面被實現(xiàn)為 Activity 的子類, 單獨的內(nèi)容視窗則可實現(xiàn)為 Fragment 的子類。這樣最大化了跨越不同結(jié)構(gòu)因素和不同屏幕內(nèi)容的代碼復用。
雖然現(xiàn)在我們還沒有開始在我們的屏幕上排布 UI 元素,但現(xiàn)在很是時候來考慮下我們的多視窗界面如何適配不同的設備方向了。多視窗布局在橫屏時表現(xiàn)的非常棒,因為有大量可用的橫向空間。然而,在豎屏時,你的橫向空間被限制了,所以你需要為這個方向設計一個單獨的布局。
下面是一些創(chuàng)建豎屏布局的常見策略:
最直接的策略就是簡單地伸縮每個視窗的寬度來最好地在豎屏下的呈現(xiàn)內(nèi)容。視窗可設置固定寬度或占可用界面寬度的一定比例。
伸縮策略的一個變種就是在豎屏中折疊左側(cè)視窗的內(nèi)容。當遇到總/分(master/detail)視窗中左側(cè)(master)視窗包含易折疊列表項時,這個策略很有效。以一個實時聊天應用為例。橫屏中,左側(cè)列表可能包含聊天聯(lián)系人的照片,姓名和在線狀態(tài)。在豎屏中,橫向空間可以將通過隱藏聯(lián)系人姓名而且只顯示照片和在線狀態(tài)的提示圖標的方式來折疊。也可以選擇性的提供展開控制,這種控制允許用戶展開左側(cè)視窗或反向操作。
這個方案中,左側(cè)視窗在豎屏模式下完全隱藏。然而,為了保證你界面的功能等價性,左側(cè)視窗必須功能可見(比如,添一個按鈕)。通常適合在 Action Bar 使用 Up 按鈕(詳見Android設計的模式文檔)來展示左側(cè)視窗,這將在之后討論。
最后的策略就是在豎屏時垂直地堆放你一般橫向排布的視窗。當你的視窗不是簡單的文本列表,或者當有多個內(nèi)容模塊與基本內(nèi)容視窗同時運行時,這個策略很奏效。但是當心使用這個策略時出現(xiàn)上面提到的尷尬的空白問題。
既然現(xiàn)在我們能夠通過提供大屏設備上的多視窗布局來組合單獨的界面,那么就讓我們把這個技術(shù)應用到我們上節(jié)課界面完備圖上吧,這樣我們應用的界面層次在這類設備上變得更具體了:
http://wiki.jikexueyuan.com/project/android-training-geek/images/app-navigation-multiple-sizes-multipane-screen-map.png" alt="app-navigation-multiple-sizes-multipane-screen-map" />
Figure 3. 更新后新聞應用例子的界面完備Map
下節(jié)課我們將討論 向下 和 橫向 導航,并且探討更多方法來組合界面使能最大化應用 UI 的直觀性和內(nèi)容獲取速度。