APP 頂欄是一個(gè)至關(guān)重要的導(dǎo)航元素，貫穿整個(gè) APP，需要始終保持一致性。它可以讓用戶輕松切換屏幕或訪問(wèn)重要功能，確保無(wú)縫和直觀的用戶體驗(yàn)。

應(yīng)用 APP 頂欄（也稱為應(yīng)用欄或?qū)Ш綑冢┦俏挥趹?yīng)用或屏幕頂部的界面組件，它不僅提供一致的導(dǎo)航和訪問(wèn)功能，還能充當(dāng)中央樞紐，使用戶可以在屏幕之間切換，訪問(wèn)重要功能，并在 APP 使用中保持和用戶溝通。

APP 頂欄通常包括各種交互元素，如菜單、按鈕、圖標(biāo)、搜索欄和通知。這些元素使用戶能夠執(zhí)行常見(jiàn)操作并導(dǎo)航到應(yīng)用程序的不同部分。

現(xiàn)在讓我們深入了解 APP 頂欄界面設(shè)計(jì)的詳細(xì)信息吧

更多UI設(shè)計(jì)干貨：

一、結(jié)構(gòu)

讓我們分析 APP 頂欄的左側(cè)、中間和右側(cè)的功能 bar。內(nèi)容較多可以隱藏未使用的部分，例如隱藏標(biāo)題，或者去除右側(cè)控制部分。

1. 左側(cè)控制 Bar

在應(yīng)用的左側(cè)，可以放置任何你想引起用戶注意的可操作元素。通常，系統(tǒng)導(dǎo)航是大多數(shù)情況下的常見(jiàn)選擇，用戶對(duì)這種模式非常熟悉。

它們可能包括：

1. 返回操作
2. 菜單
3. 關(guān)閉
4. 自定義（例如設(shè)置、個(gè)人資料等）

或者，您可以使用其他類型的控件，以突顯在特定情景上的控制。

在桌面屏幕上，您可以組合各種元素，以更充分地利用 APP 頂欄的空間功能?？梢越Y(jié)合 Logo 標(biāo)志、搜索輸入、下拉菜單、圖標(biāo)（作為按鈕）等等。

2. 中間部分 Bar

APP 頂欄的中間空間主要用于顯示應(yīng)用程序的標(biāo)題。如果需要，您可以將其替換為與當(dāng)前 App 相關(guān)的其他控件。

中間部分可以包含以下內(nèi)容：

1. 標(biāo)題（可能包含副標(biāo)題）
2. 用戶頭像（可能包含姓名）
3. Logo 標(biāo)志
4. 分段控件
5. 搜索輸入
6. 導(dǎo)航項(xiàng)（選項(xiàng)卡、按鈕組、面包屑等）

①標(biāo)題

您可以使用一個(gè)標(biāo)題來(lái)命名 APP，或者通過(guò)啟用副標(biāo)題來(lái)擴(kuò)展其信息描述內(nèi)容。

如果標(biāo)題被點(diǎn)擊后有內(nèi)容需要展示，可以添加一個(gè) Chevron/Caret 提示圖標(biāo)，以明確指示有內(nèi)容要展示。

②用戶頭像

用戶頭像可以用于在與個(gè)人資料、消息、社交互動(dòng)時(shí)顯示特定用戶信息。將可點(diǎn)擊的頭像放置在 APP 頂欄的右上角區(qū)域，點(diǎn)擊后可能會(huì)導(dǎo)向個(gè)人資料設(shè)置或顯示彈出菜單。

③Logo 標(biāo)志

將標(biāo)志放在 APP 頂欄的中央部分，以優(yōu)先考慮品牌標(biāo)識(shí)。這特別適用于首頁(yè)/起始頁(yè)，用戶的瀏覽通常從這里開(kāi)始。

④分段控件

在移動(dòng)設(shè)備上，將分段控件放入應(yīng)用導(dǎo)航欄中，只需一個(gè)操作即可切換屏幕狀態(tài)或內(nèi)容屬性。

⑤搜索輸入

通常用于桌面端頂欄 bar，中央位置的輸入框可用于用戶方便地進(jìn)行搜索。在移動(dòng)設(shè)備上，通常在調(diào)整大小時(shí)，它會(huì)移動(dòng)到 APP 頂欄的第二層。

⑥導(dǎo)航項(xiàng)

選項(xiàng)卡、按鈕組、面包屑是 APP 頂欄中常見(jiàn)的導(dǎo)航組件。

與前述情況一樣，當(dāng)縮小到手機(jī)視圖時(shí)，它們會(huì)移到第二層。

3. 右側(cè)控制 Bar

在 APP 頂欄的右側(cè)，您可以放置任何類型的組件?？梢苑胖靡粋€(gè)單一控制項(xiàng)，或者經(jīng)常使用的多個(gè)控制項(xiàng)。

例如：

1. 頭像
2. 圖標(biāo)（作為按鈕）
3. 按鈕（用作操作按鈕）
4. 搜索輸入（主要用于桌面端）
5. 下拉菜單（例如，用于切換帳戶、語(yǔ)言等）

①頭像

為了顯示與用戶屬性相關(guān)的內(nèi)容，可在 APP 頂欄的右上角放置一個(gè)可點(diǎn)擊的頭像。

點(diǎn)擊頭像可以進(jìn)入個(gè)人資料設(shè)置或顯示彈出菜單。

②圖標(biāo)按鈕

將圖標(biāo)用作按鈕，在符合用戶習(xí)慣的常用操作。

將最常用的控件放在這里，使用戶可以隨時(shí)看到。

對(duì)于那些擁有 5 個(gè)或更多圖標(biāo)按鈕的，您可以將不常用的項(xiàng)目隱藏在彈出菜單中，這種方法特別適用。

③按鈕

將按鈕放置在右側(cè)區(qū)域，以進(jìn)行操作。當(dāng)有多個(gè)按鈕時(shí)，明智地使用樣式和顏色，以區(qū)分與 APP 業(yè)務(wù)邏輯相關(guān)的主要和次要操作。您可以選擇不同的形狀，如方形、圓形、橢圓形按鈕，并根據(jù)需要吸引用戶注意力，選擇不同的樣式，如填充、凸起、輪廓（虛線）、平面等。

④搜索輸入框

通過(guò)將搜索輸入框放置在右側(cè)，作為單個(gè)組件或與其他控件組合使用，以便用戶可以方便地進(jìn)行搜索。這種方式主要適用于 web 端的情況。

⑤下拉菜單

可以在 APP 頂欄的右側(cè)區(qū)域嵌入下拉菜單，用于切換用戶、賬戶、語(yǔ)言等。這種方式通常在平板電腦/桌面端高分辨率下使用。

4. 樣式與主題 Styles & Themes

您可以通過(guò)添加各種樣式為 APP 頂欄設(shè)置主題。為了與整體 APP 界面的外觀相匹配，您可以使用以下主題：

1. 扁平
2. 凸出
3. 陰影
4. 反色
5. 透明

①扁平

APP 頂欄的扁平主題多采用極簡(jiǎn)主義的設(shè)計(jì)，沒(méi)有分隔，使標(biāo)題和背景形成視覺(jué)上的融合。

②凸出

突出風(fēng)格為 APP 頂欄添加了平滑的陰影，以便輕松區(qū)分懸停在背景上的 APP 頂欄 Bar。

③陰影

APP 頂欄填充了固定顏色，透明度降低至 8-12%。這樣，您可以使 APP bar 與品牌顏色相匹配。

④反色

這是 APP 頂欄的深色版本，可以通過(guò)顏色對(duì)比突出顯示標(biāo)題。由于顏色與整體應(yīng)用主題相反，所以稱之為反色。

⑤透明

這種樣式主要用于移動(dòng) APP 頂欄，為特定部分（例如項(xiàng)目詳情、個(gè)人資料、交易）提供更多空間，以展示全尺寸的圖片。

4. 用戶體驗(yàn)與可用性 UX & Usability

讓我們來(lái)看一些特別適用于 APP 頂欄的行為。有些情況下，APP 頭部可能具有以下特性：

1. 選定狀態(tài)
2. 定位在底部
3. 滾動(dòng)時(shí)的陰影
4. 背景模糊
5. 調(diào)整大小時(shí)隱藏

①選定狀態(tài)

APP 頂欄可以動(dòng)態(tài)切換主題，提供即時(shí)的用戶反饋，例如在選擇項(xiàng)目時(shí)、發(fā)生事件時(shí)、警告狀態(tài)等。

②定位在底部

在手機(jī)視圖中，您可以將應(yīng)用欄附加到底部。因此，所有重要的操作都可以通過(guò)更少的手指伸展來(lái)實(shí)現(xiàn)。

從概念上講，您可以為桌面 Web 應(yīng)用實(shí)現(xiàn)相同的設(shè)定。例如，在 macOS 和 Windows 上的桌面底部 Docker 欄，并且這種模式對(duì)于用戶來(lái)說(shuō)很熟悉。

③滾動(dòng)時(shí)的陰影

當(dāng)屏幕滾動(dòng)時(shí)，APP 頂欄會(huì)升高。這種效果主要適用于扁平式頭部。浮現(xiàn)的陰影模擬了懸停效果，使 APP 看起來(lái)更加自然和有邏輯。

④背景模糊

這種微小的視覺(jué)效果使整體用戶體驗(yàn)更加流暢。通過(guò)使用 CSS 屬性 backdrop-filter: blur(16px); 可以實(shí)現(xiàn) APP 頂欄背景的透明模糊效果。

⑤調(diào)整大小時(shí)隱藏

APP 頂欄的導(dǎo)航項(xiàng)在調(diào)整大小時(shí)偶爾需要折疊并隱藏在“更多”的后面，特別是在從桌面尺寸調(diào)整到移動(dòng)設(shè)備大小時(shí)。

這就是設(shè)計(jì)更好的 APP 頂欄所需要知道的一切。希望這次探討能幫助您改善應(yīng)用設(shè)計(jì)中用戶體驗(yàn)。

歡迎關(guān)注作者微信公眾號(hào)：「到位啦UI」