iOS和Android規(guī)范解析——標(biāo)簽導(dǎo)航和分段控件

2 評(píng)論 15517 瀏覽 95 收藏 7 分鐘

從今天開始,將介紹iOS和Android設(shè)計(jì)規(guī)范中關(guān)于導(dǎo)航的部分。今天要介紹的兩個(gè)控件,經(jīng)常容易混淆以至于用錯(cuò)。請(qǐng)各位讀者仔細(xì)閱讀,防止以后用錯(cuò)。

Material Design Guidelines

標(biāo)簽(tabs)使內(nèi)容在一個(gè)較高的層級(jí)被組織起來。一般,一個(gè)標(biāo)簽里需要展示與該標(biāo)簽相關(guān)的內(nèi)容。標(biāo)簽的名字需要清楚地描述該標(biāo)簽里所包含的內(nèi)容。

信息架構(gòu)

標(biāo)簽導(dǎo)航一般用于從一個(gè)比較高的層級(jí)來組織信息,呈現(xiàn)出提綱挈領(lǐng)的效果。例如,使用標(biāo)簽呈現(xiàn)報(bào)紙的不同版面。不要使用標(biāo)簽導(dǎo)航來呈現(xiàn)不同頁碼的頁面(就像搜索結(jié)果頁中的第1頁,第2頁那種頁面),也不要把標(biāo)簽的切換設(shè)計(jì)成可循環(huán)的樣式(即,在最后一頁,繼續(xù)向下切換又回到第一頁)。

下面所示的用法示例需要注意:

內(nèi)容

一個(gè)標(biāo)簽里的所有內(nèi)容應(yīng)該屬于一個(gè)大分類(比如“設(shè)置”或者“音樂”),并且標(biāo)簽之間內(nèi)容不能有重疊。標(biāo)簽可以包含圖標(biāo)(icon)和文字。如果使用文字,則盡量簡(jiǎn)短。

另外有以下用法示例需要注意:

使用

標(biāo)簽有兩種,一種是固定標(biāo)簽,適用于標(biāo)簽的數(shù)目比較少的情況。每個(gè)標(biāo)簽固定的位置,有利于用戶的記憶:

固定標(biāo)簽示例

另一種是可劃動(dòng)標(biāo)簽,適用于標(biāo)簽數(shù)量比較多的情況。同時(shí),可劃動(dòng)標(biāo)簽的寬度可以長(zhǎng)短不一,根據(jù)標(biāo)題長(zhǎng)短決定。

可劃動(dòng)標(biāo)簽示例

通常,標(biāo)簽被建議使用在以下的情況:

  • 需要經(jīng)常切換視圖;
  • 應(yīng)用包含的視圖比較少;
  • 應(yīng)用提供的幾個(gè)視圖都比較重要(由于標(biāo)簽切換,相對(duì)于別的導(dǎo)航方式來說,操作更容易。因此通過標(biāo)簽導(dǎo)航提供的幾個(gè)視圖,相對(duì)來說到達(dá)率會(huì)更好。筆者注)。

iOS Human Interface Guidelines

分段控件可以包含兩個(gè)或者更多的分段選項(xiàng),每一個(gè)選項(xiàng)作為一個(gè)獨(dú)立的按鈕而存在。在一個(gè)分段控件里,所有的分段選項(xiàng)在長(zhǎng)度上要保持一致。和按鈕一樣,每個(gè)分段選項(xiàng)可以包含文案或者圖片。分段控件通常用來作為不同視圖的入口,比如在地圖應(yīng)用里,分段控件可以讓用戶在“地圖”、“交通”和“衛(wèi)星”等視圖間切換。

iOS系統(tǒng)自帶的地圖應(yīng)用

關(guān)于分段控件的使用,蘋果規(guī)范給出了以下幾個(gè)要點(diǎn):

  1. 限制分段選項(xiàng)的數(shù)目,以提高可用性。更寬的分段選項(xiàng)更容易點(diǎn)擊。在iPhone上,蘋果建議一個(gè)分段控件包含的分段選項(xiàng)最多是5個(gè)(想說5個(gè)也不少了好不好。。)
  2. 盡量保證每個(gè)分段選項(xiàng)里的內(nèi)容的尺寸是一致的。因?yàn)樗械姆侄芜x項(xiàng)在長(zhǎng)度上需要保持一致,所以如果有的分段選項(xiàng)內(nèi)容很滿,而有的比較空,在視覺上會(huì)不太美觀。
  3. 在一個(gè)分段選項(xiàng)里,避免同時(shí)使用文案和圖片。盡管單個(gè)分段選項(xiàng)里可以包含文案或者圖片,但是同時(shí)包含兩者可能會(huì)使界面看起來割裂和迷惑。
  4. 如果你定制了一個(gè)分段控件的外觀,那么請(qǐng)確保內(nèi)容的位置是恰當(dāng)?shù)?。比如,如果你更改了分段控件的背景,那么?qǐng)確保里面的內(nèi)容看起來是OK的,并且是對(duì)齊的。

以上介紹了MD和iOS設(shè)計(jì)規(guī)范中對(duì)于標(biāo)簽導(dǎo)航和分段控件的介紹。這兩個(gè)控件由于長(zhǎng)得比較相似,因此經(jīng)常會(huì)用錯(cuò);尤其是分段控件,需要注意它是不能通過劃動(dòng)來切換的。

討論使我們認(rèn)識(shí)更加深刻,歡迎留言討論。

#專欄作家#

沐風(fēng),微信公眾號(hào):“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn),專注設(shè)計(jì)領(lǐng)域,歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

專欄作家
沐風(fēng),微信公眾號(hào):沐風(fēng)與體驗(yàn)設(shè)計(jì)。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛奇藝資深交互設(shè)計(jì)師。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜人貸。6年交互設(shè)計(jì)經(jīng)驗(yàn),專注設(shè)計(jì)領(lǐng)域,歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 分段控件和標(biāo)簽導(dǎo)航有什么區(qū)別

    回復(fù)
  2. 期待更新內(nèi)容~學(xué)習(xí)到很多東西~

    回復(fù)