Android 綜合：設(shè)計(jì)我們的樣例 App

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

現(xiàn)在我們對導(dǎo)航模式和界面組合技術(shù)有了深入的理解，是時(shí)候應(yīng)用到我們的界面上了。讓我再看看我們第一節(jié)課上提到的新聞應(yīng)用的界面完備圖：

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

我們下一步得去我們前幾節(jié)討論的導(dǎo)航模式選擇，然后應(yīng)用到這個(gè)界面圖中。這樣就能最大化導(dǎo)航速度并且最少化獲取內(nèi)容的點(diǎn)擊次數(shù)，但又能參考 Android 做法來保證界面的直觀性和一致性。此外，我們也需要根據(jù)我們不同目標(biāo)設(shè)備的參數(shù)做出不同的決定。為方便，我們集中討論平板和手持設(shè)備。

選擇模式

首先，我們二級(jí)界面（新聞?lì)悇e列表 ，圖片列表 和 保存列表）可用 Tab 組合在一起。注意到我們不必使用水平排列的 Tab；某些情況下下拉菜單可作為合適的替代品，特別在手機(jī)這種窄屏設(shè)備上。在手機(jī)上，我們能用 Tab 把 圖片保存列表 和 新聞保存列表 組合到一起，或在平板上用多個(gè)縱向排列的內(nèi)容視窗。

最后，讓我們看看如何展示新聞。第一個(gè)簡化不同新聞?lì)悇e間導(dǎo)航的選項(xiàng)：使用水平分頁，然后再在滑動(dòng)區(qū)域上添加一組標(biāo)簽來提示當(dāng)前可見和臨近的新聞?lì)悇e。對于平板橫屏，我們可以進(jìn)一步地展示能水平分頁的 新聞列表 界面作為左邊的視窗，并且把 新聞詳情 View 界面作為基礎(chǔ)內(nèi)容視窗放在右邊。

下圖分別表示在手持設(shè)備和平板上應(yīng)用了這些導(dǎo)航模式后的新界面圖。

Figure 2. 手持設(shè)備上新聞應(yīng)用例子的最終界面集

Figure 3. 平板上新聞應(yīng)用例子的最終界面集，橫屏

至此，得好好考慮下界面圖的衍化了，以免我們選擇的模式實(shí)際上用不了（比如當(dāng)你畫應(yīng)用界面布局的草圖時(shí)）。下面有個(gè)為平板衍化的界面圖樣例，它并排展示不同類別的 新聞列表，但是 新聞詳情View 保持獨(dú)立。

Figure 4. 平板上新聞應(yīng)用例子的最終界面集，豎屏

畫草稿

Wireframing就是設(shè)計(jì)過程中你開始排布界面的那步。發(fā)揮你的創(chuàng)造性，想想怎么排列這些 UI 元件來幫助你的用戶在你的 App 中導(dǎo)航。這時(shí)你要記住細(xì)枝末節(jié)是不重要的（別去想著做個(gè)實(shí)物）。

最簡單快速的起步方法就是用紙筆手畫你界面。一旦你開始畫，你會(huì)發(fā)現(xiàn)在你原本的界面圖或在你決定使用的模式中有很多實(shí)際的問題。某些情況下，模式理論上能很好的解決特定設(shè)計(jì)問題，但實(shí)際上他們可能失效并且給視覺交互添亂（例如，界面上出現(xiàn)了兩行 Tab）。如果那樣，探索下其他的導(dǎo)航模式，或在選擇的模式上做點(diǎn)變化，來讓你的草稿更優(yōu)。

當(dāng)你對初稿滿意后，繼續(xù)用一些軟件畫你的數(shù)字wireframe吧，例如：Adobe? Illustrator，Adobe? Fireworks，OmniGraffle 或者 向量圖工具。選擇畫圖工具時(shí)，考慮以下特性：

• 能畫體現(xiàn)交互的 wireframe 么？像Adobe? Fireworks就能提供這個(gè)功能。

• 有界面“大師”功能（允許不同界面的視覺元素重用）？例如，Action Bar必須在你應(yīng)用的每個(gè)界面都出現(xiàn)。

• 學(xué)習(xí)曲線怎樣？專業(yè)向量圖工具可能有個(gè)陡峭的學(xué)習(xí)曲線（越學(xué)越難），但有些功能小巧的 wireframing 設(shè)計(jì)工具可能更適合這個(gè)任務(wù)。

最后，XML 布局編輯器，Android 開發(fā)工具包（ADT）里面的一個(gè) Eclipse 插件，經(jīng)常被用來畫草圖原型。但是，你應(yīng)當(dāng)貫注于高質(zhì)量的布局而非細(xì)節(jié)視覺設(shè)計(jì)。

創(chuàng)建數(shù)字草圖

在紙上畫完草圖并且選擇好一款心儀的數(shù)字wireframing工具后，你可以創(chuàng)建一個(gè)數(shù)字wireframe作為你應(yīng)用視覺設(shè)計(jì)的起點(diǎn)。下面就是一些我們新聞客戶端wireframe例子，他們和我們之前的界面圖一一對應(yīng)。

Figure 5. 新聞客戶端手機(jī)豎屏Wireframe樣例（下載 SVG 圖）

Figure 6. 新聞客戶端平板橫屏Wireframe樣例（下載 SVG 圖）

（下載表示設(shè)備的 Wireframe 的 SVG 圖）

下一步

現(xiàn)在你已經(jīng)為你的應(yīng)用設(shè)計(jì)出了高效直觀的 App 內(nèi)部導(dǎo)航，你可用開始花時(shí)間來為單個(gè)界面改善 UI了。例如，展示交互內(nèi)容時(shí)，你可以選擇使用更花哨的控件來代替簡單的文本標(biāo)簽，圖像和按鈕。你也可以開始定義你應(yīng)用的視覺風(fēng)格。在這過程中把你品牌的元素作為視覺語言融入其中吧。

最后，也適時(shí)實(shí)現(xiàn)你的設(shè)計(jì)吧，使用 Android SDK 為你的應(yīng)用寫寫代碼。想開始？看看下面的這些資源吧：

• 開發(fā)者指導(dǎo)：UI :學(xué)習(xí)如何用 Android SDK 實(shí)現(xiàn)你的 UI 設(shè)計(jì)。

• Action Bar :實(shí)現(xiàn)tab，向上導(dǎo)航，屏幕上動(dòng)作，等等。

• Fragment :實(shí)現(xiàn)可重用，多視窗布局

• 支持庫 :用ViewPager實(shí)現(xiàn)水平分頁（Swipe View）