01 欄（APP層級(jí)的內(nèi)容劃分）

底部導(dǎo)航欄/標(biāo)簽欄/Tab Bar/Bottom navigation

底部導(dǎo)航主要用于APP級(jí)別，各模塊之間的橫向切換。在屏幕底部顯示導(dǎo)航和關(guān)鍵操作。在處于同一層級(jí)的內(nèi)容組之間導(dǎo)航。

安卓叫底部導(dǎo)航欄（Bottom navigation）。iOS叫標(biāo)簽欄（Tab Bars）

ios與安卓的區(qū)別是，ios在不同標(biāo)簽之間切換時(shí)，會(huì)保留之前的操作狀態(tài)（如之前進(jìn)入了詳情頁，切回來的時(shí)候，依然看到詳情頁。），而安卓則會(huì)重置之前的操作。

標(biāo)簽欄出現(xiàn)在APP的底部，可以讓人們?cè)贏PP的不同選項(xiàng)中快速切換。標(biāo)簽欄是半透明的，可能會(huì)有純色背景，在APP的橫豎屏中都保持同樣的高度，當(dāng)顯示鍵盤的時(shí)候被隱藏。標(biāo)簽欄可以包含任意數(shù)量的標(biāo)簽，但是可見標(biāo)簽的數(shù)量根據(jù)屏幕尺寸和橫豎屏的情況而變化。如果一些標(biāo)簽因?yàn)樨Q屏空間限制而不能顯示，那最后可顯示的標(biāo)簽的就變?yōu)椤案唷睒?biāo)簽，在單獨(dú)的界面中展示額外的標(biāo)簽列表。

規(guī)則#

用作 APP 的一級(jí)分類，數(shù)量控制在 3-5 個(gè)之間。

即使某個(gè) Tab 不可用，也不要禁用或者移除該 Tab。

使用 Badge 進(jìn)行提示，足不出戶也能知道有內(nèi)容更新。

了解標(biāo)簽欄和工具欄之間的區(qū)別很重要，因?yàn)檫@兩種類型的欄都出現(xiàn)在應(yīng)用程序屏幕的底部。標(biāo)簽欄可讓人們?cè)趹?yīng)用程序的不同部分之間切換，例如時(shí)鐘應(yīng)用程序中的鬧鐘、秒表和計(jì)時(shí)器選項(xiàng)卡。工具欄包含用于執(zhí)行與當(dāng)前上下文相關(guān)的操作的按鈕，例如創(chuàng)建項(xiàng)目、刪除項(xiàng)目、添加注釋或拍照。有關(guān)指導(dǎo)，請(qǐng)參閱工具欄。標(biāo)簽欄和工具欄永遠(yuǎn)不會(huì)一起出現(xiàn)在同一個(gè)視圖中。

一般而言，通過標(biāo)簽欄來組織APP級(jí)別的信息。標(biāo)簽欄是讓信息層級(jí)變得扁平的好辦法，并且一次提供了訪問多個(gè)同級(jí)信息目錄或模式的途徑。

標(biāo)簽欄應(yīng)該被嚴(yán)格作為導(dǎo)航。標(biāo)簽欄按鈕不應(yīng)該被用來執(zhí)行操作。如果你需要在當(dāng)前視圖上提供作用于元素的控件，可以使用工具欄。See?Toolbars.

避免包含太多選項(xiàng)。每增加一個(gè)選項(xiàng)都會(huì)減少選擇一個(gè)標(biāo)簽的可點(diǎn)擊空間并且增加APP的復(fù)雜度，讓定位信息更加困難。盡管“更多”標(biāo)簽可以展示額外的標(biāo)簽，也需要增加點(diǎn)擊次數(shù)，對(duì)標(biāo)簽欄的空間也沒有很好地利用。僅僅包含必要的標(biāo)簽，為你的信息層級(jí)使用最少數(shù)量的必要標(biāo)簽。太少的標(biāo)簽數(shù)也有問題，它會(huì)使你的界面感覺是斷開的。一般而言，在iPhone上使用3-5個(gè)標(biāo)簽，在ipad上則可以稍微多幾個(gè)。

當(dāng)人們前往你APP的不同區(qū)域時(shí)不要隱藏標(biāo)簽欄。標(biāo)簽欄是你APP的全局導(dǎo)航，所以他應(yīng)該在哪里都保持可見。唯一的例外是處于模態(tài)視圖的時(shí)候。因?yàn)槟B(tài)視圖給人們一個(gè)當(dāng)他們結(jié)束時(shí)就消失的單獨(dú)經(jīng)歷，這不是你APP全局導(dǎo)航的一部分。

當(dāng)標(biāo)簽所屬的功能不可用時(shí)，不要?jiǎng)h除或者禁用它。當(dāng)標(biāo)簽在某些情況下可用單在某些情況下不可用時(shí)，你的APP界面會(huì)變得不穩(wěn)定且不可預(yù)測(cè)。確保所有的標(biāo)簽總是可用，并且解釋為什么標(biāo)簽的內(nèi)容是無法獲得的。例如，如果在iOS設(shè)備中沒有本地音樂，音樂應(yīng)用中“我的音樂”標(biāo)簽會(huì)說明如何去下載歌曲。

總是在與標(biāo)簽相關(guān)聯(lián)的視圖中切換內(nèi)容。為了保持界面符合用戶預(yù)期，選擇一個(gè)標(biāo)簽總是會(huì)影響直接附加于標(biāo)簽欄的視圖，而不是屏幕中其他地方的視圖。選擇左側(cè)分屏視圖（split view）中的某個(gè)標(biāo)簽，不應(yīng)該使得右邊分屏視圖突然改變。選擇彈窗中的標(biāo)簽，不應(yīng)該造成彈窗后面視圖的改變。

確保標(biāo)簽欄圖標(biāo)視覺上的一致性和平衡性。系統(tǒng)為常見用例提供了大量的預(yù)設(shè)圖標(biāo)。?System Icons > Tab Bar Icons. 你可以創(chuàng)造你自己的圖標(biāo)。?Custom Icons.

使用角標(biāo)來低調(diào)的傳達(dá)信息。你可以顯示一個(gè)角標(biāo)——包含文本或者數(shù)字或者感嘆號(hào)的一個(gè)紅色橢圓——在標(biāo)簽上來暗示該視圖或模式含有的新信息。

確保標(biāo)簽欄字形在視覺上保持一致和平衡。在 iOS 13 及更高版本中，您可以使用SF Symbols來表示標(biāo)簽欄項(xiàng)目。在所有版本的 iOS 中，系統(tǒng) API 為您提供了一組為常見用例設(shè)計(jì)的特定圖標(biāo)（glyphs）（請(qǐng)參閱系統(tǒng)圖標(biāo) > 標(biāo)簽欄圖標(biāo)）。您還可以設(shè)計(jì)自己的圖標(biāo)（glyphs）；有關(guān)指導(dǎo)，請(qǐng)參閱Glyphs。

在縱向中，標(biāo)簽欄圖標(biāo)（glyphs）可以出現(xiàn)在標(biāo)簽標(biāo)題上方；在橫向，圖標(biāo)和標(biāo)題可以并排出現(xiàn)。根據(jù)設(shè)備和方向，系統(tǒng)會(huì)顯示常規(guī)或緊湊的標(biāo)簽欄。您的應(yīng)用應(yīng)包含兩種尺寸的自定義標(biāo)簽欄圖標(biāo)。在創(chuàng)建不同形狀的標(biāo)簽欄圖標(biāo)時(shí)使用以下指標(biāo)。

Bottom navigation

原則：3-5個(gè)目標(biāo)。圖標(biāo)+文字（可選。文字要簡(jiǎn)短直白，避免省略顯示、換行顯示）。讓用戶可以輕易地觸及，持續(xù)在底部出現(xiàn)（滾動(dòng)時(shí)可以顯示/隱藏），各部分之間處于同級(jí)地位。避免橫向滾動(dòng)。

少于3個(gè)部分的時(shí)候，使用標(biāo)簽頁（tabs）。底部導(dǎo)航與頂部導(dǎo)航同時(shí)使用的時(shí)候，會(huì)造成混亂。應(yīng)該錯(cuò)開層級(jí)，底部作為一級(jí)導(dǎo)航，頁面內(nèi)使用標(biāo)簽頁/分段控件來組織內(nèi)容。

頂部欄/導(dǎo)航欄/Navigation Bars

安卓叫頂部欄（top app bars），iOS叫導(dǎo)航欄（navigation bars）。頂部欄是導(dǎo)航+頁面級(jí)操作。

頂部欄的導(dǎo)航主要用于縱向深入的導(dǎo)航，如查看詳情頁面，頂部點(diǎn)擊返回按鈕即可返回。各頁面之間保持一致性。

安卓的頂部欄提供與當(dāng)前屏幕相關(guān)的內(nèi)容和操作，可以包含品牌元素、屏幕標(biāo)題、導(dǎo)航和操作按鈕?？梢赞D(zhuǎn)換為情境化的動(dòng)作欄。導(dǎo)航可以調(diào)出抽屜導(dǎo)航菜單，操作可以使用下拉菜單放置更多的動(dòng)作。

導(dǎo)航欄可以情境化顯示，即根據(jù)用戶的操作、頁面狀態(tài)的變化來顯示不同的內(nèi)容。

ios的導(dǎo)航欄出現(xiàn)在APP界面的頂部，在狀態(tài)欄的下方，能夠在一些不同層級(jí)的頁面中提供導(dǎo)航。當(dāng)加載一個(gè)新頁面的時(shí)候，導(dǎo)航欄的左側(cè)一般會(huì)出現(xiàn)一個(gè)返回按鈕，與前一個(gè)頁面的標(biāo)題放在一起。有時(shí)候，導(dǎo)航欄的右邊會(huì)包含一個(gè)編輯或者完成按鈕的控件，用來管理當(dāng)前視圖的內(nèi)容。在分屏視圖內(nèi)，導(dǎo)航欄可能只會(huì)出現(xiàn)在分屏視圖的窗格中。導(dǎo)航欄是透明的，也許會(huì)有一個(gè)背景色調(diào)。而且可以設(shè)定在鍵盤出現(xiàn)、手勢(shì)發(fā)生、視圖縮放的時(shí)候隱藏。

規(guī)則#

可在導(dǎo)航欄中使用 SegmentedControl 對(duì)內(nèi)容進(jìn)行層級(jí)劃分。

避免用過多的元素填滿導(dǎo)航欄。一般情況下，一個(gè)『返回按鈕』、一個(gè)『標(biāo)題』、一個(gè)『當(dāng)前視圖的控件』就足夠了；如果已經(jīng)有了 SegmentedControl ，一般只搭配一個(gè)『返回按鈕』或者『當(dāng)前視圖的控件』。

為圖標(biāo)和文字控件，提供更大的點(diǎn)擊熱區(qū)。

安卓規(guī)范中，頂部導(dǎo)航欄可以用更大的高度，增加背景圖片（不干擾圖標(biāo)識(shí)別的前提下）。滾動(dòng)時(shí)可以隱藏導(dǎo)航欄、導(dǎo)航欄高于內(nèi)容區(qū)域、更大高度的導(dǎo)航欄變?yōu)檎８叨鹊膶?dǎo)航欄。

當(dāng)全屏展示內(nèi)容時(shí)，考慮暫時(shí)隱藏導(dǎo)航欄。當(dāng)你試圖聚焦于內(nèi)容之上時(shí)，導(dǎo)航欄可能會(huì)形成干擾。暫時(shí)隱藏導(dǎo)航欄可以提供一個(gè)更加沉浸的體驗(yàn)。照片應(yīng)用在全屏瀏覽照片時(shí)，會(huì)隱藏導(dǎo)航欄和其它交互元素。如果你采取類似的行為，讓人們可以通過一個(gè)簡(jiǎn)單的手勢(shì)如觸擊，來恢復(fù)導(dǎo)航欄。

tips：當(dāng)你不需要導(dǎo)航或者需要多樣化的控件來管理內(nèi)容時(shí)，使用工具欄。

導(dǎo)航欄標(biāo)題

可在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題。如果標(biāo)題非常冗長(zhǎng)且無法精簡(jiǎn)，可以空缺。標(biāo)題默認(rèn)左對(duì)齊（iOS默認(rèn)居中對(duì)齊）。標(biāo)題的文本應(yīng)該簡(jiǎn)短直白，避免省略顯示，必要時(shí)可以折行顯示。

考慮在導(dǎo)航欄顯示當(dāng)前視圖的標(biāo)題。在大多數(shù)的場(chǎng)景下，標(biāo)題幫助人們理解他們正在瀏覽的是什么。但是，如果給導(dǎo)航欄命名看起來是多余的，你可以讓標(biāo)題處空著。例如，備忘錄不需要當(dāng)前備忘的標(biāo)題，因?yàn)閮?nèi)容的第一行就提供了所需的上下文信息（context）。

當(dāng)你想要特別強(qiáng)調(diào)上下文信息（context）的時(shí)候，使用大標(biāo)題形式。大標(biāo)題不會(huì)與內(nèi)容競(jìng)爭(zhēng)，但是在一些APP中，大而粗的標(biāo)題文本可以幫助人們?cè)跒g覽和搜索時(shí)確定方向。例如，在選項(xiàng)卡式布局中，大標(biāo)題可以幫助澄清當(dāng)前激活的選項(xiàng)，并且在人們需要滾動(dòng)到頂部時(shí)提示他們。電話采用這種策略（使用大標(biāo)題來強(qiáng)調(diào)），而音樂使用大標(biāo)題來區(qū)分專輯、藝術(shù)家、播放列表和收銀機(jī)等不同內(nèi)容區(qū)域。在iOS 13和更新的版本中，大標(biāo)題不默認(rèn)包含背景和陰影。同時(shí)，當(dāng)人們開始滾動(dòng)頁面內(nèi)容時(shí)，大標(biāo)題會(huì)轉(zhuǎn)變?yōu)闃?biāo)準(zhǔn)標(biāo)題樣式。

在大標(biāo)題導(dǎo)航欄中考慮隱藏邊框。在iOS 13和更新的版本中，你可以通過去除導(dǎo)航欄的陰影來隱藏底部邊框（邊框會(huì)在人們滾動(dòng)內(nèi)容區(qū)域時(shí)自動(dòng)重新出現(xiàn)）。無邊框的導(dǎo)航樣式在大標(biāo)題的導(dǎo)航欄中表現(xiàn)良好，因?yàn)樗鰪?qiáng)了標(biāo)題和內(nèi)容之間的聯(lián)系感。但是，在標(biāo)準(zhǔn)大小標(biāo)題的導(dǎo)航欄中，無邊框樣式可能效果并不好。因?yàn)闄诘臉?biāo)題和按鈕可能會(huì)很難辨別。一個(gè)例外是在iPad的分屏視圖中，你可能會(huì)通過在主視圖和詳情視圖中都使用無邊框樣式來保持二者之間的連貫性。

導(dǎo)航欄控件

避免放太多控件導(dǎo)致導(dǎo)航欄變得擁擠。一般情況下，導(dǎo)航欄的內(nèi)容最多包括當(dāng)前視圖的標(biāo)題、一個(gè)返回按鈕、一個(gè)管理當(dāng)前視圖的控件。如果你在導(dǎo)航欄中使用了分段控件（segmented control），導(dǎo)航欄中就應(yīng)該除了分段控件外不再包含標(biāo)題或者其他控件。

使用標(biāo)準(zhǔn)的返回按鈕。人們知道在多層級(jí)的信息中間，標(biāo)準(zhǔn)的返回按鈕可以使他們?cè)贩祷?。然而，如果你采用了自定義的返回按鈕，要確保它看起來像是一個(gè)返回按鈕，有直觀的表現(xiàn)，和你其它的界面相匹配，而且在整個(gè)APP中保持一致。如果你是用自定義圖片代替了系統(tǒng)提供的V形返回按鈕，請(qǐng)同時(shí)提供一個(gè)自定義遮罩圖片(custom mask image)。iOS使用這個(gè)遮罩圖片來實(shí)現(xiàn)轉(zhuǎn)場(chǎng)時(shí)的過渡動(dòng)畫。

不要包含多段的面包屑路徑。返回按鈕總是表明一種單一的動(dòng)作——回到之前的頁面。如果你認(rèn)為人們?cè)跊]看到當(dāng)前頁面的完整路徑情況下會(huì)迷失方向，考慮讓你的APP層級(jí)更加扁平。

給文本按鈕提供充足的空間。如果你的導(dǎo)航欄包含了多個(gè)文本按鈕，這些按鈕的文本可能會(huì)重疊到一起，導(dǎo)致按鈕無法識(shí)別。通過在按鈕之間插入固定空間項(xiàng)來增加間距。

當(dāng)你希望你的APP信息層級(jí)更扁平的時(shí)候，考慮在導(dǎo)航欄使用分段控件（segmented control）。如果在導(dǎo)航欄使用分段控件，僅僅在信息層級(jí)的頂層使用，并且確保在低層級(jí)中使用準(zhǔn)確的返回按鈕標(biāo)題。For additional guidance, seeSegmented Controls.

02 導(dǎo)航菜單（APP層級(jí)的內(nèi)容劃分）

抽屜/側(cè)邊導(dǎo)航/navigation drawer

用于在屏幕邊緣顯示應(yīng)用導(dǎo)航等內(nèi)容的面板。

抽屜導(dǎo)航的形式可以分為：標(biāo)準(zhǔn)抽屜（常駐）、模態(tài)抽屜（點(diǎn)擊后滑出）、底部抽屜（底部滑出）。移動(dòng)端一般使用后兩種。

規(guī)則#

是 Android 推薦的導(dǎo)航方式，常見于該平臺(tái)應(yīng)用。

具有5個(gè)以上菜單項(xiàng)（頂級(jí)分類）的應(yīng)用；具有兩級(jí)或更多級(jí)導(dǎo)航層次結(jié)構(gòu)的應(yīng)用程序；不相關(guān)目的地之間的快速導(dǎo)航；

菜單項(xiàng)名字應(yīng)該清晰簡(jiǎn)明，如果它們超出容器寬度，則將其截?cái)唷?/p>

菜單項(xiàng)按重要性排序。

可以使用分割線進(jìn)行分組。

導(dǎo)航軌道/navigation rail

導(dǎo)航軌道主要應(yīng)用于大屏幕尺寸設(shè)備，在左側(cè)常駐。包含3-7個(gè)菜單項(xiàng)，

包含的元素：

1. 容器

2. 浮動(dòng)操作按鈕（可選）

3. 目的地

4. 文本標(biāo)簽

5. 分隔線（可選）

背景/backdrop

背景由兩個(gè)部分組成：背景層和前層。背景層顯示動(dòng)作和上下文，這些控制和通知前層的內(nèi)容。兩者互相關(guān)聯(lián)。

通過折疊/展開的形式，交換焦點(diǎn)區(qū)域，形成操作與瀏覽狀態(tài)之間的切換。

03 頁面內(nèi)的內(nèi)容分塊

加載更多/滑動(dòng)加載

利用縱向虛擬無限高度，通過上下滑動(dòng)來查看更多的內(nèi)容。如常見的信息流app頁面。可以使用間距、分割線、卡片等對(duì)各部分內(nèi)容進(jìn)行區(qū)分與組織。

分割線

分割線用于組與組之間的劃分，而非單個(gè)內(nèi)容之間的劃分。在間距區(qū)分失效時(shí)考慮使用，應(yīng)該時(shí)微妙的而不是顯眼的，避免干擾到主要內(nèi)容的顯示。

分割線包含全出血、半出血、居中、帶小標(biāo)題等形式。

手風(fēng)琴/Accordion/擴(kuò)展面板/樹狀結(jié)構(gòu)/分組折疊

可以折疊/展開的內(nèi)容區(qū)域。一般是針對(duì)一組內(nèi)容進(jìn)行折疊/展開，可以多級(jí)嵌套，形成樹形結(jié)構(gòu)的內(nèi)容組織。

規(guī)則#

對(duì)復(fù)雜區(qū)域進(jìn)行分組和隱藏。

通常，一次只允許單個(gè)內(nèi)容區(qū)域展開；特殊情況，多個(gè)內(nèi)容區(qū)域可以同時(shí)展開。

分段控件（Segmented Controls）/分段器

分段控件主要用于頁面內(nèi)不同內(nèi)容模塊之間的橫向切換。

分段控件是一個(gè)包含兩個(gè)或更多分段的線性合集，每一個(gè)分段功能上都是互斥按鈕。在控件中，所有的分段都是等寬的。和按鈕一樣，分段可以包含文本和圖像。分段控件經(jīng)常用來顯示不同的視圖。例如，在地圖中，分段控件讓你在地圖、交通狀況圖、衛(wèi)星這幾個(gè)視圖中切換。

限制分段的數(shù)量以提高可用性。越寬的分段越容易點(diǎn)擊。在iPhone中，分段控件應(yīng)該擁有五個(gè)或更少的分段。

盡量保持分段內(nèi)容尺寸的一致性。因?yàn)樗械姆侄味际堑葘挼模绻恍┨畛淞藘?nèi)容，另一些沒有填充，看起來就不會(huì)很好。

避免在分段中混合文本和圖像。盡管單獨(dú)的分段可以包含文本或者圖像，在同一個(gè)控件中混合二者可能會(huì)導(dǎo)致界面沒有條理、令人困惑。

在自定義分段控件中合適地定位內(nèi)容。如果你改變了分段控件的背景樣式，確保內(nèi)容仍然看起來很好而且不要看起來沒有對(duì)齊。

規(guī)則#

和 Tabs 功能相似，盡可能避免一個(gè)頁面中同時(shí)出現(xiàn)這兩個(gè)組件。

可以搭配 NavBar 一起使用，用于顯示多個(gè)視圖，分段數(shù)一般為 2 個(gè)。

單獨(dú)放置一行時(shí)，分段數(shù)最多為 5 個(gè)；文案需要精簡(jiǎn)，一般 2-4 個(gè)字。

盡可能保持文案長(zhǎng)度一致。

標(biāo)簽頁/tabs

標(biāo)簽頁與分段控件類似，用于讓用戶在不同的視圖中進(jìn)行切換。與標(biāo)簽欄不同的是，主要用于頁面內(nèi)的視圖切換，而標(biāo)簽欄的切換內(nèi)容，層級(jí)更高一些。

規(guī)則#

標(biāo)簽數(shù)量，一般 2-4 個(gè)；其中，標(biāo)簽中的文案需要精簡(jiǎn)，一般 2-4 個(gè)字。

在 iOS 端的次級(jí)頁面中，不建議使用左右滑動(dòng)來切換 Tab，這個(gè)和 iOS 的左滑返回存在沖突，eg：詳情頁中 Tabs。

走馬燈/輪播圖/頁面控件/Carousel/Page Controls

頁面指示器在扁平的頁面列表中顯示當(dāng)前頁面的位置。它看起來像是一系列小的指示點(diǎn)，代表了以打開順序排列的可用頁面。實(shí)心點(diǎn)代表當(dāng)前頁面。視覺上，這些點(diǎn)總是等距排列的，當(dāng)屏幕上出現(xiàn)的點(diǎn)數(shù)量太多的時(shí)候會(huì)被省略。用戶可以輕觸頁面控件的前邊或后邊來訪問前一個(gè)或下一個(gè)頁面。但是他們不能輕觸一個(gè)特定的點(diǎn)到一個(gè)特定的頁面。導(dǎo)航總是按順序進(jìn)行的，通常是通過將頁面輕掃到另一側(cè)。

分層頁面不要使用頁面指示器。頁面指示器不能反映頁面之間是如何聯(lián)系或者指示哪個(gè)頁面對(duì)應(yīng)哪個(gè)點(diǎn)。這種類型的控件是為同級(jí)的頁面設(shè)計(jì)的。

不要展示太多頁。超過10個(gè)點(diǎn)就很難一眼計(jì)數(shù)，超過20個(gè)打開的頁面按順序訪問起來很耗費(fèi)時(shí)間。如果你的APP需要展示超過20個(gè)同級(jí)頁面，考慮使用不同的組織方式——例如網(wǎng)格——可以支持非順序?qū)Ш健?/p>

頁面指示器居中放在屏幕底部。頁面指示器應(yīng)該總是被居中放置，并且位于內(nèi)容底部和屏幕底部之間。這樣可以使它保持可見，而不會(huì)妨礙內(nèi)容顯示。

步驟條/Steps

顯示一個(gè)任務(wù)的進(jìn)度；或者引導(dǎo)用戶完成某個(gè)復(fù)雜任務(wù)。讓用戶在完成一個(gè)較長(zhǎng)的業(yè)務(wù)過程中，知道還需要多少步才能完成，增加用戶的控制感，避免遙遙無期的無力感。

分為橫向和縱向顯示兩種。

規(guī)則#

應(yīng)用在離散和時(shí)間較長(zhǎng)的進(jìn)度顯示，eg：轉(zhuǎn)賬進(jìn)度；如果任務(wù)是連續(xù)和短暫的，應(yīng)該使用 Progress 來顯示，eg：打開頁面。

當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，將其分解成一系列步驟，從而簡(jiǎn)化任務(wù)，eg：用戶注冊(cè)新賬號(hào)。

側(cè)邊欄/Sidebars

iOS側(cè)邊欄類似于安卓中的標(biāo)準(zhǔn)抽屜菜單，一般在iPad等大屏設(shè)備應(yīng)用上使用，采用拆分視圖。主要用于應(yīng)用級(jí)導(dǎo)航和對(duì)應(yīng)用中頂級(jí)內(nèi)容集合的快速訪問。

原則

將正確的外觀應(yīng)用到側(cè)邊欄。要?jiǎng)?chuàng)建側(cè)邊欄，請(qǐng)使用集合視圖列表布局的側(cè)邊欄外觀。

使用側(cè)邊欄來組織應(yīng)用級(jí)別的信息。側(cè)邊欄是讓信息架構(gòu)更加扁平，同時(shí)提供多個(gè)同等級(jí)別的信息分類或模式的一種方式。使用側(cè)邊欄快速導(dǎo)航到應(yīng)用的關(guān)鍵部分，或者類似于文件夾和播放列表之類的頂級(jí)內(nèi)容的集合。

只要有可能，讓人們自定義側(cè)邊欄的內(nèi)容。因?yàn)閭?cè)邊欄為您的應(yīng)用程序提供導(dǎo)航，您可以使用它為人們提供快捷方式以快速訪問他們關(guān)心的內(nèi)容。最好是用戶可以決定哪些項(xiàng)目最重要。

不要阻止人們隱藏側(cè)邊欄。允許人們隱藏側(cè)邊欄以為其內(nèi)容創(chuàng)造更多空間，并使用內(nèi)置的邊緣滑動(dòng)手勢(shì)再次顯示側(cè)邊欄。避免在默認(rèn)情況下隱藏側(cè)邊欄。

保持側(cè)邊欄中的標(biāo)題清晰簡(jiǎn)潔。省略不必要和多余的詞。例如，Mail 在每個(gè)郵箱的標(biāo)題中省略了 Messages 一詞，使用更簡(jiǎn)潔的術(shù)語，如 Flagg 和 Drafts。

一般來說，不要在側(cè)邊欄中展示兩個(gè)以上的層次結(jié)構(gòu)。當(dāng)數(shù)據(jù)層次比兩層更深時(shí)，在分屏視圖界面的補(bǔ)充列中使用列表視圖。

分頁器

分隔長(zhǎng)列表，每次只加載一個(gè)頁面。

規(guī)則#

當(dāng)加載/渲染所有數(shù)據(jù)將花費(fèi)很多時(shí)間或者流量時(shí)使用。

二、搜索

01 搜索入口

搜索按鈕

通過按鈕提供搜索入口，點(diǎn)擊后進(jìn)入搜索頁面。搜索頁可以增加歷史搜索、分類、推薦等功能，適合于頁面布局緊湊，搜索功能較為復(fù)雜的場(chǎng)景。

搜索欄（Search Bars）

一般可位于 NavBar 下方，通過『取消按鈕』退出激活狀態(tài)。

搜索欄讓人們可以在大量信息中間通過輸入文本來搜索。搜索欄可以單獨(dú)出現(xiàn)，也可以出現(xiàn)在導(dǎo)航欄中或者內(nèi)容視圖中。當(dāng)出現(xiàn)在導(dǎo)航欄時(shí)，搜索欄可以固定的在導(dǎo)航欄以便隨時(shí)可使用?；蛘呖梢哉郫B隱藏，直到用戶向下滑動(dòng)時(shí)顯示。

規(guī)則#

應(yīng)該在 placeholder 里提供提示文字，提醒用戶輸入相關(guān)內(nèi)容，比如：雙11特賣。

在搜索欄下方，可提供有用的標(biāo)簽文案，幫助用戶通過點(diǎn)擊直接完成輸入，比如：列出一些最近搜索的關(guān)鍵詞。

使用搜索欄而不是文本框來搜索。文本框沒有人們期望的搜索欄的標(biāo)準(zhǔn)外觀。

清除按鈕可用。大多數(shù)搜索欄包含清除按鈕，可以清空輸入欄的內(nèi)容。

在合適的時(shí)候讓取消按鈕可用。大多數(shù)專門的搜索欄都包含一個(gè)可以立即停止搜索的取消按鈕。

清除按鈕和取消按鈕

如有必要，在搜索欄提供提示和上下文信息（context）。搜索欄區(qū)域可以包含一個(gè)占位符文本作為被搜索內(nèi)容的信息提示，類似于“搜索衣服、鞋子和配件”，或者簡(jiǎn)單的“搜索”?？梢灾苯釉谒阉鳈谏戏斤@示簡(jiǎn)潔明了、帶有適當(dāng)標(biāo)點(diǎn)的單行文字來提供指導(dǎo)。股票應(yīng)用使用了文本提示告知人們可以輸入公司名字或者股票代碼。

考慮在搜索欄下提供幫助性的快捷方式或者其它文本內(nèi)容。利用搜索欄下方的區(qū)域幫助用戶更快的獲取內(nèi)容。例如Safari瀏覽器應(yīng)用，當(dāng)你觸擊搜索區(qū)域的時(shí)候展示書簽，不需要輸入任何搜索項(xiàng)就可以選擇一個(gè)直接進(jìn)入。股票應(yīng)用當(dāng)你在文本區(qū)域輸入內(nèi)容時(shí)展現(xiàn)一個(gè)結(jié)果列表?？梢栽诓恍枰斎敫嘣~語的情況下隨時(shí)點(diǎn)擊選擇一個(gè)。

范圍欄（Scope Bars）

可以在搜索欄附加范圍欄來讓人們定義搜索范圍。