現在我們已經對導航模式和屏幕分組技術有了深刻的理解，現在是時候將它們應用到我們的屏幕上了。讓我們再看一下下面第一課的示例新聞應用程序的詳盡屏幕地圖。
圖1.示例新聞應用程序的詳盡屏幕圖。
我們的下一步是選擇並將之前課程中討論的導航模式應用於此屏幕地圖，最大限度地提高導航速度並最大限度地減少訪問數據的觸摸次數，同時保持界面直觀且與Android最佳實踐保持一致。我們還需要針對不同的目標設備外形進行不同的選擇。爲簡單起見，我們將重點放在平板電腦和手機上。
選擇模式
首先，我們的二級屏幕（故事類別列表，照片列表和保存的項目列表）可以使用選項卡組合在一起。請注意，我們不一定要使用水平排列的標籤; 在某些情況下，下拉列表UI元素可以作爲合適的替代品，尤其是在具有窄屏幕的設備（如手機）上。我們還可以使用手機上的標籤將已保存的照片列表和已保存的故事列表屏幕組合在一起，或者在平板電腦上使用多個垂直內容窗格。
最後，讓我們來看看我們如何呈現新聞故事。簡化不同故事類別導航的第一個選項是使用水平分頁，在水平滑動表面上方有一組標籤，指示當前可見和相鄰的類別。在橫向平板電腦上，我們可以更進一步，將水平可分頁的故事列表屏幕顯示爲左窗格，將故事視圖屏幕顯示爲右側的主要內容窗格。
下面是表示應用這些導航模式後手機和平板電腦的新屏幕地圖的圖表。
圖2.手機上示例新聞應用程序的最終屏幕圖。
圖3.平板電腦上的示例新聞應用程序的最終屏幕地圖。
此時，如果您選擇的模式在實踐中不適用（當您繪製應用程序的屏幕布局時），最好考慮屏幕地圖的變化。以下是平板電腦的示例屏幕地圖變體，它們並排顯示不同類別的故事列表，故事視圖屏幕保持獨立。
圖4.橫向平板電腦的備用屏幕映射示例。
草圖和線框
線框圖是設計過程中您開始佈置屏幕的步驟。獲得創意並開始想象如何安排UI元素以允許用戶瀏覽您的應用。請記住，在這一點上，像素完美的精度（創建高保真模型）並不重要。
最簡單，最快捷的入門方法是用紙和鉛筆手工繪製屏幕。一旦開始繪製草圖，您可能會發現原始屏幕地圖中的實用性問題或決定使用哪種模式。在某些情況下，模式在理論上可能適用於給定的設計問題，但在實踐中它們可能會崩潰並導致視覺混亂或交互問題（例如，如果屏幕上有兩行標籤）。如果發生這種情況，請探索其他導航模式或所選模式的變體，以獲得更優化的草圖集。
在對初始草圖感到滿意後，最好使用Adobe®Illustrator，Adobe®Fireworks，OmniGraffle或任何其他矢量插圖工具等軟件繼續使用數字線框圖。選擇要使用的工具時，請考慮以下功能：
交互式線框是否可行？Adobe®Fireworks等工具提供此功能。
是否有屏幕'主'功能，允許在不同的屏幕上重複使用視覺元素？例如，操作欄應該幾乎在應用程序的每個屏幕上都可見。
什麼是學習曲線？專業矢量插圖工具可能具有陡峭的學習曲線，而設計用於線框圖的工具可能提供與任務更相關的較小功能集。
創建數字線框
在草圖上繪製佈局並選擇適合您的數字線框工具後，您可以創建數字線框，作爲應用程序視覺設計的起點。下面是我們新聞應用程序的示例線框，與本課程前面的屏幕圖一一對應。
圖5.示例新聞應用程序線框，用於縱向手機。 （下載SVG
圖6.橫向平板電腦的新聞應用程序線框示例 還包括用於呈現故事列表的備用佈局。 （下載SVG）
（下載設備線框圖的SVG）
下一步
現在您已經爲應用程序設計了有效且直觀的應用內導航，您可以開始花時間爲每個屏幕改進用戶界面。例如，在顯示交互式內容時，您可以選擇使用更豐富的小部件來代替簡單的文本標籤，圖像和按鈕。您還可以開始定義應用程序的視覺樣式，並在此過程中合併品×××視覺語言中的元素。
最後，可能是時候開始實施您的設計並使用Android SDK爲應用程序編寫代碼了。要開始使用，請查看以下資源：
導航架構組件：使用導航編輯器GUI工具實現屏幕線框。
開發人員指南：用戶界面：瞭解如何使用Android SDK實現用戶界面設計。
操作欄：實施選項卡，向上導航，屏幕操作等。
片段：實現可重複使用的多窗格佈局
支持庫：使用實現水平分頁（滑動視圖）ViewPager
聯繫我
QQ:94297366
×××打賞：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ
公衆號推薦：
