按钮 操作 用户 一、前言众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。本期将探讨这些隐藏在细微处的交互差异，从而更深入了解用户体验中设备/行为/界面的关系。更多差异分析：中西方电商网站设计有哪些差异？我总结了这3个！作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。阅读文章 > 二、五个小案例1. 输入框的清除按钮清除按钮（clear button）是用来清除输入框内容的按钮。当输入框中存在内容时，出现在输入框的末端，点击后可清空已输入内容。pc 通过键鼠操作可以快速删除，但基于触屏交互的移动端删除操作较为麻烦。因此清除按钮在移动端中更常见，特别是在登录注册、搜索框等页面。清除按钮可以快速清空内容，提高操作效率，降低输入错误时的负面影响。虽然在 web 界面中很少使用上述的清除按钮，但“快速清除内容”的需求依然存在。主要出现在多项内容同时清空的场景，例如 b 端筛选中常用的“重置/清除”功能，以及多选框中快速清空选项。2. Hover 态光标 hover（悬停）是 PC 端的常用的轻量交互操作，当光标悬停时界面元素会产生状态改变。Hover 可以为用户显示隐藏的信息（展示 tooltips/二级菜单）；或指示按钮状态，提示用户此处可点击触发事件。但是移动端的光标（手指）不会长期悬停在屏幕上，所以不会有 hover 态。而且指尖轻触即表示“点击”，因此按钮将直接从“normal”变为“pressed”状态。相比于 pc 少了“hover”作为中间状态，因此在界面设计上移动端按钮需要明确的引导性，以传递“此处可点击”的信息。对于 hover 的二级菜单，移动端需要多点击一步展开，或者 tab 切换进行快速跳转。3. 按钮 VS 手势复杂的手势输入是移动端的优势，但 PC 端需要更多按钮来承载功能。下拉刷新是移动端 feed 流常用的操作，将页面刷新和下滑手势丝滑的结合起来。在 PC 中如要实现内容区域的便捷刷新，则需要添加一个[刷新]按钮。在 banner 轮播中，pc 通常会提供准确的“上/下一页”按钮，而移动端中普遍通过滑动查看上/下一张。类似的案例还有图片放大缩小、视频音量调节。究其原因，鼠标操作一般都有精确的操作/点击对象，因此通过按钮触发事件更为普遍。手势操作可以基于整体对象进行滑动/拖拽，这是符合用户手势操作心智的交互方式。同时手势操作的准确度低，屏幕空间有限，用手势代替按钮的性价比很高。4. 长按与右键右键呼出更多菜单是 PC 端的常用操作，移动端中的对应操作则由单击长按完成。而对于针对对象的编辑菜单，在 pc 端需要选中文本对象后需要点击右键，而移动端中选中文本后会立刻弹出菜单。这由于移动端中没有像"ctrl+c""ctrl+v"一样的快捷操作，快速弹出菜单减少用户操作步骤；而且选中后若再次叠加一个长按行为，很容易误判成单击从而取消选中。5. 弹窗PC 端信息反馈的样式更加多样，包括 tooltip、toast、message、drawer 等。相比移动端有更多非模态弹窗，应用方式更灵活，用户使用过程流畅。由于屏幕面积小，移动端弹窗面积占比更大，对用户而言打断感受更强，在设计过程中需要谨慎。同时，移动端和 pc 的弹窗按钮位置也有所区别。目前移动端中强引导按钮普遍在右侧，而 win 系统中强引导按钮在左侧（MacOS 则在右侧）。三、小结交互方式差异深刻影响了 PC 和移动端界面形态，这些设计细节隐藏在日常交互行为中。虽然使用已有组件库时很容易忽略，在多端系统设计过程中依然需要注意这些差异性细节。移动端缺少 hover输入相对不便点击准确性低手势操作便捷长摁呼出菜单PC 端hover 能实现轻量级的交互输入方式高效快捷光标点击准确右键呼出菜单即使是相同的产品功能也会产生差异化的交互变体，这些变化可能是基于设备限制、程序限制或人机交互行为。在多端产品时，如果忽略了这些交互细节，除了影响产品可用性，还可能违背用户的使用习惯，导致产品体验细节的缺位。整体来看，交互界面不仅是功能的可视化载体，他还缝合了设备应用和用户行为，是产品使用流程的中枢。往前，界面/交互设计中应该兼容硬件能力，并传递准确的用户输入数据；往后，设计应该向用户传递设备的能供性，将设备能力转换成可感知的界面上的能供性，从而为用户提供完整且细致的产品体验流程。欢迎关注作者微信公众号：「ASAK设计」本篇来源：优设网原文地址：https://www.uisdc.com/pc-mobile-interaction-difference
设计规范 操作 用户 前言B 端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态，在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解，希望可以带来一些启发。本篇先谈谈设计规范制作的指导思想--设计原则，后续文章再展开讲一下常见各种组件的设计规范。一、设计规范作用设计规范作为 B 端设计中非常重要的一环，它的作用主要体现在以下三个方面：在日常工作中，当项目组收到一个新的需求时，如果已经具备了成熟的设计规范体系，其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。以下是具体工作流程：二、设计原则通过前面内容我们知道了设计规范对于产品设计意义重大，那么制定设计规范制定依据又是什么呢？这里就要引出设计原则这个话题，设计原则是设计规范的总的纲领，所有的设计规范都应当以设计原则为基准。设计原则主要包含以下内容：接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。1. 清晰清晰原则主要从视觉角度让界面信息传达合理，提高用户信息获取效率。主要包含对比，亲密，对齐，重复四个方面。① 对比：对比是指界面中为了区分信息层级，强化元素对比度，使用的很常见的一种手段，例如下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮；又比如通过对文字字号加大，字体加粗，颜色加深来与弱文案形成对比，凸显关键文字信息。② 亲密：如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。③ 对齐：在界面设计中，将元素进行对齐，既符合了用户的认知特点（我们往往倾向使知觉对象的直线延续还是直线，曲线延续还是曲线），也能引导视用户视觉流，让用户更流畅地接收信息。④ 重复：重复是指相同的元素在项目中重复引用，作用是可以有效降低用户的学习成本，同时提高这些元素之间的关联性。2. 高效高效原则体现在便捷、轻量、简化、一致几个方面，目的是通过合理的方式让产品操作更加便捷；交互体验与内容更加轻量和简化；以及产品风格保持一致。下面结合几个常见案例说明如何应用这一原则。① 合理利用拖拽--便捷、轻量：在涉及到诸如上传文件，排序，滑动输入，搭建等需求时，合理采用拖拽交互往往可以打造更加便捷用户体验。② 尽量减少不必要的跳转--便捷、轻量：用户操作过程尽量减少跳转，以实现交互减步长，从而使用户操作更高效轻量。例如能用原位操作就不考虑展开收起；能用展开收起就不用气泡...依次类推（优先级从高到低：原位 ＞ 展开收起 ＞ 气泡 ＞ 弹窗 ＞ 抽屉 ＞ 新页面）③ 放大点击热区--便捷：放大可点击按钮热区，相对于较小点击热区，具备更丝滑操作体验。④ 悬停即现--轻量：利用悬停即现，避免信息过于重复啰嗦，简化页面提高阅读体验。⑤ 折叠次要功能--简化：页面功能按钮过多时，可将次要按钮收纳到一起，点击时再展开，外面只展示高频操作或重要按钮，保证页面内容简洁。⑥ 统一样式--一致：一致性是指在不同页面中相同操作应保持一致视觉与交互样式，可有降低用户学习成本与企业开发成本。3. 友好友好原则应贯穿用户操作前，操作中以及操作后三个阶段，给予用户及时反馈与帮助。① 操作前：在用户操作前给到合适的引导与帮助，有效减少用户迷茫感。② 操作中：通过交互效果以及页面样式让用户可以清晰感知到自己当前操作。③ 操作后：利用界面中元素变化清晰直观展示当前的状态4. 可控可控主要体现在自由和导航两个方面。① 自由：自由即指用户可以自由完成一些操作，例如回退，撤销，终止等。② 导航：导航是指用户随时知晓当前所在位置，而且可以利用导航随意到达目标页面。通过本篇内容我们大概知道了制作设计规范主要方向，那么具体到每个组件上，我们该如何去设计呢？后续篇章将细分聊聊如何去设计 B 端常见组件的一些内容。部分参考资料：《B 端产品设计-Mia》《Ant Design》本篇来源：优设网原文地址：https://www.uisdc.com/design-principles-2
按钮 操作 让人 不论做什么产品，界面上几乎都少不了「确定」按钮。例如：操作提示时、进行选择时、填写表单时……完成、保存、下单……各种代表“确定某一步骤”的按钮，都可以统称为确定按钮。以前的产品设计，大量以来确定按钮，但是现在的产品设计，确定按钮用得越来越少了。倒不是因为不需要确定操作了，而是除了「确定按钮」之外，设计师们发现了更好的方式。往期细节分析回顾：淘宝网页设计摆烂？淘宝京东网页细节体验分析最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。阅读文章 > 一、能自动「确定」，就不需要按钮有一句话说：最好的交互就是没有交互同样，最好的「确定」按钮，其实是没有按钮。例如，手机锁屏时，输入密码后不需要确定按钮就可以直接验证进入。能这么做是因为手机锁屏密码固定六位数，而电脑的锁屏密码通常不确定，所以还是需要一个「确定」按钮。这说明，如果能够预料到用户的操作数量，且操作很简单的话，是完全可以考虑去掉「确定」按钮的。二、不是什么时候，都适合写「确定」通常「确定」字面上可以表示：“我知道了/就这样”。如果是提示或者是简单的操作，则比较适合使用「确定」文案。三、把确定了什么写出来如果是发送、登录、购买、支付……这类目的性很强的操作，与其写「确定」还不如直接把操作目的写出来。不然，如果只写「确定」，让人容易犯迷糊。四、进行了输入/修改，得用「保存」输入操作后，用户最怕丢失信息没有保存，回头得重新写。如果只是简单的表单，例如设置用户名什么的，重来一次倒也无所谓。但如果是填写项达到三、四条甚至更多，看不到「保存」两个字难免担心数据丢失。如果按钮上写清楚「保存」两个字，也让人安心一些。如果是自动保存，也需要把相应反馈展示出来。五、只是结束流程而非操作，可以用「完成」其实「完成」按钮大多可以用「确定」替代。但是「完成」的特别之处，是表达了“结束流程”的概念。所以，如果想让用户感觉按下按钮之后不会进行任何其它操作，而仅仅只是结束流程而已，则很时候使用「完成」。六、工具类产品，可以用「XX 并 XX」很多工具类产品，为了操作效率会把两个操作并列起来。例如我现在打在所用的公众号编辑器，就有一个「保存并群发」的按钮：这样做挺好的，工具类产品效率最重要美观是其次。两个经常要连贯执行的操作，合为一个按钮能够减少没必要的点击。而一旦把操作合并了，肯定要写清楚比较好。否则如果没说明白，既让人难以理解，而且点起来又不放心，导致学习成本大大增加。有一个问题是，如果文字太长了，可以考虑简化按钮文案并在旁边加点提示。工具类产品效率最重要美观是其次，因为如果不写清楚很难让人理解。以上是我自己做 B/C 端各类产品过程中，对「确定」按钮的思考总结。如果大家有其它的见解或者补充，欢迎评论。欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/disappearing-ok-button
案例 用户 操作 时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速，很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法，以及其对应的优秀案例：分割屏幕的布局更容易再续操作忽略非重要操作希望会为你带来更多的设计灵感。往期回顾：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 一、分割屏幕的布局通过将屏幕的布局进行分割处理，可同时呈现多项内容，让用户自由选择任务主次，同时处理多项任务。分屏设计很常见，但其中的体验细节却依旧值得研究和优化。案例 1 微信在 Pad 端的分屏布局考虑得很周到，看微信视频时支持分屏功能，还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸，体验顺畅，看视频、接微信两不误：案例 2 bilibili 在移动端的视频通过小窗模式可以不间断播放，不仅可以在 App 内或外呈现小窗模式，正在播的视频，在被临时打断退出视频后，还可以用音频的方式继续播放：案例 3 微信的新功能，在你阅读文章时依旧能看到朋友发来的微信消息，可以直接在当前页面回复消息，避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”，一会儿再做处理：案例 4 微信视频号改版后，点击视频号下方的博主名称和头像，下方弹窗会弹出该博主的主页和其他视频，而当前正在播放的视频会渐渐呈现小屏播放，视频内容不会被遮挡，既不影响观看，也不影响用户探索该博主的其他视频内容：案例 5 在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频，既可以听内容，也不影响你继续浏览订阅号的其他内容：二、更容易再续操作产品可以让操作更容易被用户管理和掌控，在被打断后很容易被用户重新再续，给用户足够的掌控感。在一些特殊情况下，几件事可以交替、穿插地处理，同时进行。案例 1 钉钉的移动端浮窗功能，向右滑动退出正在操作的页面时，就会出现添加浮窗区域，用于收录未做完的操作。同时显示出已添加浮窗的内容数量，最多添加 5 个：案例 2 微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容，在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章，可以更合理地掌控阅读节奏：案例 3 微信读书 App 会在你跳读到其他章节时，在页面下方显示“返回原进度”的按钮，方便你在跳读后回来继续阅读：案例 4 网易 163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件，页面上方会增加一个类似浏览器标签页的 Tab，你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时，同时又收到了其他的新邮件，去查看新邮件之后，可以通过 Tab 直接回到邮件编辑页面，继续编写刚才的邮件：案例 5 使用钉钉发起会议邀请，如果中途退出，系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示，帮你续写内容：三、忽略非重要操作用户可以选择忽略或隐藏并不重要的、正在进程中的任务，将更多的时间用在其他事情而非无法控制的等待上。案例 1 iOS 系统中，当你在不同 App 之间传递文件时，如果文件过大，弹窗的“取消”按钮会在几秒钟之后变成“隐藏”，用户点击后可以继续做其他操作，并不妨碍后台的文件传输。案例 2 微信在接收超大文件时，增加了“发送给朋友”的选项，你不必等待文件在自己这边下载完成后再发送，可以直接发送源文件给对方，同时下载：案例 3 微信拨打语音的界面，在等待好友接听的过程中，你可以看到对方朋友圈的动态，缓解无聊的等待，也为即将进行的语音聊天提供了话题：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/13-product-design-details-2
按钮 操作 用户 提到按钮，大部分人印象就是文字加个背景框，并没有太多需要设计的空间。但是作为 B 端设计师，相信很多同学在工作过程中都产生过以下问题：按钮作为最基本的交互单位之一，几乎在每个页面中我们都会使用到。由于不同行业下业务场景的复杂性，很多时候很难直接参照其他产品的按钮进行复用，也无法用一套布置方案复用所有场景，所以作为 B 端设计师需要对按钮控件具备足够的认知，理解其背后的使用逻辑和规范，才能满足多层级跨场景的设计需要。本文结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对各位 B 端设计师同学的日常工作和学习有所帮助。更多按钮设计干货：万字干货！3个维度帮你有理有据做好CTA按钮设计任何设计师都曾经与 CTA 按钮打过交道。阅读文章 > 一、按钮的发展历史在详细介绍按钮前，我们先简单了解下按钮的发展历史。按钮的概念起初是源自现实物理世界的实体按钮，在日常生活中如电源开关、计算器、电话等都是通过实体按钮进行控制，由于其简单直观易操作的特性，即使如今各种电子产品都逐渐发展为触控屏操作，实体按钮依旧被保留了下来。当数字屏诞生后，人机交互设计开始走向数字屏幕后，为方便用户理解，在很长一段时间内设计师都是采用拟物风按钮来暗示用户可执行的操作。伴随着客户端设备升级和开发方式的变更，至 2013 年 Apple 在 iOS7 上第一次采用了扁平化设计，至此按钮样式开始往扁平化发展。随后历经了多年发展，按钮的样式开始层出不穷，但是无论样式如何变更，其背后的体验交互逻辑依旧是物理世界按钮的映射。二、什么是 B 端中的按钮1. 按钮的定义在 B 端设计中什么样的组件可以定义为按钮？我们先来看看国内外设计系统中对按钮组件的定义：总结来说，按钮可以理解为用于承载即时操作和命令的组件。由于 B 端产品业务逻辑复杂、页面流程多，相较于传统意义上的按钮，B 端中的按钮被设定为可复用、规范化的组件，通过对组件元素进行拆解、归纳、重组，将其划分为特定类型的组件方便管理和使用。按钮相较于输入框、选择器、单选框等控件无法进行数据输入，相较于标签、文字提示等控件也无法进行信息浏览，其关键在于「即时性」和「承载操作」，既可单独完成操作，也可与其他控件联动，作为触发操作的行动点。2. 容易与按钮混淆的控件① 标签 Tag虽然同样翻译为标签，但是此处指的是 Tag 标签，而非 Tabs 标签页。标签在样式上与按钮几乎相同，且同样可以添加图标标识和触发操作。两者的区别在于，标签侧重于信息的选择、筛选和分类，而按钮则只是单纯用于触发即时操作，因此很多时候标签会设置不同颜色样式以便信息区分。② 开关 Switch和其他录入控件相比，开关 Switch 最显著的特点便是和按钮一样触发后立即生效，因此很多初级设计师很容易将其与按钮归为一类。其区别是，开关承载的是两种互斥状态的切换，如打开/关闭、显示/隐藏、启用/禁用等，此外由于在视觉上符合用户对现实世界中开关的认知，所以可以直接展示当前项的状态。③ 单选/多选框 Radio/Checkbox单选框和多选框一般用于状态标记，但是无法直接触发操作，所以通常会和按钮配合进行使用。最常见的搭配场景便是在登录页，用户勾选「记住密码」或「自动登录」后标记其状态，再点击按钮进行登录。三、按钮的原子拆解相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。内容层：图标和文字自由组合。内容层作为操作引导的核心必须存在。容器层：控制颜色、圆角、描边、投影等样式，有些设计系统下还会加上交互动效，提升用户体验感。四、如何区分按钮类型在查阅大厂的设计规范时，相信以下按钮名称大家应该都不陌生：主按钮、悬浮按钮、图标按钮、危险按钮、下拉按钮、文字按钮、CTA 按钮……很多新手设计师会产生疑惑：为什么要划分如此多的按钮类型？这些按钮间的区别是什么？为什么各家设计系统下按钮分类都不相同，我应该选择哪种作为参考？为了区分好按钮类型，关键要先明确类目划分的边界。这里为了方便大家学习，我从按钮的强调程度和使用场景 2 个维度将按钮进行划分，基本涵盖了常见的按钮类型：1. 依据强调程度划分在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为 3 个层级：高度强调：承载页面上最重要和突出的行动点。为了保证视觉层级最高，通常会采用大面积主色填充或投影增加空间层级的方式进行区分，例如主按钮和 FAB 按钮（悬浮按钮）中度强调：承载仅次于最重要行动点的常规操作。为了避免太过吸引用户注意，通常采用中性色进行描边或填充，也被称之为次按钮。轻度强调：对页面中其他操作补充或可选操作。为了确保视觉上不凸显，通常不会填充背景色，常见于文字按钮和图标按钮。在轻度强调中还可以划分为弱强调（内容填充主色）和不强调（内容填充中性色），由于文字按钮填充中性色难以和正常文本进行区分，所以一般内容填充中性色只会用在图标上。由此我们得到了依据强调程度划分的几个常见按钮类型：主按钮 > 次按钮 > 文字按钮 > 图标按钮。接下来针对每种类型我们来展开说明。（FAB 按钮在 B 端页面中属于特定场景下使用的按钮，不具有通用性，故划分到使用场景中进行讨论）① 主按钮 Primary主按钮代表着页面中的核心操作项，是视觉权重最高的按钮，常用于突出提交、完成、确定等操作。为吸引用户注意，常使用品牌色填充背景引导用户视觉焦点。关于主按钮的使用需要遵循以下 2 个原则：在一个焦点任务中最多只使用一个主按钮。同时存在多个主按钮会让用户失去操作焦点，造成信息干扰。主按钮并非必须使用。如果没有必须突出的操作项，强行添加主按钮反而会打破按钮间的层级关系。② 次按钮 Secondary次按钮是使用最频繁的按钮，当在页面中不确定选择哪种按钮时，使用它往往是最安全的。次按钮通常使用中性色，其样式可以分为描边型和填充型：描边型使用最为广泛，是次按钮首选的样式，而填充型相对特殊，在不同设计系体下会根据业务场景选择是否使用。关于填充型次按钮相较于描边型，早年在 B 端产品中很少会见到使用填充型样式作为次按钮使用的，但是可以发现近几年国内外设计系统如 Arco Design、Marterial 等，开始陆续将填充型次按钮纳入到按钮组件库中。填充型次按钮更多的使用场景是在移动端上，其视觉强调程度弱于主按钮但又高于描边型，可以更好的表达组件的整体性和吸引用户注意。伴随着硬件设备的发展，桌面端和移动端的操作边界开始逐渐模糊，各产品开始追求全生态环境下的统一性。为降低用户在设备切换时的体验隔阂，一套设计系统需要能同时满足多端设备的兼容，而填充型样式更符合其场景需求。最典型的便是 iPadOS 连接鼠标操作时，悬停态下填充型按钮明显比描边型更容易被识别。如何选择次按钮的样式基于以上考虑，在工作中选择次按钮样式时可以参考以下建议：如果当前项目上已经有在使用的开源库，尽量以原有组件库为主。除非自身产品有设备互通的场景或需要同一套设计语言兼顾不同端，否则增加多余的次按钮样式只会更加复杂且影响用户的体验一致性。如果是项目是 0～1 搭建组件库，根据自身业务场景选择其中一种样式使用即可。一般桌面端产品使用描边型，如果产品生态中有移动端，为了保持设计语言的统一更建议采用填充型。此外还需考虑前端修改组件库样式时的开发成本。③ 文字按钮 Text文字按钮适合承载如取消、还原等无需特意强调的操作，通常使用在表格操作栏、表单页等场景。为了和普通文本做区分，提示当前内容可交互，需要加上链接色（一般是蓝色）提醒用户。文字按钮和链接的区别文字按钮和链接（Link）的默认样式一致，在搭建组件库时很容易发生混淆。其区别在于按钮用于发起动作，触发相应的业务逻辑，而链接的作用是导航，作为页面跳转或锚点定位的触点。为了更好地区分，可以在交互样式上进行处理：文字按钮：指针悬停时容器添加背景色。链接：指针悬停时文本添加下划线。④ 图标按钮 Icon图标按钮的视觉层级最弱，但是由于占据空间小，常用于同时展示多个操作项时使用。由于缺少文字解释，单纯的图标可能会造成用户的理解偏差，故建议在指针悬停时加上 Tooltip 的文字提示进行辅助说明，对于特定操作还可加上快捷键指引。2. 依据使用场景划分在依据强调程度划分的基础上，还有部分按钮只应用于在特定的业务场景中，所以各设计系统下的按钮分类会有所不同。以下按钮的应用场景较为频繁，故被单独划分为一类方便交流和管理。① 功能按钮 Function功能按钮顺应用户心智，采用绿色、橙黄色、红色代表了成功、警告、危险三种功能按钮，用户无需浏览按钮内容，直接通过色彩即可识别当前操作可能导致的后果。由于功能按钮的视觉权重往往比主按钮还高，在页面中需谨慎使用，避免对其他页面信息造成干扰。② 虚线按钮 Dashed相较于普通的描边型按钮，虚线按钮只承载传输文件或新增配置项等操作，为方便用户感知，将其描边设计为虚线样式。上传 Upload由于虚线按钮只能支持单纯的触发操作，在很多上传情景下不能满足其业务需求，故逐渐衍生出单独的上传组件，相较于虚线按钮：上传组件支持批量上传通常有更大的交互区域且允许支持拖拽上传，以降低用户的操作门槛搭配展示文件列表，用于对已上传文件进行预览、重新上传、删除等操作③ 幽灵按钮 Ghost顾名思义，幽灵按钮不具备实体性，一般底色为透明，其按钮的内容反色，通常使用在复杂或颜色较深的背景中，例如 banner 图、官网首图等，避免按钮突兀地破坏背景的整体性。由于幽灵按钮使用的场景不固定，因此无须严格遵循现有规范，只要满足其特定场景下的业务需求即可。④ 行为召唤按钮 CTACTA，即“Call to Action”的缩写，意思是行为召唤。该词原本是营销领域的术语，后来逐渐引用至互联网领域中，即目的在于给用户一个明确的反馈：当前事件的操作流程已经完成或即将发起一个新的流程。CTA 按钮之所以会被单独归类，因为当按钮作为吸引用户采取点击行为的载体时，时常在事件操作的最后一步出现，作为产品的关键触点之一，可以有效提高页面或屏幕的转化。也因此当页面中存在多个按钮时，CTA 按钮的优先级往往是最高的，可以通过色彩对比、元素点缀等方式引导用户点击。⑤ 悬浮按钮 FAB悬浮按钮 FAB，即 Floating Action Buttons 的缩写，其特点是会始终悬浮在页面的固定位置，不会随着页面滚动而消失。在 B 端产品中，FAB 按钮更多的使用场景是承载全局性的附属功能，常见操作包括咨询、客服、快捷键、点赞、收藏、分享、回到顶部等。在设计 FAB 按钮时需注意以下要点：不能干扰用户在当前页的正常操作和浏览。尽量放置在页面的固定位置，当操作数过多时可将其他操作下钻至更多按钮中。承载操作须是当前页的全局操作，无须与其他页面元素发生联动即可触发。如不能承载保存、删除、清空等操作。⑥ 下拉菜单 Dropdown按钮组不是单独的按钮类目，而是按钮组的集合体，当多个同级操作项同时出现，但不想占有太多页面空间时使用。通常按钮组会将最关键的主操作露出，其他操作收入更多操作项中。严格来说 下拉菜单 Dropdown 并不属于按钮类型，但因为其使用场景较为频繁且时常用来承载多个按钮操作，故在此处作为单独类型进行讲解。下拉菜单作为操作命令集合使用时，可以简单理解成按钮组：将多个操作按钮收纳到同一菜单下。在使用时有两点需要额外注意：和选择器 Select 的区别选择器 Select 属于录入控件，在基本形态上和 下拉菜单 Dropdown 高度相似，都是通过下拉浮层来容纳更多信息，在实际应用时经常容易被混淆。要区分两种组件，最关键是理解其使用场景：下拉菜单：当页面上的操作命令过多时，用此组件可以收纳操作元素。核心是菜单导航和命令集合选择器：用于一组选项中选择一个或多个数值。核心表单填写和数据筛选样式与操作项的关系当下拉菜单用来承载操作项时，各操作项关联性也会引起下拉菜单样式上的区别，这里用实际的案例辅助大家理解：乍一看似乎都是差不多的样式，在工作中很多设计师也是随机选择其中一种进行使用，但是作为设计师，就是应该从细节之处见真章，每一处设计都应有理有据。简单来说，以上三种组合按钮中的操作关联性是逐渐疏远的，这一点从按钮样式上也可以看出。新建一：合并同类项。突出新建操作本身，更多操作项是新增的数据类型进行区分，减少重复文案的出现。新建二：操作延展。强调的是数据导入的形式，提供更多操作渠道供用户选择。新建三：信息收纳。各操作项之间并没有关联性，只是缓解空间压力或突出使用最频繁的操作。五、按钮的交互状态在了解了以上按钮类型，我们来看看按钮的交互状态。不管哪种按钮类型都会存在相应的交互状态，设计师在交付设计稿时需要将不同状态下的按钮样式进行标注，方便前端开发。在刚开始接触按钮时也曾被一堆状态给乱花了眼，光是理解不同状态的区别已经头大。其实回头来看，开始只要记住 4 种最关键的按钮状态便可满足大部分的使用场景，即按钮的正常态、悬停态、点击态和禁用态。在日常工作中，没有设置聚焦态和加载态并不会影响用户的正常使用，但是加上后可提升用户的产品使用体验，大家可以根据开发成本和实际的业务情况考虑是否加上。1. 正常 Normal/Default按钮的初始状态，即默认情况下的基础样式，此处不多做介绍。2. 悬停 Hover当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别。悬停态通常还会配合鼠标指针变化辅助用户理解，在前端 CSS 样式表中常用 cursor:pointer，指针变化为伸出食指的手。由于悬停态是由鼠标指针移动引起，故只有设计桌面端产品时需要考虑到，而在移动设备上通过手指操作故按钮不存在悬停的状态。（在 iPadOS 更新至 13.4 版本后开始支持连接键鼠操作，但是在日常工作中很少会出现，此处不予以讨论）3. 激活/点击 Active/Press鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。4. 禁用 Disabled按钮无法操作被锁定时的状态。该状态是为避免用户误操作而设立，如在登录页未完成信息填写时将提交按钮禁用，提示用户无法点击，只有填写完必填字段后才可以点击提交。在鼠标悬停时指针变化为禁用状态，在前端 CSS 样式表中常用 cursor: not-allowed，通常会配合 tooltip 文字解释说明行动点不可用的原因，避免用户疑惑。值得一提的是，禁用按钮并非只有置灰一种样式，只降低色彩饱和度和明度也是禁用按钮的表现手法之一，且相较于置灰更方便用户识别主次按钮。以上是针对不同按钮状态的说明，这里并没有针对不同状态的样式进行详细说明，因为不同的设计体系下可能会采用不同状态样式进行展示。为方便对比，这里将常见组件库中的按钮状态进行了整理：可以发现，除了 TDesign 中描边按钮激活态下增加了中性色填充外，基本按钮状态都是保持着一致的梯度变化。这里以正常态的按钮样式为基准，将悬停和激活状态下的色彩变化进行整理：总结来看，在不同色彩的按钮上按钮状态会按照不同梯度分布：主色（品牌色）按钮色彩梯度从浅到深：激活 〉正常 〉悬停中性色按钮色彩梯度从浅到深：激活 〉悬停 〉正常之所以出现这种情况，主要是因为在搭建产品色彩体系时，品牌色一般会采用色板中间色作为主色（通常是第六个颜色），故不管往浅往深都有更多灵活调整的空间。而背景使用的中性色为了避免干扰视觉层级，通常选择色彩较浅的中性色，因此没有再往下延伸色彩梯度的空间。以上介绍的四种状态建议采用色彩组件库中色卡进行配色，上图标注了不同按钮状态的配色选择，下面是 AntD 和 ArcoD 的色板生成工具地址（关于产品取色未来会专门出一期文章进行讲解）。ArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具：https://ant.design/docs/spec/colors-cn#色板生成工具5. 聚焦 Focus该状态用于指示电脑光标的位置。在有些场景下不操控鼠标，只通过键盘方向或 Tab 切换选择页面元素进行操作，反而是更高效的操作方式。常见的聚焦态按钮样式为增加描边，有的设计系统下会采用和悬停态一样的样式。键盘操控快捷键推荐：「Tab」前进「Shift + Tab」后移「Enter」激活6. 加载 Loading表明用户操作后系统正在处理的状态。由于服务器响应或网络延迟等问题，有时候用户操作完需要间隔一段时间才能响应，加载态可缓解用户的焦虑情绪，避免用户由于未收到反馈而反复操作的情况。六、按钮设计需考虑的因素接下来便到了本文的最关键部分，也是按钮设计中出现最频繁和令人头痛的问题：我的按钮究竟应该放在哪里？在此之前先要理解按钮设计的目标是引导用户采取我们希望用户采取的行动。这就需要尽量帮助用户快速找到需要操作的按钮并了解执行该操作的结果，同时尽可能避免误操作。基于以上目标，我们从用户实际操作路径的视角来梳理按钮设计时应考虑的问题：按钮区在页面中的什么位置——空间位置有多个按钮时采用怎样的阅读顺序更合适——排列顺序按钮采用怎样的样式更合适——视觉样式1. 按钮区的空间位置当用户进入页面时，除了浏览当前页的信息内容还需要寻找接下来可执行操作的可交互区域，即按钮区。除了单纯通过视觉差异区分按钮和页面其他元素外，还需考虑到用户在信息浏览过程中的视觉动线。结合古腾堡法则和格式塔原理，给出以下设计建议：① 放置在用户的浏览路径中在没有其他视觉效果引导时，F 型和 Z 型网页浏览模式可以作为用户视觉动线的基础指导，关于以上 2 种浏览模式网上有太多相关介绍，此处就不再赘述。② 尽可能靠近其所控制或联动的对象将关联性强的信息放在一起，可以降低阅读成本，提高用户的感知效率。2. 多按钮的排列顺序① 保持用户的操作惯性这里先讨论一下开头提到的问题：主操作项放在左边合适还是右边合适？我们先来看看一些案例：可以发现，即使是业内顶尖的互联网公司也并没有遵从同一套确定方案。对于新用户而言，确定按钮的位置对操作时间和错误率影响并没有太大差别。并由此得出更关键的结论：不要轻易改变当前产品中用户已经习惯的按钮位置。在此基础上对于操作项不固定的页面，给大家整理了以下建议：② 同类操作项按组分类最典型的案例便是编辑器类产品的操作项，将同类操作区整理分组，方便用户查找。③ 阅读顺序符合操作预期此处的阅读顺序并非特指从左往右、从上往下，而是依据用户当前视觉动线，优先满足用户预期或操作可能性最大的按钮需要最先被用户发现。考虑到人体工程学操作习惯和操作后果的影响，还需注意一些特定的场景：④ 流程操作遵循方向认知习惯流程属性的按钮如上一步、返回、后退等操作用户习惯在左边，而下一步、前进、更多等操作在右边。⑤ 破坏性操作提升操作门槛如删除或清空按钮，尽可能放置在远离主按钮的位置，甚至可以下钻至更多按钮中，避免误触。3. 按钮的视觉样式在文章开始基于强调程度划分按钮类型时，按钮的视觉样式便是基于其强调程度划分的，页面中越是需要强调的按钮其视觉权重越高。前文中只划分了主按钮、次按钮、文字按钮、图标按钮这 4 种基本类型，此外还可以通过文本粗细、内容量等方式进一步细分。七、关于按钮的其他问题1. 按钮的尺寸按钮的尺寸优先体现在其高度上，而宽度一般根据内容区大小自动适配。通常会将按钮分为大、中、小这三种规格，以满足不同场景下的使用需求。高度大尺寸：通常使用在企业官网、账号登录、导航菜单等场景中。一般高度设置为 40～64px。中尺寸：按钮的默认尺寸，适用在 B 端页面的大部分场景。一般高度设置为 28～40px。小尺寸：常用于气泡弹窗等小型控件中。一般高度设置为 12～28px。宽度关于按钮宽度需要注意的是，由于按钮内容的不固定，同规格按钮可能因为内容量差异引起视觉上的层级误判。故为了减少按钮错综不齐的情况，建议设置按钮最小宽度的界限，一般为 4 个文字+左右内边距。2. 按钮的文案相较于其他方面，似乎大家对产品文案总是保持着“点到为止”的态度，但是并不意味着文案不重要，错误的文案会让用户产生疑惑，严重影响用户体验。相反好的按钮文字甚至可以做到即使不去阅读上下文，单凭按钮文案即可做出正确的判断。在一些关键节点的 CTA 按钮，文案的优化可以带来转化率大幅度的提升。因此关注文案细节也是设计师平时需要考虑的问题。优秀的按钮文案包含以下几个要点：① 内容简洁，删除赘词按钮区域寸土寸金，每一个字都要有其存在的意义，如果删除也不影响信息表达即没必要存在。② 表达清晰，避免产生歧义文字表达清晰，避免使用用户难以理解的专业术语。③ 规范用词，不要出现错别字常见的“登陆&登录”、“收获&收货”、“即时和及时”都是容易打错的词。下方给大家整理了 常见易错的按钮文案表，建议保存收藏。④ 一致的语法表达如统一采用动宾结构：修改价格、提交工单、查看更多等。⑤ 适当的情感化表达结合自身品牌特性，在按钮中融入适当的情感化文案，也是塑造品牌心智的触点之一。3. 按钮的圆角当前市面上主流的互联网产品大多都采用了圆角设计，因为圆角矩形相较于直角更具安全感和亲和力、在相似内容中识别度更高，且圆角对信息的聚焦性更强。同样 B 端设计中通常也会在按钮中加入圆角，方便用户更高效的辨别和获取信息，但是需要注意的是圆角并非越大越好，过大的圆角会导致按钮操作热区的缩窄，更不易被点击触发。如在移动端产品上都是采用手指按压，而桌面端采用鼠标指针单击，相较之下后者对点击按钮的触发精度要求更高，也因此全圆角按钮（也被称为胶囊按钮）更适合在移动端产品上使用。此外按钮的圆角设置还需考虑到产品整体的视觉一致性，在不同场景下都要保证统一的感官体验，如在大尺寸的按钮上圆角的曲率也应设置更大。8000字干货！超全面的 Web 端按钮设计指南按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。阅读文章 > 参考链接https://mp.weixin.qq.com/s/81Xbb2zEHqJS2bABY32ztQhttps://www.zcool.com.cn/article/ZMTI3MzkzMg==.htmlhttps://www.uisdc.com/button-applicationhttps://www.zcool.com.cn/article/ZMTI2MzUwMA==.htmlhttps://www.yuque.com/yovar/bq79sy/ufeuexhttps://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/https://www.woshipm.com/pd/3104897.html本篇来源：优设网原文地址：https://www.uisdc.com/button-design-7
用户 产品 操作 在如今用户为王的时代，用户体验成为一种新的品牌竞争力。随着技术进步和体验意识的普及，习惯了 C 端产品流畅愉悦的体验，用户对 B 端产品体验的期望也越来越高。B 端 C 化的概念也由此产生，但 B、C 端有着本质区别，C 端的设计思维无法完全复用到 B 端，那是否可以基于 B 端产品特征，融合 C 端体验设计思维，即“B+C”来帮助提升 B 端产品体验呢？本文聚焦在探索如何通过“B+C”的设计思维，提升 B 端产品体验。B端和C端的区别看这篇：从3个方面，详细分析B端和C端的差异化众所周知，无论是在用户群体、产品定位，还是使用场景等方面，B 端产品与 C 端产品都有比较明显的差异。阅读文章 > 一、B、C 端产品定义与差异我们先简单了解下 B、C 端产品各自的定义。B、C 端其实是以使用对象的类型，来代指的产品类型，C 指个人消费者 (Customer) ，B 指组织 (Business) ，这个组织可以是个人、公司、政府或机构，因此 B 端模式也是多样的，除了 B2B，还有 B2C、B2G 等。C 端产品帮助个人解决生活场景中的需求痛点，提供人们消费的物质、信息和情感。常见产品类型有工具类、内容类、社交类、游戏类等，如滴滴、知乎、微信、王者荣耀等。B 端产品帮助组织实现其商业目的，提供商业的工具、方法和服务。常见的产品类型有：CRM 客户关系管理、ERP 企业资源计划、OA 办公等，如企业微信、金蝶、钉钉等。下面我将从产品设计的角度，分析 B、C 端的差异化。1. 设计原则的差异C 端产品主要通过流量转化获得收益，因此人的注意力和使用频率是关键，所以设计原则为“UCD”（User Center Design）以用户为中心的设计。B 端产品主要是为了能高效解决行业业务问题而存在的，所以其设计原则是以效率为中心。2. 功能流程的差异C 端产品主打一个满足用户核心痛点的功能，通过这个核心功能明确产品的特性和定位，附加 N 个增值功能，提高用户粘性，加之创新和趣味性，保持与竞品之间的差异化。B 端产品功能重全面，为的是能满足组织的各种业务需求，组织的业务逻辑通常就是产品逻辑，功能流程也由业务场景转化而来。3. 交互逻辑的差异C 端产品是单线程操作，完成一项任务后才能进行另一项。碎片化的使用场景和广泛的用户群体，使得 C 端产品必须信息简洁、容易上手、操作路径短，否则将会导致用户流失影响收益。B 端产品是多线程操作，支持多个任务并行。交互以优化业务流程，提升用户操作效率为主，关注信息架构，清晰的信息架构能帮助用户在呈网状的功能和交织的流程中，定位到自己所在功能页面，找到所需的有效信息。4. 视觉表现的差异C 端产品视觉设计风格多样，如赛博朋克、孟菲斯、3D、酸性设计等，注重情感化表达和氛围的渲染，加上短视频和直播，让用户沉浸其中。B 端产品视觉服务于功能和信息的传递，视觉元素较为简洁，常用色彩对比的形式，建立内容边界和视觉层次。二、如何用“B+C”思维提升 B 端产品体验无论是在设计原则、功能流程、交互和视觉方面，B 端产品与 C 端产品都有比较明显的差异。基于以上差异，结合 B 端产品特征和 C 端体验设计思维，我们可以从以下三个方面提升 B 端体验：① 视觉—降低认知负荷B 端产品讲究屏效，看得多通常比看的美重要，信息密度高，则屏效高，却也相应的会增加用户的认知负荷，因此我们需要为用户认知减负。② 交互—以用户效率为中心从用户的行为和感知出发，本着以用户为中心的原则提升操作效率。③ 情感—关注情绪感受关注体验过程的“峰”与“终”，提升用户整体的体验感受。下面我将结合实际工作案例，讲述如何用“B+C”的设计思维，提升 B 端产品体验。「案例分享」Speedshop Omnichannel（下面简称为 Omnichannel）是款针对国内及东南亚中小商家，统一管理多渠道商品、订单、交易、会员的 ERP 系统。目前共支持 Lazada、Shopee、Tokopedia、抖音等 7 个渠道，最多可管理 100 个线上店，集订单管理、产品管理、会员管理、聊天、导入导出等功能为一体，服务超 40,000 商家。1. 视觉 — 降低认知负荷对信息的识别和处理是认知负荷的主要来源，在视觉层，我们主要解决的是信息识别带来的负荷，信息识别就是用户看到内容并选择的过程，B 端产品有信息量大，选择多的特点，降低认知负荷也将围绕这两点进行。① 优化信息展示符合用户诉求B 端产品根据用户规模的大小，可以分为大 B (一定规模的中大型企业) 和小 B (小微企业、个人创业)，两者对信息的关注点和诉求不同。表格是 B 端产品最常用的信息展现形式，且能将信息有序、高效、直观的传达给用户，避免信息堆砌带来的认知负荷。比如同样是订单页，大 B 用户的订单数据量庞大，且订单通常是自动流转的，无需手工操作，所以针对大 B 用户，表格信息展示有两个侧重点，一是增加信息密度，二是帮助用户能够快速精准过滤信息。小 B 用户的订单数据量相对较小，且以手工处理为主，所以在展示订单时，可以将关键信息整合，通过将信息进行分层、分组的展示形式，降低单页面信息的复杂度，还可以通过各模块之间字体大小、颜色、图标、间距等手段将信息层次区分开。丰富信息展示维度还可以通过图形化、可视化和视频的形式，丰富信息的内容维度，化抽象为具象，让信息能更高效的传达。在 Omnichannel 中，用户需要完成新手配置后才能使用产品，进入首页看到的是任务型的引导，通过图形辅助任务说明，丰富画面的同时还能增加产品的亲和力。B 端产品由于业务的复杂性和技术的局限性，通常操作没有那么灵活，需要遵守一定的使用规则，传统的做法会通过文字说明的方式传达给用户，面对一长段的规则说明，读几遍还不一定能理解。比如在导入产品时，规则内容多且逻辑复杂，可以将内容可视化，使其易于传达和理解。视频比文字的画面感更丰富，传播的内容也更加具体，在帮助中心，图文的基础上增加视频，帮助用户更高效的获取帮助信息。② 提供个性化配置B 端产品通常包含多种用户角色，每个角色的需求关注点不同，为了满足各角色的需求，单页面信息往往会出现超负荷的情况。我们可以借鉴 C 端的个性化，对于非业务性的功能，允许用户根据自己的需求和工作习惯进行自定义。比如下图，在列表页，我们为用户提供了自定义筛选条件和表格字段的设置。③ 提供有效决策信息由于业务复杂，保障功能的全面，带来的结果通常是操作和选项较多，如果没有任何指引，B 端产品的用户通常无法做出合适的选择。比如下图的添加商品，根据不同的使用场景，产品为用户提供了三种添加商品的方式：只有三个选择，看似没有任何操作难度，但用户面对未知功能时，通常会根据自己过往的工作经验，选择熟悉的功能，这样一来，可能会误增了工作量，因此在设计上，要提供辅助介绍说明，帮助用户决策。我们在此基础上，为第一次使用该功能的用户又做了优化，除了消息提示框，还通过标签强化视觉重点，推荐最适合新用户的选择，添加商品的文案也改的更通俗易懂。2. 交互 — 以用户效率为中心① 提升用户行为效率无论 B 端还是 C 端产品，都有一个共同的体验目标：提升操作效率，高效率意味着用户通过更少的操作，更少的时间完成任务，实现降低成本的目标。在 C 端产品中，常见的提升效率的方式有：1、根据用户行为的流程分析，推荐相应功能；2、聚合用户行为，缩短操作路径；3、转移用户操作成本，让产品承担更多的用户引导、行为判断和行为记忆。我们可以从以上几点切入优化 B 端操作效率。引导用户操作在 C 端产品中，经常会有根据用户的操作行为，产品给出相应的推荐操作，如截屏后，在用微信发信息时，系统会提示是否要发送截图，这种在操作过程中增加相关功能的曝光或引导，提高用户操作效率的同时也不影响流程的顺畅进行。下图是商品管理页，用户首次进入时，可以根据用户触发的操作推荐相关的帮助引导。手动创建商品时，需要完善很多商品信息，可以为经常出错的内容预设提示，先发的避免用户出现错误。在收起/展开菜单栏时，提示快捷键功能。优化任务路径B 端产品中通常会有一个任务关联一些子任务，如果用户在子任务中遇到困难，往往会造成整个任务效率的降低甚至任务中断。比如在手动创建商品的流程中，需要将商品信息推送到渠道线上店才算创建成功，所以在创建商品前，需要完成渠道线上店的创建。针对这种关键子任务，我们可以尝试并行任务，在选择线上店时，增加创建线上店的入口，将任务连贯起来。还可以通过操作的合并，比如保存和添加同步进行，提升整体的任务效率。② 弱化低效感知好的产品体验，不止强调功能，还会在意体验中的感受，设计也可以左右用户感知产品效率的快与慢。等待时间可感知用户对等待的耐受度是有限的，等待时间在 2s 内是相对愉悦的，在时间不可控或时间较长的情况下，我们应尽可能缩短用户的感知时间。比如在下图中，用户完成新手配置后，产品有个加载的过程，通过加载动画和加载步骤的分解，告知用户系统在运行中，缩短感知时间的同时消除用户的负面情绪。容错性设计在产品使用过程中，经常会出现因用户“犯错”而导致的任务中断或失败，这里的“犯错”，通常是因为用户操作偏离产品的使用要求，但这并不是用户的错，人不是精密的仪器，好的体验应该包含这部分“错误”。比如录入数据时，应给予实时的提醒，让用户可以及时更正，而不是等到提交时才抛出错误提示，还有比如在数字输入框中误输入其他字符时，自动帮用户清除等。在涉及对用户影响较大、重要且不可挽回的操作时，给出提示。3. 情感 — 关注情绪感受在整段体验感受中，情绪最强烈和结束时的感受影响着用户对整个体验好与坏的判断，这个现象就是峰终定律，因此我们可以通过关注这些关键时刻，来确保用户对整段体验是感到愉悦的。① 减少负峰消极的情绪，不仅影响用户对产品的体验感受，最终还会落到降低效率上，因此在设计时，我们要考虑减少用户的消极情绪。提供明确反馈用户使用产品的过程就像是与产品进行“对话”，良好明确的反馈能帮助用户理解和使用产品，在工作完成时，应告知用户已完成，出错时，告知用户哪个环节错了，如何改进或提供帮助，不要让用户去猜，而是主动为用户提供解决方案，提供确定感。比如在创建商品的流程中，商品创建完成后要推送到渠道线上店，中间有一段较长时间的等待，在设计时，根据推送中、推送完成、推送失败，分别提供了 3 种对应场景的提示，让用户知道当前任务进展，以及展示相关对应的操作，即使任务失败，用户也知该如何处理，增加用户的控制感。任务中断可回溯在 B 端产品中，经常会出现决策信息多，处理链路长，需反复多次进入任务流程的情况，当任务被迫中断时，用户情绪会受到影响，且用户对未完成或中断的任务往往比已完成的记忆更深刻，针对这类情况，我们需提供可回溯的设计，帮助用户顺利完成任务。比如在将商品推送到渠道线上店时，同步过程中，用户可以离开当前页面进行其他操作，系统会将推送结果展示在列表页，用户可以通过列表页，重新推送或者编辑修改后再推送，直至完成任务。② 结束于正峰在完成任务后，可以触发氛围动效反馈成就，给用户积极的结尾。写在最后以上就是我基于 B 端产品特征，和 C 端产品的体验思维，用“B+C”的设计思维尝试探索优化 B 端产品体验的一些方案尝试。“B+C”的设计思维，其本质是想找到业务与体验的平衡，作为 B 端设计师，好的用户体验一定是与业务紧密结合的，与业务匹配的体验优化才有其意义和价值。欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/c-methods-to-b
用户 操作 功能 引言任月月：据调查，中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。其实早在 2020 年 11 月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。2021 年 4 月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。目前很多头部大厂都已经按照要求完成了应用的适老化改造，并且分享了很多改造经验。可以说，适老化是今后应用发展的一个大趋势。笔者最近的工作也涉及到了相关改造设计，所以针对这个主题，做了一些学习探索。看了各类文章，结合 N 家银行 APP 的适老化设计场景体验和自己项目实践的思考，在这里与大家分享。希望可以给到大家一些启发。最新的银发族研究报告：如何做好适老化设计？来看阿里出品的研究报告！阿里云、零点有数与上海交通大学设计学院三方联合在 U Design Week 中发布了《银发族数字化产品适老化研究蓝皮书》（以下简称“蓝皮书”）。阅读文章 > 一、什么是适老化设计1. 适老化设计的定义百度百科上是这么定义的，适老化设计是指在住宅中，或在商场、医院、学校等公共建筑中充分考虑到老年人的身体机能及行动特点做出相应的设计，包括实现无障碍设计，引入急救系统等，以满足已经进入老年生活或以后将进入老年生活的人群的生活及出行需求。互联网时代，我们的应用在设计的过程中，同样也需要考虑老年用户的特征与需求。移动互联网的发展给我们带来了巨大的便利，特别是在疫情时期，很多事情实现了线上办理。但与此同时，也暴露出了很多问题，很多老年人被丰富的互联网世界拒之门外，比如不会使用健康码出行受阻、不会线上转账仍需跑银行办理业务、不会线上挂号只能线下排队等等。大家可以想想，自己身边的长辈是不是经常会出现上述类似的问题。我们在“嘲笑”他们落伍的时候，更应当反思，这个社会有没有为他们考虑。作为设计师，能够为他们做些什么？2. 无障碍设计无障碍设计常与适老化设计一起出现，无障碍设计不止适老化设计，是针对所有人的设计，要包容所有人。可以说是一种通用性、包容性设计。通用性设计：强调设计所有的系统和产品，使每个人都能使用，无论他们的年龄或能力。包容性设计：好的设计应该满足尽可能多的使用者的需求。例如：苹果系统的设计，他贴心的考虑到了行动、视力、听力和认知障碍人士的各类需求，并为其设计，让他们也能轻松的使用苹果的产品。在研究适老化设计的过程中，我发现一些适老化设计的规则和无障碍设计有着互通点。可以说适老化其实是信息无障碍的一部分，而信息无障碍的一些设计手法可以解决适老化中的部分问题。所以在此简单的聊一聊两者的关系，以更好的辅助大家对后文的理解。二、为什么要进行适老化设计1. 用户群体人口老龄化已成为全球普遍现象，但中国人口老龄化规模大、程度深、速度快。据局部抽查统计概算，全国 45 岁人口比例已达到 38%，如果按此比例计算，全国 45 岁以上人口数量已达 5.09 亿。另外，根据中国互联网络信息中心（cnnic）在京发布第 49 次《中国互联网络发展状况统计报告》显示，截至 2021 年 12 月，我国 60 岁及以上老年网民规模达 1.19 亿，互联网普及率达 43.2%。个人认为，互联网的适老化设计除了对 60 岁及以上老年网民友好，对于 50 岁左右的银发人群也同样有益。所以在这里，我将用户群体拓宽到了 50 岁及以上的银发人群。小说明：根据观察身边的年长用户，50 出头其实就已经存在看不清、搞不懂、不敢用、不会用等问题了，而且他们非常喜欢适老版本，也会主动要求帮忙把各类 app 调整成适老版本。所以在这里将用户群体进行了拓宽。根据 QuestMobile 数据显示，2022 年 8 月，银发用户月活跃用户规模达 2.97 亿，同比增长 12.5%，月人均使用时长 121.6 小时，同比增长 8.6%，增速明显高于全网平均水平。而且，国家在不断地向老年群体普及互联网，对于金融产品，银发人群具有很大的消费潜力，具有“有钱有闲”的市场优势。那么面对如此庞大且不断增长的用户群体，我们的设计势必要为其考虑，才能更通用。2. 人文关怀老年人等弱势群体，从生活到日常娱乐，他们对于产品的体验会和我们存在一定的差异。随着年龄的增长，老年用户会出现视力、听力、触觉、认知理解等能力的下降。且在心理上会对新鲜事物有一定的恐惧和抗拒，容易出现情绪挫败。一旦使用受阻，便会感到无助和沮丧，不愿意继续使用。另外，互联网信息的繁杂、经常出现的网络诈骗案例，也给老年用户带来了不安全感。他们会因为担心，不小心点了不该点击的链接，造成自己的资金损失。在工业和信息化部办公厅发布的适老化标准中也指出在适老化界面中需要保证产品的安全性，限制广告插件及诱导类按键。为了给老年用户带去更好、更安全的产品体验，让他们跟上时代的步伐，我们的设计应当为其考虑。为他们，也是为未来的我们。3. 不止为老年人虽说适老化设计，只是无障碍设计的一部分，但是我们的设计，最终有可能所有人都会受益。在某些特定的情况下，所有人都可能是“老年人”或“残疾人”提到“老年人”或“残疾人”，我们会想到以下几种场景：视觉障碍：看不清、失明听觉障碍：听不清、耳聋行动障碍：坐着轮椅认知障碍：不理解内容的含义对于以上几种场景，是只有“老年人”或“残疾人”才会碰到吗？当然不是。在某些情况下，我们也会碰到。这里就要提到一个概念：“情境性障碍（Situational Limitation）”，是指我们任何一个人，都会在某个场景下出现临时性的障碍。比如在一些银行服务中，情境性障碍的场景案例有：视觉障碍：在户外场景，我们使用手机银行，可能会出现文字看不清的情况；听觉障碍：在嘈杂环境中，我们会听不清一些语音播报；行动障碍：手上提着东西，想使用手机银行进行线下付款，可能会误点到别的功能上去；认知障碍：银行新上线了一个功能，我们之前从来没有碰到过，会出现短暂的认知障碍。也许我们设计的初衷是为老年人进行无障碍设计，但其实在很多时候，因为外部环境，我们也会出现短暂的情境性障碍，所以为他们设计，也是为我们自己设计。4. 银行用户需求网上银行 app 行业近年来收获了大量的用户增长，于此同时，也出现了各类声音，这些声音反应了用户的各类需求。据统计网上银行 APP，41 岁及以上用户仅占比 12.8%。对于年长网银 APP 用户对保险服务的需求更高，同时也更为偏好风险较高的股票交易。虽然现阶段他们在银行金融业的渗透率较低，但是随着更多的老年用户接触互联网金融，预计活跃渗透率将会进一步提升。对于这群如此有消费潜力的用户，现实中，有很大一部分老年用户对网上银行服务存在不了解、不敢用、不会用等痛点。场景小故事：以下案例来自身边长辈① 银行卡办理与认证场景：银行很多业务已实现半自动化，需要手机配合操作完成业务。问题：辛辛苦苦跑一趟银行，但因手机使用不熟练，不知道怎么操作，银行员工又忙没能详细指导(代劳)，导致业务无法顺利办理，只能第二天再跑一趟。② 线上转账场景：从柜面转账到 ATM 机转账，再到现在的手机转账，完全不同的转账方式，接受起来很慢，操作不熟练，不敢放心使用。问题：年长用户，对于网络陌生，内心保持不信任。宁愿跑银行也不敢、不会在手机银行进行转账操作，或者就让子女代劳，完全没有享受到互联网带来的便捷。根据网易 UEDC 调研，老年群体手机银行操作体验痛点和对手机银行的期望如下：如何将这群用户服务好，是当下很多网上银行 app 需要思考的问题。另外，在很多行业中，中老年人因为拥有丰富的经验在岗位上会更具优势，对于企业银行用户来讲，处于关键角色的用户例如财务，工作年限长、经验足是优势。那么企业银行面向企业的设计，如何提升中老年用户的使用体验也同样值得考虑。三、老年用户的特征与需求想要更好地为老年用户做设计，我们就需要详细了解老年用户的特征与需求。从前文的使用现状中，我们可以将老年用户的需求分为生理需求和服务需求。生理需求：看不清、难操作、怕出错(容易挫败）、不理解、听不清服务需求：不了解、找不到、不会用、不敢用这两类需求的来源还要从老年用户的特征入手去解析。1. 老年用户之困——视觉障碍随着年龄的增长，老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。而且老年用户患有眼部疾病的概率会有所增加。60 岁以上的老年人中，视觉器官老化导致视力减退者为 47.9%，其中绝大多数是远视。常见的问题有：字小看不清、感觉字的颜色淡看不清、难以识别蓝紫色为代表的冷色调颜色、动态视觉感知弱等。2. 老年用户之困——听觉障碍根据听力学的研究，男性约从 45 岁以后开始出现听力衰退，女性稍晚，随着人类寿命的延长，老龄人口的增多，老年人耳聋的发病率也有所增加。常见的问题有：听不到、听不清、觉得语速过快等。3. 老年用户之困——行动障碍老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。而且老年人的手指会偏大，细胞水分减少，皮肤皱纹加深，会使得触屏灵敏度大大降低。动作精准度的下降使得老年人无法准确的完成手势操作。常见的问题有：不会复杂的手势操作、容易误触、点击困难、无法长时间连续操作等。4. 老年用户之困——认知障碍人的认知能力也会随着年龄的增长而下降。老年人会出现反应慢、判断力下降、学习能力退化的情况。在这种情况下，老年用户接触互联网的心理障碍就更加剧了。常见的问题有：难接受新应用、难分辨信息真伪、不理解图标/图片的意思、容易挫败更容易接受熟悉的东西等。四、银行金融产品适老化设计应当如何入手针对以上老年用户的需求，银行金融产品的适老化设计应当如何入手。接下来我们结合《移动互联网应用（APP）适老化通用设计规范》中的内容（以下简称《规范》）和现有的各类产品适老化设计现状一起学习下如何进行适老化设计。《规范》适用范围为：各企业在提供适老化服务时的内嵌适老版界面、单独的适老版 APP。主要包括 5 大点技术要求：可感知性、可操作性、可理解性、兼容性以及安全性。1. 适老版入口设计① 内嵌适老版界面企业将适老版界面内嵌在原先的 APP 中，提供入口供用户切换。这种方案目前市面上使用较多，入口通常放置在设置中。对于银行金融产品，经调研，不少都遵循 all in mobile 的设计理念，要求根据不同的场景可以快速随时切换，所以除了设置中，还会在其他位置放置切换入口，方便用户切换。常见切换入口名称工商银行：幸福生活版；中国银行：岁月长情版；光大银行：简爱版；甘肃银行：颐年版；支付宝：长辈模式；招商银行/网商银行：长辈版；中国农业银行/平安口袋银行：大字版；宁波银行/云闪付：关爱版等等对于切换入口的名称，每款应用都有自己的特色，整体来看，大字、长辈版是使用频次最高的，通俗易懂，其他类型的名称虽然有特色，但是与其他应用不同，不符合用户通用认知，在一定程度上会给年长用户造成理解障碍。常见切换入口位置对于内嵌版本的切换入口通常有以下三种：一级页面顶部的“版本切换”按钮一级页面下拉加号内的“版本切换”我的页面-设置-“版本切换”这三种形式根据应用的功能层级，开启适老模式需要进行 1～3 次点击，常见点击路径如下：「首页」—版本切换图标—「适老版」「首页」—版本切换图标—「版本选择」—点击选中—「适老版」「首页」—加下拉—版本切换图标—「适老版」「首页」—加下拉—版本切换图标—「版本选择」—点击选中—「适老版」「个人中心」—设置按钮—「设置」—版本切换—「适老版」「个人中心」—设置按钮—「设置」—版本切换—「介绍页」—开启确认—「适老版」「个人中心」—设置按钮—「设置」—版本切换—「版本选择」—点击选中—「适老版」特色切换过渡页面设计中国农业银行：设置页面直接外置各种版本，直观且丰富了设置页面工商银行：在版本切换页面详细介绍了各个版本的特色支付宝：独立页面介绍适老版对于开启适老模式，是否需要设置过渡页面，个人认为需要，因为具有图文介绍的过渡页面，虽然在一定程度增长了用户切换路径，但是给了用户切换的心里预期。而且对于模式的切换一般是低频操作，适当给用户一些“阻力”可以避免误操作。② 单独的适老版 APP企业也可以根据自身情况选择开发单独的适老版 APP，目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版 APP。用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。（目前暂无银行金融产品上线单独适老版的 APP）经体验，一般开发了单独的适老版 APP，在普通版本 APP 中便不会设置大字版切换模式，仅提供字号设置功能和下载适老版 APP 引导页。2. 可感知性该技术要求主要解决老年用户的视觉障碍、听觉障碍及认知障碍。规范如下：① 字型大小调整文字的类型根据调研，同样文字大小的情况下，非衬线体比衬线体结构更加清晰。所以《规范》中建议使用非衬线体，以减少不必要的视觉干扰，保证易读性。另外采用可以提高字重方法，使文本轮廓更加清晰。中文字体例如思源黑体、微软雅黑等都是比较厚重的，不建议使用宋体、楷体等衬线体。英文字体，特别是对于数据的展示，为了让数据更醒目直观，可以选择非衬线类厚重的字体。例如：我们部门为了在设计中更好的展示数据信息，提取常用字符设计了非衬线类的“兆日金融体”。文字的大小《规范》中建议适老版界面及单独的适老版 APP 中的主要文字信息不小于 18 dp/pt。Ant Design 设计语言中讲到关于计算最小字体的方法，基于年长用户阅读距离（43 cm）以及最佳阅读角度（0.75）计算并换算得到建议最小字号为 16dp/pt。那么我们到底按照哪个规范来呢？笔者觉得，这两个规范没有对错，大家根据自己页面设计或适配的情况来确定就可以了。对于年长用户来讲，不同的人视觉感官度也不一样，我们在设计允许、布局整洁的限度下，字体肯定是越大越好。例如下图是我在做适老版过程中制定的缩放系数规范，为了保证部分复杂页面布局不错乱，将主要文字最小字号定义为 16dp/pt。当然以上的规范不一定可以适合所有人，毕竟随着用户的年龄增长，视觉障碍会加深。我们还可以更加人性化一点，比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。例如：iOS 系统中在辅助功能里可以设置更大字体、粗体文本（《规范》建议应用字型大小可随系统设置调整，或内部具备字体大小设置选项）；微信可以开启听文字消息。文字的适配规则针对文字放大后，极值情况下的适配，主要有省略和换行两种方式，需避免文本、元素被剪裁。界面元素及容器需要跟随文字放大而等比例系数放大同一容器内的元素横向间距保持固定，纵向间距可按照比例系数适配② 行间距《规范》建议段落内文字的行距至少为 1.3 倍，且段落间距至少比行距大 1.3 倍，同时兼顾移动应用适用场景和显示效果。根据调研测试：标题行间距为 1.3 倍，文字行间距为 1.5-1.8 倍，视觉效果最舒适。数值仅供参考，具体大家还要融合自己的设计去确定。③ 对比度为了解决年长用户因为文字、图像颜色淡而看不清的问题，在设计的过程中我们需要使用强对比度的颜色。《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为 4.5：1（字号大于 18 dp/pt 时文本及文本图像对比度至少为 3：1）。这一标准源自 WCAG 标准，其中的颜色对比度的无障碍标准包括比度最低标准（AA 级）和对比度增强标准（AAA 级）。对比度(AA 级)：文本的视觉呈现以及文本图像至少 7:1 的对比度；大号文本（字重为 Bold 时大于 18px，字重为 Regular 时大于 24px）以及大文本图像至少有 4.5:1 的对比度。对比度(AAA 级)：文本的视觉呈现以及文本图像至少要有 4.5:1 的对比度；大号文本（字重为 Bold 时大于 18px，字重为 Regular 时大于 24px）以及大文本图像至少有 3:1 的对比度。小贴士：Web Content Accessibility Guideline（Web 内容无障碍指南）是业界公认的指导标准，简称 WCAG 标准。其目标是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。2018 年 6 月发布了 2.1 版本，并成为 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。简单来说，就是要求我们在设计适老化界面的过程中，文本颜色需要按照标准加深，与背景色拉开差距以保证年长用户可以清晰识别。为了保证达到这一标准，我们可以使用色彩对比工具去进行测试：工具一： https://webaim.org/resources/contrastchecker/工具二： https://www.wenjiangs.com/wp-content/uploads/2017/06/contrast-ratio/工具三： https://m2.material.io/resources/color/工具四： https://contrast-grid.eightshapes.com④ 颜色用途颜色是界面设计最重要的元素之一，设计师经常通过不同颜色表达去传达一些信息，例如成功、失败等等。但是在无障碍设计中，颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。因为随着年龄的增长，我们对颜色识别感知会变弱，所以使用颜色代表特定意义的时候，需要有另外一种区分方案。例如：使用下划线表示链接，或使用粗体突出显示文本图标和文本结合使用传达成功或失败的信息使用线条粗细、纹理或图案区分图标样式使用不同的图案传达信息等等对于颜色的使用，我们还需要注意以下几点：颜色多样：页面中应使用区别较大的丰富色彩，可借鉴真实存在的物体，保持认知一致。可适当加深颜色以提高颜色的对比度重要元素避免使用蓝色和紫色：由于老年人的晶状体变黄、变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。对于这一点，还是要看各个品牌的主题调性，如果无法避免使用蓝色和紫色，那么就提高饱和度以加强识别性。⑤ 验证码对于移动应用中的非文本验证码（例如拼图类、选图类、旋转类等验证方式），年长用户容易产生认知障碍，不理解验证的方式；也可能会产生行动障碍，无法准确对齐验证码。所以对于验证码我们应当做如下处理：图片文本类验证码应当清晰易懂，并提供放大查看的操作；非文本类验证码应当简单易操作，或者提供可被不同类型感官(视觉、听觉等)接受的替代或引导表现形式。⑥ 图标设计对于页面中的图标，在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。除了单纯的放大，在项目允许定制化设计的时候，我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。另外建议搭配文字描述，方便用户更清晰更快速理解。例如平安口袋银行的大字版，图标都一定程度上进行了拟物化处理，并且都配有通俗易懂的文字解释“电话”“去这里”，能够让年长用户轻松领会含义。3. 可操作性① 组件焦点(热区)大小由于年长用户细胞水分减少，手指偏大，在使用触屏的过程中灵敏度较低。所以对于常规组件的焦点，他们操作起来可能会很难完成操作目标。所以我们在放大文字、图标等控件的同时，对于可点击的组件焦点(热区)也需要同步放大。《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于 60 60dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 44dp/pt；单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48 48dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 44dp/pt。对于规范中的内容，具体我们可以这样做：在需要点击操作的元素( ② 手势操作触摸屏时代，有着各种各样创新的手势操作和交互；但是对于年长用户由于行动和认知障碍，这些创新比较难学习理解并流畅操作。所以在移动应用中，应对用户进行手势导航或者操作的结果提供反馈提示；避免需 3 个或以上手指才能完成的复杂手势操作。对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。这四种交互，操作比较简单；且对应到界面上的屏幕空间，用户更容易理解。现在很多应用中创新，有长按侧滑进入左侧空间、长按下拉进入二楼等交互；这类交互对于年长用户来讲其实非常不容易理解且不便操作。笔者之前教过家里长辈这类操作，想告诉他们这类“便捷创新”的功能，但是发现他们重复三四次才能完成操作，且过一段时间就会忘掉，依旧会选择一步一步点击到达目标页面。综上，对于适老化版本的手势操作我们需要注意以下几点：使用简单的手势操作：单指优于多指、单击优于双击(多次点击)、单一的手势优于组合手势；不要加入需要力道触发的手势，例如长按下拉，年长用户把控不好力度很容易把这个手势变成了单击；有一定学习成本的手势，应当给出引导教学；给手势操作及时反馈，避免用户觉得没有触发到而多次点击。③ 充足操作/反馈时间在移动应用中，如果限时不是活动的必要部分或关键要素，且不会导致用户发生法律承诺或财务交易，则应为用户的操作留下充足时间，在用户操作完毕前界面不发生变化。年长用户对于一些动态信息的感知度比较低，所以如果页面中出现一些提示信息，我们可以采用以下方案让提示更友好：适当延长时间，避免用户还没读清内容就消失了，例如 toast 显示持续时间可以由 3s 延长到 5s；采用其他类型的提示给用户足够的阅读时间，将短暂停留的内容，调整为常显内容，由用户自行操作确认关闭，例如将 toast 改成弹窗；利用震动等其他感官提醒优化提示，例如消息推送的震动及消息提示音、警告场景下的长震动；我们在拉长交互时间的同时，还需要注意避免跨屏任务，因为年长用户在进行多个输入或操作的任务上会表现出明显的障碍。在任务的过程中，我们需要给出足够的解释说明，引导帮助年长用户完成多任务操作。④ 浮窗在移动应用中，若内容产生新窗口（包含但不限于弹窗），应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部，且最小点击响应区域不能小于 4444dp/pt。对于这条《规范》，我们可以拆分成以下几点来理解落地：超出 7 秒长时间停留的页面（弹窗），需要提供关闭机制；关闭机制可以是关闭按钮、返回按钮、跳过按钮或者功能文字操作按钮等一切可以立即退出当前页面的操作；对于这些关闭机制的点击热区不能小于 4444dp/pt。⑤ 提供更便捷的录入方式年长用户对于表单录入类的操作，总是有很大的心理/操作负担，碰到这类页面常常是不愿意操作，让别人代劳。例如银行的转账页面，大部分都需要录入付款信息、收款信息、转账金额等一系列内容。如果让用户每一项都手动输入，不但效率低而且很容易出错。我们可以做些什么，去减轻用户录入负担呢？提供有限的选项和默认项 在页面中我们需要适当精简页面以减轻用户心理负担，只提供需要的选项，或者在需要的时候出现对应选项。另外在有限的选项中，还可以提供高频选项作为默认选项，减少用户操作简单理解，提供的选项越少，用户越容易选择，提供默认选项>提供有限选项>提供多种选项。选择代替输入选择类的交互方式比输入类更便捷，可以避免繁琐的打字过程，很多年长用户打字都不是很顺畅，甚至是使用手写录入文字。所以对于一些固定项的内容，使用选择类的交互可以很大程度提升操作效率。识别录入代替输入对于一些比较大段，需要仔细核对的内容，使用拍照扫描、复制粘贴识别、二维码识别录入等方式更不易出错；例如付方账号的录入。自动数据带入具有前后逻辑关联的表单数据，可以提供填写某个数据自动带入其他内容的联动交互，减少用户输入/选择操作；例如录入收款卡号后、自动识别带入收款银行；常用项历史记录提供历史记录功能，记录近期操作过的选项，方便用户快速复用再次操作；例如常用收款人的记录，点击后自动带入收款人信息，无需重复操作录入。⑥ 缩短操作路径年长用户经常会出现“我在哪”“我要怎么做”“接下来我要做什么”等困扰；面对这样的困扰，我们可以做如下交互优化：精简功能，缩短重点功能操作路径，避免信息层级过深，要让用户快速触达；拆分任务步骤，防止信息过载，减少每屏信息密度；对于跨屏的长任务，提供操作进度引导，告知用户所处位置进度，做到流程明确。减少非必要操作，或允许跳过不必要的步骤；4. 可理解性① 提示引导机制《规范》建议在用户安装移动应用时，应为适老化设置、老年人常用功能提供显著的引导提示。也就是我们常说的功能引导机制。对于内嵌的适老版界面，前文中也有提到常见入口位置，市面上大多数的适老版切换位置都比较隐蔽，且未按照规范给予显著切换提示，还有很大的优化空间。经调研分析多个 app 产品，适老化设置我们可以从以下几点着手优化设计：初次下载 app 或适老版上线的时候，提供功能开启引导或功能上新提示，告知用户有该功能、功能的入口、如何操作开启；开启前提前告知用户，适老版是什么，开启后界面会有怎样的变化，给用户心理预期；进入适老版本后引导提示用户如何回到标准版本，避免用户不想使用适老版而找不到出口；退出适老版需要二次确认关闭，防止长着用户误触。例如云闪付为简单的弹窗提示，招商银行使用了半弹窗，还告诉用户如何重新开启长辈版，既起到了二次确认的作用也做了提示引导；在“设置”中提供“适老版”入口，且用户可以通过搜索“长辈版”、“亲情版”、“关爱版”、“关怀版”等关键词直达功能；常用功能的提示引导我们可以从以下几点着手优化设计：提供功能指示引导或说明设置帮助中心，提供纯文字教程、图文教程或视频教程，方便用户查找。还可以将教程以浮窗的形式展示在具体功能页面中，让用户可以边看边操作。设置客服中心（智能客服、电话客服），运营/客服人员专项跟进，随时为年长用户提供帮助。界面设计中，对于需要点击操作的设置行为指引，引导用户完成点击。例如在按钮文案中加入行为动作，结果导向的内容；还可以对于一些卡片式的点击区域加上按钮引导。② 语音功能在适老版中融入语音功能可以很好的辅助年长用户进行一些录入操作和信息获取，因为很多年长用户文化程度不高，不会使用输入法，大多选择手写输入的方式。但是手写输入效率比较低，而且如果写的字不清晰会识别错误。我们可以从以下几个角度融入语音功能：使用 AI 技术，提供语音输入功能，目前市面上不少银行应用都设置了语音操作的功能，而且将这个作为重点易触达的功能展示在了关键位置。例如工商银行的语音操作；功能操作过程中，提供实时智能语音助手或人工客服；也可以结合语音导读功能进行同屏解说引导用户操作；提供结果状态下语音播报或声音反馈提示，在操作正确或错误时给予对应的正向、警示提示音；融入智能读屏功能。融入语音功能的时候，考虑到年长用户的听觉障碍，我们还需要注意以下几点适当增大音量：老年人听觉平均感知音量在 67.5～75.3 分贝之间；降低语速，提供慢速、正常、快速等语速供用户自己选择，更清晰有效的获取语音信息；优化收音机制，去除杂音，提升录入识别成功率；支持方言，可智能识别方言或有一定纠错机制。③ 通俗易懂的文字由于年长用户触网时间短，受教育程度不同，可能对互联网常用的一些词汇存在认知障碍。所以我们在设计的时候需要对一些互联网词汇进行口语化表达，采用用户易理解的文案。同时对于一些提示性的文案，需要表达清晰，在文案上要具有一定的引导性，例如，用户输入账号缺少 1 位的时候，应当提示：请输入 xx 位账号，而不是仅仅提示，输入错误，让用户自己去找哪里错了。④ I 模型-精简的布局目前市面上大多数首页都承载了很多内容，但是这种布局对于年长用户来讲不利于集中视线聚焦功能。所以在适老版建议采用 I 模型的布局模式，聚焦内容，减少用户视线主焦点的转化，这样更便于年长用户阅读与理解。一般来讲，我们需要控制用户的视觉主焦点转化不超过 2 次。⑤ 使用具体的内容、真实形象在制作活动 banner 场景中，采用具象的图片会比插画类型的图形更容易向年长用户传达信息，而且会给年长用户传递出真实感从而提升对产品的信任度。例如中国银行在适老版的设计中采用了大量的真人场景配图，非常的直观易理解。5. 兼容性辅助技术移动应用程序不应禁止或限制终端厂商已适配好的辅助设备（如读屏软件等）的接入与使用。在辅助工具开启时，移动应用内容中所有功能性组件均能正常工作：按钮可正常访问；输入框能正常进行输入；多媒体能正常播放；在页面局部更新后，移动应用内容中新增的功能性组件也应能正常工作。这一点更多的是从开发技术角度制定的规范，要求软件开发的过程中做好适配，保证适老版使用各类辅助技术的时候能够正常运行。我们设计师能做的就是在设计验收的过程中，考虑到这个层面，并将一些辅助功能的接入与使用纳入设计验收。6. 安全性① 拒绝引导性内容现在很多应用有着各种各样的广告、推销、诱导下载链接等，而年长用户容易受骗，所以在适老版中严禁出现推销广告等内容。《规范》中限制如下：广告插件及诱导类按键限制禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件，也不能随机出现广告或临时性的广告弹窗。禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。对于银行金融产品来讲，涉及到资金安全，筛选重要功能、安全的产品提供给年长用户就显得尤为重要。例如工行适老版的投资理财和专属存款，仅放了适合年长用户的产品。② 给用户信任感，保障老年用户个人信息安全移动应用程序进行个人信息处理时应遵循最小必要原则，即处理个人信息应当有明确、合理的目的，并应当限于实现处理目的的最小范围，不得进行与处理目的无关的个人信息处理，以保障老年用户个人信息安全。同时我们在设计呈现的时候，可以加入一些安全、保障类的表达来提升产品整体的可信度，增强年长用户对产品的信任感，从而敢用。例如：加入安全中心、安全保障、信任背书等元素，打消年长用户疑虑；对关键信息进行脱敏展示，降低年长用户对数据泄露的担心；在各个环节增加安全信息提示，加强安全认证，多重保障让年长用户安心；增加防骗、反欺诈模块，增强年长用户防骗意识章节小结以上，我们结合《规范》里逐条规则和实际案例拆分讲解了如何去实际落地适老化设计。在这里借用阿里对适老化设计建议的关键词提炼，总结本章重点内容：字号18dp/pt——清晰的字型、足够大的文字、舒适的行间距强烈好于柔和——符合无障碍标准的对比度、可识别的颜色具象好于抽象——优先使用写实图片行动好于描述——使用表示行为的“动词短语”会更容易理解熟悉好于新鲜——使用符合认知的设计和流程、易理解的图标、通俗易懂的文案色彩好于图形——使用丰富的色彩，加强年长用户记忆与理解点击好于滑动——简单的手势操作、容易点击的热区点击好于输入——提供更便捷的录入方式多模态好于单模态——语音功能的融入接下来我们一起看一下目前市面上的一些银行金融产品适老化版本的体验测评分析。五、银行金融产品适老化案例分析1. 工商银行名称：幸福生活版slogan：超大字体，设计极简；语音助手，交互升级；专属理财，乐享收益；亲情账户，传递关爱。入口：五个一级页面下拉加号内的版本切换；我的页面-设置-切换长辈版(幸福生活版)出口：一级页面拉加号内的版本切换；我的页面-设置-切换标准版。体验分析：入口和出口位置及交互一致，贴合用户心智，符合操作习惯；一级页面布局精简，层级清晰，重点功能突出。语音操作放在了最重要的位置，方便年长用户操作页面内的功能都经过了筛选，只放出了年长用户常用功能。对于网点服务还有专门的适老网点推荐功能子页面也做了适老化的定制，从视觉到交互，都适配了年长用户需求。除了个别不是很重要的标签文字比较小，工行整体的适老化都做的不错推荐指数：2. 招商银行名称：长辈版入口：我的页面-设置-长辈版出口：首页-下拉到底部-回标准版体验分析：入口较隐蔽，开启无提示直接开启首页是常用功能、点击客服直接进入“小招客服”，页面精简，重点突出；功能子页面仅做了简单的文字、控件放大；点击“回标准版”出现的半弹窗提示，防止误操作，起到二次确认的作用，同时告知用户重新开启的入口推荐指数：3. 中国银行名称：岁悦长情版slogan：风格简约，大字展示，为年长客户甄选产品和服务入口：首页-版本；我的-设置-版本切换出口：我的-切换标准版体验分析：入口的设计视觉效果很好，非常直观。出口太过明显，且没有二次确认，对于年长用户如果误触了回到标准版，可能找不到入口首次切换至岁悦长情版，有功能引导一级页面功能和布局做了精简，但是二三级子页面未做适配。整体设计风格符合年长用户审美，给用户温馨的感觉。推荐指数：4. 中国农业银行名称：大字版slogan：超大字体，功能精简；语音助手，一键客服入口：首页-版本；乡村振兴-版本；我的-更多下拉-版本；设置-版本切换出口：首页-版本；我的-更多下拉-版本；设置-版本切换体验分析：多个入口，且入口的设计样式很有特色；出口与入口的路径相同。布局清晰，功能做了筛选精简，一级页面仅保留常用功能。重点功能子页面进行了布局和交互的适老化适配。整体的视觉还原和谐度很好，大字版的用色也针对年长用户的生理特征进行了加深处理。推荐指数：5. 宁波银行名称：关爱版slogan：超大字体，精简功能；贴心服务，便捷易用入口：首页-加号下拉-版本切换；我的-版本切换；出口：首页-加号下拉-版本切换；体验分析：页面极简，取消了底部的 tab 栏，首页视觉表达符合年长用户需求；语音功能使用了悬浮的按钮，且伴随收起交互，这点对年长用户不是很友好，不容易点击使用；重点功能子页面仅做了少量适配，大部分控件与普通版一样；推荐指数：6. 平安口袋银行名称：大字版slogan：平安在手，儿女无忧；字体更大，简洁易懂入口：首页-加号下拉-版本切换；我的-版本切换；出口：首页-版本切换；我的-版本切换；我的-设置-版本切换体验分析：页面结构清晰，重点功能突出，精选的功能都是与年长用户相关的，比如防骗宝典、平安老人意外险等等；图标设计更具象，更易读懂理解；二三级子页面均做了视觉适配，适配呈现效果体验感很好；各类业务场景都做到了告知、引导和反馈。推荐指数：7. 云闪付名称：关爱版slogan：字体大，图标大，使用更简单入口：首页-版本切换；我的-设置-切换至关爱版出口：首页-版本切换体验分析布局和功能都做了精简；退出关爱版有二次确认，避免了误操作；各功能的子页面未做大字适配。推荐指数：8. 江苏银行名称：融享幸福版slogan：字体更大 简洁清晰 一键帮助 安全无忧入口：首页-版本切换；出口：首页-版本切换；体验分析入口与出口一致，标识明显；页面布局精简，功能内容贴合年长用户的需求，特别是一键帮模块里的内容都是实际解决年长用户需求的功能；语音介绍功能，是其他产品没有的，开启后可以点击进行语音播报讲解，很大程度解决了年长用户看不懂、不会用的痛点；“反欺诈指南”、“日历模式”都贴合年长用户需求，暖心且有特色；推荐指数：总结这篇文章很长，感谢大家耐心读到了最后。其实刚开始准备这篇文章的时候，只是想基于自己的工作内容做一个复盘。但是在书写总结的过程中，我查找阅读了大量的资料，感受到了无障碍、适老化设计的暖心人文关怀，就觉得很有必要仔细的写一写。特别是这句话“手机字体越来越大，音量越来越大，子女的陪伴却越来越少。子女知识想用一部手机联系到老人，却没有想过，他们也想用手机，去联系今天的世界。”狠狠的触动了我。所以如果能让更多的设计师关注到这个群体、能够向更多的设计师传达适老化设计的一些知识点，这篇文章就发挥了它的价值。其实整体来看，目前整个互联网的产品适老化才刚刚开始并不是很完善，企业也可能因为成本、资源等问题无法实际落地推动适老化设计。但是随着时间的推移，一定会有更多的产品关注并落地实施适老化（在我写这篇文章的过程中，有好几家银行产品对适老化的版本做了多次迭代优化，最终编辑排版的时候，又更新了一些案例。所以说适老化是大趋势，头部产品都已经开始注重这部分人群的体验了）希望通过这篇文章给设计师们一点启发。就算大家目前所做的产品，没有适老化设计的需求，里面的一些知识点融入基础产品的设计，也是适用的，能给用户带去更好的用户体验。再次感谢大家的阅读，希望通过设计的力量，帮助年长用户更好的融入并享受数字化生活。参考文章：为了帮助大家更好的理解本文，以下为书写过程中阅读参考的一些文章和报告，可供进一步深入学习。《QuestMobile2022 银发经济洞察报告》《中国互联网络发展状况统计报告》 《QuestMobile 银发人群洞察报告》 《QuestMobile 金融支付报告》 《工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》《腾讯出品！手机银行适老化设计探索（附超多干货）》 《如何做好产品的适老化和无障碍设计？来看腾讯的实战案例！》 《小程序适老化设计指南》 《超全面！「无障碍设计」指南》 《适老化设计——让产品充满温度》 《百度大字版精细系统的适老化设计研究实践》 《一篇就够！实际场景落地适老化设计》 《色彩无障碍指南: 如何让色盲用户获取色彩信息》 《银发族数字化产品适老化研究蓝皮书》 《优设 9 图-如何做好适老化设计》 本篇来源：优设网原文地址：https://www.uisdc.com/bank-app-said-aging-design
用户 新手 操作 前言很多时候，大家都觉得新手引导大可不必，对于大部分产品，用户看都不看直接关掉，但对于一些较为复杂的产品，新手引导是不是比看长篇大论的说明书好多了。设想一下，我们生病后拿的药品，可曾有过一次将说明书从头到尾的看完过，我相信通常都是遵医嘱或者后续再咨询吧，相比之下，如果购买的是一台跑步机，除了看视频操作之外，可能还会看一看说明书，虽然查看率较低，但不可否认的是遇到突发问题或许能起到关键作用。UI 设计中的新手引导主要帮助用户认识产品、捋清重要功能入口，以帮助其快速上手、降低后续使用过程中的认知成本，同时也是产品作为拉新转化的重要步骤，对于较为复杂的产品来说至关重要，不容忽视。那么在设计新手引导时要注意哪些问题、如何将引导的作用发挥到最大，接下来与大家一起了解。引导设计B端篇：如何做好B端产品的引导帮助？我总结了2个方面！合理的产品引导功能，可以使用户在较短时间内了解产品的特性与使用，本文带你了解静态和动态2种邀请引导方式。阅读文章 > 一、了解新手引导1. 什么是新手引导当我们进入一家新的公司时，一般都会有人事带着我们认识团队中的每一个人、或者在会议上做自我介绍，我们很清楚，即便不这样做，只需一定的时间也可以通过主动/被动沟通逐渐熟悉，但公司的安排无疑加速让我们融入新的环境，更快进入最好的工作状态，这就是显示版的“新手引导”。《增长黑客》中曾说过：欲望-摩擦=转化，为了增加转化，既可以增加用户的欲望、也可以减少产品与用户的摩擦，“新用户体验”作为用户旅程的起点，必定有诸多摩擦点，新手引导就是为了消除这些摩擦点而存在。产品中的新手引导能帮助用户在短时间内快速了解产品特色以及使用方式，轻松体验多种功能。站在产品角度，新手引导让用户掌握产品核心功能、提高留存率后，对提升转化起到了至关重要的作用。2. 需引导的功能/内容首先，展示产品特色，让用户了解该产品相比同类产品中的优势与亮点，给用户留下良好的印象、或者说有想用下去的欲望；第二，产品的更新迭代，不管是新功能的上线还是原有功能入口位置的变化，都应该及时提示用户，避免用户在之前版本的固有思维中、无法快速扫视到自身所需的入口而花费更多的时间成本；第三，操作指引，这一点并不是所有产品都需要的，在正常情况下，产品要做到不让用户思考就能快速上手，但针对较为复杂的产品，则需要通过新手引导帮用户快速掌握其操作方式与技巧，降低自行学习成本，例如部分 B 端、工具类应用。3. 出现的时机大部分新手引导出现在应用下载或版本更新后的首次打开时，这有助于用户对产品的新功能/操作有基本了解。新手引导不求大而全，在介绍核心功能和特色后，可将出现过的引导进行隐藏，方便用户在需要的时候手动唤出以寻求帮助。另外，产品需要保持用户对产品自行探索的好奇心，对于那些非必须但必要的新手引导，可在不干扰用户的前提下，根据用户的操作进行行为预判，在合适的时间主动给予提示，确保用户的隐性需求能得以明确并及时解决。二、使用场景及样式分类1. 页面遮罩引导页面遮罩引导相当于把气泡引导样式进行了升级，区别在于页面上方增加了一个黑色半透明蒙层进行遮罩，被引导的下层内容处镂空设计，并在蒙版上配交互手势、文字信息或插图等内容进行辅助说明，用户需要手动点击“下一步/跳过/关闭”按钮方能操作其他内容。这种新手引导最大的优势是能让视觉聚焦于当前被指引的功能说明处，确保用户不会被其他信息所干扰。基本是在下载或更新应用后的首次打开时出现，可显示一个或多个（顺序引导），信息传达的有效性很高。需要注意的是内容介绍必须与所引导的位置处保持亲密性，关闭按钮明显、易操作。出现多个引导时，需同时提供“下一步”、“跳过”按钮，这里不乏有一些老用户二次下载或出于更新版本的目的，根本不需要新手引导，如果每次都要挨个点，对老用户来说，这不是帮助、而是干扰了。2. 对话框引导对话框一种强引导，一般在用户即将使用的某个功能被限制或在使用过程中主动寻求帮助时出现，对用户来说有实际性的帮助。对话框的出现依然会打断用户操作，尤其是自动触发的弹出时机要得当，弹出不及时或提前干扰用户都会存在负面影响。对话框引导会在合适的时机由系统自动触发或用户主动触发。① 系统自动触发例如用户需要使用某个功能时，系统自动弹出需升级到新版本或完成任务才能体验，并提供快捷通道，方便用户直达目标。另外，视频类应用的付费影片可免费体验 5 分钟，到时间后，系统会自动暂停播放并弹出付费通道，引导用户转化。② 用户手动触发这类引导都会有一个操作入口，使用按钮、“问号”图标或文本超链接（说明/操作指引/帮助...）提示，用户可随时点击唤出引导说明。例如，用户在应用内主动开启设备的通知、定位权限，激活信用卡时预留手机号码的文本说明或卡背面的 CVV/CVC 图文指引说明等。3. 气泡提示引导这是一种较为轻量但指向性极强的引导方式，其表现形式是在需要的位置弹出一个带尖角的气泡容器加引导性的文案提示，用户可跟随引导操作、也可忽略气泡直接操作其他内容，不会打断用户，其干扰性极小。气泡提示引导可用在新功能上线、核心功能定位、隐藏菜单提示等场景，可配合图片素材、动画效果，因带有明确的指向性，可出现在页面的任何位置，兼容性极强。4. 操作栏引导相比前面提到的对话框引导，操作栏与之有些相似，其都是阻断式且没有明确指向性的引导方式，唯一不同的是，操作栏虽然视觉重心稍弱于对话框，但弹出的位置在屏幕下方，利于用户操作（靠近手指），尤其是单手操作更容易触达。另外，操作栏有更多的空间资源，对于内容较多的详细指引比较适合，可通过图文、背景组合营造出浓烈的视觉氛围，还能增加突出的 CTA 按钮提升转化率。5. 其他引导方式除了上述提到的几种新手引导之外，还有引导页、缺省页、偏好标签等方式，但那些都是较为复杂且独立的模块体系，不是三言两语能说清楚的，建议阅览其他单独的相关资料。三、新手引导设计小技巧1. 情感化链接情感化是设计的利器，它将毫无感情的互联网产品赋予生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。在设计新手引导时，不妨加入拟人化的形象、深入人心的文案以及模拟现实世界的事物/事务，做一个有温度的产品，更能拉近与用户之间的距离。2. 强化利益点、建立目标对于活动促销类新手引导，在用户操作之前可告知操作后能得到什么、不操作会有什么损失，不乏使用一些如利益引诱、中断警告、视觉氛围等常规设计手段让用户有明确的使用目标，便于推动用户做出正向的决策。操作之后着重突出利益点刺激用户，给用户留下深刻的印象或让其期待下次的到来。3. 多个功能分层引导遵循一次只做一件事的原则，多个功能需按不同的优先级、跟随用户的操作依次呈现。还需要在每个层级都提供“跳过”入口，新手引导是为满足用户需求所提供的帮助，而不是强制用户使用。4. 复杂功能分时间段引导较为复杂的功能可将信息进行拆分，根据其重要程度按不同的时间历程分别开放，避免用户一次性接受过多的信息量，也能降低单次学习成本，提高吸收效率。例如：VIP 功能，每个等级都可能会单独开放新的服务、权限，系统应该在用户每次升级后、把新的服务及时引导反馈，切不可在首次开通 VIP 时就一股脑的把所有增值服务都告知用户，没那耐心去记、也记不住。如有必要，可把不能使用的功能放出来置灰显示或提供操作限制等。5. 多样化的视觉样式不同的新手引导，可设计出不同的视觉样式，避免相同的样式让用户形成“惯性思维”误以为已经看过，不加思索的跳过而让新手引导成为累赘。四、常见问题及处理方式1. “跳过”弱化处理在 UI 界面中，只要不是用户主动寻求帮助而弹出的信息，就会条件反射地去寻找关闭按钮，直至内容消失。虽然很多新手引导都有提供“跳过”操作，这无可厚非，但是不要设计的过于明显，太过抢眼的“跳过”按钮很容易激起用户的条件反射，不管有无帮助、看见就点，这也就失去了新手引导的初衷。适度弱化“跳过”操作入口，用户即便想要关闭，但在寻找操作的过程中，也许会被有趣的、有帮助的信息所干扰，或可持续浏览。2. 使用浅色遮罩很多时候，为了让用户按顺序走完新手引导，会在气泡后面添加一层遮罩，其不管是箭头指示还是镂空透底，遮罩的颜色（纯黑不透明度）最好使用浅色，需要用户在吸收新手指引内容的同时、还能看到界面整体的结构样式，在新手引导结束后对操作路径有一定的印象，太深的遮罩不利于用户整体学习。3. 最易理解的表达方式引导文案必须言简意赅，需要以最能吸引用户注意、容易理解的表达方式有效的突出重点。切忌长篇大论，过多的文本内容，用户容易忘记或出现记忆偏差，而且也没那个耐心去看。如果内容无法精简的更短，可以考虑使用图片/插图代替部分文字，以图文结合的方式体现，还可以用分段显示的方式跟用户进行互动，边用边学。4. 内容较多要显示进度在设计新手引导时，不管内容有多么精彩，都不要想着一次给用户灌输过多信息。用户初次使用产品，只需给予必要的功能及适当的帮助，多个引导的数量通常控制在 3~5 条即可。还需要让用户实时知道当前进度，避免用户无法掌控内容量而产生焦虑感，如果被直接跳过就无法发挥出新手引导的作用。5. 用户要有选择权新手引导主要是为了帮助用户快速上手，虽然最终的目标是为提升转化，但不要意想天开的在新手引导中仅放置一个“去转化”快捷入口。没有关闭操作、强制用户进入转化流程的做法，除了极少少数的必用情况外，大概率会被用户直接结束进程，既然无法关闭那就卸载吧！不管内容有多么重要、有多么想提升收益，都不可强制用户，我们可以利用设计手段去吸引用户操作，但依然要提供后退的入口，就算不是多么的明显也行，用户应该要有自主选择的权利。6. 趣味化的内容用户在使用新手引导学习的过程中，本身是枯燥的，设计师可以根据产品的调性设计出趣味化的字体、插画，还能配合动画设计给用户带来趣味化的使用体验。五、结语本文从基础认识、样式分类、设计技巧及常见问题处理四个方面介绍了新手引导在 UI 设计中的实践，虽然它只是很小的一个环节、且不是所有的应用（如购物类、社交类、新闻类）都需要新手引导，可一旦涉及就显得尤为重要。新手引导设计的是否合理易用，直接关系着用户的使用体验及产品转化，如果你的新手引导只是摆设、甚至成为累赘，还不如去掉。新手引导设计需根据产品自身特性结合业务场景，在合适的时机、以最合理的方式呈现给用户，引导用户快速熟悉产品、并使用产品。笔者希望通过本文内容，让初中级设计师对新手引导有一个系统化的认识，在日后的设计中，能结合实际应用场景给出最合适的方案，为用户提供实际的帮助、为产品提升价值。欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/user-guidance
控件 用户 操作 问题起源这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。我们用一个例子开场：你运营着一个视频网站，这个网站会给付费高级用户提供 3 种权益：跳过广告、免费音乐会员、积分折扣。那么你将会员权益页设计成这样：这个时候就有一个充满疑惑的用户站出来了：这个页面的意思是说“我作为一个高级会员，同时享有 3 个权益，只是这个页面展示不下了，所以我只能通过切换页面的形式查看我的 3 个权益”，还是说“优质大会员可以按下对应的按钮，从 3 个权益里挑选一个享受”？转换成我们设计的语言来说，也就是“这到底是一个 tab，还是一组互斥的按钮？”为什么我们要把这两个东西做得那么像？它们应该长这么像吗？tab 和按钮、单选框、菜单之间到底有什么关系？这些问题虽然听起来基础，但深究纵横 50 年来控件的发展史，是一个很值得研究品味的小细节。更多控件知识可以看这个专题 https://www.uisdc.com/zt/interactive-control信息与行为，事物与事件tab 和按钮，信息展示控件和选择器之间的差异，根本上来说是“信息”与“行为”、“事物”（thing）和“事件”（event）之间的差异。前者独立于用户的意图和行为之外客观存在，即使用户永远不去看、不去使用这些东西，它们仍然存在。而“事件”则需要事物加上人的操作行为才能完成。就比如说房间里有一箱子苹果，这是一个客观事实，苹果也是一样“事物”。而人中午肚子饿了，走过去拿起一个苹果吃了，那么“食用苹果”就是一个事件，这个流程需要“苹果”这个事物，也需要人拿起来咀嚼、吞咽的动作，这两个要素共同组成了“食用苹果”这个事实。在现实生活中“事物”和“事件”完全是两个不同的概念，不会有人把这两个事情混淆。“事物”就好像名词，而“事件”就是包含动词的主谓宾短语，前者看得见、摸得着，能够被稳定观测，而后者不一定。比如要是有人告诉你“桌上有一个苹果”，那么你一扭头就看得见苹果的确在桌上，因此这个事实是确凿无误的；但假如有小朋友跟你告状“报告老师，小明刚才打我”，就不那么容易取证。然而在人机交互中，“动作”和“行为”逐渐区分得不是那么清晰。命令行时代人机交互发展之初，“信息”与“行为”、“事物”和“事件”可以很容易地区分。在用户还得使用命令行操作电脑的时代，查看某个客观存在的事物、进行一项行为，共用了一个动作：输入指令。用户需要使用这样的方式来告诉机器我想去看什么、做什么，因此用户可以阅读文本，从语句字面意思判断事物和事件、信息和行为。从一开始的案例来讲，比如用户想要查看所有权益，就输入“查看权益”，看看打印出来的权益都有什么。假如系统要求用户选择某个权益，则用户输入权益代表的编号或者权益名字。但命令行界面这种交互形式毕竟效率太低，也并不利于形成用户对于系统完整稳健的心智模型，因此随着电脑作为家用生产力工具的地位不断提升、新的操作设备“鼠标”的普及，图形化用户界面（GUI）应运而生。在命令行向图形化用户界面过渡的阶段，两种新的交互样式首先出现：菜单和输入框。早期的菜单与输入框的样式非常粗糙，与传统命令行界面差异很小，因此计算机从业者早期只能展示字符而无法展示图形，所以只能把利用菜单、文本输入框作为主要交互形式的计算机带点嘲讽地称为“荧光屏打字机”（Glass Teletypes）。在这个阶段，“菜单”仅仅是一个简陋的，有别于主屏幕的展示容器，甚至我们今天熟悉的“对话框”（dialog box），也可以被理解为菜单的一种变体。至于菜单上究竟是放“行为”还是“信息”、“事物”还是“事件”根本就无所谓，因为用户仍然以类命令行时代的交互方式，也就是用阅读文本的方式来理解事物。图形化界面时代图形化用户界面极大地改变了用户和电脑交互的方式。鼠标的普及让用户界面的元素更多、结构更加复杂，用户体验和心理学的研究成果也孕育、催生出了许多新的交互样式。其中就包含了一个对当今控件形态影响巨大的概念：渐进展示（progressive disclosure）。一般认为 Xerox 公司 1981 年的 Xerox Star 是最先在图形化界面中使用选择器/tab 的产品，虽然这个电脑商业成绩不咋地，但在用户界面方面做出了很多贡献。在这个用户界面中，设计师为了让用户不需要像命令行界面时代一样不停地通过打字、记忆命令短语来与计算机交互，因此决定采用以下策略：将高频使用的项目全部展示给用户，无需打字，只要在选项中选择即可：这个策略催生了选择器组件将暂时不需要使用和展示的信息收起来，只在用户点击按钮时再渐进展示：这个策略催生了 tabXerox Star 时代的控件样式非常粗糙，不管是 tab、开关还是多选器，都以按钮的样式呈现，因此某个选项到底是什么意思、具体怎么用，依然依赖阅读文案来判断。比如用户看到“对齐方式：左对齐/右对齐/居中对齐”，就应该能理解是在 3 个对齐方式中选择一个，而看到“展示：字符/段落”，就应该理解是在选择展示和字符有关的设置项，还是和段落有关的设置项。而为什么 tab、选择器成为了我们今天看见的样子？这又不得不提鼠标的普及让一种全新的交互形式：直接操作（direct manipulation）进入了交互设计师的视野。按今天的说法，直接操作一般指“直接对对象进行操作”，比如用鼠标直接以拖动的形式进行文件排序、放大缩小、位置移动等操作。相比菜单、文本输入框，这种操作形式更快速、反馈更充足、更符合直觉。比如我们现在非常熟悉的“把某个文件拖动到回收站”这个操作，就是直接操作的一个经典案例。虽然直接操作今天看来是理所当然的，小学生都知道怎么把文件拖到废纸篓。但 80 年代用户图形化界面诞生之初，用户对家用电脑根本没什么概念，更不要提鼠标拖动这种高端操作了。那么，设计师要如何教育用户学会使用直接操作这种新的交互形式？这个答案是：引入隐喻（metaphor）。简单来讲，隐喻即为“用直接或间接的方式，说明 A 和 B 很像、A 具有 B 的特性，或者可以用操作 B 的方式操作 A”。将用户完全不熟悉的人机交互概念用日常生活中的事物表述出来，就能使其将自己的生活经验移植/应用到人机交互中，从而降低学习成本、使用户通过直觉也能辨别出某个功能该怎么用。比如上面提到的“将文件移入废纸篓”，就是一个非常出色的、不言而喻的隐喻：因此，当设计师发现使用隐喻是行之有效的用户教育形式时，隐喻就成了当时流行的设计思路。顺着这个思路越走越远，最终诞生了像 mircosoft bob 这样类似游戏界面的浮夸系统样式，我放出来给各位嘲笑两下。话说回来，使用隐喻这股风潮也影响了控件的样式设计。比如 1988 年苹果开发的一个可视化编程软件 Fabrik，就采用了现实生活中“文件夹上的标签”作为隐喻来设计 tab，此举暗示用户可以快速地在不同页面中跳转，就像现实生活中根据文件夹标签来翻找文件夹中的文件一样。此时我们可以发现，Fabrik 使用隐喻的“tab 选项卡”和 Xerox Star 纯按钮图形化的“tab 选项卡”在样式上开始存在差别。用户无法再从文字上去理解这个控件的交互方式，而需要从图形上去分辨，动用自己日常生活的经验。因此从这个角度上来说，不同样式的控件映射不同的现实物体，不同的现实物体应该对应着不同的交互方式。比如“单项选择”radio button 使用的隐喻，就是收音机按钮。这种按钮按下去一个其他的按钮就会都弹起来，所以每次只能选中 1。而“多项选择”check box 使用的隐喻则是纸质调查表/备忘录上的打勾格子，因此可以选择多个。“按收音机按钮”和“在备忘录上打钩”，都是动态的“事件”，而只有“文件夹里的分页标签”是静态的“事物”，这种隐喻性质之间的差异让人对于 tab 和单选框用途差异作出直觉性的判断。因此因此尽管在 80～90 年代没有引起充分讨论，但系统设计中，一般会把 tab 用作静态页面的导航，而将单选框/多选框用作动态选择行为。以 Apple II（1986 或 1987）为例：相比之下，“菜单”作为最古老的交互控件形式，它的常见样式（下拉菜单）在隐喻流行起来之前就基本固定，可以算为人机交互虚拟环境下一种原生的概念，所以菜单的使用场景反而不受隐喻、不受现实生活中物体的特性影响。它结构简单、有大量空间来写说明文案，因此作为控件的实用性很强，放“静态信息”也没问题，放“动作”也行，有点像一个“收纳抽屉”。混乱的 90 年代～千禧年90 年代到 00 年代计算机/网络行业发展的势头有目共睹，使用场景的不断增长使得页面的复杂性指数级提升。因此交互设计师也就需要去不断地思考控件之间的层级关系、差异、适用的场景等等。这个时代各个大厂制定过许多关于“行为”与“信息”之间的规则，然后又一一将它们推翻。我们仍然以微软 windows 和苹果作为案例，看看他们的尝试。Windows 很快注意到了“行为”和“信息”之间的差异。在 html 那种蓝色带下划线的超链接按钮样式流行起来以后，windows 认为这种按钮看起来“安全、没有破坏力”，“不太严肃”，容易让用户联想起网页超链接那种页面之间的跳转。所以在 windows 7 的规范手册中，指导设计师应该尽量采用带边框、有阴影的按钮样式来承载“行为”。然而另一方面，windows 7 对于 tab/单选框的定位是模糊的。它允许使用选项卡 tab 来替代单选操作，只有被选中的 tab 下的修改才会生效。允许 tab 和单选操作进行互换在业界也有一些反对声音，比如说写 2000 年《GUI 设计禁忌》的 Jeff Johnson 就认为 tab 最好是只作为导航使用，而非选择器，因为这样做混淆了“信息展示”与“行为选择”的差异。最后，文字型按钮的出现，使得用户逐渐分不清什么是“tab”，什么不是“tab”。windows7 时代也出现了纵向排列的 tab。很不巧，windows 的另一个控件 wizard 有着长得很像纵向 tab 的侧边栏。这个侧边栏综合排列了信息导航、功能快捷操作等多种类型的入口。因此“tab”或者类“tab”的组件使用场景被进一步拉扯、拓宽。相比 windows，mac 的做法更加讨巧。mac OS 有单选框，但是他们也同时包含了非常类似 xerox star 原始样式的选项卡视图（tab view）与分段控件（segmented control）。两者虽然看起来一模一样，但从规范的角度上来说，前者负责信息展示，后者负责在单选、甚至多选的动作操作，可以说是非常掩耳盗铃，总体倾向于不区分“选择器”和“选项卡 tab”样式。mac 的这种控件既不使用隐喻，甚者有时也不写文案，要求用户通过控件出现的位置和上下文来判断其用途。之所以苹果敢应用这种简洁中带着些许豪横的设计思路，我个人认为主要是因为其产品比较大众化、场景没那么复杂。扁平化时代与隐喻失效经过了 00 年代控件的发展，10 年以后有两件事情极大地影响了用户的心智。iOS7 带起来的扁平化设计风潮，使得控件整体样式往极简、轻量的方向突飞猛进。原来不同控件的形状、色彩差异很大，用户不容易弄混按钮、单选框和 tab，但在扁平化设计的思路下，所有控件都用方块甚至文字本身来代表，这样做无疑削弱了控件的可识别性。其次我们上文说过，隐喻的运作方式是让用户将生活中常见事物与控件做类比。然而时过境迁，当用户生活中常见的事物已经飞速变化，老旧的隐喻就会失效。文件夹选项卡、收音机按钮……这些东西早就是老黄历了，假如“隐喻”需要事先解释才能让用户理解，那么它就不再能起作用。因此对于很多年纪很小的新用户来说，用选项卡 tab 承载行为操作并没有什么不妥当——毕竟今天文件夹都不太常见了。我们到底该怎么做？先说结论：不要制造没必要的规矩对于绝大多数场景比较简单的产品，菜单/单选/tab 不区分也无所谓对于复杂工具型/企业级产品，无论是移动端还是 PC/Web，最好区分操作/信息展示控件，严格区分单选和 tab 的样式。首先第一条：不要制造不必要的规矩。这条其实有点违背交互设计师的天性，我们天生就受不了含含糊糊的灰色地带。但控件的运用中，贴合场景比遵守某条据说行业通用的“规矩”要重要很多。比如说我听有些设计师的分享里提到他们会比较严格的要求作为导航控件的 tab 上不能放操作，而菜单才是操作的聚合。后半句话我们已经在上文论证过了，没有的事，菜单从诞生之初就放啥都行。对于前半句话我想出示一个案例：这张截图来自淘宝的千牛商家工作台里，这是一个给淘宝卖家的商家后台，它把“发布宝贝”操作露出放在纵向导航（姑且也叫 tab 吧）上。这显然是一个高频操作。在这个案例里，你可以说它还有其他的布局方式和解法，但是要说因为把操作放在 tab 上就能导致多么严重的用户体验问题或者多么严重的控件定义问题，那也大可不必如此夸张。对于大多数 C 端产品，不区分单选/tab，或者在一些定制化程度比较高的页面中用 tab 替代单选是可以接受的。其一是因为无数产品长时间的验证说明，用户在这些比较放松、简单的场景下并没有那么纠结控件样式。其二是因为 C 端产品的“信息”和“行为”其实没有现实生活中那么分明，往往处于比较暧昧，你中有我我中有你的情况中。以“定酒店”为例，“查看酒店的信息”是信息展示，“订酒店”则是动作流程，但用户从哪一步开始转“查看”为“动作”的呢？不一定。最后的最后，工具型/企业级产品不能应用 C 端产品的设计逻辑。复杂场景下（比如 tab 有嵌套关系，比如既有 tab 又有选择器）依然能让用户准确无误地理解控件的意图和交互形式，是交互设计时必须思考的问题。比如在 windows 新的 fluent 规范中，已经绝口不提 tab 和单选框之间的互换关系，tab 被定义为纯粹的导航控件，样式也保持了和单选/多选的差异。开关、复选框和单选组件如何区别应用？看完这篇保证会！在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义....我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/components
按钮 用户 操作 按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结 web 端按钮设计的相关知识点：本篇文章着重讲解 web 端按钮，app 端与 pc 客户端按钮有部分知识点与之相通。后期会持续更新这两个端按钮的相关知识～按钮的定义与作用1. 按钮的起源与定义在物理世界按钮是这样定义的：是一种常用的控制电器元件，常用来接通或断开“控制电路”（其中电流很小），从而达到控制电动机或其他电气设备运行目的的一种开关。在日常生活中，灯的开关、电视遥控器上的按键、汽车上的各种控制键等等都是我们 UI 按钮在物理世界的实体存在。所以在之前很长一段时间，都很流行拟物风格的按钮，即在触摸屏上展示 1:1 复制物理世界按钮样式的 UI 按钮。虽然现在 UI 按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射。所以 UI 按钮设计，是否直观、易用会直接影响用户完成整个业务流程的感受、意愿及效率。例如：使用电视遥控器调台，电视却没有任何反应——感到苦恼、无法完成调台；点击业务流程中的提交按钮，页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。在 UI 设计中，按钮的定义如下：是一个明确指示交互行为动作的组件，标记了一个操作命令，响应用户点击行为，点击后可触发一个即时操作获得相应的反馈&结果。2. 按钮的作用接下来我们看一下 UI 按钮的具体作用：作用一：触发某种功能通过操作按钮，触发功能获得相应的反馈&结果，例如：收起、展开按钮——点击收起展开页面信息作用二：引导用户进行下一步操作将按钮放在适当的位置，去引导用户进行下一步操作，避免用户不知道后续如何进行，从而提高任务流程完成率。例如：在分步骤复杂的表单最后放置的“下一步”按钮，用户填写完当前页后，点击“下一步”——进入下一个填写流程中。作用三：聚合信息使用按钮，跳转详情页面，例如：对于一些说明、隐私政策等等，如果需要展示的内容过多，但又不是当前页面的重点，可以设置一个图标按钮或文字链接按钮，通过点击触发，可跳转完整的内容详情页。作用四：培养用户习惯通过相对固定的位置、形式、文案，以及触发反馈，可以培养用户操作认知和习惯。例如：对于一些常见图标按钮，收藏、点赞、分享、说明等，用户看到类似的样式，就会知道是什么含义，点击后会获得怎样的反馈。按钮的分类与使用场景通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低接下来我们详细看一下这两大类按钮的具体细分和使用场景1. 命令按钮控件常规按钮常规按钮，有主次按钮之分。主按钮承载重要核心操作、次按钮承载辅助操作。常规按钮的常见状态主要有以下 6 种：正常状态（Normal)——按钮在页面中正常可进行点击操作的状态聚焦状态(Focus）——为方便键盘用户，展示电脑光标所在位置的一种状态。用户可以通过键盘上的Tab键对页面内的元素进行选择操作。类似于表单填写中输入框的聚焦状态(获取焦点状态），我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个，从而进行填写操作。该状态，很多产品都去掉了，但是在开发代码中是可以设定的。如果设计师合理利用，可以提高产品易用性。举个例子：表单填写过程中，用户通过键盘完成了所有的填写项目。当我们的按钮设计该状态，就可以通过键盘继续操作，先聚焦按钮，然后点击enter键进行取消或提交操作。悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态点击状态(Pressed)——鼠标点击按钮的时候，按钮给出的效果反馈状态加载状态（Loading）——点击按钮后，因为系统、网络等等原因，操作需要等待一段时间后才会跳转或生效。这个时候就需要加载状态反馈给用户，避免给用户造成困扰(疑惑有没有点击成功？），避免用户因为困扰重复操作，缓解用户的等待焦虑。禁用状态(Disabled)——表示该按钮不可点击的状态，用于页面中未达到触发条件的时候，按钮的样式。以上几种状态，通常通过改变其填充颜色的灰度和亮度来表达不同的状态，具体呈现形式，可以根据自己产品的特性去定义。下面，我们来看下主按钮和次按钮的详细定义和常见状态案例展示。主按钮主按钮为高权重按钮，与页面上的核心操作强相关，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦。主按钮可以是色块+文字，也可以是色块+图标+文字；通常为主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）次按钮次按钮也叫标准按钮，为中权重按钮，在页面中使用最多。通常使用边框+文字的形式呈现。次按钮可以是边框+文字，也可以是边框+图标+文字；通常为灰色、主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）。此处以灰色为例，展示其变化规则：图标按钮图标按钮是一种图形，样式不一，为低权重按钮，在页面中根据业务情况展示，丰富页面效果。通常以用户已经形成认知的形式去展现，例如：文字按钮/链接文字按钮、链接为低权重按钮，视觉感弱。当某个按钮在同一个页面上重复出现，为了不干扰用户视线，可以使用文字按钮，例如表格行的操作项。文字按钮、链接也可以与图标组合使用，层级略高于纯文本按钮按钮菜单菜单按钮是一种合集按钮，将页面中一些低频操作或同类型操作整合收起，以达到精简页面的效果。展现形式可以是色块、文字链接、图标等等，点击后展开具体操作供用户选择。其他命令类型按钮幽灵按钮幽灵按钮是网页设计中，以线框简单示意轮廓、文字示意功能的按钮：样式通透简约，可以与页面背景很好的融合常用于官网设计，与图片结合使用与次按钮不同点在于，不受规范约束，可以根据设计场景定制轮廓粗细、字体大小粗细等现在很多网页中，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用。（现在很多网页产品，更注重行为召唤、点击率，使用色块形式的按钮能更好的聚焦用户目光）悬浮按钮悬浮按钮是指悬浮在页面上方的按钮，不会随着页面的滚动变化消失。源自安卓的 Material Design。应用到网页上，通常承载一些咨询、客服、置顶等常用功能或者想让用户使用的功能。设计要点：悬浮按钮是按钮一种展现形式，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮，例如收藏；可用来承载常用关键操作，例如网站某个作品页面中的：收藏、评论、推荐、分享的悬浮按钮；可作为引导工具，引导用户操作，例如很多官网都会悬浮在线咨询、客服一类的按钮；可以根据不同场景，在页面中选择是否放置悬浮按钮；不要过度使用悬浮按钮，如果一个页面上悬浮按钮太多，且分散在各个地方，会干扰用户视线，使得整个页面乱糟糟的；悬浮按钮只承载正向操作，不应该执行危险破坏性的操作，例如删除。2. 选择按钮控件选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：开关按钮开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效，适合用于具有对立意义的选项，无需与命令类按钮搭配使用。当出现以下情况时，我们应该使用开关：无需确认或审核操作，即可生效选择后的结果选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时单选框单选框是只能选中其中一项的按钮，它容许用户在一组选项中选择其中一个。选项数量一般为 2-5 个平铺展示，会更快捷提供给用户进行选择描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断复选框复选框是一种可同时选中多项的基础控件，允许用户从多个选项当中选择多个选项的选择控件。选项数量一般为 2-5 个平铺展示，会更快捷提供给用户进行选择具有半选中状态(indeterminate)可以独立出现，常用于「是否同意用户协议」等场景其他状态切换按钮胶囊选择按钮胶囊选择是单选框的一种衍生样式，特点是点击面积更大，同时更强调选项。在 element 中，胶囊选择既可以作为单选按钮、也可以作为多选按钮。但个人认为，胶囊选择的样式更适合当作单选按钮。标签选择按钮标签选择按钮样式多样，可以以按钮的形式单独存在，也可以与单、复选框结合构成结合样式使用。常规按钮的视觉组成上一个章节，我们弄清楚了按钮的分类与使用场景。以上按钮中，使用最多、层级最高的就是常规按钮，接下来我们以常规按钮为例，剖析它的视觉组成、绘制技巧以及各类风格样式。1. 常规按钮的组成元素常规按钮由容器、背景、描边、圆角、图标、文案、投影组成，这些元素不是必须出现的，而是根据具体使用场景去呈现。不同的元素搭配，构成的按钮样式也不同，以传达给用户各类信息。容器：整个按钮的承载体，容纳其他组成元素。容器的形状一般为规则图形，尺寸根据页面要求制定。背景：为按钮的底色，不同颜色的底色可以表达出按钮不同的功能特性，例如红色代表危险操作；同时也是不同按钮状态的展示形式。描边：为按钮最外层的边框线条，常用于次按钮的描边。不同颜色描边可以表达出按钮不同的功能特性，例如主色描边二级按钮、灰色描边三级按钮、红色描边危险按钮；同时也是不同次按钮状态的展示形式。圆角：传达按钮气质的一种元素，可影响界面视觉风格。图标：对按钮文案的一种图形化表达，目的是为了加强按钮层级、吸引用户注意力、丰富美化页面。文案：使用合适的字号表现样式，使用精简的文字表达按钮的含义。投影：一种丰富按钮样式的设计手法，让按钮突出，更具质感、层次感。可提升按钮的视觉呈现。特殊风格才会有，一般没有。根据以上组成元素，接下来我们来详细看一下，如何设计定义这些属性，不同属性对按钮的呈现有何影响。2. 按钮的容器与尺寸制定容器的形状，需要遵循无障碍设计在一套系统中需要保持样式的统一性符合用户认知，使用用户已经形成心智模型的样式设计师如何做无障碍设计？从这五个方面出发！互联网设计师如何着手发起无障碍优化？阅读文章 > 根据不同场景大部分产品可以将按钮分成超大、大、中、小三种。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸。此处做一个通用展示。超大按钮：用于登录等具有重要意义的场景下大按钮：用于全局性操作的界面上中按钮：标准按钮，可用于各类操作场景小按钮：用于局部控件类操作界面，例如下拉面板、选择器弹窗、表格等按钮的高度如何定义？通常以 4 的倍数去制定按钮的宽度如何定义？为了保证同一个组件内，不同字数文案按钮的样式统一，可以固定 4 个字以内的按钮为一个固定宽度（min-width)，超出 4 个字设定 padding 值自适应适配。3. 按钮的背景与描边按钮的背景色与描边色，可以表达出按钮的状态，也可以表达出按钮不同的功能特性。按钮的状态在前文我们已经详细展示过了，接下来我们来看看不同颜色的按钮表达出的功能特性。通常使用的颜色有以下几类：品牌色——主题色，常用于普通信息按钮功能色——成功色、危险色（出错、失败）、警告色（提醒）其他——灰度色，用于层级较低的二级、三级按钮4. 按钮的圆角按钮的圆角，主要分为三大类直角、圆角、全圆角。圆角通常使用的是小圆角，应尽量避免大圆角。直角——圆角为0px，形状尖锐，给人严谨的感觉，常用于性质较为严谨的产品。圆角——通常控制在按钮高度的1/6及以下，以2的倍数设定，例如2px、4px、6px等。通常根据产品的定位去设定。例如钉钉、企业微信的受众比较广泛，主要按钮的圆角值为4px；飞书的受众偏年轻，主要按钮的圆角值为6px。全圆角——全圆角按钮的圆角值固定为高度的50%，按钮形状柔和。web端全圆角的使用相对以上两种比较少，因为需要考虑到鼠标的操作热区与其他控件的组合使用。另外，同一套系统中，不同大小按钮的圆角值，应当根据按钮的尺寸，按统一比例设定，而非使用固定圆角。以达到视觉比例平衡，圆角“看起来”一致。5. 按钮的文案对于按钮中的文案，需要遵循以下原则；使用合适比例的字号精简文案，避免折行使用合理、无歧义的文案6. 按钮的投影按钮的风格除了扁平风，还有渐变、轻拟物等风格。通过颜色渐变、添加投影样式，可以塑造其他风格的按钮。对于按钮的投影需要注意以下几点：基于按钮本身的色值，去设置投影样式，会让投影更干净舒适。浅色按钮应避免使用投影，否则会影响按钮的识别度，页面显脏。根据页面慎重使用投影样式，一般层级较高的主要按钮才使用。（B 端扁平风格按钮使用居多）按钮的层级与排布分析完了表层样式规范，这个章节，我们来看看按钮在界面中的具体使用。1. 按钮的层级对于页面中常用组合搭配的按钮层级如下：01～12 层级由高到低排列（具体是否有这些样式，根据产品情况确定）高权重按钮——色块按钮中权重按钮——描边按钮低权重按钮——文字按钮、图标按钮（此处我们暂不考虑独立场景、层级的按钮）2. 按钮位置web 端页面，除去顶部和侧边导航栏，主要内容页面里的按钮该如何放置排布呢？我们可以将内容页面分为以下三个部分：标题栏(Header)——主要是全局性操作按钮，例如编辑、新建等；主体内容(Body)——有两种操作按钮第一种，是局部操作按钮，例如表格内部的操作项目；第二种，是全局性完成按钮，跟随在内容后的，例如取消、确定、上一步、下一步等；底栏(Footer)——主要是全局性页面完成按钮，需要贴底固定性质的。例如取消、确定、保存等。对于弹窗页面，内容相对比较少，按钮排布方式可以如下：对于内容页和弹窗页底部按钮的对齐方式，根据具体业务场景和视觉协调度选择即可（内容页居中比较多，因为页面太大了；弹窗右对齐比较多）。注意保持，同一类场景下对齐方式一致。3. 按钮顺序：确定了按钮的放置位置，还需要确定按钮放置的顺序。放置顺序分为两步确定：第一步：确定主按钮、次按钮的顺序第二步：确定同级别按钮之间的顺序确定主、次按钮的顺序首先，我们看一下页面中按钮的阅读顺序：左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。常见问题讨论：确定和取消该怎么放？这个问题，是在设计的过程中，经常被抛出来讨论的问题，有没有固定确切的答案呢。首先说明，没有。各个平台、软件都有不同的规范。最具代表的就是：win 的用户都习惯确定在左、取消在右；mac 的用户都习惯确定在右、取消在左。个人更倾向确定在右、取消在左的放置规则，原因如下：1. 根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；2. 根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；3. 根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；4. 根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；5. 根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到 web 端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约 90%，左利手的人仅约 10%，确定按钮在右，更利于绝大多数用户的操作）对于确定和取消到底该怎么放，大家可以结合自身产品的情况定位，需要注意的是，要保证同一个产品内规范一致。确定同级别按钮的顺序对于同级别按钮，我们需要遵循以下原则去确定顺序：相关按钮临近原则，将与主按钮相关的次按钮优先放在主按钮旁边。根据业务场景，按照前文的阅读顺序规律，衡量按钮权重再进行位置分配。除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：按钮设计的原则总结&注意事项最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项1. 设计原则按钮样式符合用户心智模型按钮类型、层级分明，规则统一按钮状态清晰，操作反馈明确根据业务场景使用合适的按钮2. 设计注意事项一个操作区域至多一个主按钮主次按钮样式统一、与其他控件样式区分处理按钮样式慎用大圆角按钮中的文字，字号适中，文案精简、无歧义合理使用投影样式根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。参考文章推荐1. 「按钮的学问：确定在左，取消在右？」推荐指数：五颗星推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式按钮的学问：确定在左，取消在右？开篇layq ：确认框，顾名思义，就是对用户的关键行为进行确认。阅读文章 > 2. 「交互细节！确定按钮到底该放在左边还是右边？」推荐指数：四颗星推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好交互细节！确定按钮到底该放在左边还是右边？仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？阅读文章 > 3. 「大厂高手出品！中台组件设计指南：按钮篇 」推荐指数：五颗星推荐理由：使用完整的规范去写的文章，实打实的案例。大厂高手出品！中台组件设计指南：按钮篇希望接下来每一篇关于中台组件的分享都对大家有所帮助，本文主要分享中台组件按钮的发展史、按钮的类型、按钮的使用规范等内容。阅读文章 > 4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」推荐指数：四颗星推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。按钮规范系列！从四个方面详解「按钮位置」的设计方法@Daidai丶呆 ：两年前，我写过一篇文章《高手课堂！阅读文章 > 5. 「5000 字干货！写给新人的按钮设计指南」推荐指数：五颗星推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。5000字干货！写给新人的按钮设计指南前言说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。阅读文章 > 6. 「从 6 个层面，系统分析按钮设计的知识点」推荐指数：五颗星推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 7. 「推荐！禁用状态二三事 」推荐指数：三颗星推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项推荐！禁用状态二三事sherry ：禁用，顾名思义，代表不可用的意思。阅读文章 > 结尾整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/web-button-design-guide
用户 窗口 操作 在弹窗（上）篇，我们讲完了弹窗的定义与应用场景，弹窗（中）篇说完了基本布局，那么这篇内容，我们将讨论两个日常工作中深恶痛绝的常见问题：连续弹弹窗、弹窗叠弹窗，本篇内容中提到的“弹窗”多指 modal dialog 模态对话框——毕竟99%的弹窗体验问题都是模态对话框的问题。用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 用超多案例，帮你掌握PC端的弹窗设计（中）上期我们小聊了一下弹窗的定义与使用的常见场景，本期我们来聊点实际的：弹窗的内容布局，本来本期想把常见的两种弹窗问题：弹窗的从属关系（弹窗叠弹窗）、弹窗的流程关系（连续弹窗）都讲一遍，但写完基本布局以后发现字数超了，所以弹窗这个话题从 2 期变成 3 期了。阅读文章 > 信息弹窗的体验问题弹窗留给广大群众的印象很糟糕。即使不是交互设计师，聊起“弹窗”这个东西的时候，脑海中一下子蹦出来的第一印象都是 PC 时代铺天盖地、像电线杆子上小广告一样密密麻麻、层层叠叠的广告弹窗。假如你不小心点开了不该点的网站，或者安装了“急速下载器”的客户端，那开机后迎接你的就是十几个按顺序打开的弹窗、并且往往还附带震耳欲聋的音乐——每个都需要你亲自、纯手工点掉。广告弹窗之所以成为体验问题，也很好理解。即使不是专业设计师的人也能细数一二，比如 19 年这篇法治周末就列举了广告弹窗的三宗罪：推送频率过于频繁关闭按钮过于隐蔽重叠的窗口影响正常网页的浏览https://finance.sina.com.cn/chanjing/cyxw/2019-12-18/doc-iihnzahi8244276.shtml前两个问题本篇不作讨论，主要是第三个问题很值得细究：之所以重叠的广告弹窗很恶心，一定程度上是因为它让低用户价值、低优先级的内容（垃圾广告）遮住了高优先级、高用户价值的内容（用户自己打开的页面），并且除非用户和弹窗进行交互（关闭广告、或者拖动自己想看的窗口），否则根本无法获取自己感兴趣的内容。基于我们在从交互的角度讲讲弹窗（上）中的结论：弹窗是一种对注意力的引导形式，我们可以说，作为一种信息展示弹窗，弹窗堆叠导致用户的注意力被错误地强引导向了低价值的内容，并且关闭成本太高，因此这种设计手段不可取。操作弹窗的体验问题既然连续弹信息弹窗的体验问题部分在于遮挡了高价值的内容；那么连续弹操作弹窗是否存在体验问题呢？毕竟操作弹窗都是用户自己主动打开的，因此对于操作弹窗的内容多少是有预期的，甚至可以说操作弹窗上的内容都是存在用户价值的，用户为了完成某些操作，的确需要看到这些内容。先说结论：在网页端存在多种处理弹窗层级关系的方式，的确应该尽量避免模态操作弹窗的堆叠，但并不是完全不可接受。然后我们来细细的拆解操作弹窗的“连续弹窗”和信息展示弹窗的“连续弹窗”有什么差异。1. 弹窗的层级与任务的从属关系上文使用的例子是多个广告弹窗连续弹出，各个广告弹窗之间实际上没有层级关系——没有哪个广告弹窗是另一个广告弹窗的入口。但操作弹窗却很经常出现这样的情况：想象你打开一张工资编辑表，新增/删除员工可以在页面上进行，但是对每一个员工的工资/补贴做编辑，则需要进入下一级员工工资编辑弹窗进行操作，那么此时“工资编辑表页面”和“员工工资编辑弹窗”就构成了页面上的层级关系（或者父子级关系），而从目标与任务维度上来讲，“编辑员工和工资”是用户想要达到的总任务目标，“编辑某个具体员工的工资”是延伸出来的可选子任务。用户目标与任务之间的关系，映射到页面上，也就形成了页面、弹窗之间的从属关系。这个映射做得是否符合用户的使用习惯，就看设计师的功力了。比如大部分艺术创意类工作的目标都没有那么精确，所以任务也就经常是非线性的：用户总是需要调整一下这个滑杆，不太满意，然后又去调一下那个参数。而不是像填表单、编辑表格那样，打开页面之前心里就想好了：这里要从 0 调成 10，这个按钮给它拧开，这个项目给它删了。因此工具性产品或者创意生产类产品都采用工作台的模式，使用非模态弹窗或者干脆不使用弹窗，从而允许用户多线程、多维度地自由工作。这部分看的迷糊的请看前篇：从交互的角度讲讲弹窗（上）。同理，设计师会把一般来说用户不需要也没办法同时处理的、具有逻辑上从属关系的任务，做成具有父子级关系、或者一定展示顺序的页面（或者弹窗），而不会把这些东西全部一起呈现给用户。交互设计师的其中一项基本工作是将页面的信噪比维持在一定的区间内、提供给用户他们当下需要的信息。假如一件事情没那么急迫，那么就没必要把它招呼到用户面前。2. 从属关系的实现方式与问题即然页面/弹窗之间可以具有从属关系，那么我们如何在页面中体现这种从属关系？它们各自有什么特征与问题？我这里总结了 3 种常规的表现形态，我们一项一项地盘点它们各自的问题。3. 操作弹窗的“弹窗叠弹窗”“弹窗叠弹窗”，或者“父子级弹窗”是一种古老的交互形式，在 PC 应用程序设计场景下，所有的任务都在弹窗的前身——窗口或窗体（window）下完成，因此窗口相互重叠是不可避免的。应用程序端的窗口重叠有两种情况：物理上的重叠与层级上的重叠。用户在 windows 和 mac 或者其他操作系统上可以打开多个窗口，但用户不可能同时和所有的窗口互动，因此窗口拥有的一项特性：当存在多个窗口时，只有最顶层的窗口是正在与用户互动的窗口，称为“活动窗口/当前窗口 active window”。用户的输入焦点、键控都仅对当前活动窗口生效。以MacOS-文件夹为例我们从这种设计中可以发现在窗口物理上有重叠的情况下，系统虽然允许用户快速切换窗口，但事实上限制了每次和用户交互的窗口。同时，在桌面端上也允许存在从属于某个主弹窗的次级弹窗。这种“次级弹窗”更类似于网页端所讲的“模态弹窗”，如果你不关闭它就无法与其父级弹窗交互，所以我把这种弹窗的重叠称之为“层级上的重叠”。以MacOS-网络-WiFi为例虽然“弹窗叠弹窗”这种设计形式历史悠久，但是问题也颇多。其中最明显的两个问题如下：弹窗层级过多，不容易找到可交互的活动窗口多层嵌套弹窗的生效模式比较反直觉，并且经常在网页端被错误应用第一个问题我相信大部分用过 windows 的人多少碰见过。windows 的次级窗口（ owned window ）可以随意拖动，位置并不固定，而且部分 windows 版本中并不展示在底部栏 taskbar 上，所以有时并不容易一眼发现到底应该操作哪里。因此 Mac 改进了它的次级窗口样式，使其紧贴父级窗口的标题栏，这样窗口的从属关系比较明确，一眼容易发现可操作的位置。类似的问题在网页端上也比较容易出现。当弹窗层级过多，而当前最顶层的模态弹窗容器又比较小时，页面噪音就过多了。这个时候用户就要费好大的劲儿从一堆弹窗中找到最顶层那个的可交互弹窗，不说交互体验如何，视觉上就不太简洁，也就丢失了弹窗“引导用户注意力”的基本价值。第二个问题其实发生得很普遍。举个例子，假如你现在在做一款人力资源管理系统，现在有一个“编辑员工角色”的弹窗长成这样：前端一看哎呀太好了，我们刚好之前做了一个“新增角色”弹窗，直接往这个“编辑员工角色”弹窗上一放就解决问题了，甚至还不打断用户的工作流，我看体验非常好：此时假如用户点击“确认新增”，就对输入的字段进行校验，没问题了那么角色就在后端保存上了。此时回到上一级“编辑员工角色”弹窗，用户立刻就能在“角色”下拉框中找到自己刚刚新增的角色，但美中不足的是假如用户在“编辑员工角色”弹窗上点击“取消”，那只是取消了对员工角色的编辑，角色的新增操作已经生效了。好像没什么问题是吧？然后我们举第二个例子：假如我们作为 HR 正在新增一群员工，每个新员工可以有自己的花名和备注，但我们也可以现在不填，等以后再说。新增员工的弹窗长这样：假如花名和备注因为填写频率不太高，所以被放在了二级弹窗上，那么：现在点一下“确定”，前端校验仍然可以做，但员工徐莉莉的花名和员工备注只是在弹窗上暂存，除非用户在“新增员工”弹窗上点一下“确认新增”，否则这批新员工的数据都不会提交后端保存（毕竟员工花名和备注大概率是和员工姓名存在一张表上的选填字段）。上面两个例子讲到这里不难发现，虽然它俩看起来长得一模一样，但是数据的提交方式却存在差异。当出现这种问题时，就非常难以简洁地和用户解释为什么类似的交互形式造成了截然不同的后果。一般来讲，我们做父子级弹窗+延迟生效模式时，（不清楚什么叫延迟生效模式也请看：）采用第 2 个例子数据提交方式，即子级弹窗的数据仅作暂存，当父级弹窗提交时才一起生效；另外假如存在第 1 个例子的情况时，一般以导航的形式打开新的网页窗口引导用户前往“新增角色”模块进行操作，而避免和第 2 个例子造成混淆。但总体而言，应该尽量在网页上避免操作弹窗叠操作弹窗的设计方式，并且完全杜绝 2 级以上操作弹窗的重叠，因为大部分用户很难理解这其中的弯弯绕绕。4. 流程弹窗/多级弹窗流程弹窗的历史和多级弹窗其实都是在同一个弹窗容器上做内容的变化，它俩的差异是：流程弹窗有步骤上的顺序（上一步、下一步），并且一般与延迟生效模式搭配，在最后一步统一提交信息。多级弹窗没有步骤上的顺序，且往往与即时生效模式搭配（尽量避免与延迟生效模式搭配，否则会存在与弹窗叠弹窗一样的问题）不管你用哪一种弹窗类型，注意弹窗只有一个容器，因此右上角的“X”是对流程/多级弹窗起全局作用的关闭按钮。近年来 B 端/工具型产品的形态愈发复杂，多级弹窗也变成了一个比较常规的设计方式，建议大家花点时间搞搞清楚。比如说飞书的「分享」功能，就有这么一个非模态的、介于 context menu 和 dialog 之间的东西，也符合我们「层级高于页面、容器是方形」的弹窗定义。5. 连续弹窗一般不存在多个不同的操作弹窗衔接在一起，但是因为种种原因，连续给用户弹多个反馈/再确认弹窗还是挺常见的。我们在这里就简短地带过一下这种情况。总体而言，我把连续弹反馈弹窗分成两种类型：把用户当大傻子型：意图用多重再确认来阻止用户进行一件事情（一般是卸载软件），我们都知道这体验很差，假如用户体验并不是你的产品主要的考量点，那么当我没说。绝大部分的场景下，合理设置再确认弹窗能够避免 99%的误触，虽然亦有意见表示用户可能日常关闭各种弹窗已经形成了肌肉记忆，只有一次的再确认弹窗可能顺手就被关闭了，并没有起到防错的作用。所以极少数误触造成问题比较严重的场景下，可以用输入文字等方式提高再确认弹窗的操作成本，但绝大多数产品的绝大多数场景只需要 1 个常规的再确认弹窗就够了。产品各干各的型：当一个模块有多个产品经理负责时很容易出现这种情况，每个产品都提出了自己的再确认措施，并且各调各的接口，每个弹窗的触发规则都有点差别。那么这种情况就需要交互去协调同一个产品的不同再确认弹窗弹出逻辑，尽量把这些弹窗的重点信息整合在一个弹窗上，并且优先展示阻断性的问题，建议不那么急迫的事情优先级适当往后调。如何优化B端弹窗的使用体验，这里有7个设计方向！本文会讲一些实用的 B 端弹窗设计方法：如何使用弹窗：根据应用场景、交互需求、内容量、一致性原则如何优化弹窗体验：弹窗按钮、弹窗高度、关闭方式、优化流程…阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design-3
用户 产品 操作 作为 UX 设计师来说，通过设计提高用户的操作体验是我们的工作重心。以最短的路径实现用户访问需求，同时保障产品需求和用户体验的双重达标，对于 UX 设计师而言至关重要。最近在体验产品的过程中，发现了很多设计不错的解决方案，总结了一些在提高用户体验层面的优秀案例。涵盖功能使用、业务流程、用户群体、个性化设计、手势设计等方面，希望可以带给大家更多启发。往期回顾：10个产品细节剖析，让你看看大厂是如何做设计的！作为 UI 设计师来说，都是一群细节猎人，以像素级的细节刻画着每一个需求。阅读文章 > 10个产品细节剖析，让你看看大厂是如何做设计的！感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。阅读文章 > 大厂出品！14个贴心的手势交互设计细节随着触屏时代的普及，借助手势交互可以提高用户的操作便捷度和效率。阅读文章 > 特殊场景下的差异化设计根据用户使用场景和特殊情况出现时，产品会结合变化呈现不同的功能或者服务，这种差异化的设计更能体现情感化设计的一面，提高用户对于产品的认可度。腾讯新闻 APP 在东航事故出现时，在底部操作栏新增了祈祷的图标，方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求，也体现出了产品的温度，带给用户更强的粘性。优化指引路径提高操作效率通过提取本机号码一键登录减少了繁琐的注册流程，提高了登录的效率，减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容，当用户未勾选时通常都是提示用户，指引用户选择后操作。这样的设计增加了用户的操作路径，使用体验不是很好。网易云音乐 APP 在同样问题出现时，提供了一个弹窗进行指引，用户无需重复操作，直接点击“同意并继续”即可完成登录。在用户误操作出现时，无需用户过多的操作路径，给出了更高效的操作解决方案，提高了用户使用体验。温馨提示降低用户的过度依赖随着互联网时代的到来，太多的娱乐产品占据了我们的时间，过度依赖和使用耗费了大量时间。特别是短视频的走热，刷视频容易带来过度依赖，影响用户的视力等健康问题。抖音 APP 作为用户量庞大的短视频产品，提高用户体验至关重要。为了降低用户的过度依赖，提示用户注意休息，特意设计了温馨提示。用户可以设置提示时间和进行管理，APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度，也能辅助用户做好时间管理，以免过度依赖而影响休息时间。隐藏式设计提高版面利用率对于用户来说希望内容具有较高的可见性，提高内容的曝光度才能被关注。在控制内容的优先级时，通过隐藏式设计可以满足更多内容的呈现，不过需要做好隐藏内容的引导，提高隐藏内容被发现的概率。网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计，将签到相关的附属内容隐藏在展开卡片中，为更多主要内容提供了展示空间。为了提高展开的交互设计，在每天初次访问时会默认展开，然后再收起隐藏，这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求，通过动作引导提高了用户知晓度，是一个具备较好体验的设计解决方案。更人性化的模式设计随着用户群体的跨度增加，为了带给不同年龄段用户更好的体验，众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计，还有针对青少年儿童设计的时间管理等，不同模式满足了更多不同年龄段的用户需求。比如优酷 APP 在个人中心设计了“模式切换”，点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化，带给用户更加人性化的使用体验。定制化的播放页模式设计不同用户对于产品的使用需求有所差异，固定的模式虽然可以减少产品的开发成本，但是单一的体验不够人性化。针对不同用户提供更多选择，可以带给用户更加人性化的体验。MOO 音乐 APP 为了满足不同用户对于播放页的体验差异，设计了播放页模式定制化切换，用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择，模式设计以可视化的图形展示，便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者，却把更好的体验带给了用户。缩放预览满足对细节的体验随着短视频走进更多用户的视野中，短视频的形式也是越来越丰富，满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台，对于细节的体验因人而异，缩放画面满足对于细节的体验才能更加人性化。抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览，配合缩放的手势交互带给用户放大细节查看的体验，满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向，更加便捷的操作有助于提升用户对于产品的使用体验。满足用户好奇心的设计用户从小白到依赖是一个逐步探索的过程，好奇心的用户会点击尝试任何的功能，甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验，给予反馈式的设计才能满足好奇心的驱使。爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗？有没有尝试去点击体验，作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面，为该功能的曝光新增了首页入口，用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心，也赋予了 LOGO 展示功能化的作用。可以标记和叠加的点赞设计点赞设计在众多产品中均有体现，这是用户表达对于内容的喜欢，以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验，点赞设计也被脑洞大开，在表情化、叠加点赞、点赞标记、微动效等方向不断探索。小宇宙 APP 在播放页中对音频进行点赞时，可以多次叠加点赞，点击之后会针对音频播放进度条进行点赞标记，反复点击也会使得进度条纹增高，以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计，也能通过标记和进度条纹的高度让用户记住关键的部分，方便后续回顾的时候知道哪些时间段是重要内容，提高用户对于产品的使用体验。差异化的短视频推荐设计作为新闻资讯类产品来说，大部分用户的习惯还是图文结合的阅读形式，不过随着短视频的出现，改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现，改变了用户的阅读习惯和获取内容的形式。央视新闻 APP 作为新闻资讯类的专业平台，在满足用户阅读新闻的同时，也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口，点击之后会有推荐视频展示，差异化的推荐设计不仅提高了内容的曝光度，也吸引了用户的关注度。小结本期为大家总结了提高用户体验的十个优秀设计解决方案，体验、分析、总结是为了掌握别人的设计经验，积累设计灵感并运用到项目设计中。灵感的积累离不开总结，探索细微之处的差异化对于 UX 设计师而言至关重要。本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-skills-3
用户 操作 产品 前言若想提升用户的粘性和留存率，产品需要在设计层面做好考量，给予用户更美好的使用体验，以有效避免用户的流失。那么，有哪些产品的设计细节体现了这类思考？本篇文章里，针对部分产品的设计细节做了分析，一起来看一下。小宇宙隐藏的彩蛋-情感化背后的思考1. 使用场景当使用一款较好的产品时，会不自觉地探索每一个模块。在「设置」-「关于我的」中，向上滑动屏幕时，会出现一个电池盒的装置，让用户看到耳目一新的品牌传达。2. 设计思考设计目标：提高用户使用产品的粘性，为「Z 世代」年轻人提供彩蛋等有趣、可探索的设计方案，从而提升产品的传播与使用频率。作为一款音频博客 App，和其他产品不一样的是，「小宇宙」抓住目标用户需求，去掉附加功能（可扩展的消费场景功能等），给用户清爽、简单、易操作的使用体验，同时内容推荐更符合我的需求。虽然小宇宙产品依托手机平台不需要外置的电池装置，但小宇宙依然给展示出来虚拟的电池装置。我们都知道，移动互联网还未到来时，听音频都要去电器城买收音机，最头疼莫过于听着听着突然没电了，还要更换电池才能继续收听。都是经历过才会有的感受。现如今，当用户在「关于我的」发现收音机电池装置，会有一种怀旧与神奇感并存，不仅加深了品牌记忆点，还能抓住用户心智给予情感化寄托。这里就要补充一下，当用户看到时一定是自发性的，再加上传统电池壳都会有品牌漏出，用户既不会觉得过多宣传，也不会过于反感。反而会加深用户记忆，增加用户粘性。从设计的角度，标识+产品文字（制作起来不算难），但小小的设计就可以让用户形成品牌记忆点，真可谓一举两得。一款好的产品不需要打扰用户、强制外漏。相反，而是十分腼腆，给用户更多的空间去探索发现，团队只需要把产品做好，满足用户需求就足以。设计方案：可以在不干扰用户操作的页面以外，或者是产品本身的宣传页，关于产品页等较能表达产品理念的展示页面提供一些小小的彩蛋。一定注意不要强制外漏来表现设计。因为，你不知道哪部分用户会反感，哪些用户会喜欢。微信读书收藏与返回-贴合场景高效操作1. 使用场景在阅读过程中，提供两种关闭书籍的操作，一个是顶部导航栏的返回按钮，另一个是上滑退出。2. 设计思考设计目的：解决单手操作时，返回首页按钮难以触达的交互手势。设计方案：在专注阅读时，通过上滑交互，可以快速返回首页，也可点击标签栏的返回图标，提供两种返回的交互形式，满足不同用户操作习惯。既然有上滑，那下拉是什么？下拉反而能「添加当前书签」再次下拉「取消当前书签。」上滑「返回」、下拉「收藏」两个交互对立又互斥，只要做不好，使用体验就大打折扣，好在「微信读书」做出来了，并且在使用效率上提高了很多。蚂蚁森林收取能量-快速收取能量的方法1. 使用场景当我收好友能量时，经常会花 2-3 分钟来重复操作，消耗的时间过长，体验不好。2. 设计思考设计目标：解决用户通过瀑布流好友列表，挨个进入挨个返回，操作过多，浪费时间的问题。提高收能量的效率，降低操作时长，提高用户收好友能量的互动性。设计方案：在「蚂蚁森林」页面，能看到右下侧有找能量按钮，点击进入可收能量的页面，通过不断点击相同位置，可进入不同好友主页，固定的操作入口，固定的操作，从而提升收能量的效率。偷偷告诉你一个秘密，在 watch 中收能量，要比手机更方便更便捷。抖音放大看-细节更清晰，内容焦点更明了1. 使用场景同一个视频，不同人看关注的焦点不同，很难满足所有用户观感体验。2. 设计思考设计目标：解决不同用户聚焦内容的清晰呈现。设计方案：用户在观看视频时，双指在屏幕上放大缩小，可放大视频本身，看到更清晰更想看的内容。作为全民都在使用的产品，上传的视频会有各种尺寸，手机屏幕是固定的，想要看训练姿势的细节，只有放大才能看得更清楚。还有类似「5 分钟电影」中某个人物或细节，通过双指放大视频，来看到更清晰的内容。知乎快捷弹幕-预判用户预期的弹幕才是精华1. 使用场景当产生共鸣、认可观点或有笑点想要快速发弹幕时，输入文字的时间过长，造成视频观感的断续。2. 设计思考设计目标：解决输入弹幕文字时间过长从而错过精彩瞬间的问题，或想发弹幕苦于当下词穷等问题。设计方案：在知乎中，视频页下方弹幕列表提供三种发送弹幕的方式，分别：文字、表情、快捷弹幕。要想高频发送弹幕可以点“快捷弹幕”这里推荐了本视频内以及同话题视频中高频出现的短句和知友的神弹幕，总有一句是你的菜。在体验感与效率提高的同时，发送速度也快了 N 倍有余。这样的解决方案能给用户带来更高效的使用体验。促进弹幕的使用频率，提升视频活跃度。中华万年历切换日历类型-给不同用户提供多种选择1. 使用场景用户想对照日历看天气、星座、择吉日程、需要来回切换不同软件或者 Tab之间来回切换，页面之间割裂感强，非常影响操作体验。2. 设计思考设计目标：提供多种日历类型，快速切换，减少学习成本。设计方案：在「中华万年历」日历模块，点击底部 TAB 中的「日历」模块，供用户选择四种日历类型，分别为：传统日历（展示农历阳历、节假日、节气等）天气日历（只在未来 1 个月中展示温度图标和温度、）星座日历（本人与每日速配星座以及运势等）择吉日历（嫁娶、出行、入宅、开市、盖屋等等）。保持统一设计语言的同时，侧重不同内容的展示，既能视觉降噪，还可以给用户提供人性化解决方案，真可谓一箭双雕。闲鱼个人页快捷入口-提高曝光，同时解决屏幕过大导致的高频热区点击问题1. 使用场景选好一款二手产品，沟通聊天都很顺利。想进一步查看卖家信誉度、平台认证等信息，以确保安全可靠。这时会点击头像区域进入卖家主页，商品详情页与卖家主页、聊天页与卖家主页都会存在频繁切换操作，如何缩短手势距离，提升交互操作。2. 设计思考设计目标：解决卖家主页快速访问操作，提高卖家「宝贝」更多曝光，从而提高商品的成交率。设计方案：用到 iOS 系统交互，左右两侧沿屏幕横向滑动手势，屏幕右侧向左划入进入卖家主页，屏幕左侧向右划入返回上级页面。不仅如此，给予‘左滑看 TA 的闲鱼号’文字描述，更能加深用户使用产品时的交互操作，提高主页曝光，展示更多商品给用户。盒马食材百科-全新体验让你爱上做饭1. 使用场景做饭时，先选好要吃什么食物，再去买对应的食材，遇到商家缺粉缺料的情况，真是让人头疼，做饭兴致瞬间降低。2. 设计思考设计目标：一站式服务，先选要吃的主（食材）再去挑选菜品和对应的佐料（就好比点外卖：我今天想吃米饭、炸鸡，土豆粉。一定是有目的地先选择（食材）方向。而不是今天想吃粤菜、或者川菜，具体吃什么再进行菜品选择（啊好烦，还是吃土豆粉好了）。大大降低做饭的制作体验。设计方案：在「吃什么」-食材百科内，按照果蔬市场菜品分这几类：肉禽蛋、蔬菜、水产等。把当季果蔬都罗列出来。用视频呈现出来，直观了解制作过程，降低理解成本。不仅如此，底部购物筐提供一站式的食材和佐料，只要一键下单，即可坐等食材送到家。相比某厨房选好菜品，再去对应佐料一个个购买，增加时间成本的同时，做饭兴致也慢慢降低。可能出现：食材到了，我已经不想做饭这种情况。iPhone 地图快速显示导航-绕过解锁操作，触达屏幕即可显示1. 使用场景出门靠地图，一部手机走天下。在骑行导航中，大致看一下路线后，手机会短暂放进口袋中，再次看地图时交互路径（唤起屏幕-解锁手机-打开后台应用-进入导航）在场景中打开地图的成本增加，对于用户来说，使用体验大打折扣。2. 设计思考设计目标：解决进入地图时的交互入口，优化场景中的操作路径，更快进入地图中。在乘车时，乘客向司机说明目的地，但司机不知道具体位置（手机很卡顿、高龄本地司机不会用地图、外在因素干扰等等。）需要乘客手机开导航来引导司机开车。再或者朋友开车带你，要是用你的手机地图引导，手机给出去心里多少会顾虑一下，会不会看我的手机等等，毕竟这个时代，手机已经成为个人隐私的全部。设计方案：苹果地图基于 iOS 原生系统的优势，当开启导航时。地图即便放到后台再锁屏，依然可以轻触屏幕唤起导航，缩短路径的同时，不需要解锁等复杂操作。即便让他人来使用导航，也不会担心偷窥你的隐私。因为显示逻辑只在锁屏上方显示地图，除了看地图别人操作不了任何东西。大大提升使用者的安全感。美团单车快速开锁-减少繁琐链路，一扫即开1. 使用场景和小伙伴骑车时，遇到扫码流程多，开锁时间长，当朋友都在等你时，一直开不了锁的你内心会无比尴尬。骑车出发一定是有目的的，希望整个链路流程简单且流畅。2. 设计思考设计目标：解决扫码开锁时过多操作跳页带给用户等待的焦虑感，缩短开锁时间。设计方案：无论在「美团单车」「美团」「微信」中，通过扫一扫判断付费用户都能直接进入开锁环节，新用户或未付费用户会在扫码后出现骑行价格明细，可以先骑后付，也可以先付再骑。相比「青桔单车」，即便你是付费老用户，也要先：扫一扫-进入小程序-再次扫码开锁。全部操作，在逻辑上是合理的。但在具体场景下，用户使用时进入小程序操作就是繁琐的一个步骤。这里给「青桔单车」的解决方案，针对新用户，扫一扫-进入扫码骑行页面（按钮上方购卡服务），付费老用户，扫一扫-开锁环节，减少操作等待时间，提升用户使用体验，提升续费购买率。结语设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。本期产品细节分析结束，我们下期再见！10个产品细节剖析，让你看看大厂是如何做设计的！作为 UI 设计师来说，都是一群细节猎人，以像素级的细节刻画着每一个需求。阅读文章 > 10个产品细节剖析，让你看看大厂是如何做设计的！感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/product-details-4
用户 操作 老年 项目背景根据第七次全国人口普查，60 岁以上老年人达 2.6 亿人占比 18.7%，预计 60 岁以上老年人数量将保持 3.41%年增长率，2050 年达到 35%，我国即将进入中度老龄化社会。其中视障人群当前人口数已突破 1700 万，在使用移动端 APP 时通常会遇到的问题包括： 无法看到文字、文本与背景对比度不够、内容复杂，难以理解等等。因此需考虑支持对视障人群的优化，通过现有的技术低成本地进行移动端产品体验优化，提升高度近视、或老年远视用户的体验。作为快递物流行业的领头羊，顺丰速运从建立至今，一直注重服务质量的提升，在用户侧也一直拥有良好的口碑，顺应数字化潮流是顺丰速运在新时代发展的必然选择。前期分析此次针对顺丰速运 App 开展的老年用户研究项目，旨在理解老年用户使用快递物流类 App 产品的行为和需求，指导产品定义及优化工作，转化为机会点与产品功能点。因此，要理解老年用户，本项目产出的重点在于回答“谁”在“什么场景下”“出于什么动机”做出了“何种产品使用行为（功能+交互操作）”，使用时有“何种情绪”，其中现有产品哪些方面满足了这些需求，哪些没有契合老年用户需求特点，造成了痛点。老年用户特征个体在进入老年期后，老年群体的生理特征和认知能力会出现不同程度的退行性变化，从而影响生活质量。这些特征可以划分为视觉障碍、操作障碍和认知障碍。1. 视觉障碍指的是由于人的晶状体硬化等情况，导致老年人的视觉分辨物体的敏感度、明暗感觉、空间感觉、色彩感觉的能力下降，有看不清楚的情况出现。 包括的常见问题有：字小看不清、对颜色的识别弱、目光分散/不容易聚焦等。2. 操作障碍指的是由于神经运动机能缓慢，老年人的行动以及各项操作技能变得缓慢、不协调，在使用手机时会出现握持不住、不易点击、操作笨拙等问题。3. 认知障碍指的是在由于个体在进入老年期后，认知功能会出现衰退的现象，例如 感知觉、记忆力显著减退，近事容易遗忘，同时对新事物的学习能力减弱、学习成本增强、特别是对于一些手机、电脑等新兴科技产品的学习较为困难。设计方向基于老年用户特征和数据分析、顺丰速运使用场景痛点挖掘，确定了视觉、操作、认知三个层面的设计方案推导框架：在视觉层通过简化功能框架、优化信息展示，提升用户对信息的识别效率；在操作层通过流程简化等方式，缩减交互步长，降低用户操作成本；在认知层通过视频讲解和常驻入口，强化操作引导，固定用户认知，弱化记忆成本。1. 视觉层研究显示老年人基本上都存在一定程度的注意力分散症状。界面的内容、布局结构、理解效率有显著关系。因此，我们考虑从简化功能模块、提炼内容，围绕大字体、大图标、色彩鲜明出发。简化信息内容 减弱信息干扰根据老年群体特点“记忆力下降、注意力分散”，充分考虑到老年群体对新应用的适应能力，在结构和功能上做优先级舍取， 提炼重点内容，提取核心信息，降低认知成本，以最大限度的降低学习成本。以首页为例，我们选择保留主功能寄快递、查快递、电话寄件、扫一扫、在线客服，用大卡片、大字号、明亮颜色等视觉表现手法凸显主功能。隐藏非必要功能如：会员中心、同城跑腿、游戏、书籍回收、运营等，这些功能老年群体需要的概率低，成为干扰信息。字体大小给老年群体带来良好的阅读体验，需要考虑 易读性。易读性是指人们能否看见、区分、认出所提供文本里的文字。随着年龄增长，老年群体会出现 老花眼、眼睛进光量减少等问题会导致视力减退、注意力降低，眼睛失去快速对焦的能力。因此为了使老年群体更易获得信息，我们对界面字体大小做了一系列的改造，如标题、正文、辅助信息等不同信息层级采用不同的字号标准，使内容更易阅读。虽然老年群体的应用文字越大越好，但是要考虑到手机一屏内需要所展示的信息，就要合理的选择字体大小。有研究表明在我们 屏幕上 16 像素(一倍图)的文本大小与印刷在书籍上的文本大小相同，这很符合人的阅读习惯。但是人阅读还有一个因素是不能忽视的，就是人和屏幕之间的距离。颜色选择老年人眼睛晶体变浑浊、变黄，导致对色彩的感知减弱。因此在颜色的设计上，我们通过 加强色彩对比，使用品牌色黑红、品牌辅助色蓝绿，来进行主界面色彩的设计。2. 操作层老年群体因为其感知觉的退化，会存在着手指灵活度受限、手指握持不住、无法长时间连续操作等操作障碍，针对这类问题，我们通过简化流程步骤来缩短连续操作时间，并使用「点击」代替「输入」，降低操作成本；同时在功能上提供了语音寄件服务，方便老年群体无障碍寄件，提升服务关怀与体验。缩减交互步长：简化寄件流程寄件作为目前顺丰 APP 用户最常使用的功能，也是操作路径较长、信息复杂度较高的一项操作任务，需要用户填写多项信息（如：收寄件人、物品信息等）。我们对现有物品信息填写流程进行了简化， 提供常用的物品类型标签，使用点击取代输入，降低操作成本。人工服务线上化：语音寄件服务在前期的用户调研中，我们发现在线下寄件场景中，存在着老年人请快递员帮忙填写寄件信息的情景，线上也同样存在着类似的代填信息需求，基于此我们增加了电话寄件功能，服务于线上用户，通过人工服务热线帮助其快速下单。防误触机制：增加确认提醒部分老年用户因不熟悉手机界面操作，容易发生误触点击。针对这种情况， 需要建立防误触机制，预判用户可能发生的错误操作，在关键的行动节点设置提醒，如：在模式退出入口，增加弹窗提示，确认用户操作，同时再次明确功能入口位置，方便用户再次开启。3. 认知层在老年群体除了在感知觉（视觉、听觉、触觉）上会出现退行性的变化外，在认知与记忆层面也会出现衰退，具体表现为记忆力下降、学习新事情困难、阅读障碍、理解力衰退等。面对这些问题，除了在简化操作流程外，还可以 通过视频化的操作指引来对新用户进行功能介绍和操作说明，降低用户的学习成本。并且提供 常驻的引导入口和退出按钮，以固定用户的心智，减少理解与记忆成本。降低学习成本：操作演示视频首次进入时提供视频操作引导， 视频结合字幕的演示形式相较于文字说明更直观易懂，学习成本低。 纵向的实景操作视频，方便用户单手握持观看。固化用户心智：常驻快捷入口为了方便用户记忆，弱化学习成本，在首页设置常用的快捷入口，包括快捷退出入口、功能指引入口。通过首页的快捷退出入口可快速退回到标准模式，方便切换。首页右上角常驻的操作指引入口，方便再次查看学习。数据结果目前，顺丰速运 APP 老年版已上线多月，首页各功能入口的点击率均有所提升。环比上线初期时的数据，“扫一扫”入口点击率提升 29.8% ，其次“寄快递”和“电话寄件”点击率分别提升 26.1%和 19.5%。数据结果表明首页采用模块化功能布局，有助于提升核心功能的使用率，通过简化信息内容可以帮助用户聚焦核心功能，减弱信息干扰。总结我们从视觉、操作、认知层面出发，与大家分享了我们 在快递 APP 产品设计中对适老化领域的探索。作为用户体验设计师，发掘用户的深层需求和痛点， 帮助老年用户平等便捷的享受数字生活服务，提升产品的普适性和包容性，是我们的使命。未来，我们还将继续在适老化设计中做更多的探索与创新，聚焦用户痛点和场景需求，改善产品的深度体验，发挥设计价值。在产品体验优化的道路上，让我们一同探索前行。更多适老化设计案例：如何做好产品的适老化和无障碍设计？来看腾讯的实战案例！兔小巢 （txc.qq.com） 是一款由腾讯 CDC 开发的用户反馈互动社区，让腾讯内外各产品团队无需开发即可快速生成专属社区，高效收集用户反馈，并与用户进行深入交流。阅读文章 > 如何做好G端可视化中的适老化设计？我总结了10个注意点！前言调查显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，G 端可视化面对的主要群体就是政府领导，而政府大领导普遍都是市级及其以上，年纪大多数为 60 岁往上，属于适老化的涵盖范围，因此探索适老化在 G 端大屏中的体阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/sf-app-aging-design
快捷键 操作 用户 前言键盘，在很多人的眼中，就是一个信息录入的硬件设备。但你却不清楚完整的键盘当中，字符按键只占到了整个键盘数量的 60% （完整键盘共 108 键，字符键 65 键）你会发现，键盘除了打字之外，还会有其他很多用途。快捷键，就是不可忽视的一部分。（注：完整的快捷键会包含，快捷组合键与快捷按键两部分，文章就不做过多纠结，意在讨论这样的交互形式，这里简单统称为快捷键。）无论是设计师常见的三件套：Photoshop、Sketch、Figma，还是很多协作类型的产品：Word、PPT。快捷键，仿佛早已是许多产品的标配。但是我们在做 B 端设计时，又时常忽略掉快捷键这一特殊的交互形式。今天我们就来聊聊 B 端产品与快捷键之间的关系。在实际的工作当中，如何设计快捷键？我会产生这些疑惑：一款 B 端产品，有必要去设计快捷键吗？快捷键是否会增加用户的使用门槛？如果想要去做快捷键设计，究竟应该如何设计？我们就带着问题一起来了解快捷键之间的差异。往期回顾：B端设计指南：从 4 个方面帮你掌握「审批」的知识点一直以来，业务都是 B 端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求。阅读文章 > B端设计指南：网页布局方式科普栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。阅读文章 > B端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 老规矩开始之前，还是先科普一下桌面端与移动端，虽然他们之间存在很多差异，比如，页面布局、交互方式等等… 这些咱们以后再聊。但是今天想贴合主题，聊聊录入设备之间的差异。在移动端的设备当中，我们多数情况下，采取的是软键盘的形式，也就是手机录入是以虚拟键盘的形式存在。这样也就导致虚拟键盘存在一些常见问题缺少快捷键：虚拟键盘无法通过组合键，实现快捷操作录入门槛高：不能对键盘进行精准定位，无法实现盲打键盘的快捷录入功能按键少：在录入标点符号等信息时，需要切换页面进行实现总结下来就是整体信息录入效率低，准确率低。比如我们最常使用的复制粘贴，到了手机当中，只能够通过点击光标的方式来解决。对于桌面端键盘而言，由于我们录入信息的方式是通过双手与实体键盘进行交互，可以实现更多信息的点击。因此快捷键就会有很大的发展空间，这时候就会很好奇，快捷键究竟是如何诞生的？我们简单回顾一下计算机发展的早期，发现快捷键设定其实是源自 “硬件设计上的无奈”。早在 1980 年，IBM 所研发的个人电脑 Acorn，在当时遇到了一个棘手的问题，在电脑产生系统故障过后，它都需要通过手动重启，并且需要很长的时间来进行内存测试，验证计算机是否出现问题。但在公司内部进行系统测试时，并不是需要这样的一个机制。因此工程师 Bradley 在当时创造了一个快捷键：Ctrl+Alt+Del 可以在不需要内存测试的情况下将系统进行快速恢复重置。我们现在回顾，当时作为工程师，他在快捷键的设定上也是进行了很多思考，因为 Ctrl+Alt 键靠得很近，但 Del 则在键盘上的另一边，这样可以避免一些用户在日常使用的过程当中进行误触。而后续 Windows 电脑遭遇蓝屏死机，而 Ctrl+Alt+Del 这样一组快捷键便留在很多人的心中。随着个人电脑的不断发展，你会发现快捷键的设计也越来越复杂，因为我们想要了解如何设计快捷键，必须先知道，常见的按键分类有哪些？常见快捷键的分类目前共有 Windows MacOS 两大操作系统，在快捷键的设定上也会有着许多差异化，文章部分会将 Win/Mac 的系统统一进行讲解，大家可以优先看看关于两个系统之间的映射关系：想要知道我们快捷键的差异，我们必须了解每一个按键的基本定义：Ctrl / CommandWindows 系统当中的核心快捷键，可以理解为是各项操作的快速触发。我们可以使用它去实现各种组合快捷键，比如使用 Ctrl + C（复制） Ctrl + D （创建副本），算是用户使用最高频的快捷键。同样，在 Mac OS 当中，你会发现 Mac 的 Control 几乎很少使用，因为系统本身就没有给它 “安排太多任务” 取而代之的是饱经风霜的 Command 键。Command 作为 Mac 独有的按键，它的地位几乎等同于 Win 当中的 Ctrl，并且两者的快捷键方式都极为类似，因此也就造成两个系统当中的按键差异。ShiftShift 也叫上档键，可将其意为连续的按键，因为在连续选择时会用到，它的功能主要有两点：在中文输入的场景下，可以组合按键进行中英文的切换在文件选中的场景当中，对文件的内容进行快捷选择的操作TabTab 也叫制表键，不过现如今已不再是制表的含义，更多可以为切换按键，比如我们经常使用 Command + Tab 来对软件进行切换。其用途主要有两点：在信息录入时，按下 Tab 键来实现字符的缩进在表格页面当中，通过 Tab 键实现对单元格的快速切换Alt / OptionWin 系统当中的 Alt 与 Mac 系统的 Option 基本一致。他们的主要用途有两点WIN：呼出菜单或点击按钮的组合键MAC：快速访问系统偏好设置中某个选项的组合键如何设计快捷键，是否需要快捷键在我们的设计快捷键之前，需要考虑清楚是否真的需要快捷键。就像我们在网上冲动消费一样，购买的东西总会有当时觉得有用，然后立马吃灰的产品。所以明确需求的目的就显得尤为重要。因为 B 端产品存在太多产品类型，在每一个产品类型当中，我们也会有不同的使用场景。这里我总结了几个维度去思考。1. 高频使用俗话说得到，好钢得用到刀刃上，快捷键的设定，一定是需要用户使用频率高才会有意义。因为快捷键的使用本身就会有使用门槛，如果你做在一些用户本身就不会频繁操作的地方，对于用户而言感知并不强烈。其次你也不想自己花费了精力，到头来设计思路并没有落地。2. 核心功能这里的核心功能其实是针对不同的角色。比如一个在线教育的产品，老师需要每天在产品当中去点评同学们的作业，也就意味着老师需要高频的在点评学生作业，这个时候其实作业点评就是老师的核心功能。那你对这个功能上的操作进行优化，大概率就不会存在太多问题。比如我们以 figma 为例，如果它现在在 Darfts 首页增加了很多快捷操作，如：Command + N 新建画板 、Command+O 打开通知。但是 Figma 并未对核心功能，编辑区域页面当中添加快捷键，我想这对于很多人而言，就是一个糟糕的设计。3. 沉浸场景B 端产品的使用大致会分为三种状态：暂留、沉浸、配置（这里就不展开讲了）。而最常见的便是专注于用户使用的沉浸场景，也就是说，我们必须要让用户在沉浸场景下使用产品，这些快捷键才会变得更加有意义。沉浸及专注，专注就需要高效，因此高效使用快捷键就显得合情合理。归纳整理快捷键的诉求当我们明确真的需要快捷键的诉求过后，我们可以去思考，究竟应该设计哪些快捷键？哪些操作是属于高频操作？是否会存在操作之间的先后顺序？首先可以通过实地观察，先去判断用户在某一页面当中，具体使用顺序或者流程，然后通过流程图将数据内容进行整理。这其实是我们设计快捷键的基础依据。然后通过对页面当中不同操作进行数据埋点，能够得到用户具体的操作信息。通过这些数据信息，能够保证我们在做的设计都是有理有据，而不是拍脑袋的自己随意 YY 出来的。最后拿到数据进行分析，在数据当中并不能够单纯的去看它的点击量，而是要深入了解这个数据它背后的意义是什么？这也是我不建议初级的设计师去做数据埋点的原因。因为我见过有太多设计师拿到数据过后直接不分析上手就看，导致出现太多数据背后的问题。避免冲突在快捷键的设定，我们应该考虑避免与其他快捷键重复。想要解决这个问题，我们必须先搞清楚，产品究竟采取什么架构方式。通常会分为 BS 架构与 CS 架构。这里简单解释一下 BS 架构与 CS 架构的区别BS 架构：（Browser/Server,浏览器/服务器模式）web 应用，可以实现跨平台，但是个性化能力低，响应速度较慢CS 架构：（Client/Server,客户端/服务器模式）桌面级应用，响应速度快，安全性强，个性化能力强，响应数据较快可以简单理解为，目前产品是否需要通过浏览器才能够打开。需要浏览器打开，那就是 BS 架构，不然则反之只有我们确定了具体的产品架构之后，你才能够知道你设定的快捷键是否与浏览器本身到快捷键有所冲突。因为浏览器自身的快捷键权限肯定是会高于你页面当中的快捷键，所以在设计上我们需要格外留意。这里总结了一份浏览器的快捷键汇总，可以通过这个方式避浏览器的踩坑但客户端的快捷键设定，相对会更加开放，因为客户端不会受到浏览器的限制，在快捷键的设定的空间则会大很多快捷键的设定明确清楚上面的诉求与限制过后，接下来我们可以从三个方面，来对快捷键进行设定：1. 语义法在电脑快捷键设定的早期，最常使用的办法便是通过翻译英文单词首字母，进而实现快捷键的设定。比如我们经常使用的 Command+D 进行复制，D 便是 Duplication 的首字母、Command+N 进行新建，N 便是 New 的首字母。这样的设定方式其实源于国外，同样也是我们日常设定最为常见的一种方式。2. 流程法流程法就是去思考整个快捷操作的具体流程，比如我们最常使用的 Command + C 与 Command + V 就是一个例子。因为如果按照常规的设计思路，粘贴在大家的印象当中一定会是 Paste，但是由于复制、粘贴本身就是高频操作，并且两者按键相互关联，再加上 P 也是 Paint 的缩写，Command + P 有打印的含义，因此通过用户使用流程上的思考，最后将粘贴放在字母 V 上面。Viscidity 的缩写，它是一个名词，具有粘聚性、黏性的意思。3. 竞品法如果假设目前设计的产品当中已经存在许多竞品，它们就已经有了相对应的解决方案，这个时候可以考虑借鉴直接竞争对手的按键设计，因为你可以通过这样的竞品设计，让你的用户的切换成本更低，也能够让他们快速上手。举一个例子，比如 Sketch 与 Figma，Figma 的出现本身就是与 Sketch 进行竞争，因此没有必要在快捷键上进行特立独行，反而会增加用户的使用门槛。在哪使用快捷键既然上面讲到了如何设计，咱们还是不得不提一提在 B 端产品当中，哪些地方可以使用快捷键？好方便在读文章的同学们直接抄作业，用在自己的系统当中。1. 详情页编辑详情页几乎是每一个 B 端产品必备的页面。它能够帮助用户进行详细数据的阅读，其核心诉求会分为两种：对表格页当中的信息不太清楚，想要通过详情页进行更为仔细的阅读；对存储的数据有所质疑，想要更改几条数据；因此，分析完了这两种情况过后，我们可以使用快捷键，去满足用户对详情页编辑的诉求，进而可以实现对某一个页面的快速操作。具体做法我们可以按照上一章节讲的，如何设计快捷键的思路。我也举几个例子比如现在对纷享销客这样一款 CRM 产品的详情页进行编辑时，除了思考初级 B 端设计师需要处理的视觉部分之外，你还可以使用快捷键，将详情页的编辑，与按键的字母 “E” 进行绑定，这样可以配合鼠标来完成页面的快速操作，提高 “高级用户” 的操作效率。这样的优化就算是完了么？其实这也是市面上绝大多数教程不会涉及的点。因为他们缺乏 B 端的实际工作经验。也就导致只会教大家如何依葫芦画瓢，教学员去实现某一个页面的具体布局，根本不考虑实际的项目当中的各种诉求与逻辑关系。这也可能是我上课只喜欢去画草图的原因，因为 B 端的“形”很简单，有太多的组件可以支撑你进行设计，但是 B 端的“意”则会过于复杂，很难理解。说了这么多，我们来看看究竟应该如何进行优化？也就是在这个功能新增之下，还会有哪些存在的漏洞？简单列三点：在用户进入到详情页，但并没有编辑权限时，点击了按键 E 应该怎么办？在整体的页面当中，就只绑定编辑操作吗？其他操作需要绑定按键吗？如果需要你会怎么设计？让用户知道快捷键的存在？是简单的信息外漏？还是会有一整套 “机制” 来去辅佐进行解释。这样不断完善，设计方案才能更加完整。大家要记住，虽然得到一个设计结论很简单，但是 B 端系统本身就不是简单去删除列表，去增加更多视觉上的引导。而是你增加了一个功能模块过后，有没有考虑到它在整个产品当中的合理性，是否有具备思考完整的设计思考。不扯那么多了，我们继续～再举两个真实落地的例子：1. 在网页端的 B 站视频播放页面（你可以理解为是视频的详情页），用户可以通过点击 W 为投币、D 为弹幕开关、E 为添加收藏夹、F 为全屏播放，实现对视频的快速操作。而投币、弹幕开关、收藏夹、全屏播放都是属于 B 站最为核心的功能操作，因此这样的设计非常的赞。但 B 站的处理，还是会有小小的瑕疵。会有很多用户对于这样的快捷操作并不知情，可以考虑在入口提示上，进行对应的简单优化。当然这样的产品还会有很多，比如 Youtube、抖音网页版都采取了这样的设计，大家可以自己去查看总结一下不同产品的特点。2. Salesforce，还没开始对它进行调研的时候，我其实就能够猜到作为世界上如此出名的产品，肯定会有快捷键的设计。但随着调研的深入，发现在早些年间，它并没有进行快捷键的设计，因此受到很多用户的 Diss。随之便有人自行开发一款浏览器插件来实现对应的功能。而在后续的产品迭代当中，SF 逐步更进了这一功能，通过快捷按键，可以实现多个功能。逐渐将快捷键的方式放在整个系统当中，得到更多人的认可。目前形成了这样的一个完整快捷键体系。表格页新建在表格页当中，我们最常使用的便是新建操作。同样可以按照详情页的思路，将整个页面当中的新建操作进行键盘按键绑定，实现快捷操作的效果。比如在飞书管理后台的成员与部门页面当中，我是否可以通过点击 N 实现快速添加成员的操作？通过这样的方式就能够保证，用户的快速按键操作。其实这里还可以将问题再稍稍加深，我们是否还可以考虑一些新的方式？比如全局新建，在整个系统当中提供一个全局新建的入口，让入口更为统一，甚至可以实现全局键盘操作的“梦想”。又或者是通过快捷键呼出全局搜索，进行实现对应的操作？类似于 Notion 这样的产品，这些都是可以去思考的方向。导航菜单切换在 B 端产品当中，导航菜单的设计是最痛苦的一件事。因为一个员工，想要完成自己的工作，就必定会在不同的导航菜单之间进行来回切换。在 2022 年的趋势这篇文章里也讲到，越来越多的 B 端产品开始变得臃肿。也就意味着用户需要不断寻找、不停的切换导航菜单，来完成这个角色自身的工作，因此针对臃肿的 B 端产品，我们可以使用快捷键来实现导航菜单的切换。这里给到几个产品的思路，大家可以学习借鉴一下：比如常见的飞书，因为本身是 CS 架构（客户端），因此可以通过组合键的形式，来实现对导航菜单的快速切换。飞书通过按住 command + 1、2、3 … 来实现切换。钉钉则在这部分就缺少了这样的设计。而薪人薪事的做法则会有所不同，它的入口非常特殊，采取全局导航的形式（这个后面会单独出导航菜单的文章来进行讲解），将整个入口进行绑定，通过双击 command 对导航中心进行呼出，并且后续可以支持更多导航菜单的切换，这也是一个不错的思路，值得大家借鉴。全局功能在你的系统当中，一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如 CRM 系统里面的通讯录、消息、邮件。它本身和主营业务差别不大，但是由于业务发展等其他关系，需要单独处理。因此会有很多全局使用的功能，这时候便可考虑将其与快捷键进行绑定。比如明道云，因为在明道云的整体设计当中，消息、通讯录都是游离产品架构之外的一些协作内容。因此名道云将其通过快捷键的方式进行查看，进而实现页面的快速呼出，能够加大用户的使用效率总结：分享了过后，最后再唠一唠我的自己感受。其实快捷键是一个非常立竿见影的设计提升方式，我们除了去想清楚快捷键应该如何设计之外，更多还需要让用户能够发现有这样快捷键。虽然 B 端产品我们可以通过客户培训、新手引导、帮助文档的方式来教会用户，但是快捷键这样的一个功能本身是针对中、高熟练度的用户，也就意味着，你需要不断的去培养用户养成快捷键的习惯，这样才能够保证，快捷键能够真正的被用户所接受。其实现如今出现了很多无障碍的设计，大多数情况下都是在讨论如何脱离鼠标进行快捷的操作。其实比起无障碍，快捷键应该能够出现在更多 B 端产品当中。最后做个总结：我们常见的常见快捷键会分为：Ctrl、Command、Shift、Tab、Alt、Option如何设计快捷键？首先要去判断是否需要快捷键，共有三种判断方法、高频使用、核心功能、沉浸场景。其次要去归纳用户的快捷键诉求，想清楚快捷键的使用场景，避免与其他软件冲突。接着去想想究竟怎么设计快捷键？可以使用语义法、流程法、竞品法。最后我们可以在哪使用快捷键，能不能抄一抄作业？可以在详情页编辑操作、表格页新建操作、导航菜单的快速切换、以及全局的功能操作。唯快不破！可能是最全面的PS快捷键使用指南（图文演示）@阿随向前冲 ：看完这篇，帮你掌握最常用的32个Photoshop 快捷键。阅读文章 > 我是 CE 青年，一个 2 B 行业 的 2B 设计师欢迎关注作者的微信公众号：CE青年交互设计本篇来源：优设网原文地址：https://www.uisdc.com/shortcut-keys-design
操作 按钮 内容 上期我们小聊了一下弹窗的定义与使用的常见场景，本期我们来聊点实际的：弹窗的内容布局，本来本期想把常见的两种弹窗问题：弹窗的从属关系（弹窗叠弹窗）、弹窗的流程关系（连续弹窗）都讲一遍，但写完基本布局以后发现字数超了，所以弹窗这个话题从 2 期变成 3 期了。用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 弹窗的基本布局以车为例，假如我们把“车”这种物体身上的零部件分成两种：一种叫基本零件、另一种叫附件。基本零件（比如发动机）是所有车都必须要有的、没有它车就开不起来，甚至就不能叫车。而附件（比如座椅、天窗），这些东西可有可无，每一样车的配置可能都不太一样。比如车装上铲子就是铲车，装上车箱就是货车。在做规范时，做控件的逻辑和组装车是很类似的：控件的内容布局也有基本零件和附件。基本零件的差异决定了不同弹窗类型（这种差异是比较大的、场景性的差异）；而附件的差异则决定了同类型弹窗的扩展性（也就是你定义的这类型弹窗，极限状态下最多能支撑什么样的场景）。按上一篇文章从交互的角度讲讲弹窗（上）来讲，触达、信息展示、操作弹窗各自的基本零件可以画成这样：用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 也没多难画成这样了以后我们可以发现，就算是支持复杂场景的大弹窗，其实骨架结构也是简单的。以 JIRA 这个操作弹窗为例：真的很爱大弹窗接下来我们就按照弹窗的基本框架布局来一项项地拆解弹窗的基本零件与常见附件，复杂问题展开讲，简单问题就简单过：相对简单的：容器、标题、关闭方式比较复杂的：内容区、主操作按钮附件：渐进展示弹窗的容器容器也就是弹窗尺寸，虽然在做规范的时候弹窗尺寸一般是 UI 去定义的，但作为交互我们也需要思考一些事情：弹窗的尺寸需要和内容适配。正常情况下，弹窗应该是不需要纵向滚动的（当然横向滚动就更应该避免了）。假如你的弹窗尺寸需要滚动一下才能展示全信息，应该先考虑它是不是过小。大弹窗和全页面、不同尺寸弹窗之间，应该有明确的界限。交互需要去界定什么样的信息量是弹窗容纳的极限，超过这个“极限”那么弹窗这种控件就无法承载、需要使用其他的展示形式。弹窗的标题弹窗必有标题，能不能写清楚弹窗标题，算是区分合格交互设计师与还差点意思的交互设计师的试金石。其实这事情说复杂也不复杂，只有 2 个事情需要注意：（1）假如这个弹窗是由用户主动触发的，那么弹窗标题应该与用户触发弹窗的操作按钮同名，或者至少有相同的关键字。此时弹窗是用户操作后的反馈，用户需要通过弹窗的标题来确认自己是否进入了正确的模块、进行了正确的操作。（2）弹窗标题与内容区说明文字要各有分工。一般来讲，弹窗标题简单陈述问题、询问行为或者作出行为建议。内容区的说明文字展开来解释出现问题的原因，以及操作后的后果。当然文案，或者更时髦的说法：UX writing，是一门很大的学问，甚至可以支撑起一个职位。所以这里讲的两条规则只是最为基础的原则，不能涵盖所有的文案要求（比如你要是做国际化，那么标题和正文的首字母大小写、加句号不加句号都需要考虑）。另外，B 端的文案规范有时候也无法推广向 C 端营销类设计，因此本篇暂时不做更多讨论。这篇15万人阅读的文章可以帮你了解B端文案：阿里设计师出品！B端产品文案指南说明： 本文主要面向 B 类业务、简体中文语境，提供实操性指南； 行业内约定俗成的常用语建议沿用，可以不依照这里的建议； 本文所指的文案不包含营销推广类文案。阅读文章 > 弹窗的关闭方式作为一个非常底层的控件，弹窗（或者说窗体）应该兼顾大部分用户的不同习惯，来保持整个系统有比较好的可用性。因此，建议在右上角添加“x”作为关闭操作性弹窗的最短路径，并且佐以键控、点击遮罩等多种关闭方式；除非要求用户明确表态（比如要求同意协议）。当然，更便捷的关闭方式代表着更多的误触，如何平衡可用性和误触，就要根据具体场景具体分析了。内容区与主操作按钮这两个东西不能分开来讲，它们是弹窗设计里最复杂、最经常出体验问题的部分。理解了内容区与主操作的关系，才能真正理解弹窗的设计。1. 内容区与操作的层级关系做 B 端产品时，设计系统的稳定是非常重要的一件事。构成设计系统稳定的重要因素之一，就是控件的操作模式的稳定和一致性。这个部分属于设计中比较难以量化验证的地方，就算做得很好，也可能并不能从业务数据上找到特别正向的反馈；但要是做得不好，整个设计系统（至少是交互系统）的逻辑会很快地被复杂的业务摧毁崩溃。设计系统一旦不能自圆其说，那就没有系统可言了。因此为了避免这种情况，做交互还是需要定义一下控件的基本层级关系和逻辑。弹窗的底栏层级高于内容区：底部操作栏上的主操作按钮承载着全局操作，它的行为对弹窗整体生效、可能会导致弹窗关闭；而内容区的操作只对内容区生效，并不会导致弹窗关闭。这意味着做交互的时候，需要在样式上为全局按钮、内容区按钮作出区分，以免用户产生困惑。比如说假如我们是一个中学老师，现在正在新增一个班级列表，班级列表里有所有同学的名字：到此为止内容区与操作的关系都还是清晰的，但一旦我们为弹窗加入导航控件——tab，那有些人可能就搞不清楚了。首先我们在做弹窗的时候，要尽量降低弹窗的层级结构和内容复杂度，尽量把用户完成任务的关键信息一开始就展示出来，避免用户在弹窗里四处探索。但假如说因为任务的因素非得在弹窗上加 tab 的话，还是需要记住：属于弹窗内容区的 tab 的层级低于弹窗操作区。在 windows/mac 的应用程序中，这个问题可以被官方规范提供的 group box 组件解决——可以理解为把内容区从弹窗上“框”了起来，在视觉上创造出内容区和操作按钮之间的层级差异。但是由于当前互联网整体的设计趋势倾向于减少层级、扁平化，所以在日常做设计时往往不再能使用这种视觉上的处理方式，只能做交互的人自己心里清楚。还是以新增班级为例，假如存在一个按钮让我们按一下就能上传班级列表的 excel，但是 excel 里有些名字可以读取出来，有些名字包含特殊符号（比如，、…），需要人为修改一下，那么这个弹窗也许就会这么做：这个时候跳转到到“读取失败”tab，底部栏的主按钮仍然存在——即使你可以给表单设置一些提交限制，要求读取失败的项目没有被手动修改的时候，不允许点击“新增”按钮。反过来说，正因为弹窗的操作区层级比内容区高，并且 tab 是一个导航控件而非选择控件，因此 tab+弹窗的潜台词是“点击操作按钮后，所有 tab 中的内容都会被提交，即使有些内容当前没有展示出来”，而不是“只有选中的 tab 会生效”。因此，假如你需要让用户在弹窗上作出选择，就不要使用 tab 等导航控件，而可以选择单选框/多选框这种典型的选择控件（或者苹果的 segemented control 这样有点像导航的选择器）。比如说我们在新增班级弹窗上给用户提供了两个功能：手动新增或批量新增两者的内容区样式不一样，那么画出来则是：值得注意的是，这个层级关系只能应用在弹窗上，在网页全页面上往往存在层级高于操作按钮的全局导航。2. 内容区与操作的映射关系有的时候，弹窗会提供多种操作选项，并且每种操作选项都会有大段的说明文字。还是拿学校老师新增班级做例子：校园网新上线了一个功能叫“智能新增班级”，这个选项可以根据你的身份，自动检测你带的学生并填充到表格里，你只需要把他们对应的班级标注出来就好了，不需要一个个手动填写学生姓名，非常方便，所以推荐老师使用。但由于系统还不是很完善，因此只能检测到高中部和小学部的学生，带初中部学生的老师，还是需要手动新增班级。假如非要用弹窗来做新建方式的选择入口，并且还按照我们之前的弹窗基本结构来处理，那么有些人可能会做成：这个案例和诺曼《设计心理学》里那个炉灶与旋钮的案例不谋而合。这样设计的劣势是，用户从读完内容区的文字，到去操作区进行行为，需要在心里先做一个判断——我是高中小学部还是初中部的老师？然后再做一个映射——高中/小学部点这个“智能新增”、初中部点这个“手动新增”。一来一去反应时间就变长了、出错概率也更高。因此，我们可以在这个案例上增强文案与选择器的亲密性，让用户做出判断的瞬间就可以完成操作，无需再做一次映射：甚至，假如这个任务以效率为第一标准并且规范定义的比较宽松，我们还可以省略“下一步”按钮，直接将点击生效的热区放置在内容区上：同理，优化操作按钮的文案也能帮助用户消化内容区与操作按钮之间的映射关系。比如说这种再确认弹窗：习惯上来讲我们会将一个弹窗的积极操作（确认、提交、更改…）修改为与弹窗标题或内容区联系性更强、更符合场景的说法，比如说打印机的“打印”弹窗，操作按钮写作“打印”而不写作“确认”。这样做的好处也是帮助用户减少反应的时间。但另一方面，弹窗的消极操作（一般是取消或退出，注意消极/退出操作不等于破坏性操作，比如删除）的文案是不会修改的。这样做是为了让用户无论在什么场景下，都能感知到“取消”是一个无害的、不会造成严重后果的安全退出方式（和弹窗右上角的 x 一样）。3. 操作按钮与附件理想状态下操作按钮只有 2 个，但实际情况是多种多样的，所以有时候操作区也可能有超过 2 个按钮。我个人把 3 个操作按钮作为弹窗操作区的上限，假如超过 3 个按钮，那么就应该思考是不是去掉操作区，直接把按钮放在内容区里，以便帮助用户合理地判断自己应该按哪个按钮。当存在 3 个按钮时，按钮的摆放规则可以根据自己平台的特性决定，并没有通行的规则（但一般会将破坏性按钮放在主操作按钮的对侧）。假如弄不清楚用户的主要诉求，不用在多个按钮中非要选一个推荐操作。最常见的弹窗附件是“不再提示”按钮，选中后提交弹窗，则这个弹窗就在用户或者设备维度不再出现了。这个操作常规上用 checkbox 实现，并且放在弹窗内容区/操作区都可以接受。需要额外注意的有这么几点：（1）对于触达弹窗来说，点击“知道了”“立即开通”都能算是对弹窗的一种表态，因此选中“不再提示”以后，点击任何一个主要操作弹窗都应该不再展示。而相比之下，选中“不再提示”后又点击“x”就意味比较含糊了，考虑到一般“不再提示”选框都不做默认选中，因此这里选中很有可能是用户有强意愿，所以点“x”弹窗也不展示也说得过去。但对于操作弹窗来说，“取消”是全局性的消极操作。在任何情况下，用户点击“取消”的含义都是“放弃弹窗上的一切已完成操作并且退出弹窗”，所以这里只要用户点击了“取消”，无论是否选中“不再提示”，都应该视作选择未生效。虽然这样做在具体场景内有违背用户预期的可能，但为了全局交互规则的一致性，这样是更合理的。（2）有些人比较倾向于把“不再提示”做成操作按钮。我个人其实不太理解这种做法。假如这个弹窗具有用户价值，那么就持续弹好了，没必要设置“只弹一次”的限制；假如这个弹窗纯粹是商业化行为，那按钮文案写成“我知道了”，直接修改按钮的弹出逻辑即可，也没必要告诉用户错过这次机会以后就不提示了。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design-2
手势 操作 位移 交互手势的描述维度是什么？在这里我们将其简单定义为影响一个交互手势呈现效果的变量。在之前的文章中，提及过的描述维度包括稳定化效果、控制方式、阈值类型、时间限制、按下次数、触发时机，但它们的都是一些较为显性的描述维度，确定了某个手势的基本框架。本文主要讲解之前未提到的较为隐性的描述维度，它们同样影响着用户的操作体验，包括角度与方向、反馈比率、热区。下面将逐一介绍。万字干货！交互手势全解析（一）：位移类手势前言一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。阅读文章 > 6000字干货！交互手势全解析二：点击类手势点击类手势的描述维度与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。阅读文章 > 角度与方向角度与方向的知识在「交互手势全解析之位移类手势」中简单地讨论过一些，在这里会讲解地更详细。位移类手势的方向一般为上下方向或左右方向，或者二者兼有之，但是想要触发操作，手指移动方向并不需要完全垂直或水平，默认会有一个容错角度。当某个界面或模块仅支持上下方向或左右方向的位移类手势时，如下图所示，360 度会 1：1 均分，每个方向有 180 度的容错角度，只要在角度范围内滑动，都可以触发相应操作，但需要注意的是在仅支持上下方向滑动时，如果完全水平方向去滑动，则不会触发任何操作，反之亦然。虽然说角度的容错范围很大，但是滑动时离预期方向的角度偏离越大，单位长度产生的有效位移距离就会变少。例如下图中，在一个只能上下滑动的页面，垂直上滑和偏移上滑相同距离产生的有效位移是不同的，垂直上滑的效率明显更高。当上下滑动和左右滑动同时存在于一个页面或模块时，会出现两种情况。第一种情况是被滑动的内容除上下左右外可以往更多方向移动，例如滑动照片或地图查看更多细节（如下图所示），是允许用户自由地朝任意方向滑动的。第二种情况是，在单次操作中，只有上下或左右方向的滑动需求。360 度会 1：1：1：1 均分，每个方向有 90 度的容错角度。在这种情况，上滑时手指滑动方向只要左右偏移不超过 45 都会被判定为上滑，如下图所示。对于这第二种情况，系统需要处理以下两个问题。问题 A：如果在上下滑过程中进行左右滑动的操作，系统如何判定？一般我们是不希望用户在一次操作中同时进行上下滑动和左右滑动的。系统如果判定某次滑动为上下滑动，为了避免误操作，在本次滑动结束前（滑动结束的定义：手指离开屏幕并且受控物停止移动或停止其他属性变化），左右滑动会被完全禁用，而且左右滑动的容错角度会临时分配给上下滑动，如下图所示。例如，在 iOS 信息列表中，左右滑动可以唤起更多操作，上下滑动可以滚动页面，但是一旦进入上下滑动的过程中，不松手的情况下左右滑动唤起更多操作就被完全禁用了，且左右滑动的容错角度会临时分配给上下滑动。问题 B：系统是如何在某一次滑动时判定我们是想要上下滑动还是左右滑动呢？系统给予我们自然的使用体验背后是复杂的判定过程。判定的难点有两个，第一个难点：手指在操控屏幕时并不是一个稳定的状态，接触屏幕的一瞬间很容易抖动。抖动的方向也是不确定的，这个抖动需要判定为滑动吗？如果用户并不想滑动只是想进行点击操作的话怎么办?第二个难点：手指在接触屏幕后，接触屏幕的手指面积是逐渐增加的，但向下的增加要比其他方向的多，如果直接识别的话会被判定为下滑，应该怎么处理？下图的动画是慢速模拟手指接触屏幕的过程。为了解决上述的两个难点，系统会设定一个容错距离，用户的滑动位移如果在这个距离内，系统就会把手势判定为“点击”，只有当用户往某个方向的滑动位移达到或超过这个距离，系统才会判定为“滑动”。但是由于这个容错距离很小，作为用户的我们去操作时，是很难感受到这个容错距离的存在的。基础规则讲完了，接下来针对第二种情况介绍一些负面案例，下图左是滑动前正常的角度分配，但是有时由于开发同学的失误，导致容错角度没有均分，出现下图右中触发上滑和下滑的角度极小的情况，进而导致用户在上下滑动时非常容易误操作为左滑和右滑。网易云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（下图 A，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（下图 B ）。因此，在验收阶段，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，可以切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才容易被发现。反馈比率之前提到过施控物（施加控制的一方）和受控物（被施加控制的一方）的概念。比率是受控物的某个属性变化与的施控物某个属性变化的比值。为了更好地理解这个概念，在这里举个例子。如下图，在网易云音乐的播放页和微信小程序页面边缘右滑一个固定距离时，页面的下降距离是不同的，网易云音乐播放页的下降距离大约只有微信小程序页面的一半，我们可以认为对于这个交互，网易云音乐的反馈比率是微信小程序的一半。比率的大小并没有绝对的优劣之分。比率越小，反馈越迟钝，但方便精准操作。比率越大，反馈越灵敏，效率高，但不方便精准操作。由于比率的这些特性，在不同的场景中会根据需求来选用合适的比率。例如在现实生活中，汽车方向盘和卡丁车的把手就是一个较为典型的案例。汽车方向盘旋转 1 圈半只能让轮胎旋转 30 度左右，而卡丁车的方向盘旋转角度和轮胎的旋转角度是一致的。这样设计的主要原因是：汽车的行驶速度较快，任何微小的转向都会产生较大的偏差，因此需要更精准的操作。卡丁车速度较慢，而且调节方向盘时还能直观地看到轮胎的旋转变化，因此将反馈比率设计较大更合适。反馈比率在很多设备的交互设计中都有应用，例如我们可以设置鼠标的跟踪速度的快慢，跟踪速度越快，反馈比率越大，鼠标移动相同的距离可以控制光标移动更大的距离。在观看视频时，对进度进行细微调整和跨度较大的调整都是用户的常见需求，因此一般做法是采用两种比率不同的操作方式来满足需求。通过拖动视频区域的热区来进行反馈比率较小的细微调整，通过拖动进度条的热区来进行反馈比率较大的大跨度调整。热区热区为手势提供了可操作的区域，需要接触屏幕的手势都需要热区才能触发。合理的热区布置能够有效提高用户体验。1. 热区大小更大的热区可以减少用户瞄准所花费的时间，减少触发失败的概率。热区的大小不一定等于按钮的大小，当某个按钮在视觉上设计得比较小时，为了方便用户操作，我们可以将热区合理地设计大一些。例如下图的 App Store 应用详情页中，视觉上按钮虽然很小，但是点击热区却设置得很大。按钮与热区如果联系感弱，就会导致用户的疑惑。例如下面的案例，换一换的按钮热区过大，扩大到了标题区域，用户如果无意间点击标题却更换了一批内容，就可能感到奇怪。下面的词典案例中，虽然播放按钮只是右侧的一个小图标，但是顶部由单词构成的整个区域都是可以点击的。因为点击单词与发音存在强联系，所以这样的热区扩大是合理的、联系感强的。按钮的层级和样式如果相同，热区面积一般需要保持一致，并撑满可用空间。例如常见的 tab 栏上的图标。对于高频操作，很多 App 会另外设计一个隐藏手势供用户使用，因为手势所能提供的热区远远大于按钮的热区，更加便于用户操作。例如网易云音乐的播放页会将高频功能都另外配备一个手势以此来提高操作效率。下图蓝色为按钮热区，红色为手势的热区。2. 热区层级界面会存在点击类手势与位移类手势的热区重叠的情况，此时两者是平级的，因为手势差异大所以互不干扰。当界面中存在两种点击类手势的热区重叠情况或两种位移类手势的热区重叠情况时，就会出现层级排序的问题。在支付宝的一个猜涨跌的模块中，热区的大概分布如下图所示。整个模块整体有一个热区，点击可以进入二级页面。看涨和看跌分别有一个热区，点击可以直接选择操作，层级布置是在整体热区的上一层。对于位移类手势，热区的层级布置更为复杂。比如以豆瓣的我的页面为例，在 iOS 全面屏上的横滑热区分布如下图所示。①边缘右滑唤起侧边栏；②横滑泳道可以看更多书影音档案；③横滑底部的iOS安全区可以切换应用；④其他位置右滑可以切换tab页。通过热区层级的观察，我们能够发现一些明显的体验问题。在 QQ 音乐的首页，页面可以通过横滑切换 tab，同时歌单可以通过横滑查看更多。歌单的滑动热区位于横滑 tab 热区的上一层。通过观察热区的层级我们可以看出，歌单的横滑热区几乎覆盖了拇指的易操作区域，导致 tab 的横滑手势难以触发。有书的播放页中，左边界的全局右滑返回热区在进度控件的上一层，但是进度滑块由于距离页面左边界太近，导致滑动进度滑块时很容易误操作为返回上一页。这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。3. 热区的启动热区与调整热区对于某些位移类手势，在操作时热区并不是一直保持不变的，而是分为了启动热区与调整热区。当位移类手势的起始点位于启动热区时，系统才会响应，后续操作过程中，手指不离开屏幕继续进行位移操作时系统响应的区域被称为调整热区。通常调整热区会扩大到全屏，同时禁用了界面的其他全部功能，目的主要是为了保证在后续操作过程中能够为用户提供足够大的热区增加操作舒适度，其次是为了避免用户手指一直挡住触发区域的重要信息。例如，iOS 的控制中心中，在音量控件区域上下拖动可以调节音量大小，拖动过程中将手指移出音量控件区域继续上下拖动仍然可以继续调节。这样的设计可以避免手指挡住控件造成无法直观看清音量大小的问题。再进行一个案例对比，QQ 音乐和网易云音乐的播放条都支持左右滑动切歌，但是整体体验上有一些差距。在面积大小层面，QQ 音乐的启动热区与网易云音乐的启动热区是基本相同的，但是 QQ 音乐的调整热区是全屏，而网易云音乐的调整热区仍然和启动热区一致。这样导致的问题是，用户在使用网易云音乐时，如果左右滑动播放条的过程中手指无意间超出了启动热区就会导致本次操作无效，影响使用体验，而 QQ 音乐没有这个问题。以上就是关于描述维度的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注~欢迎关注作者微信公众号：「设成于思」本篇来源：优设网原文地址：https://www.uisdc.com/interaction-gestures
用户 操作 破坏性 TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表，Jakob Nielsen 对人机交互有很多研究，他提出十大可用性原则，用来评价用户体验的好坏，每个产品设计者都可以根据这十大原则进行自查。本文中主要介绍了防错原则的具体应用示例，接下来让我们一起看看吧。用超多App 案例，帮你掌握尼尔森十大原则谈到我们生活中的那些产品和服务，它们常伴于我们左右，影响着我们的生活，与我们处处相关联，同样的这些产品也会影响我们的感受，我们常常在使用时会感到喜悦，也偶尔会在使用另一些产品时会感到不舒服，这些感受都是由产品和服务的体验直接决定的。阅读文章 > 错误预防错误预防是用户界面设计的 10 条启发式评估可用性的原则之一。据统计，犯错误的频率和严重性与系统的整体可用性呈负相关。尽管无法确保用户始终按照我们希望的方式使用我们的设计，但仍有一些方法可以防止（ 或减少 ）用户误操作，而且当涉及到破坏性操作时（ 例如，从系统中删除文件）尤为重要。对话框是系统和用户之间的“ 对话 ”。模态对话框会打断用户本身的任务流程，并要求他们采取行动或向他们提供有关当前工作流程的紧急信息。在执行破坏性操作之前，用户通常会看到一个确认对话框。破坏性操作的确认对话框示例一个确认对话框，询问用户进行确认，他们想询问用户对刚刚操作进一步确认（ 以防止用户误操作 ）。这些行为被称为肯定性破坏性行为；由用户发起的破坏性操作，其中出现模态对话框以确认操作，并确保用户完全理解操作所带来的后果。在某些情况下，用户或系统可能会意外启动破坏性操作。例如，在填写尚未提交的表单时离开页面可能会导致数据丢失。当用户在没有保存数据的情况下意外离开页面时触发错误预防模态对话。如何改进破坏性操作的模态对话框？1. 在执行操作之前提示在执行具有严重后果的操作之前（例如破坏用户的工作 —— 删除文件 / 帐户等），应使用确认对话框，这在无法撤销的行动之前尤为重要。2. 重申用户的请求确认对话框必须重申用户的请求，并说明如果请求得到确认，系统将执行什么操作，这使用户能够更加清楚地了解其操作的结果。将用户的行为描述成一个问题，是一种吸引用户注意力，并让他们停下来考虑自身的上一步操作的方式。下面的示例证明了这一点。重申用户请求的破坏性操作确认对话框示例。3. 帮助用户理解操作为了实现这一点，微内容 [2] 很重要。应该避免是/否以及那种含糊的选项（ 参见下面的一个反面案例 ）并且按钮的文本应该着重强调即将做出的选择（ 例如，删除帐户 ）。此外，在对话框中添加一些辅助解释会很有用，但主要消息应该在按钮文本中，因为急躁的用户更有可能忽略那些辅助的解释只关注按钮的文本。( [2] 微内容是一种用户体验文案，以短文片段或短语的形式出现，通常没有额外的背景支持。)糟糕的微文案会让用户感到困惑，并可能导致用户犯错并非常沮丧。4. 将按钮差异化例如，在一个按钮上使用了红色，可帮助用户识别出来这是一个破坏性操作。在这里颜色与主按钮的文案相匹配，并明确了按钮的用途，但是，由于可访问性和文化差异，仅依靠颜色是不够的。尤其是世界上大约 4.5 % 的人口患有某种形式的色盲，仅使用颜色来传达意义可能会让我们的很大一部分用户被拒之门外。因此，按钮标签需要具有足够的描述性，以便在没有颜色的情况下独立表达含义。为了使警告信号更引人注意且更易于理解，还可以在屏幕上显示一个代表破坏性操作的图标。5. 不要过度使用对常规动作使用确认性对话框会影响用户对破坏性动作对话框的认知。如果用户看到了太多确认性对话框的模态窗口，他们可能会习惯它们，并且不再注意他们。结果就会导致确认性对话框失去了错误预防的能力。6. 保证简洁确认性对话应该简短，以便于浏览，但是，在某些情况下，用户可能希望在提交之前了解有关其行为后果的更多信息。在这些情况下，可以使用渐进式披露 [3] 的交互方式。( [3] 渐进式披露 ：渐进式披露不直接给用户提供大量的信息和选择，而是将这个过程分解成几部分，让用户集中注意力在当前的事件上，从易到难地引导用户，这样不仅可以确保用户不会被新信息淹没，还可以分解用户不想做的任务。)渐进式披露能使用户自主决定是否要了解更多当前行为的后果用一篇文章，帮你了解交互设计方法论「渐进式披露」大家好，我是 Clippp。阅读文章 > 7. 避免默认选择我们要避免给确认性对话框提供默认的选择，因为本来我们的目的就是通过这种模式让用户仔细检查他们的操作，从而预防用户犯错。8. 撤销破坏性操作理想情况下，我们应该允许用户撤销破坏性操作，很多时候在一瞬间你就意识到自己犯下了一个可怕的错误。许多 APP 允许用户撤销此类操作，或者使用撤销空间，或者让用户在最终完成操作之前编辑这些操作。这与启发式评估可用性的 10 条原则中另一条的核心观点相吻合 ，即用户的控制性和自由度。这可以减少用户的焦虑，并能帮助他们挽回重大错误操作造成的损失。当用户知道他们可以撤销操作并从错误中恢复时，他们会感觉对产品有更多的控制权。Google 的 Gmail 有一个可选的“撤销发送”功能已经有一段时间了，它为用户提供了 20 秒的缓冲时间来撤销他们的操作。9. 通过输入确认操作如果无法实现撤销按钮，我们可以提示用户在文本字段中输入文字确认执行破坏性操作（ 例如需要用户手动键入删除/确认/等 ）。提示他们输入以确认，强迫他们停下来并阅读模态文本，从而做出有意识的决定。虽然有可能意外地按错按钮，但不可能意外地输入动作，因为这需要深思熟虑，下面给出一个例子。提示：在非常关键的删除操作中也应谨慎使用这种方式，因为如果经常使用，可能会惹恼用户。“键入以确认”模式可确保用户做出有意识的决定以上便是针对破坏性操作预防模态对话框设计的 9 点建议，可能不能做到万无一失，但关注每一个细节，一定会让你的设计得到提升，进而提升产品的用户体验，如果你有别的建议和技巧，欢迎在评论区分享~从这3个方面，帮你掌握二次确认的设计思路二次确认的主要作用是防止误操作，以及警示操作带来的后果，避免用户无意之间执行了本不想做的操作。阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/error-prevention
用户 案例 操作 长久以来，我们一直强调 B 端设计，最重要的输出产物不在于样式，而是交互。优秀的交互设计可以显著的提升操作效率，更快完成工作任务，从而提升经济效益。但是要怎么讲清楚它是很痛苦的一件事，理论上的交互原则，和真实工作场景遇到的困难很难匹配。大家会有这种感觉：看再多的分享和原则，也做不好交互。所以，我们要来探讨一些 B 端交互的基本要求和特点，下面用一些近期的案例做简单的剖析。在 B 端项目中，所有的工作目标，都是围绕在更好的解决业务问题展开的。一个完整的业务需求，必然是包含大量的组件、流程的共同参与。我们在设计内容的过程中，往往会掉进过度关注某个单元的细节，而忽略整体对整体业务目标、重点的认知，出现本末导致的问题。所以，针对每个局部的组件，我们一定要思考它在流程中的重要性，使用频率，使用场景。比如前阵子分享的学员案例筛选组件，我们将左侧露出的筛选项进行折叠合并，修改成了右图的结果。光盯着组件看，可以明确的说案例 1 必然是更好操作的，因为筛选内容可见，操作步骤较少。如果你只想到这里，那么必然是没法处理好交互的。我拿到这个案例的第一件事，实际上就是搞懂这个页面是干嘛用的，处理什么业务，以及了解目前用户的一些基本诉求。最后得到的结果，就是操作员来到这个页面，主要查看异常的状态和它们的详情。因为列表本身是根据时间排序的，异常状态没有处理的也通常都在前面。所以，操作员直接查看列表是最高频的操作，并且表头因为支持排序切换，也是高频操作的内容之一。反而顶部的筛选，只有遇到一些特殊情况，需要将历史中的某些条目筛选出来，才会用得到。在正常使用过程中是会被自动忽略的。而且目前用户的主要反馈也出现，顶部的筛选过高，每次进页面都要下拉才能看见列表，操作极为不便。基于这样的前提条件，我就一定会压缩顶部筛选区域的高度，确保下方列表的大多数内容在一屏内可以显示完。那为什么还要改里面的筛选方法而不是简单做个折叠和展示？还有一个全局化的考虑，就在对一个筛选组件的设计，就是其它所有页面筛选组件样式的基础。这个页面我们只放了七行，其它页面最多的筛选项最高多达一倍。即使做成折叠的，展开后甚至一屏都放不完筛选内容，比如下面这样的示例。并且，筛选完之后，这个面板折叠还是不折叠，折叠了的话看结果列表就看不到前面选了哪些。不折叠同样也基本看不见，因为列表需要下拉，把上半部分内容隐藏。所以，最终进行多列排序的设计，就是舍弃最“初步”的便利性，为业务目标让步。同时基于全局的可用性做预判，对一个低频操作的模块减少过度信息的露出，让用户可以高效完成 1 级信息索引（找到选项标题），然后再去做 2 级筛选。在长期以来的 B 端项目实践中，我都始终践行业务优先的原则，检查处理的方案能不能满足我上面分析的特征，只有满足不了业务需要，我才会去修改它。而不是虚空树靶，光靠各自的 “觉得” 来讨论，这样的讨论不仅没有质量，而且不会获得有效的结果。做产品和交互，对用户的理解优先建立在共情和同理心上。了解用户，最好的方法不是你做了科学的实验，应用完善的理论，而是你自己成为用户！可惜很多设计师都想不明白这个道理，过度追求数据或者调研方式。在上一个案例中，也有同理心应用的部分，自己作为用户知道这个页面操作的重点，在权衡利弊的过程中你自然知道应该选择什么，放弃什么。下面再看另外一个学员案例，也是表单，但是是需要用户完整填写的大量表单内容。在右侧的改版里，我把单从横排改成了竖排，从原本省空间的方案改成了不省空间的方案，和上一个案例截然不同。为什么？看看下面的细节先。如果真当自己是用户，看一遍自己做的设计，给自己定个操作的目的，并尝试在这些内容做选择，那么你选择到这种模块，就必然开始混乱起来。上下的内容离得太近了，比左右同行同级元素还近，这样会极大损害信息识别的效率和操作顺畅度。尤其当我核对前面单选项是否选对的情况，阅读起来更是痛苦。而我们把内容进行上下排序，将亲密性表现得更合理，那么操作的舒适度就会显著的上升。至于多出来的高度，作为用户你沉浸在表单输入过程中，为什么会关注多出来的那点高度？好吧！如果一定要用理论方法来分析，那可以堆砌一堆的理论解释：亲密/对齐性：上下排序的亲密性可以完美符合左对齐视觉引导，以及不同模块跨度的划分菲兹定律：左对齐的选框位置距离极短，除了滚动外鼠标就负责上下移动，而不用全屏幕流浪心流理论：用户视线不要轻易被打乱，就容易沉浸到完成当前目标，而不是关注怎么设计美观……理论可以拿来在 PPT 里强化自己方案的说服力，但前提是别自己绕进去，纯粹通过理论的堆积来认为自己设计的是合理的。再看看下面这种表单页的案例，多列设计来让画布被填满的设计，思考下到底是为了设计而设计，还是为 “用户” 设计？第三点，就是有效的整理需要的设计模块的字段信息。从产品层面去理解该模块的诉求，信息层级，状态类型。有很多复杂的组件，如果我们直接动手画，是行不通的。主要问题源自需求层面的复杂性，不仅字段非常多，而且它们是有层级关系，集联性质。比如再看下图的学员案例，一个在公司平台上传公共文件时，进行素材权限编辑和信息管理的组件。在这个模块中，包含的功能和可操控的元素非常多。从整个面板的标题开始，作为最顶层的信息，向下可以延伸出不同的子模块和对应的二级标题。每个二级标题下，还有不同的下级元素。我们不仅要有效处理这些关系，同时还要分析权限的字段内容，它们包含了：权限类型标题、对象、对象权限、选择、删除、添加。这时候，我就会用文字的方法把这些信息整理出来：然后，重新梳理不同层级结构，再完成不同状态的兼顾，缩减无效的按钮，尽可能降低信息的复杂程度。下面是改动后的案例（只做了原型）。交互的很多工作并不在设计软件上，而是要跳出软件和设计稿，去理解实际的产品需求、信息、字段。除了一些树状图外，必要的交互流程图是无法省略的。多种工具导图和原型的共同作用，才能帮助我们在复杂的需求环境下 “试” 出足够多的方案找到最满意的那一个。最后，就是自己也拿不定主意，或者你的方案就是说服不了产品、开发的常见情况，怎么办？那就是真实的做测试和投票！B 端比 C 端最大的优势之一，就是如果真要做用户调研和测试，容易了无数倍。不管是给客户做方案还是做公司内部项目，你的目标用户群体是非常固定而且容易联系的。当我们在交互方案上僵持不下的时候，就不用纠结或者通过开会的撕逼来做决策。而是把这交互方案的高保真原型做出来，给对应的目标用户做测试。比如上面表单的案例中，新老两个案例，你都可以快速用 Axrure 或者 Protopie 等软件实现高保真的交互原型，1:1 还原真实操作场景。你可以从下面制作的初步案例中查看操作结果：请在电脑端打开，才能还原真实操作：原案例： https://cloud.protopie.io/p/f20dc7a0eb改后案例： https://cloud.protopie.io/p/42c51829cd这时候，方案哪个有效不就根本不用争论，交给目标用户去使用和投票不就明了了嘛？B 端交互方案的决策权，可以由目标用户来主导，而我们要做的就是去建立这样的决策机制，如何快速的来生成不同交互方案，并让目标用户决断。不要再在无穷无尽的 “你觉得”、“我觉得” 中损耗项目进度了……以上，就是一些 B 端交互设计中的思路实际解决流程。这些也是我最真实的工作状态下解决问题的方案，所以并不想写一大堆理论来欺骗自己了（狗头保命）。希望大家能从中获得收获！掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）虽然我们按节奏只剩最后一篇交互部分的，但感觉前面有不少需要优化的地方，所以干脆重新整合，一起优化一遍！阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/improve-sense-of-use
用户 操作 信息 引言近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。事先声明，本文不是对比软件工具孰优孰劣，仅仅是为了探讨设计技巧，希望对你有所帮助。本文主要的内容包括：效率设计：提高用户行为效率简洁化设计：降低信息噪点可视化设计：减少用户思考成本效率设计工具软件首要的任务就是追求效率，减少用户的操作成本。1. 模板化设置组件化设计Figma 拥有强大的组件功能，类似于 Axure 中的母板，但是更加灵活。既有父子继承关系，实现了修改父组件后，子组件可以同步修改。但是子组件又有一定的独立性，内容可编辑，保证了灵活可用。而 Axure 母版则是强制性的，一旦修改了父组件的内容，子组件必然修改。样式模板化在 Figma 中，用户可以创建自己的色彩、描边和阴影样式库，在设计中随时调用，一劳永逸，减少了频繁调整样式的操作成本。2. 选择代替输入预置选项可以有效的提高用户效率。例如字号设置时，Axure 并没有预置选择项，用户需要手动输入修改。在 Figma 中则预置了常用字号，用户下拉选择即可。另外 Axure 默认字体是 13 号，而 Figma 是 14 号字体，更加贴合设计师的主流使用字号，减少了用户的修改次数。3. 批量修改批量修改是我们最常用的提高效率的设计手段。Figma 和 Axure 都有 padding 设置功能。不过 Figma 可以一键操作，用户输入一次就可以修改四个边距，调整效率更高。而 Axure 想要设置四边等距，则要逐个修改，操作上相对繁琐。简洁化设计在工具软件中，对象的属性栏应该是用户的高频操作区域。整体布局上，Figma 和 Axure 基本一致，都是包含了 3 个模块。可以设置对象的各种属性、交互效果设计等。而基础属性模块更是用户操作的重中之重。不过 Figma 属性栏通过信息分级展示、内容精简、有序布局等设计方法，带给用户更好的体验。1. 分级展示，隐藏不必要的内容创建元素时，Figma 属性栏默认只显示位置尺寸信息、图层透明度和填色等基础信息，描边、投影、导出等设置项只显示标题，内容全部隐藏不展示，保证了操作信息的所见即所得。当用户增加设置项时，系统都会给出默认设置，用户根据需要只要修改内容即可。另外 Figma 还采用了交互操作，减少页面的信息量。例如可下拉的选项默认不展示下拉按钮，而是在鼠标悬停时展示，从而让原本信息繁杂的页面变得更加清爽。而 Axure 则将内容信息平铺展示，无论用户是否需要操作，都会显示设置项的内容。这样的布局设计确实可以减少用户一次点击操作，但是低频操作的设置项反而增加了页面信息量，成为了页面的信息噪点。2. 适配用户习惯，减少页面信息量用户为了提高自行为效率，不会对所有页面元素命名，其实用户的命名频率并不高。所以 Figma 在元素属性设置中，没有修改元素名称的选项，而是放在了图层列表中修改。而 Axure 元素属性中，命名作为首要内容放置在了最顶端。3. 统一的对齐方式，让信息更加有序两者在信息布局和对齐上也有所差异。Figma 采用的是上下布局的方式，上方是功能标题，下方是设置内容。信息层级更加明显，也更加符合用户的浏览习惯。同时具有很好的一致性。而 Axure 以左右布局为主，左侧是标题信息，右侧是内容项。我个人理解这样的布局方式是为了压缩高度方向的尺寸，尽可能的保证设置项一屏完整展示出来，避免出现滚动条，增加用户操作成本。但是这种布局方式却造成了内容展示的混乱。另外不同长度的底边型输入框，也增加了内容的繁杂和错乱感觉，造成了页面信息的无序感。可视化设计在设计工具中，可视化设计更多的用在位置相关功能，辅助用户更好的理解信息，从而降低用户的思考成本。所以两者在设置选项中都增加了可视化的形式。例如上文提到的 Padding 设置，Fimga 采用的是可视化的形式，用户直接对号填写就可以了，用户的思考成本更低，甚至可以说是 0 成本。Axure 中的圆角设置、边线可见性设置也都采用了可视化的形式。并且可视化还具备操作功能，方便用户操作。写在最后当然 Figma 中的设计细节不止这些，不过很多设计并不是 Figma 的全新创新，而是在 Axure 和 Sketch 基础上优化而来的。所以有价值的设计并不一定是为了翻天覆地的推倒重来时，也可以站在巨人的肩膀上，做出符合自己产品定位和特色的设计方案。想做好微交互设计？我总结了这 8 种常见类型！大家好，我是 Clippp，今天为大家分享的是「微交互设计」。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/learn-design-from-figma
表哥
落霞与孤鹜
在路上
张大湿
