▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長
轉(zhuǎn)自：交互設(shè)計小站
編輯：張夢如
共 3151 字 23 圖 預(yù)計閱讀 8 分鐘
為了產(chǎn)出一個更好的項目，我們每天都會切換無數(shù)個應(yīng)用程序進(jìn)行參考。可大家是否知道 APP 上也存在一些不可忽視的設(shè)計元素呢？比如：頂部欄、標(biāo)簽欄、搜索框、底部導(dǎo)航......今天，我們就為大家來介紹一下每款應(yīng)用程序都必不可少的頂部欄 ( Top Bar )。頂部欄 ( Top Bar )在 Google Material 中被稱為頂部應(yīng)用欄 ( Top app bar )，而在蘋果界面指南中，則被稱為導(dǎo)航欄 ( Navigation Bar )。在界面中，頂部欄會顯示與當(dāng)前屏幕相關(guān)的信息和操作素材。
作為一個重要元素，頂部欄始終存在于應(yīng)用程序的頂部。它不僅可以告知當(dāng)前保持的屏幕狀態(tài)，還可以根據(jù)我們的操作進(jìn)行各種交互。此外，它具有多樣化的類型：只有標(biāo)題的基本頂部欄，具有搜索、標(biāo)簽和下拉等功能的頂部欄。
值得我們注意的是，頂部欄也具有一定的基本準(zhǔn)則。我們可以在基本的 iPhone 應(yīng)用程序中輕松查看 iOS 頂部欄指南。以 Podcast 為例，在強調(diào)當(dāng)前頁面時，頂部欄的下方會設(shè)置一個大粗體標(biāo)題。當(dāng)我們向上滾動或移動時，下一頁的標(biāo)題就會出現(xiàn)在頂部欄的中間，而上一頁的標(biāo)題與“返回”( Edit ) 按鈕也會隨之一起顯示。此外，在舊版 Android 中，有很多頂部欄會將文本左對齊，卻沒有設(shè)置“返回”( Edit ) 按鈕。但是，隨著 Android 的不斷更新，其配置也開始逐漸多樣化。許多應(yīng)用都具有默認(rèn)情況下在頂部欄上設(shè)置" Edit "按鈕。如果我們查看應(yīng)用了 Google Material 的頂部欄，就會看到有一行陰影應(yīng)用在了界面最上方。在了解頂欄的基本配置后，我們再來探索一下頂欄滾動的種類和變化。在頂欄與界面內(nèi)容分開后，它會給每個操作系統(tǒng)帶來哪些不同，以及隨之出現(xiàn)的交互類型呢？以 Instagram 為例，當(dāng)我們滾動其界面時，頂部欄會保持固定而沒有任何變化，并以淺灰色的 BG 和線條分割界面中的其他內(nèi)容。在 29 cm的程序界中，當(dāng)頂欄與內(nèi)容之間的標(biāo)簽相遇時，它就會固定在當(dāng)前界面的頂部。這類主要出現(xiàn)在購物類 APP 、快遞類 APP 、地圖類 APP 等需要分割中間內(nèi)容的情況下。有時在我們滾動后，界面會隱藏頂部欄，并顯示必要的部分內(nèi)容。
在 Facebook 中，滾動界面則會隱藏頂部欄，且僅保留狀態(tài)欄。而在查看提要并向下滾動時，頂部欄又會重新出現(xiàn)；在 Instagram 中，它也只隱藏了頂欄區(qū)域，而對于一些重要的功能（例如芯片或標(biāo)簽），則總是在其搜索框下方暴露出來。當(dāng)我們在滑動時，搜索欄會消失，標(biāo)簽會處于狀態(tài)欄下方。
在 Airbnb 這款應(yīng)用程序中，如果我們滑動界面，那么圖像會變得模糊并呈現(xiàn)白色背景。根據(jù)背景顏色，頂部欄的白色圖標(biāo)會變?yōu)楹谏鴥?nèi)容則由分割線進(jìn)行分割；在 Yelp 中，滾動時的圖像則會消失，整個頂部欄會被主色覆蓋加以強調(diào)。 通過滑動可以擴展/減少頂部欄。以 Uberates 為例，左邊的圖片顯示了用大字體和寬度來填充界面，以便可以清楚看到搜索區(qū)域。同時，通過不斷的移動，搜索框則會縮小并通過微交互定位在界面頂部（如右圖所示）。之所以這樣設(shè)計，是為了強調(diào)搜索功能。通過上下滑動縮小頂部欄，以保證空間的更好利用以及用戶更方便的訪問。在 Google Map 的同一界面上，頂部欄的結(jié)構(gòu)會發(fā)生多次變化。第一個界面顯示了一個浮動搜索欄。如果我們在此之后進(jìn)行拖動，搜索欄會向上移動并出現(xiàn)帶有操作圖標(biāo)的圖像頂欄。在這個情況下，如果再次滑動，圖像就會變得模糊并變?yōu)榘咨尘埃纭爸丿B頂欄+中間標(biāo)簽”，并且中間標(biāo)簽也會位于頂部欄的下。底部導(dǎo)航或底部按鈕也是一個必不可少的元素。在同一屏幕上，頂部欄與底部導(dǎo)航需要進(jìn)行適當(dāng)?shù)脑O(shè)計，以保持整個界面的平衡感。如果頂部欄和底部導(dǎo)航器設(shè)置在一起，就會因為頂部和底部被遮擋而破壞整個界面。下圖所示的三個 APP ，其底部導(dǎo)航都由淺色背景+圖標(biāo)+文字構(gòu)成。當(dāng)前所在的標(biāo)簽頁圖標(biāo)在導(dǎo)航上以應(yīng)用程序的主色調(diào)表示，其余則為灰色的中性風(fēng)格。這種設(shè)計比帶有陰影( Airbnb ) 和具有生動主色調(diào)的底部導(dǎo)航( Skyscanner&Yelp )，更能凸顯出頂部欄。使用同樣的線條和背景顏色，在沒有劃分頂欄和底部導(dǎo)航的情況下可以進(jìn)行扁平化表達(dá)。在這種情況下，內(nèi)容比頂部和底部導(dǎo)航更為重要。例如，在 Instagram 中，瀏覽提要更有用；而在 Door Dash （一款外賣應(yīng)用軟件）中，我們則可以專注于自己想要訂購的食物或餐廳。與第一條示例相反，此示例更強調(diào)底部導(dǎo)航。這是因為此類應(yīng)用程序具有一個主動尋找菜單的功能。Medium 通過與黑色背景形成對比來進(jìn)行突出強調(diào)；Youtube 和 Facebook 的頂欄有服務(wù)名稱和操作按鈕。在滾動時頂欄會消失，只剩下狀態(tài)欄。此外，我們還可以通過隱藏頂部欄，將菜單置于底部導(dǎo)航之中。在定義頂部欄和按鈕的邏輯時應(yīng)考慮多種可能性。與底部導(dǎo)航不同，按鈕并不是固定元素，因此我們應(yīng)該根據(jù)按鈕的存在與否來考慮頂欄的層次結(jié)構(gòu)。在下圖所示的 Ubereats 應(yīng)用程序中，將商品添加到購物車時會出現(xiàn)按鈕。而在點餐的用戶體驗流程中，按鈕比頂欄更重要，因為它具有移動到下一操作的作用。并非所有的應(yīng)用程序都是按照一個設(shè)計規(guī)則設(shè)計的。有一些 APP 會在頁面移動、彈出、模塊和鏈接等各種狀態(tài)下變化。例如下圖所示的 Airbnb 界面，我們就可以看到三種不同的風(fēng)格。第一種是 Airbnb 的默認(rèn)設(shè)置，浮動頂部欄和按鈕上有一個光影；第二種是一個沒有陰影的浮動頂部欄；而最后一種則是帶有分割線的底部工作表。此時的按鈕會以三種方式顯示：按鈕和價格、大按鈕、按鈕和文本按鈕。通過上面一些應(yīng)用程序的例子，不難看出這些 APP 在設(shè)計過程中都強調(diào)了界面的平衡感。因此，大家在設(shè)計一款應(yīng)用軟件時可以遵循設(shè)計指南，刪除不必要的部分，或根據(jù)其定位進(jìn)行迭代更新。但是我們也應(yīng)該考慮這款程序的主要目的、信息內(nèi)容、以用戶為中心的設(shè)計和交互。此外，也需要考慮界面中的其他元素，一致地應(yīng)用各種頂部欄。以上，就是關(guān)于頂部欄 ( Top Bar )的一些簡單介紹，希望可以給正在完善作品集的大家一點啟發(fā)。期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長高質(zhì)量，學(xué)設(shè)計行交流微信群期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）
