高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

底部tab導航是現(xiàn)在應用里非常常見的一種組件。關(guān)于這種最常用到的組件,你了解的全面嗎?下面我們來分別看一下Material Design設(shè)計規(guī)范以及iOS設(shè)計規(guī)范里是怎么規(guī)定的。

往期回顧:

  1. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之提示框+警告框
  2. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之簡易菜單+彈框
  3. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之底部浮層
  4. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之按鈕
  5. 高手幫你學規(guī)范!IOS和ANDROID規(guī)范解析之標簽導航和分段控件

Google Material Design Guideline

MD規(guī)范,先是給這個控件來了總述:底部導航欄可以使用戶通過點擊一下,就在頂層視圖間的進行方便的切換。

用法

底部導航欄主要是為手機的導航設(shè)計的。如果是在較大的顯示屏上,比如桌面,則可以使用側(cè)邊導航,如下圖:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

底部導航欄主要用于以下兩種情況:

3至5個同等重要的頁面間切換(注:在Material Design中,這種情況也可視情況使用抽屜導航,如下圖:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?抽屜導航

需要在應用里方便地對頁面進行切換(注:如果是1或者2個頁面,則可以使用標簽導航)。

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?底部Tab導航和標簽導航

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?選項位置是固定的

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?注意選項個數(shù)

樣式

首先,Material Design中關(guān)于底部導航欄中的圖標和文字有如下說明:

  • 當某個選項是被選中狀態(tài),則展示該選項的圖標和文字。
  • 如果只有3個選項,則一直展示所有選項的圖標和文字;如果有4或5個選項,則被選中的選項展示圖標和文字,未被選中的只展示圖標(實際中這一條好像很多應用都沒有嚴格遵守這一條,筆者也覺得沒有必要嚴格遵守)。

其次,關(guān)于顏色,MD比較提倡使用簡單的顏色,避免復雜,如下圖:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

最后,關(guān)于每個選項的文字,需要注意文字不要折行(就是不要有兩行的情況),不要出現(xiàn)標題使用“...”來省略的情況,不要為了節(jié)省空間而縮小文字的字號。這幾點國內(nèi)的應用都做的很好啦,沒有什么好說的。

行為

當用戶選擇點擊某個選項時,則應該直接展現(xiàn)相應的頁面,或者刷新當前的頁面;注意不要在點擊后展示菜單或者彈出框(pop-up)。另外,如果點擊系統(tǒng)返回鍵,不會切換到底部導航欄上一次點擊的頁面。

另外,有以下三點需要注意:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?點擊當前選項的圖標,則頁面返回頂部

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ 點擊底部導航欄中的選項后,應該返回該頁面頂部并刷新該選項的頁面(這一點筆者認為也不是必要,需要根據(jù)應用自身的場景來判斷)

下面這個是錯誤的案例,需要注意不要這樣做:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?【錯誤案例】當點擊不同選項時,避免時頁面發(fā)生橫向切換

MD中,對各個組件都規(guī)定了它們在垂直方向上的高度。可以看到,底部導航欄的垂直高度還是比較高的,規(guī)范中提到,底部導航欄僅僅比底部浮層、抽屜欄以及鍵盤低一些,如下圖:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?MD中各控件垂直高度示意

iOS Human Interface Guidelines

相對而言,蘋果的規(guī)范要簡單的多,大部分都是我們平時用到的狀態(tài),也比較少用錯。大家只需要注意以下幾點就可以了:

  • 如果底部導航欄中的某個選項暫時不可用,不要把該選項置灰。在不可用而又點擊了的情況下,頁面只要展示這個頁面為什么沒有內(nèi)容就可以了。
  • 避免使用過多的選項。當然,如果選項過少也會有問題。一般在iPhone上,3到5個選項比較合適。在iPad上可以適量增加。
  • 可以使用肩標來提示信息數(shù)量,如下圖:

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?肩標示意

需要注意的一點是,底部導航欄和之前介紹過的工具欄,是不能同時出現(xiàn)的。

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

△ ?工具欄示意

以上介紹了MD和iOS設(shè)計規(guī)范中,對底部導航欄的定義。

最近把這個系列的專題都做成了音頻+幻燈片形式的分享,同時整理了交互方面對實戰(zhàn)很有幫助的一些知識點,在千聊上跟大家分享,希望可以幫助大家提高交互技能。分享是一個系列,總共包含6次主題分享:

  1. 場景思維的運用
  2. 心理模型和流程設(shè)計(一)
  3. 流程設(shè)計(二)
  4. 流程設(shè)計(三)
  5. 正確使用iOS和Material Design控件
  6. 方案測試和驗證

千聊分享的形式,是PPT + 語音,通過PPT展示重點內(nèi)容,結(jié)合語音講解,效果較好,感興趣的朋友可以通過鏈接報名(價格是66元,包含6次分享):https://m.qlchat.com/live/channel/channelPage/850000134259058.htm

作者系列文章:

  1. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之提示框+警告框
  2. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之簡易菜單+彈框
  3. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之底部浮層
  4. 高手幫你學規(guī)范!iOS和Android規(guī)范解析之按鈕

歡迎關(guān)注作者微信公眾號:新設(shè)計青年

高手幫你學規(guī)范!iOS版和安卓的規(guī)范解析之底部標簽導航

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng) UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導航:國內(nèi)人氣最高的設(shè)計網(wǎng)址導航,設(shè)計師必備:http://hao.uisdc.com

收藏 22
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。