如何做好界面頂欄設計？來看高手的全面總結！

APP 頂欄是一個至關重要的導航元素，貫穿整個 APP，需要始終保持一致性。它可以讓用戶輕松切換屏幕或訪問重要功能，確保無縫和直觀的用戶體驗。

應用 APP 頂欄（也稱為應用欄或導航欄）是位于應用或屏幕頂部的界面組件，它不僅提供一致的導航和訪問功能，還能充當中央樞紐，使用戶可以在屏幕之間切換，訪問重要功能，并在 APP 使用中保持和用戶溝通。

APP 頂欄通常包括各種交互元素，如菜單、按鈕、圖標、搜索欄和通知。這些元素使用戶能夠執行常見操作并導航到應用程序的不同部分。

現在讓我們深入了解 APP 頂欄界面設計的詳細信息吧

更多UI設計干貨：

一、結構

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

1. 左側控制 Bar

在應用的左側，可以放置任何你想引起用戶注意的可操作元素。通常，系統導航是大多數情況下的常見選擇，用戶對這種模式非常熟悉。

它們可能包括：

1. 返回操作
2. 菜單
3. 關閉
4. 自定義（例如設置、個人資料等）

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

在桌面屏幕上，您可以組合各種元素，以更充分地利用 APP 頂欄的空間功能。可以結合 Logo 標志、搜索輸入、下拉菜單、圖標（作為按鈕）等等。

2. 中間部分 Bar

APP 頂欄的中間空間主要用于顯示應用程序的標題。如果需要，您可以將其替換為與當前 App 相關的其他控件。

中間部分可以包含以下內容：

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

①標題

您可以使用一個標題來命名 APP，或者通過啟用副標題來擴展其信息描述內容。

如果標題被點擊后有內容需要展示，可以添加一個 Chevron/Caret 提示圖標，以明確指示有內容要展示。

②用戶頭像

用戶頭像可以用于在與個人資料、消息、社交互動時顯示特定用戶信息。將可點擊的頭像放置在 APP 頂欄的右上角區域，點擊后可能會導向個人資料設置或顯示彈出菜單。

③Logo 標志

將標志放在 APP 頂欄的中央部分，以優先考慮品牌標識。這特別適用于首頁/起始頁，用戶的瀏覽通常從這里開始。

④分段控件

在移動設備上，將分段控件放入應用導航欄中，只需一個操作即可切換屏幕狀態或內容屬性。

⑤搜索輸入

通常用于桌面端頂欄 bar，中央位置的輸入框可用于用戶方便地進行搜索。在移動設備上，通常在調整大小時，它會移動到 APP 頂欄的第二層。

⑥導航項

選項卡、按鈕組、面包屑是 APP 頂欄中常見的導航組件。

與前述情況一樣，當縮小到手機視圖時，它們會移到第二層。

3. 右側控制 Bar

在 APP 頂欄的右側，您可以放置任何類型的組件。可以放置一個單一控制項，或者經常使用的多個控制項。

例如：

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

①頭像

為了顯示與用戶屬性相關的內容，可在 APP 頂欄的右上角放置一個可點擊的頭像。

點擊頭像可以進入個人資料設置或顯示彈出菜單。

②圖標按鈕

將圖標用作按鈕，在符合用戶習慣的常用操作。

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

對于那些擁有 5 個或更多圖標按鈕的，您可以將不常用的項目隱藏在彈出菜單中，這種方法特別適用。

③按鈕

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

④搜索輸入框

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

⑤下拉菜單

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

4. 樣式與主題 Styles & Themes

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

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

①扁平

APP 頂欄的扁平主題多采用極簡主義的設計，沒有分隔，使標題和背景形成視覺上的融合。

②凸出

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

③陰影

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

④反色

這是 APP 頂欄的深色版本，可以通過顏色對比突出顯示標題。由于顏色與整體應用主題相反，所以稱之為反色。

⑤透明

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

4. 用戶體驗與可用性 UX & Usability

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

1. 選定狀態
2. 定位在底部
3. 滾動時的陰影
4. 背景模糊
5. 調整大小時隱藏

①選定狀態

APP 頂欄可以動態切換主題，提供即時的用戶反饋，例如在選擇項目時、發生事件時、警告狀態等。

②定位在底部

在手機視圖中，您可以將應用欄附加到底部。因此，所有重要的操作都可以通過更少的手指伸展來實現。

從概念上講，您可以為桌面 Web 應用實現相同的設定。例如，在 macOS 和 Windows 上的桌面底部 Docker 欄，并且這種模式對于用戶來說很熟悉。

③滾動時的陰影

當屏幕滾動時，APP 頂欄會升高。這種效果主要適用于扁平式頭部。浮現的陰影模擬了懸停效果，使 APP 看起來更加自然和有邏輯。

④背景模糊

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

⑤調整大小時隱藏

APP 頂欄的導航項在調整大小時偶爾需要折疊并隱藏在“更多”的后面，特別是在從桌面尺寸調整到移動設備大小時。

這就是設計更好的 APP 頂欄所需要知道的一切。希望這次探討能幫助您改善應用設計中用戶體驗。

歡迎關注作者微信公眾號：「到位啦UI」