關注▲Clip設計夾後台回復「進群」加入設計成長群
設計夾的第113篇文章分享
摺疊菜單(Accordion)，又稱手風琴菜單，是在頁面中垂直堆疊的菜單列表，通過展開/摺疊來顯示或隱藏更多菜單內容。
接下里通過講解摺疊菜單的構成、樣式和設計解析來更進一步了解摺疊菜單的運用～
摺疊菜單的構成
狀態
摺疊菜單的狀態包括收起、展開、懸停、選中、禁用狀態等。
展開圖標的位置
在摺疊菜單中，通常用「V形」圖標表示菜單展開/收起的狀態。「V形」圖標可以在左側，也可以放在右側，用來表示狀態。
除了使用最常見的「V形」圖標，還可以用以下圖標來代替：上/下填充圖標；加號/減號；向上/向下箭頭。
附加圖標
當我們把展開圖標放在右側的情況下，我們可以面板左側設計一些圖標，來增強菜單的含義，並讓頁面看起來更精緻。
在某些場景下，還可以通過使用不同的顏色，更加直觀地分隔每個菜單。
摺疊菜單的樣式
封閉式摺疊菜單
在頁面設計中，大多數情況下都是使用封閉式摺疊面板。
通過一條淺色的的分隔線將不同的菜單分隔開，這種樣式的優點是可以節省一些豎向的屏幕空間，尤其是在移動端屏幕尺寸較小的情況下。
分離式摺疊菜單
分離式摺疊面板常用在桌面端中，每個菜單的展示更清晰，設計樣式更簡潔。
突出顯示展開菜單
突出顯示菜單展開的狀態，這樣在多個摺疊菜單打開的情況下，用戶也能清晰找到需要的信息。
常用的突出顯示的方式有：增加陰影、背景填充、輪廓描邊等。
例如在頁面背景是白色的情況下，我們可以使用透明度很低的灰色作為下拉菜單的背景，更清晰地展示展開的菜單。另外，還可以為下來菜單填充和品牌色一致的顏色描邊，起到強調品牌的效果。
摺疊菜單設計解析
展示預覽
通過在主菜單的下面添加已選擇的內容，這樣在不需要展開面板的情況下，用戶就能知道選擇了哪些內容，進一步提高操作效率。
數字徽標
當已選內容太多時，我們不可能將這些內容全部在主菜單羅列出來，在這樣的情況下，可以使用數字徽標的形式來展示已選擇的菜單數。這樣的設計有點像購物車中不斷變化的數字徽標，告訴用戶加購的數量。
提示文案
通過在摺疊面板中添加提示文案，起到輔助作用，展示更多和菜單相關的信息。這種設計形式更適合用在移動端中，在有限的屏幕尺寸上儘可能多的展示內容。
移動端應用樣式
等寬使用：在移動端中使用等寬的摺疊菜單，方方便用戶點擊操作。
側邊欄：將摺疊菜單放在側邊的導航抽屜中，點擊左上角的圖標來展開菜單項。
菜單篩選：將側邊欄與摺疊面板配合使用，實現菜單篩選的功能。
桌面端應用樣式
側邊導航：和移動端類似，桌面端最常用的方法是把摺疊菜單放到頁面左側，作為網頁的側邊導航使用。
過濾器：根據桌面端的頁面布局結構，摺疊菜單可以放在頁面左側或右側，實現精確查找、內容過濾等功能。
最後
以上就是摺疊菜單的設計解析及設計應用，希望通過這些知識能幫你進一步了解摺疊菜單的用法。
「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注~
最後，設計夾整理了一份後台儀錶盤模板包，包含多個數據組件模板，方便大家在設計工作中隨時調用。文件已打包好, 大家回復關鍵詞即可領取。
領取方式：
添加微信,邀你進設計成長群🌟
🔥文章合集
致2020：設計文章合集
留言列表