交互細(xì)節(jié):導(dǎo)航欄如何設(shè)計得更好?
編輯導(dǎo)語:我們?nèi)粘煤芏囝愋偷漠a(chǎn)品,在操作一個產(chǎn)品時,我們會選擇各種路徑進(jìn)行操作,這時導(dǎo)航欄起到了很大的作用;導(dǎo)航欄可以幫助用戶進(jìn)行下一步操作,所以對于用戶體驗也是比較重要的;本文作者分享了關(guān)于交互中的導(dǎo)航欄設(shè)計,我們一起來了解一下。
一、關(guān)于導(dǎo)航欄
頂部導(dǎo)航欄出現(xiàn)在應(yīng)用程序屏幕的頂部,狀態(tài)欄下方,并指引當(dāng)前頁面位置、層級的控件;就是說,哪天你用一個 App 卻問我在哪、我該如何返回的時候,就是導(dǎo)航欄沒設(shè)計好。
導(dǎo)航欄是 App 中最常見的控件之一,iOS 和 Material Design 規(guī)范中對它進(jìn)行了闡述:
- 在 iOS 上,該欄被稱為導(dǎo)航欄,其高度比 Android 版本短。
- 在 Android 上,該欄被稱為頂部應(yīng)用欄,本文會以更常用的導(dǎo)航欄的叫法指代。
二、導(dǎo)航欄的特點(diǎn)
1. 穩(wěn)定的
頂部導(dǎo)航欄會顯示在應(yīng)用中幾乎每個頁面的頂部,有時是常駐存在,有時隨著頁面需要進(jìn)行隱藏,但永遠(yuǎn)不會缺席;很少頁面完全不需導(dǎo)航欄,而整個應(yīng)用都不需要導(dǎo)航欄的幾乎不存在。
2. 指引的
之所以叫它導(dǎo)航欄,明顯就是因為這個玩意具有導(dǎo)航作用,可以和用戶說,你現(xiàn)在處于什么頁面(導(dǎo)航欄標(biāo)題)、你現(xiàn)在處于什么位置(一級導(dǎo)航、二級導(dǎo)航,靠返回按鈕區(qū)分),用戶可以通過導(dǎo)航欄回到最開始的位置。
3. 統(tǒng)一的
同一個應(yīng)用內(nèi),導(dǎo)航欄的位置、高度、信息都具備相對的統(tǒng)一性,以增加熟悉度,這也是頁面一致性要求的,iOS 和 Material Design 對導(dǎo)航欄的高度、信息等內(nèi)容都進(jìn)行了要求,所以大家在形態(tài)上都大差不差(但是內(nèi)容上被玩出了花,下文會講到)。
三、導(dǎo)航欄功能類型
按照功能類型劃分,導(dǎo)航欄常見的有:常規(guī)導(dǎo)航欄、編輯操作欄。
1. 常規(guī)導(dǎo)航欄
常規(guī)導(dǎo)航欄主要的是提供頁面及層級的指引、以及相關(guān)操作,這是我們看到最多的導(dǎo)航欄類型。
2. 編輯操作欄
編輯操作欄可以為所選項目提供動作。常規(guī)導(dǎo)航欄可以切換為編輯操作欄,在執(zhí)行某項操作或?qū)⑵涑废耙恢北3只顒訝顟B(tài)。
四、常規(guī)導(dǎo)航欄解析
在 Material Design 的規(guī)范中,導(dǎo)航欄由容器、導(dǎo)航圖標(biāo)、標(biāo)題、操作項、更多菜單等組成,而國內(nèi)的許多應(yīng)用,都在此基礎(chǔ)上,進(jìn)行了更多適應(yīng)產(chǎn)品需求的個性化設(shè)計;但是在形態(tài)上,依然與規(guī)范相似,以保證用戶易理解性與體驗的流暢性。
1)容器:即導(dǎo)航欄的范圍,導(dǎo)航欄所都有元素都應(yīng)當(dāng)在容器里面,導(dǎo)航欄容器的高度因場景不同,有高低之分。
常規(guī)的導(dǎo)航欄只需要保證指引性即可,所以不需要占據(jù)太大的高度位置,特別是非工具型的產(chǎn)品,更是將頁面高度空間視為寸土寸金的存在。
MD 針對導(dǎo)航欄的特殊情況提供了突出的頂部導(dǎo)航欄方案,并明確指出可用于較長的標(biāo)題,以容納圖像或為頂部應(yīng)用程序欄提供更強(qiáng)的外觀。
但是這種方案在國內(nèi)的應(yīng)用的并不常見,因為中文環(huán)境下,出現(xiàn)這種超長標(biāo)題的場景比較少,就算有,大多也可以通過縮減標(biāo)題字?jǐn)?shù)的方法避免這種問題。
iOS 的大標(biāo)題導(dǎo)航欄使用反而更為常見,大標(biāo)題可以明確地與下方內(nèi)容進(jìn)行區(qū)分,默認(rèn)情況下,大標(biāo)題導(dǎo)航欄不包含背景底色或陰影。
大標(biāo)題導(dǎo)航欄樣式下,隨著用戶滾動頁面內(nèi)容,大標(biāo)題會轉(zhuǎn)換為標(biāo)準(zhǔn)大小的標(biāo)題。
導(dǎo)航欄的底色理論上允許各種顏色,同時也支持透明,但在設(shè)計時,基于體驗上的可視性,需要避免因?qū)Ш綑诘耐该鞯咨鴮?dǎo)致與下方信息難以區(qū)分的情況。
2)導(dǎo)航圖標(biāo)(可選):導(dǎo)航圖標(biāo)是可選的,它可以采用以下任何形式:
菜單圖標(biāo):這將打開一個導(dǎo)航抽屜,而在國內(nèi) App 中,這個規(guī)范不僅是漢堡導(dǎo)航按鈕的形式,也可以是頭像圖片等形式。
返回箭頭:返回上一個頁面,返回箭頭并非必須是向左箭頭,也有向下箭頭、關(guān)閉按鈕等,但總之都是“回退”的方向。
人們知道標(biāo)準(zhǔn)的后退按鈕可以讓他們通過信息層次結(jié)構(gòu)來追溯自己的步驟,但是,如果應(yīng)用希望實(shí)現(xiàn)自定義后退按鈕,就需要確保它仍然看起來像后退按鈕,行為符合人們的期望,與界面的其余部分匹配,并且在整個應(yīng)用程序中始終如一地實(shí)現(xiàn)。
常規(guī)返回箭頭:
向下返回箭頭(常用于可以下滑收起的頁面):
關(guān)閉樣式返回按鈕(常用于瀏覽器/H5 等層級較深但可以一鍵關(guān)閉的頁面):
3)標(biāo)題(可選):應(yīng)用欄標(biāo)題可用于描述,主要作用為:用戶當(dāng)前所在的頁面/頁面中的具體場景/正在使用的應(yīng)用等,此外,標(biāo)題還被廣泛“改造”,具備很大的被定制的潛力,以滿足產(chǎn)品獨(dú)特的需求,這點(diǎn)會在下文講到。
MD 對于導(dǎo)航欄的標(biāo)題做了許多的規(guī)范建議,但是目前看似乎大部分應(yīng)用都并沒有遵守這些規(guī)范,比如:
如果標(biāo)題文本很長,請使用突出顯示的應(yīng)用程序欄,并將標(biāo)題換成兩行。
不要在常規(guī)的頂部應(yīng)用欄中包裝文字。
不要截斷文本,隱藏完整標(biāo)題可能會引起誤解。
不要縮小文本以使其僅占一行。
4)操作項(可選):導(dǎo)航欄大多會包含操作項,在操作項中,最常用的動作一般會放在左側(cè),然后朝最右邊的最少動作進(jìn)行。
5)更多菜單(可選):針對某些功能操作,不適合直接展示在導(dǎo)航欄外面但由不能直接去掉,或者導(dǎo)航欄空間不足以承載,可以將其放在更多菜單里,點(diǎn)擊可以查看這些功能項。
此外,在國內(nèi)應(yīng)用中,導(dǎo)航欄還被用于與其他多種功能進(jìn)行結(jié)合:
搜索:搜索功能可以說是國內(nèi)應(yīng)用導(dǎo)航欄中最常見到的功能了,因為大部分應(yīng)用都將搜索視為應(yīng)用中的高優(yōu)先級功能,用戶可以通過搜索快速查詢應(yīng)用里的內(nèi)容,同時也為應(yīng)用帶來不小的商業(yè)化收益(關(guān)于搜索功能的詳解,可以查看上一篇文章)。
品牌名稱、logo:某些應(yīng)用需要展示自己的品牌特征,會將品牌名稱、logo 等在應(yīng)用中展示,而最適合的地方就是導(dǎo)航欄,因為這個位置在頁面的可自定義內(nèi)容中層級最高。
Tab 標(biāo)簽:導(dǎo)航欄中采用 Tab 標(biāo)簽(iOS 里稱為分段控件)的形式也比較常見,這種 Tab 可以讓應(yīng)用在一個頁面中通過 Tab 承載更多的信息,大多以純文本的形式出現(xiàn),用戶可以快速識別并通過左右滑動的形式查看;另外,如果采用 Tab 形式,就需要保證幾個 Tab 的信息層級本身是一致的,以便于用戶理解。
五、編輯操作欄解析
頂部導(dǎo)航欄可以轉(zhuǎn)換為編輯操作欄,以向選定的項目提供相應(yīng)的動作;例如,當(dāng)用戶從圖庫中選擇照片時,頂部導(dǎo)航欄會轉(zhuǎn)換為具有與所選照片相關(guān)的動作的編輯操作欄。
當(dāng)然,iOS 也有不同的規(guī)范樣式,當(dāng) iOS 的導(dǎo)航欄切換為編輯操作欄時,操作項往往在頁面底部,而頁面頂部放置“完成”、“取消”等操作,此處還是需要根據(jù)不同場景進(jìn)行考量。
六、iOS 和 Android 導(dǎo)航欄的區(qū)別
1. 標(biāo)題對齊
在 iOS 上,導(dǎo)航欄的高度比 Android 版本短,其標(biāo)題在兩個平臺的默認(rèn)文本對齊方式有所不同,Android(MD 規(guī)范)為左對齊,而 iOS 為居中對齊。
iOS 在大標(biāo)題的狀態(tài)下,標(biāo)題會采用左對齊的方式。
Android 導(dǎo)航欄返回箭頭右側(cè)為該頁面標(biāo)題,iOS 返回箭頭右側(cè)一般不是當(dāng)前頁面的標(biāo)題,而是上一層級頁面的標(biāo)題,或者返回文案。
2. 導(dǎo)航欄背景
Android 一般使用陰影來表示導(dǎo)航欄中的層級關(guān)系,而在 iOS 中,應(yīng)用可以使用高斯模糊等方式來區(qū)分導(dǎo)航欄和內(nèi)容。
七、導(dǎo)航欄案例分析
除了上述提到的導(dǎo)航欄規(guī)范,以及常見的導(dǎo)航欄樣式,這里還想繼續(xù)討論導(dǎo)航欄的一些不同用法,這些用法可以巧妙地滿足一些不同的產(chǎn)品需求。
1. 沉浸式導(dǎo)航欄以保證設(shè)計效果
沉浸式導(dǎo)航欄常用于 App 首屏的設(shè)計上,App 的首屏往往存在 Banner 等信息,設(shè)計師基于節(jié)省設(shè)計空間、整體的視覺效果等方面的考量,會將導(dǎo)航欄疊在 Banner 等內(nèi)容之上;并且隨著頁面滑動,導(dǎo)航欄背景逐漸過渡為不透明,以保證上滑頁面之后,導(dǎo)航欄的信息仍然清晰可視,且不干擾用戶正在瀏覽的其他內(nèi)容。
以騰訊動漫為例,首屏狀態(tài)下導(dǎo)航欄為透明底色,以營造整體氛圍感,在頁面上滑之后,過渡為白色背景,兼顧了頁面信息流瀏覽效果。
騰訊動漫分類頁導(dǎo)航欄效果:
淘寶搜索結(jié)果頁導(dǎo)航欄效果:
沉浸式導(dǎo)航欄的設(shè)計容易出現(xiàn)信息與下方的圖像信息相互干擾導(dǎo)致影響閱讀的情況,在設(shè)計師需要注意保證基本的信息可視性。
此外,頁面的沉浸式并沒有必須將導(dǎo)航欄背景完全透明。如菜鳥裹裹,將導(dǎo)航欄單獨(dú)設(shè)計,采用懸浮在頁面上方的設(shè)計;而非常規(guī)的通欄樣式,頁面呼吸感更強(qiáng),也可以營造整體沉浸感的瀏覽,這種設(shè)計在地圖相關(guān)的場景中被廣泛應(yīng)用。
2. 上滑隱藏導(dǎo)航欄以節(jié)省頁面空間
雖然導(dǎo)航欄是頁面中必不可少的,但并非是必須固定存在的,在合適的條件下,導(dǎo)航欄可以隨著頁面滑動而適時隱藏,以節(jié)省頁面空間;此外,在用戶注意力在頁面其他位置時,隱藏導(dǎo)航欄還能幫助用戶更加聚焦于正在關(guān)注的信息。
需要注意的是,導(dǎo)航欄必須能夠被用戶通過某種點(diǎn)擊/滑動等操作輕易呼出,以保證用戶切換操作目標(biāo)時的無縫切換。
以掌閱為例,掌閱在瀏覽小說過程中,會將導(dǎo)航欄收起,以保證頁面瀏覽效率,減少瀏覽干擾;同時,當(dāng)用戶希望呼出導(dǎo)航欄時,只需要向下滑動或者單擊頁面即可。
3. 導(dǎo)航欄標(biāo)題具備拓展操作空間
上文講到,導(dǎo)航欄的標(biāo)題存在很大的可改造空間,其中一點(diǎn)就是在許多應(yīng)用中,導(dǎo)航欄標(biāo)題被賦予了可操作的能力,這種設(shè)計將標(biāo)題的指引性與功能性相結(jié)合;除了讓操作更加便捷之外,更是節(jié)省了寸土寸金的頁面空間。
以微信公眾號為例,當(dāng)用戶瀏覽公眾號時,頁面上滑后導(dǎo)航欄將會顯示公眾號名稱,并且在某次改版中,加入了點(diǎn)擊名稱即可查看公眾號詳情的設(shè)計;這種設(shè)計將公眾號名稱與功能性結(jié)合起來,賦予了標(biāo)題的拓展空間,對公眾號的關(guān)注量提升也有一定幫助。
滴答清單:滴答清單是一個工具類應(yīng)用,用戶可以用它記錄一些日常事項,在事項編輯頁中,導(dǎo)航欄標(biāo)題是該事項所在的位置。這個標(biāo)題也支持點(diǎn)擊,點(diǎn)擊后,可以將記錄事項移動到不同的位置。
智行火車票:在查詢機(jī)票界面中,導(dǎo)航欄標(biāo)題一般顯示的是出發(fā)地點(diǎn)和到達(dá)地點(diǎn),一般情況下,點(diǎn)擊即可直接切換出發(fā)地點(diǎn)和到達(dá)地點(diǎn);而在查詢機(jī)票的界面,由于機(jī)票不穩(wěn)定因素多(如機(jī)票浮動等,用戶會涉及到比價等情況),用戶在這個場景中的潛在需求不僅僅是切換出發(fā)/到達(dá)地點(diǎn)。
因此,這個標(biāo)題還被賦予更多功能,用戶點(diǎn)擊即可切換歷史搜索的查詢記錄、更改出發(fā)/到達(dá)地點(diǎn)、查詢返程等操作。
4. 導(dǎo)航欄強(qiáng)化關(guān)鍵操作
對于應(yīng)用來說,總有一些功能是應(yīng)用希望可以讓用戶注意到并且進(jìn)行操作的,而導(dǎo)航欄的位置在頁面的最高層級,在這里突出某些操作,可以比較輕易地吸引用戶的注意力。
途家:在途家的詳情頁,用戶上滑頁面時,住宿時間選擇會固定在導(dǎo)航欄,便于用戶快速選擇。
在這種應(yīng)用中,選擇住宿時間是相對比較重要的功能,用戶的期望住宿時間內(nèi),該房間是否空閑,直接影響用戶是否選擇該房間;這種設(shè)計通過將住宿時間常駐在導(dǎo)航欄,加強(qiáng)功能的曝光,減少用戶長時間瀏覽后,想要訂房卻發(fā)現(xiàn)期望時間段內(nèi)不可入住的情況。
騰訊新聞:在騰訊新聞瀏覽內(nèi)容時,文章作者會固定在導(dǎo)航欄,并且右側(cè)有明顯的關(guān)注按鈕。這種設(shè)計很明顯,就是希望提升用戶的關(guān)注轉(zhuǎn)化。
5. 導(dǎo)航欄信息切換巧妙“增加”空間
導(dǎo)航欄空間本身是有限的,但是我們可以通過某些微動效巧妙地“增加”導(dǎo)航欄的信息空間;比如通過信息切換的方式,將產(chǎn)品中某些信息暫時性地展示在導(dǎo)航欄,一段時間之后,恢復(fù)常規(guī)的信息。
QQ 音樂在導(dǎo)航欄的設(shè)計中,有很多值得參考的點(diǎn):
用戶在 QQ 音樂詳情頁點(diǎn)擊收藏時,導(dǎo)航欄右側(cè)信息會臨時切換為分享提示條。通過微動效出現(xiàn)的形式,可以第一時間吸引用戶注意力;同時,這種提示并非是固定的,而是與用戶觸發(fā)存在關(guān)聯(lián)性,因此更適合采用臨時狀態(tài),在導(dǎo)航欄的位置既不顯得過于突出和干擾,又能吸引用戶注意,結(jié)合得比較巧妙。
用戶進(jìn)入 QQ 音樂歌單時,歌單導(dǎo)航欄標(biāo)題會切換為一句話,這句話具備因不同歌單而異,可以算是導(dǎo)航欄的小彩蛋;數(shù)秒鐘之后,切換為正常的歌單標(biāo)題。
用戶進(jìn)入 QQ 音樂播放頁時,有時導(dǎo)航欄會出現(xiàn)與該歌手相關(guān)的“撲通小組”的提示,點(diǎn)擊可以跳轉(zhuǎn)到對應(yīng)的小組。
當(dāng)用戶聽一首歌時,大概率也會對這首歌比較感興趣,在這種場景下,用戶點(diǎn)擊轉(zhuǎn)化率或許也會有不小的提升;這種設(shè)計充分利用了導(dǎo)航欄的空間,同樣也是數(shù)秒鐘之后,通過微動效,切換為正常的導(dǎo)航欄。
6. 導(dǎo)航欄顯示關(guān)鍵信息
考慮到應(yīng)用的需求多樣,谷歌的 Material Design 、蘋果的 iOS 規(guī)范并不能完美地符合所有需求;導(dǎo)航欄標(biāo)題在國內(nèi)的用法中,不僅只有一行文字,甚至不僅只有文字,而是根據(jù)產(chǎn)品不同訴求進(jìn)行改造,以保證關(guān)鍵信息可以充分展示。
豆瓣:用戶在瀏覽豆瓣的電影詳情頁時,隨著頁面上滑,電影封面、名稱、評分等信息將會固定在導(dǎo)航欄上。
我們知道豆瓣里評分是一個十分重要的功能,許多用戶會依據(jù)別人的評分來初步判斷一個電影的質(zhì)量,因此評分有必要處于高優(yōu)先級的展示位置;單純的導(dǎo)航欄規(guī)范很難滿足這一點(diǎn),于是豆瓣對導(dǎo)航欄標(biāo)題信息進(jìn)行了重新的設(shè)計。
發(fā)發(fā)奇:發(fā)發(fā)奇是一款電商類應(yīng)用,商品價格高,在該應(yīng)用的詳情頁中,上滑頁面后,發(fā)發(fā)奇會將商品名稱和價格這種重要信息會固定在導(dǎo)航欄。
7. 根據(jù)操作信息實(shí)時變動
導(dǎo)航欄是針對于所在頁面而言的指示性控件,因此,當(dāng)頁面信息發(fā)生變化,導(dǎo)航欄也可以隨之發(fā)生變化,以適應(yīng)當(dāng)前內(nèi)容。
知乎:用戶在知乎視頻信息流瀏覽時,隨著視頻的切換,導(dǎo)航欄標(biāo)題也會跟隨變化。
八、結(jié)語
導(dǎo)航欄是頁面設(shè)計中最常見的控件,雖然常用,但不見得每個人都能用好。作為設(shè)計師,需要考慮到如何在導(dǎo)航欄基礎(chǔ)能力上,賦予其更大的能力發(fā)揮空間。
這篇文章介紹了導(dǎo)航欄的基礎(chǔ)規(guī)范,也列舉業(yè)內(nèi)對導(dǎo)航欄的設(shè)計做的比較好的一些應(yīng)用,包括導(dǎo)航欄如何配合操作進(jìn)行變化,如何讓信息更加高效展示等,希望這篇文章對你有幫助。
本文由 @熱風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
想加作者大大微信
產(chǎn)品分析
贊
哈哈