APP中的摺疊菜單應該如何設計?先看這份設計解析

語言: CN / TW / HK

關注 ▲Clip設計夾 後台 回覆“ 進羣 加入設計成長羣

設計夾的第 113 篇文章分享 

大家好 ,這裏是設計夾 今天為大家分享的是 摺疊菜單

摺疊菜單(Accordion),又稱手風琴菜單,是在頁面中垂直堆疊的菜單列表,通過展開/摺疊來顯示或隱藏更多菜單內容。

接下里通過講解摺疊菜單的構成、樣式和設計解析來更進一步瞭解摺疊菜單的運用

    摺疊菜單的構成

狀態

摺疊菜單的狀態包括 收起、展開、懸停、選中、禁用狀態 等。

展開圖標的位置

在摺疊菜單中,通常用“V形”圖標表示菜單展開/收起的狀態。“V形”圖標可以在左側,也可以放在右側,用來表示狀態。

除了使用最常見的“V形”圖標,還可以用以下圖標來代替: 上/下填充圖標; 加號/減號; 向上/向下箭頭。

附加圖標

當我們把展開圖標放在右側的情況下,我們可以面板左側設計一些圖標,來增強菜單的含義,並讓頁面看起來更精緻。

在某些場景下,還可以通過使用不同的顏色,更加直觀地分隔每個菜單。

    摺疊菜單的樣式

封閉式摺疊菜單

在頁面設計中,大多數情況下都是使用封閉式摺疊面板。

通過一條淺色的的分隔線將不同 的菜單分隔開,這種樣式的優點是可以節省一些豎向的屏幕空間,尤其是在移動端屏幕尺寸較小的情況下。

分離式摺疊菜單

分離式摺疊面板常用在桌面端中,每個菜單的展示更清晰,設計樣式更簡潔。

突出顯示展開菜單

突出顯示菜單展開的狀態,這樣在多個摺疊菜單打開的情況下,用户也能清晰找到需要的信息。

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

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

    摺疊菜單設計解析

展示預覽

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

數字徽標

當已選內容太多時,我們不可能將這些內容全部在主菜單羅列出來,在這樣的情況下,可以使用數字徽標的形式來展示已選擇的菜單數。 這樣的設計有點像購物車中不斷變化的數字徽標,告訴用户加購的數量。

提示文案

通過在摺疊面板中添加提示文案,起到輔助作用,展示更多和菜單相關的信息。 這種設計形式更適合用在移動端中,在有限的屏幕尺寸上儘可能多的展示內容。

移動端應用樣式

等寬使用: 在移動端中使用等寬的摺疊菜單,方方便用户點擊操作。

側邊欄: 將摺疊菜單放在側邊的導航抽屜中,點擊左上角的圖標來展開菜單項。

菜單篩選: 將側邊欄與摺疊面板配合使用,實現菜單篩選的功能。

桌面端應用樣式

側邊導航: 和移動端類似,桌面端最常用的方法是把摺疊菜單放到頁面左側,作為網頁的側邊導航使用。

過濾器: 根據桌面端的頁面佈局結構,摺疊菜單可以放在頁面左側或右側,實現精確查找、內容過濾等功能。

最後

以上就是 摺疊菜單 的設計解析及設計應用 希望通過這些知識能幫你進一步瞭解摺疊菜單的用法

「組件系列」 的其他文章,近期也會不斷更新,歡迎大家關注~

最後,設計夾整理了一份 後台 儀表盤模板包 包含多 個數據組件 模板 方便大家在設計工作中隨時調用。 文件 已打包好, 大家回覆關鍵詞即可領取。

慢慢來比較快,希望對你有幫助!

領取方式:

1) 在看&轉發 讓更多 小夥伴看到這篇文章

2)公眾號後台回覆  儀表  獲取儀表盤設計模板組件

添加微信, 邀你進設計成長羣 :star2:

Tips:  這裏會持續更新設計乾貨,包括但不限於交互日記、設計法則、答疑解惑、讀書筆記…感興趣的同學可以掃碼加入,一起成長! :arrow_down: :arrow_down: :arrow_down:

:fire: 文章合集

致2021:設計文章合集

致2020:設計文章合集