關於交互設計的一點點總結——導航欄

交互設計學習了一段時間了，但還處於被動接受知識的階段，比如讀書，看一些知乎、微信以及設計網站上面的文章。對交互設計有了一定的認識，我對交互設計最淺顯的理解就是使得人和機器可以實現良好互動的一種手段，讓人和機器之間的交流就像是人和人交流一樣順暢。好的交互設計可以讓用戶在使用產品時有好的用戶體驗，從而願意繼續使用下去，這樣也就達到了維繫用戶的目的。

理論上的一些知識點有了大概了解，比如心智模型、反饋、格式塔原則、習得性無助等。需要學習的理論還有很多。實際輸出的產品是由一些具體的功能點（展示信息）組成，而控制項、文字、圖片等基本元素構成的界面又是各功能點（信息）的載體。對各功能點（展示信息）進行合理的組織歸納提煉可以理解為信息架構設計，信息架構設計決定了各功能點（信息）的入口位置，導航即是為了讓用戶找到這些入口。用戶往往在功能（信息）界面達到自己的目的。在設計時需要充分運用理論知識，才能保證用戶可以順暢的達到自己的目的地並完成目標，附加的還可以發現其他感興趣的地方。

通過對各種App的使用可以發現，app的第一級頁面都可以認為是導航頁。無論是移動端還是PC端，可以利用的空間有限，而需要展示的內容又很多，所以導航頁面在用戶使用時起到了很大的作用。這裡主要對導航頁面的一些基本要素進行一下總結（主要針對移動端，Andriod）。主要分成導航菜單、標籤欄和內容區域，。

一、導航菜單

導航是指引用戶的重要方式，內容再精彩，用戶無法找到也是徒勞，導航的設計在交互設計中十分重要。導航可以有很多層級，主導航在總體架構上把不同功能屬性的頁面切割開。各頁面的次級導航在主導航的某個索引下對功能進行細分，次級導航下可能還有更底層的導航，無論有多少級導航，最終目的都是引導用戶完成自己的任務。當然，導航的路徑如果太深，用戶的操作成本也會大大提高。良好的導航設計不僅可以有效的指引用戶，還可以突出產品本身的核心功能。

1、主導航

在移動端app，主導航主要以標籤式、抽屜式以及平鋪式三種方式進行呈現。

1）標籤式

標籤式是最常見的一種導航方式，隨便翻下手機，絕大部分app基本上都是以標籤式作為主導航的。

主導航是要幫助用戶一進入app就能理得清產品大致都可以幹什麼的，而標籤式恰好可以滿足這一要求。如圖，標籤式導航一般由幾個獨立的icon（或文字）一字排開，一般是3到5個，太多會顯得擁擠不利於用戶迅速找到，太少又顯得內容不太充實白白浪費了空間。

標籤式導航一目了然，用戶只需要一次點擊就可以切換頁面，十分方便。

標籤導航一般在屏幕的最頂部或最底部。底部的導航欄用戶比較方便點擊。但是有些app用戶會有比較頻繁的操作，比如音樂類，用戶會經常控制音樂的播放狀態，所以這類app一般把導航欄放到了頂部，把最適宜操作的區域留給了播放器。

雖然市面上app主導航欄的布局基本相似，用戶基本上已經習慣，但在設計標籤式主導航欄時也要注意，和其他區域明顯分割。可以利用顏色、分割線等因素突出對比。導航欄各icon的色調也需保持一致，否則很容易分散用戶的注意力，顯得界面十分混亂。

標籤式導航用戶現在所處的位置，導航欄上選中的icon需要和其他icon形成強烈對比，現在許多app運用了icon的反色來突出對比。

導航欄一定程度上也承載了提示的功能，比如我們常見的小紅點。導航區域最為明晰，在=導航欄上標示消息提醒不僅讓用戶可以一眼注意到，也充分利用了空間。

標籤式通常適用於功能比較豐富，可以清晰的對其功能進行劃分的app。但有時，劃分出的主導航有可能大於5個，而標籤式導航很固定沒法進行擴展，這就需要和其他導航方式進行結合了。

對於標籤式導航，由於其位置固定，始終會佔用一部分空間，一些內容類的app為提高用戶在瀏覽時的體驗，用戶在滑動頁面時會將導航欄漸隱，從而誇大內容區域。

2）抽屜式

抽屜式導航又叫側邊欄式導航或漢堡式導航。

運用抽屜式作為主導航的app往往核心功能特別明顯，例如滴滴打車、印象筆記、摩拜單車，用戶使用這類app目的性很強。

抽屜式導航一般是隱藏起來的，這就給app有了很大的空間突出其核心功能，降低了對用戶的干擾，用戶無需經過導航，一打開app就可以直接進入想要的功能界面。

抽屜式導航將不重要、不常用的功能隱藏起來。有時抽屜式導航和標籤式也可配合使用，比如QQ，「我」這一項，就被做成了抽屜式，將主導航劃分了一個層級，弱化了「我」的地位，用戶更容易把精力集中到標籤導航的三項，而用戶想要使用到「我」中的功能時，也可以輕易找到。

由於抽屜式導航的隱藏性比較高，用戶不容易發現，一定程度上也降低了某些功能的使用率。所以使用抽屜式導航作為主導航要慎重，比如內容類、電商類的app想讓用戶發現的點有很多，就不太適合使用抽屜式作為主導航。

3）平鋪式

2、頁面導航

相比於主導航，在頁面內容區域的導航樣式要豐富一些。主要有tab選項卡式、列表式、畫廊式、宮格式、下拉菜單式跳板式？ 儀錶式？ 隱喻式？ 超級菜單式？ 抽屜式

1）選項卡式

選項卡式導航很多情況下會用作二級導航，選項卡可以對同一級別但不同類型的內容太進行劃分，如優酷將視頻劃分為綜藝、電影、電視劇等，新聞類app將諮詢劃分為頭條、訂閱、直播等。

選項卡就像是不同的頁面層疊在一起，用戶可以通過點擊選項卡從層疊的網頁中將想要的頁面抽取出來，就像現實生活中那種帶標籤的筆記本。用戶在瀏覽當前選項卡對應頁面時，用戶可以明確知道當前所在位置，還可以一覽全局，了解大概還有什麼其他的內容，能夠比較好的吸引用戶。用戶在切換時也比較方便，無需返回上級。

選項卡式導航一般在頁面上方。根據頁面內容可以做成滑動漸隱效果。因為在頁面上方，用戶可能不容易點擊到，為了方便用戶切換選項卡式的導航一般都支持滑動切換。

2）列表式

列表式導航有很好的擴展性，符合用戶自上至下的瀏覽習慣，可以承載的內容也比較多。列表式導航比較清晰明了，界面乾淨整潔，對用戶不會有過多的干擾，用戶比較容易集中精力在當前頁面，也更容易找到想要的信息。

列表式導航可以以不同的形式展示信息，純文字，文字+icon，文字+圖片等。但列表式導航更利於突出文字的內容。

列表導航需要用戶點擊才能進入到下級頁面，當用戶想查看其它內容時也需要返回上級。

3）畫廊式

相比於列表式，用戶在瀏覽畫廊式頁面時視覺流為Z字形，畫廊式更具有感染力，更利於圖片的展示，布局更緊湊更節省空間。可以布局成網格、瀑布流、輪盤等。

4）宮格式

宮格式可用空間有限，很難擴展，但在同一界面上宮格式導航比其他導航更容易心音用戶注意。比如支付寶的首屆面。宮格式導航在代碼實現上也比較方便。往往會把一些很重要的、最希望被用戶發現的功能加入到宮格中。

5）下拉菜單式

下拉菜單式，可以嵌入到其他導航中。比如微博首頁，拉夠tab頁的篩選條件。下拉菜單和抽屜式一樣十分省空間，但是也十分隱蔽，我第一次用微博時，用了很久才找到那個下拉菜單。

7）點聚式

點聚式，可以嵌入在主導航欄中，也可以以按鈕的形式嵌入在頁面中。點聚式一般用於給用戶發布內容。點聚式在頁面上特別醒目，引導用戶去點擊從而產生內容。如果點聚式是在主導航中一般會與其他標籤有明顯的區分。

8）輪盤式

以輪播大圖的形式展現。一般會佔據比較大的篇幅，用戶需要通過滑動才能看全所有信息。這種方式很有吸引力，可以展示一些主打產品、內容或廣告等。但使用這種方式要注意，要提醒用戶還有其他的信息可以瀏覽，或採用幻燈片的形式輪播、或顯示箭頭、或某些圖片不要顯示全以引導用戶翻看。

8）儀錶盤式

儀錶盤式主要用於展示某些指標，常見於一些商務類、運動類的app。用戶在儀錶盤導航時就能知道大概的趨勢、佔比等情況，再次點擊則可以查看詳細情況。

狀態欄後續再寫……