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