前文說(shuō)到多設(shè)備的導(dǎo)航差異，導(dǎo)航是界面的核心框架，再擴(kuò)展聊一下。

一、Question

1、什么是導(dǎo)航？

2、app上有哪些導(dǎo)航？?jī)?yōu)缺點(diǎn)是什么？

3、PC端與手機(jī)端導(dǎo)航區(qū)別。

二、Answer

1、什么是導(dǎo)航？

導(dǎo)航是指路利器，沒(méi)有導(dǎo)航就容易迷路，如下圖某商場(chǎng)導(dǎo)航，采用商鋪編號(hào)標(biāo)記位置，但每個(gè)商鋪編號(hào)很難發(fā)現(xiàn)。地板天花板都無(wú)指引。一進(jìn)去就陷入我在哪？怎么去哪的困境。這導(dǎo)航看似酷炫實(shí)則不及格，想出去只能用最原始的方式詢(xún)問(wèn)。當(dāng)然或許商家是故意讓你醉生夢(mèng)死的留在商場(chǎng)里逛吃逛吃。

商場(chǎng)導(dǎo)航圖

導(dǎo)航是路標(biāo)，指引人在哪，還可以去哪，怎么去那。對(duì)應(yīng)界面設(shè)計(jì)導(dǎo)航就是可點(diǎn)擊的鏈接按鈕圖片，暗示可通行，指引到達(dá)目的地。導(dǎo)航信息以某固定原則被組織，該原則像一串線把所有信息連接起來(lái)，形成的路徑如下4種形式。如何去設(shè)計(jì)軌跡，軌跡之間如何互相傳遞信息，軌跡是否有纏繞，走出去的路又如何回到起點(diǎn)，是導(dǎo)航需解決的問(wèn)題。

導(dǎo)航的4種結(jié)構(gòu)

每一類(lèi)導(dǎo)航都與現(xiàn)實(shí)世界有緊密都映射關(guān)系，給用戶提供清晰都指引，快捷操作。

1、首頁(yè)——解決有哪些路，可以去哪的問(wèn)題。

2、第二層頁(yè)面頂部導(dǎo)航——解決當(dāng)前在哪，怎么回去，回到哪去的問(wèn)題。

3、復(fù)雜產(chǎn)品——頁(yè)面跳轉(zhuǎn)次數(shù)多，就該解決有沒(méi)有近路的問(wèn)題，比如淘寶去到詳情頁(yè)后有全局操作按鈕可以快速回到首頁(yè)／購(gòu)物車(chē)。

頂部導(dǎo)航都幾種形式：1.箭頭+上一頁(yè)名稱(chēng)／2.單獨(dú)箭頭／3.箭頭+返回／4.tab標(biāo)簽／5.頂部導(dǎo)航個(gè)性展示形式比如默認(rèn)用圖片宣傳，下滾之后顯示當(dāng)前頁(yè)面標(biāo)題如云音樂(lè)。

整體來(lái)說(shuō)導(dǎo)航就是為了解決如上幾個(gè)問(wèn)題，在形式上可以做變通設(shè)計(jì)。

導(dǎo)航界面與現(xiàn)實(shí)世界的映射關(guān)系

2、app上有哪些導(dǎo)航？?jī)?yōu)缺點(diǎn)是什么？很多書(shū)與文章寫(xiě)得很好，推薦：

———總結(jié)導(dǎo)航點(diǎn)／線／面，動(dòng)靜等特性，講導(dǎo)航的優(yōu)缺點(diǎn)比較齊全多文章 http://www.woshipm.com/pd/235540.html

———講解導(dǎo)航在優(yōu)缺點(diǎn)上理論依據(jù)更充分《移動(dòng)設(shè)計(jì)》出自阿里系作家實(shí)戰(zhàn)性較強(qiáng)，我有PDF版本有需要可以聯(lián)系我。

——-講移動(dòng)導(dǎo)航比較早的經(jīng)典書(shū)籍《移動(dòng)應(yīng)用UI設(shè)計(jì)模式（第2版）》。

app主要導(dǎo)航比較

導(dǎo)航信息設(shè)計(jì)是一種等級(jí)式設(shè)計(jì)，界面空間相當(dāng)于一塊餅，誰(shuí)分的多誰(shuí)的級(jí)別高，誰(shuí)離得進(jìn)誰(shuí)的級(jí)別高。按照用戶熟悉理解的方式進(jìn)行分類(lèi)，并建立等級(jí)層次關(guān)系，權(quán)衡考慮的因素很多：產(chǎn)品的核心價(jià)值、熟練程度、使用頻率、使用情景。步驟數(shù)越少等級(jí)越高，數(shù)據(jù)內(nèi)容呈現(xiàn)越多等級(jí)越高。

3、PC端與手機(jī)端導(dǎo)航區(qū)別。

——屏幕空間導(dǎo)致樣式不同，對(duì)應(yīng)的命名的方式不同

Web端導(dǎo)航分為：全局導(dǎo)航／區(qū)域?qū)Ш剑P(guān)聯(lián)導(dǎo)航／標(biāo)簽導(dǎo)航，大多以區(qū)域范圍命名。一頁(yè)可以包含如上所有導(dǎo)航。手機(jī)導(dǎo)航以形態(tài)命名，如上圖總結(jié)。一頁(yè)可以只有導(dǎo)航。

——容納的信息量不同，對(duì)應(yīng)深廣度不同

PC端可容納如上4個(gè)導(dǎo)航模式：淺廣，淺窄，深廣，深窄。PC端淺窄的結(jié)構(gòu)在手機(jī)端都可能深廣。而手機(jī)端碎片化的使用場(chǎng)景難以完成連續(xù)操作的工作，手機(jī)應(yīng)是PC端端減法，僅推薦淺窄模式。將PC端簡(jiǎn)化保留重要元數(shù)據(jù)，次要的或不重要的不顯示或合并顯示。只容納核心功能，非核心功能指引PC端完成。

——新開(kāi)頁(yè)面方式不同，對(duì)應(yīng)回家的方式不同。

PC端網(wǎng)頁(yè)界面鏈接打開(kāi)方式通常是刷新頁(yè)面或新開(kāi)瀏覽器tab頁(yè)，如需回到原點(diǎn)，可以點(diǎn)擊logo，點(diǎn)擊面包屑，或關(guān)閉新開(kāi)tab頁(yè)。而手機(jī)端大多通過(guò)《返回》按鈕回到上一頁(yè)，層級(jí)多時(shí)返回的按鈕越長(zhǎng)越易迷路，且移動(dòng)端碎片化場(chǎng)景下易中斷。部分層級(jí)較深的頁(yè)面應(yīng)適當(dāng)增加全局按鈕，提供一鍵返回，像淘寶在詳情頁(yè)提供首頁(yè)，消息的菜單方便快速切換。

寫(xiě)在最后

產(chǎn)品依據(jù)《用戶體驗(yàn)要素》戰(zhàn)略層－范圍層－結(jié)構(gòu)層－框架層－表現(xiàn)層的思路設(shè)計(jì)，導(dǎo)航是信息架構(gòu)的分析結(jié)果呈現(xiàn)，是商業(yè)價(jià)值與用戶需求的平衡。產(chǎn)品畫(huà)風(fēng)／語(yǔ)言可逆推產(chǎn)品姿態(tài)與價(jià)值觀。設(shè)計(jì)師要做到有邏輯的設(shè)計(jì)，設(shè)計(jì)導(dǎo)航首先是對(duì)信息架構(gòu)的理解其次才是不同終端上的表現(xiàn)形式。下次有能力再來(lái)淺談信息架構(gòu)，本次先推薦文章。1.講解《web信息架構(gòu)》較詳細(xì)的文章http://www.woshipm.com/pd/78371.html；2.如何簡(jiǎn)化已有導(dǎo)航http://www.itdecent.cn/p/0c2cc11e6188