Trackr 是一個可以管理任務的示例應用，除了主要用於從支援輔助功能的角度探索通用的 UI 範例外，它還是我們展示現代 Android 開發最佳實踐的示例之一。近期我們為它適配了大螢幕裝置，所以不妨一起看看怎樣在應用中使用 Material Design 和響應式正規化，讓應用在大螢幕裝置上提供更精緻、更直觀的使用者體驗。
導航
調整前 : 從任務 (Tasks) 介面，您可以從底部應用欄的選單中找到歸檔 (Archive) 和設定 (Settings) 選項。在大螢幕裝置上，彈出選單是一個小觸控區域，它處於不太方便操作的位置。並且底部應用欄也被過度拉伸了。
△ 左側: 手機上的導航展示。右側: 平板上的導航展示。
調整後: 當螢幕變寬時，我們顯示導航軌道 (navigation rail) 來取代底部應用欄。我們也將懸浮操作按鈕 (用於開啟新建任務介面) 放到導航軌道中，從而完全移除底部應用欄。
△ 在大螢幕上的導航軌道
雖然是考慮到較大螢幕的裝置而進行的此項更改，但由於騰出了更多的縱向空間來顯示任務列表，橫向模式顯示的手機也能夠因此受益。
△ 橫向顯示的手機上的導航軌道
雙窗格佈局
調整前 : 任務 (Tasks) 和歸檔 (Archive) 介面完全佔滿了整個顯示寬度，並且點選列表中某一專案時，其對應的詳細資訊會覆蓋顯示之前的列表。在大螢幕上，UI 元素要麼被拉伸，要麼擠在一邊，導致螢幕內容顯得很不平衡。
△ 在手機上這樣顯示很自然，但在大螢幕上的空間利用率卻不太理想。
調整後 : 任務 (Tasks) 和歸檔 (Archive) 介面都通過 SlidingPaneLayout 顯示 列表/詳細資訊佈局。我們在此前一篇文章中描述了怎樣實現這種佈局，如果您對具體的技術細節感興趣，請參閱文章《實踐 | Google I/O 應用是如何適配大尺寸螢幕 UI 的？》
任務詳細資訊 (Task Detail) 介面中也有一個懸浮操作按鈕 (用於開啟編輯任務介面)，但如果導航軌道正處於可見狀態，就會導致螢幕中出現兩個懸浮操作按鈕，這顯然不太理想。於是我們將第二個懸浮操作按鈕隱藏，並在右上角的工具欄新增了一個編輯按鈕。
△ 雙窗格佈局能更好地利用螢幕空間
編輯任務和新建任務
調整前 : 當您編輯一個任務時，編輯任務的介面會取代任務詳細資訊介面，並佔據整個螢幕。和此前的任務詳細資訊介面一樣，這樣會使螢幕內容顯得不平衡。新建任務介面也存在這個問題 (事實上，新建任務和編輯任務介面在我們的導航圖中本質上是相同的目的頁面)。
△ 左側: 手機上的編輯任務介面。右側: 平板上的編輯任務介面。
調整後 : 在大尺寸螢幕上，我們使用了 DialogFragment，於是編輯任務的介面就懸浮在了其他內容之上。
△ 懸浮的編輯元件將關注點放在使用者當前的目標內容上
起初我們嘗試將編輯任務介面取代任務詳細資訊 (Task Detail) 顯示在詳細資訊窗格中。雖然這樣很直截了當，但我們很快就發現這種實現方式並不能讓我們滿意，原因如下:
- 這對於建立新建任務 (New Task) 介面是沒有意義的，因為它已經位於導航軌道中，可以全域性訪問了。我們可以將其作為單獨的導航目的頁面，並分配不同的行為，但是感覺這不是個好辦法。
- 編輯任務 (Edit Task) 看起來與任務詳細資訊 (Task Detail) 非常相似，只不過其中的屬性欄位是可以編輯的。在雙窗格佈局中，如果我們在詳情窗格里將任務詳細資訊替換為編輯任務，那麼看起來似乎沒有發生什麼變化——介面中必要的視覺強調還不夠。相比之下，DialogFragment 吸引了使用者，讓關注點處於前面和中間。
- 在使用者儲存自己的改動或是我們確認使用者的修改可以取消之前，我們不希望從編輯任務 (或者新建任務) 介面導航到其他地方。原本全屏顯示編輯介面時，這種請求很容易被攔截，因為唯一離開此介面的方式就是使用返回鍵。但是使用雙窗格佈局之後，我們還需要關注額外的情況: 使用者可以點選導航軌道中的其他按鈕，或是列表窗格中的其他任務來切換。臨時禁用這些元素會很麻煩。使用 DialogFragment 之後，所有的這些元素都位於對話方塊之後，使得使用者不能與它們互動，這恰恰是我們想要的效果。
△ 新建任務使用了與編輯任務相同的 UI 正規化
這裡的重點是，當您在裝置上嘗試那些最直截了當的設計時，可能會發現它們在功能上有所缺陷。當這種缺陷出現時，後退一步，關注使用者體驗，並且尋找一種設計正規化來改進它。
小結
隨著平板電腦和可摺疊裝置逐漸流行，建立響應式使用者互動介面變得比以往更加重要。我們展示了通過新增導航軌道和使用 SlidingPaneLayout，是如何讓 Trackr 應用不僅看起來更好，同時還顯著改善了可用性和創造了在手機上無法感受的體驗的。我們還向您說明了為了更好滿足使用者的需求，您應該怎樣圍繞可用性而不僅是螢幕空間來重新思考您的設計。
我們希望您喜歡更新和改進後的 Trackr 應用！您可以 檢視原始碼。
歡迎您 點選這裡 向我們提交反饋，或分享您喜歡的內容、發現的問題。您的反饋對我們非常重要，感謝您的支援！