選擇菜單欄是指用戶可以通過菜單欄來選擇需要進(jìn)行的操作或者是選擇需要查看的內(nèi)容的頁面，頁面分類 全屏選擇菜單頁面 和 浮動(dòng)頁面 兩大類，需要根據(jù)具體的使用場(chǎng)景選擇合適的設(shè)計(jì)方式。

下圖是一些選擇菜單欄的常見方式：

對(duì)于選擇菜單欄來說主要包含以下元素

- 文本

- 圖標(biāo)

- 圖片

展示方式主要有以下2種情況

- 全屏／浮動(dòng)列表展示

- 全屏／浮動(dòng)卡片展示

它主要的交互方式有以下4種情況

- 從點(diǎn)擊處展開

- 全屏展示

- 底部／頂部／右側(cè)往屏幕中間滑動(dòng)

- 浮在頁面底部，滑動(dòng)查看和選擇

了解了主要特性，那么來看一下這些選擇菜單欄是如何設(shè)計(jì)的-.-

全屏選擇菜單頁面

全屏選擇菜單欄分為以下幾種常見情況：

1. 全屏卡片

2. 全屏卡片+標(biāo)簽

3. 全屏標(biāo)簽頁

4. 全屏列表頁

1.全屏卡片

上圖的全屏卡片為應(yīng)用 ONE is all 和MONO上的選擇菜單欄設(shè)計(jì)

- 何時(shí)使用：需要使用圖片或者是卡片元素展示分類特性的，并且視覺沖擊力較強(qiáng)的頁面，展示分類內(nèi)容至少一屏；

- 展示形式：整體為卡片展示，可以是照片這種卡片，也可能是采用內(nèi)容分割的卡片；

- 交互方式：點(diǎn)出后出現(xiàn)全屏頁面，有關(guān)閉鍵關(guān)閉此頁面，或點(diǎn)擊返回鍵返回；

2. 全屏卡片+標(biāo)簽

- 何時(shí)使用：需要展示分類有兩個(gè)層級(jí)，如輕芒雜志中的「興趣-游戲／電影／健身」等;

- 展示形式：整體為卡片+標(biāo)簽的形式展示，也可以是一級(jí)標(biāo)題+二級(jí)標(biāo)題來展示;

- 交互方式：點(diǎn)出后出現(xiàn)全屏頁面，有關(guān)閉鍵關(guān)閉此頁面；可以橫向展示分類列表，亦可以縱向展示;

3. 全屏標(biāo)簽

上圖的常見的全屏標(biāo)簽選擇菜單欄設(shè)計(jì)

- 何時(shí)使用：分類較多，分類名較短，并且只需要展示分類名即可的頁面；

- 展示形式：全屏展示所有標(biāo)簽，點(diǎn)擊選中標(biāo)簽，有單選標(biāo)簽和多選標(biāo)簽的區(qū)別；

- 交互方式：點(diǎn)出后出現(xiàn)全屏頁面，有關(guān)閉鍵關(guān)閉此頁面。對(duì)于單選標(biāo)簽，點(diǎn)擊標(biāo)簽則進(jìn)入到相應(yīng)的頁面，多選的則需要用戶關(guān)閉；

4. 全屏列表

以上是開眼APP的置頂菜單選項(xiàng)頁面，列表展示方式，右邊可移動(dòng)操作

- 何時(shí)使用：分類較多，列表中需要展示圖片、兩個(gè)層級(jí)的文本，列表中包含除點(diǎn)擊之外的其他操作；

- 展示形式：圖片+文本縱向展示；

- 交互方式：點(diǎn)出后出現(xiàn)全屏頁面，有關(guān)閉鍵關(guān)閉此頁面；縱向展示內(nèi)容，上下滑動(dòng)可查看其他內(nèi)容；

以上的是全屏菜單選擇頁面的一些設(shè)計(jì)方式，接下來主要是將浮動(dòng)選擇菜單欄頁面的設(shè)計(jì)方式。

浮動(dòng)選擇菜單欄頁面分為以下幾種常見情況：

1. 浮動(dòng)卡片

2. 浮動(dòng)小列表

3. 浮動(dòng)大列表

4. 浮動(dòng)列表卡片

5. 沉浸式列表

1. 浮動(dòng)卡片

上面是 愛范兒 的選擇tab菜單設(shè)計(jì)，其實(shí)這種設(shè)計(jì)很新穎，將所有內(nèi)容呈現(xiàn)在tab中，很清晰明了

- 何時(shí)使用：展示內(nèi)容比較少，并且需要將分類特性展示給用戶的；

- 展示形式：卡片展示分類內(nèi)容，卡片內(nèi)容為實(shí)時(shí)的當(dāng)前頁面截圖；

- 交互方式：點(diǎn)擊相應(yīng)按鈕，在底部出現(xiàn)分類卡片，左右滑動(dòng)選擇分類頁面；

2. 浮動(dòng)小列表

上圖主要是應(yīng)用中的一些小浮動(dòng)列表的案例

- 何時(shí)使用：選項(xiàng)較少，并且需要彈出選項(xiàng)對(duì)當(dāng)前干擾比較小的情況下，一般使用彈出；

- 展示形式：整體為卡片展示，卡片中列表展示 icon+文本；

- 交互方式：從點(diǎn)擊處彈出，點(diǎn)擊其他區(qū)域列表消失；

3. 浮動(dòng)大列表

上圖為音樂和音頻列APP的選擇音頻列表

- 何時(shí)使用：在內(nèi)容比較多，并且文本相對(duì)較長(zhǎng)時(shí)使用，如果內(nèi)容長(zhǎng)度超過最高高度，則可以通過「滑動(dòng)」查看更多內(nèi)容；此列表常用于音頻列表；

- 展示形式：從底部彈出的展示列表，最后一行顯示「關(guān)閉／取消」按鈕，點(diǎn)擊關(guān)閉；

- 交互方式：點(diǎn)擊從底部彈出，可上下滑動(dòng)查看內(nèi)容；

4. 浮動(dòng)列表卡片

上圖為浮動(dòng)列表卡片示例

浮動(dòng)列表卡片種類較多，卡片有矩形、圓形和異性（主要為App圖片）

- 何時(shí)使用：內(nèi)容需要突出分類入口／功能入口特性；

- 展示形式：多為分格展示內(nèi)容，每個(gè)格子展示響應(yīng)的入口；

- 交互方式：頂部／底部彈出／彈出后顯示功能入口或分類入口，點(diǎn)擊進(jìn)入；

5. 沉浸式列表

上圖為沉浸式列表舉例

- 何時(shí)使用：用于內(nèi)容較多，且操作復(fù)雜的界面，可能一個(gè)列表中包含的操作有多種；

- 展示形式： 縱向排版，icon+文本、文本+開關(guān)、純文本等；

- 交互方式：從左邊彈出，或者是從左邊連接著前一個(gè)頁面滑出兩種方式；

總結(jié)

對(duì)于選擇菜單列表來說，它們有各自的使用條件和限制，需要根據(jù)使用場(chǎng)景來判斷是否使用哪一種展示方式。例如對(duì)于音頻列表來說更多使用的是浮動(dòng)大列表；而對(duì)于點(diǎn)某處后需要彈出很少的選擇分類，則可以使用浮動(dòng)小列表；而列表中需要比較復(fù)雜的操作的，包括開關(guān)、跳轉(zhuǎn)、退出等操作的，建議使用全屏頁面或者使用沉浸式列表的方式。使用的時(shí)候需要多思考。

ps：如果覺得文章對(duì)你有幫助的話，請(qǐng)點(diǎn)贊哦~