界面 卡片 功能 肩负着 2022 年理想汽车 L 系旗舰使命的 L9 已经交付半年有余。23 年，理想也迎来 L 系 7/8/9 车型全面开花的局面，以五屏多维交互为卖点和噱头的新一代智能座舱系统也正在经历着市场和用户的验证。理想的车机一直就带有着易用/美观/流畅的标签，从 ONE 上面的仪表/中控/副驾三联屏+空调控制屏，到 L9 上的中控/副驾双联屏+后排娱乐屏，车机的信息结构和界面布局都发生了极大变化，随之带来的是交互操作和视觉感官上也有了新的体验。这种新，是延续了理想 ONE 的易用性？还是随着屏幕增大带来了一定的设计困扰？让我们来跟你细细聊一聊。更多HMI设计干货：入门必看！8000字完整梳理车载HMI设计的前世今生近期因为工作调度，有时间去对车载 HMI 历史进行研究。阅读文章 > 首先抛出我们的观点，理想 L9 的座舱车机体验在 2022 年发布的车型里，无论是信息罗列交互逻辑还是视觉 UI 动画效果以及流畅度，依然是处于第一梯队。但由于屏幕的可视面积增大，信息和功能如何在这块大屏幕中更高效率的呈现和使用，有一定的提升空间，UI 的精致和美观度，也还可以再精细化的打磨。在理想 L 系的车机系统里，我们使用频率最高的应该是主界面的卡片，导航及音乐，还有空调系统的控制。在主界面上，我认为现有的 L 型功能分布是合理的，但在 UI 的视觉呈现上，稍微显得有一些复杂，或许设计师的初衷是让这部分的功能分区更明显，按钮的可点击感和视觉指引更突出，但我觉得还可以做一些层级的简化和归类，减少模块之间因为分区的间距带来的割裂感。因此在全局的操作框架上，在保留现有的功能分区和操作逻辑的前提下，我重新做了视觉层级的梳理和归类，让功能区的 UI 视觉尽可能的简洁，同时保证原有的视觉指向清晰。这里我是这么设计的，首先弱化视觉上的区块感；用图标高亮来显示当前状态；收窄左侧面栏宽度，提升右侧内容区显示面积。除了导航/音乐/摄像头之外，还可以扩展一个常用功能至左侧菜单。这里留了一个可以讨论的地方，那就是下面三个全局入口保持固定不变外，上面的一级入口是否可以让用户自定义？这样的话可以把一些用户自己常用的功能提到这个入口来，相当于新增了一个应用快捷方式入口。底部的操作栏，我把功能分区用间距和竖线来区隔，减少底部信息由于“模块化”带来的割裂感，同时新增一个秘密模式入口，驾驶模式切换在方向盘屏幕操作的便利性比在这里要便捷很多，因此从这里拿掉了。这就是关于常驻操作区域我的优化方案，是不是“看起来”干净整齐多啦？接下来我们聊聊右侧的卡片。记得在春节期间 @贺磊 提到过：“ 导航不需要霸屏，可以留一个区域显示音乐，并且下半部分显示歌词，副驾也可以跟着哼几句，导航+HUD 也可以兼顾开车不走错，如果卡片可以自定义拖拉宽度就更妙了。 ”作为每天显示频率最高的主界面，我也确实觉得目前卡片的信息利用率太低了。走访了几位车友，大家的一致感受有几个点：天气界面可以不需要那么大，有一个区域显示当前时间和天气状况就可以了；车辆的状态和行驶信息默认在第二屏，即便是拖动到第一屏来展示后，由于尺寸的原因要么看不了EID界面要么音乐控制和天气卡片就会被挤到第二屏去，操作和显示都不太方便。于是我重构了右侧的卡片栅格，在现有的卡片尺寸基础上拓展出一个 mini 卡片，在有限的空间内效率更高的展示更多用户想要的内容。这里的 mini 卡片，也可以有更多的想象空间。行驶里程 / 小计里程统计 / 胎压 / 水温 / 海拔高度 / 当前车内温度，其实都可以在这个小空间内轮播展示。毕竟中控屏幕就那么一块，在 13 寸的屏幕上如何合理的寸土寸金利用好，我相信理想的设计师们也在考虑。除了 mini 卡片，首页还可以设置导航或者 EID 界面变成大卡片模式，这样在不需要进入导航或 EID 界面，就能在首页进行一些基础的功能操作，实现真正的 0 层级交互。好了，如上就是我优化后的主页界面。当然如果不需要大的导航界面，也可以切换回现有的展示方式，不冲突。全局对比看下来，我个人觉得界面里模块之间的间距变少了，信息整合度更高了。这个优化在浅色界面可能更容易出效果，可我只有深色界面 JPG，所以就先这样吧。before除了主界面之外，现在的 L 系车主在全屏幕使用导航的时候不知道有没有这样的一个痛点。想看当前播放的音乐，或者车辆里程行驶信息，或者 EID 界面的时候，都需要从当前导航界面跳转出去，在另一个界面完成信息的获取和操作。那有没有可能有一个小比例的副窗口，多任务处理信息呢？用过折叠屏手机和 Pad 的同学都知道，分屏功能很实用，在一部分的横屏车机上也有这样的交互功能，我也给咱们 L 车主做了一个，一起来看看。我来做一下设计说明哈。当进入全屏应用后，点击右下角的“分屏”按钮，即可进入分屏模式。默认可能是音乐或者 EID 界面，拖动可以进行左右界面顺序的切换（按照咱们 8155 的算力，如果能进行双卡片的任意拖动和尺寸自定义就更牛了）。副窗口可以显示音乐/EID/车辆信息等等，由于尺寸与主界面卡片一致，因此信息可以完全复用，不会增加研发和 UI 成本；右滑或者左滑卡片，就将副窗口划出界面就可以返回到全屏模式，这个交互操作跟 iPad 和折叠屏手机可以定义成一模一样，减少用户的学习成本。以上，即是我对现有车机界面自己理解后做出的一些小小优化，仅作为我自己的解题思路，也算抛转引玉，希望车机越来越顺手，越来越好用。当然，这份方案里也还有很多交互和视觉层面的细节还没有考虑周全，也希望和大家一起切磋讨论。2023 年，关于车机我还有更多可以聊，一起期待一下吧！本篇来源：优设网原文地址：https://www.uisdc.com/lixiang-hmi-design
入口 卡片 功能 一、功能入口概述不论是在设计中还是生活中，入口对于我们来说都很重要。比如当你需要进入到一个空间时，你需要知道门的位置并清楚如何打开它。比如下图中左侧的门就非常明显，而右侧的门则需要仔细辨认了。还有的入口即使你知道它存在，但也根本弄不懂它的含义，如下图你能分辨出男女厕所吗：由此可见，在入口设计中保持其清晰与直观是非常重要的。在 B 端页面的设计过程中，我们同样会面临很多入口的设计，比如需要从当前页面下钻或者跳转至其他功能的时候，而这类入口我统称为功能入口。那么我们在面对这类问题时，到底有多少种形式且如何选择呢，本人根据实践以及资料整理出了这篇文章，对 B 端中常见的功能入口都进行了对应的总结和归纳，希望对大家有所帮助。作者往期文章：B端对齐如何设计？我总结了这3种常用场景！B端设计中如何做好对齐设计？阅读文章 > 二、功能入口形式在这里我根据样式和场景将我们常见的各类入口分为以下几类：文字入口、图标入口、卡片入口、自定义入口。那么这些入口的使用场景都有哪些区别呢，我们接着往下看。1. 文字入口文字入口应该是最常用的，也是我们最常见到的。其大量分布于我们的页面之中，对于文字按钮，通常会用以下几种方式：文字变蓝。这是为了和普通的文本形成区分，从表达上直接告知用户当前可点击；文字+图标，比如箭头或者图标。这种形式在很多界面中也会被用到；文字+底色或者描边，这其实就是我们常用的填充按钮或者描边按钮。那么纯文字是否可以作为入口呢，答案是肯定的。纯文字的形式一般存在于固定的组件入口，比如弹窗的取消，以及网站常见的底部导航：在这里我们注意到目前有很多 B 端产品会有这样的细节，对于在当前页面下钻的入口，可以用纯文字表示，对于需要下钻或者跳转页面的入口，会在后面加一个符号的提示按钮，达到提前告知用户页面跳转的目的，表意更明确。这里还请大家思考一个问题，如果你的当前列表承载了多个入口，那么此时你应该如何放置这些功能让用户更好理解呢。这里有两种方式：A.将功能入口以文字的形式直接放出来，列表本身不承载任何入口；B.将列表整体作为一个入口，其余功能以文字的形式作为另一个入口；那么这两种功能到底该如何取舍呢。个人认为，这取决于当前功能的主次级关系，如果当前功能都为平级，那么直接都放出来即可。如果某个功能为主要操作，那么列表本身点击则为进入该功能，其余功能都为辅助。2. 图标入口图标入口的使用频率也很高，比如我们常见的编辑、删除或者设置等，都用了图标按钮来进行传达。但图标按钮在使用时需要注意 2 点：1. 一般对于用户认知度很高的按钮，比如电话、喜欢、关闭等，可以直接用图形表达，用户也能够充分理解其含义。2. 对于用户认知度不高的按钮，我们最好图标配合文字按钮进行说明。最直观的方式是直接图标+文字，比较隐蔽的方式是 hover 图标再进行文字含义的解释。这两种都可以进行使用。举个实际的例子，你可以通过上下两个图片的图标按钮，看你在默认情况下能够识别几个图标的含义：是不是 coding 的图标如果不进行 hover 查看说明基本都不认识，而微博的图标则基本都能够辨识。3. 卡片入口卡片入口则区别于常规的入口形式，卡片入口可以让我们对其内容区域有更加灵活的发挥方式。卡片一共可以分为三种形式：纯卡片、卡片+常驻入口、卡片+隐藏入口。「纯卡片入口」这种形式我们很常见，就是在卡片里面可以简单介绍下该功能的信息，我们可以通过 hover 卡片样式上进行对应变化，用户直接通过点击卡片就可以进入到对应入口。这种卡片形式不用刻意表达点击样式，因为一般卡片在用户视角下都是可以点击的。我们更多的关于则是卡片的表现形式。如果大家对表现形式感兴趣，后续有时间可以整理一波，这里就不再赘述。「卡片+常驻入口」这种形式适合其余入口也比较重要的时候，可以将多入口进行外露。这样便于用户能够一眼发现，缺点是可能整体视觉呈现上不够美观。而卡片本身是否提供入口呢，这其实跟之前文字的思考一样，如果我们本身对某个功能的点击权重较大，你就可以赋予点击整体卡片的功能，否则你可以去掉点击卡片本身的功能。「卡片+隐藏入口」这种设计形式在 B 端中也用得非常多。其既可以达到多入口的功能，也避免整体影响页面的美观性。缺点就是在用户的第一眼呈现上会隐蔽一些，需要用户主动发现。我们可以根据当前产品的业务场景需求，来选择不同的卡片入口形式。4. 自定义入口自定义入口更多是设计师自定义的某类入口，他不限于样式，比如可以是某类异性形状。但此类入口一定要让用户明确其是可以进行点击的。比如你可以通过卡片形式或者加指向性的图标来让用户知道。三、入口的出现场景我们在进行入口设计的过程中，基本会有三种出现场景：常驻类、隐藏类以及场景类。1. 常驻类入口常驻类入口通常是比较重要的，需要用户高频操作的。根据业务的需求场景我们可以选择最重要的功能作为常驻入口外露，比如语雀文档的新建文档、知识库和模板中心则作为高频入口放了出来。2. 隐藏类入口对于很多操作，他的重要程度并不高，且操作较多的情况下，我们会考虑将其功能入口在默认情况下隐藏，用户需要 hover 才能看到功能入口，或者隐藏在...里面：3. 场景类入口这种入口的用法则更为高级，一般当用户需要该功能入口的时候，它就可以主动出现。比如飞书文档当你使用 ctrl+z 撤回操作规定次数后，其会在顶部出现历史记录的入口，并提示你可以直接进入历史文档查看。这种还体现在当你在长文档区域滑动操作指定距离后，其右下角就会出现返回顶部的按钮，来让用户更快地回到顶部。但这种入口场景的建立的前提，一定要在熟知用户操作的前提下进行，才能给用户更好的体验，否则只会带来尴尬的体验。这不由得让我想起了之前微博上线的时间预约功能，其用在新闻大事件的时间预约时就会非常尴尬，比如「你预约明上午 10 点半袭击 FBI 办公室」。好了，本次的入口分享就到这里了，希望对大家有帮助。也是今年的最后一篇了，希望大家新年快乐，明年过得更好～欢迎关注作者微信公众号：「阿东的设计体验馆」本篇来源：优设网原文地址：https://www.uisdc.com/function-entry-design
用户 布局 功能 前言随着产品不断迭代，产品功能会逐渐丰富全面，但对于用户来说，是不是齐全的功能就等同于好的体验呢？本文将以“腾讯会议设置布局”交互优化为例，结合《设计心理学 2》的相关理论，分享关于简化复杂任务的设计心得。腾讯往期案例：如何构建科学有效的色彩系统？来看腾讯文档的实战案例！“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。阅读文章 > 一、为何要“简化”任务一款产品是不是功能越齐全多样就意味着越好的产品体验呢？对于专家用户来说，当然是功能越全面越能满足自己的需求，但对于新手用户来说，全面的功能未必等同最佳的体验，过多操作挤在同一任务中，可能会让用户感到不知所措，难以上手。因此设计师应尽可能帮助用户简化任务，避免用户因为界面复杂而放弃任务。专业类软件的核心用户通常是掌握某项技能的专家用户，他们在使用前，已经有预期需要先系统学习整个软件的操作，因此它们的复杂和全面是符合专家用户要求的。即便如此，近年来，Figma 之类的软件也在持续打磨易用性，降低用户使用门槛。专业图形建模类软件操作界面作为一款面向普通大众、以高效协同为第一初衷的产品，腾讯会议更需要不断简化复杂操作，让大多数用户都能快速上手，流畅地主持或参与一场会议。下面我将结合腾讯会议设置布局的交互优化案例，来分享关于简化复杂任务的一点点心得。会议场景矩阵相比线下会议，线上开会不免缺乏临场感，因此在腾讯会议里，主持人常常需要通过设置布局来让成员关注重要的视频画面。在无特殊需求的普通会议中，官方提供的两种默认布局就能满足常见的会议场景：腾讯会议默认布局实际上，真实的会议场景需求多种多样。例如，企业汇报更关注发言人，而小组讨论则更侧重轻松的沟通，如何在同一个界面里满足不同的诉求成为难点。为此，腾讯会议在默认布局的基础上，推出了“自定义布局”和“会聚模式”功能，来提供更丰富的会议布局选择。丰富的布局模式因概念陌生，且需要设置成员顺序、位置以及画面比例，对于普通用户来说，这两个功能有一定的使用门槛。在该功能推出一段时间后，我们发现：用户普遍找不到设置布局的入口，在具体设置过程中也遇到较多困难，认为设置布局是“高阶”而“复杂”的功能而不愿尝试。要让用户能把布局能力真正用起来，简化布局的设置过程就显得尤为重要。布局操作路径为了探究具体是什么原因让用户觉得功能复杂，我们开展了易用性测试，得出以下几个交互层面的具体问题，包括：1）入口难找；2）操作难理解；3）流程任务多；4）效果无预期。因此简化任务流程是当下急需解决的问题。具体问题二、复杂任务的“简化”原则那么如何才能把任务变得简单呢？依照诺曼的《设计心理学 2—如何管理复杂》一书中所说，系统复杂性的总量是恒定的，想要用户操作变简单，那隐藏在幕后的复杂性就要增加，在管理复杂时，可以从以下角度出发：良好的概念模型易懂的语义符号自动化、模块化的配置鼓励和系统默认组织结构学习的辅助工具如何管理复杂“概念模型”存储在用户脑中，也被叫做心理模型，它能帮助我们快速理解事物运作的背后逻辑。若我们的界面没有准确地传达出概念模型，用户就需要通过不断地摸索和猜测来尝试，最终很有可能因为不理解其含义而失去耐心。设计师应当通过浅显易懂的语义符号，帮助用户构建合适的概念模型，以帮助他们更好地理解产品功能和操作逻辑。像 iphone 的”开锁“提示、微信的”漂流瓶“、深泽直人的 CD 机，都是通过用户生活中熟悉的物理模型，让用户快速联想到熟悉的事物，从而更好地理解接下来需要与产品互动的操作。概念模型案例“自动化”选项和默认配置，则能帮助用户摆脱繁琐的选项和步骤。我们可以基于对场景和用户习惯的了解，提供常见的选择或智能配置。例如在表单设置页内提供默认的模板和样式，能够让用户更轻松地理解产品功能和效果。相比起手动添加内容，可以大大减少理解成本，帮助用户更轻松地完成设置过程。通过“自动化”简化用户操作“组织结构”是指把集中在同一个页面的任务进行结构重组，拆分成易于操作的小步骤，并保证每个模块都简单易学，容易理解。用户在进入一个铺满选项和操作的页面时，通常会不知所措，不知道从哪一部分先开始。或许本身设置的难度并不大，但复杂的设置项也会在心理上给用户带来巨大的压力，从本能上抗拒和排斥。好比完成一场马拉松可以把每 5km 作为一个里程碑去逐个击破，倘若我们能将原本用户觉得困难的大目标拆解成一个个简单的小目标，明确每个步骤应该做什么，并在完成每个步骤后都给予充分的鼓励和反馈，用户就会有持续去完成设置的耐心和动力。拆解关键步骤“学习的辅助工具”是指在合适的时机给予用户有效的帮助指引和提示，对于 Saas 类产品来说，在用户需要的时候及时提供帮助和指导，能给用户充分的安全感，缓解用户操作时的不安和紧张。关于操作的提示，我们不能只是告知用户哪里出错了，更重要的是给出原因并提供解决方案。提前引导而非指责，将能大大提升用户持续操作和探索的信心。另外需要注意的是，用户很可能第一次遇到时未必能记住所有指引的内容，因此对于复杂的操作任务，还需要提供稳定常驻的帮助入口，便于用户二次查阅。辅助学习三、产品“简化”的设计策略有了设计原则的指导，我们的设计目标也会更加清晰。在具体的方案设计层面，我们需要结合设计对象的特点，将理论指导转化成可落地的设计方案。布局设置一般由主持人在会议中统一设置，因此在场景上，具有“设置时间紧张”、“自定义程度高”、“生效范围广”、“角色复杂”等特点。结合前文梳理的设计理论原则及业务场景特点，我们将设计理论转化成了具体可落地的设计策略。设计策略具体包括以下四点：1. 简化入口，及时帮助通过便捷的入口和及时的引导，让功能在合适的时机曝光，保证用户在需要时轻松地找到功能。针对“入口深”这个问题，我们将原本不稳定的入口改为常驻入口，待用户选择布局后再提示相应条件，及时引导用户在使用前先打开摄像头。同时在移动端和应用面板也都增加入口，降低用户寻找的门槛。增加入口另一方面，我们将原本需从客户端跳转到 Web 页面的操作，都简化至客户端内，减少用户跨端操作，避免因为过多的窗口跳转让用户感到迷惑。同时精简了高级功展示，在会议的客户端只保留核心操作，这样用户就不需要在多个页面之间来回跳转，完成设置项后，也可以在会议的客户端立即生效。缩短路径，减少跳转考虑到新手用户并不一定能理解“布局”、“轮询”等功能的作用，我们在页面顶部增加“新手指引”常驻入口，用户可以通过步骤引导图来详细了解每一步操作。对于用户比较陌生的高级功能，也在功能的启用选项旁提供 GIF 动图，帮助用户全面、直观地了解功能。通过新手指引快速学习2. 自动配置，提供模板“系统默认”具体落地到设计方案，即可以根据用户的使用频率，自动设置常用选项，同时提供默认模板，减少用户的决策压力和理解成本。例如，用户在进入设置页时，可能不太理解“布局”、“视图”、“背景图”及“模式”等陌生的概念名词之间的区别，也不知道这些布局样式适用的场景，因此，我们通过提供默认模板和效果示意，帮助用户快速理解概念之间的区别和不同的效果。常见模板及官方背景图同时考虑到自主设置有一定操作门槛，我们把常用的样式增加到默认列表中，用户选中后就可以直接使用（左图，L 布局）。对于座位设置功能，我们也提供了“自动填充”的默认选项，新手用户可直接选择自动排序，快速使用布局功能，而专家用户若有特定的排座诉求，则可以切换到“手动模式”来进行更高级的设置（右图，设置座位）。提供多种模式，满足不同诉求3. 拆解任务，分解流程“简化复杂页面”非常重要的一个方面是重组页面结构，把聚合在一个页面的任务根据先后顺序拆解成不同的步骤，让用户不再迷失于平铺了多个功能的庞大页面。拆解步骤拆解成小步骤后，可以通过增加步骤条导航和引导提示，让用户更明确每个子环节的“小目标”和当前所处的进度阶段。通过导航降低用户心理门槛除了将一个页面拆解成多个步骤，还可以通过收起/隐藏侧边栏目录，让用户更聚焦在某一具体的内容，免除其他元素的干扰，这样用户能更专注于布局画面本身的编辑。4. 效果预览，建立联想新手用户初次设置布局时，可能缺乏安全感，不知道应用范围是自己还是全部成员。为此，在设计客户端的设置流程时，我们提供了“场景示意图”和“效果预览区”，让用户在编辑的过程中也能快捷地联想到应用后的效果，实现所见即所得。除了官方提供的场景图模板，用户还可以根据自己的诉求在编辑器内 DIY 创作自己的场景图。考虑到对于新手用户来说，场景图编辑器的功能有一定使用门槛，在进入编辑器时，我们都会提示用户，可以通过调整模板场景图来快速上手，理解创作后的效果。通过效果图构建联想对于设置了座位、但未开启摄像头的成员，我们通过“铭牌”的概念模型，让用户能够联想到线下会议室里的“座位牌”，从而更好地理解这个座位已被主持人提前预留给了重要的成员。通过概念模型映射，帮助用户理解抽象概念可以看到，无论是场景效果“示意图”还是“名牌”的概念模型，都是通过真实世界里的元素，唤起用户在真实世界的心智，从而帮助用户更快地理解软件界面的功能逻辑。总结与回顾经过持续半年的方案打磨和研发落地，上文提及的改版方案已全部上线，会聚模式和自定义布局的渗透率都有了非常大的提升。通过该项目我们知道，在面对场景复杂多样的产品时，我们需要遵循一些通用的简化设计策略，综合考虑不同用户的认知门槛，尽可能降低上手难度。具体策略包括“简化功能入口”、“提供默认设置”、“拆解复杂流程”、“构建联想概念”等。为用户打造更简易的使用流程，一步步简化用户设置任务的操作，才能从根本上提升用户使用产品的效率。欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/simplify-user-tasks
用户 功能 乘客 有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路 12306APP，一起来看看这个产品到底是如何设计的，用户体验如何。往期拆解：上线即爆火！3600字完整拆解微信键盘的产品设计微信键盘发布啦！阅读文章 > 一、导读1. 内容结构全文 9700 字，分为六个部分，分别是导读、产品画像、出行服务、内容服务、思考总结和后记，你可以通过下面的思维导图对本文内容快速的了解。2. 适合人群第一类，UI/交互设计师，可以跳出执行层，全方位体验 12306 的产品设计，多维度去思考和总结如何规避类似的陷阱；第二类，产品经理/运营，通过全面的产品设计拆解、体验反馈，获取产品设计参考；第三类，旅游及出行相关行业从业者，通过对 12306 的全面拆解，获取竞品设计参考。3. 分析模型第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于拆分和分析产品的功能价值。第二个，尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，通过这十大原则，可以对 12306 的产品设计体验进行全面的校验和侦查。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 第三个，设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、72 效应、席克定律等常见设计基础理论。万字干货！15个著名的设计心理学原理和应用深度解析！“除非有更好的选择，否则就遵从标准”你是否有在听别人说某某原理法则时一脸懵 B 的时候？阅读文章 > 二、产品画像1. 产品介绍铁路 12306 是中国铁路客户服务中心推出的官方手机购票应用软件，主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务，首个版本发布于 2012 年 10 月 16 日，根据易观千帆数据，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万。2. 用户画像铁路 12306 的用户群体主要以男性用户居多，占比 65.04%，女性占比 34.96%；从年龄分布看，以 24-30 岁的用户群体最多，占比 36.52%，31 到 35 岁的用户占比 24.23%，36 到 40 岁占比 20.27%，41 岁以及以上占比 10.30%；从用户消费能力看，中高消费者占比 33.48%，中等消费者占比 30.43%，高消费者占比 14.70%；从地域分布看，新一线城市用户最多，占比 27.93%，一线城市占比 19.93%，二线城市占比 19.00%，其中广州用户最多，其次为深圳、杭州和北京。3. 信息结构铁路 12306 的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买，其次还提供各种快捷功能入口和酒店预订等服务；「出行服务」主要为用户提供约车、酒店、订单等服务；「订单」是可查询和管理在 12306 的各种订单；「铁路会员」是 12306 的会员版块，提供车票兑换、会员活动等内容；用户中心提供个人资料管理、出行向导和常用功能等内容。4. 重要迭代记录根据七麦数据统计，铁路 12306 的 APP 首个版本发布于 2012 年 10 月 16 日，截止到 2023 年 1 月 12 日，APP 版本已经更新至 V5.6.3 版本，近一年版本更新次数为 5 次。版本重要迭代记录2021 年 9 月，发布 V5.4.0 版本，新增无障碍功能、老人及障碍人士购票更便捷，即爱心版；5. 产品生命周期作为中国铁路客户服务中心的官方购票平台，铁路 12306 距离首个版本发布时间已经过去 10 年。从易观千帆数据观察，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万，日均活跃人数 811.65 万。由于是国有企业运营，而且是垄断业务，12306 没有任何商业变现的压力，从产品发布时间和活跃用户人数看，目前处于产品生命周期的成熟期。6. 竞争图谱截止到 2022 年 10 月，易观千帆数据显示，铁路 12306APP 在苹果的 APP Store 应用市场 APP 总排名 71 位，旅游类排名第一，汽车火车船票预定类第一，月活跃用户人数几乎是其他 APP 的总和。三、出行服务作为 12306 最核心、最重要以及实现商业变现的服务，出行服务主要为用户提供火车票、飞机票的销售，其次还链接了众多第三方合作伙伴，为用户在出行的各种场景提供了便捷的服务。1. 票务「票务」是 12306 最核心的服务，主要为用户提供火车票、飞机票和汽车票的查询以及销售，其次 12306 还对三种产品进行了组合，推出了空铁联运、铁水联运这样的服务。① 火车票「火车票」就是为用户提供火车和动车的票务销售，用户输入出发站、终点站和时间以后，就可以进行查询，其次还支持对已购买的车票进行变更到站、改签和退票。1）售票售票页当用户输入目标站点以后，就进入了售票页。在这个页面，可以看到当天列车的所有车次，包括直达、中转、出发时间和剩余票数。在底部，有一个菜单栏，包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能，这主要是帮助用户快速寻找符合自己需求的车次，比如出发车站、出发时间等。体验陷阱这个页面的操作体验不太友好，底部的菜单栏不仅没有实现全屏手机设备的兼容，而且几乎和背景的元素贴合在一起，不够醒目，如果用户不注意，根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。订单页在用户选择好车次以后，就进入订单页。用户需要选择座位的系别，包括硬座、软座、二等座、一等座、特等座等。用户需要选择乘车人。添加乘车人的步骤比较简单，在输入用户的真实姓名、身份证号码和手机号码以后，即可添加成功。首次使用12306的用户需要进行身份核验，用户需要通过验证系统发送的核验信息才能添加成功。细节侦查「姓名」这里有一个非常友好的设计体验，那就是针对无法输入的生僻字、名字超过 30 个字符，以及外籍用户的极端情况都给出了详细的指导，针对用户可能出现的极端的情况给与及时的提示，这就是尼尔森十大原则中的容错原则，帮助用户从错误中恢复，将损失降到最低。在「选择乘车人」的右边，还有一个「选择受让人」的功能。这个功能有很高的学习成本，会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能，它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户，积分又可以抵消火车票款，从而实现抵扣。选择好乘车人以后，用户可以进行选座，就进入了提交订单、支付费用的环节。支付页订单生成后，用户需要在付款限定时间内支付火车票费用，否则订单将会取消。其次在支付页，也向用户推荐相关的保险服务，比如铁路乘意险，又分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险。「购买返程」其实一个非常便捷的功能，但12306设计的层级太深了，而且没有加上一键返回首页或订单页的按钮，用户如果想退回到订单页或首页，需要不断点击返回，操作路径实在太长。体验陷阱底部菜单设计了三个按钮，违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用，但是菜单栏的三个按钮权重设计得一样高，取消订单和购买返程这两个按钮，严重干扰了用户的选择，降低了操作效率。支付成功页当用户支付成功以后，「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务，非常便捷。不过内容的规划比较乱，体验稍差。候补下单「候补下单」是一个非常方便的功能，这个功能主要解决在当前车次没票的情况帮助乘客自动排队，如果有其他乘客退票，就自动抢票，非常贴心。这个功能也被誉为黄牛的终结者，帮助乘客自主排队。2）变更到站「变更到站」是指乘客可以更改目标站点，进入订单详情页后，点击「变更到站」按钮，点击底部的「立即变更到站」就可进入变更页面。在变更页面，乘客可以重新输入目标站点，然后再次进入车票售票页，选中需要变更的车次以后，进入订单页提交订单，变更成功。需要注意的是，变更到站只能办理一次。体验陷阱当用户点击「变更到站」的时候，如果不注意观察页面，根本感受不出原来需要在底部菜单栏进行操作，会让乘客陷入焦躁，不知道下一步从哪里进入。其次在变更到站页面，下半部分设计了很多快捷入口，比如车站大屏、约车、餐饮特产等，把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律，大大降低了用户的操作效率。3）改签「改签」是指用户可以更改出行的时间，改签的流程和「变更到站」相似，进入售票页后，选中需要变更的车次，进入订单页提交订单，改签成功。需要注意的是，车票改签只能办理一次，开车前 48 小时以上，退票费为票价 5%，24 小时至 48 小时之间为 10%，不足 24 小时为 20%。退票费最少 2 元起步。4）退票「退票」是指用户可以退掉已经购买的车票，退票流程比较简单，点击退票后，进入退票确认页，点击确认退票成功。需要注意是，距离开车前 8 天以上的不收退票费，其他的时段将会根据列车开车前的时间收取手续费，最高 20%。迭代建议在用户点击退票的时候，应该出现弹窗，再次提醒用户是否确认退票，这样能避免用户误操作。这就是尼尔森十大原则的容错原则，帮助用户从错误中恢复，将损失降到最低。5）购票后当乘客购买车票后，12306 的首页会加入一个行程的版块，向用户展示最近的行程详情，其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好，直观醒目地告诉乘客最近的行程信息，通过外部触发避免乘客忘记行程。行程页这个页面从上至下包含四个部分，头部是乘客详细的车次信息，比如出发时间、经停站、天气等；中间是车票信息，包含检票口、座位号、车次和乘车二维码等信息；接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务，比如餐饮预定、酒店预定等服务；底部是关于出发站、到达站的天气预报信息和优惠服务等信息。细节侦查行程页把乘客的出行拆分为 3 个场景，出行前服务（提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定）、车站/列车服务（提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航）和到达服务（遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航），这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。② 飞机票「飞机票」就是为用户提供飞机的票务销售，用户需要输入出发站、终点站和出发时间，如果携带孩子或者婴儿，还需要单独勾选。飞机票同样支持改签和退票。1）售票页售票页的内容非常简单，在头部，用户可以左右滑动选择时间，页面内容以 Feed 流向用户展示详细的航班信息，其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏，用户可以进行筛选设置，还可以根据价格高低和出发时间排序。2）选择舱位选中航班班次以后，进入到「选择舱位页」，在这个页面可以查看到航班的详细信息，比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级，比如经济舱、商务舱和头等舱，选中后，即可进入预订流程。拓展阅读为什么同一架飞机同一个经济舱飞机票价格不一样？这是因为一个飞机的不同舱位实际上是不同的产品，所以座位有不同的等级，故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。3）订单页在订单页，可以查看到订单的详细信息，包括收费说明、退改说明等，在用户添加乘客以后，就可以提交订单。这里需要注意一下，如果乘客携带孩子或婴儿，需要添加儿童出行人。体验陷阱当乘客勾选了「携带儿童或婴儿」的选项以后，在订单页准备支付的时候，系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加，或直接给出对应的功能跳转链接，这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则，不仅在用户犯错之前没有给出提示，犯错了还不给与指导，真的非常糟糕。③ 汽车票「汽车票」为用户提供客车的票务销售，用户输入出发站、终点站和时间以后，就可进入售票页。汽车票的订单流程非常简单，在选中客车车次以后，添加乘客支付费用后，订单即可生成。体验陷阱用户在选择「达到地」搜索框输入地名时候，应该提供模糊搜索，比如输入湖南的地名，应该为用户提示相关联的车站。④ 空铁联运空铁联运，顾名思义就是把飞机和高铁这两个产品组合在一起销售，支持用户一站式购买“飞机+高铁”的联运行程，只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下，为用户提供飞机+高铁的转运方案。这个功能对于乘客来说，支持一站式购买“飞机+高铁”车票，可以节省购票时间，非常友好。⑤ 铁水联运和空铁联运一样，这也是一个组合产品的销售，支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样，我们就不必重复。⑥ 雪具快运12306 还推出了一个雪具快运的服务，为广大旅客提供多种个性化雪具寄送产品服务，还支持随车办理或上门办理寄送服务，目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单，采用预约制，选中服务后，填写用户详细信息，支付成功后，订单生成。⑦ 小结作为 12306 最重要、最核心、最复杂的功能，从这个版块的内容拆解和实操体验来看，可以看出 12306 确实已经解决被誉为全世界最复杂的抢票算法逻辑（笔者通过实操测试，几乎都能买到票），特别是在春运这种会出现超过上亿用户抢票场景，真可谓非常不容易。不过从用户体验来看，非常一般，甚至有很多不合理的设计。2. 出行出行是 12360 结合了乘客在出行的场景中潜在产生的需求设计的服务，有结合车站商家的在线点餐，有结合当地地域特色的旅游服务，还有约车、保险、酒店等服务。这些服务，多数由第三方合作方提供。① 餐厅特产「餐厅特产」是一个为乘客提供在线点餐的服务，在乘客输入列车车次以后，就可以进行点餐，支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好，不仅解决乘客在乘车前的就餐问题，为车站的商家引流，还可以增加平台的变现方式。② 铁路游「铁路游」是 12306 结合旅游出行的场景，为乘客推出的一项旅游服务，包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好，但是版块目前设计得比较简单，内容也比较少。③ 约车「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求，用户在出行的前后都有用车服务。为乘客提供约车服务，不仅能增加变现方式，还能方便乘客出行。通过实操体验，约车主要由第三方合作方提供服务，比如曹操出行、T3 出行等公司，为乘客提供出租车、品质专车和商务车等车型。④ 保险保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险，在乘客购买铁路的订单页就会向乘客推荐，乘意险价格低，保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供，主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。⑤ 酒店酒店这个版块的内容相对夯实，不仅有新客大礼包这样的用户权益，还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员 VIP，包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员，相对其他版块而言，这个版块花了比较多的心思。⑥ 铁路商城铁路商城是 12360 以乡村振兴·帮扶推介为主题打造的一个商城，包含了帮扶专区、优选好物、兑换专区、今日特卖等内容，其次还支持企业集采，批量购买。⑦ 小结从这个版块，可以看出 12360 其实结合了用户吃穿住行的刚需场景设计了对应的服务，有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差，事实上可以参考像顺丰速运、智联招聘这些 APP，通过内置小程序的形式来设计，完全可以把这些版块让第三方单独设计和维护，同时还能为用户带来更好的体验。3. 会员铁路畅行会员是中国铁路统一对外会员服务品牌，开通畅行会员不需要花钱，畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等，主要包含积分权益，兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋，也没有太多价值的内容，可以看出 12306 在用户运营方面比较欠缺。4. 订单12306 的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达 12 种订单，从这些订单类型可以看出 12306 的服务特别多。体验陷阱这个设计实在太糟糕，严重违反了 72 效应。琳琅满目，花枝招展，让用户在这个页面几乎迷失。更糟糕的是，当你有一个非常重要的待支付订单，这个页面竟然没有角标提醒，最终你会因为这个糟糕的设计打乱自己的行程计划。四、内容服务内容服务是帮助产品实现用户留存和运营的版块，不过从 12306 的内容设计来看，整个产品的运营手段比较少，所以我把 12306 现有设计的功能拆分为便捷功能和向导功能。1. 便捷功能以下这七个功能，对用户而言，是非常便捷、友好的功能，可以帮助用户在出行的旅途中获取很多帮助。① 车站大屏「车站大屏」是一个非常贴心的功能，通过这个功能，可以为用户提供车站的实时列车信息，非常方便。大屏详情页可以拆分为三块内容，左上角可以切换全国各地的火车站，头部还有搜索框，为用户提供车次的查询，主体内容是当前车站向西的车次信息，包含发车时间、候车室、检票口和候车状态等。1）车次详情页进入列车的「车次详情页」，可以查看当前车次的完整信息，比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面，还提供了「关注列车」的功能（关注后并无关注数据，显得很鸡肋），以及直接预订当前车次的入口。2）车站详情页「车站详情页」就像一个站点的主页，为用户提供完整的车站信息查询。这个页面可以拆分为四块，头部可以切换其他站点，并提供当前车站的天气情况以及车站基础信息。金刚区位 8 个功能入口，包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间，底部是车站附近周边的酒店精选。迭代建议这个页面把车站当做一个主体，聚合了一个车站完整的功能，其实挺有创意，但页面隐藏得很深，如果不去拆解，几乎很难发现，很是可惜。我认为完全可以提高权重，升级为一级栏目，代替会员，或者和出行栏目进行整合升级。② 站内导航「站内导航」提供目标车站的 LBS 导航，对于乘客来说，到达一个陌生的站点，需要清晰的指引，这是一个非常便捷、温馨的功能，能帮乘客解决很多问题。不过这里有一个莫名其妙的设计，那就是进入这个功能之前，系统提示请摇“8”字校准手机，事实上这里是一个加载动画，但是画面和内容却误导了用户，我甚至每次进入都傻乎乎的摇动手机。③ 临时身份证临时身份证是一个非常重要的功能，12306 现在支持 APP 在线申请，极大方便了乘客的出行。申请流程也比较简单，填写个人信息，验证审核通过后，就可以生成电子证照使用。每个人每个月有 3 次申请临时乘车身份证机会。④ 遗失物品这是一个非常贴心的功能，如果你在乘车的过程中不小心丢失物品，可以通过这个功能登记，输入你的详细信息就能登记成功。⑤ 重点旅客这也是一个非常贴心的功能，主要为老年人、残疾人服务，通过填入你的信息，列车会根据你的情况提供优先进站、协助乘降等服务。⑥ 爱心版爱心版就是长辈版，专门为中老年用户设计的版本，在用户中心切换后就可进入爱心版。整个版本设计得非常简洁，操作步骤也比较简单，对中老年用户比较友好。⑦ 英文版英文版在用户中心的设置点击语言即可切换，整体的版本设计得直接简洁，用户体验不错。⑧ 小结从这个版块可以看出，一个产品如果以用户为中心去设计，是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能，过往我们只能提前出发去车站排队办理，但如今 12306 已经把这样的痛点解决，为用户节省了大量的时间。2. 向导功能以下 8 个功能，虽然属于出行向导，不过体验下来，感觉用户体验比较差，很多功能完全无法弄懂它的设计目的是什么，显得非常鸡肋。① 快捷退票「快捷退票」这个功能的设计，让人摸不着头脑。从操作流程看，首先需要输入用户的详细信息，包括姓名、身份证号码和手机，其次需要进行人脸核验，到了第三步还需要选择车票的日期车次，在最后的退票操作页面，用户点击退款后，没有和用户再次确认就直接退票。整个流程体验下来，非常糟糕。体验陷阱这个功能和订单页的退票感受不出来有何区别？如果用户要退款，不如直接去订单页进行退票，操作步骤简单，一目了然。其次不支持自动导入用户的购票信息实在太不方便，需要通过选择车票购买日期和车次，这个设计实在让人生气和愤怒（我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来，又再次重复前面两个步骤才到这个步骤）。② 联系方式这也是一个看不懂的功能，进入页面后，需要用户输入乘客的详细信息，但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同？更糟糕的是，当你把自己的电话号码、身份证信息填入后，系统会显示核验成功，然而当你再一次进入，页面内容还是和之前并无区别，你不知道自己是不是还要重新输一次？③ 时刻表「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息，但这个功能「车站大屏」几乎已经包含了，这个功能显得意义不大。④ 查票价这个功能非常鸡肋，因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息，相反在这个页面，根本无法看到价格，因为价格的字体大小只有 20px，乘客几乎很难注意到。⑤ 查代售点这个功能主要为用户提供全国各地火车票代售点的查询，不过在互联网技术发展到今天，火车票代售点越来越少了。从 12306 采集的信息来看，部分代售点缺少电话等关键信息，对用户来说，比较鸡肋。⑥ 起售时间这个功能为用户提供各车站每日的起售时间，属于一个低频功能，可以解决乘客某些极端场景的需求。不过在我体验下来，比如通过此功能查询 1 月 29 日的车票，显示北京站起售时间为 10:00，但是在火车售票版块，我也可以直接购买 1 月 29 日的车票，这让我比较疑惑这个功能的价值在哪里。⑦ 正晚点「正晚点」同样是一个鸡肋功能，而且还需要输入准确的车次才能进行查询，车站大屏已经完美可以取代这个功能。⑧ 列车状态「列车状态」比正晚点都还鸡肋，让人愤怒，因为你需要输入正确的出发地、到达地和出发时间，对了，还有正确的车次才能进行查询，这样的操作成本比下载 12360APP 都还麻烦。⑨ 小结从这个部分的内容拆解和操作体验来看，12360 的产品设计得不够细致和贴心，很多功能就像是硬生生塞进去一样，滥竽充数。其次从他们的产品迭代记录次数可以看出，近 1 年更新时间只有 5 次，也许每一次都是在做加法，没有想过做减法，所以导致这部分的功能显得鸡肋而且有很大缺陷。五、思考总结通过对铁路 12306 的全面拆解，接下来我将从内容层、功能层、体验层和视觉层进行总结。1. 内容层12306 整个产品的内容设计，用一句话总结，可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务，比如酒店、约车、点餐、商城等，甚至还有空铁联运、铁水联运这种多场景的组合售票方式，不过在实际的版块内容打造中，则显得比较空洞，体验一般。这个产品，可以说几乎没有创新点，这主要也是由于它是由国有企业设计运营，背景极其复杂，设计目标也飘忽不定。2. 功能层在 2015 年之前，铁路 12360 承担了被誉为历史上人口迁移最大的春运的抢票工作，那时候一票难求，春运去 12360 就像是一场噩梦。不过在经过多年的升级和优化以后，目前 12360 的购票效率非常高，经过笔者多次的测试和调研，目前通过 12360 购票已经不再是难事。而且还设计了候补抢票这样的功能，帮助用户解决买票痛点，可谓非常贴心、友好。3. 体验层铁路 12306 的用户体验，非常一般，我在这次的产品拆解中至少侦查出了 20 条体验陷阱，这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页，这完全就是把用户当成傻子一样看待，其次还有一堆数不清的鸡肋功能，对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦，更能减少我的焦虑。4. 视觉层作为一个 UI 设计师，在拆解 12306 的产品过程中，我对整个产品的设计感到绝望。首先，没有做到统一性，整个产品毫无设计规范，比如卡片的圆角、品牌色、版块间距根本不统一，这样的视觉体验一眼望去就非常糟糕；其次，图标、活动图、橱窗图以及详情页的设计毫无美感，满满的山寨 APP 风格，特别是订单页的 ICON，花花绿绿、琳琅满目，连最基础的统一都没有做到。六、后记作为一款国民级用户 APP，铁路 12306 仿佛陪伴了 80、90 后的青春。还记得 10 年前老家是黑龙江和河北的大学室友，每年春运开启之前就为了回家的火车票犯愁，不仅要去遥远的火车站排队，很多时候还可能空手而回，那便是最初对 12306 的记忆。如今十年过去了，12306 解决了亿万人的出行抢票需求，让我们在春运的路上，可以轻松购买一张回家的票。但下一个十年，我更希望 12360 的产品团队，可以重视用户体验设计，让我们不再掉入那些体验陷阱。参考文献：易观千帆-铁路 12360APP 数据分析七麦数据-铁路 12360APP 数据分析中国铁路 12306 官网尼尔森十大原则《设计的陷阱：用户体验设计案例透析》- 乔纳森·沙利亚特欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/12306-app
需求 边界 功能 引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。这种经营模式下，公司全部的业务和技术力量都可以集中在这一套标准化产品上。因为人力充足，那些为了提升体验满意度而做的努力就很容易有结果，设计师基本不用太过担心投入的成本。但很多公司面向的客户形态无法做到这种理想状态，这些公司对外交付的版本一般都是基于主线版本的定制化版本。为了效益，客户当然越多越好，交付肯定越快越好，这就意味着评审交互设计师输出的交互设计方案时，体验至上不再是首肯的目标，按时交付才是。所以支撑外包项目的时候，交互设计师如果没有边界感，输出的交互设计方案在后面的评审阶段将会被不断推翻，无法落地。前面虽然说了标准化产品维护过程中设计师不用过多考虑实现成本，但标准化产品也会有迭代周期，在一个有限的迭代周期内，也同样需要考虑边界问题按时完成版本迭代任务。那么交互设计师支撑外包项目或版本迭代项目时都需要有哪些边界感呢？今天我们来谈谈需求边界和技术边界。更多兆日UCD干货：4000字干货！9个方法帮你掌握UX文案写作相比美观的视觉设计，清晰的文案在界面呈现中同为重要，好的文案不止赋予产品更好的体验，也能够拉近用户与产品的距离，优化文案也常作为可用性测试后改良产品用户体验的落脚点。阅读文章 > 一、需求边界1. 什么是需求边界需求边界是指在一个明确的目标或产品版本中，为交付具有规定特性与功能的产品、服务或成果而必须完成的有限工作范围。该范围可控，不会在外力驱使下随意更改。2. 为什么要有需求边界试想，如果项目经理对客户的需求来者不拒，会有什么后果？项目无法按时交付，造成亏损。如果在开发阶段，需求依然充满变数，会有什么后果？开发人员可能会暴走继而影响团队士气。如果提前定义好需求边界，就等于给下游制定了明确的工作目标，也利于项目排期和进度把控，从而避免出现上述问题。3. 如何找到需求边界① 如何找到项目中的需求边界项目在启动阶段，对外需要一份正式的合同来确立合作关系，对组织内部一般都会有《项目工作说明书》《商业论证》《项目章程》等文件来建立内部协议拉通内部目标。其中，《项目章程》会对整个项目的需求范围做出最原始的定义，一般包含概括性的项目描述、项目产品描述及项目的总体范围要求，此时定义的需求颗粒度最大。就比如，某银行项目在此阶段的需求就是“上线企业 OA 产品”，这就明确了需求边界，我们要做企业 OA，而不是做企业网银。如果项目进行到一半，客户忽然要求我们做企业网银产品，那完全可以拒绝，因为超出了需求边界。（不过站在商业角度，遇到这种情况商务员应该会无比激动，因为来年的 kpi 在向他招手。）接着，在项目规划阶段最重要的前置工作就是进行项目范围管理，项目成员需要收集需求、定义范围、创建 WBS（工作结构分解）。这个阶段的 WBS 就是为了打造项目章程中定义的最终产品、服务或成果而进行的需求细化。此时，定义的范围就可以作为我们进行交互设计工作的指导性文件。（因为在这个阶段不细化需求和分解任务，就无法进行准确合理的项目时间管理、成本管理等的规划工作）。接着上面的例子，项目启动阶段，《项目章程》里定义的需求边界为“上线企业 OA 产品”，接着在项目规划阶段，就需要跟客户沟通确认具体的《功能清单》（见图 1-1，此文件是项目管理过程中非常重要的文件，如果没有此文件，项目监控过程将无法进行）。比如说我方通用解决方案里该产品是包含 18 个功能，但客户可能只需要其中 15 个，然后还要补充几个我方通用解决方案里没有的定制化功能。这个功能清单就是需求边界，也是我们开展交互设计工作的立足点。《功能清单》示例如果设计师在设计过程中为了提升体验而增加了额外的功能，比如说客户的需求是对发票拍照存档，交互设计方案中拍完照还能 OCR 识别发票信息，这个设计方案就超出了需求边界。单纯站在体验的角度上看，真是个很棒的点子，但站在项目管理的角度上看，这是“愚蠢”的，要知道，项目经理时刻担心项目进度不可控，一定不会让需求蔓延。但如果评审交互设计方案时是客户提出了增加发票 OCR 识别的功能，设计师了解需求边界的话就不会一口答应导致后面落子悔棋的尴尬局面。（如果客户提出了任何非交互设计的变更提议，我们都不要一口答应，可以说会后跟项目组讨论下再给您答复。）我们也可以了解一些项目经理针对需求变更的处理技巧：需重新评估需求的变动成本，跟客户说明，修改合同；寻找其他简单易实现的方案替代；告知用户在下一迭代版本中进行规划。当然，也会有特殊情况，为了维护客户关系或者按投入结算或者有什么需要达到的 kpi，项目对时间和成本没有特别要求，对需求变更有很好的包容度，那我们可以尽情发挥我们的设计才能，而不用受需求边界的约束。② 如何找到小迭代需求的需求边界上面讲项目规划阶段的《功能清单》就可以当作项目的需求边界，但是一般这份功能清单中的功能颗粒度较大，还是需要把一个个功能看成一个个需求，分别进行业务需求、用户需求、功能需求的剖析和拆解。另外，公司标准化产品的维护过程中，需求往往是市场声音或是公司上层产品规划策略亦或是专家走查的待优化问题，这时候如果没有专门的需求分析师或产品经理，交互设计师接收到的往往不是拆解后的业务需求、用户需求、功能需求，而是“一句话需求”。我们如何找到这种需求的边界呢？我们先了解几个概念：业务需求、用户需求、功能需求。业务需求描述的是用户为什么需要这个产品，用户需求描述的是用户使用该产品必须要完成的任务，功能需求描述的是开发人员必须实现的软件功能。下面举个例子来说明 3 个维度的需求，真正的需求边界就会浮出水面。某个项目的《功能清单》中，有一个“码上付”的功能，进行客户调研时，客户说“因为当前系统跟另一个系统无法进行数据交互，所以在当前系统不知道用户有没有申请成功，希望点了码上付申请弹出一个弹窗，提示用户不要重复申请。”按照客户的需求描述，方案如图 1-2：客户描述的方案该方案违背了交互设计的“防错原则”，增加了用户的“试错成本”，那必须按照客户的要求做吗？再次分析客户的描述，可以发现客户描述的是功能需求而非业务需求。运用需求分析方法和技巧挖掘它的上层需求（因篇幅有限不再讲述分析过程），可以得出以下结论，业务需求是：“防止用户重复提交码上付申请”。接着分析，能满足以上业务需求的用户需求是：1.用户申请成功后不能再进行申请操作（系统阻断用户的重复申请行为）；2.用户能看到“请勿重复申请”的文字提示（靠提示让用户自主停止重复申请行为）。这些用户需求对应的功能需求是：用户提交过申请后，将“码上付”入口置灰禁用，并在入口处打上标签“已申请”，如果申请成功该入口就一直置灰禁用，如果申请不成功该入口需要变为启用状态以便用户再次申请。但是客户的描述给出了技术边界（后面会详细讲解此概念）：当前系统跟另一个系统无法进行数据交互，所以当前系统不知道用户有没有申请成功，这就导致上面分析的用户需求的第 1 点是无法满足的，除非我们要求客户去改造关联系统而且客户愿意配合，否则我们只能去修改用户需求：让用户看到“请勿重复申请”的文字提示。靠用户自己规避重复操作行为。用户需求一旦修改，对应的功能需求也会随之变化：在申请码上付的按钮附近给出醒目提示“如果您已申请过码上付，请勿重复申请”。最后的交互设计方案如图 1-3：修改后的方案通过以上案例分析，我们可以把业务需求、用户需求、功能需求抽象为依次耦合并依次包含的关系。用户需求和功能需求可能会根据技术边界或其他约束而改变，但业务需求不会改变，也就是说小迭代需求的业务需求才是真正的需求边界。从图 1-4 可以看到，一开始设计师输出的方案肯定是满足业务需求的前提下，用户体验最好的方案，但有些用户需求+功能需求组合超越了技术边界和其他边界。我们评审设计稿的过程，其实就是不断将用户需求+功能需求修正到各种边界内的过程。（业务需求一般是在描述需要解决的问题，至于如何解决，就是交互设计师可以发挥的空间。如果业务需求都变了，那就是需求变更，需要走需求变更申请流程。）备注：以上案例将业务需求描述为“防止用户重复提交码上付申请”而不是“阻止用户重复提交码上付申请”，大家可以思考一下有何不同？用户需求+功能需求修正前后对比二、技术边界1. 什么是技术边界技术边界是指在现有技术水平可以被实施运用的有限范围。2. 设计师为什么要了解技术边界一个合格的交互设计师，能灵活运用各种交互设计方法输出体验最佳的概念方案是基本要求，但只站在体验最佳角度考虑问题所出的设计方案会是最终方案吗？显然经常不是。为什么会出现这种情况？除了一开始的需求不清晰不准确导致评审交互设计方案时还需要不断反向修正需求的原因，还有一大部分原因是体验最佳的方案无法用现有技术条件实现且重新开发成本太大。设计方案评审的过程，其实就是一拨需求干系人在不断寻找业务需求、技术边界、最佳体验之间的安全区（见图 2-1）的过程。如果交互设计师能熟悉技术边界，一开始输出的方案就往安全区里靠近，会大大缩短设计周期，否则只能一遍又一遍被按在地上摩擦。安全区示意3. 如何获知技术边界① 新产品项目的技术边界新产品项目的技术边界受制于上面提到的《功能清单》，比如设计的过程中，设计师觉得界面上展示一下头像会使信息更具识别度，这时候就需要去查阅功能清单中有没有上传头像的功能，如果没有该功能项目经理也不允许增加该功能，我们只能修改设计方案：去掉头像或者改用通用头像。其他更细节的边界几乎是无法提前预知的，只能在设计方案评审阶段或开发阶段暴露出来，反向修正设计方案。因此，设计师支撑新产品项目，一定要提前熟知功能清单，有的放矢。② 已有产品升级项目的技术边界如果是旧产品的升级项目，技术边界相对就多一些，因为要考虑现有系统的兼容性和现有技术的复用性。设计师动手前要体验产品，浏览客户提供的产品资料、用户手册等，尽可能多地提前预知和确认技术边界，这样可以减少设计方案的修改次数，提高效率。还有一些明显的技术边界，在需求沟通阶段就能暴露出来，比如上面的案例中，客户一开始就提出“两个系统目前无法进行数据交互”这个技术边界，但还有一些边界只能边沟通边发现。比如设计师觉得通用头像区分性别更具情感化，所以设计方案中女性用粉色通用头像，男性用蓝色通用头像，评审的时候就需要询问客户系统能不能区分性别，如果没有又无法增加该功能，我们只能修改设计方案：所有人员用同一个颜色的通用头像。如果评审时没有确认此细节，开发实现的时候就会找设计师沟通，影响开发进度。③ 界面结构体现出来的技术边界界面结构能反映技术边界。如果已经确认是在现有的技术能力范围内补充新功能，那设计师就需要分析已有同类功能的界面结构，以免随意变更界面结构导致新功能界面结构无法跟已有同类功能界面结构匹配，加大变更成本。举例说明，某银行要上线公司的一套主线产品，且要增加一个功能模块，该功能模块的审批流程需要复用基线产品的技术。一开始考虑用户可能出于催办等目的，需要在表单申请界面看到完整的审批流程，所以设计新功能模块时，将审批流程平铺显示在了申请表单页面上（见图 ）。基于交互经验输出的方案中间多次设计评审会也未提及这样设计有何不妥，最后开发做到这里，查看原有功能申请表单页的代码，发现同类功能的实现逻辑是将审批流程显示在了弹窗里（见图 2-3，显示在弹窗里而非当前页面上的历史原因是为了不破坏原有表单的界面结构）。现有实现的样式开发急轰轰来找设计师：“你这个界面实现不了啊”、“我们之前是这么实现的啊”、“要改也是主线产品改，但肯定来不及呀”，项目经理也急轰轰来找设计师：“按照现有技术实现的方式改下交互设计方案吧”、“项目交付时间快到了，别发散了啊”，在多重压力下设计师就得硬着头皮按照弹窗的样式，把所有表单申请页面全部改一遍（不改干净，新加入项目的开发人员会思考半天，然后来问你：这里为什么跟其他页面不一样，是有什么考虑吗？或是碰到“直男”开发，真的就按错误的交互界面实现）。按照现有实现修正后的方案如果对已有产品不熟悉，对已有的界面结构不熟悉，类似的情况会经常发生，这无疑增加了时间成本和沟通成本，是项目大忌。所以，设计师一定要会识别界面结构体现出来的技术边界。三、其他边界“国家制度、法律法规、行业标准”也是设计工作的重要边界。比如，理财产品界面一定要打上“市场有风险，投资需谨慎”的提示字样，不可用高回报高收益宣传口号诱导用户；再比如，保险产品宣传时必须明示是保险产品，且不得与银行储蓄、基金、国债等进行收益比较。硬件设备的操作方式也是设计工作的重要边界，比如说使用遥控器操作的终端界面，要特别考虑遥控器操作的局限性，不可让用户输入大段文字，可通过手机扫码填写的方式替代；再比如，操作触摸屏时，不能像操作 pc 一样出现右击操作。还有，设计规范也是设计工作的重要边界，如果不考虑设计规范一致性，会增加用户的学习成本。除了上面展开讨论的需求边界和技术边界，还有后面提到的“制度法规”、“硬件设备”、“设计规范”，还有很多因素共同决定最终的交互设计方案。设计师可以在平时的工作中培养自己洞察边界的能力，以便输出更加成熟的方案。四、如何在各种边界内做出好设计1. 须具备需求分析的能力设计师接收到需求之后，要能判断接收到的是不是业务需求，最好把业务需求用自己的语言描述出来拿给需求方确认。（如果团队分工明确，一般产品经理会把基于各种边界条件分析好的业务需求和用户需求给到设计师。如果团队无此角色，就得靠设计师自己识别。）就像前面提到的例子，如果业务需求是“阻止用户重复提交码上付申请”，而不是“防止用户重复提交码上付申请”，那性质就不一样了，阻止是不允许用户重复提交，那就得逼着客户和开发调整技术边界。但客户实际的意图是提醒用户最好不要重复提交，但允许重复提交。确认好业务需求，如果时间充裕，可以先不考虑技术边界，输出一个体验最佳的方案，然后再根据自己已知的不可抗力约束逐渐修正方案，如果时间紧张，这一过程可以在脑海里构思，直接输出修正后的方案组织评审。2. 具有洞察边界的能力但又有打破边界的勇气考虑各种约束久了，我有时候设计方案首先考虑的是开发能不能实现，好不好实现，这真的大错特错。设计师需要有技术边界感，但不能让技术边界感凌驾于体验设计之上，否则交互设计师就失去了存在的意义。例如，之前提到的发票 OCR 识别功能为例，应客户要求，要在主线产品的发票夹功能基础上增加发票 OCR 识别的子功能，该需求还要内化成主线功能。其中添加发票的界面，原来的界面结构是左图所示，页面的主体信息是发票照片的预览图像，加入发票 OCR 识别功能后，我考虑到万一将来有些客户不上发票 OCR 识别功能，或者识别不出信息的情况下，还是得按 4-1 左图展示，所以基于新旧系统和无数据场景的兼容性，我没有改变原有的界面结构，只是在预览图下面增加了识别信息的展示区域，即 右图展示。不破坏原有界面结构输出方案（左图为原有页面）但对用户来说，识别出来的发票信息才是他重点关注的内容，预览图只是个辅助信息，按照这个心智模型，首屏的主体信息应该是识别出来的发票信息，但上面的方案，首屏的主体信息是预览图。后来 UI 同事在进行视觉设计的时候，询问了开发能不能改变预览图的样式，得到开发负责人同意后，UI 同事按照信息层级关系优化页面（见 4-2 左图），而且跟开发沟通增加了一个扩展功能：没有成功识别到信息场景下和没有上线发票 OCR 识别功能的场景下，预置几个各种发票类型都会有的主要信息字段，让用户自动填入，见 4-2 右图（原有的发票夹功能，只有一个备注字段）。当我还在考虑开发尽量少改动时，UI 同事打破边界的勇气和灵活变通的智慧深深地给我上了一课。扩张边界后输出的方案3. 总结这篇文章讲了交互设计应具备的几个边界感，希望能帮助设计师快速输出安全区内方案以缩短评审修改周期，但请切记不可完全被边界束缚住手脚。交互设计师仍要站在体验最佳的立场，去争取扩张技术边界和其他边界，给设计打造更大的安全区和发挥空间。扩张边界后的安全区示意欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/sense-of-boundary
键盘 功能 表情 大家好，我是沐风。最近惊喜地发现「微信键盘」上线了 iOS 和安卓正式版。2021 年，张小龙就表示，微信要自己做一个输入法。等了两年，终于等到了。这篇文章带你从交互设计的角度，全面分析一下微信键盘。往期微信产品分析：从用户体验角度，分析微信视频号的「双赞」设计最近微信视频号上线了大拇指和爱心两个点赞，到底它们之前有何不同？阅读文章 > 一、拼写 Plus 的打开引导打开微信键盘 APP，可以看到界面的布局：顶部是功能介绍区 ，下面是各种功能设置区在功能介绍区，以显著位置展示着“开启拼写 Plus”按钮。打开这个按钮，用户可以使用智能拼写、智能推荐、表情推荐、拼写检查等很核心的功能。所以应用的设计者，十分希望用户能打开该按钮。这也是为什么在界面里，以如此显著的方式告诉用户拼写 Plus 可以帮你做什么，潜台词，“这个功能这么好用，你还不打开吗？”如果用户没有打开，在输入法的界面，点击输入法图标，也有显著的按钮。点击开启按钮，会展示开启后会上传部分输入数据，以及开启后用户能够获得的价值。开启后，再次打开面板，这个开启拼写 Plus 按钮就消失了。可以看到，整个方案里，提升拼写 Plus 的打开率，一定是一个核心的产品目标。二、表情功能我们再来看日常输入时的微信键盘界面。相比于搜狗输入法微信键盘把功能都藏得比较深，需要点击键盘 icon，才能看到各个功能。「克制」的标签可以安排上了。值得一提的是，所有功能中，对于表情，微信键盘还是很重视的，给留了个入口。点击表情，在右上角有“显示表情键”的开关打开后，在键盘右边，会展示“表情”入口，点击后有推荐表情+emoji如果关闭，发送按钮会变大。对于表情，可以说微信键盘在我们用微信的时候，会极大发挥它的威力：当我们输入的是一些短语，比如你真棒的时候，候选词中会自动出现一个“笑脸+你真棒”，点击后，出现相关的表情包。以后微信里自带的表情搜索，相信点击量会下降很多。但是，当我们输入的是一个句子，则不会出现这个笑脸。要做出这里的判断，其实不容易。用户输入什么类型的内容，应该出现这个“笑脸”来推荐表情包呢？如果是沐风来做这个功能，一定会请产品经理去后台看一下，用户在使用微信自带的表情功能，搜索的内容都有什么。然后根据这些已有的词条，制定一个规则。三、常用语和智能推荐另外想说说常用语。点击按钮，出现常用语的功能说明。这个流程设计得很好。新手引导非常自然，不突兀。这样以后输入前 3 个字，或者短语的拼音首字母，就可以快速发送。另外，当我们输入的短语，是视频号、公众号或者歌曲、电影时，会在候选词里出现“图标+候选词”的智能推荐选项。点击后会出现相应的卡片，还是很方便的。四、单手键盘的界面设计关于单手键盘，左边的功能有“左/右手模式”和“全尺寸”。这里沐风思考了一个问题：“键盘调节”按钮，是否应该像搜狗一样，放在左边的区域？这个功能更符合单手用键盘的需要，让用户可以更高效调整键盘的尺寸。但是仔细想了一下，键盘调节是一个低频功能，一般人调整好后，不会总是调整键盘的尺寸。咱们就是说，如果放上去了，让“键盘调节”总在那做冷板凳也不好不是。另外，当开始输入的时候，左边的两个功能会自动收起为 3 个点，这样可以减少对用户的干扰。点击 3 个点，会展开为两个功能。这个点做得很细了，点赞。与此类似的，还有键盘选择功能。搜狗输入法是把键盘选择放在了主界面上，点选起来虽然容易，但我想问一句：大家在日常使用中，真的会频繁改变自己的键盘吗？相信大多人会和我一样，选择了一种键盘，就不会改来改去了。但是微信键盘，是把键盘选择收起在功能面板里。虽然操作上多了一步，但确实更符合用户的使用场景。五、缺点相较于搜狗输入法，微信键盘目前对英文的支持还不是太好。比如我经常喜欢用 9 宫格，输入“hh”，就能输入“hi”，但是微信键盘目前还不支持。另外，对于人名的输入，也无法识别。估计后续一定会有「获取通讯录」功能上线，到时候这个问题可以解决。再有就是，由于使用时间的积累，搜狗目前会更懂我一些。但是这个可以接受。相信通过调教，微信键盘会随着时间的增加越来越能 get 我。六、微信键盘？最后，当我在朋友圈发了微信出了「微信键盘」之后，却发现很多人找不到。问了才发现，很多人搜索的是“”微信输入法”。这也很自然，「微信输入法」其实应该是最应该的名字。其实这并不是腾讯不想，而是目前还不能。根据腾讯公司的商标申请情况来看，应该是因为没拿下微信输入法的商标。我们知道，企业或新产品进入市场后，如果没有商标，很容易遭到侵权。微信作为一个拥有超过 12 亿用户的超级社交软件，在命名上肯定会非常谨慎。可能后期，还会改名吧。综合体验下来，沐风感到微信键盘不负众望，交互体验做得很棒，对场景的拿捏很到位。方案里各个细节考虑的也很完善。相信会对以后我们的微信聊天，提供更加丝滑的顺畅体验。以上带大家分析了微信键盘的交互设计。欢迎留言交流扫码加我微信，围观高能朋友圈：本篇来源：优设网原文地址：https://www.uisdc.com/wechat-keyboard
手势 组合 功能 我们将常规的基础通用手势进行打散重组、结合实践案例梳理出组合手势设计模型，探索如何在视频场景中构建便捷高效的进阶手势体验。手势设计干货：超多案例！交互手势全解析（三）：多指类和组合类多指类手势之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。阅读文章 > 一、前言视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。本次针对百度 APP 中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。二、什么是「组合手势」「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1 交互信号 step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。「组合手势」触发一般可分为三个阶段：step1 交互信号step2意图识别step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。三、「长按组合手势」激活快捷菜单1. 项目背景百度 APP 视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达 10 余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。2. 竞品调研及选型通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。选型 A「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；选型 B「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；选型 C「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；3. 设计方案① 长按手势交互扩容针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型 B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。「长按+向上滑选」快捷触发对应功能项；「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。② 容错性兼容在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。③ 易用性打磨差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在 DEMO 开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了 10+名不同年龄段的目标用户进行访谈测试。测试访谈的过程中，被测用户在进行 1 至 2 次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。扩展触发热区：考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底 bar 框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。支持跟手触发：长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。实时提示及响应反馈：灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。方案上线及验证以 AB 实验对本次设计方案进行定量测试验证：「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。二期扩展方案随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。四、「组合手势」拓展探索手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。1.「右滑返回手势」激活“小窗播放”“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。2.「双指手势」激活“满屏播放”“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。五、结语便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-video-gestures-design
键盘 用户 功能 微信键盘发布啦！拥有 12 亿用户的移动端巨无霸微信发布微信键盘了！就在上周一，预热近两年的微信键盘终于发布，这款微信之父张小龙口中的——不搜集任何隐私的输入法工具，总算揭开了他的神秘面纱。廖尔摩斯第一时间全面体验了微信键盘，通过三天的使用，我也成了微信键盘的脑残粉，这篇接近3600字的拆解，将会告诉你，这个地主家的小儿子，为什么又帅有才！往期拆解：6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 一、产品拆解作为一款工具类产品，需要更注重产品的用户使用体验，所以此次产品拆解主要基于尼尔森十大可用性原则和常见的设计基础理论，比如格式塔原则、费茨定律等。我将会分为基础功能、个性化功能和个人隐私三个部分进行拆解。让设计更有说服力的20条经典原则：菲茨定律简介说明1. 理论表述 任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。阅读文章 > 1. 基础功能① 键盘管理键盘是输入法最基础的功能，根据每个用户不同的操作习惯，微信键盘为用户提供六种类型的键盘，分别是九宫格、全键盘、笔画键盘、手写键盘、五笔键盘和双拼键盘。在五笔键盘和双拼键盘中，还为用户提供了多种偏好设置，比如 86 五笔方案、98 五笔方案等。设计思考相比行业头部老大哥搜狗输入法，微信键盘的类型相对还比较单薄，比如像搜狗输入法还支持生僻字键盘、拍照转文字等特色功能，不过作为一个 V1.0.0 版本，这也遵循了如今产品设计的主流设计模式，小步快跑，快速迭代。② 键盘输入框「输入框」是用户实际操作和使用的功能，这是最基础、最重要的功能。微信键盘的输入框界面风格非常简洁，和 IOS 默认键盘风格相近，目前仅有一款默认皮肤。长按技巧长按「拼音键」，可选择更多相关字符，比如数字、大小写等。其中长按「JKL」拼音键，可切换至「单手模式」；长按「中英文」键，可切换至「手写模式」，非常方便。智能删除复原这个小技巧使用起来特别方便，在我们删除一段文字的时候，经常会出现误删的情况，微信键盘设计了一个非常巧妙的功能，按住「删除键」左拉可以删除文字，往右则可以把删除的文字复原，提高了产品体验的容错性。上滑输入数字符号这个功能需要在系统设置开启，在键盘输入的时候，只需要上滑「拼音键」，就能直接把拼音键对应的数字拖到输入框，节省切换数字键盘的操作步骤。特殊符号「特殊符号」不仅包含了常见的 10 种类型，横排 26 键的设计更能让用户直观地找到自己需要的字符，使用起来体验非常友好。相比搜狗输入法超过 20 种的符号类型，微信键盘简洁的设计为用户提供了更高效的选择，带来了更友好的体验。设计思考少即是多。相比搜狗输入法的大而全，在特殊符号这个细节的设计，微信键盘让我爱不释手。首先应用了 72 效应，在用户的短期记忆里，降低记忆负荷。其次也应用了席克定律，减少用户的选择，降低消耗的时间成本，从而提升用户体验。③ 偏好设置语音转文字从识别语言观看，微信键盘支持普通话、粤语、英语、四川话和上海话，笔者亲自体验一番，发现识别准确率还挺高的（贵阳话，和四川话接近，超过 80%准确率）。声音和触感「声音和触感」指的是用户使用键盘按键的声音和触感。这里有一个非常贴心的设计，当用户手机静音的时候，打开声音开关按钮会提醒用户当前处于静音模式，无法听到按键声音。这就是尼尔森十大原则的防错原则，在用户出现操作错误之前，通过设计提示提前避免，你可以想象如果没有这样的提示语，如果你的手机不小心静音了，你就会懊恼为啥键盘没有声音，这个软件是不是出问题了（笔者亲身经历）。显示设置微信键盘支持用户可设置键盘候选字的大小，这里也有一个非常贴心的设计，当用户调整字体大小以后，如果想要恢复默认大小，只需要把滑动组件拖动到已经标记的默认起点就可以了，这应用了尼尔森十大原则的易取原则，用户无需记住默认大小设置，如果想恢复，拖动标记的起点即可。模糊拼音及其他「模糊拼音」主要针对拼音基础欠缺的用户，提供模糊的拼音设置，从而提高输入效率。其次微信键盘还提供「首字母自动大小写」、「双击空格输入句号」和「智能添加空格」等偏好设置，用户可根据自己的操作习惯进行设置，获取更便捷的体验。2. 个性化功能个性化功能主要指微信键盘最特色的「拼写 Plus」功能，这也是微信键盘发布以后给用户最大的惊喜。① 智能推荐「智能推荐」是微信结合自己强大的生态设计的一个功能，在用户输入文字的时候，系统会自动判断文字的类型，比如输入一本书的名字，系统就会提示是否需要向好友发送这本书籍。从内容类型看，包含了音乐、视频、读书、小程序、视频号和公众号。这个功能在用户的聊天场景中，实在太方便了，比如作者过去要给好友分享自己的公众号，还需要去公众号搜索、转发，如今只需要输入「设计大侦探」的名字，就可以向好友直接发送，减少了数步操作路径，极大提升了沟通效率。② 表情推荐表情是微信聊天场景中必不可少的一个元素，甚至有很多用户特别喜欢收藏表情，它可以用于各种聊天场景，活跃聊天的氛围。微信键盘的表情推荐，通过用户输入的词语，可以自动识别可能需要发送的表情，无需用户收藏，就可以为用户自动生成。这个功能非常赞，特别像笔者这样从不收藏表情的用户，当突然需要输入一个表情活跃一下气氛的时候，我只需要输入一个「大家好」，微信键盘就能为我提供数十种表情，满足我的需求。③ 智能拼写「智能拼写」是指当用户输入某个词语时候，系统为用户精准匹配候选词，提高输入效率。笔者尝试了输入「梅西」，几乎可以根据智能匹配输入一段完整的文字。而微信生态更为恐怖的是，它会自动结合当前的话题标签，用户可直接跳转至话题的视频号动态，一键查看更多信息，让用户彻彻底底对微信生态的服务上瘾。④ 拼写检查「拼写检查」是指系统会根据用户在输入文字的时候及时发现错别字，一键精准改错。这个功能设计得非常贴心，能让用户及时看到书写错误，降低因错别字带来的烦恼。⑤ 常用语过去在微信聊天的时候，为了提高输入效率，我会把很多反复发送的文字复制到备忘录或微信收藏，这能提升我一定的沟通效率。但相比微信键盘的常用语功能，我以后就会直接放弃之前的两个形式了。这个功能实在太方便了，比如每一次粉丝添加我的时候，我都会需要介绍一下我们公众号的内容，现在我只需要输入前 3 个字，这段话就可以直接出来了，极大提升我的沟通效率。⑥ 单手模式「单手模式」是指用户可根据自己的惯用手或场景设置输入模式，前面我有提到过，长按「JKL」拼音键，可切换至单手模式。⑦ 手写找字「手写找字」是一个支持同时手写多字的输入模式，这个功能对于我们父辈一代的用户特别适用，他们多数人还未习惯用拼音拼写，更喜欢用手写的形式去输入，而支持写多字的模式可以极大提升拼写效率。⑧ 小结什么是以场景为中心的设计，微信键盘的设计团队告诉我们，这就是以场景为中心的设计。过去设计者总是在思考如何去定义人们使用的系统和应用程序，而“以场景为中心”的概念，则强调要以人的需求为中心，系统和应用程序要去帮助人们满足他们的需求。看看微信键盘设计团队结合如此多真实场景的设计，可见设计师真的需要具备场景思维，才能设计出让用户尖叫的体验。3. 个人隐私① 清空个人词典微信键盘提供了「清空个人词典」的功能，这有点不可思议。不过微信键盘的创立之初，微信之父张小龙就说过，微信将上线属于自己的专属输入法，其目的并不是为了抢夺输入法市场，而是为了更好的保护用户的隐私。不过该功能大家要谨慎使用，一旦清空，你所累积的个人词汇就会清空，将会影响你的输入体验。② 帮助反馈针对微信键盘使用的技巧和常见问题，微信键盘也设计了帮助反馈文档，为用户解决使用过程中的困惑。很多产品设计师或许觉得这样的模块可有可无，但这其实这就是尼尔森十大原则的人性化帮助原则，通过帮助文档为用户解决软件使用困惑。③ 隐私与权限“我们非常重视你的隐私安全。我们谨遵最小、必要原则，仅依《微信键盘隐私政策》获取你使用微信键盘的功能所需的你的信息，不会额外获得你的其他信息”。这是隐私与权限页面的一句话，足以见得微信键盘的定位如上文所言，只做一款单纯的输入法软件，不侵犯用户的隐私。二、设计总结作为一个才上线发布 V1.0.0 版本的输入法产品，微信键盘真的给了我太大的惊喜。从产品的易用性来看，无论是交互，还是界面，都严格遵循了尼尔森十大原则的标准。这个产品设计中最基础的设计理论模型，事实上，太多的工具类产品都没有遵循它的设计原则，我们常常说一款工具难用、不好用、设计不好，就是这些操作细节没有考虑进去。而微信键盘，在我目前的使用操作过程中，暂时没有，易用性非常高。从产品的创新性来看，微信键盘不仅满足了一个键盘输入工具的基础功能，而且结合了自身强大的生态环境设计了「拼写 Plus」这样非常创新的功能。它帮助我实实在在地提升沟通效率，比如一键推送我的公众号、和粉丝沟通的常用语等等，甚至破天荒的可以直接在聊天输入框分享我喜欢的歌曲、书籍、电影、视频号等，换做以前真的不敢想象原来这些功能可以通过一个输入法软件实现。我已经彻底成为微信键盘的脑残粉了，即便某狗的输入法显示我已累计输入超过 4 百万字，但微信键盘给我使用的尖叫感，真的让我不可思议，就像那汹涌的潮水，一波又一波袭来，让我尖叫！欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/wechat-keyboard-2
设计师 组件 功能 上期推荐了一波Figma插件，这期分享10个提高效率的实用技巧~提高200%的效率！13个腾讯设计师常用的Figma插件序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？阅读文章 > 一、快捷键面板｜宝典大全相信很多设计师一定看过一些快捷键操作，但是实际操作起来总是让人摸不着头脑。其实 Figma 提供了一个非常方便的功能，按"Ctrl + Shift + ?" 即可打开快捷键面板查看所有快捷键，有锦囊在手再也不用求助他人啦~二、快速填充｜“嘭嘭嘭”地填充多张图片遇到多个占位符的情况，有多少小伙伴还在一张张重复填充内容-选择图片-浏览并选择……在不使用插件的情况下，其实只要按下“Ctrl + Shift + K”选中多张图片或动图，就可以依次填充进去。三、自动布局｜界面布局的魔法想一下平常工作中遇到的高频但低效的场景，例如“做页面时删除一张图片则其它模块都需要微调好麻烦啊”、“过方案想看不同间距的样式但是一个个调整太浪费时间了”，用 Figma 的自动布局功能就可以解决这些问题，通过搭配使用等距排列、自适应变化等，你就可以完成一个调整细节就会自动影响整个界面的魔法。1. 关于自动布局使用键盘快捷键“Shift+A”即可为一个框架或选择的对象添加自动布局，同时，在右侧边栏会新增一块功能区域，你可以在里面控制自动布局框架的流动方式（选择垂直方向或水平方向的布局）、快速调节对象之间的间距。值得一提的是，自动布局非常好用的一点就是可以“套娃”，嵌套自动布局框架可以组合玩出非常多的花样，比如同个画框内同时存在垂直和水平方向的布局方向等。2. 响应式变化固定大小（fixed content）顾名思义就是“敌变我不变”，不跟随容器任何调整而变化，例如表单里面的头像和 icon；但如果是人为“天降大手”去对元素本身进行调整的话，元素依然会变化。适应内容 (hug contents) 用英文更好理解一些，去“拥抱”变化的内部，当内部是一个只能设计师调整尺寸(即固定大小)的容器，那么外部就会跟随内部发生变化。常用于容器内部包含文本段落，那么整个容器都会跟随文本变化而自适应容器大小。填充容器 (fill container)，即“填满”变化的容器，当容器是一个只能设计师操作尺寸(即固定大小)的容器，那么内部元素就会跟随容器发生变化。但值得注意的是，适应内容和填充容器只可选其一。例如表单长度根据昵称长短变化后，就不能再让表单长度去控制内部变化的适应，禁止套娃。3. 绝对位置很多设计师会遇到元素插入到在自动布局中，会按照自动布局关系自动进行排列，很难灵活调整位置，这时候你就可以绝对位置功能，使项目在自动布局中不占空间，自由定位。4. 负间距以前用 Auto Layout 的处理堆叠效果的内容非常复杂，在今年 Config 2022 功能更新后带来了负间距的功能，通过拖拽间距参数为负数即可完成堆叠的效果，效率翻倍！四、组件技巧｜组件库“瘦身”1. 变体当设计师创建组件库时，运用变体来管理组件的多种类型、尺寸、状态等，优化设计系统的层级关系，那么组件库就会极速瘦身，由原来各个形态的样式变为一个。设计师在调用时也可以更加快速地使用变体组件灵活调整为自己所需要的组件，而无需去逐个查阅组件库。2. 布尔属性布尔属性的作用在于够从设计面板中切换组件内部图层的可见性，设计师可以在着在组件中添加可切换可见性的元素，而无需对图层进行修改。设置后，在设计面板上有用于该图层的显示或隐藏的开关。3. 交换实例属性交换实例属性的作用是使用后不再需要深入图层面板，查找图层来交换实例。例如设计师可以从设计面板的属性中直接完成图标替换。五、交互原型｜实现界面可操作性Figma 最值得称赞的功能之一就是它的可交互原型，当所需页面和交互逻辑都排列好后，就可以像连线游戏一样，将页面串联起来，完成一个可上手操作的 app 啦！Figma 贴心地预置了常见操作触点、运动曲线、运动时间等。有了这些，你就不需要再切换不同的设计软件啦。下面给大家介绍原型动画中的一些关键功能。1. 触发器/交互行为触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。2. 智能动画利用 Figma 内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab 的平移、选择器的滑动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择合适的动画曲线让你的动画更具表现力。3. 弹性动画Config 2022 的更新中，Figma 为设计师专门提供了在原型转换中的弹性动画。自带物理属性的弹性动画，让你更容易设计出更流畅、更自然的界面原型。六、Figma Tokens｜设计变量管理者推荐一款叫做“Figma Tokens”的插件，其强大之处在于可以通过可视化以及编码的方式创建并管理各种 tokens，且可以在 Token 之间做一些引用关系或是算法，让各个 Token 串联起来，甚至可以一键导出 json 给你的开发同事。下面来具体安利几个非常厉害的小技巧。1. 别名Figma Tokens 里一个非常好用的功能，你可以用这个功能对使用不同 token 名称，但却用了同一个色值的 token 做引用关系。这样，当你改动你的原始色板的时候，其他被引用的 token 都会随之发生变化。2. 使用数学在构建类型比例或间距比例时需要考虑到比例可能是有关联性的。在 Figma tokens 中，你可以引用已有的一个 token，并使用它进行一些数学运算。例如，你希望 borderWith.medium 引用 borderWith.small，但将其值乘以 2。那么，你可以将以下内容写为 token 的值: ({borderWith.small} * 2)。3. 创建渐变 tokenFigma 本身没有办法做到制作渐变色 token 时引用现有的纯色 token。但是在这个插件当中，设计师可以自由度更高的使用多个已有的纯色 token 作为被引用者。七、小组件｜Figma 工作流拓展前阵子 Figma 更新了一个小功能，FigmaWidgets，说是小功能，但其实一点也不小。利用小组件，你可以在 Figma 内做到很多之前意想不到的事情，比如上传 pdf，添加录音，计时器等等，而且是属于开放式的，所有人都可以参与到小组件的创作并上传至社区，想必不远的未来，这一功能一定会大放异彩。比如近期很火的一直跟随在画面中心的像素小人，或许你可以用它来搭建一个像素风的小游戏。使用小组件进行表态和投票。在 figma 内上传 pdf 等等等等。八、历史版本｜创作时间轴回溯不知道你是否也遇到过这样的问题，当你发现误删了某些元素，一直按“Ctrl + Z”也无法回退，其实你不必重新再做一遍这个元素，你只需要打开历史版本，找到存在该元素的版本，从该版本中复制这个元素回来就 OK 啦。九、FigJam｜灵感爆发集合地ios16 上新了共同编辑备忘录，而 Figma 早早就提供了一个丰富的协作编辑功能：FigJam。使用 FigJam 可以和你需要和你沟通的产品同学快速进行线上沟通，可以使用便利贴快捷记录下你们的灵感，并用一个大大的贴纸表示你对他的想法的赞同，更有非常多丰富的互动玩法，快快去发掘吧。十、Spotlight｜聚焦所有人视线问：设计师在阐述需求的时候，如何聚拢所有人的目光？秘诀就在你头像的下方的“Spotlight”按钮，点击后，可聚焦所有处于当前界面用户的视线跟随你移动。你在设计中是否也遇到过一些提效妙招呢？欢迎在评论区分享给我们，大家一起成为高效的设计师吧！2020年，一定要试试这 17 款超给力的 Figma 插件在世界范围内，Figma 已经作为主流的原型和数字设计软件而存在，和 Adobe XD 和 Sketch 相比，Figma 作为在线工具，有着更强的实时协同功能。阅读文章 > 全是高频神器！B端设计师常用的 7 款 Figma 插件最近打开 Figma，点击我的插件，发现我已经安装了这么多插件...我究竟要用哪一个插件？阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/10-figma-skills
样机 功能 素材库 大家好，这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具，分享给大家，本期推荐的 5 个神器分别是：打开即用！小而精的在线样机网站 「Mockup Creator」分层且可编辑！Ai 文件一键导出为 PSD 格式的神器「Ai to PSD Master」15+功能合集！微软官方推出的 Windows 实用工具「PowerToys」云盘功能妙用 ~ Eagle 素材库也能实现多端实时同步了超省心！可直接翻译图片内文字并复制的微信翻译功能往期回顾：这5款工具，让设计师工作效率提升 200%！（十）大家好，这里是和你们聊设计的花生~ 最近又收集了一批好用的设计及办公工具，今天就继续我们的「设计师效率工具」第10期，本期为大家推荐的神器分别是： 一键出图！阅读文章 > 一、Mockup Creator网站直达： https://designstripe.com/mockups/Mockup Creator 是一个免费的在线样机网站，样机模型包括手机、电脑、海报、名片、书籍等多个类型，质量很高。选中样机后直接上传图片就能立即生成效果图并下载，比在 Ps 中套样机更直观快捷。使用方法：进入网站后，点击需要的样机进入编辑页面，可以更换图片及样机配色，完成后可以下载 JPG 或者 PNG 格式的图片（下载前需先登录）。5个样机网站免费商用！提升设计质感必备大家好，我是和你们聊设计的花生~样机网站是提升设计质感的利器，特别是在进行作品集呈现的时候，好的样机网站里的素材能让作品集质量直接上升一个高度。阅读文章 > 二、Ai to PSD Master使用教程： https://uiiiuiii.com/software/352173.html#post_download6Ai to PSD Master 是一款 Ai 脚本插件，可以将 Ai 文件保留所有分层导入 Ps 中，且导入后所有图层依旧是矢量可编辑的格式。使用方法：文件安装包下载链接见文末。插件在 Windows 和 Mac 中都可以使用，链接视频里讲解了 Mac 的方法。如果是 Windows 系统，也是在 Ai 中通过“文件-脚本-其他脚本”选择此插件，然后在弹出的提示框内选择“确定”，将文件导出为“.PSD”格式。简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 三、PowerToys下载及功能说明： https://learn.microsoft.com/zh-cn/windows/powertoys/PowerToys 是微软官方发布的一款开源实用工具集，包括置顶窗口、保持唤醒、颜色选取器、图像大小调整、提取文字、管理键盘及鼠标功能等 15 种功能。所有功能都可以用快捷键出，可以有效提升我们的工作效率，适合 Win10 及以上系统。使用方法：文件安装包下载链接见文末，下载后直接解压安装即可。这 5 款工具，让设计师工作效率提升 200%！（四）大家好我是花生~勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具，今天就继续为大家推荐其中不能错过的 5 款，它们分别是： 一键查看！阅读文章 > 四、云盘同步妙用相信很多设计师小伙伴都在用 Eagle 作为自己的素材灵感库，它功能强大，但由于是本地程序，一旦换一台设备就无法获取素材库里的内容。最近我在 B 站上看到了一位 UP 主分享的教程， 讲述了如果使用云盘的同步功能，使 A 设备的素材库可以在 B 设备中使用，且一端更新后可以及时同步到另一端。另外他还分享了一个可以在网页和手机上浏览 eagle 素材的方法。使用云盘同步 Eagle 素材库： https://www.bilibili.com/video/BV1rP4y1u7FF在网页及手机中浏览 Eagle 素材： https://www.bilibili.com/video/BV1B3411v7Jr我用的是百度网盘和 Windows 系统，下面和大家分享我的利用百度网盘的同步功能建立同步素材库的方法：首先需要在 A 电脑上下载百度网盘的客户端，其界面左侧工具栏内有“同步空间”功能，启用后桌面会有一个快捷方式，电脑资源管理器里也会多一项"百度网盘同步空间”的选项（开始还不不熟悉同步空间的话可以看一下官方指引）打开 eagle，点击界面左上角的选项图标，选择“资源库-创建资源库”，为新资源库命名「云同步素材库」，然后在保存路径里选择"百度网盘同步空间”，点击保存。此时再打开百度网盘客户端里的同步空间，新创建的「云同步素材库」就会显示在里面了。此时如果你在 eagle 里添加素材，且同步空间是开启的状态，那么素材会实时更新到云盘里。同样的，如果里在同步空间里将素材删除，那么 eagle 内的文件也会消失。如果你想在 B 电脑上打开同一个素材库，B 电脑上要有同账号的百度网盘客户端并启用“同步空间”功能。然后在 B 电脑的 eagle 客户端上导入新资源库，选择"百度网盘同步空间”里的「云同步素材库」，素材就会同步到 B 电脑上。同样的，在 B 电脑上对素材的增删操作也会同步到“同步空间”及 A 电脑内，因为它们共同的素材库只有一个，就是同步空间内的「云同步素材库」。这种同步的思路都是一致的，就是在云盘内建立于一个素材库，利用其同步功能，实现本地或线上的多端同步更新，大家可以按这个思路利用其他的云盘同步功能来建立同步素材库。也可以用这个思路同步 Blender配置 。五、微信翻译功能之前只知道微信可以提取图片中的文字，最近才发现微信还可以直接翻译图片内的文字，且在电脑上可以直接复制图片中被翻译好的文字，比我之前“提取图片文字-复制到翻译软件”的方法要方便好多，还没用过这个功能的小伙伴可以试试。操作方法：以电脑端为例，将图片发送到对话界面中（我一般是发送到文件传输助手），点击右键选择“翻译”，翻译完成后直接用鼠标选中文字并复制使用。好啦以上就是第 11 期的效率工具推荐，如果你正好需要就赶紧用起来，也欢迎大家在评论区分享自己觉得好用的效率工具~ 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友。有关本文或设计的问题可以在评论区提出，我会第一时间为回复。推荐阅读：先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 掌握这5个Ai小技巧，帮你快速提升文字排版效率（四）大家好，我是和你们聊设计的花生~今天继续为大家带来 Ai 排版技巧第四期，这期主要和大家分享 5 个与长文本排版相关的实用小技巧，一起来看看吧~上期回顾：1. 设置网格并转换为参考线在进行折页或者画册设计时，为了保证版面的整洁有序、信息清晰传达，设置网格是必然可少的一步。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Ai插件和PowerToys安装包98.49MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software-11
用户 操作 功能 引言任月月：据调查，中国人口老龄化程度在全球已处于中上水平。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
苹果 系统 功能 前言：本次文章核心内容是放在这次升级 Carplay 车载系统的讲解，并回顾一下老版本系统的升级内容，以及从我的角度去说一下体验方面的感受，还有对未来 Carplay 系统的一些想法建议。更多车载设计干货：6000字干货！四大章节掌握HMI车载设计指南（进阶篇）HMI车载设计成为当今的热门行业，本文通过HMI车载交互设计基础、需求分析的要点、创新的交互形式和视觉设计四大章节，帮你掌握HMI车载设计。阅读文章 > 一、苹果 Carpaly 车载系统发展史先简单的介绍一下苹果 Carplay 的发展过程，2013 年苹果正式宣布 iOS in the Car 计划，就是想在车内装载 iOS 车载系统。2014 将“iOS in the Car”更名为现在的系统名称“Apple Carplay”，同年在日内瓦汽车展上，苹果和合作伙伴一起将搭载 Carplay 新车型亮相，之后就开始陆续和多家知名车企进行合作。在 2016 年的 WWDC 开发者大会上发布了 CarPlay 车载系统，成为了苹果内置地图和 siri 的搭档。2018 年开发者大会上宣布支持第三方的导航，有国内的百度、高德，国外的 Waze、Google Maps。最后再到今年在美国当地时间 6 月 6 号，苹果举办了 2022 年 WWDC 发布会，中间有三分多钟的时间，全部留给了新版的 Carplay 车载系统，这次升级的内容比较多。但让人遗憾的是在 WWDC 发布会的现场还是没有见到苹果汽车 iCar 的身影。二、同类型的产品介绍苹果 Carpaly 车载系统是属于第三方的系统，是装载各大主机车厂的车内系统。同为此类产品的还有谷歌车载系统的“Android Automotive OS”简称：AAOS 和 “Android Auto”，国内的话就是百度“CarLife”。目前市场上比较火的就是这几家企业。最后加入进来的博世也推出的mySPIN车机系统，1. 谷歌车载系统“Android Auto”or“AAOS”区别大家肯定分不清这两到底有什么区别呢？这一块内容不属于设计师工作范畴，因为他们车载系统设计是相同的，只是编译代码之间的区别。先简单通俗给大家区分一下，一个是通过手机投屏到汽车中控屏幕中，另外一个是直接植入车载的原生系统，AAOS 可以根据车厂的需求定制化设计。首先“Android Auto”不是 OS，他是集成在 Android OS 里的功能，是通过 USB、WI-FI 将安卓手机连接到 Android Auto 的车机上后，Android Auto 可以自动加载支持 Auto 模式下的 app 图像投屏到车机屏幕上。这个和苹果 carplay 实质上是一样投屏模式。而“AAOS”归属于 AOSP 项目，代码也是在“Android OS”当中，在编译的时候选择 automotive 的编译 target 即可生成车载机使用的 AAOS。这个车载系统可以在 Google 应用商店里下载 Android app。用户可以直接在中控台上安装为汽车优化的版本，这样就可以替代手机上的 app。2. 国内第三方“CarLife”国内比较火的第三方车载应用有百度的“CarLife”，CarLife 车载系统是国内首个跨平台车联网解决方案。百度的 CarLife 是第一个实现同时支持苹果和安卓手机的技术。同样是车机互联方案，CarLife 和 Carplay 最大的区别就是 CarLife 只是手机系统上运行的一个 app 程序，无法做到系统级别的权限，所以稍微繁琐的连接操作、不通手机的兼容性不一样，这些都让 CarLife 的用户体验和 Carplay 相差巨大。三、苹果 Carplay 市场规模在苹果 2022 年 WWDC 发布会中苹果汽车体验工程的高级经理 Emily Schubert 公布了一组很有冲击力的数据“98%”and“79%”，在美国本土有 98%的汽车支持苹果的 Carplay 系统。更加令人瞠目结舌的是下一组数据：经过调研全美有超过“79%”的购车用户只会购买带有苹果“Carplay”系统的车。从侧面我们可以看出，如果汽车厂商拒绝了 Carplay 的话，那后果就是可能会损失近 8 成的汽车购买消费人群。对于我们国内苹果手机市场差不多有 25%的份额，所以能用上 Carplay 功能的车主在一款车型中最多也就是 1/4，我们国内车载系统对比于欧美的话还是更符合我们国内市场的，并且在智能化和技术上都是领先于他们的，所以 Carplay 系统在国内份额估计不会很高。四、回顾 Carlpay 升级迭代让我们回顾一下苹果 Carplay 车机系统升级迭代的过程吧。1. iOS12 支持第三方地图软件在一开始 Carplay 系统导航只支持苹果原生自带的地图，相比其他第三方导航软件，苹果自带导航的体验欠缺。在 iOS12 后，变化最明显的就是可以支持第三方导航软件了，我们国内的高德、百度地图都可以介入进来了，从而提高了用户体验度。2. iOS13 分屏显示在 iOS12Carplay 车机系统中，车机界面和手机界面是会同步显示 app 界面的，比如车机系统正在运行地图导航，如果我想听音乐，就要在手机中打开音乐软件，但是 Carplay 车载屏幕就会切换成 app 显示的音乐内容，就不会在显示导航了。所以在 iOS13 中，Carplay 就解决掉了强制切换的问题，iOS13Carplay 新系统就可以将在导航的基础上，打开音乐软件 app，导航页面不会再消失掉，可以同时存在，这样的话大大的增加了车载系统的灵活性。iOS13 更新分支还有车载的仪表盘，新增的 Carpaly 车载仪表盘，在页面当中显示导航、音乐、电台和日历，这样可以直接浏览地图，但是在 iOS13 的时候左侧导航的卡片只能支持苹果原生的地图，无法支持第三方地图软件。新增的日历应用，这个是这次唯一的一个全新应用，从车机的 UI 和功能上来看，Carpaly 的日历更像一个简易版，因为这里只能提供即将需要处理的事务，没办法查看以前的事情或者是新建一个事件，所以是一个简易版的日历应用，你点击一个事件后可以查看这个事件的详情信息内容，有开始和结束的时间，如果设有地点的话，也会显示地理位置信息，并且点击之后可以直接跳转到地图当中，直接导航到目的地。在后续 iOS13.4OTA 迭代当中，对于 Carplay 最受欢迎的改进就是分屏功能开放给了第三方导航软件地图。后续的更新就是屏幕可以显示第三方地图应用，实时查看地图导航信息并且还可以和音乐同屏展出，用户可以边听音乐边查看导航内容，解决了用户双重需求并进的问题。3. iOS14 车钥匙+换壁纸+绑定车牌功能苹果手机和汽车之间连接又更近了一步，升级 iOS14 后，我们可以通过 iPhone 完全的替代我们车钥匙，通过苹果手机解锁车门，还可以启动自己的车辆，不过只支持当时发布的宝马 5 系的一款车型，所以你要不要考虑换一辆汽车呢？最早使用过 Carplay 车载系统的人肯定都吐槽过他的背景，要么是白色要么就是黑色，虽然车载的 UI 还是不错的，但总是用这种单色的壁纸，长时间肯定会引起我们视觉疲劳，所以在 iOS 版本上，Carplay 做出一个决定，新增 5 张原生的壁纸，但是还是不能自定义壁纸。这次更新最后一个内容就是，可以支持绑定车牌了，手机端输入车牌和动力类别，设置完成之后，地图就可以为你规避一些禁行、限行路段。还有专门为电车车主提供专属的规划路线，帮助电车的车主更好的选择较多充电桩的路线，但是这个功能当时还没上线。4. iOS15 增加自带壁纸、增加驾驶专注模式、苹果地图模式切换在这次更新之后，在设置中壁纸这个模块大幅增加，现在一共有 11 种壁纸可以选择。但依旧是只能使用原生自带的壁纸，并不可以支持自定义壁纸。这个更新最重要的功能点就是驾驶专注模式，我们在设置中找到“驾驶”专注模式，并把它打开后，这样可以限制在驾驶过程中收到的通知，仅允许个人收藏中的来电，这个功能大大的提高了用户安全驾驶，给这个功能点个赞。关于驾驶专注模式可在手机里设置，设置选择允许通知的联系人的电话，选择自动回复的对象以及回复的内容。Siri 可以播报你的消息。此功能还可与 AirPods 配合使用，Siri 可以在其中通过 AirPods 耳机阅读文本消息。驾驶员不再需要一边驾驶，一边看手机。最后一个更新内容就是苹果地图，苹果自带的地图也随着 iOS 更新一直迭代，在 iOS15 中苹果地图可以切换 3D 和 2D 模式。从以往的更新内容来看，Carplay 系统在不断的优化，我们也相信苹果的车载系统会越来越开放，也越来越好用便捷。五、Carplay 系统升级内容1. 为所有屏幕提供内容，统一体验用一句通俗易懂的话来讲就是“从单一走向整体”。原先只能支持中控屏幕投屏，但是其车内设施控制都无法支持，所以体验还是比较单一的。而这次 Carplay 的更新最直观的变化就是，从原先一个应用变成一个车机的完整的系统，从而掌握了整体的车机界面设计和体验权利，带来的好处就是可以更好的完善整套车机的用户体验，这次车机整体升级而言，给用户带来了在交互界面设计、个性化定制显示、功能体验这三方面提升。从屏幕上看差异化，之前只有手机投屏中控屏幕，而现在 carplay 可以支持车内所有屏幕了，从单屏幕升级到三连屏＋中控屏幕。我们从图标到小组件再到整个车机界面来看，Carplay 车机设计风格还是继续延续 iOS 极简扁平化。2. 从“单一功能”到“多功能”发展UI 界面设计的功能终究只是表现层，但这次全新 Carplay 从原先中控转变成可以控制空调、收音机等，提高了与整车硬件更深度整合，原先调节空调需要先关闭 Carplay，在原有的车控中调节温度，但新的 CarPlay 界面可依直接调节空调等车辆功能，并且还取代了原有汽车的仪表屏，形成了一个三连长屏。我觉得现在的智能汽车不仅仅就这些功能，比如还有辅助驾驶、不同场景切换模式、智能座舱等等，因为获取汽车权限这个问题可能会制约和车企的一个合作。苹果公司的眼光肯定是致力于长远的打算，所以苹果做车载系统的同时，也在制造属于自己的汽车。3. iPhone 小组件加入，丰富车载系统新版本的 Carplay 车载系统继承了 iOS 手机系统的小组件功能，将丰富的小组件，可以在各个屏幕上展示，有两大优点：丰富的信息+高度自定义。虽然现在车机的仪表都可以通过方向盘进行切换信息卡片内容，但是可以完全自定义，根据自己需要进行编辑，这个功能点还是对于科技爱好者们，蛮有吸引力的。iPhone 中的小组件可以显示在仪表盘或者是中控屏幕上，目前新版 Carplay 支持的小组件有天气、车辆信息、日程、时间、音乐和家庭等......4. 替换原有车辆仪表盘，多样化仪表设计全新的 Carplay 将支持仪表的显示，仪表盘内可以显示车速（km/h）、最高转速（rpm）、油位、温度等信息，仪表盘的 UI 风格还可以定制化，根据自己的喜好设置成不同 UI 主题风格、背景和布局内容，也可以直接在仪表盘上查看天气、音乐、电话、导航、车辆信息等。总结一下苹果发布会上的 Carplay 看上去虽然视觉上还是蛮不错的，因为苹果的设计风格一直都很在线，但是车载系统的设计不仅仅止于好看，这个观点我一直都会跟大家讲到，如果苹果只是想通过视觉和功能方面来考虑做智能座舱的话，那肯定是不行的。其实我们国内很多车企有一种怪病，视觉确实很重要，但是他不能大于体验，这里不是想抨击他们，实事求实讲话。我们应该深层次的去了解用户的需求，而不是项目老大说什么就是什么。最后我们必须承认，新版的 Carplay 系统，能够实现的功能实际上和车企自主研发的车机操作系统还是有不小差距的，比如 TESLA 车机系统可以控制车辆的加速、转向、方向盘等的调整，总之在没有造出自己车辆之前就肯定会和原生车厂系统有着差距的。六、苹果造车发展进程Carplay 作为一个车载娱乐还是可以的，现在车机系统新版本加入了一些简单的车控，调节温度、查看车辆信息等等，屏幕也变多了，看起来还是非常不错的，但是我觉得这个不是苹果公司最终形态，他们肯定会进一步扩张汽车领域的地位。我想说的是 Carplay 最欠缺的，就是不能很好的于其他车企车子进行深度的整合，所以苹果急需自己造出属于自己的智能汽车，这也是我对他非常期待的。前一阵子海外媒体爆出了苹果新车的渲染图，刚爆出的时候大家都不相信自己的眼睛，完全不相信以苹果工业设计的能力是不可能做成这样子的，希望最终发布前还是修改修改吧，实在不行咱用第一稿别用这个版本。苹果在新能源车领域已经相对较晚了，如果想弯道超车已经有点困难了，但不是也没有可能的，那就需要他拿出杀手锏，让用户为他买单，而不是卖情怀。这是一位英国一家公司的设计师基于苹果公司在汽车领域申请的专利，最后绘制出了苹果汽车 3D 模型。首先是取消了 A 柱和 B 柱，而且前后挡风玻璃与车身顶部玻璃连接在了一起，被很多国内人喷的不轻，因为这个车辆一点都不安全，没有支柱的保护全玻璃设计，并且有网友提出如果如果玻璃坏了一点，是不是要整个更换？以苹果的调性估计换一块车辆的玻璃不得十几万啊，毕竟这个车都要卖到 10W 美金了。在外观而言，前脸和很多汽车都是一样，贯穿式的 LED 灯，LED 灯下面的前格栅加入了台式机电脑主机的外观设计，有点牵强了，但是在工业设计延续上做的蛮好的。车的尾部亮点不是很多，贯穿式尾灯+鸭尾设计，内饰方面一看就知道满满的科技感，要说最大的亮点就是前面这块三联屏幕。新车还采用了对开门的设计，并且前排的座椅是可以向后进行旋转的，形成一个小型的会客区，非常符合自动驾驶的初衷。这组网传设计图，并非是苹果官方发布的，也未得到苹果官方的承认，但这位设计师让我们提前看到了关于苹果汽车的可能性，我想的是苹果想颠覆传统汽车的设计不是没可能的，毕竟在设计领域里，很多都是以苹果为标杆的。文章中如有不足之处，欢迎补充交流，我们下期见。本篇来源：优设网原文地址：https://www.uisdc.com/carplay-design
产品 功能 画布 整个产品的生命周期，竞品分析都一直相伴，早在《孙子兵法.谋攻》就有，“知己知彼，百战不殆；不知彼而知己，一胜负；不知彼不知己，每战必败。” 竞品分析已是我们产品设计的一项必备技能，但在竞品分析时，也常陷入各种误区：流于表面，缺乏深度和广度，结论无参考价值过于主观，只收集对自己有利的信息乱套模板，交作业平时没有跟踪记录，要做分析了无从下手分析方法太多，不知道用哪个如何总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值，仍然值得我们不断去思考。竞品分析流程1. 明确目标2. 选择竞品3. 确定分析维度4. 收集资料5. 信息整理分析6. 总结报告8 种常用的竞品分析方法结合工作经验，我总结了 8 种常用的方法，根据适用场景我们一起用起来吧~1. 评分比较法难度指数：适用场景：用户体验设计评估、$APPEALE 要素评估是用评分的方式对竞品做出评价，以找出自身产品的优势和劣势。这种方法通常给出 1~5 分的区间，根据产品中的某一个方面或某个点的表现情况进行评估～注意事项：1）最好请多个目标用户评分，并加权平均，避免带入个人偏见2）使用评分比较法时要给出参考标准，例如尼尔森十大可用性原则、android 和 ios 两大移动平台的设计原则等用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 2. YSE/NO 法难度指数：适用场景：横向比较产品功能、特性等通过对比产品与竞品的功能，可以全方位了解竞品的功能分布，为自己产品的功能规范做参考。通过与竞品的功能一一对比，有的话就在表格上对应位置打勾，不存在就空着或打叉，符号可自定义。注意事项：1）产品功能比较复杂的，还要拆解成 2 级功能/3 级功能/4 级功能…2）功能多不一定是优势，甚至，大而全可能是劣势3）“竞品有的功能我也要有”这一点需要根据具体情况而定，你的用户不一定喜欢3. 矩阵分析法难度指数：适用场景：了解产品定位、竞争优势、市场机会以四维矩阵的方式分析自己的产品与竞品的定位、特色或优势，从而明确自己产品的竞争优势;也可以帮助我们判断现有的产品是否需要重新定位，并帮助我们重新找到合理的定位。也可以梳理清楚市场中存在的空白点。这种方法需要确定 2 个关键竞争要素，分别来做为 XY 轴，根据竞品在关键竞争要素的表现而放到对应的位置，从而思考自己产品的定位。注意事项：1）矩阵是一个模型，帮助我们抓重点、把握关键，也意味着会舍弃一些次要因素2）矩阵空白区代表竞争相对较弱，但也需要看你的用户是否需要或感兴趣4. 功能拆解法难度指数：适用场景：深入全面地了解竞品功能、预估开发成本周期、探索新需求功能拆解可以按菜单导航拆解、按使用流程拆解、按交互操作拆解、看版本更新记录拆解。注意事项：1）功能拆解时要拆解充分，不要遗漏，特别是一些隐藏操作的功能，如长按、拖动等2）可以通过穷举法检查拆解结果5. 竞品画布难度指数：适用场景：低成本快速验证竞品分析思路、新手快速上手竞品画布是一个简易的模板，通过一页纸的内容覆盖做竞品分析的 6 个步骤，引导分析者更规范的做竞品分析。注意事项：1）分析的目标要明确2）选择竞品时先发散再收敛，最后聚焦到 3 个左右的竞品做重点分析3）分析维度取决于目标，并写出选择该维度的理由6. 精益画布难度指数：适用场景：产品商业模式规划、商业模式分析精益画布出自于《精益创业实战》一书，更侧重于产品层面的商业模式。通过精益画布可以帮助产品经理更全面的思考、决策，从系统、商业的角度来规划产品、分析产品，建立产品的全局观。注意事项：1）按 1~9 的顺序填写会更有逻辑2）填写时需要关注多边用户的不同需求3）不要把假设当真，精益画布上填写的内容都是你的假设，未经过市场验证7. PEST 分析法难度指数：适用场景：预测市场、宏观环境分析PEST 分析法是对宏观环境进行分析，以便找到机会，认清威胁与挑战。所谓 PEST，P 是政治(Polotics)，E 是经济(Economy）, S 是社会(Society），T 是技术(Technology)。这种方法就是将这 4 个元素分别写在 4 个格子中，并罗列出这 4 个元素相关联的与产品有关的环境因素，最后投票选出 3~5 个点子作为 PEST 分析的结果。注意事项：1）除了 PEST 的分析框架，还有其他宏观环境的分析框架，如 PESTLE（增加了法律、环境）、DEPEST（增加了人口统计学、生态学）。可根据产品特性来选择最合适的2）宏观环境随时都会发生变化，PEST 的分析也要及时更新8. SWOT 分析法难度指数：适用场景：企业战略分析、竞争对手分析SWOT 分析法是将对企业内外部条件各方面内容进行综合和概括，进而分析它的优劣势、面临的机会和威胁。通过 SWOT 分析，可以帮助企业把资源和行动聚集在自己的强项和有最多机会的地方；并让企业的战略变得明朗。这种方法先分析产品相对于竞品的优势（S）、劣势（W），再分析产品面临的外部机会（O）与威胁（T），将外部机会和威胁与产品内部的优势劣势进行匹配，形成竞争策略与行动计划的方案。注意事项：1）优势与劣势是内部因素，机会与威胁是外部因素2）优势与劣势一定是跟竞品比较后得出的，必须客观3）所列出的要素要与此次分析的目标相关，每种要素的数量最好控制在 5 个以内温馨小贴士1. 有明确的目标有明确目标是竞品分析的基础，关系到后面整个流程到分析方向的正确，不会跑偏。竞品分析做的好不好，主要就是取决于能不能达到竞品分析的目标，解决了该问题。在制定目标到时候，还不宜把目标设定的过大，导致支线过多，时间过长，结论过散，不便后期的策略制定。2. 长期观察记录任何竞品分析都不可能是静态的/一次性的，整个市场在变动，产品在不停的迭代发展，你的分析也应该⻓期保持更新。推荐 2 个小方法动态跟踪：团队组织每周/月对竞品的改变进行记录，并与团队进行共晒，随时了解竞品的变化。版本库：对竞品的每个大版本变化进行截图保存，整理成文档，找到竞品各版本的发展规律，从而推测竞品下一步的行动计划和策略。3. 新产品的分析要全面无论你是新接手一个产品，还是做一个全新的产品，都建议你可以对其竞品做一个全面的分析，这样可以让你无论是从公司战略层面、用户需求还是产品结构、用户体验上都不会有大的偏颇，能提出合适的解决方案。分析的内容大致有：1. 商业背景（公司背景、融资、公司信息、盈利模式、产品数据…）2. 用户路径（主流程）3. 产品分析（核心路径、核心功能、设计细节…）4. 视觉分析（形、色、字、质、构、设计亮点）5. 用户评价最后，分享迈克尔·波特的一句话 “如果你所做的一切都与你的竞争对手本质上是一样的，那么你就不太可能成功。”参考文献：《有效竞品分析》–张在旺竞品分析别乱套模板！我总结了这4个关键点竞品分析，成本低又容易实施，可能是大家日常工作中最常见的调研分析方法了。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/competitive-analysis-guide
手势 多指 功能 多指类手势之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。我们同样也可以把使用手指的数目看做是一个描述维度，使用的手指数目不同也会产生不同的手势变种，有着不同的应用方式。万字干货！交互手势全解析（一）：位移类手势前言一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。阅读文章 > 6000字干货！交互手势全解析二：点击类手势点击类手势的描述维度与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。阅读文章 > 使用多指类手势的原因主要有两个：① 单个界面对于手势的需求量比较大。当可用的单指类手势都已经被占用后，通过引入多指的维度来扩充手势，从而满足设计需要，避免产生手势冲突；② 系统级的全局手势通常使用多指类手势来尽量避免与第三方App的手势冲突。全局手势如果设计得过于简单很容易引发手势冲突。例如一加手机的某个系统版本中，有一个全局手势是单指连续点击三次触发页面缩放，对于非游戏类的 App 来说基本没有这个手势，不必担心误操作，但是对于游戏类 App 而言，连续点击屏幕上的攻击键是一个很常用的操作，连续点击三次触发页面缩放的设计导致用户游戏过程中极易不小心触发了页面缩放。iOS 系统的做法很巧妙，在点击次数外增加了手指个数的维度，通过三指双击才能够触发页面缩放，从而基本解决了手势冲突问题。1. 多指点击特点多指点击同样有点击次数、触发时机和时间限制这些描述维度，它们的变化会给多指点击带来不同变种。在 App 中多指点击常见的变种一般有多指单击、多指按下，而像多指双击、多指长按这一类更复杂的变种较为少见，一般仅用于系统级的全局手势。案例在 iOS 的短信 App 中，可以通过「双指按下」快速选中一个短信。在 iOS 的设置中开启缩放功能后，任何页面都可以通过「三指双击」触发页面缩放。2. 多指位移特点多指位移同样有控制方式、稳定化效果、以及阈值类型这些描述维度，它们的变化可以实现多指轻扫、多指拖拽、多指甩动这些效果。多指位移通常用来移动受控物或触发某个功能。案例在 iOS 的短信 App 中，可以通过「双指拖拽」快速多选短信。在网易云音乐的播放页，向下「双指轻扫」可以触发黑胶背后的故事。在笔记应用 GoodNotes 中，浏览模式下可以通过「单指甩动」浏览页面，但是当进入编辑模式时，为避免手势冲突，单指甩动会变为「双指甩动」。3. 多指缩放特点多指缩放与多指位移比较相近，不同之处在于多指缩放的手指移动方向是以某一个点为中心进行汇聚或分散。控制方式、稳定化效果、以及阈值类型这些描述维度同样适用于多指缩放。案例iPad 可以通过「四指缩小」快速退出应用。iOS 的照片 App 中，可以通过「双指缩放」缩小或放大照片。网易云音乐可以通过「双指缩小」触发抱一抱彩蛋。4. 多指旋转特点多指旋转可以看做是以多指的中心为圆心，通过多指的移动来模拟出围绕这个圆心做旋转的手势。它是对物理世界几乎 100% 的映射，因此一般用于旋转某个物体，调节旋钮等操作。案例iOS 的照片 App 中，可以通过「双指旋转」转动照片。5. 多指特殊手势有一类特殊的多指手势可以支持更复杂的交互，一般为系统级手势。例如 iOS 中长按桌面的 App 后进行拖拽时，可以同时点击其他 App 一起进行拖拽。组合类手势组合类手势由两个或两个以上的手势组成，因此隐蔽性较强，如果不进行引导很难被用户发现，也是由于这种特性，它所触发的功能一般有其他更明显的入口或操作方式，使用它通常是为了增加高频功能的操作效率，服务于专家型用户。组合类手势之所以能够提高效率，是因为它把用户平时需要通过多个步骤才能完成的操作简化为了短时间即可完成的手势组合。虽然初次使用有一定学习成本，但是一旦用户形成肌肉记忆，操作过程会非常快速。因为组合类手势更加多变，且系统并未直接提供这类手势给设计师调用，需要设计师自己根据需求来组合搭配，因此很考验设计师的创新能力。之后的案例展示仅为常见的用法，并不是全部。通过举一反三，我们也可以设计出不同与本文中的案例但更满足需求的组合类手势。1. 设计模型下面这个表格里的模型是总结常见的组合类手势而设计的，能够涵盖绝大部分的设计需求，但仅适用于单指的组合类手势设计。模型将组合类手势的操作过程分为启动、调整和触发三个阶段。每一阶段由一个分支手势构成。比如在第一阶段中，可以选用的手势有长按、双按、轻扫 B。并不是只能选用这三个，而是它们三个作为第一阶段的分支手势体验良好且最常用。①启动阶段的目的是创建一个新模式，在新模式下，界面原有的手势会失效，系统只能响应②调整阶段的手势，可以选用拖拽和轻扫E。在③触发阶段可以进行抬起、停留来触发最后的功能，如果选择「无操作」，则说明手势在②调整阶段已经达到目的，不需要③触发阶段的手势。仅解释这个模型可能比较难理解，下面会用一些案例进行演示。2. 常见案例长按+轻扫 E+抬起特点通过长按激活一个控件，在手指不离开屏幕的情况下将手指移动到某个功能选项的位置上，然后通过抬起触发该功能。功能选项一般出现在手指的附近，从而方便下一步操作。案例花瓣 App 中长按某个图片后可以快速进行收藏等操作。长按+拖拽+停留特点通过长按激活一个控件，在不松手的情况下将手指拖动到控件的某个功能选项的位置上，然后停留特定时间触发该功能。案例在京东读书 App 中，需要跨页选择文本时，需要长按后拖动手指至页面左下角后，停留一段时间进行翻页。在 iOS 桌面长按图标将其拖动到边界，停留一段时间后可以将图标移动到下一页。为什么上面两个案例在触发阶段使用停留而不是抬起？因为完成了触发阶段的操作后手指仍然需要对受控物保持控制状态，此时不能松开手指，因此这种情况下操作的触发手势使用停留更合适。轻扫 B+轻扫 E+抬起特点通过轻扫 B 激活一个控件，在不松手的情况下将手指往某个方向移动来选中某个功能选项，然后通过抬起触发该功能。案例Chrome 浏览器中，下拉页面后将手指左右移动并抬起可以触发其他功能。双按+拖拽定义当一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动，双按后可以立即使用拖拽来触发相应功能。案例地图类 App 中，可以通过双按后手指不离开屏幕往上拖拽来放大地图，往下拖拽来缩小地图，从而解决了单手操作时难以放大缩小地图的问题。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。3. 根据使用场景进行分类上文依据操作方式将案例进行了分类。实际上在设计过程中，使用场景分类更能便于我们去选择适合的手势。我将组合类手势通过使用场景的区别分为了四类，它们分别是 ①单个属性的调整、②多个功能选其一、③默认选择主要功能、④同时进行两项操作。由于下面案例的手势在上文已经进行了介绍，所以不做赘述仅罗列更多案例帮助理解。单个属性的调整单个属性可以是亮度、大小、位置等，通过双按或长按启动模式后，再使用拖拽来进行调整。双按+拖拽每个地图 App 基本都支持这个手势，双按后通过拖拽来对地图大小进行调整。（上文有动图示例，这里不再重复展示）长按+拖拽在快手 App 的拍摄界面中，长按拍摄键后上下拖拽可以调整取景框的大小。多个功能选其一通过长按唤起功能菜单，在手指不离开屏幕的情况下移动到某个功能后抬起触发该功能。长按+轻扫 E+抬起在 iOS 的桌面长按 App 的图标可以唤起更多功能菜单，移动手指到某个功能后抬起可触发该功能。默认选择主要功能使用长按或轻扫 B 后可以直接松手默认触发主要功能，但如果保持手指不离开屏幕使用轻扫 E，则可以选择其他次要的功能，然后抬起触发。长按+轻扫 E+抬起微信录制完语音后，抬起默认会触发发送语音，也可以通过移动手指到「取消」或「转文字」上来触发另外两个较为低频的功能。轻扫 B+轻扫 E+抬起下面是一个概念案例，来自于一本交互设计相关图书《交互设计语言》，非常推荐阅读。在下图案例中，手势的目的是解决微信的多层级导致的返回步骤过多问题。右滑页面后如果直接松手会返回上一页，但是如果上下移动则可选择其他层级的页面，抬起后进行跳转。同时进行两项操作部分场景中，长按后手指需要保持接触屏幕的情况下同时操作两个功能，由拖拽和停留分别操作。长按+拖拽+停留暂无更多案例展示，可以看上文的京东读书 App 选中更多文字的同时进行翻页、在 iOS 桌面拖动图标的同时进行翻页的案例，在这里就不重复展示了。以上就是关于多指类和组合类手势的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注哦~4000字干货！交互手势全解析：描述维度交互手势的描述维度是什么？阅读文章 > 欢迎关注作者微信公众号：「设成于思」本篇来源：优设网原文地址：https://www.uisdc.com/parses-interaction-gestures
功能 团队 组件 前段时间 Figma 的事闹得沸沸扬扬，身边很多设计师和团队都打算放弃这款软件，毕竟数据存在他国云端，谁也不知道这柄达摩克利斯之剑什么时候落下。但用惯了 Figma，想再投 Sketch 的怀抱非常难，Sketch 的问题太多了：修改无法实时同步，多人协作效率极低；无法一站式完成设计工作，需要在多个软件里切换只有 Mac 版本，内存占用大，崩溃是家常便饭所以这段时间优设也一直在搜罗可替代 Figma 的国产软件，这不，今天又发现了一款能与 Figma 媲美的一站式设计协作软件 —— Pixso。Pixso 隶属于上市公司万兴旗下，你肯定听过这家公司的诸多产品：墨刀、MindMaster、亿图图示等，特别是墨刀，是风靡一时的原型设计神器。而 Pixso 作为万兴这两年的扛鼎之作，无论是功能完整性还是使用流畅度上，都能与 Figma 过过招。Pixso网站链接：https://pixso.cn/九大功能亮点本土团队出品，全中文界面！实时在线协作，高效反馈效率倍增三大平台任意切换：Mac、Windows 和 Web 随开随用，截至目前是国内唯一一个能同时支持导出 Sketch、Adobe XD 和 SVG 的软件。从原型、交互、UI 到交付评审、版本管理、视觉资产管理全部集成在一个平台，一个软件就可以搞定所有设计工作。自动布局、组件变体、全局样式、矢量网格等实用功能应有尽有实时云端自动保存，无限历史版本回溯，再也不怕改回第一稿1000+设计组件、30000+精美图标，海量设计资源任意取用支持企业私有化部署，提供高级定制功能，团队使用更安全更稳定Pixso 承诺：个人用户永久免费使用！接下来我们详细聊聊，以上的亮点功能有多好用。至少提升 80%效率的「团队实时协作」全中文界面无需详述，你只需要知道，以后不用再担心网络卡顿了。如果你之前没用过也没关系，官方贴心准备了一份用户使用手册 https://bos-pixso.feishu.cn/docs/ ，从 8 大方面帮你完整学会使用 Pixso。当然，如果你之前用过 Figma/Sketch，不用看手册也能直接上手，之前习惯用 Figma 的同学，现在也可以直接导入 Fig 文件，目前 Pixso 的 Figma 文件导入功能已达到商业可用的级别：支持导入包含 10W+ 图层的超大文件，导入数据不丢失，可以 1:1 还原文件中的组件变体、原型交互等，确保从 Figma 到 Pixso 的文件迁移做到无缝衔接。已经有不少设计师实测过，导入速度非常流畅。但我想着重聊聊的，是「团队实时协作」功能。疫情当前，很多团队都实行居家办公，这时用上 Pixso 的团队，面对一个复杂的设计项目，不再需要等主视觉完成后再进行子页面设计，在 Pixso 完全可以多人云端协作设计，彼此互不干扰。同时还有 4 个惊喜细节：观察者模式：直观了解设计师的工作进度和内容在线评论功能：给设计提意见只需要一个链接，跨部门沟通一分钟完成！无限云端空间容量：目前注册独享福利，传多少设计文件都不怕！无限协作人数：同样是目前注册独享福利，不花一分钱可以直接团队用4 大 UI 设计利器大家最关心的肯定还是，这款软件的设计体验能否与 Figma 一战。如果说团队实时协作提高了沟通效率，那这 4 个功能就是实实在在提高设计效率的利器。自动布局顾名思义，无论是增加还是减少界面，Pixso 都会自动适应，类似于观看响应式网页般丝滑的体验，设计师再也不用因为文本框过长，一个个修改组件了： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。至于全局样式，那更是设计师期待已久的功能。以前界面完成后，如果上级说配色不对，得重新改，一个个组件都去修改极为耗时。有了全局样式，一键搞定： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。当然，组件变体功能也是 Pixso 的拿手好戏。有了组件变体功能，就像这个视频里演示的那样，改变卡片的样式仅需在右侧面板选择序号即可，任何组件都可以实现一键切换样式，非常方便。 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。在平时绘制界面上，矢量网格也能派上大用场，这个功能相比 Sketch 和 PS，简直是碾压级的好用？相信我，看完演示视频你会回来下载的： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。从交互到交付，全都帮你准备好了！得益于墨刀的深厚底蕴，Pixso 在原型制作上毫不逊色专业的原型制作软件：支持添加页面交互、原型播放等，也就是说，产品经理和交互设计师都能用这款软件完成对接协作。而设计完成后，交付流程更是让我大开眼界：Pixso 拥有自动标注功能，标注会按更新的设计稿自动生成，研发可以自动获取代码并复制，设计师只需生产一个图标，研发就可以直接导出多倍图，大大提高工作效率。关键是，这一切不需要上传下载，只需要一个链接通通搞定。无限历史版本保存，告别杂乱桌面当你还在为桌面数不清的文件夹发愁，为文件命名想秃了头，Pixso 早就帮你解决了这个问题：实时云端保存，每一步都不会丢失无限历史版本，支持任何版本回溯改回第一稿也就是一分钟的事：海量设计资源在线免费领！除了刚刚提到的 30000+精美图标素材，Pixso 还集成众多大厂优秀的设计体系（华为、腾讯、阿里、字节、京东、饿了么、滴滴等），上手直接用，和大厂高手肩并肩。同时团队可以共享一套资源库，统一管理设计资源，并形成产品独有的设计规范。最后提一下，有的设计师担心国产软件技术积累不够，使用体验不够丝滑。对于这个问题大家尽可放心，Pixso 采用的是和 Figma 相同的 WebAssembly 技术，而且依托万兴强大的技术研发团队，产品的迭代速度也排在了国产软件的第一梯队。如果你在使用中遇到任何问题，也可以直接在右下角和开发团队反馈。用心做好产品，真诚做好服务，这大概就是 Pixso 最打动人的点，也是我推荐给大家的原因。本篇来源：优设网原文地址：https://www.uisdc.com/pixso
用户 功能 工具 相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿，经过多轮文章和视频的洗礼，这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。担心也好，警醒也罢，各位心里都有数了，受到影响的大疆和其他企业应该也已经转向 plan B，我这边想先聊点别的——关于Figma 是如何借助两波风口起飞的，两位创始人的创业经历，以及 Figma 与拜登设计团队、Adobe 的过往交集。（看过银河系漫游指南的同学应该都知道这是啥意思）首先，别慌。就此时此刻而言，绝大多数的国内 Figma 普通用户不会受到影响。1、暂时，对于绝大多数人不会有太大影响如果你只是一个普通的 Figma 用户，就目前而言，很大概率对你是完全没有影响，至少使用免费套餐的普通用户而言，你不会因为 IP 地址是中国大陆而被禁止访问，即使是购买了 12美元/月专业用户，也无需在注册购买的时候注明公司和企业。换句话说，Figma 不知道你是谁。而往下看你会注意到，在专业用户之上，还有 Organization 和 Enterprise 两个套餐，后者应该是最近新增的。而真正可能受到影响的，是购买后面两个套餐的企业用户：如果你仔细查看目前 Figma 对4类用户提供的服务的列表，你会发现，绝大多数的设计功能和常见的协作和管理功能，其实基础和专业用户两个套餐都是不缺的，而主要的差异，存在于下面的部分：这当中基础和专业用户套餐中所不包含的功能，绝大多数都是特别进阶和细分的功能服务，比如协作中的定制工作空间、语音通话、分支与合并，设计系统部分的共享字体、组织、多团队设计系统共享，开发当中的私有插件，等等等等，绝大多数国内正在使用 Figma 做设计的设计师同学有几个人真正深入用到这些功能？而这些功能有哪些是彻底完全无可替代的？对于使用免费版和专业版 Figma 帐号的同学，起码现在不用担心，没有影响。不过，既然我说「绝大多数」，也就意味着影响还是存在。对于拥有多个大型设计团队，并且基于 Figma 进行设计、开发协同的大型企业和公司而言，团队和企业账户下的「管理与安全」部分的独享功能，可能是都有需求的，比如大疆。包括插件管理、中心化帐号、用户帐号自动加入、链接和文件管理等等这些功能，也正是涉及到复杂协同环境的大型设计团队所需要的，而他们也是这次事件中受到威胁最大的部分，而真正受到实质性影响的，则是出现在 600 个企业名单上的一部分国内企业。当然，Figma 制裁国内企业这件事情虽然并未涉及到我们全体，而我上面所探讨的不同套餐和用户受到影响的差异，也是「现在」这个时间节点的状况，这并不意味着后续不会发生变化。不过我们大家都很容易在这种事情上「感同身受」，出于本能未雨绸缪准备备用方案也非常正常。好在国内设计软件服务蓝湖、即时设计等守望相助，提供了 Figma 的文件导入服务，在短时间内解了受影响企业用户的燃眉之急，也为准备迁移设计平台的用户及时提供选择，远哥在这篇文章当中提供了相关的介绍和入口，我这里也暂时不赘述了：Figma封禁大疆账户！国产软件的春天来了？就在上周六，刷微博时一条微博引起了我的关注：这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。阅读文章 > 说完「目前」的状况和影响，，接下来把时间跨度放大，来看看这次事件的 B 面。2、Dylan Field 与 Figma 先重新审视一下 Figma 是怎么走到这一步的，很重要。正如同我们所知道的，Figma 目前的主要竞争对手 Sketch 和 Adobe XD 都是本地软件，而 Figma 恰恰相反，它是一款可以直接在网页运行的、天生带有多人协同属属性的「轻量级」设计服务和工具。在成长性和功能拓展上，Figma 明显超出两位竞争对手。当然，这种特质和它背后的始作俑者的的确确有着直接的关联。在维基百科中文版中，对于 Figma 和它的 2 位主要创始人的介绍是这么写的：「迪伦·菲尔德（Dylan Field）和埃文·华莱士（Evan Wallace）于 2012 年开始着手开发 Figma。这种基于Web的设计工具是菲尔德和华莱士在2011年就读于布朗大学期间所构思的。2012年，华莱士从布朗大学毕业，而菲尔德则退学接受了泰尔奖学金（Thiel Fellowship），该奖学金提供了10万美元用于寻求创业想法。随后，两人移居到旧金山，全职投入Figma的工作。Figma从2015年12月3日开始提供采用邀请模式的免费预览程式，于2016年9月27日首次公开。」这两位联合创世人中，Dylan Field 的个人经历更容易查到，而恰恰是他的个人成长经历，能够帮我们管窥 Figma 这个工具成长到今天这样的一些缘由。图片来源：维基百科1992 年出生于加州彭格罗夫 Dylan Field ，6岁的时候开始学习代数，从小对计算机感兴趣并且参加过 国际青年组织 FIRST 所举办的机器人竞赛，甚至在 Windows XP 的广告中作为演员露脸，中学时代长期和学校一位「在数学方面非常专业的看门人」一起玩，并且开始对设计产生兴趣。而升入高中的时候，Dylan 很自然地选择了一个位于索诺玛州立大学内的附属技术高中，这所学校除了常规的教学内容之外，还会额外提供大量科学、技术、工程和数学类的学科知识，而这个阶段 Dylan 和朋友一起制作机器人和网站，甚至参与了社交媒体方面的研究，而正是这样的契机使他得到了通往布朗大学的推荐信。《社交网络》进行中的黑客马拉松2009 年，Dylan 正式进入布朗大学学习计算机科学，在大学期间，他组织过黑客马拉松（著名电影《社交网络》中有展现过扎克伯格搞黑客马拉松的场景），在 LinkedIn 实习，并且两度进入 Flipboard 实习，大三第二次去实习的时候，他的身份是技术产品经理。而正是在 Flipboard 实习阶段，让他开始怀疑自己继续在大学进修计算机和数学的计划，并且在他遇到同样毕业于布朗大学并且从事图形学的 Evan Wallace 之后，决定创办自己的公司。Dylan 的个人成长经历和所具备的技能，大学和实习阶段在互联网初创公司的经历，以及当时正在快速演进的互联网技术，为后面 Figma 的出现铺陈出重要的底色。从各种意义上来说，Dylan 和 Evan 所创建的 Figma 抓住了上一个10年当中，2个关键的风口。3、第一个风口，HTML5 和 SaaS2009 年 5 月 28 日，彼时以扁平化管理而著称的 Google 的内部孵化并正式上线一个在当时看来极为实验性的产品，Google Wave 。Google Wave 从根本上了来说是一个在线实时协作编辑的软件框架，而在当时的用户眼中，看起来是一个集成了邮件、实时通讯、多人协作、实时开发等大量功能，可以嵌入各种各样媒体、服务功能的复杂集合体。彼时 Google 还未正式退出中国大陆，我曾经在大学阶段有幸体验过 Google Wave，当时常与朋友在 Google Wave 的协作文档中聊天，添加简单的媒体链接，分享信息。无法忽视的是，Google Wave 的诞生上线和 2008 年 HTML5 第一版草案的公布不无关系，当时想要体验 Google Wave 需要使用最新版本的 Chrome 浏览器，而这个时间节点恰恰是 Chrome 和 Firefox 浏览器开始普遍支持 HTML 5 的时候。同在 2009 年，Node.js 和 AngularJS 正式发布。（这一年，一直热衷于网络技术和设计的 Dylan Field 前往布朗大学上学）Google Wave 在 2010 年正式宣布暂停研发并于次年彻底暂停服务，用户仅能阅读自己的内容，直到 2012 年 Google Wave 彻底在 Google 删除，并完全移交给 Apache 软件基金会。Google Wave 存在的时间非常短暂，但是在它关停之后，它在实时协作编辑开发上的探索，直接反哺了 Google Docs 和 Google Drive，而这两项服务为谷歌此后拓宽了市场，甚至成为了 Google 如今占领教育和低端笔记本市场所用的 Chromebook 的一个重要先决条件：Pixelbook 2013 原型机，A面顶端两侧的 LED 灯在正式版中被移除了。更重要的是，Google Docs 这项服务，是 Figma 最终定型的重要参考，而两者在基础的思路和特性上，几乎是沿着 Google Wave 的这条脉络，一脉相承。从2009 年到 2012 年，Google Wave 大胆的尝试给彼时很多软件开发商和服务供应商打开了新世界的大门，围绕着 HTML5 所延展出来的技术、服务与工具如同雨后春笋般涌向，越来越多的 SaaS 服务开始选择使用浏览器这样的轻量级瘦客户端交付给用户，让复杂的渲染和计算留给位于云端的服务器来处理。2012 年刚刚成立 Figma 的 Dylan Field 和 Evan Wallace 并没有明确他们要创造的产品会有什么功能，具备什么样的服务，但是他们确定一件事情：「我们的产品应该直接立足于浏览器，它是一个免费、简单且充满创意的工具，要让任何人都可以借此发挥自己的创想。」随后，Figma 正式开始开发。4、第二个风口，去 Adobe 化的 UI 设计做 UI 设计这个事情在很长一段时间里面，靠的主要是 Adobe Photoshop。一方面 Adobe 和苹果早在90年代初就已经是深度合作的关系，甚至 Adobe Illustrator 干脆就是在 Macintosh 上研发测试的，Adobe Phtoshop 最初也是如此。另一方面，在很长一段时间里，UI 设计也需要 PS 来作为视觉呈现的支撑。在 2000 年前后，以 MacOSX 1.0 DP3 为分界点，正式引领整个 UI（GUI）设计圈子向着拟物化设计进发。具体参看《Mac视觉史》第三篇：Mac 视觉史 vol.3：浴「水」重生的 Mac 视觉美学世间所有的相遇都是久别重逢。阅读文章 > 这些高度拟物化的肌理材质，渐变的光影，丰富视觉层次，使得设计师不得不选择 PS 作为 UI 设计的工具。加拿大设计工作室 Teehan + lax 作为非官方为设计师提供的 iOS 6 的 PSD，当时苹果官方还没有在 HIG 当中提供 UI Kit。这种追求高光阴影和肌理的拟物化设计在 2010 年前后抵达了高峰，彼时著名的设计社区 Dribbble 和国内论坛 iconfans 内聚积着大量热衷于「抄现实」的拟物化 UI 设计高手。2009 年的 Dribbble 网站我真的找不到更清晰的当年的网站截图了然后，设计方向开始发生转变。虽然微软早在 2002 年的时候就开始在自家 Zune 播放器上尝试扁平化设计，但是直到 iOS 7 （2013年）和 Material Design 出现，市场份额极小的 Windows Phone 7 的Metro 设计风格延伸到桌面端的 Windows 8 上之后，扁平化设计的趋势才彻底盖过 拟物化设计。而移动端用户数量爆发式增长（2013年移动端流量正式超过桌面端流量），和同时期这种设计风向的改变，是让 UI 设计领域开始去 Adobe 化的重要前提。Sketch 1.02010 年问世的 Sketch 最初的目标，是希望在 Mac 平台上给用户提供一个足够轻量、足够快速的矢量图形编辑工具，实际上当时 Sketch 的创始人 Pieter Omvlee 对于未来的走向也没有清晰的思路：「当时我在特温特大学（荷兰）刚刚开始我的计算机科学研究。当时的想法是制作一个简单的绘图应用程序。那时的独立应用场景要小得多，似乎有一个我认为可以填补的空白。……上线后，我们被功能请求淹没了，保持专注一个方向是一个极大的挑战。每个人都想把 Sketch 拉向他们需要的方向。而真的迎合这种需求，风险在于你最终会得到一个怪物，一个可以做很多事情但没有办法掌握的应用程序。」当时有用户认为它是臃肿庞大的 Adobe Illustrator 的优质替代品，而此时 Sketch 的开发团队已经开始将 Symbol 作为核心功能提供给用户，只是当时更加粗陋，仅仅类似于 PS 的智能对象（真正的 Symbol 功能是到 Sketch 3 的时候才具备），不过，包括布尔运算在内的基础的矢量图形工具都已经基本具备。此后，随着扁平化设计的崛起，快速迭代的 Sketch 吸引了越来越多的使用 PS 绘制 UI 的用户，它逐渐成为一个现象级的 UI 设计软件。原本轻量级的软件体量，明确的功能，轻松兼容日渐复杂的 UI 设计需求（比如对于 x1 x2 x3 尺寸界面的轻松导出），快速而便捷的画板等等。Sketch 3与此同时，处于阵痛期的 macOS 平台对于 App Store 的软件分发机制有更多干预和要求，很多软件受不了对于功能和用户关系的干预而独立，其中就包括 Sketch。用户对 Sketch 的认可也使得它有了底气通过自家网站来进行许可证分发，此时正是 2015年，而这一年的年底，Figma 正式推出了第一个 Beta 版本。在这个扁平化设计风行、追求轻量高效设计工具的阶段，Sketch 和 Figma 选择的方向，其实是殊途同归的。和最初的 Sketch 一样，Dylan 对于 Figma 的未来形态并没有明确的远景，并且一度考虑制作成为一款3D软件。从 2012 年到 2015 ，Dylan Field 和整个 Figma 团队都面临着极大的压力，Dylan 本身对于 Figma 发展方向的不明确、领导经验的缺乏和融资上的挑战，使得很多员工在这个过程中离职，甚至影响到 Figma 的发展，最终是「团队中其他成员对 Dylan 进行了干预」，才在一定程度上扭转了管理上的问题。图片来自：维基百科2013年，Dylan 在寻求种子轮投资的时候，投资人 John Lilly 直接拒绝了他的请求，并且直言不讳地他说：「我想你压根不知道自己在做什么。」虽然 Dylan 最后从 Flipboard 的董事 Danny Rimer 以及别处为 Figma 拉来了 380 万美元的种子轮投资，但是他对 John Lilly 的话念念不忘，并随后主动联系 John 寻求解答，而 John 则随口跟他说，「你可以去找 Adobe 的 CEO Bruce Chizen 请教」。而 Dylan 真的就这么做了。在「部分功能」上对标 Photoshop 的 Figma 最终 于 2015 年正式发布 Beta 版之后，John 看到了产品，并且讶异于 Dylan 敢于从前辈（某种程度上算是未来对手）那里寻求解答的品质，而决定带领 Greylock 为 Figma 领投了 A 轮总计 1400 万美元的投资。随后，在 2016 年上线了正式版，2017 年开始推出付费的套餐，而此时在 UI/UX 设计领域，Adobe XD、Sketch 和 Figma 的竞争关系雏形已经形成。得益于和 Sketch、Adobe XD 截然不同的部署模式，借助浏览器即可使用的 Figma ，让用户更容易触达，在对标 Sketch 的功能特性的同时，以更快的速度培养出自家的插件生态和用户社区，这确保了 Figma 本身的生命力足够强健。Adobe XD 1.0而和 Sketch、Figma 同期发展的软件和服务还有很多，在 UI/UX 设计这个领域，它们共同蚕食了当初属于 Photoshop 的份额，即使有 Adobe XD 后续补位。这种去Adobe 化的趋势还体现在其他分支领域，比如基于模板的软件服务 Canva，手绘领域的 Procreate。同时 Figma 每年获得的投资也逐渐提升，随着疫情到来，远程办公需求大涨，2021 年6月获得 E轮融资 2 亿美元的 Figma 的市值已经直逼 100 亿美元大关。值得一提的是，据 Forbes 报道在 2020 年美国大选过程中，约瑟夫·拜登竞选团队的设计素材也曾使用 Figma ，并且在 Figma 上管理了所有的视觉资产。聊到这里，我们也给大家拓展一下当年奥巴马竞选时的视觉设计：连任当选有何秘密？聊聊奥巴马背后的视觉设计！为总统做设计，大概是所有的设计课题中最为复杂的了，奥巴马在2008年顺利当选美国总统，如果要列一个答谢名单，排在最前面的，并且要给予最重要的感谢的肯定会有在他背后的视觉设计团队。阅读文章 > 而 E 轮融资的 2 亿美元当中，有不少国际投资者，而此刻 Figma 超过 80% 的用户都在美国以外，这一切都使得 Figma 在如今复杂的国际形势下，需要「站队」。其实我们换个角度来重新审视 Figma 站队的逻辑也不复杂，中国用户时至今日依然需要借助第三方的插件来实现 UI 界面汉化（比如 Figma.cool），可见 Figma 用户群体当中，中国用户的比例之低，在如今的国际形势下，被 Figma 「做出取舍」，也遵循着屁股决定脑袋的基本逻辑。Figma.cool/cn不过到了这一步，并不是最终的结果。5、后 Figma 时代的中国 UI 设计软件Thiel Fellowship 的一位高管是这样评价 Dylan Field 的：「他毫无疑问在技术上是有天赋的，同时身上有一种奇妙的融合感——他有将工程和艺术融为一体的直觉。」作为 Figma 领导者，Dylan Field 目前已有的访谈内容当中，很少会体现出他的个人政治立场——当然这不代表着他没有。只是在这次大疆帐号被 Figma 封禁这件事情上，资本和美国当局的政治立场的影响，不应当被我们忽略。但是与此同时，即使疫情发展到今天这样，全球化影响下，各行各业很难彻底断开，起码短时间内做不到，即使最极端的情况发生，彻底的决裂也很难一蹴而就。那么说回 Figma 这样的 SaaS 服务/软件 本身吧。在知乎上，我注意到了这一条回答：这从侧面印证了一件事情，类似 Figma 这样的 SaaS 软件服务，尤其是将大量的服务和功能放在服务器端的专业软件，在开发成本和难度上，是并不低的。与此同时，从 Figma 到 Notion，各类基于浏览器的 SaaS 服务又在疫情之下，前所未有地得到资本的青睐。那么可以确认的是，Figma 这样「有难度」又「有价值」的方向，是未来趋势，也是需求所指的方向，而这件事情本身，与政治无关。那么对于这个方向，国内的设计工具的状况又到底如何呢？国内老牌设计协作平台蓝湖自不必说。2021 年于10月23日，蓝湖对外宣布获得10亿元的C+轮融资，投资人为GGV纪源资本、红衫中国，充裕的资金是专业软件开发的底气。他们对标 Figma 的产品 MasterGo 在这次事件中挺身而出，为准备从 Figma 迁移出设计素材的设计师和团队，提供了直接的入口。而位于中国境内的服务器显而易见会比 Figma 更加稳定，部分在 Figma 中收费功能，在 MasterGo 中是直接免费的。我们之前提到过的「即时设计」其实也是 2016 年就开始了他们的征程，他们是定位则是「为互联网公司的产品经理、UI设计师、研发工程师提供实时协作的云端设计工具」。「即时设计」在2018年1月、2019年1月获得了数百万天使轮融资和千万级Pre-A轮融资，而在2021年密集获得了四次融资，总计数亿人民币，投资人包括高领创投、SIG海纳亚洲、源码资本、蓝驰创投、靖亚资本，以及美国对冲基金Coatue Management等。在这次事件当中同样为国内设计师提供助理的 Pixso 则来自万兴科技，Pixso 敢于对标 Figma 的底气在于，万兴科技在 2020 年控股了国内著名原型设计工具墨刀。2021年，集线框设计、PRD文档撰写、原型交互设计、视觉设计、UI设计、设计交付、设计规范管理、任务管理、团队管理等功能于一体的 「摹客DT」获得 沣扬资本和凯泰资本分数千万元的投资，而他们的方向也是「打造更懂中国设计师的设计工具」，同时希望能够做「世界的摹客」。与其说 Figma 这次的事件是一次「危机」，倒不如说是对国内 UI/UX 设计类软件的一针「疫苗」——伤筋动骨自然是不止于，但是在很大程度上激发了国内同类型 SaaS 软件获得融资，进一步推动研发，让国内乃至于国际用户拥有更多的选择，甚至推动其他创意工具的研发团队，在「可能存在类似风险」的领域进行软件、工具和服务的研发。6、最重要的事情总而言之，这次事件对于绝大多数的设计师而言，并没有根本上的影响。软件工具必然会越来越强，硬件性能也同样处于快速的发展中。设计师和设计行业的从业者更需要考虑的，可能是软硬件高速增长下，自身技能和能力的成长。7、最后的话曾经 Google Wave 埋下的种子生长出了 Google docs 和 Google Drive，它们在多年后成为了Chrome OS坚强的后盾，从教育市场借道，让 Chromebook 逐渐占领了美国的入门级笔电市场。而借由Google docs 的灵感诞生的figma，则翻身逆袭了 Sketch，在UI/UX领域扶摇直上，在SaaS 市场上一骑绝尘。这是前瞻者的成功也是天才的胜利，但更是资本和市场对于这一方向试错后的成果。Figma 这次操作背后可能同样有资本和某些个人的影响，但是它更重要的是印证了发展方向的准确性，甚至可以说，它是促使国内创新工具的本土化的的一针催化剂。在更长的时间尺度上，这次的事件最多是一城一地的小得失，后面的日子还长呢。起风了，各位。图片来源 ivankristianto参考来源：https://en.wikipedia.org/wiki/Dylan_Fieldhttps://en.wikipedia.org/wiki/Sketch_(software)https://www.stateofdigital.com/google-wave-is-back-called-google-drive-and-gives-google-more-grip/https://web.archive.org/web/20160628174909/http://www.businessinsider.com.au/sketch-leaves-apple-mac-app-store-2015-12https://web.archive.org/web/20201020042828/https://www.wired.com/story/figma-updates/https://www.forbes.com/sites/alexkonrad/2021/08/10/how-figma-became-designs-hottest-startup-valued-at-10billion/https://www.36kr.com/p/1490187765032840本篇来源：优设网原文地址：https://www.uisdc.com/dont-panic-and-use-figma
图片 功能 工具 本文要介绍「ImageResizer」是一个整合常用图片编辑功能的免费在线工具，从 2013 年开始提供用户简易的调整图片大小工具，多年来不断改良工具，加入更多功能、提升处理速度，目前除了调整图片尺寸工具也有批次编辑、图片放大、图片压缩、图片裁切和 PDF 工具，这项服务完全免费！只要打开网站就能使用，而且几乎没有任何限制。透过图片调整尺寸工具可以重设图片尺寸，批次编辑器可单次同时处理最多 20 张相片，调整图片时可指定特定长度、高度或缩放百分比，也能输出为不同图片格式（转文件功能），如果图片容量太大的话，ImageResizer 内建图片压缩功能，可以在不破坏画质的情况下有效降低图片档案容量。ImageResizer网站链接：https://imageresizer.com/使用教学开启 ImageResizer 会看到调整图片尺寸功能，可以简单地在在线修改图片尺寸，适合处理单张图片。在线工具需要将图片上传到远程服务器，ImageResizer 在功能特色有标示所有传输都会使用 256 位加密 SSL 信道，图片只会保存 6 小时，超过时间会自动删除。如果要一次处理多张图片（批次编辑），记得点选上方选单「Bulk Resize」选择批次编辑功能，否则多张图片拖曳到网页上就会显示错误讯息，批次编辑一次可同时处理 20 张相片，点选右上角功能切换使用图片网址汇入或是本机上传。在进行单张图片调整尺寸时可以输入特定的宽度、高度和选择单位，或是以百分比进行缩小，除此之外，最下方保存选项可输入期待的图片大小，ImageResizer 会将图片尽量压缩到这个容量，也能选择保存格式。在单张调整尺寸的工具中也能对图片进行裁切、翻转或是旋转。完成后 ImageResizer 会在结果页面显示图片的原始容量、原始尺寸和新的容量和大小，图片在重设大小后确实使容量减少许多，点选上方的「Download Image」就能下载图片。ImageResizer 另一个「Bulk Resize」批次重设尺寸大小的功能也很方便，可以单次处理最多 20 张图片，使用方法一样是将图片拖曳到网站（或是以网址方式汇入图片），图片就绪点选「Proceed to Bulk Resize」就会开始上传图片。上传后就能批次调整这些图片的大小、以压缩工具优化图片（非必要），有助于降低图片大小，而且不用担心破坏画质，也能够选择要转换的图片格式（转文件）。ImageResizer 编辑完图片后一样会跳出结果画面，点选「Download Images」就能取得图片压缩文件。值得一试的三个理由：ImageResizer 整合各种常用图片编辑功能的免费在线工具批次编辑器可单次同时处理最多 20 张相片，无需注册或下载软件完全免费！只要打开网站就能使用，而且几乎没有任何限制。在线编辑图片神器 ProductShot！还能瞬间拥有放大镜效果！本文要介绍「ProductShot」是一个为图片进行标记的线上工具，可以将特定范围放大、圈选标示并将背景加上遮罩雾化效果，也能调整放大倍率、放大镜尺寸、背景模糊程度、遮罩颜色等等，对于让使用者聚焦在特定区域很有用。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/imageresizer
文件 在线 功能 编辑推荐：无论是以往的本地 Sketch 文件管理，还是 Figma 的在线文件管理，都存在着一定的痛点，而「即时设计」在这方面，无疑是考虑到了更细致的角度，通过多项特色功能，为设计师提供了一种更为有效且易用的文件管理方案，一起来看下吧~即时设计官网： https://js.design最近，在系统性地整理去年的各种文件时，我才真正意识到，自从用上即时设计、Figma 这些新的在线设计软件，我的文件管理习惯与以前使用 Sketch 时相比，已经潜移默化地产生了很大的变化。作为一个有强迫症的设计师，曾经最受不了的一些画面：为了不遗漏近期工作需求，通通堆在桌面设计文件整理不成体系，东一块西一块一个项目十个版本，全是最终版收集资源没有二次整理，下载目录眼花缭乱……想想就很头大是吧？之前也有给大家分享过一些整理电脑里文件的思路，不过今天要分享的，是在用上新工具之后变得不太一样的设计文件管理方式，希望可以给大家提供一个新的工具使用参考~在线保存，随开随走这是最基本，也是相当重要的一点。不管是即时设计还是 Figma，首先最吸引人的就是，所有的设计稿都被乖乖地保存在云端，这让我本地的 Sketch 文件数量大幅下降，桌面和其他文件夹都变得比以往要干净不少，甚至好像电脑都“轻”了 200g……其次，得益于在线工具的属性，我的设计文件可以完全摆脱设备和硬盘的限制，不用考虑电脑系统，不用考虑容量，不用担心备份的麻烦，随时关闭离开，在任何一台电脑上都能继续进行创作，这是以前用 Sketch 时很难享受到的体验。跟进以前，我的桌面之所以会乱，基本就这两种情况：有紧急的客户需求，总是要放在桌面方便打开；担心错过工作需求，不得不放在桌面好及时确认进度；而这些需求在做完后，又总是忘记归档，再加上做需求时为了便于使用在桌面放的各种素材、截图等等，时间久了就难免变成上面截图里那个样子。但现在，在「即时设计」里，我却完全不会遇到这种问题。即时设计和 Figma 一样，作为基于浏览器的在线工具，他们都没有桌面的概念，但是即时设计有一个功能叫「跟进文件」，通过右键菜单，我在遇到有很多需要近期处理的设计稿时，都可以直接跟进。这个功能算是比较容易理解，跟进后的文件，我可以方便地在左侧的「正在跟进」页面里找到，就相当于以前用 Sketch 时把文件放到了桌面，但操作更简单，效果也更好。而且，因为跟进的是源文件，我甚至可以先归档后跟进，完成需求后直接结束跟进即可，也不需要像以前一样，先放到桌面，等到所有工作都结束了再单独归档。打标签一些特殊的项目，我总是会单独在文件名后面加括号备注，或者通过 Mac 自带的标签功能加上一个特定的标记，个人认为这算是一种比较好的处理方式了。不过，在我用了「即时设计」的文件状态标签功能之后，已经有点嫌弃以前的方法了，并且由于这目前还是个团队独享的功能，我还专门建了个团队把自己工作台的文件放了进去。这也是即时设计的特殊功能之一，我现在会自定义一些常用的文件备注，然后非常方便地把某些文件打上我觉得合适的标签，也可以通过不同的颜色进行区分，相当于同时满足了两个需求。另外，这个功能也不仅仅是用来便于识别，在此基础上，它同样可以用来筛选文件，直观的看到对应的设计稿，也比在 Mac 里只能筛选出所有乱七八糟的文件要好用很多。体验「即时设计」文件状态： https://js.design文件分类无规矩不成方圆，没有分类的文件整理肯定也算不上整理。对外的项目、对内的项目、个人的作品、练习、公众号等等各种各样的内容，在整理前，起码要按照恰当地划分出至少 2-3 层子目录才能保证结构的清晰，但具体分类规则因人而异，就不展开聊了。经过几千年验证演变而来的文件夹，依然是分类管理最必不可少的，也是我们最习惯的方式，这一部分的习惯我在用「即时设计」时倒是没有什么变化。因为「即时设计」支持文件夹功能，和以往的操作基本没有区别。而与上面提到的「跟进」和「文件状态标签」搭配起来，体验可能还要比本地的文件管理好上很多，并且标签可以只筛选子文件夹里的文件，比 Mac 的全局筛选效率要高不少。不过在用 Figma 时却遇到了点小问题。Figma 是不支持文件夹管理的，也没有多层级的文件整理方式，虽然可以通过创建团队和项目的方式曲线做到单个层级的简单分类，但免费用户暂时也只能创建一个项目和三个文件……由于我目前还没有购买专业版的需求，所以约等于无。版本管理及备份创作这种事，当下的灵感和想法往往远比实际劳动的意义更高，做设计、写文章都一样，不管是自己还是 leader，都会有突然想要用回之前某个版本某个部分的情况，所以历史版本的重要性不言而喻。用 Sketch 的时候，虽然也有自动保存的历史快照，但基本只能用来防止文件意外丢失，在寸土寸金的 Macbook 里，版本快照动辄几十 GB 的空间占用还是很吓人的。所以我之前还是经常会通过手动复制对应版本文件的方式来实现版本管理，但是需要注意控制文件数量。当然，手动保存的版本，在公司层面也可以通过 Abstract 或者半年多前才上线的办公空间进行云端备份和管理，也是之前比较常见的形式。而有了「即时设计」和 Figma 这样的在线设计软件后，我的设计稿已经可以像在线文档一样，实现所有内容自动云端保存，随时恢复了。同时所有内容都在一个文件中记录和保存，还能随时快速创建重要版本的标记，不用像之前一样考虑本地多文件整理、上传和下载这些概念，省了好多麻烦。即时设计和 Figma 也都支持了导出自有格式的本地备份，一个是 .jsd 一个是 .fig，都可以 100% 保留文件数据并还原。即使公司需要备份 Sketch 文件，也可以通过即时设计自带的功能或者 Figma 的第三方插件将设计稿导出为 sketch 格式，在工作中使用完全没有问题。资源管理说到资源管理，其实 Eagle 已经非常全能了，我的本地资源基本也都是用它来保存的，如果舍不得花钱的话，还可以用 Billfish 来实现类似的功能。这依然是本地管理的方式，不过现在，我们也可以在线管理资源的方式。1. 个人资源库其实在最早介绍即时设计的时候也有提过，它的「个人资源库」是一项和 Eagle 类似的功能。我现在会将很多经常要在各种场景下使用的素材，都上传到即时设计中，在外出用笔记本或者 iPad 办公时，可以随时从个人资源库调用，不必每次临时需要某些素材时才去当初收集资源的网站重新搜索。2. 共享字体不只是素材，我收集的一些常用字体也基本都上传到了即时设计，虽然有本地字体可以用，但上传后的方便之处确实要真正体验过才能清晰地感受到。以前，我在家里电脑上做好的海报或者封面图之类的，如果要发到了其他电脑上，一定要把里面用到的新字体一起发过去，然后就是熟练的下载安装一条龙，才能正常编辑这个设计稿。现在，用即时设计做的项目，不管用哪台电脑哪台 iPad 打开，都可以直接照常编辑，既不用发文件也不用发字体。这个共享字体，不光个人能用，团队里的所有人也可以，而且对团队来说，实用价值更大，在 Figma 里，也可以通过购买企业版体验到团队共享字体。总结基本上就这些了，和 Sketch 相比，Figma 和「即时设计」具备一些相同的优势，但也有各自的优点和不足，一边有更强的性能，一边有更多能满足我们日常需求的功能，就目前来看，是没有必要非得二选一的。从自动保存备份、到文件夹、文件跟进、文件标签，再到素材和字体管理，起码在即时设计上，我已经完全培养出了一套比本地文件要便利得多的文件整理流程，这方面「即时设计」做的确实要好上很多。即时设计官网： https://js.design更多即时设计的介绍：超全合集！腾讯、字节、阿里多套大厂资源，十几套小程序 App 模板！2021 年就要结束了，年底给大家分享一波高质量的实用在线设计资源！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/js-design
图层 画笔 功能 作为非美术设计专业出身的绘画爱好者，过去我一直在用手绘板进行绘画工作，但是手绘板的缺点很明显：如果不是坐在电脑前，想画画的时候就没有办法了。当我有了 iPad 和 Apple Pencil 之后，这个问题迎刃而解，我可以用 iPad 在任何地方随时随地进行绘画。有了 iPad 之后，我体验了不少绘画 App，用的最顺手的还是 Procreate，不论是功能的全面性、绘画的流畅度、还是操作体验方面，Procreate 都做的非常优秀。用了一段时间 Procreate 画画之后，我也有了自己的一些技巧和使用心得想要分享给你。这篇文章会从五个部分，介绍我的画画流程和经验，希望对喜欢画画的你有所帮助。绘画流程首先，我会从 5 个方面，介绍我的绘画流程。草稿画草稿的时候，我有两种使用画笔的方法，在画画时会根据心情选择不同的方法。第一种方法，是用「绘图」选项中的HB Pencil画出大概的结构：第二种方法是用「着墨」选项中的工作室笔，降低画笔的透明度，然后画出大概的结构：下面这张动图是我在画草稿时的一个过程展示，需要注意的是，建议大家在画草稿的时候尽量简单，不要像我一样一条线段画好几次，这是一个坏习惯。描边描边之前，我会先降低草稿图层的透明度，然后在草稿图层上新建一个图层，用描边的画笔来描：画布中浅色线条是调整了透明度的草稿描边的过程中，你需要注意线条的流畅度，尽量不要让线条看起来很「抖」，除非你是有意为之。描边过程展示，重点是要保持线条的流畅度上色上色之前，我们可以先隐藏或者删除草稿图层，避免上色过程中出现不必要的干扰。一般情况下，我会在描边图层下方新建一个图层，然后用上色画笔沿着描边内侧描一圈，最后用快速填充的技巧，瞬间完成填色工作，这一点之后会讲。上色过程中，我的习惯是每次上一种颜色，都会新建一个图层，方便之后处理阴影和高光等细节。光影为什么我要把光影（阴影和高光）单独列出来？阴影和高光能让作品有立体感，能让角色「活」起来。我认为处理阴影和高光是画画过程中非常重要的一个环节，为了强调它们，单独列出来介绍。大家可以对比以下两幅作品：接下来以脸部的阴影高光的处理方法为例进行介绍。首先，我们需要在脸部的颜色图层上新建图层，然后将这个图层设置为剪切图层，这样在新建的图层上作画不会超出脸部颜色图层的范围。新建图层作为剪切蒙版上阴影颜色接着，我们用比底色稍微暗一些的颜色涂阴影、比底色稍微亮白一些的颜色来涂高光就行了。记住，不要只用灰色和白色作为阴影和高光的颜色，要学会根据底色和环境色选择阴影高光的颜色，这样会让面中的人物更加生动。细节这一步操作不是画画中的必要流程，但是如果时间充足的话，添加一些细节可能会让我们的作品更加「精致」。具体需要为画作加哪些细节呢？首先是为画面中物品的内部添加细节，比如，我们可以为服装添加表现褶皱的细节，具体的做法是在衣袖部分加一些线条：在衣袖部分加一些线条，表示褶皱接下来，我们可以为画面中的物品添加表现运动状态的细节，比如用动态模糊效果画出纸屑快速运动的场景；或者是用人物旁的细线表现缓慢移动的状态。在左侧女生后面加几条细线说明女生在慢慢移动添加细节的时候，我会用笔触小一些的画笔，这样画出来的细节更加细腻和精致。铅笔、画纸、手等地方都用了细画笔做细节实用功能介绍完绘画流程之后，再来说说我认为 Procreate 里的几个实用功能。拖动填充这项功能能够帮你快速完成填色工作，用法很简单：直接拖动调色板图标到画布上就可以完成填色。需要要注意的是，使用这项功能填色，颜色会填满你拖动位置所在的封闭区域，比如你把颜色拖动到图层中的封闭圆环中，圆环会被填充满颜色。这个功能还有一个绝佳拍档：参考。当你画好线稿之后，将线稿图层设置为参考图层，然后新建一个图层（或者切换到其它图层），使用拖动填充功能进行填色，颜色会根据线稿图层的图案作为边界进行填充。不过，填色之后一定要记住取消线稿图层的参考开关，不然就会出现下面这种尴尬情况：我经常忘记关掉参考功能Alpha 锁定Alpha锁定功能能锁定图层的透明度，锁定之后，你只能在图层上不透明的区域作画，你之后画的内容会随着锁定前图层的透明度不同表现出不同的透明度要使用这项功能也很简单，点击图层后，再点击一次，在二次菜单中选择「Alpha 锁定」即可。剪切蒙版这是我在 Procreate上画画离不开的功能。我们可以使用剪切蒙版功能画阴影高光或者衣服纹理之类的元素，只需要在点击图层后，再点击一次，在二级菜单中选择「剪切蒙版」就可以使用这项功能。使用剪切蒙版之后，这个图层上的内容或者你在图层画的内容，就不会超出下面图层图案的范围了。不透明度打完草稿之后，我们可以利用透明度功能降低草稿图层的不透明度，描边的时候会更方便。打开调整菜单，选择不透明度，通过左右滑动操作就可以进行调整了。不过我习惯用手势操作，会更加方便和快。我们只需要用两只手指点击对应的图层，就可以进入调整透明度的模式：显示特定图层画到一半，突然想修改某一个图层中的内容，但是其它图层的干扰元素太多，这项功能就派上用场了。我们可以长按图层的控制显示与隐藏功能的检查框按钮就可以使用这项功能了，再次长按按钮可以恢复原来的显示内容。生成规则形状如果你可以徒手画出规整的圆形或者正方形，可以忽略这项功能。如果不行，这项功能可以帮你快速生成一个规则形状首先，我们可以随手画一个圆，然后笔尖停留在屏幕上稍等一会，我们徒手画出的不规则圆形就会变成一个规整的椭圆。点击上方的「调整形状」按钮，，就可以将椭圆调整为圆形。同样地，你可以利用这项功能生成规整的直线、弧线、正方形、四方形、矩形等。绘图指引绘图指引功能其实就是参考线功能，在必要的时候能够发挥奇效。绘图指引有 4 种类型，分别是：2D 网格等大透视对称绘图指引需要配合「绘画辅助」功能，只需要在操作菜单栏里打开绘图指引的开关，然后在图层界面里点击需要绘图指引的图层，在菜单中选择「绘画辅助」即可：开启「绘画辅助」功能之后，你画的每一笔都会严格按照参考线方向，如果你只是想显示参考线而不影响你的作画，建议还是把「绘画辅助」功能关闭比较好。手势操作Procreate 支持丰富的手势操作，只需要熟练掌握几个常用手势就能在画画的时候事半功倍。以下是我们经常会用到的 Procreate 手势操作：如果有需要，我们还可以根据使用习惯调整部分操作的手势：特殊技巧Procreate 不仅有许多实用功能，如果使用得当，我们还能用它实现一些平时可能无法用它实现的操作。制作渐变色Procreate 暂时不支持直接生成渐变色，但是我们可以通过以下三个步骤「曲线救国」：新建一个图层，涂上你想要渐变的颜色。使用高斯模糊功能调整参数，你会发现这些颜色融合在了一起。将渐变色图层剪切蒙版到预先准备好的形状图层上，就可以完成渐变上色操作了。我们可以用这个方法制作渐变色背景、渐变色字体等等，让作品的色彩更加丰富和美观。制作点虚线画画的时候可能会用到虚线，如果你一笔一笔画，你最后可能会直接摔笔。其实有个很方便的方法可以画虚线，就是选择画笔，然后再进入画笔编辑界面，把描边属性的间距调整至一定的大小，之后你会发现画出来的笔画就是点状虚线了。其实画笔的可玩性非常大，比如，你还能自己制作形状生成自己的画笔，制作自己签名的印章笔刷等等。局部删除如果你想快速删除图层中的某个部分，又不想用橡皮一点一点刷，这个技巧可以帮到你。用「选区工具」选中想删除的部分，再点击需要局部删除的图层，最后选择「清除」即可。准备不同大小的画笔如果你像我一样是「强迫症」，要保证同一系列作品描边笔画粗细一致、细节笔画粗细一致，那么作画前你最好准备好几种画笔，例如像我这样设置：描边画笔：用于草稿之后的描边细节画笔：用于绘制各种细节上色画笔：用于涂色，根据实际需要修改画笔大小上面介绍的前两种画笔，我们在设置好粗细程度之后，没有特殊情况就不需要作改动了。这样做是为了防止同一个系列的作品出现不同粗细的描边，这样会让画作不统一。这样设置画笔还有一个好处，就是能够节省调整画笔粗细的时间，要在 Procreate 里精准调整画笔的粗细，操作起来还是有一点复杂。导出至电脑Procreate 支持导出多种不同格式的文件，用它画完图之后，我们可以导出 PSD 格式文件到电脑上，用 Photoshop 继续进行编辑。如果你用的是 Mac 电脑，可以直接用「隔空投送」功能将文件导出至电脑。如果你用的是 Windows 电脑，方法有一点麻烦，接下来我就介绍一下在 Procreate 里导出绘画文件到 Windows 电脑中的方法：利用坚果云同步。在 iPad 上安装坚果云之后，「文件」应用里会出现坚果云的文件夹：导出的时候，选择「存储到文件」选项，我们只需要将 PSD 文件导出至坚果云文件夹里，就可以自动同步到电脑上了。实用的绘画工具介绍完了软件使用技巧之后，再来分享几个我平时画画会用到的实用工具。类纸膜如果你不喜欢用 Apple Pencil 直接在 iPad 屏幕玻璃上画画的感觉，可以试试给 iPad 贴一张类纸膜，类纸膜会让你在 iPad 上写字和画画时有真的在纸上画画的感觉。不过类纸膜也有缺点，就是对笔尖的磨损比较大。防误触手套如果你不想在画画的时候，搞的屏幕上都是掌纹、或者在出汗的时候手掌黏住屏幕的情况，可以考虑试试防误触手套。虽然戴起来有点「中二」，我现在画画已经离不开这副手套了。蓝牙键盘Procreate 的功能很全，如果你为 iPad 外接了键盘，还能用各种快捷键辅助画画我用的键盘是 Apple 自家的 Smart Keyborad Folio，架起键盘的时候画画不太方便，所以我很少用到键盘快捷键。如果你有其它更好的键盘选择，不妨试试。画师推荐如果你想学习别的画师的绘画技巧和流程，我非常推荐国外的画师 Gal Shir。官网InstagramYouTubeGalShir 会定期分享他的作画过程，不仅能从他的创作过程中学到不少技巧，更重要的是，看他画画真的很「治愈」，给大家感受一下另外，他还制作了一套效果很不错的收费笔刷，他平时分享的画画作品都是用这套笔刷画的，笔刷的效果就不用我多说了吧。最后这篇文章更像是我对于最近画画过程中技巧和心得的一次总结，如果能帮助到想学画画的你，哪怕是一点点，我认为就足够了。如果说有什么方法能帮我们提高画画水平，让我深有体会的一点就是：多画。一年前，我的画是这样的：现在，我的画是这样：虽然不能说画的有多好，但也算是有进步吧。所以，对画画有兴趣的你，一定要坚持画！原文公众号嘉文钱
产品 用户 功能 竞品分析作为无论产品经理、运营岗或体验设计师，都是其必备技能和工作范畴之一，想必大家也应该有些许心得和体会。但是如何通过竞品分析提炼有效信息，为业务或设计决策提供强有力的支撑，仍然值得进行更多的思考。文章主要介绍将用户体验五要素和表格对比法相结合的方式，系统阐述竞品分析的思路。为什么写该文章最近早上听两位同事的一段聊天。一位同事说自己很苦恼，不知道自己即将想购买的个人保险是否有什么潜在的风险。另一位同事则给她一个思路，可以给这家保险公司的竞争对手企业咨询一下，了解预购买的这份保险的问题。听了这段对话会发现竞品研究在我们的日常生活中无处不在，当我们无法判断一件事情的好或坏，最好的方式就是拿同类的产品来比较一下，也就是“货比三家”。可以发现，掌握竞品分析的研究思路不仅仅对我们的工作有帮助，而且对我们的日常生活也有一定的帮助。竞品分析不等于货比三家竞品分析最早源于经济学领域。随着互联网的火热，现在被广泛运用于互联网产品生命周期的流程设计中。互联网产品 PRD 评审或设计方案评审时，都有可能被领导或相关评审同事询问：竞品的方向是什么？竞品是如何做的？所以竞品分析在产品设计流程中的重要性也不言而喻。近两年的工作发现大家在进行竞品分析时会存在的一些共性疑惑：对于竞品分析肯定不能简单归纳为”货比三家“这么简单，张在旺老师在《有效的竞品分析》书中对竞品分析的意义按照对产品及个人两个维度进行说明：以终为始的思维方式分析为什么是以终为始的思维方式去做竞品分析，《高效人士的 7 个习惯》（The7 Habits of Effective People）提到的第二个习惯”以终为始”。做竞品分析时也要明确的清楚自己的目标，目标清晰的前提下进行设计分析，不至于最终的分析方向和目标偏离太远。竞品分析要怎么做1. 明确竞品分析的目标产品从概念提出到最后退出市场的整体生命周期中，竞品研究在不同阶段的目标也不同。首先了解当前产品在生命周期中所处的阶段和用户特征，做到先「知己」再去「知彼」。起步期阶段：产品刚进入市场，该阶段大部分产品属于业务导向，通过竞品研究主要目的是验证其需求是否可行或产品的商业模式是否靠谱。该阶段可以通过使用波特五力分析、PEST、SWOT 等方法分析，从宏观层面上了解产品可挖掘的机会与产品可能潜在的威胁，借鉴其中产品的商业模式归纳特征，打造差异化产品。成长期阶段：该阶段更多的是业务导向往体验导向过渡，该阶段产品的基本雏形已形成。可以通过 KANO 模型等方式研究竞品中用户的期望属性以及魅力属性的功能与信息。从竞品中可以获得创新的亮点与思路，尝试 MVP 的方式快速寻求解决方式，突破现有产品模式。UI 进阶必学系列：需求分析工具 KANO 模型大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。阅读文章 > 成熟期阶段：更多的是通过创新的功能与内容优化以达到满足体验和商业的目标。通过结合商业的诉求，持续关注核心的竞争对手产品的迭代与产品设计，为自己提供创新的思路，不断打磨现有产品的细节与体验。2. 竞品的选择对于竞品的选择上，也要根据竞品分析的目的不同，进行不同的竞品选择。“决策支持”或“预警避险”类的分析，则可以从“品牌竞品、品类竞品、替代品”中寻找竞品。比如携程酒店产品的分析，则品牌竞品、品类竞品和替代品可以选择去哪儿酒店、美团酒店、飞猪酒店以及民宿和短租类产品如：爱彼迎、途家等。竞品分析的目的是“学习借鉴”时，可以从“品牌竞品、品类竞品、参照品”中寻找竞品。依然以携程酒店为例，则参照品可以选择饿了么、美团外卖以及京东等平台为参照品。初步选取好竞品后紧接着就是对竞品进行分类，选择一个合适的维度进行产品分类，将分类结果结合自己产品特性和用户特性进行初步筛选。3. 竞品分析的思维框架对于成长期和成熟期的产品的分析，笔者比较推荐 Jesse James Garrett 在《用户体验要素：以用户为中心的产品设计》书中的模型进行分析。用户体验五要素从 5 个层面拆解产品分析的维度，通过对战略层、范围层、结构层、框架层和表现层的拆解分析，可以全面、深入、细致的了解竞品。4. 战略层战略层主要是了解产品目前在公司的定位与阶段，目前产品的商业模式以及产品当前的核心定位是什么，讲清楚用户可以从产品中获得什么，公司可以从产品中获得什么，如果涉及到触点比较多，还要讲清楚，商家和用户以及平台之间的关系，建立平台性思考的思维框架模式。比如闲鱼二手闲置物品交易平台，该产品卖家在平台通过发布宝贝、鱼塘、话题等信息，平台则给予卖家一定商品的曝光和信誉评分，买家通过给平台提供一定的流量和交易额，平台则给予买家提优质的服务、交易和信誉。5. 范围层范围层主要研究竞品具有的基础元素以及核心具有的能力，推演产品的主要的核心功能、基础功能，了解功能之间的架构关系；同样以闲鱼产品为例，具有底层的基础元素是用户基础信息，平台具有信用体系和推荐的能力，则平台具有的亮点功能是交易担保以及兴趣推荐的功能。6. 结构层结构层主要包括信息架构与分类，该层面主要是对竞品的信息和功能之间的层级关系进行一定梳理，信息结构从产品的属性上可以分为两类：一类是比较复杂型的如运维类以及 Saas 类产品，另外一种是相对比较简单的 TOC 类的产品。通过对信息和功能结构的关系梳理，可以帮助我们快速了解竞品的信息与功能之间的关系。7. 框架层和表现层框架层和表现层则将页面模块以及页面元素拆分进行剖析，将页面拆成「模块-组件-元素-原子」。建议根据项目区分，并不一定每一个项目都要拆解到原子的颗粒去分析，掌握合理的度即可。在元素的对比分析中，结合打勾对比法的方式，重点关注核心的竞品，使用列表将信息进行分类罗列，通过打勾的方式对竞品功能拆分进行对比，保证分析的全面性以及在设计的落地层面上切实起到辅助决策作用。8. 竞品分析的准则为了保证分析报告的的质量，分析的过程中需要遵循一些评判的准则。应该是带着思考去看竞品，这里的思考比如说产品的可用性准则、IOS 设计规范、视觉设计的基础通用性规范去辩证看待竞品的设计。关于产品的设计准则，建议可参考尼尔森十大设计准则：使用竞品分析对产品改进竞品分析的最终目的是回归设计本身，辅助我们的设计执行与落地，对于很多用户体验设计师而言，可能最大的障碍在于如何将分析的结论运用于设计方案中。1. 对竞品功能与信息的前期调研阶段项目前期阶段进行竞品分析，可以建议结论先行。将竞品分析中确认的范围层部分和业务先讨论起来，避免因为后期大的功能信息变动，导致后期方案的反复修改。2. 产品框架与信息结构分析阶段通过对竞品的结构与框架的研究，输出产品结构图与用户操作流程图，并且结自身和产品的用户特征给出建议的方案，针对不同的框架逻辑，可以多方案输出，分析每一种方案的优、劣势，让讨论更加聚焦方案本身，提升方案的说服力。3. 产品的迭代改进走查阶段根据竞品中的亮点功能与信息进行分层梳理，按照人有我无（竞品大部分都有的信息，但是自己的产品流程中没有的），人有我有，人无我有的逻辑了解对方和自己产品的优劣势，重点关注人有我无的的产品功能、交互方式、视觉表现。结合竞品和自身产品的特性和从用户出发，综合考虑产品设计背后的本质根源，以及给用户解决的问题，给出合理的设计策略与建议。个人感想之前也见过一些小伙伴会花费很长的时间做竞品的分析，其实竞品分析重点不是竞品选择的数量有多少，当然合适的竞品选择和细致的分析很必要，但是比较重要的是通过既有深度也有逻辑性的分析后，输出的启发性想法或者建议性方案更重要。发现合适的机会—研究可行性方案—落地机会，重点是最终是否能够将发现的机会推进和最终落地，形成一个很完整的闭环。做好竞品不是一定就能做好产品，竞品分析也只是产品设计与分析过程中一个重要且必不可少的环节，最重要的还是先需要了解自身产品的特性，了解自身产品中用户的使用场景，从用户角度出发，提出当前比较合理的策略方案会更贴合用户的所需。本文篇幅相对有点长，在个别方面的分析不足之处或有更好的建议，希望可以及时交流。参考文献《用户体验要素：以用户为中心的产品设计》—Jesse James Garrett著；范晓燕译；《有效竞品分析》—张在旺著；《高效能人士的七个习惯》Stephen Richards Covey 著；万字干货！手把手教你学会竞品分析（上）我们做设计的时候经常会被问，为什么这么设计？阅读文章 > 万字干货！手把手教你学会竞品分析（下）上一篇带大家全面认识了竞品分析所用到的方法，以及竞品分析的原则和误区。阅读文章 > 欢迎关注「京东设计中心JDC」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/competitive-product-analysis-5
飞翔的企鹅
张大湿
在路上
落霞与孤鹜
表哥
