UI布局和指導

本節(jié)主要介紹我們的應用結(jié)構(gòu)，包括移動端應用和桌面端應用的架構(gòu)，涵蓋了下面的幾點指導。

應用有很多種，分別滿足不同的需求：

• 只有一個界面、圍繞一個主要需求而構(gòu)建的應用（如計算器，相機和一些游戲）
• 主要功能是在不同的界面中切換，但是沒有深度導航功能（如電話撥號記錄，最近聯(lián)系人，和收藏的聯(lián)系人）
• 結(jié)合了一系列數(shù)據(jù)視圖和深層次導航的應用（如郵件應用的不同文件夾，購物應用的不同文件夾）

自上而下

開始界面的布局需要花更多的心思。這是用戶打開應用看到的第一個畫面，需要能夠滿足新用戶，兼顧老用戶。

問自己這樣一個問題：“一般用戶最想用我的應用來干什么？”，據(jù)此構(gòu)建開始界面的用戶體驗。

內(nèi)容優(yōu)先

很多優(yōu)秀的應用都關(guān)注內(nèi)容的呈現(xiàn)。盡量避免純導航界面，，在開始界面就以內(nèi)容為核心，讓用戶立即與內(nèi)容交互，獲取核心體驗。選擇適合數(shù)據(jù)呈現(xiàn)和屏幕尺寸的布局。

錨鏈接導航和按鈕

跟工具欄一樣，在應用的操作欄上可以組織排列一些重要操作的按鈕。理想的導航放置區(qū)域是屏幕的頂端，包括標簽的切換、左側(cè)側(cè)拉導航，都可以放在屏幕頂端。如果你的內(nèi)容是可以搜索的，在應用操作欄中要包含搜索按鈕，用戶可以快速搜索，直達內(nèi)容。

注重功能

當你的應用有大量的功能和操作時，關(guān)鍵點在于：要適度指引用戶，將用戶的注意力焦點轉(zhuǎn)移到你想要的地方。在內(nèi)容區(qū)域，要凸顯重要的導航。一些特色功能可以用懸浮按鈕來表示。在你的應用中不要強調(diào)那些不常用的操作路徑。

頂層視圖的設(shè)計策略

最頂層的界面向用戶傳遞應用最主要的功能和內(nèi)容。有些應用功能會專注內(nèi)容，簡化導航。而另外一些應用中，頂層界面可能會包含多個視圖，務(wù)必確保這種情況下，用戶可以在多視圖之間高效地導航。

選擇最適合您應用需求的導航的方式。

單一視圖中的嵌入導航

將所有必要導航元素內(nèi)聯(lián)到內(nèi)容中，能極大提高導航的可見性。當應用的導航架構(gòu)非常簡單時，可以采用這種方法。然而，當導航系統(tǒng)過于龐大時，大量的導航路徑會占據(jù)內(nèi)容的空間，且導航路徑可能會全屏散布，而不是集中在某個位置，方便用戶導航。

在這些情況下使用內(nèi)容內(nèi)部導航

• 您的應用程序的主視圖非常重要大，其他視圖無可替代。
• 用戶可以在主視圖中輕松完成常見任務(wù)。
• 你認為用戶會較少使用你的應用，因為不熟悉，所以需要非常明顯的導航路徑。

一小部分同等重要的視圖界面，可采用標簽選項卡來進行導航切換。

如果你應用中功能區(qū)域很少，且層級較淺，可使用在頂層界面中使用標簽選項卡，只需輕輕點擊或滑動便可切換界面。。然而，使用標簽選項卡會占據(jù)大量空間，不過當標簽選項較少時，這種導航設(shè)計模式較為高效。

在這些情況下使用標簽選項卡:

• 你希望用戶在應用中頻繁切換界面。
• 頂層界面中所展現(xiàn)的標簽選項卡數(shù)量有限。
• 你希望用戶能夠充分了解其他界面。

通過左側(cè)的側(cè)拉抽屜來管理更復雜的結(jié)構(gòu)

左側(cè)導航面板可以同時顯示大量的導航目標。當你的應用功能圍繞主界面而構(gòu)建時，這種導航模式極為有效，然后將抽屜可以作為一個不經(jīng)常訪問的鏈接索引。如果你的應用程序需要從較低級別的層級跨越信息架構(gòu)層級直達另一個頁面時，這種快捷導航方式讓用戶可以更靈活操作。然而，這種導航模式并不明顯，需要一定的學習成本，讓用戶熟悉這種導航模式。

在這些情況下使用抽屜:

• 你的應用程序有大量的頂層視圖
• 你希望在不直接關(guān)聯(lián)的內(nèi)容之間快速切換.
• 你有特別深的導航分支結(jié)構(gòu)，并希望可以快速返回到應用的最頂層.
• 你想減少界面中導航元素的比重、想減少用戶不常用鏈接，便可把他們放入到側(cè)拉抽屜中。

不管選擇何種頂層視圖設(shè)計策略，都推薦內(nèi)容內(nèi)聯(lián)導航，可以迅速的導航至相關(guān)內(nèi)容。例如，推薦同一歌手的其他歌曲， 根據(jù)瀏覽歷史推薦相關(guān)產(chǎn)品，例如瀏覽一個用戶發(fā)布的其他內(nèi)容。這些關(guān)聯(lián)導航讓相關(guān)內(nèi)容可以更自然的進一步呈遞。

移動端

該結(jié)構(gòu)包括一個永久的應用欄和懸浮操作按鈕。一個附加的底部欄，里面可以添加一些附加功能和操作。提供了用戶可以導航的側(cè)拉菜單，同時側(cè)拉菜單會覆蓋其他元素結(jié)構(gòu)。

平板端

該結(jié)構(gòu)包括一個永久的應用欄和懸浮操作按鈕。應用欄吸收了平板電腦和手機的底部元素。一個附加的底部欄，里面可以添加一些附加功能和操作。左側(cè)為導航菜單，用戶如需訪問，會覆蓋所有其他結(jié)構(gòu)元件。右導航菜單可以暫時訪問或固定作為永久陳列。

桌面端

該結(jié)構(gòu)包括一個永久的應用欄和懸浮操作按鈕。操作欄吸收從平板電腦和手機的底部元素。窗口控件可被歸納到操作欄中。側(cè)面導航菜單可以暫時訪問或固定作永久陳列。側(cè)面導航菜單以及內(nèi)容可以有自己的二級工具欄，顯示標簽選項卡，樣式，或輔助操作。

UI規(guī)范

主要由水平或垂直的分割線來定義。

劃分的區(qū)域不宜太多，否則會導致L型布局（就是頁面分散）。相反，用空白字符語言（WhiteSpace，是一種只用空白字符（空格，TAB和回車）編程的語言：譯者注）來描繪中間地帶。

卡片和懸浮按鈕，打破頁面區(qū)域。

使用卡片來組織內(nèi)容，可滿足一些特殊的交互行為，也可以組織信息?？ㄆ讲季中枰罅康牧舭卓臻g，也需要分割線來劃分清晰。

工具欄

工具欄具有多種用途，適用于應用程序的各個區(qū)域。以下是您可以使用工具欄的一些例子。

寬屏、默認高度的應用欄

寬屏,高度擴展的應用欄 跨越多個列寬

單欄寬的工具欄，可以清晰的顯示出層次結(jié)構(gòu)

靈活的工具欄和卡片工具欄

懸浮工具欄

分離的工具欄面板

底部的工具欄,,緊挨著鍵盤或其他底層組件

底部工具

應用欄

應用欄結(jié)構(gòu)

應用欄，前身為Android的操作欄，用于品牌推廣，導航，搜索，和操作。

如果你的應用程序使用側(cè)拉抽屜。那么點擊Nav Icon（導航圖標），便可打開側(cè)拉，同時導航圖標變?yōu)榧^。標題可以是一個應用程序的標題，頁面標題或網(wǎng)頁過濾器。

圖標應該和應用相關(guān)操作有關(guān)聯(lián)。點擊Menu Icon（菜單圖標）可出現(xiàn)一堆菜單項，其中包含幫助，設(shè)置和反饋。

亮色

暗色

有顏色

透明的

參數(shù)標準

默認高度：

手機豎屏: 48dp

手機橫屏: 56dp

平板電腦/臺式機: 64dp

如要擴展應用欄，其高度等于默認高度加上內(nèi)容增加量。

菜單

菜單是一個臨時的卡片,總是覆蓋應用欄,而不是作為應用欄的擴展。

側(cè)邊導航

左抽屜和右導航可以固定顯示，也可以暫時懸空覆蓋于主界面中。在左側(cè)側(cè)拉菜單主要用于導航。在右邊的側(cè)拉菜單主要展現(xiàn)二級內(nèi)容相關(guān)信息。

結(jié)構(gòu)

側(cè)滑抽屜會臨時覆蓋的內(nèi)容。

參數(shù)標準:

移動端：側(cè)導航寬度=屏幕寬度 - 應用欄的高度

示例:

Nexus 4: 304 dp

Nexus 5: 288 dp

iPhone: 264 dp

桌面：最大寬度左側(cè)導航是400dp。右測導航可根據(jù)內(nèi)容的不同而不同。

桌面端/平板電腦：固定，寬度應與列對齊。

浮動最大寬度：304dp

 手機側(cè)滑

平板側(cè)滑

網(wǎng)頁側(cè)滑

基本框架

Whiteframes提供了各種結(jié)構(gòu)布局的的方法,分層和陰影。（均可以下載）基本框架

15 MB (.ai)

卡片內(nèi)容的擴大和縮小

在移動設(shè)備中，覆蓋的內(nèi)容細節(jié)和聚焦的應用欄

移動端，擁有多個工具欄的內(nèi)容重疊卡片和背景圖像

擴展應用程序欄和右側(cè)拉抽屜

左導航抽屜和瀑布流

資源列表

嵌入搜索字段的全屏背景圖像 和 卡片式搜索結(jié)果

可擴展頁腳的抽屜