Android 規(guī)劃界面和他們之間的關(guān)系

編寫:XizhiXu - 原文:http://developer.android.com/training/design-navigation/screen-planning.html

多數(shù) App 都有一種內(nèi)在的信息模型，它能被表示成一個(gè)用對(duì)象類型構(gòu)成的樹(shù)或圖。更淺顯的說(shuō)，你可以畫一個(gè)有不同類型信息的圖，這些信息代表用戶在你 App 里用戶與之互動(dòng)的各種東西。軟件工程師和數(shù)據(jù)架構(gòu)師經(jīng)常使用實(shí)例-關(guān)系圖（Entity-Relationship Diagram，ERD）描述一個(gè)應(yīng)用的信息模型。

讓我們考慮一個(gè)讓用戶瀏覽一群已分類好的新聞事件和圖片的應(yīng)用例子。這種 App 一個(gè)可能的模型如下 ERD 圖。

Figure 1. 新聞應(yīng)用例子的實(shí)例關(guān)系圖

創(chuàng)建一個(gè)界面列表

一旦你定義了信息模型，你就可以開(kāi)始定義那些能使用戶在你的 App 中有效地發(fā)掘，查看和操作數(shù)據(jù)的上下文環(huán)境了。實(shí)際上，其中一種方法就是確定供用戶導(dǎo)航和交互數(shù)據(jù)所需的 界面完備集（歸納了所有界面的集合）。但我們實(shí)際發(fā)現(xiàn)的界面集合應(yīng)該根據(jù)目標(biāo)設(shè)備變化。在設(shè)計(jì)過(guò)程中早點(diǎn)考慮到這點(diǎn)很重要，這樣可以保證程序可以適應(yīng)運(yùn)行環(huán)境。

在我們的例子中，我們想讓用戶查看，保存和分享分類好了的新聞和圖片。下面是涵蓋了這些用例的界面完備列表。

• 用來(lái)訪問(wèn)新聞和圖片的 Home 或者 "Launchpad" 畫面
• 類別列表
• 某個(gè)分類下的新聞列表
• 新聞詳情 View （在這里我們可以保存和分享）
• 圖片列表，不分類
• 圖片詳情 View （在這里我們可以保存和分享）
• 所有保存項(xiàng)列表
• 圖片保存列表
• 新聞保存列表

圖示界面關(guān)系

現(xiàn)在我們可以定義界面間的有向關(guān)系了。一個(gè)從界面 A 指向另一個(gè)界面 B 的箭頭表示通過(guò)用戶在畫面 A 的某個(gè)交互動(dòng)作可直達(dá)畫面 B 。一旦我們定義了界面集和他們之間的關(guān)系，我們可以將他們一起全部表示在一張界面圖中了：

Figure 2. 新聞應(yīng)用例子的界面完備Map

如果之后我們想允許用戶提交新聞事件或者上傳圖片，我們可以在圖中加額外的界面。

脫離簡(jiǎn)陋設(shè)計(jì)

這時(shí)，我們可以據(jù)這張完備的界面圖設(shè)計(jì)一個(gè)功能完備應(yīng)用了?？梢杂闪斜砗蛯?dǎo)向子界面的按鈕構(gòu)成一個(gè)簡(jiǎn)單的UI：

• 導(dǎo)向不同頁(yè)面的按鈕（例如，新聞，圖片，保存的項(xiàng)目）
• 縱向列表表示集合（例如，新聞列表，圖片列表，等等）
• 詳細(xì)信息（例如，新聞 View ，圖片 View ，等等）

但是，你可以利用屏幕組合技術(shù)和更高深導(dǎo)航元素以一種更直觀，設(shè)備更理解的方式呈現(xiàn)內(nèi)容。下節(jié)課，我們探索屏幕組合技術(shù)，比如為平板而生的多視窗（Multi-pane）布局。之后，我將深入講解更多不同的 Android 常見(jiàn)導(dǎo)航模式。

下節(jié)課：規(guī)劃多種觸屏大小