編劇導(dǎo)語：折疊菜單是在頁面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內(nèi)容。APP中的折疊菜單該如何設(shè)計(jì)呢？本文作者分享了折疊菜單的設(shè)計(jì)解析及設(shè)計(jì)應(yīng)用，一起來看看吧！

大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「折疊菜單」。

折疊菜單(Accordion)，又稱手風(fēng)琴菜單，是在頁面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內(nèi)容。

接下里通過講解折疊菜單的構(gòu)成、樣式和設(shè)計(jì)解析來更進(jìn)一步了解折疊菜單的運(yùn)用～

一、折疊菜單的構(gòu)成

1. 狀態(tài)

折疊菜單的狀態(tài)包括收起、展開、懸停、選中、禁用狀態(tài)等。

2. 展開圖標(biāo)的位置

在折疊菜單中，通常用“V形”圖標(biāo)表示菜單展開/收起的狀態(tài)?！癡形”圖標(biāo)可以在左側(cè)，也可以放在右側(cè)，用來表示狀態(tài)。

除了使用最常見的“V形”圖標(biāo)，還可以用以下圖標(biāo)來代替：上/下填充圖標(biāo)；加號(hào)/減號(hào)；向上/向下箭頭。

3. 附加圖標(biāo)

當(dāng)我們把展開圖標(biāo)放在右側(cè)的情況下，我們可以面板左側(cè)設(shè)計(jì)一些圖標(biāo)，來增強(qiáng)菜單的含義，并讓頁面看起來更精致。

在某些場(chǎng)景下，還可以通過使用不同的顏色，更加直觀地分隔每個(gè)菜單。

二、折疊菜單的樣式

1. 封閉式折疊菜單

在頁面設(shè)計(jì)中，大多數(shù)情況下都是使用封閉式折疊面板。

通過一條淺色的的分隔線將不同的菜單分隔開，這種樣式的優(yōu)點(diǎn)是可以節(jié)省一些豎向的屏幕空間，尤其是在移動(dòng)端屏幕尺寸較小的情況下。

2. 分離式折疊菜單

分離式折疊面板常用在桌面端中，每個(gè)菜單的展示更清晰，設(shè)計(jì)樣式更簡(jiǎn)潔。

3. 突出顯示展開菜單

突出顯示菜單展開的狀態(tài)，這樣在多個(gè)折疊菜單打開的情況下，用戶也能清晰找到需要的信息。

常用的突出顯示的方式有：增加陰影、背景填充、輪廓描邊等。

例如在頁面背景是白色的情況下，我們可以使用透明度很低的灰色作為下拉菜單的背景，更清晰地展示展開的菜單。另外，還可以為下來菜單填充和品牌色一致的顏色描邊，起到強(qiáng)調(diào)品牌的效果。

三、折疊菜單設(shè)計(jì)解析

1. 展示預(yù)覽

通過在主菜單的下面添加已選擇的內(nèi)容，這樣在不需要展開面板的情況下，用戶就能知道選擇了哪些內(nèi)容，進(jìn)一步提高操作效率。

2. 數(shù)字徽標(biāo)

當(dāng)已選內(nèi)容太多時(shí)，我們不可能將這些內(nèi)容全部在主菜單羅列出來，在這樣的情況下，可以使用數(shù)字徽標(biāo)的形式來展示已選擇的菜單數(shù)。這樣的設(shè)計(jì)有點(diǎn)像購物車中不斷變化的數(shù)字徽標(biāo)，告訴用戶加購的數(shù)量。

3. 提示文案

通過在折疊面板中添加提示文案，起到輔助作用，展示更多和菜單相關(guān)的信息。這種設(shè)計(jì)形式更適合用在移動(dòng)端中，在有限的屏幕尺寸上盡可能多的展示內(nèi)容。

4. 移動(dòng)端應(yīng)用樣式

等寬使用：在移動(dòng)端中使用等寬的折疊菜單，方方便用戶點(diǎn)擊操作。

側(cè)邊欄：將折疊菜單放在側(cè)邊的導(dǎo)航抽屜中，點(diǎn)擊左上角的圖標(biāo)來展開菜單項(xiàng)。

菜單篩選：將側(cè)邊欄與折疊面板配合使用，實(shí)現(xiàn)菜單篩選的功能。

5. 桌面端應(yīng)用樣式

側(cè)邊導(dǎo)航：和移動(dòng)端類似，桌面端最常用的方法是把折疊菜單放到頁面左側(cè)，作為網(wǎng)頁的側(cè)邊導(dǎo)航使用。

過濾器：根據(jù)桌面端的頁面布局結(jié)構(gòu)，折疊菜單可以放在頁面左側(cè)或右側(cè)，實(shí)現(xiàn)精確查找、內(nèi)容過濾等功能。

四、最后

以上就是折疊菜單的設(shè)計(jì)解析及設(shè)計(jì)應(yīng)用，希望通過這些知識(shí)能幫你進(jìn)一步了解折疊菜單的用法。

「組件系列」的其他文章，近期也會(huì)不斷更新，歡迎大家關(guān)注~

#專欄作家#

作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pixabay，基于CC0協(xié)議。