用户 选项 菜单 前言下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖下拉菜单的使用。在 UI 设计中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。那么，如何区分下拉菜单设计的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。往期回顾：5000字干货！从5个方面帮你完整了解标签栏设计前言标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。阅读文章 > 6000字干货！6个方面帮你循序渐进掌握表单设计前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。阅读文章 > 本期大纲基本介绍及结构梳理使用下拉菜单需满足的条件下拉菜单类型常见问题及避坑指南总结基本介绍及结构梳理1. 什么是下拉菜单？下拉菜单是选项的一种呈现方式，当用户点击某个触发图标/箭头时，会弹出一个项目列表，用户需从中选择一项或多项来满足自己的选择需求。下拉菜单经常用在表单选项、筛选条件、导航等界面模块中，被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等，内容较多时可能需要上下滚动，真实情况视选项的实际数量而定。2. 下拉菜单的构成下拉菜单看起来跟表单中的选项框几乎一致，但在真实的表单页面中，触发表单项后可能是下拉菜单，也可能是弹窗或页面跳转。同理，下拉菜单也会经常用在除表单之外的其他界面模块中，从表面上看跟表单一样，而实际的元素及交互效果则有很大的区别，但本文主要针对表单中的下拉菜单（非导航）作出介绍，有以下十个部分构成：1）标签：告知用户该下拉菜单项需要选择什么内容；2）容器：用于承载选择前的信息提示（占位符）及选择后的内容；3）下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；4）占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；5）下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；6）选项列表：供用户选择的内容；7）分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；8）已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；9）滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；10）系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。3. 下拉菜单的几种状态不管是出于系统问题还是用户的原因，下拉菜单能否操作或有什么限制，都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似，但在设计时需要明显的区分开来，常见的状态有默认、悬停、聚焦、完成、禁用和错误提示，下面一起来看看设计师如何通过不同的视觉样式反馈给用户。默认状态即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。悬停状态当鼠标经过或停留在一个下拉菜单项时，容器会通过改变填充色、描边色或其他不同于初始化的样式提醒用户该内容的可操作性。悬停状态只出现在电脑端，因触屏设备直接与之产生交互，会直接越过该状态。聚焦状态聚焦状态是指用户正在与之发生交互，点击后，展开选项列表的同时，容器通过投影、边框加粗或主色调来提醒用户当前正处在操作中，下拉箭头会进行垂直翻转（向上）。在很多其他模块组件中，展开/收起也是源于箭头上下方向的提示。完成状态用户完成选择后，容器中填充被选中的选项并替换占位符，对于非必填的下拉菜单项，后面出现一键清除图标“⨂”，其他元素与初始化状态相同。禁用状态对系统禁用或当前未满足操作条件的下拉菜单项，为保持内容的可见性，对部分元素置灰以提醒用户。错误反馈相比输入框，下拉菜单项出错的情况较少，用户出现漏选、或任务流程存在两个互斥的选项时，系统会通过强提醒警示用户，例如将提示文本、容器描边及填充使用红色。使用下拉菜单需满足的条件1. 由选项数量决定（移动端）首先，选项数量不能太少也不能太多。说人话，就是选项数量为 5~9 条是使用下拉菜单的最佳选择。因下拉区域的空间有限，考虑到用户操作的难易程度，大多数情况下，低于 5 条选项使用单选按钮即可满足，超过 9 条就需要更多的展示空间，使用操作栏弹窗或页面跳转则体验更好。当然这并非绝对，只是作为一个参考值而已，使用下拉菜单以 5~9 条为例，可满足工作中的大部设计需求。其次，在选项数量满足的条件下，选项文本的字数也需越短越好，如果文本过长导致折行或省略，用户体验也会大打折扣，还不如弃用下拉菜单、换种方式呈现。2. 由便捷性决定能让用户选择的就不要让用户去输入。比如用户在选择退款原因时，常见的原因就那么几种，使用下拉菜单的样式呈现，比码字的操作效率会高出很多，即便用户有自定义需求，增加一个「其他」选项完全可以满足。另外，需要说明的是，这种方案只能满足大部分设计需求及使用场景，没有绝对好的设计。当输入有可能比选择更快时，那就果断让用户输入，这种情况一般出现在日历控件中，如果用户年龄跨度较大，想象一下，需要在几十甚至上百组数据中找到自己的出生年份也是件很痛苦的事情，还不如输入 4 个数字来的快。3. 后期延展决定如果当前选项较少（低于 5 项），由于内容是管理后台配置、且根据产品需求短时间内有陆续增加的规划，但最终数量可控，这时，即便是只有一两条选项也可选择使用下拉菜单。下拉菜单类型根据用户需求、内容性质的不同、处理各种信息时更加方便，其下拉菜单的视觉样式、交互方式也会有所不同。例如：在导航中使用下拉菜单、表单中使用下拉框，甚至某些特殊场景中，下拉框和下拉菜单还能互换，但为了兼顾不同类型、提升可用性，仍需特别留意这几种类型及变化。1. 导航类型几乎所有的网站都离不开导航类型菜单，分为水平导航和垂直导航两种。水平导航一般出现在网站顶部，例如官网顶部的功能分类、电商网站的商品分类等；而垂直导航绝大多数出现在后台管理系统的左侧，不管是哪种类型，主要目的是通过所提供的导航链接将用户带到新的位置。2. 命令菜单类型命令菜单主要用于计算机桌面软件及应用程序的顶部，点击后会展开很多选项按钮以供用户进行下一步操作，部分较为复杂的功能选项会伴随着二级（子菜单）选项列表，方便用户对软件、应用更好的控制。3. 表单类型众所周知，在条件允许的情况下，用户选择的速度要远远大于码字的速度，且更有利于系统进行数据统计，所以在很多表单中，都会设计一个选项字段，让用户通过下拉菜单选项便捷式选择。表单类型的下拉菜单也有多种类型样式，下面将一一进行介绍：标准样式标准下拉菜单是最原始、操作最简单的类型，没有任何的弯弯绕绕，触发弹出下拉选项后，选中任一内容即完成与当前表单项的交互。关键词匹配这种类型常出现在选项较多的场景中，为了方便用户更快完成选择任务，在标准样式的基础上增加了输入功能。输入的过程中，系统根据输入的关键词在已有的选项中进行匹配、筛选，用户可在筛选结果中快速找出自己需要的选项，无需输入所有文字、也不用在内容超多的列表中来回寻找即可完成任务。搜索框这是一种比较老派的做法，触发下拉菜单后，通常会在选项列表上方增设一个搜索框，用户输入关键词后进行搜索，相比上面提到的关键词匹配就有些落后了，不仅视觉样式变得复杂、也增加了用户的操作成本。部分 PC 端网站的选择地址控件中还有使用，但更多产品直接使用了城市拼音首字母进行分类筛选，显然比这种搜索方式的效率更高。多选/复选即用户在同一表单项中选择多个选项，虽然这种设计方式操作起来比较复杂，但在内容较多、空间资源不是很充足的管理系统、B 端设计中还是很实用的。例如用户权限配置、带有二级/三级联动的机构或地址选择，多选相比平铺更节省空间，且这类用户很多都是经过培训、相对专业的群体。常见问题及避坑指南1. 延展不要超过两级菜单的子层级越多、操作越复杂、用户体验就越差，尽量不要超过两级，如果超过两级，在条件允许的情况下进行二次分析增删、合并分类，以此来减少用户操作负担。当然这并非绝对，只能在相对情况下尽量避免，例如选择地址（省、市、区/县）时就无法删减。2. 默认值的使用默认值主要针对表单类型的下拉菜单，在可预知的场景中、通过行为预判提前为用户选中某个最常用、选择频率最高或当前用户最有可能选择的内容，方便被精准匹配到的用户不用做任何操作即可完成任务，同时也提高效率。但根据笔者在体验的多个产品中、以及看过相关方面的各种资料说明，是否需要提供默认选项则各自参半，成了两相对立的局面，暂且不论默认选项是否合理，但如果出现以下情况请慎用。选填项为选填表单项提供默认值，用户极有可能直接略过该项，最终默认值并非用户的真实需求，这也将变得毫无意义，甚至在后续的数据分析中产生误导，影响产品的走向。另外，即便用户注意到了，不想选择任何内容，还得手动清除，这就需要用户付出更多的时间成本和操作成本，与用户体验相悖。均衡度适中当多个选项的使用率较为均衡，提供默认选项确实会减少这一小部分用户的操作成本，但在大部分的用户群体中，只要不影响其利益或用户认为无关紧要就会默认该选项的可用性，同样会出现上述问题。用户属性模糊这种主要针对千人千面的推荐设定，在一些新注册或行为飘忽不定的用户群体中，推荐默认选项也会将出错的概率大幅度提升。3. 避免滚动失误对于选项较多的下拉菜单，滚动不可避免，但有没有一种可能，我们在明明需要滚动下拉列表、可滚动的却是整个网页，而鼠标离开下拉区域去滚动页面、真正发生滚动交互的则是下拉列表，苦不堪言。解决这个问题需要程序员对滚动交互时的光标位置作出界定，当下拉菜单仅处于聚焦（高亮/主体色/阴影）状态时滚动选项列表，除此之外滚动页面即可。这里需要说明的是，光标离开下拉菜单就可取消聚焦状态，不用非得等用户完成选择任务后再取消，目的是为让下拉菜单与页面的滚动互不干扰且能随时切换。4. 选项数量选项太少表单选项太少能使用下拉菜单吗？答案是“当然能”。但这又是何苦呢，如果只有两个选项，用单选按钮它不香吗，用户只喜欢用最少的操作在最短的时间内完成自身所需，每多操作一次都可能会离开。选项太多下拉选项过多可能会对用户产生负面影响，但有些时候是无法避免的，例如选择国家、地址、区号等，不管怎么做都没法简化。这时，增加前面所讲到的关键词匹配、搜索框功能，就能提高用户的完成效率，也让产品变得更容易使用。5. 如果输入比选择更快在部分特殊场景中，输入明显比选择更快。试想一下，自己的出生年份仅仅四个数字，但却要在几十个选项中滚动查找，真的很费时间，选择信用卡的有效期也是如此，要解决这个问题只需一个数字键盘，让用户自己输入会容易许多。6. 减少操作这里有一个很经典的例子就是日期组件，对于年、月、日的选择，分别使用 3 个下拉菜单看似也能接受，但真的很复杂，且每次前面内容的变化都对后面的数值起着决定性的作用。将三组内容进行合并且让用户自定义，就方便很多，能减少部分多余的操作。7. 精简的选项描述一句话能说清楚的就不要用两句话，文字越多、理解成本就越高。在空间有限的下拉区域，选项要尽可能简短，直击核心内容。8. 选项的优先级下拉菜单中的选项并非随意摆放，要想迎合用户、使其有更好的使用体验，就需要符合一定的规律。将最常用的选项靠前、相关联的组合、时间按照先后、地区按首字母等优先级排序，让用户操作前就能一目了然。9. 不可用选项置灰当某个选项被系统禁用或用户未达到选择条件时，尽量不要将这些选项隐藏，避免用户从一开始就误认为是内容的残缺或系统本身就不具备某些选项，为后续埋下弊端。将已存在但不可选择的内容置灰显示，不仅能保持内容的完整性、提醒用户后续可选，还能在某些特殊场景让用户主动激活可选条件，提升用户对产品的使用深度。另外，如果空间资源足够，在附近提示不可选的原因能确保用户使用更顺畅（鼠标悬停在不可选内容，临时提示就是一种不错的方式）。总结正确的使用下拉菜单既可以保持界面的美观度，还能合理的利用空间资源、提高用户选择效率，但切勿滥用、乱用。关于下拉菜单的使用方法及技巧远不止于此，只要我们在设计前考虑清楚何时用、怎么用、如何更好的使用，再加上后续持续不断的优化、查漏补缺，才能发挥下拉菜单的最大价值。超全面！「下拉菜单」设计指南下拉菜单相关应用在平常的交互设计当中是少不了的一环，也是饱受用户批评的重灾区。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/dropdown-menu-2
小技巧 用户 编者按 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧，是系列文章的十三篇，原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 6 条实用的建议。如果你对于这个系列感兴趣，上一期的内容也值得看看：第十二波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 下面，一起来看看最新的 6 项设计技巧吧！1、用页内链接让用户尽快获取信息页面内链接，或者页内导航，在过去曾经一度被很多设计师所抵制，但是如果在对的地方使用，实际上对于整个页面的体验是有明显加成的。最典型的，就是在较长页面当中，页面内跳转链接能够帮助用户更好地导航。当用户打开一篇较长的文章的时候，文章通常会被划分为多个不同的部分，不同的章节，这个时候页内链接本质上就是某种意义上的导航，帮助用户快速定位到他们需要的位置，无需进行无休止的滚动，迅速确定自己的兴趣点，点击，精准降落。使用得当，页内链接会大大提高页面内容的可发现性和内容的参与度。2、让按钮文本指向性保持一致清晰按钮上的文案内容是非常重要的。用户打开一个页面，当他面对一个 CTA 按钮的时候，他需要知道当他点击这个按钮之后，会发生什么，去到什么地方，起码他应该知道这个按钮所指向的行为和方向是什么，这也对按钮的标签文案提出了要求。我经常看到网站和 APP 当中的文案使用模糊或者整体的语言风格不够一致。比如有的地方文案是「Lets do this（就这么干吧）」，有的地方则是「Join Now（现在加入）」，类似功能的标签，却使用了截然不同风格的文案，这种情况可能会增加用户的认知负荷，还会让用户对产品产生怀疑。3、自动填写重复表单字段帮用户节省精力有些表格可能会很长，尤其在是在电商和各种涉及专业服务的网站上，需要非常具体而准确地填写各种表单。为用户简化冗余的表单项目是非常有必要的。比如需要用户填写送货地址这种字段，可能需要多次填写，这种字段需要花费较长时间来完成，而且可以确定的是，这几个地方是完全一样的。这个时候，系统应当提供自动填写功能来帮助用户节省精力。不过值得一提的是，在注册表单当中，有时候需要用户重复填写密码，这个环节是出于确认密码正确性而设置的，不应该在这个地方帮用户「偷懒」。4、将字段名称放在较长表单的输入框上方对于较短的表单，我们将每个字段的名称放在填写表格的左侧倒是影响不大，用户在填写的时候视线会使用Z字型来回折返，由于内容量较少，在体验上不会让人感到疲惫。但是在较长的表单当中，情况就不一样了。由于用户需要持续地填写内容，使用Z字型扫读会非常疲惫，这个时候，需要将字段名称移到表格的上方，这样用户可以使用F式的扫读方式，视线基本上是从上到下自然移动，在体验上更加轻松。5、不要让不必要的文案内容扰乱操作即使你所设计的网站和 APP 并不是走极简的风格，在很多的页面当中，都是需要做一些必要的精简，帮助用户更加快速和顺畅地从 A 点出发抵达 B 点。比如在注册页面当中，一个「Register Now（立刻注册）」就足以告知要做的事情，那么副标题「请填写下方的注册表单」其实是没有存在的必要。指引用户方向当然是必要的，但是在本身的文案和功能是不言自明的情况下，再增加额外的说明就属于画蛇添足了。6、不要为了精简而粗暴精简UI控件和上面一条的道理相同，虽然有的 UI 控件在设计上确实存在精简的空间，但是也不要为了精简而精简。最典型的案例，就是加载进度条的设计。从根源上来说，进度条的存在是为了帮助用户了解某项操作的进度，简单的加载控件仅仅只能够给用户以模糊的感知，只有明确的百分比标识才是用户真正想要知道的信息。将百分比的标识去掉，仅保留进度条本体，很难让用户对信息把控，这种精简方式其实是在体验上开倒车。下面是更早的内容：第一波！快速提升 UI 设计效果的 9 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波！快速提升 UI 设计效果的 14 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第九波！快速提升 UI 设计效果的 7 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第十波！快速提升 UI 设计效果的 8 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第十一波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/improve-ui-designs-faster-13
用户 信息 页面 随着市场竞争的日益激烈，用户除了要求平台提供更多更好的产品以外，还要求以更满意的方式去展示产品，信息呈现形式的不同，对用户的信息接收和解读会产生不同的效果，从而会影响用户的满意度进而对购买决策产生影响。而下单转化率是到家业务的重要指标之一，提高用户购买率是到家业务的核心需求，因此希望优化 58 到家页面设计。页面设计就像商品的造型设计，是想要吸引消费者的重要卖点，一个成功的页面设计不仅需要做到吸引用户点击浏览页面，还需要能够诱导用户身份转变成消费者，从而进行购买行为。页面优化的探索因此，页面设计不仅需要考虑视觉设计因素，还需要考虑用户认知，探索用户购买行为与动机偏好，从而精细化的理解用户的消费特点，了解用户心智。本次调研将会在这一阶段通过深度访谈，了解用户购买渠道、服务购买关注点、以及对服务的认知等，去深入了解不同渠道的核心竞争力、现有或潜在用户的人群画像以及未来线上服务产品的购买趋势；同时，在深入了解用户心智的基础上，我们也需要聚焦到家精选核心产品线下的购买流程，分析体验问题及优化方向。眼动测试的优势在这过程中，需要我们去了解用户在线上购买流程中的关注点，从而去分析其在流程中的体验。但在访谈中，用户“所说”是否即“所想”，“所想”是否即“所做”呢？而且一些下意识的行为，甚至用户自身都难以察觉，更不用说通过言语主动表达，那么这种情况下我们需要专门的技术来测试用户在关注什么。其中眼动测试和其他测量方法相比，具有设备简单、 实验数据直观等优势，能够高效地挖掘用户的无意识行为，并获得更直观的实验数据，适合于视觉界面相关的评估实验。因此在本次研究中，我们同时引入了眼动技术，通过眼动技术揭示在不同类目下，用户在购买过程中对信息的核心关注点以及浏览轨迹，从而作为用户行为数据以支持研究结果，进而提出优化建议。百度也发过类似的实战案例，大家可以一起看下：大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 什么是眼动测试那眼动技术到底是什么呢？眼动技术是确定一个人在注视何处的技术，主要通过眼动仪收集用户的眼动数据，然后用特殊软件对这些数据进行整理、 分析，得出特定的眼动指标和轨迹，进而用来分析用户心理和用户行为。1. 研究类型眼动研究中主要的研究类型有定性洞察和定量测试2. 如何选择由于本次的研究主要目的在于页面优化，需要去发现和解释可用性问题，并为页面优化提供改善建议，因此更适用于形成性研究，通过眼动仪去观察用户行为，探索行为的背后的原因。研究过程1. 研究准备确定研究问题：确定产品需要改进的领域设备：Tobii Pro Glasses 2 眼动仪任务流程：确定任务场景+任务点击+明确结束行为+追问刺激呈现：被试间设计2. 被试选择用户的选择并非随机，需要结合研究目标和方法，选择合适的用户进行实验，首先根据本次需要优化的到家精选具体类目，将人群按常用类目进行划分；根据以往的经验，性别、年龄、婚姻状况等会影响用户的选择和操作，所以对其性别、年龄、婚姻状况按照产品类目人群结构进行配比。此外考虑用户有竞品使用情况，此次调研并不限制其竞品的使用，但是否有本品使用经验对用户的操作和感知会有较大不同，因此限制其中一半用户未曾有使用到家精选经验。基于目前眼动追踪技术的局限性，并不能够校准和追踪所有人的眼睛，因此还需根据用户眼部情况进行筛选。3. 部分结果展示① 眼动轨迹图通过眼动测试后输出的眼动轨迹图，如图 1，可以看到用户在产品首页中， 其眼动轨迹较为复杂，眼跳次数也较多，说明用户在进入首页时，试图寻找目标业务入口时，较为困难。（眼动轨迹图中，以点表示个人注视，以线代表眼跳，在轨迹图中点的大小代表注视时长，点的大小和注视时长成正比，注视序列常以点上的数字表示，通过其注视序列反应环境中元素的吸引力以及视觉搜索轨迹）结合眼动关注情况和测后出声追问，其主要原因在于用户浏览习惯以 L 型为主，在无强烈刺激下，对左上方信息易忽略，且在页面中对头部单品的展示，部分用户因位置与颜色背景原因，误将其看作是广告位，因此出现寻找业务入口较难情况。② 热点图通过眼动测试输出的热点图，如图 2，我们看到用户的注意分布情况，以及用户的关注点及其程度。在不同的区域模块下，用户关注点各有侧重，但并不是指所有热点图用户关注程度越深，代表其越感兴趣，也可能代表用户对当前信息不理解。（眼动热点图其眼动追踪测量值以彩色表示。红色代表浏览和注视最集中的区域，黄色和绿色代表目光注视较少的区域。“热量”与所代表的测量值成正比，常用多个用户获得的数据创建的聚合可视化热点图）结合眼动关注情况和测后出声追问，发现不同性别用户在选择车型时参考依据不一，且在整体页面浏览中用户相比其基础信息，对保障类信息关注度更高，此外在浏览到服务流程中时，用户的关注度较高，测后追问时用户表示在服务流程的排版下信息重点不突出、信息繁杂，需要在众多信息中找自己需要信息，对用户认知负担较重。③ 注视视频通过眼动测试生成的注视视频，我们可以看到一些很难从静态可视化图表上看到的现象，如用户在寻找某一业务的入口，因为存在对其他入口的错误理解，易误点进入其他入口，这种动态的行为，通过注视视频更能够直观表示，并且对业务相关方更有吸引力。（注视视频是个体注视点的动态可视化，由移动的点或十字线表示，并覆盖在刺激的顶部）来个总结定性的眼动追踪分析关注的是人们如何看待事物，并通过查看追踪数据的可视化进行，而定量的眼动追踪分析大多数是关于设计之间、设计和标准之间的比较，对样本的选择、实验的设计、测量指标选择、数据的处理等有更严格的处理，希望未来在产品精细化研究方向上，能够通过眼动测试给予更多的贡献。大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/eye-movement-test
星球 知识 用户 全文 7400 字，拆解页面 60 个，100 多个产品设计细节，通过对目标用户群的需求分析，对知识星球产品设计进行分析验证，为你提供一份社群工具的产品设计参考。序言1. 适合人群UI/交互设计师通过对一个 APP 产品的用户需求分析、产品拆解和设计策略验证，跳出设计执行层的思维，继而培养设计的全局观，从整体出发去思考一个产品如何设计。产品经理/运营通过全面的用户需求分析、产品拆解和设计策略验证，获取知识社区、社群工具类产品的设计参考；知识创作者通过全面的产品设计分析，了解知识星球的运营模式、产品功能和数据分析工具，从而获取一份社群运营的参考。2. 分析目的通过对知识创作者群体的用户需求分析，拆解知识星球 V4.36.1APP，然后去验证知识星球的产品设计是否解决用户的痛点，最后为知识创作者提供一份智慧社群运营指南，以及为相关的产品设计从业者提供一份产品设计参考。3. 分析步骤第一步：需求分析利用福格模型，对知识创作者群体的动机、痛点和需求进行分析，推导出真实的需求；如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 第二步：产品拆解通过全面的产品设计拆解，了解知识星球完整的产品设计细节；第三步：设计验证结合增长模型，对知识星球的产品设计策略进行验证。第四步：分析总结通过分析总结，输出核心观点，为产品设计师及从业者提供一份设计策略参考。4. 分析模型增长模型由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。福格模型由行为认知学的创始人 B.J.福格提出，通过对用户行为的研究，他认为要促使用户产生行为需要三个元素，分别是动机、能力和触发，主要用于分析用户的动机和需求。用户需求分析1. 知识创作者是谁?要了解知识星球这个产品，我们就需要先了解知识创作者这个群体。通俗点说，凡是能持续输出原创内容的创作者都能称为知识创作者，就像笔者本人，从负责设计执行的产品设计师转型到以定期输出产品分析的自媒体，笔者就可以称为知识创作者。而知识星球的核心用户人群，正是已经在微博、微信、知乎等平台累积了无数粉丝的大 V 和 KOL。这些大 V，拥有极高的知名度和号召力，汇聚了成千上万的粉丝，有极大的潜在需求。2. 知识创作者为什么需要社群工具产品？用户动机2016 年是知识付费的元年，在过去，互联网=免费的印象已经在用户心中根深蒂固，知识是否值得付费，这是一个大问号。但在 2016 年有知识付费意愿的用户暴涨了 3 倍，人数达近 5000 万人，根据艾瑞 2018 年的知识付费行业报告预估，2020 年市场规模将会达到 350 亿，用户数将超过 4 亿人。创作本身不容易，需要持续不断的坚持，还要为粉丝提供多变创意的高质量内容，非常考验创作者的能力和决心。而且面对苟且和远方，如果没有可观的收入，知识创作者很难坚持下去。所以在大环境利好，用户付费习惯逐渐养成的形势下，如何通过专业的数字化工具解决社群管理，实现粉丝变现，健康发展，是一个长期以来困扰知识创作者的难题，他们的动机非常强烈、急迫。痛点分析人之痛——管理难对于知识创作者，他们通过长时间的积累，已经拥有数量庞大的粉丝群。但随着粉丝的不断增长，他们对粉丝的管理也陷入了困难。人越多，越难管理，越难管理，就越难健康发展。比如如何通过精准的数据监控社群的活跃度，如何快速激活用户参与社群活动等等。知识创作者都明白，粉丝是一切的根本，有了粉丝，才能发展。钱之痛——算账难当用户认可一个社群的价值，掏钱加入是很自然的事。但随着越来越多的粉丝加入，财务的统计就成了一件很麻烦的事情。粉丝多久入的群，续费时间是什么时候，要不要给推荐人返佣，续费的时候要不要打折扣，人数越多，只靠一个 Excel 表格就会让知识创作者忙得手忙脚乱，精力大大消耗。物之痛——沉淀难物代表内容和信息，社群之所以能运转，内容是精神食粮，信息是交通工具。微信公众号固然可以沉淀内容，但仅靠一个留言板很难和粉丝建立更高效的互动，一个知识创作者的社群就像一座城市，这座城市如果只有水电这些基础建设，没有其他吃喝玩乐的东西，粉丝即便有了交通工具也不知道去哪里，粉丝的活跃度不会高，就会导致留存率低，最终商业变现难。3. 知识创作者对工具的真实需求时间需求按照福格行为模型，要让用户开始产生行动，能力成本就一定要低。所以能否快速的搭建开通自己的社群，对时间成本有很高的要求，如果是一个庞大复杂的 SAAS 后台，知识创作者很容易放弃。金钱需求知识创作者不排斥收费，毕竟他们主要收入就是来自粉丝，但承受能力也有限，这部分群体更多是以个人在发展，当超出心里预期后，会进行多方对比权衡。脑力需求脑力需求就是学习成本，而且不仅仅是考虑粉丝的学习成本，还要考虑管理团队的学习成本，对产品的操作性、易用性都将会进行全面的调研。功能需求对功能要求不多，但需要能解决社群在日常运营、用户和财务管理方面的痛点，当然如果能有多变丰富的营销工具，就能让知识创作者享受到 Aha-Monment。安全需求随着社群的运营，内容数据如何保障安全？会不会某一天因为服务器故障或其他事件导致社群的内容丢失？对安全的关注会非常高。平台需求当确认使用社群产品以后，也会关注这个平台对社群有什么扶持政策，粉丝、流量还是其他福利。4. 小结通过本节的分析，我们了解到知识创作者这个群体在发展过程中所面临的需求痛点，不致命，但很迫切。知识创作者的社群就像一座城市，他们不仅渴望有水有电，满足温饱，更希望这座城市有娱乐场、有餐厅、有电影院，像一座现代化的智慧城市，让粉丝一辈子都定居在这里，过上幸福快乐的生活。知识星球是谁1. 产品介绍知识星球 APP 主要为活跃在微博、豆瓣、知乎和微信的知识创作者提供专业、数字化的社群工具，链接铁杆粉丝，从而让社群运营更简单，实现知识变现。其次，知识星球也是一个高质量的知识付费社区，不仅仅要帮助知识创作者服务好他们的粉丝，更希望通过星球的优质内容积累，为用户推荐更丰富、更优质的内容。2. 产品生命周期知识星球诞生于 2015 年，至今已经发展 7 年，已经拥有 3000 万知识付费用户，产品已经迈入成熟期，当下的业务焦点除了聚焦于用户活跃度和商业变现。其次也在尝试新的业务突破点，比如从去年开始已经开始尝试星空问答，力图打破星球之间的壁垒，让星主和粉丝一起来打造无壁垒、高质量的知识社区。由于没有任何公开的官方数据，我从易观千帆搜集了一些数据供大家参考。在 2020 年 1 月-6 月期间，平均月活跃人数为 31.54 万，人均单日启动次数为 3.64 次。3. 商业模式知识星球致力于做一个 B2B2C 平台。第一个 B 代表了知识创作者，星主，第二个 B 代表了知识星球，平台方，而 C 代表了粉丝和普通用户。可以看出，知识星球不会满足于只做社群工具，解决社群变现的最后一公里，而是要做一个高质量的知识付费社区，否则就会变成 S2B2C 了。4. 用户画像通过易观千帆的统计，知识星球的用户人群以男性为主，年龄较轻（24-40），消费能力较强，主要分布在一线及新一线城市，其中以上海、广州、杭州、深圳和北京居多。当然，作为 B2B2C 平台，知识星球的用户角色其实分为两类，第一类是知识创作者，第二类是知识创作者的粉丝和普通用户。5. 功能架构通过梳理完整的功能信息架构，进行初步的拆解，我们发现知识星球的功能并不复杂，流程也比较简单，可以说用户体验非常友好，上手非常简单。6. 迭代历程截止到 2022 年 5 月 8 日，从最初无人问津只做私密工作圈的小密圈，到今天汇聚了 3000 万知识付费用户的知识星球，知识星球小步快跑，持续优化，目前已经更新到 V4.36.1 版本。2015 年 11 月 09 日正式发布 V1.1.1 版本，取名小密圈，以安心分享，开心工作的理念，打造私密工作圈；2016 年 12 月 21 日升级到 V2.2.3 版本，对 UI 和交互进行重大升级，为用户打造高品质社群；2017 年 8 月 28 日升级到 V2.11.2 版本，小密圈改名为知识星球，以连接一千位铁杆粉丝为新的价值主张；2018 年 1 月 7 日升级到 V3.0.0 版本，推出了发现功能，从知识工具升级到知识社区；2019 年 4 月 30 日升级到 V4.0.0 版本，用户可相互关注，通过知识号搜索好友；2022 年 4 月 30 日升级到 V4.36.1 版本，发现页新增「星空问答」，探索业务新方向。7. 小结知识星球经过 7 年的发展，已经是一个成熟期的产品，他们的目标用户群非常精准，致力于帮助知识创作者的头部 KOL 解决社群收费管理难和内容不能沉淀的痛点，他们也不满足于只做一个社群工具，而是要做一个高质量的知识社区，为用户推荐更优秀的内容。设计分析验证通过用户需求分析和产品拆解，接下来，我们系统地分析知识星球的产品设计策略，一起来验证他们是否解决用户的痛点。1. 星球管理一个星球就像一个社群，一个贴吧，一个 BBS，用户可免费建立，而星球的建立人被称为「星主」，其次通过 APP 就能实现对星球的日常管理，非常方便。建立星球星球类型创建星球非常简单，只需要进行简单的几个步骤就能建立自己的星球。星球又分为「免费星球」和「付费星球」。免费星球侧重于引流和激活，付费星球则是帮助星主直接变现，用户需要付费才能加入（平台抽取 5%的会员费）。付费星球相比免费星球提供了更多的功能，比如管理工具、营销工具和数据分析工具等。资料设置星球建立后，星主可对星球进行再次编辑，包括星球封面图、星球介绍等，其中在付费星球中有一个「星球亮点」的功能，主要是在向粉丝展示的落地页支持星主进行个性化的设计，提升用户付费率。星球设置系统设置进入星球管理后，星主可以设置成员的加入方式，可随时修改星球的会员费用，还可以对用户浏览、发表权限进行设置，比如新成员是否可以立即发布、评论、匿名提问等。这让星主对星球的管理更加灵活多变。内容保护星主可以设置粉丝禁止复制、下载，可以开启主题背景水印，甚至可以设置新成员阅读限制时间，从而对星球的原创内容创作进行一定的保护。星球团队一个星球，除了星主之外，可以邀请最多 20 个合伙人和 50 个嘉宾进行一起管理。合伙人就像 BBS 社区的版主，可以帮助星主一起运营星球，而嘉宾就像代理商，不仅可以自带资源加盟，还可以为粉丝带来意外的惊喜，从而分担星主的时间投入，建立良好的星球交流学习氛围。小结对知识创作者来说，建立星球的时间成本极低，只需简单的几个步骤就能快速建立自己的星球，快速开始运营。其次团队模式的设计，非常吸引知识创作者，不仅可以降低管理成本，分担个人投入，还可以邀请嘉宾丰富社群的内容，一举两得。2. 运营工具为了更直观地了解，我把运营工具按照增长模型的四个阶段来分类，从而了解知识星球的运营工具是否满足知识创作者的需求。激活作业星主可发布「作业」让用户参与，在作业发布以后，粉丝可根据作业的内容进行创作，星主可对作业进行点评，自动生成作业排行榜。作业不仅可以实现星主和粉丝的互动，帮助粉丝提升技能，更能快速激活用户，培养用户习惯，从而提高用户活跃度和留存率。打卡「打卡」是一个培养用户习惯的常见形式，星主可以发布各种类型打卡挑战活动，以 7 天、14 天、21 天等为一个周期，吸引粉丝参与，从而帮助星球实现用户留存，传播引流。提问「提问」就是粉丝向星主或嘉宾发出提问，这是用户激活的好方式，不仅可以有效丰富星球的内容，更能实现双向创作，形成良好的星球交流氛围，从而提高星球的活跃度。留存排行榜根据粉丝活跃度，星球会自动生成每周成员活跃周榜，根据用户贡献值，会形成每周积分排行榜，而根据粉丝邀请入群的人数，会形成每日、每周、每月的邀请排行榜。排行榜充分利用了用户的攀比心理，提高用户活跃度。动态当用户加入一个星球以后，「动态」就像一个星友圈，会同步更新星球最新的发帖动态，通过高频的外部触发，有效提升用户留存率。传播分享星球支持多种分享方式，可分享给微信好友，可分享到朋友圈，可生成加入链接，可生成二维码海报，其次还可以结合优惠券、体验卡等工具生成更丰富的分享样式。分佣星主可开通「分佣模式」，粉丝每成功介绍一个好友加入，就能获得对应的酬赏，这可以有效帮助星球传播拉新。引流发现「发现」就像一个广场，包含了热门问题、热门星球、精华主题和排行榜，平台会对各个星球创作的精品内容进行遴选，最后推荐到发现板块，这对星主们来说，不仅有更多的曝光机会，还有机会获取更多的粉丝。星空问答「星空问答」和发现一样，星主可以根据自己所擅长的领域进行回答，一方面可以激发自己的创作灵感，还可以通过高品质的回答赢取平台和粉丝的认可，从而为星球引流拉新。小结运营工具作为知识付费者的运营武器库，也是星主们在运营过程中对产品的真实体验，产品到底是否有用，是否能帮助他们解决传统运营过程中的痛点，就决定了他们是否继续使用产品。而通过本节的调研，可以看出，知识星球的管理工具虽然可以解决当下社群所面临的痛点，但还略显单薄，还欠缺一些多变性的设计，比如投票、接龙、问卷、抽奖等这些常见的群功能。3. 管理工具知识星球作为一个平台产品，在 PC 端为星主提供了全面精准的数据分析工具，从而帮助星主实现数字化运营。收入数据「收入数据」就是一个可视化的数据看板，星主可通过收入数据对星球的收入有一个完整的数据概览，可查阅累计收入、本月收入、30 日付费页转化率，以及支持导出数据报表。这有效帮助星主对星球实现可视化管理，提高工作效率。推广拉新推广数据通过推广的数据看板，星主按近 7 天、15 天、近 30 天或自定义事件查看详细的推广收入数据，比如 30 日付费页转化率、新增成员数据、拉新渠道数据、优惠券数据等。另外也支持导出数据报表，从而方便星主标准化管理。新人优惠券星主可设置「新人优惠券」，吸引新用户加入，优惠券可以生成推广海报和链接，方便宣传推广。渠道二维码「渠道二维码」可以理解为星主可以设置不同的代理商或广告渠道，方便代理商帮助传播拉新，其次可以全面统计各渠道的二维码数据，实现对数据的实时监控。付费页优化「付费页」也就是星球分享出去后粉丝访问的落地页，这个落地页的转换率非常重要，所以平台提供了个性化设计的功能，帮助星主提高落地页的转化率。用户活跃成员活跃这是星球用户的数据看板，星主可以查看星球的总用户数，付费加入成员，近 7 日流失率，月活跃成员，以及详细的用户活跃数据，方便星主对星球用户的活跃度进行实时检测，及时调整运营策略，保证星球的活跃度。内容活跃「内容活跃」也即是针对星球内容产出的数据看板，星主可以查看整个星球用户产生的内容，包含当日新增点赞数、评论数、发帖数等等。成员积分榜「成员积分榜」是一个提高用户活跃度的好工具，可以为用户行为设置积分，比如点评、点赞、发布主题，这样有助于粉丝可以通过高频的互动增加积分，而积分不仅可以生成排行榜，也可以结合其他方式对粉丝进行回馈。成员续费续费数据在成员续费板块，星主可以通过数据看板了解粉丝们的续费数据，包括今日续费收入、本月续费收入、可提前续费会员、过期 7 天未续费会员以及续费页转化率等。续费优惠券星主可设置「续费优惠券」，提高粉丝的续费率，优惠券可以生成推广海报和链接，方便宣传推广。续费通知星主可以发布续费通知，然后批量发送给粉丝，提高触达率。续费折扣「续费折扣」和续费优惠券相似，都是为了提高粉丝的续费率，续费折扣可以直接分享给微信好友以及生成朋友圈海报。运营工具创作灵感知识星球同步采集了微博、头条和微信的热搜数据，方便星主可根据最新的互联网热门关键词进行创作。视频号直播知识星球和微信视频号全面打通，当星主进行直播的时候，可以选择仅星球成员可观看，这有助于丰富星球的运营方式。小结从管理工具这一节的分析，我们可以看出，知识星球的管理工具覆盖了一个社群管理的所有生命周期，不管是新用户的激活、老用户的续费、推广渠道的拓展、用户活跃度和流失率的监控，这真正就像知识星球的向知识创作者提出的运营理念——把你的星球，当做一个产品去设计规划。4. 分析总结通过对知识星球的设计分析，我们可以看出，作为一款社群工具，知识星球的三大功能模块足以解决知识创作者的三大痛点，不仅为星主们提供了丰富完善的管理、运营工具，其次知识星球从未满足于只做一款社群工具，通过多年的发展沉淀，他们已经在不断探索更多的业务方向，励志为星主、为用户提供更高质量的知识社区。写在最后的话我在写这篇分析报告的时候，其实遇到了一个困境。因为在知识星球的帮助中心，已经对整个产品的功能做了很全面的介绍，如果我只是去复述一遍，这样没有任何意义，还不如把链接分享给大家。所以你现在读到的这个版本，其实是第二个版本了。我抛开之前的分析结构，先剖析用户的真实需求，然后再对知识星球的设计进行验证，最后再输出自己的观点。没人给我钱，但我就不怕麻烦，只求每一次的产品分析都能获取突破。作为一个刚踏入门槛的知识创作者，我从商业设计转型到知识付费，在未来，我同样会面临如何通过自己的创作变现，养家糊口的难题。直到对知识星球进行了全面的调研分析以后，我才豁然开朗。我真喜欢知识星球的一句话——知识有价，所以真正有价值的星球，你无需焦虑，他们（粉丝）会用金钱和热爱来推动你继续。知识星球创始人吴鲁加曾经在他的创业故事里描述过对知识星球的愿景——知识星球没有自带光环，很弱小，但它就像Eric Raymond 《大教堂和集市》里面一个开放的集市，任何人都可以进来搭个摊子，有些人嗓门大，有些人东西好。我们更相信集市的力量，用集市的方式，让更多人能参与到内容创业、学习、教育里，这件事如果做成了，我们会很满足。如今，知识星球已经走过自己的第一个七年，而下一个七年，他们正在为这些小星球之间建立一条条高速公路，把过去封闭的星球通过知识链接，形成一个开放、包罗万象的大宇宙。也欢迎大家加入优设的知识星球 https://vip.uisdc.com/参考文献：《小群效应》-徐志斌知识星球帮助中心吴鲁加：与创作者、学习者在一起的七年练一练假如你对未来有点不知所措，不妨和我一起静下心拆解学习，通过持续分析优秀产品的设计公式，一定可以解开你设计生涯所遇见的困惑。没有比学习回报更高的投资了。1. 小练习用思维导图工具梳理 1 次知识星球功能信息架构，不要放过任何一个细节；完整体验知识星球的交互流程，不要放过任何一个页面，最好截图保存；用设计工具临摹知识星球界面，可以不用考虑配色、配图，输出高保真即可，可以先尝试 10 个页面；尝试撰写一份知识星球的产品体验报告，把你的体验感受都写出来，别嫌麻烦，勇敢去尝试；假如你在练习过程中有任何疑问都可以找我沟通，我会为你解答。2. 产品资料包本期产品拆解的素材资料包，包含了知识星球功能信息架构图、高保真设计交互源文件、产品分析报告 PDF 版、腾讯文档纯享版，免费分享时间为 5.16-5.20 日，不过如果你完成至少 1 个作业，资料包不限制时间领取。万字干货！微信读书产品设计策略推导全文11250字，拆解页面80个，3大理论设计模型，100多个产品设计细节，通过对【微信读书】的设计策略推导，为你提供一份读书类APP产品解题宝典！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 产品资料包27.3M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/zsxq-operation
图标 页面 用户 大家好，这里是设计夹，今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小，却包含着很多细节。作为通用的视觉化语言，把握住其中的设计细节至关重要。之前有分享过关于图标设计的文章：5000+干货！从4个方面掌握图标设计的基础知识Hi，小伙伴们，Q 什伍最近花了两周时间，整理了这篇关于图标设计的文章解析，分享给大家。阅读文章 > 这次总结一下图标设计的属性以及在图标设计中，很重要但容易被忽略的知识点。在 UI 设计中，图标主要有两大类：一类是 APP 启动图标，每个 APP 独一份；另一类是系统 icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。风格常见的图标风格有线性、面性、彩色、写实、3D 等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。线形/面性：最基本也是做常用的风格，广泛用在页面设计中。彩色：通常用于反馈用户的操作或者增加用户的注意力。3D/写实：当页面中的某个内容需要引起用户高度注意时使用，一下抓住用户的视线。Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的 3D 写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！背景QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。阅读文章 > 重量简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。属性构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。描边粗细：手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致，4px 的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。网格图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。视觉校正由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。角度设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。比例图标比例通常使用 8 的倍数作为基准，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用 4px 的倍数，来实现多功能性。清晰图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。细节这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。一致性这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。熟悉感面对不同的操作系统，例如 iOS 和 Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义最后以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/11-icon-design-details
产品 设计师 用户 这是体验设计扫盲的最后一篇，来讲讲体验设计的缺点和局限性在哪。往期回顾：基础全扫盲！用大白话帮你掌握用户体验设计（一）今天再来继续一个比较现实的话题 —— 用户体验是什么？阅读文章 > 基础全扫盲！用大白话帮你掌握用户体验设计（二）相信很多同学在上一篇有留意到，体验设计中包含了以用户体验为中心增加和修改产品功能的目标，既然都从用户分析到产品原型输出，界面输出一条龙全套完成了，那还要产品经理做什么？阅读文章 > 之所以单独写一篇，是因为长期以来搜索体验设计基本是一连串的赞美和重要性强调，完全脱离事物的真实发展现状。所以适当泼一盆冷水，让想要投入这个领域的同学能具备更正确的认识，不会把持不切实际的期待，认不清自己的职业定位，从而在入行伊始备受打击。第一个问题，就是直击灵魂的核心问题，体验设计在整个产品的发展中占据什么样的地位。今天我们已经适应在网上看到任何有关产品的分析还是产品团队自己的声明，都会反复强调 “用户体验” 的重要性，听起来是不错，体验差的产品谁会想用呢？但前面我们提过，体验是一个非常宽泛的命题，是用户使用产品前后积累下来的感受。除了产品基本的交互、界面这些可视内容外，还包含了一大堆其它的因素。比如一个电商产品，产品体验一定涉及到商品种类、价格、防伪、物流和售后。如果商品本身价格比其它平台高，出现各种假货，客服态度极差，那么它不管 UI 还是交互做的再好，用户体验也是上不去的。在这个场景下，核心体验几乎都和体验设计师关系不大。最有代表性的产品就是拼 XX 了，它的设计、交互、功能只能在所有你听说过的电商产品里垫底，即使小米有品、造作、考拉、严选这些二三梯队的产品也比不过。但是它成功了，成为和淘宝、京东竞争的巨头。那么体验设计师在这中间发挥了什么样的作用？再比如音乐类产品，产品最重要的功能，必然是歌曲的丰富性和时效性对吧。如果进去搜索歌手或歌曲，大半是找不到的，那界面和交互做得再好，又有什么意义呢？正因为如此，我最喜欢的虾米音乐才沦落到今日坟头草都三米高的结局，体验设计能挽救它的败局嘛？在互联网历史中还有非常多产品本身设计和交互非常优秀的行业老二老三，但……举这些例子，并不是单纯为了打击大家的热情，而是要客观认识体验设计的价值，就不能把它抬得太高。一款可以成功的产品，它成功的核心原因大多和体验设计师可以负责的工作是无关的，是由产品经理或背后的管理团队决定的。他们决定了产品是否具备成功的可能性，而体验设计的作用，就是缩短成功的速度，以及和功能基本相同的竞品竞争中处于优势地位。所以，多数项目场景中，体验设计的权重是低于产品、市场、技术的，这是由行业特性决定的，只要自己作为用户的角度去审视一下就可以得出结论了。那么就不存在用户体验对产品起到决定性影响的行业嘛？当然不是，在我看来，工具类产品就是主要由用户体验支撑的行业。比如笔记应用，番茄应用，代办清单，思维导图，资源管理等。大家功能都差不多，但是赢得用户推荐和真金白银支持的，只能是产品本身在体验上打磨到远超竞争对手的地步。比如我在用的 AppStore 获奖和编辑精选应用 Things，作为一个非常简单的待办清单工具，它的 MacOS 买断价格是 328，iOS 买断 68。还有我最喜欢的 Markdown 文本工具 Ulysses，非常简洁，没有太多花哨的功能，但是售价 ￥293/年（一直涨价，想骂脏话）。工具行业是最 Old School 的行业，也是 UI、交互、体验最佳的实践场所。奈何受限于国内比较畸形的软件消费观念，这类产品的市场暂时还太小，容纳不了大量的体验设计师进入。既然我们知道体验设计在多数产品中的权重并不是最高的，那么推导下来，产品决策中体验设计优先级不高也就成为了必然。摆在体验设计面前的真正问题，就是我们的工作建议、产出往往无法得到有效的落实，就是因为优先级太低，团队资源有限的情况下往往会选择其它的建议和选项。除此之外，就是体验设计的整体流程太长成本太高，从前期确定问题，到展开用研，分析，输出，往往要耗费大量的人力物力。主要的障碍就是做研究通常是需要充分的样本量的，如果每次用研都是十个八个用户的访谈、问卷、测试，分析的报告能拿得出手嘛？就是想要做大范围数据测试，那么数据埋点和统计建模也需要开发团队做出大量的准备。尤其是听起来很简单的 A/B Test、灰度测试，需要一整套开发框架来支撑，对于中小团队而言是一种非常沉重的负担。即使前面这些工作全都克服障碍去落实了，还要应对一个最致命的问题 —— 研究实验不一定会有结果。大学有做过复杂实验的同学，应该知道不管怎么设计整体流程，总会因为各种没办法控制的变量或外部影响，导致最终的实验结果是没有价值的。体验设计作为社科，不可能脱离这种规律，所以不管你有多努力或者多专业，也会有不少的试验结果是错误的，更不可能推导出有效的结论。所以严谨的团队，在采纳体验设计结论或者建议前，要经过大量的审核，再次确认实验流程合理，数据来源有效，结论推导符合逻辑。这直接导致大厂的体验设计团队每次要写几十上百页的 PPT，事无巨细的回顾一遍。即使前后的实验流程，结论推断都是合理的，但也不代表分析的推论最终要被接受。比如你是微信的体验设计师，经过大量的研究和分析都论证了应该增加语音播放的进度控制、iOS 要支持双开、电脑端无需扫码、社交群支持 2000 人。但最终小龙哥就是不同意。至于为什么不同意……体验设计的工作最终能有效推动，被认真采纳，并产出价值，处于一个并不高的比率。日常工作的大多数时间，就是接受任务或自己找活干，做了一堆研究输出了一堆的报告供决策者采纳。这定位很像古代的谋士，为主公献策，自己没有统率权，你可以巧舌如簧来施加影响力，但最终三军该如何调动，还是主公说了算。而新手体验设计师很难看清楚和认清自己的定位，往往会忍不住过度干预决策，就是 “手伸得太长”、“管得太宽” 的表现，引起团队内部的争吵和内耗。所以，再来完善一遍体验设计师的职能：通过用研和分析，来提供提升用户体验的设计方案让团队负责人做出更合理的决策。PS：仔细想想和有关部门、大型企业的经济学家岗位很类似……最后，再谈谈体验设计的未来发展和做一些不负责任的预测。我越来越感觉，体验设计的工作内容和性质，对产品是有意义也有价值的，但体验设计师这个岗位，却不一定那么重要或纯粹。除了团队在运作中体验的权重和决策优先级以外，问题依旧集中在体验设计本身所需的技能和知识点上。我们知道它是一个广而宽的行业，远没有开发或平面、3D 的深度，意味着它的学习门槛并不高，成为其它职业的必修内容是完全没问题的。比如现在产品经理入门培训，体验和用研已经成为必备的学习模块，在产品初期针对用户做访谈、调研和分析数据是要亲自下场的。而在 UI 端，纯粹的界面设计师越来越难发展，如果走纯视觉路线就是拓展平面能力、插画能力、3D 能力。而如果想走项目路线的，那么体验和交互就成为必须深耕的对象，掌握相关技能也成为非常迫切的目标。至于独立的交互设计师……仔细想想就会明白，如果一个岗位上下游的职业都具备自己专业的能力，那话语权要如何获得，不可替代性又在哪边。这会进入一个非常尴尬的境地。并且一个产品团队中，需要做决策、评审的角色越多，团队协作流程就越低效，因为要相互说服对方接受自己的方案，是一个特别容易内耗的过程。我们会发现，往往和程序员开会不容易就专业问题引出一系列的争吵，而在产品、体验、交互、设计上，却很容易陷入谁都说服不了谁的困境。借用著名经济学家施蒂格勒（G. J. Stigler）的一句话来解释：如果你说自己是个物理学家，听者会回应：“物理学我不懂。”于是不再说下去。但如果你说自己是个经济学家，听者会回应：“经济学吗？我不懂，但我认为……”跟着滔滔不绝。在未来，随着产品团队成员基础培训内容越来越专业，初级专业人才越来越丰富的情况下，减少具体角色，合并对应职能才是顺应趋势的。再存在一个只会做体验设计，且只做体验设计的岗位，是不符合沟通和效率需要的。而这部分职能大多应该由 UI 设计师来分担，UX + UI 合并成一个岗位才是符合现实世界发展需要的。这样，即保证设计师本身有更宏观的思考分析能力、交互素养，又具备产品和开发都不能直接替代的视觉设计能力。体验、交互、视觉一体化在我看来是未来的发展方向，司职单一领域的发展会越走越窄。其实在今天的大厂招聘 JD 中，这个趋势也越来越明显了。不管是 UX 设计师、UI 设计师、产品设计师，技能要求往往是全部覆盖的，只是职业名称一样而已。所以不用再对这种情况感到惊讶，它们会逐步成为常态。关于体验的认识和扫盲就解析到这边，之后有精力的话，再额外增延续写下去用研和相关分析的具体介绍和学习了。我们下篇再贱~欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-design-interpretation-3
数字 用户 信息 前言1. 数字人服务分类随着元宇宙概念的大热，作为基础建设元素的数字人在去年出现了井喷式的爆发。但实际上数字人并非近几年的产物，如果从世界上第一位虚拟歌姬林明美算起的话，数字人已经产生了近 40 年。这些年来，各界对于数字人的定义和分类尚没有统一的共识。从广义上来讲，任何以数字形式存在且具有类人外观和行为的数字化资产都可划为数字人范畴。依照此类定义，我们尝试将市面上的数字人服务进行归类。从下图可以看出，数字人依照应用形态大致可以分为三类。除了由来已久的 IP 型数字人以外，市场中还出现了以完成服务为目标的业务型数字人，以及以真人为原型强调替身属性的分身型数字人。从5个方面，帮你了解什么是虚拟数字人大家好，我是 Clippp。阅读文章 > 像洛天依、AYAYI 这类虚拟偶像和博主可划入到 IP 分类中，此类方向更关注数字人个人特性以及世界观的塑造，通常会采用 3D 高保真风格和手 K 或高精动作捕捉来确保整体形象的质量。而虚拟分身型则是以现实世界中的真实人类作为原型，为其在数字世界中赋予新生命。像 Travis 与堡垒之夜合作，在游戏世界举办虚拟演唱会就是此类虚拟人的一种应用。伴随着元宇宙概念的流行，相信定位在分身赛道的产品会致力于形象制作成本的进一步降低，从而让虚拟分身能力成为新数字时代公民的基础配备。而笔者所在团队打造的数字人则是第三种–业务型数字人。与前两类不同，业务型数字人通常使用 AI 驱动来完成人机交互。面对此类型数字人，如何发挥其拟人性的优势，打造真实的服务体验是本次设计的核心要点。接下来我们将在以下篇幅中介绍业务型数字人的设计实践。2. 数字人带来的体验变革“数字人”作为信息载体 服务趋向透明化传统的交互方式将界面中不同的元素，通过最优信息组合与层级堆叠，来承载用户与计算机之间的交流，如同翻译一样让双方彼此理解。但这样固定行为路径的信息结构，对于用户来说需要适应和学习，丧失了一部分自主能动性。诺曼（Don Norman）曾提出“无界面的界面”，界面设计追求透明性，以将对人机互动的干扰降到最低。所以从本质上来看，界面是以一个“具体对象”的身份出现的，既连接又分隔人与机器，以最自然的方式牵引与反馈信息与服务。而数字人正是界面服务本身的载体，让用户脱离界面本身的屏障，用更原始自然的方式面对界面，通过自然对话牵引服务。界面成为关系的动态空间 信息流动在“人”与“数字人”之间当系统的对话由“数字人”来进行承接后，界面的价值变成了推进“数字人”与“人”之间的互动，建立连结。我们发现相比较传统的线性交互逻辑，数字人的界面信息更偏向根据当前环境与用户状态的动态推送，除反馈当前对话结果外，也会根据场景中用户不断变化的多维信息为用户进行引导与推荐，同时为了保证服务场景的真实性，也需要与当前的交互环境无缝衔接，就此可见，界面不止是任务效率工具，同时也模仿人与人之间关系构建的方式，建立了人与机器互动的人文情怀。以线下银行客服为例的设计实践1. 项目背景用户与客户价值双驱动 为虚拟客服落地提供势能在探寻数字人产品落地场景的过程中，我们发现，需要将数字人的核心特性在特定领域中发挥核心价值，才能在市场中落地生长。因此低成本高转化的线下银行虚拟人客服，成为撬动金融行业的首选落地场景。就客户价值而言，线下服务场景每天有大量人工客服机械回答同样的问题，企业要为这些重复劳动支付巨额人力成本。且服务人员素质、知识储备参差不齐，现场表现不稳定，迫切需要低成本高质量的服务工具。虚拟人本身作为信息载体，保留人与人面对面沟通方式的同时，大大提升了沟通效率与服务稳定性，且平台灵活的配置能力可支持业务实时更新，省去大量人工培训成本，成为企业信息人工服务的新触点。就用户价值而言，角色身份上，面容亲和衣着职业的客服人员更能获取用户信任，引发用户交互兴趣。互动形态上，虚拟人打破了传统界面交互框架，将人作为信息交互对象，让服务有了具体“身份”，更易上手，信息获取更自然，让信息化程度不高的用户也可以摆脱设备恐惧，实现零门槛交互。2. 场景关系构建打破设备隔阂 让 “职业形象” 等候在 “ 职业场景 ”大屏设备仅仅作为承载数字人的媒介，我们希望界面在具体场景中 “隐身”，让数字人真实站立在场景中，获得用户亲和信任感，专注与她面对面沟通，不感到违和与侵扰。为达成这个目标，我们需要探究以下几个问题：如何塑造金融客服的职业形象如何营造自然真实的对话场景A.如何塑造金融客服的职业形象塑造数字人的形象，我们一般会从人格特质与职业特质两个方向分别对数字人的外表、情绪动作进行综合考量：① 外表维度即构建数字人的脸型五官、发型、妆容服饰。对于业务型数字人，我们需要从人格特质与职业特质两方面来思考他需要拥有什么样的面容、五官特征以及服饰要素。人格特质：银行客服需要表现出聪明专业的职业特点，同时又具备与人亲和的性格。参考相关面相心理学研究，浓眉大眼、脸型略尖的外表会给人聪明的印象，而嘴角上扬、眼型略弯，脸型棱角不凸显的外表会更亲和讨喜，在模特的选择上我们也尽量靠近这些特点。职业特质：偏分扎发是银行客服常见的职业发型，妆容不易过浓，显得干练有精神又平实亲和。在衣着的选择上，除职业工服外，为保障不同银行品牌的服务通用性，我们在工服上添加了品牌露出位，透传客户品牌形象。② 情绪动作维度即构建数字人情绪动作的选型与表现。因业务型数字人主要承载效率型任务，我们在情绪动作的选型上弱化了数字人人格特质的表现，更偏向于职业特质的表现。职业特质：为体现数字人职业特性，我们观察了线下银行客服的标准职业动作，选择了双手交叉于上腹部，丁字步站立的默认站位体现职业素养，同时减少无意义的动作设计，利用数字人的动作表情传达有效信息，如点头表示聆听，挥手表示内容推荐与指引，动作表现上选择幅度小、中性、自然的动作，以在表现鲜活灵动的同时不过分侵扰用户注意力。B.如何营造自然真实的对话场景为了能让用户在真实的线下场景有效且愉悦的体验服务，我们观察了线下银行的服务链路与空间设计，思考数字人全链路的进店服务体验，就以下两方面进行了思考与拆解：① 舒适安全的社交距离为了让数字人真实存在于场景中，与用户建立舒适安全的沟通，我们需要探究合适的人物身高与大小以保障用户与虚拟人之间距离适中交互自然。以 2019 年中国人平均身高作为参照，将 168cm 作为数字人实际身高，以便与用户建立平等沟通的视角。通常人与人在进行一般社交活动时，会保持 1.2m 左右的礼貌距离，在大屏的使用场景中，用户与屏幕需保持 50cm 左右的操作距离，根据成像原理我们发现数字人的实际身高需要进行适当缩放才可以真实模拟礼貌社交距离。我们采用真人模拟的测量方式，让 2 位 168cm 身高的同事面对面站立保持 1.2m 距离来进行大小观测，将真人模拟感受到的变化移植到虚拟人的大小调整上，做出相对舒适安全的社交距离。② 高效流畅的场景体验关于线下场景体验的拆解，我们主要思考两个方面，一是如何让大屏界面能够完美融入线下场景，数字人能够真正站立在场景里；二是拆解从用户进店到服务结束全链路体验，区分近远场的不同诉求精细打磨体验。场景模拟。关于数字人背景的设计，我们模拟了真实的线下客服场景，设立咨询柜台，本次方案中考虑到后续适用不同品牌银行接入，在品牌透出的视觉元素区位均可快速配置与替换。近远场体验拆解。Endsley 提出的三层情境意识（SA）模型，为信息处理提供了较为成熟的方法论，该理论分为三层：1.对当前情境中成分的感知；2.对当前情境的综合理解；3.规划预测该情境的未来情况。将情景理论与远近场相结合可将用户认知与设计要素做如下拆解：远场：建立认知，引导靠近根据上述的情境意识的三层模型，在情景获取阶段，重点在于为用户提供明确的元素，帮助用户快速建立有效认知。界面中所传递的信息包括：动态的、模拟真实身高且身着职业装的真人数字人，模拟银行前台的柜台，银行 logo 以及“空闲中，欢迎咨询” 的状态字样；进入情境解释阶段，对上述的元素进行整合诠释，用户能够明确建立起“智能的、可咨询、可信赖、可使用”的认知，此时结合用户咨询业务的需求内因，能够激发体验冲动；到情境反馈与预测阶段，用户会预测能够与数字人进行互动，解决需求，因此主动靠近，由远场转为近场。近场：建立关系，引导行为银行柜台使用人群数字化程度不高，交互方式上尽量符合用户自然对话的惯性认知，实现新手的无感过渡，降低学习成本与认知负荷。我们在具体交互方式的构建上，总结出以下交互设计思路供参考：主动服务当用户进入与数字人的交互区域，大屏自动通过图像人脸识别获取用户信息，数字人进入服务状态，主动说话并推出服务卡片，让用户能够快速建立服务认知，聚焦任务操作。指引明确触屏用户天然习惯点击操作，在信息输入方式上，对于不同类型的任务需要引导用户使用 GUI 操作还是语音输入表达诉求，强调：“试试说 ” 与 “选择” 的引导差异。同时在交互中的每一个状态下，都需要让用户明确我现在可以做什么，如何做，可以获取什么结果。要求数字人与用户交互的每一个节点明晰，引导通俗易懂，操作简单。渐进式引导为减少用户理解成本，我们在信息与操作的引导上采用单一路径，用户只需要跟随虚拟人的逐步引导，傻瓜式操作即可流畅完成服务。分支处理在一问一答的语音交互中，有很多潜在分支需要处理才可以还原自然体验。比如用户在服务进行中长时间未给出明确操作，至少会有两种情况：1.我们认为用户可能存在困惑，虚拟人会主动引导用户进行限定内容选择或聚焦提出问题。2.本身反馈内容较复杂冗长用户未操作则可能是还在消化信息，虚拟人需要延长等待时长等等。3. 交互式数字人大屏的设计要点A.交互式大屏的功能分区交互式大屏有自己独有的特性，本质上是一块超大触屏，但从交互方式与信息焦点两方面与传统触屏差异很大。在交互方式上，从手指的点按变成的整个手臂的移动，点触以多指拍按与扫动为主。在信息焦点上，用户曲臂操作屏幕，距离大屏的距离在 0.5m 左右，平视可接收的信息焦点有限，更多信息需要转动眼球或头部，那么用户的视线需要被引导与定位，信息需要按区块划分优先级，让用户更舒适流畅的获取信息。最佳操作区的设定我们根据人因工程学，确定出大屏的最佳交互区域最佳可视区，来展示核心卡片信息。以 55 寸大屏，1.68m 平均身高用户来进行方案探索。依照人体站立不屈膝，右侧大臂可旋转横向和纵向角度计算出最佳交互区域。根据最佳交互区，我们可以将核心交互卡片放置于此，次级交互放置于外沿，边缘区域不适合放置操作内容。最佳可视区的设定垂直可视区域：在用户保持站立时，最大视区为视平线以上 50 和视平线以下 70。视平线以上 25 至视平线以下 30 范围内为最佳眼睛转动区，能够以放松的状态识别信息，所以展示内容的最佳垂直视角在标准视线以上 25 至以下 30。水平可视区域：双眼区域大约在左右 60 以内，观察超出左右 60 的物体时，则需要集中精力才能识别物象，因此核心内容区域在左右 60 视角内较为合理。根据最佳垂直视角与水平视角的人因特点，结合头部小幅度垂直向下 15 转动扩大视角，我们计算得到 3 个可视区的划分，核心可视区展示主要对话流信息；次级可视区展示次要的状态信息，如收音反馈状态；最大可视区内尽量不放置信息。基于对交互区和可视区的计算测量，在页面布局中，我们将信息卡片最大程度的置于有效视区和次级交互区的重叠区域，用户可以最舒适的状态进行阅读和操作；将结束服务按钮放置在次级交互区外延，减少对核心内容的注意力分散；将音波引导动画放在次级可视区，通过色彩与动态变化对用户进行引导。B.交互式大屏的视觉设计文字清晰易读考虑大屏的尺度与真实的使用场景，界面中内容也需要相应的放大以适配大屏体验。在金融产品场景下，界面中最主要呈现的内容是文本信息，所以设计中要充分考虑文字的辨识度。合理运用字阶与对比度，能够有效提高信息的可读性，通过对比多种字号在不同距离下（远场、近场）的测试效果，对字体进行了标准化定义，阅读舒适的字号应不小于 36px，辅助说明的文字可降至 24px。除了字号大小，合理的对比度也对文本的易读性起到至关重要的作用，参考 WCAG（Web 内容无障碍指南）中对比度的不同级别建议，考虑公共的使用场景及部分中老年使用人群，因此将常规信息对比度设定为 7:1 以上，辅助信息不低于 4.5:1。视觉焦点一致用户在浏览内容需要头部有上下小幅度转动，为了让用户形成相对稳定的阅读模式，减少视线的跳跃感，我们将内容区的信息展示设定为用户输入和客服回答相对应的两条内容，且将它们的位置固定展示，这样用户在每次阅读信息时，视觉焦点可以保持由同一位置开始。数智人合理展示数智人作为服务温度与情感连接的对象，信息的展示要尽可能避免对数智人面部的遮挡，我们将信息的最大显示区顶部设定在数字人下颌向下 10cm 处，确保数字人能够较为舒适的呈现在用户面前，当页面发生滚动时内容与数智人的展示也较为合理。但也存在有大量信息展示的需求，为了满足高密度信息的有效传达，针对图片内容进行弹窗式扩展展示，在该场景下，将弹窗高度设计为完全遮挡数字人的方式，避免卡片高度跟随内容变化而遮挡部分数字人面部的情况出现。次级可视区信息强化用户对于次级可视区的信息获取效率有所降低，且该区域对于颜色和动态的获取更为敏感。因此想要提升该区域信息的传达效率，可通过强对比颜色及增加动态的方式进行强化。本次设计中语音输入的引导信息放置在次级可视区，因此通过采用大面积深色蒙层，强化收音区信息有效露出，较为明显的状态切换，能够从视觉上让用户对语音输入的引导高效获取。关于未来思考在数字人未来场景的应用中，会越来越趋向于实时的自然交互。计算机视觉、语音语义理解等 AI 服务能力日益精进成熟，多模态信息输入使得数字人的感知能力逐渐增强，我们在复杂信息的拆解与应用上，需要从用户作为人本身的需求与高效完成任务两方面出发，深度思考数据加工与应用逻辑。在交互反馈上，数字人与 GUI 的配合方式也是值得研究的方向，对不同的应用场景，在“人”与“ GUI ”的信息通道选择侧重会有很大差异，比如娱乐场景更偏向于人本身的情感化表现，而任务场景更侧重于信息高效传达。对于虚拟人本身生动性的表现上，也应该更多的考虑虚拟人相貌、情绪、动作、表情在人物世界观、生命感、人格化、业务属性等方面的映射与表现，真正实现人与“人”的连接。对于以上方向我们也都在探索的路上，期待 AI 与人类能日益共生共荣，共创未来。欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/digital-human-design
控件 用户 操作 问题起源这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。我们用一个例子开场：你运营着一个视频网站，这个网站会给付费高级用户提供 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
组件 状态 用户 大家好，我是 Clippp，今天为大家分享的是「组件设计」。现在有很多成熟的组件库，能为设计的规范性带来更大的便利。但作为设计师，不仅仅需要了解每个组件的样子、用在哪些地方，更需要清楚地知道组件的本质，即组件的形状、行为、状态等内在属性和设计细节，才能更深层地掌握组件设计。组件的五种属性想要全面了解并学习组件，首先要搞清楚组件具备的属性：作用：定义组件的用途和作用，明白组件用来做什么的。形状：不同形状的组件对产品、对用户分别有哪些作用。行为：通过用户点击或触摸等动作定义交互行为。状态：定义并告知用户当前的状态。语境：根据组件所属的场景考虑组件不同的用途。1. 形状通过形状的差异，我们能快速辨别不同类型的组件。在设计中，通常采用「文字与图形」相结合的形式来定义组件的形状。在设计组件时，要将形状、颜色、图标和文字等视觉元素组合在一起，并合理安排组件的层级结构。例如一个点赞按钮的设计，看起来很简单，但是如果我们结合不同的使用场景和吸引用户注意力的程度去考虑，一个点赞的组件就可以分为下面 6 种甚至更多的形状。所以在设计时，要充分地考虑使用场景和诉求，并对组件的形状有清晰的认知，在接下来的设计中需要哪种形状的组件直接对号入座，整个设计过程就会变得很明确。2. 行为行为和交互逻辑以及业务逻辑相关，会告诉用户操作后的结果。用来告知用户触发组件时的即时反馈，或者组件当前处于什么状态。3. 状态通过组件状态的变化可以告诉用户当前在进行哪一步操作，有助于用户了解组件当前的情况。常见的组件状态包括：正常状态、聚焦状态、悬停状态、激活状态、加载状态、禁用状态。正常状态(Normal)：是组件最常规的状态，也是设计师首先设计的状态，表示这是用户可以交互的元素。聚焦状态(Focus)：多用在电脑端中，表示元素已被选中。比如在填写表单时，点击键盘上的 tab 键，电脑的光标会切换到下一栏，下一栏的输入框出现聚焦状态。悬停状态(Hover)：当鼠标悬停在元素上时，元素会有状态的上的变化。另外，在移动端和 Pad 端上的组件不需要悬停状态。激活状态 (Active)：点击组件时，组件的颜色会变深，同时还会出现内阴影等效果。加载状态(Loading)：表示当前数据仍在加载中，需要等待。禁用状态(Disabled)：组件置灰状态，告知用户当前条件不满足，无法使用。4. 语境组件的用法跟随场景或环境会发生变化。即使是同一个的组件，在不同的使用场景中也可以有不同的使用方法。所有的设计元素都是相对的，它们会根据组件的排版位置、一起使用的其他组件元素以及用户的使用目的等来定义组件的用途。固定/可变：定义大小是可变还是固定。窄/宽：根据空间的宽度定义用途。层级结构：即使是相同的功能也需要根据层级结构定义组件的用法。浮动：定义组件是基于可访问性浮动还是基于滚动移动。组件的三种类型组件的类型大致可以分为三类：导航类（用于导航信息的组件）、输入类（用户输入信息时使用的组件）、信息类（用于向用户传递信息的组件）。1. 导航类组件作为导航提示或者展示信的组件，包括卡片、列表、网格、轮播、选项卡、菜单栏等组件。卡片：容纳信息最常见的方式。列表：用于对同一属性的信息进行排序，以便于识别。网格列表：用于在两列中显示卡片或信息单元。轮播：用于水平滚动而不是垂直滚动。选项卡：用于显示具有不同类型的信息。菜单：用于显示难以用选项卡显示的大量复杂层次结构。2. 输入类组件用于输入信息或做出选择的组件。现在很多组件库中的输入类组件形状都很相似，这样设计的原因是考虑到用户的使用习惯，避免使用让用户感到陌生的组件。复选框：当选择多个元素时使用单选按钮：当只能选择几个元素中的一个时使用文本字段：当用户输入文本信息时使用下拉菜单：打开菜单查看各种信息时使用按钮：用于在各种场景下输入有关用户决策的信息切换开关：用于打开/关闭特定状态3. 信息类组件用来传递信息的组件，根据要输入的信息类型来传达用户的选择。常用的信息类组件包括：指导文字：用于提供指导信息。工具提示：用于展示文字无法传达的内容。吐司提示：轻量级的提示，在提示过后通常会自动消失。警告：用来向用户传达需要清楚了解的重要信息。弹窗：向用户传达需要做出选择的内容。用户引导：用于传达用户不熟悉的页面内容。最后以上就是组件的属性和类型的解析，希望通过这些内容能帮助你对组件有更多的认识和思考。「组件系列」的其他文章，近期也会不断更新，欢迎大家关注如何构建维护设计组件库？我总结了这6个方法！原文引自 medium 上的一篇文章 Keeping Things Organized。阅读文章 > 欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/component-design-details
用户 设计师 产品 今天再来继续一个比较现实的话题 —— 用户体验是什么？我们自己做的调查中，能搞明白这个知识点的在职设计师就没过半，还没入行的初学者就更是凤毛麟角。明明就是一个接触 UI 设计第一天，就会反复听到的词汇，为什么大多数人就搞不明白，或者一知半解呢？我自己在网上搜了半天的科普文和翻了很多出版物以后，才理解新人面临的问题，这些读物普遍 —— 不讲人话。而且还有一个非常让我反感的特点，就是过度渲染它的专业性和跨学科复杂程度。虽然严格意义上讲，整个用户体验的知识体系里确实会包含提到的对应学科，但绝对不要被它涵盖的广度震慑，还要考虑它在每个学科中涉及的深度。如果把每个学科的知识点从浅到深划分成十级，那么用户体验涉及到的深度多数只能在 1-2 级这种最初级的水平中。只需要自己找一些入门读物或干货分享足矣，而不用专门投入大量的精力深入钻研。所以针对目前这种困境，我要用几篇分享来做一个彻底的扫盲。当然，还是用「讲人话」的方式展开。首先，用户体验设计，英文全称叫 User Experience Design，专业的缩写是 UXD，国内根据首字母缩写的习惯是 UED。PS：在很长一段时间里，UE 这个称呼在国内互联网行业中的语境是特指交互设计（IXD）的。用户体验设计包含两个部分，用户体验 & 设计，我们先分开来解释它们的含义。1. 用户体验是什么用户体验，是指用户在使用某产品过程中积累的对该产品的主观感受、情绪。是由《设计心理学》的作者唐纳德·诺曼 Donald Norman 于 20 世纪 90 年代提出的，在移动互联网行业兴起后被广泛接受和关注。用户体验本身的定义很容易理解，因为我们自己作为用户，在现代数字化生活场景中，每天都在面对不同的电子设备、网站、APP，并产生属于自己的使用体验。但是，研究用户体验的最大难题，就在“主观”性上。每个用户，或者不同的用户群体，他们对世界的认识、偏好是不同的。比如，我爱吃香菜，爱喝芹菜胡萝卜汁（yue~），喜欢姜汁兑美式（yue~），在我嘴里是蜜糖的东西，可能在你们嘴里就是砒霜……这就导致，我们个人的主观体验，是不能等同于其他用户的体验的。想要了解这些用户的体验，中间就隔着巨大的阻力和障碍。所以，我们就要通过一系列的调查和研究工作，来理解用户的主观特征和真实体验，或预判用户可能产生的体验。这些调查和研究的工作都是围绕用户展开的，所以这个过程就叫用户研究（用研）。总结起来，用户体验就是和你想法不一致的其他用户，对于特定产品、功能的主观感受。想要获取或预判用户的体验，就只能采取用户研究的方法。2. 用户体验下的设计用户体验设计有一个默认的目标，就是实现“更好的用户体验”，所以这里的“设计”指的就是针对更好的体验所进行的有效规划、表达和实现的过程，并不是狭义上的视觉设计、界面设计。比如针对产品的功能进行设计，修改或增加不同的产品功能。或针对产品的信息进行设计，调整产品内的文案措辞、字段权重、文本密度等。更不用说我们已经非常熟悉的交互设计、视觉设计、动效设计、情感化设计了。所以你看，用户体验中的设计，就是一个涵盖了方方面面设计的总称，也是前面那些复杂的体验知识图例的来源。但大可不必为这些事情感到苦恼，因为我们在真实的项目环境中，优化特殊领域的手段，往往依靠日常生活实践所积累的经验即可，而不是非得引用专业理论，这个我们会在后面做进一步的说明。所以再进一步总结，用户体验设计，就是以提升用户体验为目标，研究用户，并针对产品的不同层面进行针对性设计的行为。如果缺乏用户研究，不以用户客观感受为依据进行的设计，就不是体验设计。比如只围绕在个人偏好、竞品需求、领导个人要求下的界面设计、交互设计，就不是体验设计。但换句话说，即使只是界面设计师或交互设计师，只要根据用户的反馈或者用户简单沟通的成果为依据进行设计，那么这也是在进行体验设计。体验设计并没有想象中门槛那么高，是团队每个成员都可以参与并发挥自己的主观能动性来提升产品的用户体验的。而体验设计师，只是在这个基础上帮助团队更好的实现分工和效率最大化的岗位。掌握了体验设计的基本概念，接着，我们就要认识体验设计的具体工作内容和流程了。首先，我就不胡乱发明一些奇怪的双钻模型、莫比乌斯环、钟表盘来解释体验设计的流程了，在我看来，体验设计的流程是特别简单的，就四个步骤。如何用好设计双钻模型？来看 vivo 浏览器的实战案例！前言刚入职时，有本书叫《方寸指尖》对我影响比较大，主要讲述如何做好用户体验设计。阅读文章 > 1. 找出问题体验设计是一个非常有针对性的设计行为，要让每一次体验设计都做到有的放矢，就需要在动手前确定解决的问题是什么。比如产品还在构想阶段，有若干的功能需求待定，为了符合精益的 MVP（最小可行性）原则，不可能所有需求都做上。那么体验设计师要解决的问题，就是确定哪些需求是最符合用户体验要求的，是初版必做的。再比如产品近期差评很多，各项数据不断下滑，如果不做出适当调整，那么产品效益就会持续恶化。这时体验设计师要解决的问题，就是找出影响体验的地方，并给出解决方案。找出的问题本质上是确定你后续工作的目标，和传统 UI 设计不同的是，工作目标除产品经理直接传达给你的以外，更多时候是依靠体验设计师自己挖掘的。也就是你要自己给自己找工作目标，并且这个工作目标还要符合团队的诉求和利益，是要有 “价值” 的。所以，要找出有价值的问题，就需要我们尽可能站在不同的维度进行思考，包括但不限于团队、市场、产品、业务等领域的分析。2. 用户研究做用户体验设计就是去满足其他人的主观感受，想要实现这一点，你就必须通过一些调查和研究的方法来消除认知的隔阂。所以，行业创建了大量的用户调查方法和研究工具，来帮助我们更有效的认识用户，挖掘用户的真实想法。比如用户画像、用户访谈、焦点访谈、调查问卷、可用性分析等等。它们都是应用型技能，学习门槛不高，只要在初步掌握概念和流程以后就可以动手实践，并积累相应的经验。用户研究的主要难点，在于根据前面找出的问题，选择有用的调研类型并制定对应流程。因为每一次有效调研的周期都很长，不可能有足够的时间让你全部开展一遍，所以筛选就是为了保证团队的时间精力被有效利用。通过用户研究，获得相应的用户反馈和信息以后，体验设计师要通过这些信息做出进一步总结，并形成后续设计或改版的初级方案。比如在可用性测试中，用户普遍在其中一个步骤被卡住，并提出了大量的疑问。那设计师就要根据这些疑问来确定用户认知的局限性，并给出产品应该怎么改才能符合用户认知的构思。3. 解决问题前面我们说过，体验设计中的设计是一个泛指，并不是仅仅指视觉设计，所以这个环节我们就要根据前面找出的问题和研究成果，进行对应领域的设计实践。通常，针对业务、流程、交互、信息的设计，都可以用原型线框图的方式展示出来。这样可以高效的输出设计思路来进行内部讨论和验证。要是涉及到具体样式、创意、动效、色彩的改动，那么就要具体输出视觉设计稿了。如果团队分工比较细致，有体验设计师又有界面设计师（这情况不是太合理），那么体验设计师通常会通过原型和文档，指导 UI 设计师完成视觉界面。4. 验证成果完成项目的初步设计以后，仅仅只是将我们自己构思的问题解决方案给输出了出来，但是对用户体验的提升是否真的有效依旧是个未知数。所以，最后我们还需要对输出的方案进行验证，验证主要有两个阶段。第一个阶段，就是时间充足的情况下，通过制作高保真原型让部分用户试用，收集反馈，看看方案是有待改进还是有效提升了用户体验。第二个阶段，发生在产品上线用户使用过线上版本以后（AB Test 和灰度测试也是线上版本），再进行更大范围的用研来检查方案是否有效。验证成果就是对做好的方案反复做检验，在原有的基础上尽量发现问题并做出更好的优化，如果我们用特定的研究方法来对比新老版本的体验，除了检验设计的有效性以外，还可以从侧面反映设计师工作的价值（体验设计的 KPI 或 OKR）。以上四个步骤，就是体验设计工作中的基本流程。之所以不把流程拆分得更细致，步骤更多，是因为不同项目场景中对体验工作的影响是非常巨大的，根本不可能遵循理想的流程来开展工作。比如下图这种就不适合：只要每次展开项目的时候，遵循找到问题、用户研究、解决问题、验证问题的大框架，每个步骤下面根据实际情况自行发挥，才是落实体验设计的正确思路。关于第一部分体验设计的基本认识就介绍到这边，用文字解释流程实在太困难了，并不是体验设计本身复杂，而是体验设计依附的项目场景多种多样，需要设计师保持清晰灵活的观念而不是固守一个复杂的套路。体验设计无论从内容、形式、方法，都属于人文社科的一部分。它也继承了这个学科最大的毛病 —— 不讲人话。所以新手学习体验设计最大的挑战，就是不能掉进花里胡哨的专业名词、体验理论、项目包装中的陷阱，在不思考本质的情况下过多的深入细节，钻牛角尖，舍本逐末。我的精神导师费曼的一段访谈就是对这种现状的最佳注解：会上，有位社会学家拿出事先写好了一篇文章，让我们读。我刚开始读这鬼东西，眼珠子就差点冒了出来：整个一个丈二的和尚，摸不着头脑！我琢磨着，我看不懂，大概是因为那书目上的书，我一本也没读。一丝不安的感觉爬上心头：“我这人可能有问题。”受了会儿煎熬，我最后对自己说：“这样不行，我得打住。咱们慢慢地只读一句，直到弄明白它到底是什么意思为止。”于是我随便用手一点，停在一处，开始仔细阅读下一句。我记得不是很清楚了，但八九不离十是这么一句，“社会团体中的个体成员经常通过视觉的、符号的渠道获得信息。”我翻来复去读了几遍，然后把它翻译成了人话。你知道那是什么意思么？“人们阅读。”我开始阅读下一句，很快就把它也给破译了。剩下的就是小菜一碟了：“人们有时阅读，有时听收音机，”诸如此类，不过是被一些唬人的名词术语、复杂的语法修辞包装着，令人开始读时有些费解而已。被我彻底破译后，整个文章原形毕露，不过是金玉其外，败絮其内。这个系列的下一篇，会讨论体验设计和产品经理的关系，以及体验设计的局限性在哪里。如果反响和转发多的话，就会更进一步的输出更完整的体验设计干货。我们下篇再贱~掌握用户体验设计的标准流程，让设计不出错！前言不管是即将进入设计师行业的新同学还是在设计行业摸爬滚打多年的设计行业老人，这份用户体验设计标准流程都适用。阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-design-interpretation
文案 用户 语气 前言每当我们打开一个网站、使用一个 App 时，我们都在和界面上的文案发生着交互。因此，产品文案无疑是用户体验中重要的一环。在前两期文章中，我们介绍了文案的人物性格语气的价值篇、应用现状，并且针对实际的业务对酷家乐工具文案的人物性格进行了推导。这样一个虚拟的人物形象，又是如何被应用于实践中、从而与界面上的文案建立起关系的？华为高薪招聘的「UX文案设计」，5个阶段帮你进阶掌握！在了解了人物性格语气的重要性以及在大厂中的应用场景之后，大家一定很关心，要如何在自己的业务中从 0 开始创建文案的人物性格语气呢？阅读文章 > 华为高薪招聘的「UX文案设计」，4个方面帮你掌握基础！一、被忽视的 UX 文案在很多体验设计师的认知中，产品界面上的文案是设计中最细枝末节的事，往往会被忽视。阅读文章 > 从文案的角度出发，我们初步归纳了五个酷家乐工具中常见的交互场景：引导提示、二次确认、行为召唤、反馈、解释说明。通过将自己代入酷家乐工具文案的人物形象，我们能够去想象在不同场景下这个“人”应该表现出什么样的语气、用什么样的措辞去沟通。为了给予文案撰写者们更加明确的写作指导，我们将这些场景下的语气进一步细化成了具体的写作规范。各场景下的文案规范1. 引导提示在一些功能教学、功能调整或功能上线等场景下，需要对功能、操作进行说明， 帮助用户理解或引导用户去使用。比如新手引导、操作引导等文案 tips:1. 对于交互操作类的引导，可通过「鼠标动作+作用对象+结果」的统一句式结构描述，直接指示用户操作，文案需简短，尽量不超过 10 个字，可一眼扫完。2. 功能解释或价值点的描述需要精准、简练直接，避免使用口语、夸大的用词和过度描述。2. 二次确认对用户进行的操作进行二次确认，以避免误操作，或产生不可逆的后果文案 tips:1. 用询问的语气直接询问用户是否继续之前的操作，可省略动词前的“确认”、“是否”这类描述。2. 从用户角度告知对操作结果进行处理的一些解决方案建议。3. button 文案应尽量指明具体的动作，跟询问语中的动词呼应，少用确认、取消这种模糊广泛的动词。3. 行为召唤通过按钮文案激发用户点击文案 tip: 按钮的文案一般是动词，需尽量简洁，一目了然。4. 反馈（一）异常：在发生错误/异常时，帮助用户达成目的，且在必要时告知导致异常的原因文案 tips:1. 异常报错时，不是冷冰冰地告诉用户“失败”，也不要出现“未知错误”这种没有关怀的文案，应告诉用户可行的解决方案，或产品为用户做了哪些挽救措施。2. 不要命令和强迫用户，专注于解决问题，而不是指责。3. 如果异常/错误是用户自己造成的结果，不用使用“抱歉”、“对不起”等词。（二）过渡：告知用户上一步行为已发生，但产生结果需要一段时间文案 tips:1. 预估时间，超过 4 秒的过渡，在文字提示之外，最好还有进度提示（完成百分比或已完成的内容数量）或时间提示，以减缓用户等待的焦虑。2. 超过 1 分钟的过渡，除了进度提示外，最好提供剩余时间，例如显示剩下几分钟，用户就知道可以先做些其他事而不是干等。3. 在同一个过渡中，如果有状态变更，最好能及时通知用户，将一个长时间的过渡分解成几个短时间的过渡。（三）成功确认：告知用户他们希望的结果已产生文案 tips:1. 在成功确认时，根据用户为结果付出的程度和结果产生的意义，判断是否需要突出成功语气，如果需要突出，可以用“xx 成功”，如果不需要，简单使用“已 xx”即可。2. 不要在成功提示的末尾添加感叹号。3. 不是所有的成功的行为都需要成功确认的提示，有一些行为的成功可以直观地呈现，就不要加冗余的提示。5. 解释说明功能名不能完整地表达含义，或功能名过于专业需要解释，或为方便使用，有对功能额外做说明的必要文案 tips:1. 给操作注释时，直接告知用户会出现的结果。2. 除必要情况（文件格式、工具名词），尽量避免嵌套专业名词进行解释。3. 统一同类解释说明的形式，包括语序、文件类型、文件大小。*以上产品文案写作建议适用于酷家乐工具的人物性格语气，其他产品可能根据自己独特的人物性格语气产生完全不同的写作风格。实践应用并收集反馈建立起这整套人物性格语气以及写作指导之后，我们将其推广到了设计团队以及其他相关职能部门：将人物性格与语气进行设计团队内的宣讲，以便收集反馈和达成共识；根据人物性格与语气，指导设计团队对产品文案进行专家走查；与组织内的其他职能，如产品、运营、销售等进行沟通，了解人物性格与语气对他们的指导作用和需要优化的地方。总结文案虽然不影响产品的交互流程与信息架构，但是作为传递信息的直接媒介，其对于整个用户体验的影响是不可忽视的。好的人物性格、语气能够帮助我们传递出品牌的理念与调性，对它们加以有效应用，用户就能够在产品的使用过程中逐渐强化对品牌的认知。同时，人物的性格、语气也是文案规范的基础，就像是金字塔的塔尖，指导我们应该在具体场景下写出什么样的文案。而把人物性格、语气归纳成一个人物画像，我们在运用的时候就能够通过把自己代入到这个角色、想像她/他会怎么说话的方式，更加快速、准确地作出与文案有关的判断。文中数据均已做模糊处理，非真实数据，仅作为演示用途，对数据呈现不负相应责任。UX文案怎么写？来看看谷歌的方法总结写作是很容易的，你要做的就是删掉那些错误词句。阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/ux-copywriting-tutorial
用户 惊喜 贺卡 前言送礼作为一种增进情感的传统表达方式，送什么样的礼物一直是一个重要的命题，同时，随着人们生活方式日益线上化，线上送礼的需求也逐渐增长，相比与线下送礼，线上方式缺少了面对面的沟通交流，那么如何让远方的 TA 更多的感受到你的用心和诚意，让你送的礼物更有仪式感，也成为了本次「惊喜送达」设计项目中重点思考的主题。如何让用户感到惊喜？在生活中，人们通过互赠礼物增进感情。在精心挑选礼物的同时，用心准备贺卡，写满祝福的话语，并选用考究的包装，提前布置好环境，选择一个重要日子送给对方。看到对方惊喜开心的表情，我们也会同样愉悦。根据期望效应，积极事件的不确定性比确定性会增加人们更持久的愉悦体验，对未来的联想往往会引发进一步情绪感受变化。在邮寄场景中，当用户选择“惊喜送达”服务时，可自定义添加动态电子贺卡，并且可以在贺卡上写上要说的话。“不确定性”因素中增加动态电子贺卡和内容，让用户获得超预期的情感愉悦体验。同时在用户查看运单时，就会播放带着对方祝福的动态电子贺卡。整个用户旅程中形成体验闭环，强化仪式感让送礼加分，进一步引发用户联想。优化目标因此，我们将通过设计惊喜送达动态贺卡来丰富用户参与感和仪式感，营造出礼物寄递过程中的惊喜感，进而提升用户对顺丰品牌温度的感知。接下来，我们通过「触点」「仪式感」两个方面的设计进行具体说明。设计策略1. 触点设计「惊喜送达入口」—— 吸引用户注意力“惊喜送达”功能在设计之初不是所有的托寄物品类型都支持，而是系统判定属于礼品的物品才会对用户展示。对于接触过或使用过该功能的用户操作习惯已经养成，所以新增动态电子贺卡要保留原有操作习惯的基础上突出功能亮点来吸引用户注意。在功能设计上采用上下结构，突出“惊喜送达”功能，保留滑动开关操作方式并增加行动号召 “限时免费” 引导用户开启；而添加个性贺卡功能置于下方，用户点击即可前往选择贺卡，选择完贺卡右侧会生产预览图。上下结构方便用户操作和信息阅读，用户选不选择贺卡都不影响“惊喜送达”功能的选择。「选择个性化贺卡」—— 让用户参与定制在设计个性化贺卡功能时，我们想打造出全新的视觉感官体验，采用了动画电子贺卡的形式，通过左右滑动就能快速预览不同动态主题贺卡。同时可以让用户对贺卡的文案进行自定义编辑，让心意传达的方式与众不同。（由于自定义编辑功能尚未对外开放，请小伙伴们敬请期待哦～）如果上述场景触点都是为寄件用户考虑的，那么查看电子贺卡最重要的就是触达到收件用户，并且可以让收件用户与寄件用户产生互动反馈。「查看电子贺卡」—— 体验闭环延长愉悦“惊喜送达”支持用户选择指定派送时间，当运单进入派送状态时，收件人会收到派送短信或微信消息提醒，用户通过消息进入运单信息。这时候我们在用户打开时播放对方为其定制的动态电子贺卡，配合美丽的图形、趣味性动画，还有一句 TA 对你说的话。用户可以选择将贺卡保存本地，也可以分享至微信好友或朋友圈，延长用户愉悦情绪。考虑到寄、收件人都会有查看运单的场景，对于动画展示我们提供了“下次不再展示”的选项，当用户勾选后，进入运单详情则不再展示，可以通过点击贺卡图标进行查看。2. 仪式感设计《小王子》书中有提到，“仪式感能让某一天与其他的日子不同，让某一时刻与其他时刻不同”，它能让平静的生活泛起涟漪。根据“惊喜送达”功能的定位，主要目标用户为年轻客群，他们注重体验，喜欢生活中的仪式感，想要营造浪漫和惊喜。基于该部分的用户特点，以及过往数据表现，我们从节日、纪念日、表达态度三个维度进行创意主题动画延展设计。「设计探索」围绕三个维度提炼关键词，筛选出符合使用场景的主题，并对主题进行关键词联想，从而设定创意思路，创建情绪画板，并进行主题创意绘制。节日氛围设计 —— 情人节通过使用年轻人熟悉的弹幕形式展示各国语言的“我爱你”，增加趣味性，并契合表达浪漫基调的主题。主视觉使用玫瑰花束，突出情人节的氛围，色调选择蓝粉色调，营造梦幻感，贴合年轻用户群体的审美喜好。庆祝日氛围设计——生日快乐视觉构图以生日蛋糕为主体，搭配四周的礼盒元素，表现生日贺卡的主题。背景紫色与蛋糕的黄色，利用对比色更加突出主体蛋糕，紧扣生日主题。在动画设计上，使用全屏幕气球飞起的循环动画形式，烘托生日的热闹气氛，增加活力与趣味性。感谢主题氛围设计——感谢有你主视觉以一双手捧起爱心的构图方式，使用手绘风格，搭配手写风格的字体，给人一种见信如见面的亲切感。光影变化使视觉更集中，整体温馨的暖色调，注重主题性、氛围感，与用户产生情感共鸣，传递正能量。其他主题截止目前，“惊喜送达”动态贺卡共上线了 7 个主题，包含了 “新年快乐”、“辛苦了”、“谢谢你” 等众多主题供用户选择。上线效果新功能上线以来，“惊喜送达”功能点击率提升 505%，其中点击率排名前三的是「生日快乐」、「感恩有你」、「辛苦了」贺卡。「生日快乐」贺卡点击率是 29.7%，最受用户喜爱；其次，「辛苦了」和「感恩有你」贺卡的点击率分别是 19%和 12.8% ，用户也较为喜爱。写在最后在「惊喜送达」功能的设计中，我们从线上寄件场景的送礼诉求入手，分析了用户旅程中的关键触点，以动态贺卡的设计形式，将用户的心意与祝福传递给远方的亲友，让寄件行为变得更有仪式感和惊喜感。设计师的任务不仅仅是让使功能流程变得简洁高效，还可以让产品体验变得更加愉悦；让用户在体验产品、享受服务的同时，获得更多的惊喜与感动。用超多案例，帮你掌握产品设计中惊喜感的塑造方法问题：设计师怎么样才能在产品中为用户塑造「惊喜感」呢？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/dynamic-greeting-card-design
超市 用户 系统 零售服务创新是经济改革与创新转型的重中之重，特别是依托于大数据、云计算、物联网、移动终端，来重构消费场景、优化市场供给、提升流通效率，以新技术、新业态、新模式，来推动传统产业生产、管理和营销模式的变革。而新零售是以互联网技术为基础、大数据为导向，将线上、线下和物流供应链结合的新型零售模式。新零售超市作为与用户互动的体验场景，服务创新并未随着技术环境的创新而改变，线上线下以及物流体验还不够完善。在此背景下，超市购物服务系统设计成为了重要的研究切入课题。相关学者认为应该将新信息技术、服务设计理念与超市相连接，并分析了在新的背景下，国内超市设施及服务存在的诸多问题，探讨了当代新信息技术、服务设计理念及用户体验带来的新机遇，提出了在当代超市服务系统创新中服务流程的系统构建、设施服务与新信息技术的整合、基于新用户价值创造的服务模式。也有相关学者认为可以以互联网技术为基础，运用先进技术手段，改造升级商品的生产、流通与销售模式，从而重塑产业结构和生态圈，打造深度融合线上、线下和物流的新型零售模式。服务设计作为一种创新体验设计方法和实践的模式，以用户生活体验为中心，通过有效地计划、组织服务中所涉及的人、物、场等相关因素，创造服务价值，为新零售驱动下超市购物服务创新的发展带来新的思路。新零售驱动下的超市及超市服务现状2016 年 10 月，阿里巴巴集团董事局主席马云在云栖大会上提出“新零售”的概念 。根据阿里研究院预测，我国电子商务交易额到 2020 年将占到全社会零售总额的 20%左右，这意味着有即时性、体验感的线下零售门店将不会被纯电商网络零售所替代。新零售由传统零售发展而来，再次激活传统实体零售，针对传统实体零售的弊病寻找出路，重构人、物、场，以实现消费者生活体验场景化。2017 年被称为新零售元年，部分线下零售企业通过自建电商平台与移动布局零售生态链等手段加快创新转型，积极开拓线上渠道，调整商业结构，创新服务方式，丰富体验业态。伴随着居民消费力、购买力的日益上升，消费主体个性化需求逐渐明显，依托技术升级，国内外零售商纷纷在新零售的风口落地，如国外典型代表亚马逊 Amazon Go，国内典型代表缤果盒子、永辉超级物种、阿里盒马鲜生等。目前超市是我国线下零售业的主要力量，但现有的超市服务流程、细节以及提供的服务还有很多不足，不够完善，与以用户生活体验为中心的服务设计理念还不够契合，与消费者日益提升的购买力和多样化需求存在一定差距。因此要通过服务设计思维来协调利益相关者、环境、物品以及整个服务系统的关系，让用户在超市能够拥有更好的服务体验。新零售驱动下的超市购物服务创新设计案例分析新零售首先把所有场景数据通过新一代的信息技术和人工智能技术进行数据化，与原有的数据进行融合打通，使得数据维度极大丰富，360地掌握用户画像。只有对用户拥有充分立体认识后，才能更加了解用户，从而使用户服务持久化。阿里巴巴集团引领的新零售，启动零售全生态布局，打通线上淘宝、天猫、1688 与线下百货、盒马鲜生的数据驱动，做到以消费者为中心。盒马鲜生作为线下进行新零售转型的典范，就是通过对消费场景的打造和与线上的融合使得线下零售得以重构，从而满足消费者日益提升的购买力和多样化的需求，提升服务效率，降低行业成本，创造更多价值。目前，市场上最具代表性的新零售超市有盒马鲜生、Amazon Go、超级物种，三者具体情况介绍见表 1。Tab.1 Typical cases of some new retail supermarket services表 1：部分新零售超市服务典型案例情况从服务设计视角分析我国超市购物系统服务设计是一个从系统性和过程性入手的全新、完整、跨学科的综合性领域。以用户需求为中心，帮助提高现有的服务并创造新的服务，令用户觉得该服务更加有用、好用、满意，而且对组织者来说也更加高效。在服务设计流程中，对于依托于服务的商业性活动来说，客户消费的过程即是产品被生产的过程，整个服务流程都需要服务的提供者和接受者共同参与，不同场景的不同设计与方法都会分别使服务提供者和接受者产生不同感受，从而直接影响服务产品系统性的设计。新零售驱动下的超市目前面临的，不仅是实现按需生产，发展柔性定制，优化消费结构的问题，还是升级消费体验以用户为中心的服务设计改良的问题，因此在这个响应零售创新转型的新契机下，运用服务设计思维与方法催生新型超市服务模式并形成零售新生态，对于未来的发展有着重要的意义。用户是服务设计的目标，也是服务设计的核心。新零售驱动下的超市用户需求进一步发生了变化，从“买到便宜的”到“买到优质的”，从买“商品”到买“服务”，从满足生活基本需求到生活中方方面面的精致化升级，因此研究用户是服务设计流程中的重要环节。以下是超市用户群体特征、需求分析：1. 目标购物者目标购物者是指具有明确的消费目的的消费者。目标购物者的特征表现为有明确的购物目标，有主见，经验丰富，理智。购物过程平稳，在购物过程中冲动购物行为较少，一般持有购物清单，按计划购物，不易引发冲动消费。他们的目标需求为希望能尽早地进入超市购买所需的商品，同时在购买完毕后能尽早地离开。2. 探索购物者探索购物者是指不仅具有明确的消费目的，而且对新鲜商品或环境具有好奇心的购物者。探索购物者的特征表现为有明确的购物目标，并且喜欢探索发现更多有趣的物品。购物过程中有适当的冲动消费。他们的目标需求为在购物目标完成的同时可以获得更多有趣的商品。3. 悠闲购物者悠闲购物者是指没有明确消费目的的消费者。悠闲购物者的特征表现为没有明确购物目标，购物时具有较强的随机性，在购物过程中常常因为偶发因素而进行消费，如广告、亲朋推荐等。在购物过程中对新鲜事物比较敏感，易引发冲动消费。他们的目标需求为闲逛，“凭着感觉走”，享受通过多方面的消费服务来获得个人满足感。用户旅程地图从超市服务全局出发，明确用户所处的目标群体，创建适合典型用户的消费场景，并对目标用户在不同的消费服务场景中的不同服务接触点的行为、态度和情绪进行分析，了解以用户为中心的需求，解读用户痛点，优化用户情绪感受，定义超市服务系统的优化方向和设计的机会点。超市服务系统用户旅程地图见图 1：图 1 超市服务系统用户旅程地图服务蓝图用户旅程地图以数据可视化的方式表述用户经历的故事，从初次接触，形成契约，再进入到一个长期合作关系，包括分析用户在购物前，购物中以及购物后的各个阶段里做什么、想什么和感受什么。然而偏向于以体验为中心的用户旅程地图，所包含的购物流程细节较少，其更多展示的是关于用户购物体验方面的信息。而服务蓝图则能通过可视化的展示形式，关注服务实施过程中的触点，偏向于以流程为中心。它包括了后台和前台的服务流程以及支撑行为，超市服务系统的服务蓝图见图 2：图 2：超市服务系统服务蓝图基于服务设计思维的新零售超市购物系统设计创新策略新零售超市购物服务系统只有融合多领域的服务系统才能有效地推动市场经济，线上、线下及物流深度融合的新零售驱动下的超市购物服务经济，从社会可持续发展角度出发，通过政府政策引导，以及社会情境、资源环境，文化因素等的影响，实现新的商业价值。为新零售驱动下的超市购物服务系统的完善与发展，提供新的服务模式思路。1. 以用户为中心的竞争态势个性化服务服务设计的重点在于提供的产品和服务体验的总和，关注人与人、人与事物、人与系统、系统与系统之间的价值与本质，而这种价值与本质就是以用户体验为中心的需求。由于日益增长的消费需求变得越来越个性化、多样化，消费场景成为新零售模式的目标，而实体零售的消费服务模式更应集购物、餐饮、娱乐等体验于一体，在一定环境中营造出消费个性化和场景化的氛围。在新零售驱动下的超市购物服务系统中，以消费者运营为核心的全域营销，通过互联网技术的运用，打通消费者的消费倾向、嗜好、品牌忠诚度及分享反馈的力度，构建商业闭环。真正实现消费方式逆向牵引生产方式，提升门店消费体验，为场景变现提供强大助力，为竞争态势下的用户提供更好的个性化服务。2. 数据技术信息的可视优化新零售是数据驱动的零售形态，数据的挖掘对产品服务信息有着良好的帮助，可以借助大数据时代的技术，提高用户超市购物的服务体验。将大数据技术应用在新零售驱动下的超市购物中，通过建立大量数据模型筛选用户消费数据信息，来进一步了解用户的个性化需求。如超市在线评价数据的收集应用，可以方便用户在购物社交方面对有效信息进行选择与判断，从而优化用户的购物体验，提升超市的购物服务价值。3. 消费需求的情感化品牌塑造服务设计的目的是更好地为人服务，而情感是人类的主旋律。消费产品的品牌形象在消费者情感与购买行为中起到连接作用，促进用户消费性行为的产生，让消费者在产品购买、消费、服务等每一个环节都能感受到品牌带来的美好体验，从而形成对品牌的信任感，因此产品品牌形象的树立，对于消费者的购物体验至关重要。消费者从接触一个品牌开始到最后消费的全过程，包含查找、对比、下单、体验与反馈几个阶段，超市应该在这些关键点全程保持与消费者的零距离接触。通过消费者购物全过程的数据，来及时互动、掌握消费者消费情绪的变化，完善与之对应的产品情感化品牌，优化消费者购物体验。4. 去中心化的消费场景重构新零售的核心是线上线下与物流相结合。伴随着互联网爆发式的发展，年轻一代的消费观在垂直领域呈现出了娱乐化、虚拟化、专业化以及碎片化的消费趋势，去中心化的消费氛围和资本助推，共同催生了各类创新的新零售模式。重构去中心化的消费场景目的是为了回归零售的本质，消费者所购买的商品将来自于各种消费场景，而不再是单一的超市门店，门店不再只是逛街的地方，更是让消费者体验到更优质服务的场所，促进消费者由商品消费向服务消费转型。构建无处不在的消费场景，丰富消费者购买商品和接受服务的渠道，为消费者提供全渠道、全天候、线上与线下无缝衔接的服务场景，促进服务升级。新零售超市服务系统优化设计实践1. 服务系统模型构建为用户带来一定的服务价值是构建服务系统的主张，服务创新则是服务系统的提供方核心竞争力的所在。以服务设计理论和服务视角下的超市系统构建创新设计策略为指导，以用户需求为中心，提升用户体验，构建新零售驱动下超市服务系统模型。新零售超市服务系统包括：超市、产品供应商、用户、用户的家、工作人员、小程序、大数据云平台和信号服务商等 8 个部分内容。新零售超市服务系统模型见图 3：图 3：新零售超市服务系统构成2. 服务实践方案用户可以通过嗨购（HIGH GO）小程序来提升购物体验，通过语音语义和 GPS（定位导航）指令，来帮助用户生成、分享购物单，提升停车服务、一站式导购、线上专属推荐和拼团等购物体验服务。产品结构图是综合展示产品信息和功能逻辑的图表，简单地说，产品结构图就是产品原型的简化表达。嗨购小程序总体功能分为拍照、发现、语音/文字输入、购物单和我的。嗨购产品结构功能见图 4：图 4：嗨购小程序结构功能图拍照包括 VR、扫码、通用、相册和翻译。用户可以通过拍照功能来识别手写的购物单，通过扫码查看相应商品的价格等信息，也可通过翻译来临时翻译进口的商品信息等，同时，还可通过 VR 功能为儿童带来水果和蔬菜故事的讲解。发现包括专属推荐（为你精选、限时特价、爆款直降和已抢）和正在拼团（新鲜水果、蔬菜豆品、肉蛋水产、乳品烘焙、零售酒水、粮油调味、熟食面点和优质冻货）两个功能。通过用户的消费数据来为用户进行精准的推送，提升用户的体验，降低信息推广的成本，提升信息有效转化率。语音/文字输入用户可以通过语音来生成购物清单，也可查询商品信息、超市停车位等，同时还可快速生成导购地图，降低目标购物者的购物时间。购物单包括购物单的生成、编辑、分享以及添加购物车。用户通过购物单的辅助，可以有效地提升购物效率。我的即个人中心，包括钱包、优惠券、收藏、会员、购物车、订单、地址、停车、服务中心和设置。用户可以通过登录来绑定个人信息，如绑定会员卡，从而更加方便快捷地辅助购物行为。HIGH GO 小程序的色彩扮演的角色仅次于其功能，不同色彩给人不同的心理感受，它能够帮助用户查看和理解小程序的内容，了解操作，影响用户的行为，色彩的选择要结合用户的使用场景。超市购物系统属于服务类，要考虑用户的心理需求，颜色相对表现活泼，不能过于太沉闷，要让用户在使用时感到愉悦。最终新零售超市服务实践配色视觉方案见图 5：图 5：新零售超市服务实践方案结语新零售驱动下的超市购物体验服务创新，为优化消费者购物的场景体验提供了理论支撑。本文从服务设计的方法和思维方式出发，对现有超市服务进行调研，并简要分析了影响用户消费体验的关键因素。虽然超市购物服务系统创新策略为超市行业的发展提供了一些思考和启示，但是由于超市服务对象具有差异化，服务的内容具有广泛性和不确定性，如用户的心理因素等对购物体验的影响，所以还需要对超市购物服务系统进行讨论研究，这也将成为新零售超市购物服务系统设计的研究重点。用58的实战案例，帮你认识一次完整的服务设计流程业务：“我们不是有线下店吗，我们想对门店装修进行一次升级。阅读文章 > 参考文献：[1] 王宝义. “新零售”的本质、成因及实践动向[J].中国流通经济,2017(7):3—11.[2] 张凌浩,倪鸣,贾丽丽.以系统创新为导向的超市服务设计策略研究[J].包装工程,2014,35(12):66—69.[3] 胡瑜杰.新零售背景下农产品流通现代化升级路径探析[J].商业经济研究,2018(11):131—133.[4] Moritz S. Service design: Practical access to an evolving field[J]. 3rd edition. Cologne, Germany: Köln International School of Design, 2005, 1—61.[5] 何人可,胡莹. 服务设计概念衍生阶段的设计模式与策略研究[J]. 设计,2015(1):40—49.[6] 赵树梅,徐晓红. “新零售”的含义、模式及发展路径[J]. 中国流通经济,2017,31(5):12—20.[7] XIN Xiang-yang.Strategic Positioning of Experience Design[C].UCAN,2017.[8] 王国胜.服务设计与创新[M]. 中国建筑工业出版社, 2015.[9] 徐鑫亮,于泽卉,孟蕊. 新媒体环境下消费者互动、品牌情感与购买行为——基于互动仪式链理论的分析[J]. 商业研究,2018(7):24—32.[10] 付心仪,刘世霞,徐迎庆. 信息可视化的发展与思考[J]. 装饰,2017(4):16-19[11] 蔡丹红,龚春杨. 互联网时代传统产业品牌融合创新的路径探究[J]. 企业管理,2016(1):116—118.[12] 商务部流通产业促进中心. 《走进零售新时代——深度解读新零售》报告[EB/OL].(2017-09-11)[2018-11-02].http://www.mofcom.gov.cn/article/shangwubangzhu/201709/20170902641772.shtml本篇来源：优设网原文地址：https://www.uisdc.com/supermarket-shopping-service-system
角色 用户 宇宙 导语随着 trovo 社区的发展，玩家多样性也越来越明显，为了社区氛围更能体现海外文化多元包容的理念，我们展开了关于 IP 家族的思考。多方面了解行业和自身特征1. “小世界”存在的支撑点通过备受关注的的英雄联盟、漫威和封神榜宇宙这些家族化的 IP 和成熟的宇宙故事里以及被人们推崇喜爱的程度来看，世界观对于电影文学和 ACG 游戏内容产业对于 IP 的成功塑造是显著的。而它的逻辑上的实际用途对于创作者的工作也能有效提供认知边界和创作依据。2. 大 IP 怎么传递自己的“小世界”以《星球大战》、《权力的游戏》为例，他们都构建了一套蕴含着哲学、科学原理的世界观。一方面赋予内容层面和视觉元素的规定情景，划好边界合理性，将用户和创作者的认知拉到同一个层面上；另一方面为内容创作者提供了合理的脑暴灵感库，有效提升内容产出的效率。3. Trovo 海外社区玩家环境特点Trovo 旨在打造全球互动内容游戏玩家社区，目前面向的地区主要有北美、拉美、欧洲地区。多样的国家，由于在语言、宗教、文化和审美都有诸多的差异。我们在探索一个能被海外社区用户理解并保持忠诚度的宇宙和家族角色之前，先去了解他们生活的政治、文化环境和喜好，以帮助我们更好的实现一个大同小异的科幻世界，能够映射每一个用户的身份，给予一个属于他们自己的世界。搭建小世界的“物理环境”1. 提炼小世界的“三要素” — 提炼关键词通过以上的分析，我们对海外玩家有了进一步的了解。接下来需要总结出 trovo 宇宙中，关于历史、文化、地理的背景三要素，以帮助我们完成细节的设定。我们对 T 宇宙设定的大概轮廓，锁定在了包容性高、科技发达、发展探索，这三个关键词上：地理：在面对全球化的用户背景下，我们希望创造一个能对所有地区的用户来说都是可以被接纳的环境背景。文明：结合玩家的喜好和产品的直播社交功能，更希望这个虚拟世界的文明是拥有高度发达的科技技术的，能够让玩家自由地交流和沟通。历史：结合社区的发展现状，我们是一个正在快速发展中的内容平台，用户组成更偏向倒金字塔的结构，所以希望构造一个更关注中低腰部用户的发展中世界，每个人都在探索未知和发展自己的路上努力。2. 为小世界“添砖加瓦” — 总结框架我们根据三个关键词，再结合产品特色、用户感知、市场上做得好的 IP 宇宙，脑暴了一些细节词的设定去帮助我们完成框架故事的描述。在广阔的 Troverse 宇宙中，有无数个星球，每个玩家都拥有一个专属星球，他们各有千秋，值得被探索和发现。而玩家可以利用“传送科技”探索其他星球，分享游戏、分享快乐。但是这个世界并不完美，星球间的连接不够紧密，大星球的光芒常常掩盖周边的小星球。“传送科技”的连接常常不稳定，需要一种名为“Data Gems”的能量来维护直播流平台，幸运的是，它能被在每个星球上挖掘到的。据此，星球上的玩家不断探索穿梭于新的星球之间分享和探索，致力于让每个星球都能闪闪发光。生动化小世界，打造 IP 家族1. IP 家族化的原因其实我们一开始产生做家族 IP 和宇宙的想法，是为了结合产品中的多人开播功能 Squad 去做的。这个功能中最大的特色就是“多人连线直播”，所以我们把家族名称命名为“T-squad”小队，非常有超级英雄的基因。在此之前，Trovo 平台已有基础品牌 IP 形象叫 Leon，它在很多方面表现非常出色，得到了许多用户的喜爱。海外用户对于性别、种族的平等是比较看重的，可惜的是 Leon 的男性知识非常明显，这让它在面对海外用户的包容性上并不是那么的全面。多元角色的包容性更高，而且在品牌价值上，成体系、家族化的集群化在力量上是更强的。那么问题来了？就是当我们向用户抛出这么多角色时，他要怎么记住呢？2. 归纳 IP 家族的个性基因要达到区分角色的目的，就需要传达属于角色独有的设计点，并且为他们设计特有的个性。但这些都不是凭空捏造的，要让用户认可这些角色就需要更全面的去分析。我们从专业性格测试、用户游戏角色类型、社区主播、观众、政治环境性别平等四个维度，划分成了角色设定的 4 个象限，从中去组合形成多元角色。3. 赋予 IP 家族差异化的内在表现如何合理的进行设定角色框架也是一个比较冗长的过程，要在保证多元化的情况下，平衡地去分配每个象限的比例，如果稍有不慎，就有陷入种族歧视、政治不正确的困境中。为了让这些角色更好的服务于产品，我们赋予每一个角色符号化的产品象征，这对后续的视觉化也比较有重要的参考意义。（小插曲：原本只有一名女性角色，后面受到海外同事的建议和反馈，我们新增了一名女生角色。而在角色的肤色考虑上，尽量避免刻板印象，如黑人我们原本使用的是黑色，后来改成了蓝色。）4. 在小世界中找到“自我”的故事从大部分成功的 IP 故事构成来看，发展和冲突是构建情节的必要元素。根据世界观的框架，我们花了比较多的时间对”T-Squad“小队的故事做了设定，一包括多元角色和这个世界的主故事线，二是每个角色自己的故事线。家族 IP 的外在差异化表现1. 草图阶段-任由想法天马行空对于小队角色的构思要遵循原品牌原有的 IP 设定，变色龙作为基础形象进行二次创作。但是这个阶段不宜过早设置太多规范因素的影响，应该尽可能的发挥创作者的自由发挥能力，表达出能和设定吻合的角色外形。2. 平面阶段-规范化表现进入到 2D 设计的阶段，不能仅着眼于细节化的呈现，更多的是考虑动作、道具、画风等视觉语言的统一性：设计时对后期可能性的应用有一定的考虑，例如后期可能会有线下周边的生产需求，那么我们尽量把角色的身高差异设计得不要太大，有利于减少生产周边产品的难度。为了契合世界观的题材，我们采用了比较多的机械化科幻的元素去融入到角色的服装和道具中。3. 三维阶段-可应用性进入到 3D 设计阶段，在遵循 2D 设定的基础上，对我们平台而言材质不追求真实质感，追求后期的延展和应用性。（由于项目紧急，我们将一部分模型工作外包了出去，感谢萌熊和尚章工作室对部分模型的支持。）考虑到该多元角色后续其他活动的应用，所以前期会更注重角色骨骼、表情的绑定、权重的设置上，以保证角色做动作的时候不会有严重的穿膜问题。这里推荐使用自动绑定骨骼工具 Mixamo 以及节点姿态变形适应快速完成节奏快的项目：多途径传递“T 宇宙”1. 玩家互动体验—年度回顾万事俱备，只欠东风。世界观和角色都有了，是时候让它和用户见一次面了，我们借助用户数据年度回顾运营活动，验证世界观。我们设置了能够让用户能有更沉浸体验的黑洞进入基地的方式来选择自己喜欢的角色，并且能够在房间里探索道具和查看自己过去一年的数据，强调自由探索和个性化情感。在许多的文案细节上，我们也精心为每个角色设计了属于他们自己的个性化对话、让用户更能感受到角色的魅力。2. 认领“专属基地”场景构成：“每个玩家都有专属自己的星球”是世界观中非常具有个性化的限定场景，当我们需要根据每个角色的特点去设计场景时，面对多个角色时就变成非常有挑战性了，我们要将一个场景大致构成、位置、和道具模块确立下来。道具设定： 道具根据不同的场景需要，做了情感承载和功能数据承载的区分，情感承载可以塑造角色性格，功能数据承载可以展示用户数据：推进基地外观设计，在视觉上使用了科技金属外框、搭配星空流动的背景等元素增加用户置身在宇宙中的情景化元素，呈现两种视角的基地，让用户对自己的基地有更全面的了解：3. 探索自己基地里的“专属数据”在基地中我们设置了专属的基地编号，凸显房间的独特性。房间内的部分道具可以互动，让用户触发后可以查看自己对应的数据统计；用户可以根据心情选择自己想要分享的年度数据，包括基地的卡片。4. 和角色产生情感链接-角色动作小团队中面对大量角色动作的产出时，能够使用 Mixmao 动作库去快速生成骨骼运动，是比较高性价比的，角色动作结合性格去做演化，我们将动作分类了为飞船挥手、进场、avatar 默认呼吸、点击互动、跳舞庆祝，另外我们需要让动作和手势适合而且要在大范围地区没有贬义。游戏化的角色选择界面，通过场景道具触发动作：5. 宣传小 PV 微动画动画能够让观者十分直观地了解到品牌想要传达的价值和故事。对于 Trovo 这样一个快速发展中的产品，结合自身人力条件，我们希望短平快地以最小成本做一个小短片。一方面为活动预热，达到刺激用户参与度的效果；另一方面，我们希望通过这部短片，能够向用户传达我们构建的宇宙面貌。故事的节奏我们也希望可以通过一个从低-高-低的方式展开。6. 周边徽章套盒-真实世界的碰撞我们还生产出了一系列全珐琅徽章套盒，加强用户对于世界观的印象，毕竟用户对于拿到手上的东西感知会更深，一共有 2 个系列，典藏套盒用于赠送给主播纪念，盲盒套装用于线上商城进行售卖。以 5+1 的形式区分常规款和稀有款式，增加了流行的盲盒的玩法。旋转配件：针对每一个角色所代表的产品象征，将道具零件制作成了可以 360 度旋转的凸起零件，旋转起来非常丝滑，总之一句话，盘他！特别稀有款：而对于稀有款式的大魔王 GG，当然不能缺少了特别的出场方式，日光模式下金粉闪烁，异常夺目。而在夜光模式下，也不能输，他手中的绿色能量蠢蠢欲动，荧光散射，仿佛正在谋划下一场 troverse 宇宙的能量争夺战。对未来的思考和展望1. 家族角色整体反馈活动得到了一些不错的正向反馈和用户的喜欢，从数据表现上来看，leon 的使用次数达到 5 万人次，它作为品牌的原 IP 形象，用户对它的忠诚度还是比较高的。其他新晋的角色也有不俗的表现，还有社区主播利用 penny 的模型制作了一款游戏，也从另一方面说明了海外玩家是很有创造力的。2. 对“T 宇宙”的后续思考展望Trovo 还在成长，包括 T 宇宙也是初步形成，但是仍然希望能够向 ACG、文学电影领域学习，不断完善世界观的和加强重视，这不仅对品牌来说是一件有益的事情，还能提供有效的创作支撑点。对于这些新晋的家族成员，要通过更多维度的运营活动融合，去培养和提高用户对他们的忠诚度，让他们慢慢喜欢上这些角色。由于这次项目过于紧急，角色的外在表现仍然有很多不足的地方，期待后续的迭代更新。Troverse 宇宙仍有很多缺失的部分需要完善，如不同角色间的互动性故事、不同的种族间的关系，其生存环境；宇宙地图和地区的分布，区域之间的关系；不同星球之间的生存、娱乐、工作方式的体现；反派角色的塑造等。出海产品如何从零搭建IP插画库？让大厂高手教你！插画作为一种高效的视觉表现手法，在如今的互联网设计中已被广泛应用。阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/trovo-ip-design
用户 数据 文章 自 KPI、OKR、AB 实验等理念流入互联网后，长期以来业内的行事准则都是“数据导向”，想必日常工作中你也经常被产品规劝“哎呀～这样做数据一定会好的，不要在乎这些体验细节”，或者你也有过试图说服产品“体验好的话数据就会好呀”，但往往有些时候在项目规划和设计阶段自信满满地认为可以带来数据收益的项目，上线后却不理想，这是为什么呢？本期，我们来说一说项目上线后数据复盘和体感差异的原因。我们先厘清几个概念，体验好、口碑好和数据好。在这里我们暂且先定义「体验好」为项目执行者认为的好体验，诸如减少一步操作、更容易获取关键信息等业内理论上认为的体验好；「口碑好」是项目实际上线后用户的正向反馈；「数据好」是项目上线后观测指标达到或超出预期。如果照这么理解的话，我们通常的思路是「体验好」带来「口碑好」，「体验好」和「口碑好」共同带来「数据好」。接下来我们通过几个案例来详细讲讲实际发生的，不符合模型的情况口碑差，数据好写这个议题的时候，首先映入脑海中案例就是 19 年订阅号的一次改版，改版的主要优化点是把原先进入时为账号列表改为进入文章信息流，如下图所示：从产品设计思路上来讲，用户进入是来消费文章的，原方案用户需要先选账号（文章来源），再选择想要阅读的文章，改版后直接把文章呈现在用户面前，属于设计思路中常见的“减少一步”带来的“体验优化”。然而项目上线后却遭到用户的强烈不满，用户意见诸如：“越改越乱”、“我现在都不知道哪些公众号有多少条消息没看”、“逼着我取消了好几个公众号”，当然，其中也不乏一些赞美之词，但不习惯/不喜欢/体验差的声量还是占据了反馈的绝大部分。在这样的骂声中产品还是坚持这样的方案，想必数据应该给了产品相当大的正向反馈。这是一个理论上体验好，实际上口碑差但数据好的案例。我们将用户反馈进行一些归类处理，就能发现这次数据复盘与体感差异不符的原因。负反馈的用户大多是有深度阅读习惯的用户，习惯是先寻找今日想钻研的领域（对应某个账号），然后一次性地认真阅读吸收文章，改版后对这类用户来说，首页的劣质内容抢占了太多视线，导致寻找合意的文章变得困难。假设一下你是一个历史系的学生，你每天会去学校图书馆里的历史区阅读相关书籍，但你也喜欢看杂志和小说，历史书读累了偶尔也会逛逛其他图书区。现在图书馆突然跟你说，反正你来这里都是看书的，我发现你会看历史书、杂志和小说，我把所有的杂志小说都和历史书混在一起给你，省的你在这些区里走来走去的，你会因为图书馆让你少走了几步而感谢它吗？显然不会，这样你每天读书之前就得先把历史书筛选出来，而筛选历史书的成本远比多走几步路的成本大得多。当然，肯定不是所有人去图书馆都是去读专业书的，也不是所有使用该功能的用户都有深度消费习惯，但是用户对功能的依赖程度不同，导致用户愿意为功能发声的意愿也不同，当深度用户的体验折损远远大于非深度用户的体验升级，带来的必然是负反馈强势碾压正反馈。而为什么数据会好呢？深度文章的生产和消费成本远远大于非深度文章（成本可以理解为需要付出的时间&需要掌握的知识储备），原来先找账号后找文章的方式，用户会主动去寻找深度文章来阅读，而现在是非深度文章占据了首页百分七八十的版面，假设你每天花 100 分钟阅读，阅读一篇深度文章需要 25 分钟，阅读一篇非深度文章需要 5 分钟，那么改版前你每天可以阅读 4 篇文章，改版后你每天可以阅读 20 篇文章，数据这不就上去了？再举例假设，全校 1000 个学生，只有 50 个学生每天泡馆，200 个学生经常去，其他学生比较少只看一类书，甚至有的同学不爱看专业书，觉得去图书馆麻烦就不常去。但是图书馆改版后，所有书你随便抓一本就可以开始看，50 个每天泡馆的学生不爱去了，200 个经常去的学生里 100 也不爱去 100 个觉得差不多，但是剩下 750 个学生里有 600 开始抽空去图书馆看一看了，这图书馆的生意不也好起来了。体验好，数据差我在几年前做过一款国外产品，针对的是非发达国家地区的摩的市场，可以简单理解为国外打摩的软件，用户在软件上呼叫摩的后，摩的师傅来接送你，你需要在软件上输入摩的师傅的号码完成旅程并付款。简单流程示意如下图。当时二维码已经在国内盛行起来了，国内用户已经习惯了使用二维码做任何事，包括付款。我们认为使用二维码会比输入一串数字来说更简便，体验更好，所以决定把输入「摩的的编码」这一步优化为「扫描摩的上的二维码」，并向摩的师傅们发放了专属的二维码贴纸。我们自信满满，觉得这样的优化一定能够带来用户体验的升级，拉新促活不在话下。然而结果却背道而驰，改版后平台成单量显著下降了。我们不得已做了一次当地用户调研和访谈。原来，因为当地经济情况和技术水平都较落后，二维码对当地人来说十分陌生，人们很难下决定通过这样陌生又迅速的行为去执行付款操作。用户对二维码表现出的强烈不安全、不信任感直接影响了用户放弃成单付费。相反，输入数字串（俗称 PIN 码）虽然流程相对繁琐，但对于付款这种慎重的行为，恰好留足了时间做思考和决定。与此相似的案例在国内产品上我又碰到了一次，这次是开设房间时需要对房间设置权限，起初我们的版本是作为选择项，用户开房时可以选择所有人可加入或者只有朋友能加入。有一次，我们觉得这样的设计似乎有些繁琐，只需要一个权限开关就可以了，打开开关就是仅朋友能加入，关闭开关就是所有人都可以加入（这层含义较隐晦，需要用户额外去思考和理解），我们又一次自信满满地上线了。结果又一次与预期背道而驰。第一个例子与第二个例子有一个相似之处，是对用户来说，这都是一个“谨慎的操作”，对于“谨慎的操作”，传统理论上那些「体验好」的方法（更快一点，更简单一点）不太受用，这些「体验好」的设计仅仅只是从行动上帮用户减少了一两步，却没办法帮助用户减少执行行动前的思考。举个例子，你本来需要亲自开飞机空投炸弹，优化到你只需要按一个按钮就可以发射炸弹，对你投炸弹这个行为的影响大吗？不大，因为「要不要投炸弹」在行动前的思考远远复杂于「投炸弹」这个行为。反而可能因为我们有时间在飞机上了解清楚“炸弹”，而没办法在按钮上对“炸弹”有理解，而导致面对着按钮犹犹豫豫，最终放弃。对于复杂且谨慎的行为，设计清楚（帮助用户在思考节省时间）远比设计简单（行动简单了但思考不会简单）来得更重要。体验不好，数据好“我在这里放个按钮/入口！”“这里不符合使用场景呀。”“我知道，但这里流量大（os：我需要流量把我的功能戴起来）”“……”“按钮/入口要设计得大一点，再大一点，颜色要鲜艳的，最好是大红色，能来点动效就更棒了”不知道这样的对话大家熟不熟悉，我早期的职业生涯中经常能遇到这样的项目需求。但往往这样又大又红的设计还总能拿到很好的数据供人吹嘘，明明用过的人都觉得这样的设计体验很不好，为什么却在数据的驱使下越来越猖狂呢？以上图的例子做展开，在这样的需求下，我们可能会被迫做出这样的设计：上线后，项目负责人发了一封邮件：需求上线后「算命」功能使用 pv/uv 上涨显著，证明这是一个合理的需求，非常好的设计，我们要朝着这个方向持续优化！但你真的觉得这是一个合理的需求、好的设计吗？这就是典型的把数据当目标，以片面下结论的情况。首先我们必须明确一点，做需求做设计都是为了更好的体验或服务新的产品阶段，数据只是辅助我们判断有没有达成目标的工具，切莫盲目服务数据。其次，在做需求做设计的时候应有全局观。就以上述所举例子展开，需求的目标应该是在用户想算命的场景提供算命服务，如果我们判断消息页是用户想要算命的场景，那么我们上线后观测的数据除了算命功能的 pv/uv，还需要补充退出率，以及顶部新增算命入口后，对聊天页的折损数据（聊天 pv/uv，收发消息数…），把这些考虑进去我们很可能得到不一样的数据结论：看完真实的复盘后，首先应该能判断消息页不是用户想算命的场景，此时如果你的产品策略不是把这个软件转型成算命软件就可以下掉这里的入口了；如果你正要转型算命软件，非常需要消息页来带量，那么你也能看出来在这里加入口对聊天体验的折损有多大，此时你就得思考一下，「带起来的量」值不值得聊天功能「折损的体验」？如果不值得，你也可以开始考虑换种方式带量了；如果值得，那继续做大做强就没什么问题了，祝福这个产品成为算命一霸。总结项目上线后数据复盘与体验有差异是很常见的，包括但不限于上面所述案例表现出来的原因。总之，还是要牢记数据是工具，不是目标，如果发现数据复盘结果与预期有不符，可以尝试：给用户分层，更细致化地分析用户行为；通过用户调研了解用户真正的使用场景和流程，真正帮用户解决难点而不是“伪体验好”；以及，用更全面的视角、结合更多信息来看待项目是否达成目标。“数据说谎”的现象还有很多，将来再继续讨论。产品用户体验很好可是数据不佳，问题出在哪里？编者按：这篇文章来自 Any.do 的设计师，分享了一些关于 UX设计和产品升级开发的故事。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/ux-date
按钮 用户 操作 按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结 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
印尼 用户 产品 2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。往期回顾：企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。阅读文章 > C 端设计内核探索回到最基础的用户体验设计流程，我们需要对 Speedwork 的商业目的、产品目标及用户需求进行深挖，也就是战略层。 站在 C 端用户的角度上，能想到的关键词为：正品保障、专业服务、价格实惠透明、便捷、选择多等等。我们的任务是打通线上线下体验闭环，关注各个用户触点的产品体验，帮助用户更轻松更高效的完成汽车养护，建立平台品牌心智。Speedwork Customer App 的目标用户为两轮、四轮汽车车主。通过对目标用户的问卷调研，针对 C 端用户在购买转化阶段的主要决策因素进行分析，对其中的 21 项因素做了基于 KANO 模型的分析，考察不同因素在购买时候的影响程度。UI 进阶必学系列：需求分析工具 KANO 模型大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。阅读文章 > 最终 Speedwork Customer App 的核心理念聚焦在 4 个关键字：简、好、惠、安。Auto care supplies & services on demand. 品牌触达，情绪共鸣1. 简单易用基于养车业务的线上化，更多的内容和服务需要在 Speedwork 上去体现。不论对于内容的认知，还是平台产品功能的操作体验，我们都希望能以简单的方式直接面向用户，让用户能够轻松掌控一切并能感受到细致入微的服务体验。2. 正品保障、贴心服务、便捷体验“专业养车”是 Speedwork 需要传递的第一印象。我们希望通过一致性、亲切感、场景化的表达让用户感受到专业信赖、贴心服务的 Speedwork。设计师需要在界面上将正品保障、质保服务、专业度进行透出，将心智传达到用户侧。3. 产品的价格有竞争力印尼的人均客单价低：平均网购额为 481000 印尼盾（约合 36 美元），这一数据远低于新加坡（平均 91 美元），印尼在东南亚国家中排名倒数第二。因此有竞争力的价格，一定是初期获客的关键因素。由于人的大脑存在“损失厌恶”等认知的偏差，利用这些认知偏差我们可以给用户适当的紧迫感，例如加一些限时限量的元素，所以如何在用户决策的拐点界面去呈现促销是设计的重点。4. 数据安全与隐私保护、数字支付安全第一章提到由于消费者对于在线交易缺乏信任且信用卡普及率低（印尼不到 5%的人拥有信用卡），所以在线支付的时候消费者更倾向于银行卡支付及货到付款。受疫情影响，印尼的消费者大大减少了对现金的使用，电子钱包成为在线支付的最优选择。作为一个汽车养护电商平台，保护用户数据及支付安全，是获得用户信任做出购买决策因素之一。统一的视觉语言1. 情绪板我们使用情绪板确定视觉的方向，明确契合汽车养护场景，探索建立一个专业、信赖的品牌主色，让用户直观的感受到品牌理念。通过对“简、好、惠、安”4 个关键字进行映射衍生（视觉、心境、物化），检索出具有代表性的图片，进行情绪版的制作。最终我们选用绿色作为产品主色，绿色在印尼本地是非常受欢迎的颜色，绿色是穆斯林的代表色，本土电商 tokopedia 以及生活出行的两大巨头 Grab、Gojiek 的产品色也都选取了绿色。2. 框架搭建从 3d 视角去看界面，可将页面水平切片为背景层、内容层、框架层、临时层。从下往上看，背景层是整个页面的全局背景色，内容层是承载着不同页面功能需求、业务诉求；框架层主要是标题导航栏和底部菜单栏，它们是控制全局页面跳转关系的；临时层主要是事件的展示，比如动作面板、选择器、对话框、提示、通告栏等。3. 建立规范相信大家对设计规范、设计系统都不陌生，我们基于原子设计理论，分别建立中后台产品、移动端的设计规范，将业务与设计解耦，将组件拆分成原子级，再进行拼装，从最小颗粒度（原子）、简单组件（分子）、复杂组件、模版、再到最后的页面搭建。当业务复杂度高的时候，设计师会根据不同业务进行业务组件的设计。但业务组件的基础其实都是在于原子级设计，只是业务组件不具备通用性。4. 注入品牌 DNA我们结合品牌基因，增强识别，并通过网格化规范绘制，使得整体统一有序。细节的体验设计1. 字体的选择设计师要注意产品所使用的字体是否有版权问题，尽量使用开源字体，并且该字体能适配多语言。Speedwork 使用的字体是 Roboto，和 logo 的文字字体一致且能够适配泰语、印尼语、越南语和马来语。Roboto 是随着 Android 4.0 操作系统引入的一种无衬线字体系列，该字体由谷歌的界面及字体设计师 Christian Robertson 设计，并且完全开源使用。2. 多语言适配（印尼语&英语）Speedwork 交付的时候不止是在印尼上线，同时会进入马来市场。因此界面设计时需同时考虑到印尼语和英语的字段长度，避免固宽的控件里文字被截断展示或者换行的情况。另外一个问题，我们设计是以英文交付的，印尼运营人员再根据英文翻译印尼语，这个时候翻译者一定要考虑到展示场景，尽可能的准确及简短。3. 手机号格式在竞品分析的章节，不知大家是否留意到，Planet Ban 的手机号填写规则是最小 10 位数且需开头加 0，例如 08**********；Bukalapak 和 tokopedia 的注册页也在输入框下面增加了提示“例如：081234567890”；但是 Shopee 是自动根据手机号去识别是那个国家的号段，当小编输入手机号后自动识别为（+62）822-****-****。经过分析对比可看出，印尼本地产品不支持其他国家手机号注册，因此无需选择或展示+62（国家代码），Shopee 和 lazada 都是针对东南亚市场多个国家的，所以会展示国家代码。印尼手机号为 08 开头，从 10-13 位都有，其中超过 90%的为 12 位，11 位和 13 位约为 4%，10 位的不足 1%，因此手机位数的判断是“10～13 位数字”，如果去 0 输入，则手机号位数判断应该是“9～12 位数字”。为什么可以去 0，因为 0 后面开始的 3 位才是运营商的号段，比如 822 就是 Telkomesl 的手机号，就跟中国移动，联通号段不同一样。那到底是依照本地产品加 0 的输入格式，还是依据国际化产品国家号+去 0 手机号的格式呢？从用户角度，两种形式都可以，以 Shopee 和 Tokopedia 势均力敌的访问量看，用户都能理解并完成注册。从产品角度，Speedwork 虽然以印尼市场为主，但同时也需要进军马来市场，考虑到数据存储的标准和后续的通用性，最终是选择 Shopee 的形式。4. 日期格式众所周知，中国的日期格式是年月日，美国标准日期格式是月日年，英国的日期格式是日月年，如 1987 年 4 月 20 日，美国是 April 20, 1987，英国是 20 April, 1987。Gmail 的日期格式是 Wed, Jul 31, 2019, 7:50 AM；印尼本土电商 Tokopedia 的订单页上的日期格式是 12 Sep 2021; 14:00 WIB，印尼当地新闻网站上的新闻发布日期格式是 22 December 2021 14:46，印度尼西亚的食品生产日期也是按照“日月年”的顺序排列的。由此可见，印尼普遍是使用“日月年”的日期格式。在 Bukalapakd 的 flash deal 页面，展示整点秒杀时间的展示是 10.00 WIB | 13.00 WIB | 16.00 WIB，因此严谨的时间是应该要加上时区的且整点的格式是“.”不是分号，时分秒的表达与国内一致。在促销场景里展示日期范围时，常用的格式是 21-23 December 或是 30 Aug 2021 – 28 Nov 2021。*注：WIB 是 Waktu 印尼 Barat(西方印尼时区)，印尼跨越 3 个时区，分别是 WIB(GMT+7)、WITA(GMT+8)、WIT（GMT+9）。5. 地址格式印尼的地址格式和西方的写法一样，地址从小到大展示：详细地址（街道、建筑、门牌号等）/区/市/省/国家，邮编。例如 Speedwork 在印尼的某门店地址：Wisma, Jl. Hayam Wuruk Kel No.8, RT.6/RW.2, Kb. Klp.（详细地址）,Kecamatan Gambir 甘比尔区（District 区）,Kota Jakarta Pusat 中雅加达（City 市）,DKI Jakarta 雅加达特区 (Province 省)10120（邮编）,Indonesia（国家）6. 货币单位和价格格式印尼卢比是东南亚国家印度尼西亚的法定货币，印尼卢比与人民币汇率比大致在 2000:1 左右。卢比的英文是 Rupiah，简写为 Rp。比如人民币的符号是¥，编码是 CNY；卢比是 Rp，编码是 IDR；¥100 相当于 Rp224.240，也可以写成 224.240 IDR。如果是去印尼旅游，简单的换算就是除去三个 0，然后除以 2，例如 10.000 印尼盾折合约人民币 5 元。另外中国标准的数字用法是整数部分每三位一组，以“，”分节，小数不分节。四位以内的整数可以不分节。 例如 624,000、92,300,000、19,351,235.235767 1256。印尼的数字用法常见的是都用“.”分隔。7. 姓名格式在做国外项目的时候，填写姓名往往会拆分成 first name 和 last name；印尼人大多数人只有名，没有姓。可是也会遇到的印尼人名不只一个词，也有两个或两个以上部分组成的，有的只是名，有的是连名加姓。因此在做印尼本地产品的姓名录入时，可以不用拆分姓名，就用 full name 字段会更通用更合适。情感化的设计第一章节有提到印尼人口结构年轻化，30 岁以下人口占比超过 50.0%；处于热带雨林气候的印尼，年平均温度 25-27℃，通常气温较热且多海岛的国家，民众通常喜好绚丽的颜色；从印尼本土的产品界面配色不难看出，共性就是色彩饱和度高，喜欢用对比色，并且通过插画来表现情绪、描绘场景，让用户产生共情，且更能帮助树立品牌形象，从产品功能到品牌化情感连接，在用户心智中建立一个完整立体的形象，通过品牌力的建设再反向赋能产品。“情感化设计”是唐纳德·诺曼在《情感化设计》一书中提出的，他从设计的三个层次本能、行为、反思，阐述了情感在设计中所具有的重要地位和作用。诺曼认为：“将情感融入产品设计，将解决设计师们的长期困扰，即产品的实用性和视觉性的主要矛盾。”本能层主要体现的是视觉感受，用户对产品的品牌感知、第一印象等；行为层反应的是用户与产品的交互，也就是我们常说的可用性；反思层是产品触发了用户的主动反思，去探寻使用该产品的目标，是一种深层次的情感共鸣。情感化设计在很多时候可以缓解用户负面情绪，帮助用户快速熟悉产品，拉近与用户的友好度，所以运用好情感化设计可以帮助提升产品体验和留存率。可以通过插画来表现产品主要使用场景，并通过刻画主人物形象（穿着工服的硬朗男性形象），表现专业度和安全感。汽后市场的产品的难点在于用户的需求大多是低频刚需，所以要提供一些产品服务或是功能，能够刺激用户频繁打开应用，提升用户粘性；同时规范线下履约流程，标准化服务。满足用户需求的产品+高性价比的商品+运营策略+优质专业的服务+合理的网点布局，几者缺一不可。我们所说的情感化设计也不局限于应用产品本身，整个闭环上所有的触点都应该覆盖到。数字化运营建立平台品牌心智不止是在线上，还需考虑线下物料投放。由于 Speedwork 的运营是由印尼本地团队负责，如何标准化进行线上线下全渠道运营推广物料的制作是需要通盘考量的。最终，我们决定通过在线上设计平台上传营销物料模版，不仅能够跨部门跨地域协作提高效能，同时也将本地设计资产数字化实现设计赋能，保证任何人输出的物料设计都能符合平台品牌规范。数据分析与用户增长通过数据埋点，我们可以得知产品的活跃状态，比如留存（次日留存率、七日留存率、月留存率）、流失分析、新增变化等；通过漏斗模型分析，可以针对关键流程进行转化率监测，协同产品、运营共同找到用户流失的原因。站在商业角度，我们可以通过数据客观的了解产品的获客、激活、留存、变现能力，洞察问题并及时的去调整产品功能及链路，使得产品更符合用户的心智认知，使之逐步转化、使用、首单、复购，甚至习惯、分享，形成用户黏性。所以我们想要实现用户增长，需要帮助用户在关键决策点推波助澜，进行精细化设计。常见的增长手段有优惠券、促销活动、补贴、分享裂变等，通过实际利益去撬动用户增长培养用户习惯。或是通过产品本身提供的服务和功能去满足用户的诉求，来撬动用户增长。无论是通过何种手段，我们都要进行用户的链路设计，一个链路有几个环节几个步骤，如何缩短链路，让用户丝滑且快速的去体验产品核心功能，展现产品的价值，是用户体验设计需要去持续关注的。想用设计提升转化率？先学会这个超好用的漏斗模型！漏斗模型，是一种数据分析方式，是一个线性流程，更是一种普遍适用的方法论，或者说是一种思维方式。阅读文章 > 本章结尾数字化时代消费者各种消费行为，都会被以非常微小的颗粒度所记录下来，作为用户体验设计师，需要具备社会学理论知识，通过调研去理解行为背后的情景及动机，更好的设计产品与消费者之间的互动。数据让消费者更加立体化，不仅仅可以告诉我们已经发生的事情，同时也可以预测趋势，进而可以告诉我们处于营销前线的平台，或者商家为什么发生的这些以及可能还会发生什么。企业出海！设计师如何做好产品本地化设计：印尼篇可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/indonesian-product-c-design
印尼 门店 用户 往期回顾：企业出海！设计师如何做好产品本地化设计：印尼篇可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。阅读文章 > 企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。阅读文章 > 企业出海如何做好产品本地化设计：C 端实战复盘2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。阅读文章 > 汽车养护服务市场是一个复杂的 F2B2b2C 行业供应链，参与者需要把用户、供给和履约都做好，并不断优化三者的服务能力，从而形成一个完整的闭环服务系统。作为提供一站式汽车养护服务平台的 Speedwork 连接了用户与商户，平台需要将数字化能力赋能给商户帮助其管理及运营门店，同时还为商户提供汽配供应链，构建商业模式的闭环，打造汽车服务生态系统。Gtech 佳应科技以技术为驱动，实现价值创造最大化。我们为商家打造了掌上门店管理应用 SpeedBiz，提供线上线下订单的统一管理、商品及库存管理、员工管理、销售报表等功能，同时还能进行一站式的轮胎、汽配件采购。针对平台侧提供了 SpeedShop Enterprice 业务中台，帮助平台运营管理门店、商品、促销、会员及全渠道订单。B 端设计内核探索B 端 C 化也是近几年 B 端产品的设计趋势，之所以有这种趋势是因为无论 2B 还是 2C，最终使用者都是人，我们都在为人的使用做设计，因此从以往的 B 端 IT 直接开发交付，到现在要以 C 端产品的用户体验设计标准来交付，企业开始重视整个业务链路上的所有产品体验设计，能够帮助商家数字化运营赋能且提高工作效率，是 B 端产品的核心。站在公司战略侧，SpeedBiz 的交付不是针对 Speedwork 本身定制化的产品开发，我们更希望能做 L 型能力的产品，在此基础上让产品具备商业化能力，复用性以增加其价值，可以使用到其他业务场景，或者赋能给更多企业，在这里埋个伏笔，后续系列文章中，我们会介绍到通用版的门店管理系统的设计，支持多语言多终端，能够灵活适用到汽后市场不同的业务场景。B 端的用户体验建立在解决客观问题、提高工作效率的基础上，他们相对理性，所有的操作都是在完成某个任务，而不是毫无目的的闲逛或是消磨时间。每个任务都是一个闭环，每一个任务都尽可能降低用户各种操作及学习成本，让用户感觉到“简单”、“稳定”、“高效”。因此 Speedwork Workshop App 的核心设计理念为：简单、稳定、高效。用户定性研究明确了解目标用户，并对其进行定性的研究，确定用户画像，根据真实的业务场景进行体验设计。Speedwork workshop App 目标用户是门店老板及维修技师，少数门店还有收银岗位，门店类型分为摩托及汽车维修门店。我们在描绘 B 端用户画像时应注重职位、门店规模、利润水平、业务需求等。不同的职位决定了不同的使用场景，比如老板/经理作为最高权限的用户，他能使用产品内所有功能，查看全部数据，而维修技师往往只需要关注本职工作，完成上级分配的订单，并可进行日常上下班打卡即可。B 端视觉规范一期上线的印尼版 Speedwork workshop App，延续了 C 端视觉规范设计体系，在商户端同样需要建立平台品牌心智，让商户侧感受到 Speedwork 平台对于产品设计的用心以及专业性。卡片式模块化的布局可以灵活支持功能拓展，界面简洁、布局清晰，注重信息的有效表达和操作的便捷性。典型场景的交互设计主要有 3 种典型使用场景：1. 订单管理针对全渠道的线上订单跟进处理；针对线下的订单进行录入2. 商品管理管理线下销售的商品，主要用于非平台商品的录入3. 查看销售报表查看线上线下客流、交易流水、支付方式占比、毛利分析、产品及类目销售排行等经营数据7000字干货！东南亚本地化产品设计差异：印尼篇印尼是东南亚人口最多的一个国家，人口超过 2.65 亿（还是 2019 年末的数据，现在应该近 3 亿），其中 30 岁以下人口占比超过 50%。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/indonesian-product-b-design
信息 用户 地图 地图 App 已经不再满足导航工具，通过信息挖掘和拓展，更希望能够成为人们日常生活中重要的信息平台。刚好回老家期间，高德地图用得比较多。使用过程中发现了一些比较有意思的细节，觉得有必要总结下分享给大家。主要包括以下 3 点内容：1. 信息架构升级，构建清晰的信息边界2. 信息挖掘，更好的服务用户出行3. 智能感知，提高用户行为效率信息架构升级，构建清晰的信息边界高德 10.0 版本升级了平台的信息架构。原有的版本并没有做信息分层，而是以地图画面为核心，将各类信息分散展示，出行功能路径入口共用“路线”功能，影响了用户的操作效率。另外为了减少各个功能对地图的遮挡，功能选项只能尽可能的融合、隐藏、精简，造成了部分入口信息层级较深，拉长了用户的行为链路，同时不利于功能和内容的拓展。在新的版本中，信息架构回归到传统的底部 Tab 导航形式，可以更好的拓展信息承载空间，满足信息平台型产品的设计定位。目前底部导航分为“首页、附近、消息、我的”四个频道，用户可以分类查看内容，信息结构更加清晰。图片来自 AlibabaDesign在首页中，高德地图打造了“内容中心”来承载更多信息。将”地图“与”内容“相互独立，构建出了明确的信息边界。交互设计上，内容中心采用弹性浮层方式，分为了 3 种模式。默认模式下，内容中心展示快捷功能”工具箱“和常用地点，方便用户快捷操作。当“内容中心”下拉收起，可以释放更多的屏幕空间给地图。上滑则进入“更多模式”，为用户提供更丰富的信息。“内容中心”的信息会根据用户实际位置，搜索地点而变化。例如我在北京时，会显示北京的专享服务。而我搜索上海的地点，首页下方则增加了上海的推荐信息。信息挖掘，更好的服务用户出行1. 地图信息颗粒度细化，提高信息承载能力一个地点除了基础的地理信息外，还需要集合各类相关信息，为用户做好出行服务。如何将复杂多样的信息整合，实现“所见即所得”展示给用户呢？高德地图采用了“内容分类”的方式来展示地理位置的二级信息，从而提高地图信息的承载量。当地图定位到景区范围内，会显示厕所、出入口、餐饮、停车场等信息选项，用户点击即可查看相应的内容。而大型商场聚焦放大时，用户可以查看商场楼层的店铺信息，将细节信息融入在地图中，通过多层级的信息划分，展示不同颗粒度的内容。2. 实景信息，提高用户决策准确性当我们进入一个陌生区域，乘坐公交车时，需要准确知道公交车站的位置。而公交车是有方向的，一旦我们进入了错误的方向，可能需要横穿马路或者绕行很远才能抵达正确的公交站点，这会花费用户很大的体力和时间成本。当用户规划出行路线时，地图路线中通过冒泡提示形式，引导用户查看公交站点的实景地图，方便用户更准确的定位。3. 场景化信息挖掘，为用户提供更好的服务体验当用户搜索酒店时，在页面上方会展示“查看附近酒店”的快捷按钮。方便用户快速查看周边的酒店，进行对比选择。如果用户在非营业时段搜索商业场所，会展示不同的信息状态。例如深夜搜索时，显示“已打烊”状态，而在清晨搜索时，显示”未营业“状态，并告知营业时间，避免用户跑冤枉路。当用户查询驾车路线时，如果查询的地点不是特别明确，系统会提供多个地点供用户选择，并增加了各个地点的选择比例，降低不熟悉用户的选择成本。另外选项中不仅有停车场景，还考虑到了接送人临时停车的场景，实现了多场景的覆盖。4. 激活用户群，实现信息共享当用户计划出行时，希望了解目的地的天气、游玩情况。有些信息平台无法给出明确的答案，于是高德地图将发言权交给了有经验的用户，搭建相互交流的群组，实现了信息的共享交换。智能感知，提高用户行为效率1. 用户行为态势感知当用户打开 App、搜索地点或者行程导航时，高德地图会主动感知用户的导航需求，提供相关的信息引导。例如上下班路线、消费券、团购优惠、停车场建议等等引导信息，引导用户的快捷操作。另外用户查询地点时，地图还会扩充展示周边地点的卖点信息，希望能够为用户提供更多的参考信息。2. 行程查询记录的保存用户在查询打车行程，但未打车时，信息会保存在首页信息中，便于用户随时调用出行。以上就是我的一些使用心得，欢迎小伙伴们评论区留言交流~下期再见。10个产品细节剖析，看看大厂是如何做设计的！UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/amap-design-highlights
用户 玩法 上瘾 「微信读书」是一款基于微信关系链的阅读类 APP，以阅读+社交的设计理念，对读书类产品进行了颠覆式设计，旨在为用户打造一个以书交友的平台——让阅读不再孤单。笔者作为一个重度「微信读书」上瘾用户，最近从正在制作的《微信读书产品设计分析报告》中提炼出来了「微信读书」的 11 种营销玩法，结合戴夫·麦克卢尔的增长模型、尼尔·法埃尔的上瘾模型和西奥迪尼的社会心理学进行了全面的拆解，为广大产品设计者提供一份设计参考。关于上瘾模型的详细介绍：万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 问答1. 每日一答玩法规则「每日一答」有两种玩法，第一种是用户每天可以进行回答挑战，连续答对 12 道题目后可参与「瓜分无限卡」、「书币」的机会，答错则丧失机会，但可以通过「复活卡道具」或分享给好友请求帮忙获取复活机会；第二种是「问答 PK 比赛」，采用赛季制，持续时间为两个月，用户可邀请好友或随机对战，胜利者可赢取积分，赛季结束后根据积分决胜出总冠军，最终给与玩家不同的奖励。功能价值「每日一答」从 APP 直接跳转到微信，不仅操作体验方便，更能结合微信生态引流传播，打造全民学习答题的读书活动。其次通过丰富多变的游戏化方式，保持对用户的新鲜感，形成读书-娱乐的小闭环，抢夺用户时间，提高用户留存率，增强用户满意度、忠诚度，是培养用户对产品形成习惯的重要方式。策略推导⑴「积分」的玩法非常丰富，不仅可以「抽奖」，「兑换无限卡」、「道具卡」还可以直接兑换书籍，为用户提供了多变性的猎物酬赏。⑵进入「每日一答」，用户可选择「瓜分读书天数」（以读书时间为诱）或「书币」（以钱为诱）两种形式的问答；「排行榜」分为好友排行和全网排行，通过排名机制，以社交酬赏为诱，吸引用户积极参与问答，从而提高用户习惯度，成为忠实粉丝。⑶利用稀缺性，用户每天只有1次机会回答机会，但如果回答错误，可通过使用「续命卡」或邀请朋友解答的两种形式进行复活；用户闯关失败后，用户还可通过「书币购买」、「看广告复活」、「邀请朋友」玩游戏复活，通过这样多变、丰富、游戏化的答题形式，彻底让用户主动分享传播，拉新引流。⑷「问答PK」的设计非常创新，有别于很多答题竞猜的的单机游戏模式，微信读书采用了体育比赛的赛季制度，让用户像踢比赛一样参与，每个赛季时间为2个月，通过PK，决胜出赛季总冠军，刺激又好玩，让用户彻底上瘾。促销1. 免费领书功能价值用户可通过分享领取图书，也可以通过阅读 1 分钟并加入书架后领取，这对未付费用户的激活和新用户的引流有很大的帮助。策略推导根据用户读书记录、兴趣推荐，激发用户兴趣；用户阅读 1 分钟加入书架也可赠送，有效促进未付费、未形成习惯的用户激活；多变性的设计，每天能领取的图书都不一样，给用户始终保持神秘感。2. 无限会员日功能价值每周一为「无限会员日」（无限会员就是微信读书的 VIP 会员），用户可进行免费抽奖，并为自己最想要的「会员权益」投票。这是新用户激活、老用户留存的好方法。通过「抽奖」、「会员权益」吸引新用户购买无限卡，其次给与老用户充分的自主权，让他们来参与产品设计，极大提高用户的活跃度和忠诚度。策略推导充分利用稀缺性，每周 1 次，每次也只能抽奖 1 次；结合游戏化风格设计，模拟真实的老虎机交互效果，生动又有趣；通过调研，调动粉丝的产品设计参与度，满足用户真实需求。3. 翻一翻玩法规则每周一期，每期 9 本赠书，每周二中午更新，普通用户可翻 3 张卡，每张卡可领取一本赠书，无限卡会员可翻 6 张卡。功能价值「翻一翻」是促进用户激活的有效方式，通过游戏化风格的设计，每周精选 9 本书籍赠送给用户，吸引用户开始阅读，培养读书习惯。策略推导充分利用了互惠原理、稀缺和多变性的酬赏，激发用户兴趣，培养用户习惯。组队1. 组队抽取无限卡玩法规则每周一期，每周六更新，用户需要邀请 1 个好友才有资格参与；组队成功后，每周六中午 12 点公布中奖信息。功能价值「组队抽奖」是一个纯分享邀请的引流传播形式，利用「终身无限卡」为诱饵，激发用户组队抽奖，其次抽奖规则门槛也高，有效避免用户利用规则漏洞重复参与。策略推导充分利用互惠原理，人人皆可组团，团长更能额外获得多一次机会，从而充分调动了团长拉新引流的积极性。2. 组队读书玩法规则三人成队，一起读书，以「无限卡」、「抽奖」为诱，21 天为一个积分周期，根据每期的最终积分读书小队还可以晋升等级，兑换更丰富的奖品。功能价值「组队读书」是促进用户激活、留存的重要方式，以组队读书的形式，用户不仅可相互监督，还极大提高了活跃度。策略推导⑴利用独具创意的设计方式，把一个人读书变成了三个人一起读书，极大提高用户活跃度和忠诚度；⑵每周发布不同的共读任务，以21天为周期的比赛机制，通过奖品酬赏，让小组成员之间自发相互监督，有效激活未付费用户，彻底培养用户读书习惯。邀请1. 联名卡玩法规则每周精选 6 本好书，每周四更新，用户分享至微信好友或朋友圈集齐 2 个赞可获得 2 天无限卡，每期最多可得 12 天无限卡。功能价值「联名卡」是鼓励用户分享传播的有效方式，通过分享集赞的方式，可兑换相应的无限卡天数，进一步激活用户变现。策略推导颜值超高的海报设计搭配传神的文案，让用户更主动参与传播，形成人际型触发，老用户带新用户，无限增长。2. 邀请微信朋友玩法规则用户邀请朋友和 30 天未阅读用户阅读可以获得 3 天无限卡，成功邀请多人奖励可累积。功能价值「邀请朋友」是鼓励用户拉新和唤醒活跃度极低的用户一个方式，用户行动成本低，酬赏不高，但可以有效激活用户传播。策略推导自动生成了用户读书时长和读完书籍，通过这样有趣而又取巧的设计，利用社交酬赏，激发用户主动邀请好友，双向倒逼，一举两得。读书1. 阅读时长功能价值根据用户每周的阅读时间，为用户生成当周的读书时长统计，用户还可以按月、按年的时间查询历史读书时长。这个功能对用户的留存有极大的帮助，是提高用户满意度和忠诚度的重要方式。策略推导⑴右上角点击分享后，可以分享给好友，可以生成当周的读书海报，可以设置为「微信状态」，从而帮助用户获取社交认同，引流推广。⑵为用户提供全面直观的数据分析，用户可按天、周、月查看读书分析，还可查看「年度读书报告」，像一部留声机，储存着用户的读书回忆；底部展示本周读书的详细记录，包括「读过的书」、「阅读字数」、「留下的笔记」，通过如此直观具象的设计，让用户尖叫。⑶设置了「阅读奖励」，拆分成不同的阅读小任务，培养用户的读书习惯，从而进一步寻找机会激活变现。2. 读书排行榜功能价值「读书排行榜是」据用户每周读书时长自动生成的，目的是通过好友之间的排名，利用用户的攀比心理，激发用户读书，提高用户读书时间，培养用户习惯。策略推导利用赠券效应，「读书时长」可兑换阅读福利；通过排名，利用攀比心理，激发用户增长阅读时间；右上角可生成读书排行榜海报，传播引流。3. 勋章功能价值微信读书的勋章体系非常丰富，包含了「连续阅读」、「阅读时长」、「阅读天数」、「阅读书籍」、「读完书籍」、「收到的赞」和「想法」发布七大类型，充分激发用户读书兴趣，留存用户，培养用户习惯。策略推导⑴「勋章」体系分类非常有创意，根据时间的维度有「连续阅读」、「阅读时长」、「阅读天数」，这是对用户阅读时间的酬赏；根据阅读书籍数量有「阅读书籍」、「读完书籍」，这是对用户阅览群书的酬赏；根据想法和点赞，又有「收到的赞」和「想法发布」，这是对用户的内容投入进行酬赏。通过如此多维度的设计，多变性的酬赏，从而提高用户新鲜度、活跃度和忠诚度。⑵点击右上角的分享，可分享给好友，还可同步微信状态，生成勋章海报，拉新引流。总结通过对「微信读书」的 11 种营销玩法的全面设计拆解，我们发现，作为微信的亲儿子，这个含着金钥匙出身的富二代，真是沿袭了腾讯系的产品设计套路，把用户彻底研究透了。充分利用了互惠、稀缺、社会认同、多变性酬赏等营销模型，让用户主动分享、主动学习、主动参与，最终培养用户形成使用产品的习惯，成为产品的忠实粉丝。上万字分析！6大方面完整分析「丁香医生」的产品设计一个优秀的产品如何设计，遵循什么原则，有什么策略，是否可以用一个设计公式来描述它，从而让我们全面、结构化的方式去研究学习。阅读文章 > 欢迎关注作者微信公众号：以琳设计。每月定期分享大厂APP分析和读书笔记资料包，也欢迎大家添加微信好友交流：本篇来源：优设网原文地址：https://www.uisdc.com/wechat-read
表哥
在路上
张大湿
飞翔的企鹅
落霞与孤鹜
