導航欄UI設(shè)計規(guī)范及注意事項有哪些？設(shè)計不僅凸顯了產(chǎn)品的主次，并引導用戶行為，以標題為例，在內(nèi)容非常豐富、層級結(jié)構(gòu)較深的產(chǎn)品當中，大標題能夠幫用戶快速確認自己的位置。導航欄是每一個界面都必定存在的控件，無法輕易刪減必須用好它，不然很容易淪為頁面的減分項。

創(chuàng)新互聯(lián)建站長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為陽朔企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)，陽朔網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

 

設(shè)計好導航欄不僅僅是視覺上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。接下來小編帶你一起學習導航欄UI設(shè)計規(guī)范及注意事項：

一、導航欄位置

導航欄 Navigation Bar，也簡稱為Navbar。有不少剛?cè)腴T的UI新人在諸多的Bar控件中，難以區(qū)分它所指代的區(qū)域。

在iOS上，導航欄是指顯示在應用程序頂部，位于狀態(tài)欄下方的容器區(qū)域，層級應高于當前頁面內(nèi)容。在安卓上，Google公司在Material Design中也賦予了它同樣的定義，但是卻給了它另一個名稱，頂部應用欄（ Top App Bar）。

導航欄是用于構(gòu)架當前屏幕的內(nèi)容，闡述當前屏幕的狀態(tài)，并且起到連接父子級頁面層次結(jié)構(gòu)的作用。很多人疑惑，為什么標簽欄不能叫做底部導航？因為標簽欄是構(gòu)架了多個屏幕之間平級頁面的內(nèi)容切換，和導航的定義沒有任何關(guān)聯(lián)。

二、導航欄UI設(shè)計規(guī)范與實際項目的應用

基本的導航欄容器一般承載的信息可能會有：標題；導航按鈕；內(nèi)容控件按鈕；其他控件（比如搜索欄、分頁標簽或分頁控件等）；千萬別忘了還有分割線。

1、導航欄標題設(shè)計規(guī)范

2017年以前的移動端規(guī)范下的導航欄還是循規(guī)蹈矩的，樣式單一。但隨著iPhone X等一系列全面屏手機相繼問世后，移動設(shè)備在屏幕高度上有了進一步的擴展，界面設(shè)計在一屏內(nèi)的發(fā)揮空間也隨之增加。iOS11發(fā)布后，大標題導航欄設(shè)計風格興起，隨后被引入平臺規(guī)范。

于是現(xiàn)在iOS與Material Design在導航欄上也都定義了兩種導航欄標題規(guī)范：常規(guī)標題與大標題。

常規(guī)標題是指在高度為88px（iOS@2x下）的導航容器中，居中放置一個當前頁面的標題。標題字號一般為34px-38px（34px為iOS標準規(guī)范，但實際項目中可以在盡量在不小于34px標準的情況下根據(jù)設(shè)計需求確定）。

大標題是將導航欄欄高增加到192px（iOS@2x），保留高度為88px的導航容器來承載內(nèi)容控件按鈕，將標題下墜居左。iOS的標準規(guī)范定義大標題的字號為68px。但由于英文有大小寫區(qū)分，在視覺上有一定的層次表現(xiàn)，而中文因為缺少一定的層次結(jié)構(gòu)，并且相同字號的中文視覺大小大于英文，所以大多數(shù)時候我們在進行大標題設(shè)計時，會適當縮小，一般為56px-64px居多。

大標題導航欄的優(yōu)點毋庸置疑，頁面留白更多，呼吸感更強，大氣現(xiàn)代、逼格更高，因為頁面標題巨大，能夠幫助用戶快速確認當前所處位置；采用統(tǒng)一的大標題，讓頁面布局風格快速統(tǒng)一。但缺點也顯而易見，因為增加了導航欄的高度，導致屏幕利用率降低，一些通過廣告變現(xiàn)或更加注重一屏內(nèi)內(nèi)容呈現(xiàn)的應用便中和了常規(guī)導航與大標題導航的優(yōu)缺點，進行了風格改進。

2、導航按鈕及內(nèi)容控件按鈕設(shè)計規(guī)范

iOS規(guī)定導航按鈕位置僅能用于放置返回按鈕，可以添加一個層級的面包屑，幫助用戶有效地明確當前頁面層級；Material Design中，則不僅可以放置返回按鈕，還另有作用，菜單圖標-用于打開導航抽屜 或者 關(guān)閉圖標-關(guān)閉工具欄。

與iOS的定義有著天壤之別，iOS非常明確地賦予了工具欄的定義，并且將導航欄和工具欄（Toolbars）徹底地分離開，典型案例就是Safari。在內(nèi)容控件上iOS與Material Design也大相徑庭，Material Design不去限制你的內(nèi)容控件多少，因為它提供了溢出菜單，并可以根據(jù)屏寬的變化，自適應釋出和收納溢出菜單中的控件。

而iOS則規(guī)定我們，要給內(nèi)容控件按鈕足夠多的空間，必要的時候，隱藏導航欄標題也未嘗不可。真實的項目中我們經(jīng)常為了快速落地，會存在一稿適配雙平臺的情況。這時候我們應該遵從哪一個平臺的規(guī)范呢？答案是：許多大廠的做法已經(jīng)向我們驗證，規(guī)范不分家。

在iOS諸多的應用中溢出菜單早已普及，盡管這是Material Design提出的設(shè)計理念。雖然國內(nèi)遵從Material Design進行Android應用設(shè)計的情況相對較少，但它提供的設(shè)計理念與方案卻并不局限在安卓平臺。

3、分割線設(shè)計規(guī)范

分割線只是一種體現(xiàn)形式，我想要表達的是，別忘記區(qū)分導航欄與內(nèi)容界面的視覺層級關(guān)系。Matetial Design提醒我們，頂部應用欄可以與內(nèi)容位于同一高度，但滾動時，請增加導航欄的視覺高度，讓內(nèi)容在其后方滾動。而iOS則默認采用了背景模糊的方式區(qū)分了導航欄與內(nèi)容區(qū)域的層級關(guān)系。

4、其他控件

關(guān)于其他控件，iOS只在規(guī)范中提及到了分頁控件。蘋果設(shè)計師考慮到部分場景在當前頁面中還存在信息層級結(jié)構(gòu)劃分，此時建議可以在導航欄中使用分段控件。

國內(nèi)的應用程序早已將導航欄容器的作用發(fā)揮到極致，基于導航欄層級始終高于內(nèi)容區(qū)域的特性，我們通?？梢詫⒎侄慰丶?、分頁標簽、搜索欄等等用戶可能隨時使用的工具放在導航欄中。

導航欄用于構(gòu)架當前屏幕的內(nèi)容，闡述當前屏幕的狀態(tài)，并且起到連接父子級頁面層次結(jié)構(gòu)的作用，在一個頁面發(fā)揮著重要作用，設(shè)計好導航欄不僅僅是視覺上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。因此掌握好導航欄的設(shè)計技巧對一名設(shè)計師來說尤為重要！

網(wǎng)頁名稱：導航欄視覺設(shè)計的注意事項-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://www.ekvhdxd.cn/article42/ceojec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站制作、移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化、定制開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)