上期香港網頁集團分享了「有關下拉菜單的使用方法」，近期我們就來說說「關於APP頂部欄的UI設計樣式和交互方式」，有興趣的朋友就接着看吧!

很多設計師認為APP頂部欄的組成很簡單，不需要花費太多精力在設計上。事實上，作為APP出鏡率極高的組件，APP頂部欄的UI設計需要注意很多細節，才能設計出精確、美觀且符合用戶目標的頂部欄。

關於APP頂部欄的UI設計規則和使用方式

一、APP頂部欄的UI設計樣式有哪些?

UI設計教程

APP頂部欄對APP的UX設計至關重要，當用戶打開APP的瞬間，首先映入眼中的就是APP頂部欄。常見的APP頂部欄樣式主要包括簡單標題導航欄、Tab控件導航欄、分段控件導航欄以及大標題導航欄。下面，我們逐一來說說。

● 常規頂部欄：由操作圖標、標題和搜索框等組成，常固定在狀態欄下。一般來說，常規頂部欄大致可分為簡單標題頂部欄、搜索框頂部欄、去標題化，以及可點擊下拉四種。

○ Tab控件導航欄：一般可左右滑動切換，UI設計中Tab控件導航欄的選中樣式也比較豐富。

● 分段控件導航欄：不能左右滑動，但會提供2~5個可選項。

○ 大標題導航欄：自iOS11發佈後，大標題導航欄便開始流行。使用大標題導航欄需注意兩點：① 能否幫助用戶快速確認所處位置;② APP設計是否偏向簡約大氣。

二、APP頂部欄的交互方式有哪些?

作為APP界面設計中必不可少的部分，頂部欄有時候也需要通過改變樣式或內容反映交互動作，以減輕界面中其他元素的負擔，如：

◆ 反映滑動位置

UI設計教程

1.下滑出現頂部欄：用戶滾動頁面時，頂部欄內容會根據滾動位置而發生變化，但當用戶下拉頁面，頂部欄便會出現。

2.下滑隱藏上拉出現：用戶向下滾動頁面時，頂部欄會被隱藏，但只要用戶向上滑動中止瀏覽過程，頂部欄會再次出現。

3.下滑隱藏頂部欄：對於那些不會影響用戶需求和操作求的頂部欄，通常會隨着頁面的向下滑動而隱藏。

◇ 反映當前頁面變化

UI設計教程

有時，頂部欄信息會根據內容的變化而發生實時變化，最常見的案例就是社交軟件受到消息時的反饋。

最後，我們說說APP頂部欄的交互方式有哪些。

APP頂部欄的交互方式除了常見的圖標或文本按鈕(添加、取消、後退)變化，還可以發生以下一些比較有趣的交互。

▶ 互動標題：透過用戶的初始輸入決定顯示內容或用戶直接在頂部欄標題上編輯信息，例如外賣軟件、打車軟件。

UI設計教程

▶ 交互式圖標/文本按鈕：用戶不必離開界面，可直接在頂部欄執行某些操作。

UI設計教程

▶ 交互式頂部導航：界面為了顯示多個平行內容，會在頂部欄設置多個選項，以實現更方面得導航，最常見的交互式頂部導航包括分段控件(不支持左右滑動，選項較少)和標籤導航(設計多樣，支持左右滑動切換)。

UI設計教程

APP頂部欄的UI設計看似簡單，但如果忽略細節上的問題，不僅會影響APP整體的美觀性，用戶體驗也會大大降低。不想因為小小的頂部欄影響用戶對APP的信任，那就別再隨意設計APP頂部欄啦!