亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁(yè) > 新聞資訊 > 建站知識(shí)
移動(dòng)端導(dǎo)航設(shè)計(jì)

2017-03-01

2839

平常我們?nèi)ド虉?chǎng)或者景點(diǎn)逛的時(shí)候,通常會(huì)看到整個(gè)景區(qū)或者整個(gè)商場(chǎng)的導(dǎo)游圖,能讓我們知道身處何地并且快速的找到目的地。投射到一個(gè)虛擬的產(chǎn)品上面,同樣是一個(gè)“商場(chǎng)”或“景點(diǎn)”,為了讓用戶能夠順利的在產(chǎn)品中暢行,則必須為用戶提供一個(gè)有效的導(dǎo)航系統(tǒng),讓用戶時(shí)刻清楚自己在應(yīng)用中所處的位置,及如何前往目的頁(yè)面。產(chǎn)品的導(dǎo)航系統(tǒng),是產(chǎn)品的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。

介紹APP導(dǎo)航設(shè)計(jì)的文章中至少會(huì)提到數(shù)十種導(dǎo)航方式,種類名稱繁多,不是很容易理得清。那么問(wèn)題來(lái)了,怎樣才能更加更快速、系統(tǒng)地掌握各種導(dǎo)航設(shè)計(jì)方式呢?在本篇縱天企業(yè)網(wǎng)站建設(shè)為大家梳理下,按照結(jié)構(gòu)化思維對(duì)各種APP導(dǎo)航設(shè)計(jì)進(jìn)行分類整理,最終形成三個(gè)大類:分層結(jié)構(gòu)、扁平化結(jié)構(gòu)以及內(nèi)容或體驗(yàn)驅(qū)動(dòng)型,提供另外一種認(rèn)識(shí)APP導(dǎo)航設(shè)計(jì)方式的思路。

一、層次結(jié)構(gòu)導(dǎo)航
從杜威十進(jìn)制分類法到動(dòng)物界的門綱目科屬,龐大的信息通常都會(huì)被分類到類別,以及子類別、子子類別...中去,這就是層級(jí)結(jié)構(gòu)。層級(jí)結(jié)構(gòu)模型是人們最容易理解的分類結(jié)構(gòu)模型,層級(jí)導(dǎo)航也是APP中最常用的導(dǎo)航模型之一,本篇將列表式導(dǎo)航、宮格式導(dǎo)航(跳板式導(dǎo)航)、陳列館式導(dǎo)航歸為層級(jí)導(dǎo)航結(jié)構(gòu),它們有共性也有細(xì)微的不同:

1、列表式導(dǎo)航

列表式導(dǎo)航中的每一個(gè)列表項(xiàng)(注:iOS設(shè)計(jì)指南中成列表為表格視圖)都是進(jìn)入子功能的入口,用戶通過(guò)在每個(gè)頁(yè)面選擇一次進(jìn)行導(dǎo)航,直至到達(dá)目標(biāo)位置,并且模塊之間的切換必須返回至列表主頁(yè)當(dāng)中。列表相當(dāng)于一個(gè)一行一列的表格,列表項(xiàng)中既可以填充文字圖片,也可以填充按鈕或者展開某一項(xiàng)。

iOS中設(shè)置是經(jīng)典的利用列表導(dǎo)航的應(yīng)用,QQ郵箱是為數(shù)不多用列表式設(shè)計(jì)做主導(dǎo)航的應(yīng)用

注:iOS設(shè)置 & QQ郵箱
列表中可以填充更多的列表項(xiàng),來(lái)擴(kuò)展有限的屏幕空間上能夠容納的入口數(shù)量,可以用來(lái)展示信息記錄/聯(lián)系人列表等某一類別下的列表項(xiàng)記錄

注:mono 中的小組列表 & 一直播中粉絲列表
列表式導(dǎo)航也是最常見的導(dǎo)航方式之一,更多被用來(lái)做次級(jí)導(dǎo)航,多用在個(gè)人中心、設(shè)置、內(nèi)容/信息列表中

注:簡(jiǎn)書  & 美團(tuán),“我的”用列表導(dǎo)航做次級(jí)導(dǎo)航


2、宮格式導(dǎo)航(跳板式導(dǎo)航)

宮格式導(dǎo)航可以看做列表式導(dǎo)航的變形,同樣屬于層級(jí)結(jié)構(gòu)導(dǎo)航,不同于列表導(dǎo)航地方在于宮格式導(dǎo)航是以N行N列的表格來(lái)呈現(xiàn),同時(shí)表格中元素以圖片為主。宮格中一個(gè)格子代表一個(gè)功能/模塊入口,從一個(gè)模塊到另一個(gè)模塊用戶必須原路返回幾步(或者從頭開始),然后做出不同的選擇。宮格式導(dǎo)航曾經(jīng)在APP中非常流行,主要是因?yàn)樗苋菁{更多的功能入口,同時(shí)跨平臺(tái)不受平臺(tái)限制(移動(dòng)互聯(lián)網(wǎng)剛興起的時(shí)候,每個(gè)平臺(tái)的交互規(guī)范有很大的區(qū)別)

注:早期的Facebook與 LinkedIn就是采用宮格式導(dǎo)航做主導(dǎo)航(2011年)
美圖秀秀、微店是現(xiàn)在位數(shù)不多的仍舊用宮格式導(dǎo)航做主導(dǎo)航的應(yīng)用之一,微軟識(shí)花這款小工具首頁(yè)也是用宮格式導(dǎo)航產(chǎn)品設(shè)計(jì),美圖秀秀與微軟識(shí)花都是工具型產(chǎn)品,而微店中采用宮格式設(shè)計(jì)展示最常用的功能入口

注:美圖秀秀 & 微軟識(shí)花 & 微店
當(dāng)前,很少有產(chǎn)品會(huì)用宮格式導(dǎo)航做主導(dǎo)航,主要是利用宮格式導(dǎo)航的擴(kuò)展功能來(lái)做次級(jí)導(dǎo)航,與標(biāo)簽式導(dǎo)航以及其他類型的導(dǎo)航模式共同構(gòu)成整個(gè)應(yīng)用的導(dǎo)航系統(tǒng)

注:支付寶 & 豌豆莢一覽


3、陳列館式導(dǎo)航

陳列館式導(dǎo)航可用來(lái)呈現(xiàn)實(shí)時(shí)內(nèi)容,比如新聞、菜譜、文章或照片,可以采用網(wǎng)格布局(比如一直播和ins)或輪盤布局(比如格瓦拉電影),還可以采用幻燈片模式進(jìn)行展示。陳列館式導(dǎo)航本質(zhì)上也是另外一種層級(jí)導(dǎo)航結(jié)構(gòu),進(jìn)入另外一個(gè)內(nèi)容詳情之前,必須先回到主界面重新點(diǎn)擊進(jìn)入。相較于列表導(dǎo)航、宮格式導(dǎo)航的不同在于,陳列館式導(dǎo)航有更豐富的表現(xiàn)形式、更加隨意的組合效果(瀑布流等)以及豐富的動(dòng)態(tài)效果(輪盤、幻燈片形式)

注:一直播(網(wǎng)格布局展示主播信息) & 格瓦拉電影(采用輪播布局展示電影信息)
相較于列表導(dǎo)航、宮格式導(dǎo)航,陳列館式設(shè)計(jì)展示了彼此獨(dú)立、內(nèi)容之間無(wú)層級(jí)關(guān)系的內(nèi)容項(xiàng)

注:ins & 開眼
陳列館式設(shè)計(jì)模式最適合呈現(xiàn)經(jīng)常更新的、視覺效果直觀、彼此獨(dú)立的內(nèi)容。

注:LOFTER和廚房故事都采用瀑布流網(wǎng)格布局展示內(nèi)容信息
注意:宮格式導(dǎo)航與陳列館式、列表導(dǎo)航的區(qū)別是后兩種形式的導(dǎo)航中一個(gè)宮格/列表為菜單/功能入口,而陳列館式導(dǎo)航中展示的更多為彼此獨(dú)立的實(shí)時(shí)內(nèi)容
層級(jí)導(dǎo)航的優(yōu)缺點(diǎn):

優(yōu)點(diǎn):能應(yīng)變大量的類別、功能和項(xiàng)目;組織方式常見,容易理解,可直接對(duì)內(nèi)容進(jìn)行交互;直觀且占用屏幕空間??;列表展示很適合用戶自定義分類

缺點(diǎn):主功能只有在最頂層頁(yè)面才會(huì)被顯示出來(lái),不像標(biāo)簽欄,每個(gè)頁(yè)面都可以看見;主功能和分類以及內(nèi)容之間的切換有些麻煩。必須要先回到頂層頁(yè)面,然后再依次點(diǎn)入



二、扁平結(jié)構(gòu)導(dǎo)航
在扁平信息架構(gòu)的應(yīng)用中,用戶可以從首頁(yè)目錄直接切換到另一個(gè)類目視圖,因?yàn)樗械姆诸惗伎梢詮闹髌林苯釉L問(wèn)。iOS與Android中分別提供標(biāo)簽欄以及選項(xiàng)卡作為支撐扁平導(dǎo)航的控件,越來(lái)越多的應(yīng)用結(jié)合兩者進(jìn)行整體導(dǎo)航的設(shè)計(jì)

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

標(biāo)簽式導(dǎo)航對(duì)應(yīng)iOS中的標(biāo)簽欄,是現(xiàn)在最常見的主導(dǎo)航模式。最大的好處就是扁平化整個(gè)應(yīng)用的導(dǎo)航結(jié)構(gòu),所有主類別視圖都可以在頂層視圖進(jìn)行切換,用戶可以直接從一個(gè)類別的視圖切換到另一個(gè)類別的視圖,利于用戶在視圖之間的頻繁切換,而不需要像層級(jí)導(dǎo)航那樣回到主頁(yè)面重新進(jìn)入,直觀清晰、易于用戶理解

注:iOS版網(wǎng)易云音樂和Instagram都用標(biāo)簽欄做主導(dǎo)航
標(biāo)簽欄標(biāo)簽最好不多于5個(gè),當(dāng)多余四個(gè)時(shí),將剩下的功能全部置于“更多/我的/個(gè)人”中

注:網(wǎng)易嚴(yán)選 & 知乎
標(biāo)簽導(dǎo)航的變形:標(biāo)簽欄中加入功能按鈕,一般是一個(gè)應(yīng)用中最核心功能的功能入口或功能入口集(點(diǎn)聚式),多為發(fā)布類按鈕,例如:Instagram、LOFTER、微博、QQ空間等可以快速發(fā)布內(nèi)容

注:nice(快速發(fā)布功能入口) &  新浪微博 (子功能集入口)
2、固定選項(xiàng)卡

固定選項(xiàng)卡是安卓系統(tǒng)提供的三種頂級(jí)導(dǎo)航方式之一,與iOS系統(tǒng)中的標(biāo)簽欄相似,同樣的它能夠扁平化整個(gè)信息結(jié)構(gòu),并且支持左右滑動(dòng)切換到不同的視圖。隨著移動(dòng)端交互設(shè)計(jì)的發(fā)展,Android與iOS兩大陣營(yíng)的相互借鑒、完善,交互設(shè)計(jì)規(guī)范越趨于相似,你會(huì)看到大量安卓應(yīng)用也采用標(biāo)簽欄作為主導(dǎo)航,iOS應(yīng)用中采用頂部選項(xiàng)卡式導(dǎo)航作為次級(jí)導(dǎo)航

注:Android版網(wǎng)易云音樂以及iOS版QQ音樂都用固定選項(xiàng)式導(dǎo)航做主導(dǎo)航
以下場(chǎng)景中可以使用固定選項(xiàng)卡:需要經(jīng)常切換視圖/內(nèi)容視圖有限(3-4個(gè))/讓用戶清楚地知道可供選擇的視圖

注:荔枝FM & 小咖秀
固定選項(xiàng)卡一般放置在屏幕的頂部(導(dǎo)航欄或?qū)Ш綑谙路剑故就荒K下不同類別的信息或者篩選不同模塊的信息

注:LOFTER & 小紅書


3、滾動(dòng)選項(xiàng)卡

滾動(dòng)選項(xiàng)卡與固定選項(xiàng)卡同屬選項(xiàng)卡式,一般滾動(dòng)選項(xiàng)卡要比固定選項(xiàng)卡要窄, 一個(gè)模塊中可以顯示多個(gè)(超過(guò)5個(gè))類別的視圖,并且還可以進(jìn)行擴(kuò)展以及自定義展示(多用在頻道/模塊定制中),同樣可以左右滑動(dòng)切換不同類別的視圖

注:QQ空間 & 騰訊新聞
滾動(dòng)選項(xiàng)卡能通過(guò)水平滑動(dòng),定位到更多的選項(xiàng)卡視圖中。如果應(yīng)用的內(nèi)容有很多視圖,或者靈活的插入而不能確定有多少視圖將會(huì)被展示,就是用滾動(dòng)選項(xiàng)卡吧

注:虎牙直播 & 鳳凰新聞
扁平導(dǎo)航結(jié)構(gòu)的優(yōu)缺點(diǎn):

優(yōu)點(diǎn):能夠快速的訪問(wèn)到所有主要模塊視圖;標(biāo)注清晰的菜單,告知用戶主要功能和當(dāng)前所在的功能模塊;有利用用戶進(jìn)行視圖之間的頻繁切換

缺點(diǎn):標(biāo)簽欄導(dǎo)航只能顯示5個(gè)標(biāo)簽;標(biāo)簽欄以及選項(xiàng)卡欄會(huì)占用一定的屏幕空間;選項(xiàng)卡過(guò)多,會(huì)導(dǎo)致切換不同類別視圖較繁瑣(選項(xiàng)卡過(guò)多,最好右側(cè)提供全部分類的導(dǎo)航)


三、內(nèi)容或體驗(yàn)驅(qū)動(dòng)導(dǎo)航(其他類型)


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

抽屜式導(dǎo)航也叫側(cè)邊欄(抽屜)式導(dǎo)航,抽屜式導(dǎo)航一般應(yīng)用在以下的場(chǎng)景中:

(1)核心功能流程單一,主界面就能滿足用戶核心場(chǎng)景下的需求,不需要頻繁在幾個(gè)功能模塊之間進(jìn)行切換,將其他的功能模塊(通常是分類、設(shè)置、個(gè)人中心等)做一個(gè)收納,利用抽屜導(dǎo)航隱藏起來(lái),例如:探探、唯品會(huì)、滴滴出行等;


注:滴滴出行 & 探探


(2)節(jié)省屏幕空間,突出主要功能模塊,將相對(duì)不常用的功能模塊整合起來(lái)放到側(cè)邊抽屜,例如:QQ、懂球帝、有貨等

注:懂球帝 &  有貨  (都采用嵌入式)
抽屜式導(dǎo)航的三種風(fēng)格:浮層、嵌入式(向右推動(dòng)原有界面)、新興的模式(向右滑動(dòng)的3D效果)

注:天天快報(bào)(浮層式) & 知乎日?qǐng)?bào)(嵌入式) & 酷狗音樂 (新興模式)

缺點(diǎn):功能模塊之間的切換比較繁瑣,新用戶的學(xué)習(xí)成本較高


2、卡片式導(dǎo)航

卡片式導(dǎo)航原型類似生活中撲克牌,模仿切牌、換牌、翻牌等動(dòng)作模式,是一種比較新穎的導(dǎo)航模式,在市面上應(yīng)用這種導(dǎo)航的應(yīng)用不算太多,探探中采用卡片式設(shè)計(jì)為導(dǎo)航和內(nèi)容交互的主要模式,像卡片一樣堆疊展示推薦用戶,左滑表示無(wú)感,右滑表示喜歡或點(diǎn)贊;AcFun中采用卡片式設(shè)計(jì)展示推薦的番劇,任何方向的滑動(dòng)都為切換不同的番劇

注:探探 & AcFun
陌陌-點(diǎn)點(diǎn)與秒拍-熱榜都采用卡片式設(shè)計(jì)向用戶展示推薦好友以及最熱的短視頻信息

注:陌陌-點(diǎn)點(diǎn) & 秒拍-熱榜


3、翻頁(yè)式導(dǎo)航

翻頁(yè)式導(dǎo)航最常見的就是利用頁(yè)面控件(iOS中的標(biāo)準(zhǔn)控件),能夠告訴用戶打開了多少個(gè)視圖,以及它們當(dāng)前處在哪個(gè)視圖當(dāng)中,利用手勢(shì)操作控制頁(yè)面的位置。墨跡天氣的城市視圖展現(xiàn)以及Facebook中查看好友請(qǐng)求都是利用翻頁(yè)式導(dǎo)航,墨跡天氣中提供了指示頁(yè)面數(shù)量以及頁(yè)面當(dāng)前位置的頁(yè)面控件,而Facebook則利用部分可見的內(nèi)容引導(dǎo)用戶滑動(dòng)切換不同好

注:墨跡天氣 & Facebook


4、下拉列表式導(dǎo)航

下拉菜單能讓用戶在有限的屏幕空間上做更多的動(dòng)作,通常用來(lái)篩選同一信息模塊下不同類別的信息,或者快速啟動(dòng)某些常用的功能模塊,而不需要頻繁的頁(yè)面跳轉(zhuǎn)。Android中對(duì)應(yīng)的控件為spinner控件,但該控件用于同一類別下不同視圖之間的切換,而不是跳轉(zhuǎn)至完全不同的視圖。iOS中下拉菜單為自定義控件,可以實(shí)現(xiàn)不同類別之間的切換

注:秒拍 & 喜馬拉雅FM
不要讓菜單覆蓋整個(gè)屏幕,同時(shí)點(diǎn)擊背景的任意位置可以隱藏菜單

注:same & 網(wǎng)易云音樂
下拉菜單常用做信息/內(nèi)容列表的篩選,篩選同一信息列表中不同類別的信息

注:58同城 & 蘇寧易購(gòu)


看完關(guān)于移動(dòng)導(dǎo)航設(shè)計(jì)的總結(jié),如何應(yīng)用到平時(shí)的產(chǎn)品設(shè)計(jì)中呢?以下兩點(diǎn)可供參考:首先,可以參考競(jìng)品是如何做的,為什么這么做,這么做的效果如何;其次,結(jié)合自己產(chǎn)品實(shí)際的需求、功能、內(nèi)容、用戶使用場(chǎng)景等進(jìn)行思考,可以在做出幾套方案后,進(jìn)行最優(yōu)選擇。最后注意在平時(shí)使用產(chǎn)品的過(guò)程中留意相關(guān)的產(chǎn)品設(shè)計(jì),適當(dāng)?shù)倪M(jìn)行總結(jié),才能在產(chǎn)品設(shè)計(jì)中游刃有余。


本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:APP開發(fā) ,移動(dòng)網(wǎng)站建設(shè), 高端網(wǎng)站建設(shè), 企業(yè)網(wǎng)站建設(shè)

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問(wèn)通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問(wèn)

信息保護(hù)中,請(qǐng)放心填寫
關(guān)閉
免費(fèi)獲取方案