image

Trackr 是一個可以管理任務(wù)的示例應(yīng)用，除了主要用于從支持輔助功能的角度探索通用的 UI 范例外，它還是我們展示現(xiàn)代 Android 開發(fā)最佳實(shí)踐的示例之一。近期我們?yōu)樗m配了大屏幕設(shè)備，所以不妨一起看看怎樣在應(yīng)用中使用 Material Design 和響應(yīng)式范式，讓應(yīng)用在大屏幕設(shè)備上提供更精致、更直觀的用戶體驗(yàn)。

導(dǎo)航

調(diào)整前 : 從任務(wù) (Tasks) 界面，您可以從底部應(yīng)用欄的菜單中找到歸檔 (Archive) 和設(shè)置 (Settings) 選項(xiàng)。在大屏幕設(shè)備上，彈出菜單是一個小觸控區(qū)域，它處于不太方便操作的位置。并且底部應(yīng)用欄也被過度拉伸了。

△ 左側(cè): 手機(jī)上的導(dǎo)航展示。右側(cè): 平板上的導(dǎo)航展示。

調(diào)整后: 當(dāng)屏幕變寬時，我們顯示導(dǎo)航軌道 (navigation rail) 來取代底部應(yīng)用欄。我們也將懸浮操作按鈕 (用于打開新建任務(wù)界面) 放到導(dǎo)航軌道中，從而完全移除底部應(yīng)用欄。

△ 在大屏幕上的導(dǎo)航軌道

雖然是考慮到較大屏幕的設(shè)備而進(jìn)行的此項(xiàng)更改，但由于騰出了更多的縱向空間來顯示任務(wù)列表，橫向模式顯示的手機(jī)也能夠因此受益。

△ 橫向顯示的手機(jī)上的導(dǎo)航軌道

雙窗格布局

調(diào)整前 : 任務(wù) (Tasks) 和歸檔 (Archive) 界面完全占滿了整個顯示寬度，并且點(diǎn)擊列表中某一項(xiàng)目時，其對應(yīng)的詳細(xì)信息會覆蓋顯示之前的列表。在大屏幕上，UI 元素要么被拉伸，要么擠在一邊，導(dǎo)致屏幕內(nèi)容顯得很不平衡。

△ 在手機(jī)上這樣顯示很自然，但在大屏幕上的空間利用率卻不太理想。

調(diào)整后 : 任務(wù) (Tasks) 和歸檔 (Archive) 界面都通過 SlidingPaneLayout 顯示 列表/詳細(xì)信息布局。我們在此前一篇文章中描述了怎樣實(shí)現(xiàn)這種布局，如果您對具體的技術(shù)細(xì)節(jié)感興趣，請參閱文章《實(shí)踐 | Google I/O 應(yīng)用是如何適配大尺寸屏幕 UI 的？》

任務(wù)詳細(xì)信息 (Task Detail) 界面中也有一個懸浮操作按鈕 (用于打開編輯任務(wù)界面)，但如果導(dǎo)航軌道正處于可見狀態(tài)，就會導(dǎo)致屏幕中出現(xiàn)兩個懸浮操作按鈕，這顯然不太理想。于是我們將第二個懸浮操作按鈕隱藏，并在右上角的工具欄添加了一個編輯按鈕。

△ 雙窗格布局能更好地利用屏幕空間

編輯任務(wù)和新建任務(wù)

調(diào)整前 : 當(dāng)您編輯一個任務(wù)時，編輯任務(wù)的界面會取代任務(wù)詳細(xì)信息界面，并占據(jù)整個屏幕。和此前的任務(wù)詳細(xì)信息界面一樣，這樣會使屏幕內(nèi)容顯得不平衡。新建任務(wù)界面也存在這個問題 (事實(shí)上，新建任務(wù)和編輯任務(wù)界面在我們的導(dǎo)航圖中本質(zhì)上是相同的目的頁面)。

△ 左側(cè): 手機(jī)上的編輯任務(wù)界面。右側(cè): 平板上的編輯任務(wù)界面。

調(diào)整后 : 在大尺寸屏幕上，我們使用了 DialogFragment，于是編輯任務(wù)的界面就懸浮在了其他內(nèi)容之上。

△ 懸浮的編輯組件將關(guān)注點(diǎn)放在用戶當(dāng)前的目標(biāo)內(nèi)容上

起初我們嘗試將編輯任務(wù)界面取代任務(wù)詳細(xì)信息 (Task Detail) 顯示在詳細(xì)信息窗格中。雖然這樣很直截了當(dāng)，但我們很快就發(fā)現(xiàn)這種實(shí)現(xiàn)方式并不能讓我們滿意，原因如下:

• 這對于創(chuàng)建新建任務(wù) (New Task) 界面是沒有意義的，因?yàn)樗呀?jīng)位于導(dǎo)航軌道中，可以全局訪問了。我們可以將其作為單獨(dú)的導(dǎo)航目的頁面，并分配不同的行為，但是感覺這不是個好辦法。
• 編輯任務(wù) (Edit Task) 看起來與任務(wù)詳細(xì)信息 (Task Detail) 非常相似，只不過其中的屬性字段是可以編輯的。在雙窗格布局中，如果我們在詳情窗格里將任務(wù)詳細(xì)信息替換為編輯任務(wù)，那么看起來似乎沒有發(fā)生什么變化——界面中必要的視覺強(qiáng)調(diào)還不夠。相比之下，DialogFragment 吸引了用戶，讓關(guān)注點(diǎn)處于前面和中間。
• 在用戶保存自己的改動或是我們確認(rèn)用戶的修改可以取消之前，我們不希望從編輯任務(wù) (或者新建任務(wù)) 界面導(dǎo)航到其他地方。原本全屏顯示編輯界面時，這種請求很容易被攔截，因?yàn)槲ㄒ浑x開此界面的方式就是使用返回鍵。但是使用雙窗格布局之后，我們還需要關(guān)注額外的情況: 用戶可以點(diǎn)擊導(dǎo)航軌道中的其他按鈕，或是列表窗格中的其他任務(wù)來切換。臨時禁用這些元素會很麻煩。使用 DialogFragment 之后，所有的這些元素都位于對話框之后，使得用戶不能與它們交互，這恰恰是我們想要的效果。

△ 新建任務(wù)使用了與編輯任務(wù)相同的 UI 范式

這里的重點(diǎn)是，當(dāng)您在設(shè)備上嘗試那些最直截了當(dāng)?shù)脑O(shè)計(jì)時，可能會發(fā)現(xiàn)它們在功能上有所缺陷。當(dāng)這種缺陷出現(xiàn)時，后退一步，關(guān)注用戶體驗(yàn)，并且尋找一種設(shè)計(jì)范式來改進(jìn)它。

小結(jié)

隨著平板電腦和可折疊設(shè)備逐漸流行，創(chuàng)建響應(yīng)式用戶交互界面變得比以往更加重要。我們展示了通過添加導(dǎo)航軌道和使用 SlidingPaneLayout，是如何讓 Trackr 應(yīng)用不僅看起來更好，同時還顯著改善了可用性和創(chuàng)造了在手機(jī)上無法感受的體驗(yàn)的。我們還向您說明了為了更好滿足用戶的需求，您應(yīng)該怎樣圍繞可用性而不僅是屏幕空間來重新思考您的設(shè)計(jì)。

我們希望您喜歡更新和改進(jìn)后的 Trackr 應(yīng)用！您可以 查看源代碼。

歡迎您 點(diǎn)擊這里 向我們提交反饋，或分享您喜歡的內(nèi)容、發(fā)現(xiàn)的問題。您的反饋對我們非常重要，感謝您的支持！