您当前的位置：首页 >> 装修日记

APP中的折叠菜单确实如何设计？先看这份设计解析

2025-01-03 12:17:14

编剧导语：拉链选单是在网页中的竖直堆叠的选单本表，通过作准备/拉链来表明或黑影更为多选单此表内容。APP中的的拉链选单该如何建筑设计呢？本文写作者分享了拉链选单的建筑设计二阶及建筑设计领域，一起来看看吧！

大家好，这里是建筑设计夹，今天为大家分享的是「拉链选单」。

拉链选单(Accordion)，原指手风琴选单，是在网页中的竖直堆叠的选单本表，通过作准备/拉链来表明或黑影更为多选单此表内容。

接下里通过讲解拉链选单的构成、型式和建筑设计二阶来更为进一步明白拉链选单的运用～

一、拉链选单的构成 1. 长时间

拉链选单的长时间包括盖住、作准备、滑行、指名的、禁用长时间等。

2. 作准备图标的位置

在拉链选单中的，往往用“V形”图标指出选单作准备/盖住的长时间。“V形”图标可以在右方，也可以置于上方，用来指出长时间。

除了适用最常见的“V形”图标，还可以用此表图标来代替：上/下嵌入图标；加号/减号；向上/向下箭头。

3. 可选图标

当我们把作准备图标置于上方的才会，我们可以背光右方建筑设计一些图标，来加强选单的含义，并让网页看起来更为精致。

在某些场景下，还可以通过适用相同的红色，更为为直觉地分隔每个选单。

二、拉链选单的型式 1. 开敞拉链选单

在网页建筑设计中的，大多数才会都是适用开敞拉链背光。

通过一条深灰色的的分隔线将相同的选单分相通，这种型式的优点是可以节省一些竖向的图标紧致，尤其是在方向移动端图标规格相当大的才会。

2. 分离式拉链选单

分离式拉链背光类似于在图形用户界面端中的，每个选单的展览品更为模糊，建筑设计型式更为简练。

3. 引人注意表明作准备选单

引人注意表明选单作准备的长时间，这样在多个拉链选单打开的才会，其他用户也能模糊找到需要的信息。

类似于的引人注意表明的方式也有：增加阴影、背景嵌入、轮廓描边等。

例如在网页背景是白色的才会，我们可以适用透明度大大降低的灰色作为下拉选单的背景，更为模糊地展览品作准备的选单。另外，还可以为下来选单嵌入和服装品牌色一致的红色描边，起到务实服装品牌的效果。

三、拉链选单建筑设计二阶 1. 展览品预览

通过在；大选单的上头添加已选项的此表内容，这样在不需要作准备背光的才会，其他用户就能明白选项了哪些此表内容，进一步提高加载稳定性。

2. 进制金色

当已选此表内容太多时，我们不可能将这些此表内容全部在；大选单罗列出来，在这样的才会，可以适用进制金色的形式来展览品已选项的选单数。这样的建筑设计像是购物车中的不断变化的进制金色，告诉其他用户加购的数量。

3. 提示文案

通过在拉链背光中的添加提示文案，起到辅助作用，展览品更为多和选单关的的信息。这种建筑设计形式更为适合用在方向移动端中的，在有限的图标规格上必要多的展览品此表内容。

4. 方向移动端领域型式

等宽适用：在方向移动端中的适用等宽的拉链选单，方方便其他用户点击加载。

侧边栏：将拉链选单置于侧边的GPS书桌中的，点击左上角的图标来作准备选单项。

选单筛选：将侧边栏与拉链背光配合适用，实现选单筛选的功能。

5. 图形用户界面端领域型式

侧边GPS：和方向移动端类似，图形用户界面端最类似于的方法是把拉链选单放于网页右方，作为网页的侧边GPS适用。

过滤器：根据图形用户界面端的网页结构设计在结构上，拉链选单可以置于网页右方或上方，实现正确地载入、此表内容过滤等功能。

四、终于

以上就是拉链选单的建筑设计二阶及建筑设计领域，希望通过这些知识能帮你进一步明白拉链选单的辞汇。

「接口系列」的其他评论，近期也会不断更为新，欢迎大家关注~

#华尔街日报#

写作者：Clippp，微信政府会号：Clip建筑设计夹。每周新歌建筑设计评论，专注分享关于电子产品、交互、UI光影上的建筑设计思考。

题图来自 Pixabay，基于CC0双方同意。