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

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

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

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

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

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

規(guī)則#

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

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

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

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

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

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

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

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

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

總是在與標(biāo)簽相關(guān)聯(lián)的視圖中切換內(nèi)容。為了保持界面符合用戶預(yù)期，選擇一個標(biāo)簽總是會影響直接附加于標(biāo)簽欄的視圖，而不是屏幕中其他地方的視圖。選擇左側(cè)分屏視圖（split view）中的某個標(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á)信息。你可以顯示一個角標(biāo)——包含文本或者數(shù)字或者感嘆號的一個紅色橢圓——在標(biāo)簽上來暗示該視圖或模式含有的新信息。

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

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

Bottom navigation

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

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

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

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

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

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

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

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

規(guī)則#

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

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

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

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

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

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

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

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

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

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

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

導(dǎo)航欄控件

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

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

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

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

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

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

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

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

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

規(guī)則#

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

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

菜單項名字應(yīng)該清晰簡明，如果它們超出容器寬度，則將其截斷。

菜單項按重要性排序。

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

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

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

包含的元素：

1. 容器

2. 浮動操作按鈕（可選）

3. 目的地

4. 文本標(biāo)簽

5. 分隔線（可選）

背景/backdrop

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

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

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

加載更多/滑動加載

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

分割線

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

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

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

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

規(guī)則#

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

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

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

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

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

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

盡量保持分段內(nèi)容尺寸的一致性。因為所有的分段都是等寬的，如果一些填充了內(nèi)容，另一些沒有填充，看起來就不會很好。

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

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

規(guī)則#

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

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

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

盡可能保持文案長度一致。

標(biāo)簽頁/tabs

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

規(guī)則#

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

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

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

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

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

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

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

步驟條/Steps

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

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

規(guī)則#

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

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

側(cè)邊欄/Sidebars

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

原則

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

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

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

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

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

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

分頁器

分隔長列表，每次只加載一個頁面。

規(guī)則#

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

二、搜索

01 搜索入口

搜索按鈕

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

搜索欄（Search Bars）

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

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

規(guī)則#

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

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

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

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

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

清除按鈕和取消按鈕

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

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

范圍欄（Scope Bars）

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