一区视频在线_成人av在线网_国产精品一区二区久久_日本a视频_欧美第一区_成人精品一区二区三区中文字幕

根據(jù)產(chǎn)品層級(jí)的深度和廣度，選擇適合的導(dǎo)航模式，是產(chǎn)品設(shè)計(jì)中的關(guān)鍵一環(huán)。與大家共勉。

寫(xiě)在前面：看了很多總結(jié)導(dǎo)航的文章，其實(shí)都基本雷同，但是都覺(jué)得不夠細(xì)致，也不是從我們常用的產(chǎn)品去分析的，因此用自己的思路重新分析了一遍，某些段落來(lái)自引用，比如拇指熱區(qū)，某些來(lái)自我讀過(guò)的文章，但大部分的分析來(lái)自我的原創(chuàng)。這篇文章應(yīng)該說(shuō)是站在巨人的肩膀上，自己的一些淺見(jiàn)。

任何APP的組織信息都需要以某種導(dǎo)航框架固定起來(lái)，就像是建筑工人拔地而起的高樓大廈一樣，地基非常重要，之后你想要蓋多少層樓、每層樓有多少間房，都在地基的基礎(chǔ)上構(gòu)成。而一個(gè)新的產(chǎn)品也是這樣，合適的導(dǎo)航框架，決定了產(chǎn)品之后的延伸和擴(kuò)展。

不同的產(chǎn)品需求和商業(yè)目標(biāo)決定了不同的導(dǎo)航框架的設(shè)計(jì)模式。而交互設(shè)計(jì)的第一步，就是決定導(dǎo)航的框架設(shè)計(jì)，框架確定后，才能開(kāi)始逐漸豐富血肉。

首先，我們要為組織信息分層，在這一步驟，一定要做好信息層級(jí)的扁平化，不能把所有的組織信息都鋪出來(lái)，這樣做只會(huì)讓用戶(hù)心煩意亂找不到想要的重要操作，也不能把層級(jí)做的很深，用戶(hù)沒(méi)有那么多耐心跟你玩躲貓貓。一定要將做核心、最穩(wěn)固、最根本的功能要素放在第一層頁(yè)面，其他得內(nèi)容收在第二層、第三層、甚至更深。

之后，根據(jù)層級(jí)的深度和廣度來(lái)確定導(dǎo)航的設(shè)計(jì)模式。不要覺(jué)得這有多難，移動(dòng)端的屏幕尺寸就這么大，操作方式也無(wú)非就是點(diǎn)擊、滑動(dòng)、長(zhǎng)按這些。因此導(dǎo)航模式一般也就分為以下7種（當(dāng)然你可以在這七種的基礎(chǔ)上互相組合）接下來(lái)我們可以具體分析一下這七種導(dǎo)航模式。

一、標(biāo)簽式導(dǎo)航

也就是我們平時(shí)說(shuō)的tab式導(dǎo)航，是移動(dòng)應(yīng)用中最普遍、最常用的導(dǎo)航模式，適合在相關(guān)的幾類(lèi)信息中間頻繁的調(diào)轉(zhuǎn)。這類(lèi)信息優(yōu)先級(jí)較高、用戶(hù)使用頻繁，彼此之間相互獨(dú)立，通過(guò)標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶(hù)可以迅速的實(shí)現(xiàn)頁(yè)面之間的切換且不會(huì)迷失方向，簡(jiǎn)單而高效。需要注意的是標(biāo)簽式導(dǎo)航根據(jù)邏輯和重要性控制在5個(gè)以?xún)?nèi)，多余5個(gè)用戶(hù)難以記憶而且容易迷失。

而標(biāo)簽式導(dǎo)航還細(xì)分為底部tab式導(dǎo)航、頂部tab式導(dǎo)航、底部tab的擴(kuò)展導(dǎo)航這三種。

1、底部tab式導(dǎo)航

如果此時(shí)你觀察一下自己手機(jī)中常用的APP你就會(huì)發(fā)現(xiàn)QQ、微信、淘寶、微博、美團(tuán)、京東等全部都是底部tab式導(dǎo)航

這是符合拇指熱區(qū)操作的一種導(dǎo)航模式，那么什么是拇指熱區(qū)呢？當(dāng)你走在路上、單手持握手機(jī)并操作;站在公交車(chē)上，一手拉扶手，另一只手操作等等這些場(chǎng)景時(shí)，你最常用的操作就是右手單手持握并操作手機(jī)，因此，對(duì)于手機(jī)來(lái)說(shuō)，為觸摸進(jìn)行交互設(shè)計(jì)，主要針對(duì)的就是拇指。

但在手機(jī)操作中，拇指的可控范圍有限，缺乏靈活度。尤其是在如今的大屏手機(jī)上，拇指的可控范圍還不到整個(gè)屏幕的三分之一——主要集中在屏幕底部、與拇指相對(duì)的另外一邊。當(dāng)用右手持握手機(jī)的時(shí)候（左撇子畢竟是少數(shù)，我們還是要為主流用戶(hù)設(shè)計(jì)，拇指的熱區(qū)如下圖所示）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

隨著手機(jī)屏幕越來(lái)越大，內(nèi)容顯示變多了，但是單手操作變難了。這也就是為什么，工具欄和導(dǎo)航條一般都在手機(jī)界面的下邊緣，而將導(dǎo)航放置在屏幕底部即拇指熱區(qū)，這樣的方式為單手持握時(shí)拇指操作帶來(lái)了更大的舒適性。

將導(dǎo)航放置在屏幕底部也不僅僅關(guān)乎到拇指操作的舒適性，還關(guān)系到另一個(gè)問(wèn)題：如果放在上面，用手指操作時(shí)，會(huì)擋住閱讀的視線。如果控件在底部，不管手怎么移動(dòng)，至少不會(huì)擋住主要內(nèi)容，從而給予清晰的視角。呈遞內(nèi)容的屏幕在上方，控制按鍵在下方。

這也是為什么我是個(gè)果粉的原因，iPhone把一個(gè)需要按壓的home鍵放在手機(jī)底部比Android手機(jī)將三個(gè)觸摸式物理按鍵放在底部高明多了，這些接近屏幕邊緣的物理按鍵擠在一起，手指非常不便于操作。（華為甚至直接將3個(gè)物理按鍵放在了屏幕里），尤其是在我玩游戲的時(shí)候總會(huì)誤觸發(fā)這3個(gè)物理按鍵，造成無(wú)意退出，非常不爽。如果再將導(dǎo)航也放置在底部，只能對(duì)舒適性說(shuō)拜拜了（市面上的主流Android手機(jī)）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

2、頂部tab式導(dǎo)航

Android的物理按鍵已經(jīng)放在底部了，為了不產(chǎn)生堆疊，很多Android應(yīng)用運(yùn)用了頂部tab式導(dǎo)航，這是一種妥協(xié)下的行為。（下圖為微信Android和iOS圖）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

而如今，在妥協(xié)物理按鍵和拇指操作舒適中，微信Android版拋棄了頂部導(dǎo)航的方式，和IOS保持了一致

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

當(dāng)然頂部導(dǎo)航也不是那么一無(wú)是處，QQ音樂(lè)和酷我音樂(lè)現(xiàn)在用的就是頂部Tab式導(dǎo)航，為了更好的瀏覽基本信息（歌手、歌曲名）、以及支持快捷操作（播放/暫停）播放器需要固定在底部,那么頂部tab導(dǎo)航不失為一個(gè)好選擇（如下圖）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

還有騰訊新聞和網(wǎng)易新聞這種新聞?lì)怉PP，由于內(nèi)容、分類(lèi)較多，運(yùn)用頂部和底部雙tab導(dǎo)航，而切換頻率最高的tab放在頂部，這是為什么呢？因?yàn)樾侣勗诿總�(gè)tab都是沉浸式閱讀，最常用的操作是在一個(gè)tab中不斷地下滑閱讀內(nèi)容，將常用的tab放在頂部，加入手勢(shì)切換的操作，反倒能帶來(lái)更好地閱讀體驗(yàn)。（如下圖）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

小結(jié)：在兩種情況下可以選擇頂部tab式導(dǎo)航，

l 某項(xiàng)功能必須固定在底部，那么其他tab只能固定在頂部，但為了方便操作，頂部tab導(dǎo)航最好支持手勢(shì)操作，即滑動(dòng)即可切換;

l 該APP是沉浸式體驗(yàn)，如新聞、小說(shuō)等，為了帶給用戶(hù)更好的閱讀體驗(yàn)，可以將tab放在頂部。

3、底部tab式導(dǎo)航的擴(kuò)展形式

   在有些情況下，簡(jiǎn)單的底部tab式導(dǎo)航難以滿足更多的操作功能，這個(gè)時(shí)候我們就需要一些擴(kuò)展形式來(lái)滿足需求。如微博和QQ空間、閑魚(yú)都做了這種擴(kuò)展，也因此給設(shè)計(jì)增加了一些個(gè)性化的亮點(diǎn)（如圖）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

在這些APP中，為了讓用戶(hù)更簡(jiǎn)單的貢獻(xiàn)內(nèi)容，突出了按鈕的設(shè)計(jì)，讓平淡的標(biāo)簽欄多了幾分趣味。

標(biāo)簽導(dǎo)航總結(jié)：

實(shí)際上，底部Tab模式導(dǎo)航在iOS和Android上一直是最安全的一種導(dǎo)航模式，他不怎么出彩，但是絕對(duì)不會(huì)犯錯(cuò)。在大屏幕時(shí)代，底部Tab模式的導(dǎo)航更能適應(yīng)，也更好設(shè)計(jì)。

適用于：入口分類(lèi)數(shù)目不多，可以控制在5個(gè)以?xún)?nèi)，且用戶(hù)需要在入口間頻繁切換來(lái)執(zhí)行多個(gè)任務(wù)

需要注意：結(jié)構(gòu)太過(guò)復(fù)雜而且不穩(wěn)定的應(yīng)用不適合標(biāo)簽式導(dǎo)航

二、抽屜式導(dǎo)航

經(jīng)常和底部tab式導(dǎo)航結(jié)合使用的抽屜式導(dǎo)航，我們可以稱(chēng)之為優(yōu)雅的隱喻。抽屜式導(dǎo)航將部分信息內(nèi)容進(jìn)行隱藏，突出了應(yīng)用的核心功能。設(shè)想你的產(chǎn)品信息層級(jí)有非常多的頁(yè)面和內(nèi)容，難以在一屏內(nèi)顯示全部?jī)?nèi)容，那么你一定首先會(huì)想到去設(shè)計(jì)一個(gè)底部或頂部的tab導(dǎo)航，但導(dǎo)航太多無(wú)疑顯得臃腫，而且使用戶(hù)難以點(diǎn)擊，那么這個(gè)時(shí)候，抽屜式導(dǎo)航是個(gè)不錯(cuò)的選擇。

但是，抽屜欄式導(dǎo)航有兩大缺陷

1、在大屏幕手機(jī)上，單手持握時(shí)處于操作盲區(qū)，難以點(diǎn)擊

我們看到隨著iPhone6和iPhone6 plus的推出，到今年6S的持續(xù)推進(jìn)，大屏幕手機(jī)時(shí)代就這么不可阻擋的來(lái)了，而屏幕頂部左上角的抽屜欄位置，一個(gè)需要被經(jīng)常操作的入口，現(xiàn)在，處在了操作盲區(qū)。（如下圖）

網(wǎng)站導(dǎo)航設(shè)計(jì) 移動(dòng)端導(dǎo)航設(shè)計(jì) 移動(dòng)站點(diǎn)優(yōu)化 移動(dòng)站點(diǎn)策劃

2、 抽屜式導(dǎo)航可能會(huì)降低你產(chǎn)品一半的用戶(hù)參與度

抽屜欄為頁(yè)面帶來(lái)干凈的設(shè)計(jì)的同時(shí)，也讓用戶(hù)忽視隱藏的信息，既然你第一眼看不到這些入口，那么你也就會(huì)時(shí)常忘記它們?cè)谀膬骸＿@也導(dǎo)致了隱藏在抽屜欄內(nèi)的信息內(nèi)容用戶(hù)點(diǎn)擊率下降，參與感降低。

那么，問(wèn)題來(lái)了，到底什么時(shí)候適合用側(cè)導(dǎo)航呢？

我們總結(jié)一下：

l  如果應(yīng)用主要的功能和內(nèi)容都在一個(gè)頁(yè)面里面。只是一些用戶(hù)設(shè)置這類(lèi)低頻操作內(nèi)容需要顯示在其他頁(yè)面里。為了讓主頁(yè)面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。

l  如果你的應(yīng)用有不同的視圖，且他們是平級(jí)的，需要用戶(hù)同等地對(duì)待，抽屜欄將會(huì)浪費(fèi)掉大多數(shù)的用戶(hù)對(duì)于側(cè)邊欄中入口的潛在參與度和交互程度。

l  在大屏?xí)r代使用抽屜欄，手勢(shì)操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個(gè)不錯(cuò)的選擇。

需要注意的是：需要用戶(hù)有一定參與的信息層級(jí)，最好不好放置在抽屜欄