前言 下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖 下拉菜单 的使用。在 UI 设计 中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。

那么，如何区分 下拉菜单设计 的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。

往期回顾：

5000字干货！从5个方面帮你完整了解标签栏设计 前言 标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。

阅读文章 >

6000字干货！6个方面帮你循序渐进掌握表单设计 前言 表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。

阅读文章 >

本期大纲

基本介绍及结构梳理 使用下拉菜单需满足的条件 下拉菜单类型 常见问题及避坑指南 总结 基本介绍及结构梳理 1. 什么是下拉菜单？ 下拉菜单是选项的一种呈现方式，当用户点击某个触发图标/箭头时，会弹出一个项目列表，用户需从中选择一项或多项来满足自己的选择需求。

下拉菜单经常用在表单选项、筛选条件、导航等界面模块中，被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等，内容较多时可能需要上下滚动，真实情况视选项的实际数量而定。

2. 下拉菜单的构成

下拉菜单看起来跟表单中的选项框几乎一致，但在真实的表单页面中，触发表单项后可能是下拉菜单，也可能是弹窗或页面跳转。同理，下拉菜单也会经常用在除表单之外的其他界面模块中，从表面上看跟表单一样，而实际的元素及交互效果则有很大的区别，但本文主要针对表单中的下拉菜单（非导航）作出介绍，有以下十个部分构成：

1）标签：告知用户该下拉菜单项需要选择什么内容；

2）容器：用于承载选择前的信息提示（占位符）及选择后的内容；

3）下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；

4）占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；

5）下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；

6）选项列表：供用户选择的内容；

7）分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；

8）已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；

9）滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；

10）系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。

3. 下拉菜单的几种状态 不管是出于系统问题还是用户的原因，下拉菜单能否操作或有什么限制，都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似，但在设计时需要明显的区分开来，常见的状态有默认、悬停、聚焦、完成、禁用和错误提示，下面一起来看看设计师如何通过不同的视觉样式反馈给用户。

默认状态

即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。

悬停状态

当鼠标经过或停留在一个下拉菜单项时，容器会通过改变填充色、描边色或其他不同于初始化的样式提醒用户该内容的可操作性。悬停状态只出现在电脑端，因触屏设备直接与之产生交互，会直接越过该状态。

聚焦状态

聚焦状态是指用户正在与之发生交互，点击后，展开选项列表的同时，容器通过投影、边框加粗或主色调来提醒用户当前正处在操作中，下拉箭头会进行垂直翻转（向上）。在很多其他模块组件中，展开/收起也是源于箭头上下方向的提示。

完成状态

用户完成选择后，容器中填充被选中的选项并替换占位符，对于非必填的下拉菜单项，后面出现一键清除图标“⨂”，其他元素与初始化状态相同。

禁用状态

对系统禁用或当前未满足操作条件的下拉菜单项，为保持内容的可见性，对部分元素置灰以提醒用户。

错误反馈

相比输入框，下拉菜单项出错的情况较少，用户出现漏选、或任务流程存在两个互斥的选项时，系统会通过强提醒警示用户，例如将提示文本、容器描边及填充使用红色。

使用下拉菜单需满足的条件 1. 由选项数量决定（移动端）

首先，选项数量不能太少也不能太多。说人话，就是选项数量为 5~9 条是使用下拉菜单的最佳选择。因下拉区域的空间有限，考虑到用户操作的难易程度，大多数情况下，低于 5 条选项使用单选按钮即可满足，超过 9 条就需要更多的展示空间，使用操作栏弹窗或页面跳转则体验更好。当然这并非绝对，只是作为一个参考值而已，使用下拉菜单以 5~9 条为例，可满足工作中的大部设计需求。

其次，在选项数量满足的条件下，选项文本的字数也需越短越好，如果文本过长导致折行或省略，用户体验也会大打折扣，还不如弃用下拉菜单、换种方式呈现。

2. 由便捷性决定

能让用户选择的就不要让用户去输入。比如用户在选择退款原因时，常见的原因就那么几种，使用下拉菜单的样式呈现，比码字的操作效率会高出很多，即便用户有自定义需求，增加一个「其他」选项完全可以满足。

另外，需要说明的是，这种方案只能满足大部分设计需求及使用场景，没有绝对好的设计。当输入有可能比选择更快时，那就果断让用户输入，这种情况一般出现在日历控件中，如果用户年龄跨度较大，想象一下，需要在几十甚至上百组数据中找到自己的出生年份也是件很痛苦的事情，还不如输入 4 个数字来的快。

3. 后期延展决定

如果当前选项较少（低于 5 项），由于内容是管理后台配置、且根据产品需求短时间内有陆续增加的规划，但最终数量可控，这时，即便是只有一两条选项也可选择使用下拉菜单。

下拉菜单类型 根据用户需求、内容性质的不同、处理各种信息时更加方便，其下拉菜单的视觉样式、交互方式也会有所不同。例如：在导航中使用下拉菜单、表单中使用下拉框，甚至某些特殊场景中，下拉框和下拉菜单还能互换，但为了兼顾不同类型、提升可用性，仍需特别留意这几种类型及变化。

1. 导航类型 几乎所有的网站都离不开导航类型菜单，分为水平导航和垂直导航两种。水平导航一般出现在网站顶部，例如官网顶部的功能分类、电商网站的商品分类等；而垂直导航绝大多数出现在后台管理系统的左侧，不管是哪种类型，主要目的是通过所提供的导航链接将用户带到新的位置。

2. 命令菜单类型 命令菜单主要用于计算机桌面软件及应用程序的顶部，点击后会展开很多选项按钮以供用户进行下一步操作，部分较为复杂的功能选项会伴随着二级（子菜单）选项列表，方便用户对软件、应用更好的控制。

3. 表单类型 众所周知，在条件允许的情况下，用户选择的速度要远远大于码字的速度，且更有利于系统进行数据统计，所以在很多表单中，都会设计一个选项字段，让用户通过下拉菜单选项便捷式选择。表单类型的下拉菜单也有多种类型样式，下面将一一进行介绍：

标准样式

标准下拉菜单是最原始、操作最简单的类型，没有任何的弯弯绕绕，触发弹出下拉选项后，选中任一内容即完成与当前表单项的交互。

关键词匹配

这种类型常出现在选项较多的场景中，为了方便用户更快完成选择任务，在标准样式的基础上增加了输入功能。输入的过程中，系统根据输入的关键词在已有的选项中进行匹配、筛选，用户可在筛选结果中快速找出自己需要的选项，无需输入所有文字、也不用在内容超多的列表中来回寻找即可完成任务。

搜索框

这是一种比较老派的做法，触发下拉菜单后，通常会在选项列表上方增设一个搜索框，用户输入关键词后进行搜索，相比上面提到的关键词匹配就有些落后了，不仅视觉样式变得复杂、也增加了用户的操作成本。部分 PC 端网站的选择地址控件中还有使用，但更多产品直接使用了城市拼音首字母进行分类筛选，显然比这种搜索方式的效率更高。

多选/复选

即用户在同一表单项中选择多个选项，虽然这种设计方式操作起来比较复杂，但在内容较多、空间资源不是很充足的管理系统、B 端设计中还是很实用的。例如用户权限配置、带有二级/三级联动的机构或地址选择，多选相比平铺更节省空间，且这类用户很多都是经过培训、相对专业的群体。

常见问题及避坑指南 1. 延展不要超过两级 菜单的子层级越多、操作越复杂、用户体验就越差，尽量不要超过两级，如果超过两级，在条件允许的情况下进行二次分析增删、合并分类，以此来减少用户操作负担。当然这并非绝对，只能在相对情况下尽量避免，例如选择地址（省、市、区/县）时就无法删减。

2. 默认值的使用 默认值主要针对表单类型的下拉菜单，在可预知的场景中、通过行为预判提前为用户选中某个最常用、选择频率最高或当前用户最有可能选择的内容，方便被精准匹配到的用户不用做任何操作即可完成任务，同时也提高效率。但根据笔者在体验的多个产品中、以及看过相关方面的各种资料说明，是否需要提供默认选项则各自参半，成了两相对立的局面，暂且不论默认选项是否合理，但如果出现以下情况请慎用。

选填项

为选填表单项提供默认值，用户极有可能直接略过该项，最终默认值并非用户的真实需求，这也将变得毫无意义，甚至在后续的数据分析中产生误导，影响产品的走向。另外，即便用户注意到了，不想选择任何内容，还得手动清除，这就需要用户付出更多的时间成本和操作成本，与用户体验相悖。

均衡度适中

当多个选项的使用率较为均衡，提供默认选项确实会减少这一小部分用户的操作成本，但在大部分的用户群体中，只要不影响其利益或用户认为无关紧要就会默认该选项的可用性，同样会出现上述问题。

用户属性模糊

这种主要针对千人千面的推荐设定，在一些新注册或行为飘忽不定的用户群体中，推荐默认选项也会将出错的概率大幅度提升。

3. 避免滚动失误 对于选项较多的下拉菜单，滚动不可避免，但有没有一种可能，我们在明明需要滚动下拉列表、可滚动的却是整个网页，而鼠标离开下拉区域去滚动页面、真正发生滚动交互的则是下拉列表，苦不堪言。

解决这个问题需要程序员对滚动交互时的光标位置作出界定，当下拉菜单仅处于聚焦（高亮/主体色/阴影）状态时滚动选项列表，除此之外滚动页面即可。这里需要说明的是，光标离开下拉菜单就可取消聚焦状态，不用非得等用户完成选择任务后再取消，目的是为让下拉菜单与页面的滚动互不干扰且能随时切换。

4. 选项数量 选项太少

表单选项太少能使用下拉菜单吗？答案是“当然能”。但这又是何苦呢，如果只有两个选项，用单选按钮它不香吗，用户只喜欢用最少的操作在最短的时间内完成自身所需，每多操作一次都可能会离开。

选项太多

下拉选项过多可能会对用户产生负面影响，但有些时候是无法避免的，例如选择国家、地址、区号等，不管怎么做都没法简化。这时，增加前面所讲到的关键词匹配、搜索框功能，就能提高用户的完成效率，也让产品变得更容易使用。

5. 如果输入比选择更快 在部分特殊场景中，输入明显比选择更快。试想一下，自己的出生年份仅仅四个数字，但却要在几十个选项中滚动查找，真的很费时间，选择信用卡的有效期也是如此，要解决这个问题只需一个数字键盘，让用户自己输入会容易许多。

6. 减少操作 这里有一个很经典的例子就是日期组件，对于年、月、日的选择，分别使用 3 个下拉菜单看似也能接受，但真的很复杂，且每次前面内容的变化都对后面的数值起着决定性的作用。将三组内容进行合并且让用户自定义，就方便很多，能减少部分多余的操作。

7. 精简的选项描述 一句话能说清楚的就不要用两句话，文字越多、理解成本就越高。在空间有限的下拉区域，选项要尽可能简短，直击核心内容。

8. 选项的优先级 下拉菜单中的选项并非随意摆放，要想迎合用户、使其有更好的使用体验，就需要符合一定的规律。将最常用的选项靠前、相关联的组合、时间按照先后、地区按首字母等优先级排序，让用户操作前就能一目了然。

9. 不可用选项置灰 当某个选项被系统禁用或用户未达到选择条件时，尽量不要将这些选项隐藏，避免用户从一开始就误认为是内容的残缺或系统本身就不具备某些选项，为后续埋下弊端。

将已存在但不可选择的内容置灰显示，不仅能保持内容的完整性、提醒用户后续可选，还能在某些特殊场景让用户主动激活可选条件，提升用户对产品的使用深度。另外，如果空间资源足够，在附近提示不可选的原因能确保用户使用更顺畅（鼠标悬停在不可选内容，临时提示就是一种不错的方式）。

总结 正确的使用下拉菜单既可以保持界面的美观度，还能合理的利用空间资源、提高用户选择效率，但切勿滥用、乱用。

关于下拉菜单的使用方法及技巧远不止于此，只要我们在设计前考虑清楚何时用、怎么用、如何更好的使用，再加上后续持续不断的优化、查漏补缺，才能发挥下拉菜单的最大价值。

超全面！「下拉菜单」设计指南 下拉菜单相关应用在平常的交互设计当中是少不了的一环，也是饱受用户批评的重灾区。

阅读文章 >

欢迎关注作者微信公众号：「能量眼球」

编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。 这篇来自Marc Andrew 的文章 梳理了 6 个实用性很强的 UI 效果提升小技巧，是系列文章的十三篇，原文最早发布于 marcandrew.me 。

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 6 条实用的建议。如果你对于这个系列感兴趣，上一期的内容也值得看看：

第十二波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

下面，一起来看看最新的 6 项 设计技巧 吧！

1、用页内链接让用户尽快获取信息

页面内链接，或者页内导航，在过去曾经一度被很多设计师所抵制，但是如果在对的地方使用，实际上对于整个页面的体验是有明显加成的。最典型的，就是在较长页面当中，页面内跳转链接能够帮助用户更好地导航。

当用户打开一篇较长的文章的时候，文章通常会被划分为多个不同的部分，不同的章节，这个时候页内链接本质上就是某种意义上的导航，帮助用户快速定位到他们需要的位置，无需进行无休止的滚动，迅速确定自己的兴趣点，点击，精准降落。

使用得当，页内链接会大大提高页面内容的可发现性和内容的参与度。

2、让按钮文本指向性保持一致清晰

按钮上的文案内容是非常重要的。用户打开一个页面，当他面对一个 CTA 按钮的时候，他需要知道当他点击这个按钮之后，会发生什么，去到什么地方，起码他应该知道这个按钮所指向的行为和方向是什么，这也对按钮的标签文案提出了要求。

我经常看到网站和 APP 当中的文案使用模糊或者整体的语言风格不够一致。比如有的地方文案是「Lets do this（就这么干吧）」，有的地方则是「Join Now（现在加入）」，类似功能的标签，却使用了截然不同风格的文案，这种情况可能会增加用户的认知负荷，还会让用户对产品产生怀疑。

3、自动填写重复表单字段帮用户节省精力

有些表格可能会很长，尤其在是在电商和各种涉及专业服务的网站上，需要非常具体而准确地填写各种表单。

为用户简化冗余的表单项目是非常有必要的。比如需要用户填写送货地址这种字段，可能需要多次填写，这种字段需要花费较长时间来完成，而且可以确定的是，这几个地方是完全一样的。这个时候，系统应当提供自动填写功能来帮助用户节省精力。

不过值得一提的是，在注册表单当中，有时候需要用户重复填写密码，这个环节是出于确认密码正确性而设置的，不应该在这个地方帮用户「偷懒」。

4、将字段名称放在较长表单的输入框上方

对于较短的表单，我们将每个字段的名称放在填写表格的左侧倒是影响不大，用户在填写的时候视线会使用Z字型来回折返，由于内容量较少，在体验上不会让人感到疲惫。但是在较长的表单当中，情况就不一样了。

由于用户需要持续地填写内容，使用Z字型扫读会非常疲惫，这个时候，需要将字段名称移到表格的上方，这样用户可以使用F式的扫读方式，视线基本上是从上到下自然移动，在体验上更加轻松。

5、不要让不必要的文案内容扰乱操作

即使你所设计的网站和 APP 并不是走极简的风格，在很多的页面当中，都是需要做一些必要的精简，帮助用户更加快速和顺畅地从 A 点出发抵达 B 点。

比如在注册页面当中，一个「Register Now（立刻注册）」就足以告知要做的事情，那么副标题「请填写下方的注册表单」其实是没有存在的必要。

指引用户方向当然是必要的，但是在本身的文案和功能是不言自明的情况下，再增加额外的说明就属于画蛇添足了。

6、不要为了精简而粗暴精简UI控件

和上面一条的道理相同，虽然有的 UI 控件在设计上确实存在精简的空间，但是也不要为了精简而精简。最典型的案例，就是加载进度条的设计。从根源上来说，进度条的存在是为了帮助用户了解某项操作的进度，简单的加载控件仅仅只能够给用户以模糊的感知，只有明确的百分比标识才是用户真正想要知道的信息。

将百分比的标识去掉，仅保留进度条本体，很难让用户对信息把控，这种精简方式其实是在体验上开倒车。

下面是更早的内容：

第一波！快速提升 UI 设计效果的 9 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第二波！快速提升 UI 设计效果的 14 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第三波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第四波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第五波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第六波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第七波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第八波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第九波！快速提升 UI 设计效果的 7 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第十波！快速提升 UI 设计效果的 8 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第十一波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

我很习惯在写文章插入图片前先对屏幕截图进行压缩，让图片容量更小、开启速度更快，更重要的是几乎不会影响画质，以前我都使用 TinyPNG 这个相片压缩工具，只要将图片拖曳到网站就能快速处理，后来就选择以 Imagify 自动从 WordPress 媒体库对 图片压缩 和优化（免费版每月只能处理 20 MB 相片），如果想要在处理图片后整合 CDN 提高图片加载速度可试试看以下服务：

酷站两连发！两个高质量的图片在线压缩工具 编者按：今天推荐两款图片压缩神器，两个都可以直接进行在线压缩，压缩率也非常高。

阅读文章 >

经典图片压缩神器 TinyPNG 出中文版了！单次免费处理 20 张！ 曾经有一段时期我很喜欢 TinyPNG 在线图片压缩工具，只要将 PNG 图片拖曳到网站，它会自动远程对图片压缩、优化，将图片档案大幅缩小，但又不会影响画质（也就是无损压缩），后来也推出 TinyJPG 支持 JPG 格式，还有 WordPress 适用的外挂功能「Compress JP

阅读文章 >

本文要介绍的「Compress JPEG」是一个免费在线图片压缩工具，单次处理最多 20 张图片，支持图片格式包括 JPG、JPEG、PNG、GIF 和 PDF，只要将图片拖曳到网站就会自动进行压缩，同时显示压缩后节省的百分比，批处理还能压缩成单一文件下载，非常方便。

Compress JPEG 可单独调整相片压缩比，比较压缩前后的相片差异，如果你觉得压缩后相片画质改变太多，或是想再让相片容量变得更小（可能会破坏画质），都能在服务里点选相片开启更多编辑选项。

Compress JPEG 网站链接： https://compressjpeg.com/

使用教学

开启 Compress JPEG 网站后从上方语言选项可选择「中文」显示。

上传字段左上角分别有 JPEG、PNG、GIF 和 PDF 四种格式切换，先切换为要使用的原始图片格式。

把需要压缩的图片拖曳到 Compress JPEG 就会开始上传、处理，依照网站说明，这些图片在一小时后会自动从服务器删除，单次最多可选择 20 张图片。

压缩后图片会显示节省的容量百分比，如果想要单独调整某张照片，点选图片后可以从下方功能选项进行设定，调整相片压缩质量，同时利用中轴左右拖曳来查看原始图片和压缩图片画质差异。

点选相片「下载」按钮单独保存压缩后的相片，如果要下载的相片很多，也可点选底下「合并」按钮将所有压缩后的相片打包为压缩文件一次下载。

值得一试的三个理由：

1. 免费图片压缩工具，支持 JPEG、PNG、GIF 和 PDF 格式

2. 单次可压缩最多 20 张图片，将文件拖曳到网站进行自动化处理

3. 手动调整压缩质量，所有处理后的相片可打包一次下载

作品图太大？用这个在线图片压缩神器一秒搞定！ 本文要介绍的「Resizing.app」是一个调整图片尺寸的线上工具，整合常用的三大功能：转档、压缩和调整大小。

阅读文章 >

前言 细节设计作为产品的一个重要环节，也是值得我们去琢磨思考的。本文分析了 10 个案例细节，一起来看看有哪些细节是自己没有注意到的呢。

往期回顾：

10个产品细节剖析，看看大厂是如何做设计的！ 前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

阅读文章 >

10个产品细节剖析，看看大厂是如何做设计的！ UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

阅读文章 >

「抖音」 沉浸观影 – 双指放大，聚焦视频内容观看更集中

1. 使用场景

遇到要看的视频，周围功能图标遮挡对观看效果大打折扣。

2. 设计思考

设计目标：提高视频完播率，从观影体验角度出发。

设计方案：通过双指扩大，你会看到视频被撑大，除了视频内容，图标以及底部 Tab 栏都消失了。不仅如此，顶部会有明显的 Toast 提示，“松开清屏”。当你双指放开，进入专注模式，可以进行暂停、倍率、关闭等选择。

如今短视频充斥着人们的生活，5-30 秒的内容大多都是爽片，看完就过去了。中等视频 1-5 分钟是较为提供优质内容的范畴。以短视频抖音来说，上下滑动的交互形式，注定首页要常驻一堆功能入口（顶部导航、底部标签栏、作者头像，互动图标，标题内容等）。这些多少都会干扰用户进行专注观影，尤其是 1 分钟以上的视频，字幕被遮挡等观影体验不佳这都会影响平台留存以及创作者的完播率。

通过清屏功能，解决视频被遮挡的问题，让用户专注观影。同时双指放大交互操作较难激活，也能避免用户误操作发生。即使有此概率，放大操作有一个路径激活，当滑动到一半以上会触发震动反馈，提示用户此时松开可清屏观影。

总结：双指放大（交互难、防止误操作）滑动触发（一定距离震动、及时反馈）。

「Gmail 邮箱」 快捷删除 – 赋予头像选择属性，效率大幅提升

1. 使用场景

Gmail 邮箱采用独特交互操作，并未进行本土化设计，使用还是不太友好，例如批量编辑。虽然操作位置不一样，但使用很方便。

2. 设计思考

设计目标：提升批量操作效率，节省操作时间。

设计方案：Gmail 邮箱针对邮件删除左右滑动都没触发删除功能，原来隐藏在头像处。

用户通过点击头像，激活选择编辑功能，进行邮件批量操作。

国内选择文件，一般采用左滑删除（左滑-点击删除-二次确认）、点编辑批量删除（编辑-选择-删除），最少都需要三步才能删除。Gmail 邮箱，（点击头像-删除）两步完成。别看减少了一步，操作体验大大提升。头像本身就是附加的内容视图，按国内通栏都是点击进入详情，会不会浪费了更多交互可能。按照这个思路，探索自家产品可优化的交互链路。

「今日头条」 开屏缅怀 – 用爱发光，产品与用户的情感绑定

1. 使用场景

航空事件打击太大，如何给予用户缅怀窗口。

2. 设计思考

设计目标：提升产品情感，让用户感受到产品的感性一面。

设计方案：在开屏页提供入口，确保在线用户打开应用时都能看到。“点亮缅怀”与用户共鸣，上划进行互动评论。

开屏一般都是各大平台广告营收的重要组成部分，如此重要的位置在当天放置缅怀页面。如此体现今日头条的人文情怀，流量与情感是相通的，只有了解用户、了解痛点，才能做出好的产品。

「态棒」 表态弹幕 – 静态页面多内容，曝光物品热度

1. 使用场景

电商页都快到达设计的尽头了，还能怎样提高商品热度。

2. 设计思考

设计目标：提升产品互动感受，促使用户购买率上升。

设计方案：常规电商页都是静态展示内容，态棒推出特有的“印象弹幕”，在静态图片之上加入动态弹幕，即使用户无操作，也会展示更多内容，提高更多内容的呈现。

把类似视频弹幕功能植入到电商页中，多少会提高商品的互动和曝光，但也需考虑商品图的简约性，如果都是促销文案精美排版的照片注定会存在弹幕干扰，影响用户浏览商品。

所以态棒目前的清爽商品图适合“表态”当前弹幕展示，目前还是很看好这款产品的设计，加油。

「夸克」 长按添加窗口 – 赋予多交互，降低操作成本

1. 使用场景

新增窗口常规需要点击窗口-添加新窗口。

2. 设计思考

设计目标：缩短交互路径，提升更多操作可能。

设计方案：长按底部第二个 Tab，你会看到上方由 1-2-3 页面的交互动画。通过底部窗口数字可以知道增加了一个新窗口。

原本需要两步点击操作才能完成的功能，用长按交互来二次赋予相同功能，给予手势操作更多可能，一向极简的夸克，同样用极简的交互为用户提供服务，值得大家学习。

「识区」 上滑内容 – 文案与振动反馈，快速引导学习

1. 使用场景

字节新产品，识区文章的上下切换如何更符合用户理解。

2. 设计思考

设计目标：提升上下切换的理解成本，防止误操作发生。

设计方案：在识区内阅读完一篇文章，通过上划进行切换下一篇文章。为防止误操作，刚上滑时会显示“上滑查看下条内容”。当滑到一定节点会给予震动反馈，文案显示“松手查看”表示激活下一篇文章。

与上面（1）抖音手势类似，同样在移动路径中激活功能，目的都是降低误操作发生。此方法同样适用于长按滑动的交互页面中。

「iPhone 截图」 长按移动 – 双指交互，互相独立

1. 使用场景

截屏目的为了在第三方平台发布，或者邮件反馈 bug 等情况，如何提高添加效率。

2. 设计思考

设计目标：缩短交互路径，优化 iPhone 特有功能。

设计方案：当截屏后，左下角会显示缩略图，如果你只是左滑移出那就太浪费了。

最近我发现这个交互功能，通过长按缩略图激活移动功能，然后通过另一只手切换到第三方编辑平台，当缩略图右上角显示＋，表示此位置可以放置截图，松开手指，自动贴入编辑页中。

目前我常用的备忘录以及邮箱都可以使用，其他还没尝试，感兴趣的小伙伴可以体验一下。它就像是两个大脑，互相独立。软件可以一心二用，但人脑不可以。这也是软件吸引用户使用的一点。

「夸克」 下滑输入 – 快速搜索，缩短用户点击路径

1. 使用场景

点击夸克搜索框时，多少会因为触发区域过高较难点击。

2. 设计思考

设计目标：提升搜索框易触达性，优化用户使用体验。

设计方案：常规点击来选择搜索框，偶然发现通过屏幕下滑同样也能激活搜索框。

首页下滑，能看到交互轨迹，此交互贴合产品的极简风格，同样通过手势交互，给予多种触达入口。便于用户特殊场景下的使用体验，是设计提升体验的优化点。

「iPhone 信息」 双指触发 – 快速编辑批量信息

1. 使用场景

iPhone 向来就是以体验驱动的公司。如何快速编辑信息，看看 iPhone 怎么做的。

2. 设计思考

设计目标：通过手势交互提升短信编辑的易用性操作。

设计方案：左右双指并列向下滑动，瞬间激活选择按钮，所到之处均已选择。激活编辑面板可以单指在左边选择按钮处滑动批量选择。

无意间发现的交互方式，优化并缩短了交互路径，同时双指滑动触发难度较大，能防止一般误操作的发生，虽然功能较为隐藏，但并不影响正常用户。

又一个手势交互提升 用户体验 的设计亮点。

「美团外卖」 天气配图 – 降低急躁，与用户产生情感体谅

1. 使用场景

恶劣天气外卖配送延迟，遇到差评的情况。

2. 设计思考

设计目标：解决恶劣天气外卖小哥万一延误收到差评的问题。通过天气感知降低差评率发生。

设计方案：当点外卖时，美图外卖右下角会显示当前天气情况，提前告知用户因天气带来的不可控因素。当点击进入，能看到玻璃外模糊的外卖骑手，以及雾蒙蒙的水蒸气。

家里暖，外面冷，强差异，易体谅。虽然产品都需要精美的设计，但有时会物极必反。一些场景下，精美的插画设计未必有照片更能激发用户共鸣感。所以，好的设计并不只是设计本身，而是能与用户产生情感共鸣的设计，无论表现手法是什么，能产生共鸣就是好的设计。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个 设计师 所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束，我们下期再见！

10个产品细节剖析，看看大厂是如何做设计的！ 前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

阅读文章 >

欢迎关注作者微信公众号：草蓉三石

前言 细节设计作为产品的一个重要环节，也是值得我们去琢磨思考的。本文分析了 10 个案例细节，一起来看看有哪些细节是自己没有注意到的呢。

往期回顾：

10个产品细节剖析，看看大厂是如何做设计的！ 前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

阅读文章 >

10个产品细节剖析，看看大厂是如何做设计的！ UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

阅读文章 >

「抖音」 沉浸观影 – 双指放大，聚焦视频内容观看更集中

1. 使用场景

遇到要看的视频，周围功能图标遮挡对观看效果大打折扣。

2. 设计思考

设计目标：提高视频完播率，从观影体验角度出发。

设计方案：通过双指扩大，你会看到视频被撑大，除了视频内容，图标以及底部 Tab 栏都消失了。不仅如此，顶部会有明显的 Toast 提示，“松开清屏”。当你双指放开，进入专注模式，可以进行暂停、倍率、关闭等选择。

如今短视频充斥着人们的生活，5-30 秒的内容大多都是爽片，看完就过去了。中等视频 1-5 分钟是较为提供优质内容的范畴。以短视频抖音来说，上下滑动的交互形式，注定首页要常驻一堆功能入口（顶部导航、底部标签栏、作者头像，互动图标，标题内容等）。这些多少都会干扰用户进行专注观影，尤其是 1 分钟以上的视频，字幕被遮挡等观影体验不佳这都会影响平台留存以及创作者的完播率。

通过清屏功能，解决视频被遮挡的问题，让用户专注观影。同时双指放大交互操作较难激活，也能避免用户误操作发生。即使有此概率，放大操作有一个路径激活，当滑动到一半以上会触发震动反馈，提示用户此时松开可清屏观影。

总结：双指放大（交互难、防止误操作）滑动触发（一定距离震动、及时反馈）。

「Gmail 邮箱」 快捷删除 – 赋予头像选择属性，效率大幅提升

1. 使用场景

Gmail 邮箱采用独特交互操作，并未进行本土化设计，使用还是不太友好，例如批量编辑。虽然操作位置不一样，但使用很方便。

2. 设计思考

设计目标：提升批量操作效率，节省操作时间。

设计方案：Gmail 邮箱针对邮件删除左右滑动都没触发删除功能，原来隐藏在头像处。

用户通过点击头像，激活选择编辑功能，进行邮件批量操作。

国内选择文件，一般采用左滑删除（左滑-点击删除-二次确认）、点编辑批量删除（编辑-选择-删除），最少都需要三步才能删除。Gmail 邮箱，（点击头像-删除）两步完成。别看减少了一步，操作体验大大提升。头像本身就是附加的内容视图，按国内通栏都是点击进入详情，会不会浪费了更多交互可能。按照这个思路，探索自家产品可优化的交互链路。

「今日头条」 开屏缅怀 – 用爱发光，产品与用户的情感绑定

1. 使用场景

航空事件打击太大，如何给予用户缅怀窗口。

2. 设计思考

设计目标：提升产品情感，让用户感受到产品的感性一面。

设计方案：在开屏页提供入口，确保在线用户打开应用时都能看到。“点亮缅怀”与用户共鸣，上划进行互动评论。

开屏一般都是各大平台广告营收的重要组成部分，如此重要的位置在当天放置缅怀页面。如此体现今日头条的人文情怀，流量与情感是相通的，只有了解用户、了解痛点，才能做出好的产品。

「态棒」 表态弹幕 – 静态页面多内容，曝光物品热度

1. 使用场景

电商页都快到达设计的尽头了，还能怎样提高商品热度。

2. 设计思考

设计目标：提升产品互动感受，促使用户购买率上升。

设计方案：常规电商页都是静态展示内容，态棒推出特有的“印象弹幕”，在静态图片之上加入动态弹幕，即使用户无操作，也会展示更多内容，提高更多内容的呈现。

把类似视频弹幕功能植入到电商页中，多少会提高商品的互动和曝光，但也需考虑商品图的简约性，如果都是促销文案精美排版的照片注定会存在弹幕干扰，影响用户浏览商品。

所以态棒目前的清爽商品图适合“表态”当前弹幕展示，目前还是很看好这款产品的设计，加油。

「夸克」 长按添加窗口 – 赋予多交互，降低操作成本

1. 使用场景

新增窗口常规需要点击窗口-添加新窗口。

2. 设计思考

设计目标：缩短交互路径，提升更多操作可能。

设计方案：长按底部第二个 Tab，你会看到上方由 1-2-3 页面的交互动画。通过底部窗口数字可以知道增加了一个新窗口。

原本需要两步点击操作才能完成的功能，用长按交互来二次赋予相同功能，给予手势操作更多可能，一向极简的夸克，同样用极简的交互为用户提供服务，值得大家学习。

「识区」 上滑内容 – 文案与振动反馈，快速引导学习

1. 使用场景

字节新产品，识区文章的上下切换如何更符合用户理解。

2. 设计思考

设计目标：提升上下切换的理解成本，防止误操作发生。

设计方案：在识区内阅读完一篇文章，通过上划进行切换下一篇文章。为防止误操作，刚上滑时会显示“上滑查看下条内容”。当滑到一定节点会给予震动反馈，文案显示“松手查看”表示激活下一篇文章。

与上面（1）抖音手势类似，同样在移动路径中激活功能，目的都是降低误操作发生。此方法同样适用于长按滑动的交互页面中。

「iPhone 截图」 长按移动 – 双指交互，互相独立

1. 使用场景

截屏目的为了在第三方平台发布，或者邮件反馈 bug 等情况，如何提高添加效率。

2. 设计思考

设计目标：缩短交互路径，优化 iPhone 特有功能。

设计方案：当截屏后，左下角会显示缩略图，如果你只是左滑移出那就太浪费了。

最近我发现这个交互功能，通过长按缩略图激活移动功能，然后通过另一只手切换到第三方编辑平台，当缩略图右上角显示＋，表示此位置可以放置截图，松开手指，自动贴入编辑页中。

目前我常用的备忘录以及邮箱都可以使用，其他还没尝试，感兴趣的小伙伴可以体验一下。它就像是两个大脑，互相独立。软件可以一心二用，但人脑不可以。这也是软件吸引用户使用的一点。

「夸克」 下滑输入 – 快速搜索，缩短用户点击路径

1. 使用场景

点击夸克搜索框时，多少会因为触发区域过高较难点击。

2. 设计思考

设计目标：提升搜索框易触达性，优化用户使用体验。

设计方案：常规点击来选择搜索框，偶然发现通过屏幕下滑同样也能激活搜索框。

首页下滑，能看到交互轨迹，此交互贴合产品的极简风格，同样通过手势交互，给予多种触达入口。便于用户特殊场景下的使用体验，是设计提升体验的优化点。

「iPhone 信息」 双指触发 – 快速编辑批量信息

1. 使用场景

iPhone 向来就是以体验驱动的公司。如何快速编辑信息，看看 iPhone 怎么做的。

2. 设计思考

设计目标：通过手势交互提升短信编辑的易用性操作。

设计方案：左右双指并列向下滑动，瞬间激活选择按钮，所到之处均已选择。激活编辑面板可以单指在左边选择按钮处滑动批量选择。

无意间发现的交互方式，优化并缩短了交互路径，同时双指滑动触发难度较大，能防止一般误操作的发生，虽然功能较为隐藏，但并不影响正常用户。

又一个手势交互提升 用户体验 的设计亮点。

「美团外卖」 天气配图 – 降低急躁，与用户产生情感体谅

1. 使用场景

恶劣天气外卖配送延迟，遇到差评的情况。

2. 设计思考

设计目标：解决恶劣天气外卖小哥万一延误收到差评的问题。通过天气感知降低差评率发生。

设计方案：当点外卖时，美图外卖右下角会显示当前天气情况，提前告知用户因天气带来的不可控因素。当点击进入，能看到玻璃外模糊的外卖骑手，以及雾蒙蒙的水蒸气。

家里暖，外面冷，强差异，易体谅。虽然产品都需要精美的设计，但有时会物极必反。一些场景下，精美的插画设计未必有照片更能激发用户共鸣感。所以，好的设计并不只是设计本身，而是能与用户产生情感共鸣的设计，无论表现手法是什么，能产生共鸣就是好的设计。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个 设计师 所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束，我们下期再见！

10个产品细节剖析，看看大厂是如何做设计的！ 前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

阅读文章 >

欢迎关注作者微信公众号：草蓉三石

我很习惯在写文章插入图片前先对屏幕截图进行压缩，让图片容量更小、开启速度更快，更重要的是几乎不会影响画质，以前我都使用 TinyPNG 这个相片压缩工具，只要将图片拖曳到网站就能快速处理，后来就选择以 Imagify 自动从 WordPress 媒体库对 图片压缩 和优化（免费版每月只能处理 20 MB 相片），如果想要在处理图片后整合 CDN 提高图片加载速度可试试看以下服务：

酷站两连发！两个高质量的图片在线压缩工具 编者按：今天推荐两款图片压缩神器，两个都可以直接进行在线压缩，压缩率也非常高。

阅读文章 >

经典图片压缩神器 TinyPNG 出中文版了！单次免费处理 20 张！ 曾经有一段时期我很喜欢 TinyPNG 在线图片压缩工具，只要将 PNG 图片拖曳到网站，它会自动远程对图片压缩、优化，将图片档案大幅缩小，但又不会影响画质（也就是无损压缩），后来也推出 TinyJPG 支持 JPG 格式，还有 WordPress 适用的外挂功能「Compress JP

阅读文章 >

本文要介绍的「Compress JPEG」是一个免费在线图片压缩工具，单次处理最多 20 张图片，支持图片格式包括 JPG、JPEG、PNG、GIF 和 PDF，只要将图片拖曳到网站就会自动进行压缩，同时显示压缩后节省的百分比，批处理还能压缩成单一文件下载，非常方便。

Compress JPEG 可单独调整相片压缩比，比较压缩前后的相片差异，如果你觉得压缩后相片画质改变太多，或是想再让相片容量变得更小（可能会破坏画质），都能在服务里点选相片开启更多编辑选项。

Compress JPEG 网站链接： https://compressjpeg.com/

使用教学

开启 Compress JPEG 网站后从上方语言选项可选择「中文」显示。

上传字段左上角分别有 JPEG、PNG、GIF 和 PDF 四种格式切换，先切换为要使用的原始图片格式。

把需要压缩的图片拖曳到 Compress JPEG 就会开始上传、处理，依照网站说明，这些图片在一小时后会自动从服务器删除，单次最多可选择 20 张图片。

压缩后图片会显示节省的容量百分比，如果想要单独调整某张照片，点选图片后可以从下方功能选项进行设定，调整相片压缩质量，同时利用中轴左右拖曳来查看原始图片和压缩图片画质差异。

点选相片「下载」按钮单独保存压缩后的相片，如果要下载的相片很多，也可点选底下「合并」按钮将所有压缩后的相片打包为压缩文件一次下载。

值得一试的三个理由：

1. 免费图片压缩工具，支持 JPEG、PNG、GIF 和 PDF 格式

2. 单次可压缩最多 20 张图片，将文件拖曳到网站进行自动化处理

3. 手动调整压缩质量，所有处理后的相片可打包一次下载

作品图太大？用这个在线图片压缩神器一秒搞定！ 本文要介绍的「Resizing.app」是一个调整图片尺寸的线上工具，整合常用的三大功能：转档、压缩和调整大小。

阅读文章 >

前言 下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖 下拉菜单 的使用。在 UI 设计 中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。

那么，如何区分 下拉菜单设计 的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。

往期回顾：

5000字干货！从5个方面帮你完整了解标签栏设计 前言 标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。

阅读文章 >

6000字干货！6个方面帮你循序渐进掌握表单设计 前言 表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。

阅读文章 >

本期大纲

基本介绍及结构梳理 使用下拉菜单需满足的条件 下拉菜单类型 常见问题及避坑指南 总结 基本介绍及结构梳理 1. 什么是下拉菜单？ 下拉菜单是选项的一种呈现方式，当用户点击某个触发图标/箭头时，会弹出一个项目列表，用户需从中选择一项或多项来满足自己的选择需求。

下拉菜单经常用在表单选项、筛选条件、导航等界面模块中，被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等，内容较多时可能需要上下滚动，真实情况视选项的实际数量而定。

2. 下拉菜单的构成

下拉菜单看起来跟表单中的选项框几乎一致，但在真实的表单页面中，触发表单项后可能是下拉菜单，也可能是弹窗或页面跳转。同理，下拉菜单也会经常用在除表单之外的其他界面模块中，从表面上看跟表单一样，而实际的元素及交互效果则有很大的区别，但本文主要针对表单中的下拉菜单（非导航）作出介绍，有以下十个部分构成：

1）标签：告知用户该下拉菜单项需要选择什么内容；

2）容器：用于承载选择前的信息提示（占位符）及选择后的内容；

3）下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；

4）占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；

5）下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；

6）选项列表：供用户选择的内容；

7）分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；

8）已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；

9）滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；

10）系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。

3. 下拉菜单的几种状态 不管是出于系统问题还是用户的原因，下拉菜单能否操作或有什么限制，都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似，但在设计时需要明显的区分开来，常见的状态有默认、悬停、聚焦、完成、禁用和错误提示，下面一起来看看设计师如何通过不同的视觉样式反馈给用户。

默认状态

即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。

悬停状态

当鼠标经过或停留在一个下拉菜单项时，容器会通过改变填充色、描边色或其他不同于初始化的样式提醒用户该内容的可操作性。悬停状态只出现在电脑端，因触屏设备直接与之产生交互，会直接越过该状态。

聚焦状态

聚焦状态是指用户正在与之发生交互，点击后，展开选项列表的同时，容器通过投影、边框加粗或主色调来提醒用户当前正处在操作中，下拉箭头会进行垂直翻转（向上）。在很多其他模块组件中，展开/收起也是源于箭头上下方向的提示。

完成状态

用户完成选择后，容器中填充被选中的选项并替换占位符，对于非必填的下拉菜单项，后面出现一键清除图标“⨂”，其他元素与初始化状态相同。

禁用状态

对系统禁用或当前未满足操作条件的下拉菜单项，为保持内容的可见性，对部分元素置灰以提醒用户。

错误反馈

相比输入框，下拉菜单项出错的情况较少，用户出现漏选、或任务流程存在两个互斥的选项时，系统会通过强提醒警示用户，例如将提示文本、容器描边及填充使用红色。

使用下拉菜单需满足的条件 1. 由选项数量决定（移动端）

首先，选项数量不能太少也不能太多。说人话，就是选项数量为 5~9 条是使用下拉菜单的最佳选择。因下拉区域的空间有限，考虑到用户操作的难易程度，大多数情况下，低于 5 条选项使用单选按钮即可满足，超过 9 条就需要更多的展示空间，使用操作栏弹窗或页面跳转则体验更好。当然这并非绝对，只是作为一个参考值而已，使用下拉菜单以 5~9 条为例，可满足工作中的大部设计需求。

其次，在选项数量满足的条件下，选项文本的字数也需越短越好，如果文本过长导致折行或省略，用户体验也会大打折扣，还不如弃用下拉菜单、换种方式呈现。

2. 由便捷性决定

能让用户选择的就不要让用户去输入。比如用户在选择退款原因时，常见的原因就那么几种，使用下拉菜单的样式呈现，比码字的操作效率会高出很多，即便用户有自定义需求，增加一个「其他」选项完全可以满足。

另外，需要说明的是，这种方案只能满足大部分设计需求及使用场景，没有绝对好的设计。当输入有可能比选择更快时，那就果断让用户输入，这种情况一般出现在日历控件中，如果用户年龄跨度较大，想象一下，需要在几十甚至上百组数据中找到自己的出生年份也是件很痛苦的事情，还不如输入 4 个数字来的快。

3. 后期延展决定

如果当前选项较少（低于 5 项），由于内容是管理后台配置、且根据产品需求短时间内有陆续增加的规划，但最终数量可控，这时，即便是只有一两条选项也可选择使用下拉菜单。

下拉菜单类型 根据用户需求、内容性质的不同、处理各种信息时更加方便，其下拉菜单的视觉样式、交互方式也会有所不同。例如：在导航中使用下拉菜单、表单中使用下拉框，甚至某些特殊场景中，下拉框和下拉菜单还能互换，但为了兼顾不同类型、提升可用性，仍需特别留意这几种类型及变化。

1. 导航类型 几乎所有的网站都离不开导航类型菜单，分为水平导航和垂直导航两种。水平导航一般出现在网站顶部，例如官网顶部的功能分类、电商网站的商品分类等；而垂直导航绝大多数出现在后台管理系统的左侧，不管是哪种类型，主要目的是通过所提供的导航链接将用户带到新的位置。

2. 命令菜单类型 命令菜单主要用于计算机桌面软件及应用程序的顶部，点击后会展开很多选项按钮以供用户进行下一步操作，部分较为复杂的功能选项会伴随着二级（子菜单）选项列表，方便用户对软件、应用更好的控制。

3. 表单类型 众所周知，在条件允许的情况下，用户选择的速度要远远大于码字的速度，且更有利于系统进行数据统计，所以在很多表单中，都会设计一个选项字段，让用户通过下拉菜单选项便捷式选择。表单类型的下拉菜单也有多种类型样式，下面将一一进行介绍：

标准样式

标准下拉菜单是最原始、操作最简单的类型，没有任何的弯弯绕绕，触发弹出下拉选项后，选中任一内容即完成与当前表单项的交互。

关键词匹配

这种类型常出现在选项较多的场景中，为了方便用户更快完成选择任务，在标准样式的基础上增加了输入功能。输入的过程中，系统根据输入的关键词在已有的选项中进行匹配、筛选，用户可在筛选结果中快速找出自己需要的选项，无需输入所有文字、也不用在内容超多的列表中来回寻找即可完成任务。

搜索框

这是一种比较老派的做法，触发下拉菜单后，通常会在选项列表上方增设一个搜索框，用户输入关键词后进行搜索，相比上面提到的关键词匹配就有些落后了，不仅视觉样式变得复杂、也增加了用户的操作成本。部分 PC 端网站的选择地址控件中还有使用，但更多产品直接使用了城市拼音首字母进行分类筛选，显然比这种搜索方式的效率更高。

多选/复选

即用户在同一表单项中选择多个选项，虽然这种设计方式操作起来比较复杂，但在内容较多、空间资源不是很充足的管理系统、B 端设计中还是很实用的。例如用户权限配置、带有二级/三级联动的机构或地址选择，多选相比平铺更节省空间，且这类用户很多都是经过培训、相对专业的群体。

常见问题及避坑指南 1. 延展不要超过两级 菜单的子层级越多、操作越复杂、用户体验就越差，尽量不要超过两级，如果超过两级，在条件允许的情况下进行二次分析增删、合并分类，以此来减少用户操作负担。当然这并非绝对，只能在相对情况下尽量避免，例如选择地址（省、市、区/县）时就无法删减。

2. 默认值的使用 默认值主要针对表单类型的下拉菜单，在可预知的场景中、通过行为预判提前为用户选中某个最常用、选择频率最高或当前用户最有可能选择的内容，方便被精准匹配到的用户不用做任何操作即可完成任务，同时也提高效率。但根据笔者在体验的多个产品中、以及看过相关方面的各种资料说明，是否需要提供默认选项则各自参半，成了两相对立的局面，暂且不论默认选项是否合理，但如果出现以下情况请慎用。

选填项

为选填表单项提供默认值，用户极有可能直接略过该项，最终默认值并非用户的真实需求，这也将变得毫无意义，甚至在后续的数据分析中产生误导，影响产品的走向。另外，即便用户注意到了，不想选择任何内容，还得手动清除，这就需要用户付出更多的时间成本和操作成本，与用户体验相悖。

均衡度适中

当多个选项的使用率较为均衡，提供默认选项确实会减少这一小部分用户的操作成本，但在大部分的用户群体中，只要不影响其利益或用户认为无关紧要就会默认该选项的可用性，同样会出现上述问题。

用户属性模糊

这种主要针对千人千面的推荐设定，在一些新注册或行为飘忽不定的用户群体中，推荐默认选项也会将出错的概率大幅度提升。

3. 避免滚动失误 对于选项较多的下拉菜单，滚动不可避免，但有没有一种可能，我们在明明需要滚动下拉列表、可滚动的却是整个网页，而鼠标离开下拉区域去滚动页面、真正发生滚动交互的则是下拉列表，苦不堪言。

解决这个问题需要程序员对滚动交互时的光标位置作出界定，当下拉菜单仅处于聚焦（高亮/主体色/阴影）状态时滚动选项列表，除此之外滚动页面即可。这里需要说明的是，光标离开下拉菜单就可取消聚焦状态，不用非得等用户完成选择任务后再取消，目的是为让下拉菜单与页面的滚动互不干扰且能随时切换。

4. 选项数量 选项太少

表单选项太少能使用下拉菜单吗？答案是“当然能”。但这又是何苦呢，如果只有两个选项，用单选按钮它不香吗，用户只喜欢用最少的操作在最短的时间内完成自身所需，每多操作一次都可能会离开。

选项太多

下拉选项过多可能会对用户产生负面影响，但有些时候是无法避免的，例如选择国家、地址、区号等，不管怎么做都没法简化。这时，增加前面所讲到的关键词匹配、搜索框功能，就能提高用户的完成效率，也让产品变得更容易使用。

5. 如果输入比选择更快 在部分特殊场景中，输入明显比选择更快。试想一下，自己的出生年份仅仅四个数字，但却要在几十个选项中滚动查找，真的很费时间，选择信用卡的有效期也是如此，要解决这个问题只需一个数字键盘，让用户自己输入会容易许多。

6. 减少操作 这里有一个很经典的例子就是日期组件，对于年、月、日的选择，分别使用 3 个下拉菜单看似也能接受，但真的很复杂，且每次前面内容的变化都对后面的数值起着决定性的作用。将三组内容进行合并且让用户自定义，就方便很多，能减少部分多余的操作。

7. 精简的选项描述 一句话能说清楚的就不要用两句话，文字越多、理解成本就越高。在空间有限的下拉区域，选项要尽可能简短，直击核心内容。

8. 选项的优先级 下拉菜单中的选项并非随意摆放，要想迎合用户、使其有更好的使用体验，就需要符合一定的规律。将最常用的选项靠前、相关联的组合、时间按照先后、地区按首字母等优先级排序，让用户操作前就能一目了然。

9. 不可用选项置灰 当某个选项被系统禁用或用户未达到选择条件时，尽量不要将这些选项隐藏，避免用户从一开始就误认为是内容的残缺或系统本身就不具备某些选项，为后续埋下弊端。

将已存在但不可选择的内容置灰显示，不仅能保持内容的完整性、提醒用户后续可选，还能在某些特殊场景让用户主动激活可选条件，提升用户对产品的使用深度。另外，如果空间资源足够，在附近提示不可选的原因能确保用户使用更顺畅（鼠标悬停在不可选内容，临时提示就是一种不错的方式）。

总结 正确的使用下拉菜单既可以保持界面的美观度，还能合理的利用空间资源、提高用户选择效率，但切勿滥用、乱用。

关于下拉菜单的使用方法及技巧远不止于此，只要我们在设计前考虑清楚何时用、怎么用、如何更好的使用，再加上后续持续不断的优化、查漏补缺，才能发挥下拉菜单的最大价值。

超全面！「下拉菜单」设计指南 下拉菜单相关应用在平常的交互设计当中是少不了的一环，也是饱受用户批评的重灾区。

阅读文章 >

欢迎关注作者微信公众号：「能量眼球」

编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。 这篇来自Marc Andrew 的文章 梳理了 6 个实用性很强的 UI 效果提升小技巧，是系列文章的十三篇，原文最早发布于 marcandrew.me 。

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 6 条实用的建议。如果你对于这个系列感兴趣，上一期的内容也值得看看：

第十二波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

下面，一起来看看最新的 6 项 设计技巧 吧！

1、用页内链接让用户尽快获取信息

页面内链接，或者页内导航，在过去曾经一度被很多设计师所抵制，但是如果在对的地方使用，实际上对于整个页面的体验是有明显加成的。最典型的，就是在较长页面当中，页面内跳转链接能够帮助用户更好地导航。

当用户打开一篇较长的文章的时候，文章通常会被划分为多个不同的部分，不同的章节，这个时候页内链接本质上就是某种意义上的导航，帮助用户快速定位到他们需要的位置，无需进行无休止的滚动，迅速确定自己的兴趣点，点击，精准降落。

使用得当，页内链接会大大提高页面内容的可发现性和内容的参与度。

2、让按钮文本指向性保持一致清晰

按钮上的文案内容是非常重要的。用户打开一个页面，当他面对一个 CTA 按钮的时候，他需要知道当他点击这个按钮之后，会发生什么，去到什么地方，起码他应该知道这个按钮所指向的行为和方向是什么，这也对按钮的标签文案提出了要求。

我经常看到网站和 APP 当中的文案使用模糊或者整体的语言风格不够一致。比如有的地方文案是「Lets do this（就这么干吧）」，有的地方则是「Join Now（现在加入）」，类似功能的标签，却使用了截然不同风格的文案，这种情况可能会增加用户的认知负荷，还会让用户对产品产生怀疑。

3、自动填写重复表单字段帮用户节省精力

有些表格可能会很长，尤其在是在电商和各种涉及专业服务的网站上，需要非常具体而准确地填写各种表单。

为用户简化冗余的表单项目是非常有必要的。比如需要用户填写送货地址这种字段，可能需要多次填写，这种字段需要花费较长时间来完成，而且可以确定的是，这几个地方是完全一样的。这个时候，系统应当提供自动填写功能来帮助用户节省精力。

不过值得一提的是，在注册表单当中，有时候需要用户重复填写密码，这个环节是出于确认密码正确性而设置的，不应该在这个地方帮用户「偷懒」。

4、将字段名称放在较长表单的输入框上方

对于较短的表单，我们将每个字段的名称放在填写表格的左侧倒是影响不大，用户在填写的时候视线会使用Z字型来回折返，由于内容量较少，在体验上不会让人感到疲惫。但是在较长的表单当中，情况就不一样了。

由于用户需要持续地填写内容，使用Z字型扫读会非常疲惫，这个时候，需要将字段名称移到表格的上方，这样用户可以使用F式的扫读方式，视线基本上是从上到下自然移动，在体验上更加轻松。

5、不要让不必要的文案内容扰乱操作

即使你所设计的网站和 APP 并不是走极简的风格，在很多的页面当中，都是需要做一些必要的精简，帮助用户更加快速和顺畅地从 A 点出发抵达 B 点。

比如在注册页面当中，一个「Register Now（立刻注册）」就足以告知要做的事情，那么副标题「请填写下方的注册表单」其实是没有存在的必要。

指引用户方向当然是必要的，但是在本身的文案和功能是不言自明的情况下，再增加额外的说明就属于画蛇添足了。

6、不要为了精简而粗暴精简UI控件

和上面一条的道理相同，虽然有的 UI 控件在设计上确实存在精简的空间，但是也不要为了精简而精简。最典型的案例，就是加载进度条的设计。从根源上来说，进度条的存在是为了帮助用户了解某项操作的进度，简单的加载控件仅仅只能够给用户以模糊的感知，只有明确的百分比标识才是用户真正想要知道的信息。

将百分比的标识去掉，仅保留进度条本体，很难让用户对信息把控，这种精简方式其实是在体验上开倒车。

下面是更早的内容：

第一波！快速提升 UI 设计效果的 9 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第二波！快速提升 UI 设计效果的 14 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第三波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第四波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第五波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第六波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第七波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第八波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第九波！快速提升 UI 设计效果的 7 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第十波！快速提升 UI 设计效果的 8 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

第十一波！快速提升 UI 设计效果的 6 个小技巧 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。

阅读文章 >

大家好，我是和你们聊设计的花生~这期继续给大家推荐5位值得关注学习的插画师。

上期回顾↓

这 5 位优秀的贴纸设计艺术家，是我每日学习的源泉！ 大家好，我是和你们聊设计的花生~ 上一期为大家推荐了 5 位擅长扁平风插画的艺术家： [link https://www.uisdc.com/5-illustrations-artist] 今天要为大家推荐的 5 位艺术家，都非常擅长「贴纸」设计。

阅读文章 >

Patryk Wojciechowicz 「Behance 主页」 https://www.behance.net/wojciechowicz

「Dribbble 主页」 https://dribbble.com/PatrykW/shots

Patryk Wojciechowicz 是一位来自波兰的插画师，他的插画以自然景物为主，场景视觉层次分明，色彩绚烂，氛围感极强。

Patryk 善于在插画中使用对比色与近似色，主色彩往往只有 2-3 种，通过明度差异制造前中后景的层次差异。在视觉中心使用高明度高饱和度的色彩，与周围的暗色调形成强烈对比，使视觉中心得以凸显。并通过添加噪点表现光的扩散， 使色彩间的过渡自然柔和，使插画光感通透浪漫。

相关免费插画教程

扁平清新的森林小插画丨 https://uiiiuiii.com/illustrator/1212213732.html

如何在绘制矢量插画时实现噪点效果？丨 https://uiiiuiii.com/illustrator/1212113398.html

Priya Mistry 「个人网站」 https://www.priyamistry.co.uk/portfolio/

「Behance 主页」 https://www.behance.net/priyamistry

「Dribbble 主页」 https://dribbble.com/PriyaMistry

Priya Mistry 是一位来自英国伦敦的插画师，他的用色大胆丰富，擅长用画面来讲故事，所以经常与杂志及新闻网站合作社论插画。

Priya 喜欢用干净的色块加简单线条来塑造画面形象，无论是人还是物品，都只有 2 个层级的分形，再利用明度差异立体块面塑造，这使他的画面内容清晰明了，处理复杂的画面也不会显得杂乱。Priya 非常喜欢用油漆马克笔在纸上作画，画笔和画纸的纹理让插画的质感更独特。这样偏好也影响到他的板绘创作，Priya 喜欢用带有粗糙质感的画笔，为画面带来更多的 手绘 质感。

相关免费插画教程

PS 教程！手绘风格街头小景插画！丨 https://uiiiuiii.com/photoshop/1212372835.html

PS 教程！4 步原创顶级扁平噪点插画丨 https://uiiiuiii.com/photoshop/1212330347.html

Jorsh Peña 「Instagram 主页」 https://www.instagram.com/jorshpena/

「Behance 主页」 https://www.behance.net/jorshpena

「个人网站」 https://www.jorshpena.com/

Jorsh Peña 来自墨西哥，是一位插画师兼艺术导演。他的插画偏扁平线条为，用极简的几何形状拼接出各种元素。画面中的意象奇幻神秘，用色对比强烈，有极强的个人特色。曾被评为墨西哥最佳 150 名插画师之一，与微软、谷歌、Snapchat 等诸多知名品牌都有合作。

Jordan 喜欢用等距插画来构建立体事物和空间场景，对事物的抽象方式非常独特，画面中人如同中宗教中的石像，且经常会结合主题进行大胆的分离解构。高饱和度的用色常常铺满整个画面，再在局部用无彩色进行调和，这样即使色彩强烈也不会觉得眼花，具有透气感。

相关免费插画教程

科技感满满的 2.5D 机器人插画！丨 https://uiiiuiii.com/illustrator/1212353650.html

从头学习绘制扁平风购物主题插画丨 https://uiiiuiii.com/illustrator/1212433830.html

Juan Afanador 「Behance 主页」 https://www.behance.net/juanchaco

「Instagram 主页」 https://www.instagram.com/juanchaco0825/

Juan Afanador 是一位来自哥伦比亚的自由艺术家，他喜欢街头涂鸦，插画也是同样的潮流风格。Juan 创作的潮流插画线条流畅，元素造型饱满。画面以高明度高饱和度的色彩为主，搭配渐变、波点、半调网格丰富效果。长期的创作积累让 Juan 已经形成了鲜明的风格，也有了自己原创的 IP 形象，很多知名品牌的都有与他合作，他的插画也衍生出了很多时尚周边，收到年轻人的喜爱。

相关免费插画教程

UDT 分享！教你绘制潮流风格商业插画丨 https://uiiiuiii.com/illustrator/121286858.html

用 10 分钟教你创作国潮风新春锦鲤插画丨 https://uiiiuiii.com/illustrator/1212359444.html

Andrew Nye 「Behance 主页」 https://www.behance.net/andrewnye

「个人网站」 http://www.ajnye.co.uk/

Andrew Nye 是一位来自英国的插画师，他专注于矢量插画的绘制，作品构思精巧，画风细腻华丽。Andrew 非常擅长金属玻璃质感的绘制及对细节的深入刻画，这让他的作品有了突破二维画面的立体感和真实感；画面用色多而不花，始终带有如钻石般精致闪耀的质感。除了画风的精致，Andrew 的作品内涵也非常有深度，常能将日常事物的进行不可思议的组合，绘制出展示背后的深层含义与问题的社论插画。

相关免费插画教程

巨详细的霓虹炫彩插画绘制过程演示丨 https://uiiiuiii.com/illustrator/1212430179.html

创意手电筒灯塔 插画设计 教程丨 https://uiiiuiii.com/illustrator/1212420504.html

以上就是今天的分享，更多相关插画资源↓

头像如何画才能简单又传神？资深插画师6大步骤经验全分享！ 关于我：优设大课堂金牌讲师，高级原画师、插画师。

阅读文章 >

我们邀请了3个优秀插画师，总结了这份商务合作流程指南 本文邀请了优设的优秀老师哔波、林不慌和香奈，为大家分享他们多年的接私单经验。

阅读文章 >