控件 用户 操作 问题起源这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。我们用一个例子开场：你运营着一个视频网站，这个网站会给付费高级用户提供 3 种权益：跳过广告、免费音乐会员、积分折扣。那么你将会员权益页设计成这样：这个时候就有一个充满疑惑的用户站出来了：这个页面的意思是说“我作为一个高级会员，同时享有 3 个权益，只是这个页面展示不下了，所以我只能通过切换页面的形式查看我的 3 个权益”，还是说“优质大会员可以按下对应的按钮，从 3 个权益里挑选一个享受”？转换成我们设计的语言来说，也就是“这到底是一个 tab，还是一组互斥的按钮？”为什么我们要把这两个东西做得那么像？它们应该长这么像吗？tab 和按钮、单选框、菜单之间到底有什么关系？这些问题虽然听起来基础，但深究纵横 50 年来控件的发展史，是一个很值得研究品味的小细节。更多控件知识可以看这个专题 https://www.uisdc.com/zt/interactive-control信息与行为，事物与事件tab 和按钮，信息展示控件和选择器之间的差异，根本上来说是“信息”与“行为”、“事物”（thing）和“事件”（event）之间的差异。前者独立于用户的意图和行为之外客观存在，即使用户永远不去看、不去使用这些东西，它们仍然存在。而“事件”则需要事物加上人的操作行为才能完成。就比如说房间里有一箱子苹果，这是一个客观事实，苹果也是一样“事物”。而人中午肚子饿了，走过去拿起一个苹果吃了，那么“食用苹果”就是一个事件，这个流程需要“苹果”这个事物，也需要人拿起来咀嚼、吞咽的动作，这两个要素共同组成了“食用苹果”这个事实。在现实生活中“事物”和“事件”完全是两个不同的概念，不会有人把这两个事情混淆。“事物”就好像名词，而“事件”就是包含动词的主谓宾短语，前者看得见、摸得着，能够被稳定观测，而后者不一定。比如要是有人告诉你“桌上有一个苹果”，那么你一扭头就看得见苹果的确在桌上，因此这个事实是确凿无误的；但假如有小朋友跟你告状“报告老师，小明刚才打我”，就不那么容易取证。然而在人机交互中，“动作”和“行为”逐渐区分得不是那么清晰。命令行时代人机交互发展之初，“信息”与“行为”、“事物”和“事件”可以很容易地区分。在用户还得使用命令行操作电脑的时代，查看某个客观存在的事物、进行一项行为，共用了一个动作：输入指令。用户需要使用这样的方式来告诉机器我想去看什么、做什么，因此用户可以阅读文本，从语句字面意思判断事物和事件、信息和行为。从一开始的案例来讲，比如用户想要查看所有权益，就输入“查看权益”，看看打印出来的权益都有什么。假如系统要求用户选择某个权益，则用户输入权益代表的编号或者权益名字。但命令行界面这种交互形式毕竟效率太低，也并不利于形成用户对于系统完整稳健的心智模型，因此随着电脑作为家用生产力工具的地位不断提升、新的操作设备“鼠标”的普及，图形化用户界面（GUI）应运而生。在命令行向图形化用户界面过渡的阶段，两种新的交互样式首先出现：菜单和输入框。早期的菜单与输入框的样式非常粗糙，与传统命令行界面差异很小，因此计算机从业者早期只能展示字符而无法展示图形，所以只能把利用菜单、文本输入框作为主要交互形式的计算机带点嘲讽地称为“荧光屏打字机”（Glass Teletypes）。在这个阶段，“菜单”仅仅是一个简陋的，有别于主屏幕的展示容器，甚至我们今天熟悉的“对话框”（dialog box），也可以被理解为菜单的一种变体。至于菜单上究竟是放“行为”还是“信息”、“事物”还是“事件”根本就无所谓，因为用户仍然以类命令行时代的交互方式，也就是用阅读文本的方式来理解事物。图形化界面时代图形化用户界面极大地改变了用户和电脑交互的方式。鼠标的普及让用户界面的元素更多、结构更加复杂，用户体验和心理学的研究成果也孕育、催生出了许多新的交互样式。其中就包含了一个对当今控件形态影响巨大的概念：渐进展示（progressive disclosure）。一般认为 Xerox 公司 1981 年的 Xerox Star 是最先在图形化界面中使用选择器/tab 的产品，虽然这个电脑商业成绩不咋地，但在用户界面方面做出了很多贡献。在这个用户界面中，设计师为了让用户不需要像命令行界面时代一样不停地通过打字、记忆命令短语来与计算机交互，因此决定采用以下策略：将高频使用的项目全部展示给用户，无需打字，只要在选项中选择即可：这个策略催生了选择器组件将暂时不需要使用和展示的信息收起来，只在用户点击按钮时再渐进展示：这个策略催生了 tabXerox Star 时代的控件样式非常粗糙，不管是 tab、开关还是多选器，都以按钮的样式呈现，因此某个选项到底是什么意思、具体怎么用，依然依赖阅读文案来判断。比如用户看到“对齐方式：左对齐/右对齐/居中对齐”，就应该能理解是在 3 个对齐方式中选择一个，而看到“展示：字符/段落”，就应该理解是在选择展示和字符有关的设置项，还是和段落有关的设置项。而为什么 tab、选择器成为了我们今天看见的样子？这又不得不提鼠标的普及让一种全新的交互形式：直接操作（direct manipulation）进入了交互设计师的视野。按今天的说法，直接操作一般指“直接对对象进行操作”，比如用鼠标直接以拖动的形式进行文件排序、放大缩小、位置移动等操作。相比菜单、文本输入框，这种操作形式更快速、反馈更充足、更符合直觉。比如我们现在非常熟悉的“把某个文件拖动到回收站”这个操作，就是直接操作的一个经典案例。虽然直接操作今天看来是理所当然的，小学生都知道怎么把文件拖到废纸篓。但 80 年代用户图形化界面诞生之初，用户对家用电脑根本没什么概念，更不要提鼠标拖动这种高端操作了。那么，设计师要如何教育用户学会使用直接操作这种新的交互形式？这个答案是：引入隐喻（metaphor）。简单来讲，隐喻即为“用直接或间接的方式，说明 A 和 B 很像、A 具有 B 的特性，或者可以用操作 B 的方式操作 A”。将用户完全不熟悉的人机交互概念用日常生活中的事物表述出来，就能使其将自己的生活经验移植/应用到人机交互中，从而降低学习成本、使用户通过直觉也能辨别出某个功能该怎么用。比如上面提到的“将文件移入废纸篓”，就是一个非常出色的、不言而喻的隐喻：因此，当设计师发现使用隐喻是行之有效的用户教育形式时，隐喻就成了当时流行的设计思路。顺着这个思路越走越远，最终诞生了像 mircosoft bob 这样类似游戏界面的浮夸系统样式，我放出来给各位嘲笑两下。话说回来，使用隐喻这股风潮也影响了控件的样式设计。比如 1988 年苹果开发的一个可视化编程软件 Fabrik，就采用了现实生活中“文件夹上的标签”作为隐喻来设计 tab，此举暗示用户可以快速地在不同页面中跳转，就像现实生活中根据文件夹标签来翻找文件夹中的文件一样。此时我们可以发现，Fabrik 使用隐喻的“tab 选项卡”和 Xerox Star 纯按钮图形化的“tab 选项卡”在样式上开始存在差别。用户无法再从文字上去理解这个控件的交互方式，而需要从图形上去分辨，动用自己日常生活的经验。因此从这个角度上来说，不同样式的控件映射不同的现实物体，不同的现实物体应该对应着不同的交互方式。比如“单项选择”radio button 使用的隐喻，就是收音机按钮。这种按钮按下去一个其他的按钮就会都弹起来，所以每次只能选中 1。而“多项选择”check box 使用的隐喻则是纸质调查表/备忘录上的打勾格子，因此可以选择多个。“按收音机按钮”和“在备忘录上打钩”，都是动态的“事件”，而只有“文件夹里的分页标签”是静态的“事物”，这种隐喻性质之间的差异让人对于 tab 和单选框用途差异作出直觉性的判断。因此因此尽管在 80～90 年代没有引起充分讨论，但系统设计中，一般会把 tab 用作静态页面的导航，而将单选框/多选框用作动态选择行为。以 Apple II（1986 或 1987）为例：相比之下，“菜单”作为最古老的交互控件形式，它的常见样式（下拉菜单）在隐喻流行起来之前就基本固定，可以算为人机交互虚拟环境下一种原生的概念，所以菜单的使用场景反而不受隐喻、不受现实生活中物体的特性影响。它结构简单、有大量空间来写说明文案，因此作为控件的实用性很强，放“静态信息”也没问题，放“动作”也行，有点像一个“收纳抽屉”。混乱的 90 年代～千禧年90 年代到 00 年代计算机/网络行业发展的势头有目共睹，使用场景的不断增长使得页面的复杂性指数级提升。因此交互设计师也就需要去不断地思考控件之间的层级关系、差异、适用的场景等等。这个时代各个大厂制定过许多关于“行为”与“信息”之间的规则，然后又一一将它们推翻。我们仍然以微软 windows 和苹果作为案例，看看他们的尝试。Windows 很快注意到了“行为”和“信息”之间的差异。在 html 那种蓝色带下划线的超链接按钮样式流行起来以后，windows 认为这种按钮看起来“安全、没有破坏力”，“不太严肃”，容易让用户联想起网页超链接那种页面之间的跳转。所以在 windows 7 的规范手册中，指导设计师应该尽量采用带边框、有阴影的按钮样式来承载“行为”。然而另一方面，windows 7 对于 tab/单选框的定位是模糊的。它允许使用选项卡 tab 来替代单选操作，只有被选中的 tab 下的修改才会生效。允许 tab 和单选操作进行互换在业界也有一些反对声音，比如说写 2000 年《GUI 设计禁忌》的 Jeff Johnson 就认为 tab 最好是只作为导航使用，而非选择器，因为这样做混淆了“信息展示”与“行为选择”的差异。最后，文字型按钮的出现，使得用户逐渐分不清什么是“tab”，什么不是“tab”。windows7 时代也出现了纵向排列的 tab。很不巧，windows 的另一个控件 wizard 有着长得很像纵向 tab 的侧边栏。这个侧边栏综合排列了信息导航、功能快捷操作等多种类型的入口。因此“tab”或者类“tab”的组件使用场景被进一步拉扯、拓宽。相比 windows，mac 的做法更加讨巧。mac OS 有单选框，但是他们也同时包含了非常类似 xerox star 原始样式的选项卡视图（tab view）与分段控件（segmented control）。两者虽然看起来一模一样，但从规范的角度上来说，前者负责信息展示，后者负责在单选、甚至多选的动作操作，可以说是非常掩耳盗铃，总体倾向于不区分“选择器”和“选项卡 tab”样式。mac 的这种控件既不使用隐喻，甚者有时也不写文案，要求用户通过控件出现的位置和上下文来判断其用途。之所以苹果敢应用这种简洁中带着些许豪横的设计思路，我个人认为主要是因为其产品比较大众化、场景没那么复杂。扁平化时代与隐喻失效经过了 00 年代控件的发展，10 年以后有两件事情极大地影响了用户的心智。iOS7 带起来的扁平化设计风潮，使得控件整体样式往极简、轻量的方向突飞猛进。原来不同控件的形状、色彩差异很大，用户不容易弄混按钮、单选框和 tab，但在扁平化设计的思路下，所有控件都用方块甚至文字本身来代表，这样做无疑削弱了控件的可识别性。其次我们上文说过，隐喻的运作方式是让用户将生活中常见事物与控件做类比。然而时过境迁，当用户生活中常见的事物已经飞速变化，老旧的隐喻就会失效。文件夹选项卡、收音机按钮……这些东西早就是老黄历了，假如“隐喻”需要事先解释才能让用户理解，那么它就不再能起作用。因此对于很多年纪很小的新用户来说，用选项卡 tab 承载行为操作并没有什么不妥当——毕竟今天文件夹都不太常见了。我们到底该怎么做？先说结论：不要制造没必要的规矩对于绝大多数场景比较简单的产品，菜单/单选/tab 不区分也无所谓对于复杂工具型/企业级产品，无论是移动端还是 PC/Web，最好区分操作/信息展示控件，严格区分单选和 tab 的样式。首先第一条：不要制造不必要的规矩。这条其实有点违背交互设计师的天性，我们天生就受不了含含糊糊的灰色地带。但控件的运用中，贴合场景比遵守某条据说行业通用的“规矩”要重要很多。比如说我听有些设计师的分享里提到他们会比较严格的要求作为导航控件的 tab 上不能放操作，而菜单才是操作的聚合。后半句话我们已经在上文论证过了，没有的事，菜单从诞生之初就放啥都行。对于前半句话我想出示一个案例：这张截图来自淘宝的千牛商家工作台里，这是一个给淘宝卖家的商家后台，它把“发布宝贝”操作露出放在纵向导航（姑且也叫 tab 吧）上。这显然是一个高频操作。在这个案例里，你可以说它还有其他的布局方式和解法，但是要说因为把操作放在 tab 上就能导致多么严重的用户体验问题或者多么严重的控件定义问题，那也大可不必如此夸张。对于大多数 C 端产品，不区分单选/tab，或者在一些定制化程度比较高的页面中用 tab 替代单选是可以接受的。其一是因为无数产品长时间的验证说明，用户在这些比较放松、简单的场景下并没有那么纠结控件样式。其二是因为 C 端产品的“信息”和“行为”其实没有现实生活中那么分明，往往处于比较暧昧，你中有我我中有你的情况中。以“定酒店”为例，“查看酒店的信息”是信息展示，“订酒店”则是动作流程，但用户从哪一步开始转“查看”为“动作”的呢？不一定。最后的最后，工具型/企业级产品不能应用 C 端产品的设计逻辑。复杂场景下（比如 tab 有嵌套关系，比如既有 tab 又有选择器）依然能让用户准确无误地理解控件的意图和交互形式，是交互设计时必须思考的问题。比如在 windows 新的 fluent 规范中，已经绝口不提 tab 和单选框之间的互换关系，tab 被定义为纯粹的导航控件，样式也保持了和单选/多选的差异。开关、复选框和单选组件如何区别应用？看完这篇保证会！在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义....我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/components
图标 控件 声音 这五个核心概念是学习交互与设计心理学的基础，在唐纳德先生的设计心理学中有提到，分别是：示能、意符、约束、映射、反馈。很多没有接触过交互体验的设计师小伙伴们，总有会面临一个坎，那就是看别人做交互和体验的方案总是特别简单，一个流程或原型别人做出来之后，我们心里总会想，那不就是这样嘛？换我也能做，但是只要自己一上手就不行了。为什么？因为我们总是看着别人的结果下结论，而忽略了中间的思考过程。就好像是吃着别人做的番茄炒蛋，你会觉得不就是番茄和鸡蛋一起炒一下，然后放点盐和糖就好了嘛，我们只看到了结果，而忽略了对食材的选择、处理、顺序、结合。示能当我们看到一个控件，你觉得它不就应该在那里嘛，但轮到自己开始做，就压根想不到要去用那个控件，甚至是信息布局、流程节点、整体结构都规划不出来。所以很多 UI 设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的，思考过程也是别人的，而商业设计师的核心是解决问题，解决业务和用户的问题，既然解决问题的角色都是 UI 的上游，那么 UI 设计如何体现价值呢？当然就是把交互体验的核心底层概念搞懂，和交互设计一样从设计侧去思考问题，赋能业务。OK，那么来我们先来讲：示能1. 示能心理学家吉普森将示能描述为：“关于有形物品如何传达出人们与它们互动的重要信息，这个特性被吉普森命名为“示能”。用很直白的话来讲，意思就是：事物通过自己外在的形态，向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是，例如一扇打开的门，告诉人们可以进出、通过。一张椅子，人可以坐、可以靠。假如，你面前有一扇门，门上有一个把手，这扇门告诉我可以利用这个把手与我进行互动，你可以用手、可以用脚，也可以用舌头，但手是最方便的。如果只是单扇门，那么我们可以利用推或者拉的动作打开，但如果是两扇门并排，两个把手在中央靠近，那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧，那么意思就变了，变成了将门侧滑后才可以通过。那门为什么要设计成不同样式来展示不同示能呢？这个留给大家思考，这三种门设计的初衷是什么。在我们数字产品中可以有什么体现呢？例如一个开关控件（switch），开关本身具有两种互斥的属性和功能：开/关、启动/禁用，看到开关控件的外在样式，我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。开关在现实生活中的表现样式有很多，例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等大家别看开关看起来简单，但是在设计起来会遇到不少的问题，因为状态和意符形态在我们日常中过中很难成为一个标准，例如最常见的一侧翘起的开关，如果不加意符，我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯，那么很简单，我闭着眼睛去按就行了，灯灭着那肯定就是关，再按一下那就是开。但如果在客厅中有多个并联的开关怎么办，一个灯可能收到 2 处甚至 3 处开关的控制，而每处开关的数量会在 3-5 个，这个时候不用意符去标识，就很麻烦了。回到数字产品上，开关的示能就简单多了，有颜色的状态表示开，灰色状态表示关，但是开关控件在刚用在数字产品上的时候，很多人经常误以为是滑动交互来控制开关，虽然滑动也可以，但本身依靠更简单的点击触碰就可以了。但如果控件做的很长，那么滑动的示能就会更明显。开关比较让人产生歧义的地方来自于意符，因为很多新人将一些控件的属性认为是有重叠关系，可以混用的，那就大错特错了，等会讲。2. 反示能和示能相反，指的是任何物体之间不能进行怎样的互动。例如我们经常做的人体工学椅，你可以靠坐在椅子上，并把手放在扶手上，但你无法在椅子上蹦跳，因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏，它本身不具备这样的功能。再比如我们裤子的口袋，设计师通过设计他的形状、大小、材质，帮助我们去盛放一些小物件，例如钥匙、手机、卡片，但是笔记本电脑你塞不进去，一头猪更塞不进去。数字产品中也会遇到一些有很明显反示能的控件，例如 segment Controls（分段控件/分段选择器/分段选择控件），它是 iOS 的原生控件之一，该控件的反示能就是无法通过左右滑动界面切换不同标签的视图，和 tab 不同。高手帮你学规范！iOS和Android规范解析之标签导航和分段控件从今天开始，将介绍iOS和Android设计规范中关于导航的部分。阅读文章 > 并且在该控件的描述中，seg 通常数量只能在 5 个以内，并且 5 个标签分别属于同类型的数据分割，只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。那有没有一种可能，或者一个场景需要这两种控件同时具备一些属性呢？是有的，例如这样在标签下是列表，而列表也支持轻扫的交互进行删除，如果使用 tab 则会产生冲突，而使用 seg 则在视觉上太重了，和产品调性不符。那么我们可以在示能上做一些调整，让这个控件看上去不能左右滑动，又不至于太繁琐。所以反示能将告诉我们，事物有哪些不具备的功能。同时反示能也是相对的，遇到多样化的场景和业务需求时，我们依然要学会变通。3. 不同场景中示能的变化一张桌子放在教室中，我们知道它是用来学习的，桌面上可以放书本、笔等，如果一个桌子放在户外，并且靠着墙壁，墙壁上有个洞，那么这个桌子当前示能表示为什么呢？一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕，但是如果不穿上衣走在马路上估计很多人会骂他变态。下方图标+文字形式的一个按钮，放在卡片的左侧和右侧大家感知一下，表现出来的示能有所区别。左侧更像是这个模块的标题，而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例，放在不同位置的 3 个点小图标，所表达的示能相差巨大。再例如红色在弹窗中显示给人警示，但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外，也要考虑到场景的影响。4. 相同示能的不同表现方式与含义这里有一个概念叫做同构异型，说的是结构相同，形式不同。例如我们经常用到的 tab 与其视图的呈现，tab 的本质就是利用多个标签来切换标签下的视图，所以标签除了用 tab 的形式，还可以用下拉展开成为菜单的形式，只不过一个是平铺，一个是点开后再列表选择。再举个例子，例如筛选控件，如果我们需要一个实时筛选的功能，那么我们一般会这么做，在 b 端 web 设计中，会将一系列筛选条件横向摆放，每一个筛选条件都可以下拉展开进行筛选，但如果迁移到移动端中，因为横向距离受阻，就会纵向标签展开式的筛选模式，从结构上来说，这俩方案其实是一样的，都是在多个筛选条件中分别筛选出不同的标签。再例如一个父子集共生的内容卡片同构异形在设计样式上会有很多种，例如列表，例如上文说到的单控开关，虽然样式很多，但原理上单控开关都是一样的。对于初学者来说，不同控件理解的比较片面，所以就会导致一些控件的使用错误。说到同构异形那就不得不提到同形异构，例如一块素牛肉，外观和红烧牛肉一样，但是它是豆制品。我们再来看下面两个模块，根据整体来判断，两边的加号都是反映出可以点击添加的示能，但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签，添加完后会显示在相关的区域，添加按钮不变。这里可以用一个比较形象的比喻，我有 4 张椅子，其中 3 张坐了人，第四张椅子的示能为：只要这张椅子坐了人，边上就会出现新的椅子，最多不超过 8 张，如果没有人坐则只显示一张椅子。但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口，就好像是第四张椅子上面坐的不是人而是套了一个大箱子，椅子不见了，原本应该和其他内容保持一致的外观也不见了，出现了一个新的东西，出现了新的示能。所以如果我们要按照第一种规则玩，那么这里就不能套箱子，如果要放箱子，就需要放在其他的地方。所以，初学者要警惕同型带来的使用误区，有时候长的很像的两个人，可能完全没有血缘关系。小结示能的概念大家已经了解了，对于我们设计师来说，尽量去搞懂更多事物在不同场景中的示能和反示能，需要解决问题的时候可以针对性的运用各种方案。意符1. 意符的类型与表现形式示能决定可能进行哪些操作，意符则点明操作的位置以及如何操作。设计师往往会说，我设计了一个很好的方案，它将告诉你产品的用途，但是用户却不知所措，虽然知道产品就在那里，但无法下手，因为意符不明确。例如我们最常用的人体工学椅，可以调节高低和后仰角度，调节的控制器是两个把柄。如果没有意符加入，我们经常会记不清哪一个控制器控制的是后仰角度，哪一个控制的是座椅高度，需要去做更多的尝试。所以意符告诉我们对事物的正确操作方式以及任何可感知的标识。说白了就是一个能够表达事物具体操作的符号。在日常生活中，双开门通常在商场、大型会议场馆内看见，因为考虑到人流量比较多，于是在门上就会出现推/拉两个文字意符，避免两侧的人同时推或者拉，引导人们正确通行。我们可以使用推/拉，但不可以用“按”，因为我们无法通过“按”的交互来操控门的开关。如何判断一个设计是否优秀，那么我们会观察其本身的示能和意符传达是否自然，如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计，例如在两扇透明的玻璃门上再添加推/拉的标识，就显得有点多余了。再例如切换短视频和翻页电子小说，我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义，所以就不要画蛇添足。OK，它的表意大家已经清楚了，那么在数字产品中，意符有哪些类型和作用呢？它们又可以帮助用户解决什么问题，我们来看一看。意符的类型文字文字意符是最常见的一种类型，利用文字描述来说明如何进行交互操作，但是中文文字博大精深，不同的描述给人的理解和感受完全不同。案例 1：开关开关控件单独拎出来不具备完整的含义，必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关，并且需要相应的文字描述来解释开关控制的内容是什么。这里的文字就是意符，用来解释开关的作用。开关本身具备的含义中是有这样两条原则：需要让用户感知操作后立即生效开关所属文本必须简单清晰无歧义所以咱们可以看下方的案例。当我们将文本描述为“不打开（关闭）则不再进行消息数字提醒”和“不接受推荐”后，会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述，不要用双重否定等描述方式。默认描述为打开后的状态描述。再来拓展一下，我们会发现其实依然还有产品中的开关文字意符用了非正向描述，那按照你的说法不就错了吗？我们来看看小红书和微信的权限开关，这里分别是隐私设置和权限设置。这里理解起来会有点绕，大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述，没有问题，如果换成反向描述就会变成“不关注我的人不能评论我”，结合右侧的开关，逻辑层面就要多加一个双重否定的理解，所以这里的用正向没有问题。接下来看下面的关系设置：不把我推荐给可能认识的人，诶这里用了反向描述，大家来分析一下，这里是否合理呢？首先小红书在新下载应用打开时会向用户进行授权，为了帮助用户发现更多渠道的好友，所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐，同时也会将我的信息推荐给认识的人，这样产品的活跃度、用户的曝光会提升。那么大家再来品一品这两句话：1.“不把我推荐给….” 2.“把我推荐给….”前者比较含蓄，后者则更主动，中国人的关系总体来说就是比较含蓄的，就好像是你可以给我推荐，但我不会主动要求，更何况像小红书这样的社交平台，“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。不知道这样的说法大家是否可以接受。再来看微信：不让他看和不看他。微信这个平台想必我不用多说，既然是熟人社交更多，那么默认肯定是全部开放，而有特殊需求才需要进行隐私设置，所以默认状态为不让他看-开关关闭，意思是我没有打开这项非友好的选项。那为什么会出现有的开关默认打开，有的开关默认关闭，还可以使用反向描述呢？我总结了下，如果涉及到一些隐私和权限的内容，一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开，例如视频播放结束自动播放下一个视频这样的设置。开关文字意符的描述方式还有几种不同的方式：内容标题+开关切换后状态与内容变化的描述第一种类型也就是上方说的案例，但是要注意的是，在描述状态变化的时候，文本要正向、简单的描述，例如开启后，接收 xxx 消息，而不要写成关闭后，不接受 xxx 消息。功能直接描述不添加说明文本，直接展示功能标题，例如微信听筒模式、消息设置、提醒等，直接用开关控制这些功能的打开和关闭，属于功能设置。还有一种是授权，例如允许他人查看我的收藏，对他人行为的约束，但不能描述为不允许他人查看我的收藏，因为刚才我们总结了，如果对于一些隐私权限的设置默认需要关闭，那么加上正向描述就不能使用“不允许“。批量整体描述对于同一种类型的功能设置，可以利用批量的形式做整体描述。再来看一个例子，示能在不够清晰的情况下，文本意符用来辅助对当前内容/状态的解释。例如 b 站在浏览内容的时候会出现“刚刚看到这里，点击刷新”，或者当我们在浏览信息到一个页面底部时发现无法继续滑动，会出现一行文案：我是有底线的，说明内容全部展示完毕。文字意符很直观，但也要避免歧义。图形/图标图标在某种程度上当作意符使用的频率会更高，虽然某些图标表意不明，但是因为简约、美观、生动、普适性强的原因，所以很多地方倾向于用图标，例如公共卫生间、商场的扶梯、通道，通常会用图标来代替文本，或者强图标+弱文本的形式。既然咱们要说图标意符，而且要突出图标意符的作用，那就必须有个前提，那就是抛开其他的变量、因素的影响，图标意符究竟有什么神奇的魔力。例如我们常用到的列表，很熟悉吧，接下来我将用图标来让这个列表的示能产生变化我们发现，只有文本的列表，示能不明显，而加上图标之后就很明确了，甚至加上不同的图标，示能也随之变化了呢？刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。这些其实是很简单和基础的概念，但是很多工作多年的 UI 设计转交互体验的小伙伴就经常遇到这些问题，大家总是在问 UI 和交互的区别是什么，其实本质上它俩都是一个界面设计师必备的能力，不能拆开来谈。我们再来看一个例子，播放/暂停的图标，用来控制音频/视频的播放与暂停，在实体播放器上，我们能看到播放和暂停往往集成在一个按钮上，例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上，因为数字产品的图标是可以变化的，当前状态和切换状态可以有两个不同的意符表示，那实体播放器做成两个按钮就太多余了。还没完，当我们在观看视频的时候，界面中会显示暂停按钮，意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态，而不是当前状态。但其他图标表示的意思却又和开关相反，例如横竖屏切换、收藏、点赞，显示的就是当前状态，而非点击后状态。为什么不一样呢？因为暂停/播放相当于一个按钮，用来控制视频播放，这里存在着一个控制和映射的关系，然而这里的暂停和播放按钮的示能是相反的。暂停图标的示能表示当前正在播放，而播放图标的示能表示当前已暂停。所以它和开关也不同，开就是开，关就是关，点赞图标的原理就如同开关。还有例如打开和关闭声音，看起来声音播放/静音有点像视频的暂停和播放。例如腾讯视频这里的视频声音控制，当前静音为声音关闭图标，而不是打开后播放声音的图标，我们再看 iOS 系统的里声音控的样式表现，说明当前声音为开启则显示的是开启声音的图标，经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。那为什么会不一样呢？其实我也看到过一些声音图标和这个案例是反着来的。两个原因：1. 因为视频的打开和关闭只有两个状态，但是声音不同，声音在打开的时候还可以调节音量啊！如果和视频播放一样，在播放的状态下显示的是静音的图标，那么音量调节就会变成这样：是不是就很奇怪了，明明是正在播放的状态，显示的居然是静音的图标2. 暂停和播放的本质并不是开和关，而是中断和继续，在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭，如果我在声音边上加一个开关是不是就能弄清楚，为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗？图标意符可以单独使用也可以结合文字使用，图标虽然有优点，但也有缺点，如果单独使用也需要注意使用的场景，比如举个例子，同样是放在导航栏的两个图标，但是在不同的界面中，大家可以感知到该图标的含义吗？它的示能和意符相结合成为了一个图标，但不够明确，在不同场景中如果没有文字意符的辅助就会不够明确。图形可以辅助表意，也可以用来指示区域，例如我们经常开车，会知道马路上会划分实线、虚线、虚实线、潮汐车道线，示意车辆可以在哪些区域行驶、以及形式的规则。我们在医院拍胸片的时候，胸片机器下方也会指示人应该站在什么位置，用一个方形的框框起来，或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要，例如我们设计一个按钮，只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的，后者的点击信心会更大，有了区域的划分就有了明确的操作界限。颜色颜色意符很好理解，通过色彩来表达如何与事物进行交互以及辅助表达。无论是实体产品或者数字产品中，警示的颜色大部分会用红色或者橙色来表示，例如在进行信息检查时，错误信息会被用红色样式标注出来，既告知用户出了什么问题，又提示用户在哪里出现问题。而需要热闹、活泼的氛围也会采用红色等暖色来衬托，因为暖色更加的醒目。有时颜色也是物体示能的一部分，例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观，表示在紧急情况下可以使用，但不要轻易使用。绿色表示安全、自然，但也有一些特殊场景下的不同感知，例如金融行业不太喜欢绿色，男士不太喜欢帽子使用这个颜色，除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。在数字产品中，色彩除了表示一些特殊的含义，也可以用来作为信息区分，在选择观影位置的时候，可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。声音声音意符就更有意思了，人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样，而我举个例子，就能把大家带回到童年。你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗？一个咳嗽声表示有人申请加你好友，一个敲击木头的声音表示有人上线了，一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效：滴————。你们会发现我怎么能打出有声音的文字，仿佛你们已经在听了。声音为什么很重要，因为人类的五感是在共同作用的，我们除了可以通过声音来判断事物本身，还可以用声音来感知当前行为的状态，例如打开手机的键盘输入音，这样的打字反馈更真实更有质感。还有在游戏领域我们经常会提到的打击感，当人物的武器打击在怪物身上，但声音并没有及时反馈，而是延迟 1 秒，这时候你就会觉得没有什么打击感，除了声音反馈，打击感的意符还有很多，例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。动效动效也可以成为意符吗？它能表示什么含义呢？动效也是意符中非常重要的一种类型，他在我们日常生活中也用到的非常多。例如我们看到理发店门口正在旋转的彩色灯。这里也顺便给大家讲个小历史，理发店彩灯的由来：在中世纪欧洲，人们认为放血疗法对人的健康又很大的帮助，但是一般都由宗教仪式中的神职人员操作，到了亚历山大三世，他把这项工作交给了医生，但是当时的医生不愿意做这种下等人做的事情，便委托理发师来做，于是理发师就成立了理发师外科医师联合会，三色柱就是活动的标志，红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期，一家理发店是革命党人根据地，一次危险的活动中领导人在理发师的掩护下逃脱，最后为了表彰，允许他们用红、白、蓝三色的国旗作为标注，最后演化成了旋转灯，各国效仿。好了，题外话说完，我们再回到动效。如果你看到三色灯正在旋转，说明这家理发店正在营业，如果静止则说明停业，或者坏了。是不是很简单？那么在数字产品中，动效意符还有哪些作用呢？我们一一来盘点一下：1. 降低用户认知成本我们通过设计界面的转场、控件的唤出动效，告诉用户你将从什么地方去往什么地方，和你有关的控件是从哪里来，你可以怎么控制他。当你进行过交互行为后哪些内容变化了，它们是怎么变化的。这就好像你等的 45 路公交车从远方朝你慢慢行驶过来，停在你的面前并打开了车门，你选择了上车然后看到阿姨捧着电饭锅，拉动气门，接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。所以一个好的动效能让你清楚事物的发展过程，以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时，添加菜品会有掉入外卖箱的动效，这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导，告诉你虽然文章在收入交互动作的结束是在右下角，但如果你想查看所有文章需要返回首页，在页面的左上角才能找到。2. 引导/提示/强化对于一些新人须知或者内容隐藏的部分，产品通常可以通过一个小动效来引导用户这里有新内容，例如淘宝二楼、印象笔记功能图标的切换、活动入口等等3. 氛围、强化视觉电商、直播界面中，有非常多的元素都是利用动效来刻画氛围和效果，刺激人们的感官。4. 表示状态当你在手机解锁的状态下输错密码或者在氪金时输错密码，输入框都会进行左右晃动来示意，老铁，这真的不对。5. 更多意符意符不局限于我列出的一些类型，我再举个例子，在一个不起眼的转角处，那里空无一物，就是很普通的一块空地，但如果那里被丢了一袋垃圾，那么这里就会出现越来越多的垃圾，因为第一袋垃圾就是一个意符，告诉别人这里可以丢垃圾，于是很多人就会把垃圾丢在这个角落里。很多人会觉得示能和意符好难区分，示能不是也包含意符吗，其实我们可以这样理解，在整个交互过程中有物体和操作者这样两个对象，物体本身表达的是示能，但它不具备沟通能力，而意符才是链接操作者和物体两者的桥梁，虽然我们平时往往看到的都是示能+意符的状态，但是我们也要区分本体的示能和用来沟通的意符两者的区别。小结意符和示能不可分割，设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多，所以我们在学习意符正确的时候方式时，首先要了解意符本身的“示能”，从而将意符更巧妙的结合在事物中发挥其正确的表意作用。设计师在设计意符的时候也要尽可能的多了解产品使用者（用户）的背景，意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了，但是使用者并未接触过、不理解，说明该意符依然不合适。万字干货！15个著名的设计心理学原理和应用深度解析！“除非有更好的选择，否则就遵从标准”你是否有在听别人说某某原理法则时一脸懵 B 的时候？阅读文章 > 欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/signification
按钮 控件 对象 设计心理学中的第三个交互设计概念：映射往期回顾：万字干货！5 个设计心理学核心概念：示能与意符这五个核心概念是学习交互与设计心理学的基础，在唐纳德先生的设计心理学中有提到，分别是：示能、意符、约束、映射、反馈。阅读文章 > 同样，这个概念也要结合示能和意符一起来思考。诺曼先生在设计心理学中提到了映射这个概念，但是比较精炼，对于初学者来说只能有个大概的了解。所以今天我们继续用更多的案例来说一说这个概念在我们数字化以及生活中运用的实际场景。这虽然是交互基础的概念但对我们设计师来说也极其重要，概念虽然很简单，但实际在设计中也会频繁的遇到问题。我们先用比较正经的文案来描述一下这些比较“枯燥”的概念，映射是一个术语，从数理理论借用而来，表示两组事物要素之间的关系。（书中诺曼先生的原话）上两篇文章我们说的示能和意符，表示了事物本身具备或传达的功能和被交互性，而映射则是表示了控制器和被控制对象的关系。好的示能和意符的设计，可以让映射变的自然。第一篇示能我们举了一个开关的例子，多控开关之所以让人抓狂首先是缺少了意符的表达，其次是映射的不合理。就如同我们在书中见过的一个煤气灶的案例，4 个灶头下方有 4 个控制开关，左右两种不同的排列方法，体现出好的映射有多重要。映射的三种层次诺曼老师在如何设计映射中提到，自然映射设计可以分为 3 种层次最佳的映射：控件分布在被控物体的主体对象上次佳的映射：控件与被控对象相对更接近第三佳的映射：控件与被控对象在空间分布一致这三种映射的层次在体验中的满意度与效率一次递减，我们依次举例说明1. 控件分布在被控制的对象上例如门把手在门上，我们就觉得这映射设计的很自然，通过转动把手可以对门进行开和关。再例如我家的洗衣机上有一个用来选择洗涤模式的旋钮，洗涤模式围绕在旋钮的周围，旋钮上有光点，旋转旋钮光点就会旋转到我们需要的洗涤模式上，这也是控件与对象一体的形式，满足用户对控制器与被控制对象的心理预期。那在数字产品中我们也会遇到类似的情况，例如我们想展开放置在一个卡片中的文字，我们通常最好的方式是在文本的边上设计一个提示展开的“可点击按钮”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的区域，因为映射关系逐渐减弱到无关。再举个例子 iOS 系统中如果要调节音量，可以在音量模块中直接通过手指的滑动来调节，而不需要在模块中或者模块外部加上两个用来增减音量的按钮。不过说实话，华为的曲面屏双击侧边唤出音量控制模块，个人觉得成本还要比物理实体按键更高一点。除此之外，智能手机在逐渐演变进化的过程中，手势操作功不可没，利用手势代替按钮也节省了更多的成本并且在效率方面也得到了提升。例如视频播放器的应用中，会有相应的控件用来控制视频的播放、暂停、声音、进度、亮度、横竖等等，这些按钮其实就是最佳的映射设计2. 次佳：控件与被控对象更接近这个也就是我们常说的格式塔心理学中的接近原则，因为越靠近越相关，很好理解。某些物件在设计时无法将控件和被控对象结合设计，那么我们只能退而求其次，让他俩能更靠近一些，在映射关系上可以更清晰。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 接下来我会给大家看我家的冰箱和电饭煲的操作界面，大家就知道，次佳的映射如果不好好设计，也会显的很糟糕。如图所示，其实界面的信息设计无非就是这样，如果你可以把这些界面的信息设计的有逻辑有层次，那么在其他的用户界面中也能够如法炮制。例如电饭煲的烹饪模式和其对应的按钮，都是通过点击多次按钮进行控制，而不是在单独的模式中具有单独的按钮，而最好的方法那肯定就是想选什么模式直接选，而不是做一个按钮来多次切换。这里是因为本身这款电饭煲没有智能面板，所以通过物理按钮只能这么做，否则，按钮一多就更难操作了。那有小伙伴问他能不能和洗衣机一样做个旋钮呢？当然也可以，因为旋起来也比多点几次按钮来的方便，只不过旋钮做上去之后其他的按钮可能也要变成旋钮，在产品设计上就有更多的问题要探讨啦。所以我们再来看它的按钮分布，发现其实控制按钮和被控制的参数缺少了距离关系，当你看着想要控制的参数却找不到控制按钮的时候就会比较抓狂，因为在这个布局中既没有满足最佳也没有满足次佳，甚至连在空间分布上也无法产生对应。然后我们再看这个电冰箱，这个西门子电冰箱的用户面板我也属实没有看懂，但距离关系已经做的比咱电饭煲要好一些了，至少左右两侧的按钮应该是控制左右两侧不同的温度。左右两侧分别是冷冻和冷藏的设置，但是中间只有两个温度，一共 4 个按钮和两个温度，这显然在自然理解下是不能理解的，这就和艾尔登法环里的 boss 们的关系一样混乱，那 4 个按钮为什么只有 2 个温度呢，因为左侧的两个按钮分别是切换不同的温度设定，而右侧的一个按钮和温度并没有任何的血亲关系，因为它就是一个锁！不仔细看还以为它是用来控制温度的，因为和其他三个按钮太像了！这不就是在滥竽充数么。这里的两个案例我们发现，在次佳的映射中，其实就对格式塔心理学里的原则应用的比较多，为了让控制器和被控制对象的关系更紧密。大产品小细节！5分钟了解格式塔原则金蝶云之家体验部交互设计师-王梓铭：这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。阅读文章 > 3. 控件与被控对象在空间分布一致在某些场景下，我们是无法通过设计让控件与对象满足 1、2 两个要求，所以就会有第三种，在空间分布上一致，例如在一个大空间中的灯与开关，开关不可能做在灯本体上，也没有办法让它俩靠的更近，所以只能在空间分布上更加一致，才能够让映射关系合理。其实数字产品的用户界面设计，基本上我们可以做到 1、2 点，因为本身区域有限，控制器和对象也几乎在弹丸之地互相映衬，大部应用的控件操作起来也都很简单，但是不外乎一些较为复杂的工具类产品，例如车机系统，通过中控屏来控制车辆的一系列功能例如：空调、座椅、车窗等等，那我们也发现其按钮的分布也是满足了这样的交互映射，将物理按钮变为虚拟按钮集成在中控屏幕中，为了让用户更好的映射出它们之间的关系，于是我们就需要利用空间分布的关系，来让用户明白，按钮与控制对象的关联逻辑。例如在特斯拉的 UI 界面中，将整体分为 3 块区域，左边是形式仪表右侧是多功能区域底部则是车辆相关的控制功能，你想控制前后车灯，那么按钮就会在车辆模型的前后两侧，如果你想打开空调则在底部工具栏的中间即可打开，如果你想给座椅加热那么也可以像图片中那样在 4 个座位的图片中进行交互就可以实现。这样的设计让控件与被控制的对象能够远距离在控件上形成一个映射关系。还有在日常生活中，大家家里是否用过升降式晾衣架，通过旋转把手来操控升降，这里其实也很难应用到空间部分，因为两者所处的平面不同，就更加无法对应起来，有没有一种比较好的方式来解决这个问题呢，我觉得可以用颜色或者标记来做映射的对应。所以为了映射的相关性、同型、同色、靠近等方式都可以用来提升二者的相关性。映射在数字产品中的应用数字产品中的映射也是关于控制器和被控制对象的故事。数字产品中也有不少的控制器我们就称之为控件，例如一个图标按钮、一个下拉列表或者一个滑块，它们都有各自的控制对象。而我们常说什么样的设计满足用户心智，指的就是让用户觉得当他操控控件后带来的结果与反馈是他预期之中的，这就会让其觉得是合理的、自然的。1. 案例 1例如在这个案例中，设计师其实是想通过按钮来控制车中相关的功能，但是大家能发现问题吗？映射的前提是控件要先满足示能和意符的表达，其次再通过映射告诉用户，谁控制谁。但我们发现这个界面中的按钮其实在示能和意符上出现了歧义，例如热车的图标，我们通常认为这样的宫格形式布局都是以入口形式存在，点击后会进入下一个界面，但是设计师在这里其实把一些情况搞混了。所以我们仔细看，这些图标就像是电饭煲上的按钮，只要点击就会触发车辆状态的变化，相当于一个开关，咱们先不说这样的设计是否方便用户，我们看映射就会发现用户其实很难做到空间布局上的对照，从而更高效的来对车辆进行控制。并且也存在一定的逻辑错误，例如热车和解锁是什么逻辑，车窗开到一半想停止怎么办，空调要调节冷热和温度怎么办，所以这里不再单纯的是一个开关集合的区域，会遇到很复杂的情况。2. 案例 2我们再来看一个案例，其实在数字界面中很多映射并非有直接对应关系，而是需要用户通过交互来触发。在下面的界面中，是一个课程的详情页面，用户可以发布自己的学习笔记通过音频的方式发布在该页面中，而底部的工具栏在当前的设计中就会出现映射相关的问题。我们既然要发布音频那么我们有这些问题可以提前预设好需要有什么控件来控制吗？例如一个按钮那么这个按钮是点击后松开再开始录音，还是需要长按开始录音，亦或者点击之后进入一个编辑页面，再通过录音或者上传音频的形式来编辑呢？点击麦克风录完音频后页面会怎样显示？能否试听、编辑，边上的输入框和麦克风有关吗？我可以直接输入文字再点击发布吗或者直接点发布会出现什么呢？等等不管如何我们需要有一个入口，所以这个入口比较关键。通过这个入口（按钮）来触发上传音频的整个交互流程，它也是一个映射关系，只是没有全部展开，因为这里无法展开。有同学想问，为什么不能展开呢？其实这个很好理解，就像我们做登录和注册的时候不会把两个流程做在一个界面中一样，造成页面的复杂、不兼容。所以如果这里不需要音频以外形式的发布内容那么就无需把麦克风、输入框和发布按钮拆解开来做，造成了没有必要的浪费。一个按钮可以作为一个入口来开启一个单独的任务流程，但是如果这样拆解开那么任务流程就无法再高效的完成，并产生很大的歧义。数字化产品的映射往往是线性的。3. 案例 3再说一个类似的案例，这个也是小伙伴做的一个界面。初学者的问题就比较明显，在于他们没有分步和阶段性控制的概念。总想着一个界面能完成多个任务，当然在这里也没有考虑好映射怎么做。从这界面我们能很明显的看出来这其实是一个发布的界面，从外部一个按钮中进行跳转而来的。如果让你去评价你会怎么说，是不是哪里都想说一点，好像里面的信息、按钮、功能就不应该在这个界面？你可能会有这些问题：怎么把视频、音频、图片做成 tab，选择不同的类型去发布？点击录制后音频会出现在哪里？录好一条后录制按钮还在不在？录好一条后我切换到图片再传一张图片再点击下一步会出现什么？点击草稿箱又会进入什么界面？我什么都不操作直接点下一步会怎样？这些问题都将困扰我们完成一个发布任务。将一个交互流程做清晰，就需要让用户有一个清晰的功能映射。所以点击发布后，按钮应该要先控制发布类型这个对象，让用户选择发布类型，然后再跳转出对应类型的发布流程。总结映射在交互体验的设计中也是很重要的概念之一，要结合示能和意符一起思考。同时剩余的概念我们也会在下期一起分享给大家，对于初学者来说，这些概念很重要，在我们设计案例的时候务必要时刻思考与结合。用一篇超全面的文章，帮你掌握「旅程映射」的知识点旅程映射创建了一个完整的体验视图，正是这一过程将不同的数据点聚集在一起并进行可视化处理，以了解产品需求，从而可以吸引各个群体中不感兴趣的利益相关者，并促进协作性对话和变革。阅读文章 > 欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/mapping
文章 设计师 控件 就在上周六，刷微博时一条微博引起了我的关注：这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。在这则英文通稿里，Figma 明确表示，由于大疆出现在美国的制裁企业名单中，所以 Figma 依照美国法律，不再为大疆提供软件服务、技术或数据。在此之前，Figma 官网也出现了一个完全关闭俄罗斯服务的投票，赞成票数高达9800多：截图来自公众号：超人的电话亭虽然官方表示制裁结束后会解除封禁，但这一政治立场明显的举动，无疑推翻了人们对它所有的信任。更为讽刺的是，Figma 官网赫然写着：我们的愿景是让每个人都能接触到设计。对于 Figma ，优设早在17年就有过评测，作为一款即开即用且实时协作的设计软件，它的出现让人眼前一亮。之后优设网陆续发布过不少 Figma 的教程和插件，即使经常被吐槽网络不行，但疫情带来的工作方式的转变，让它依旧成为不少设计团队的主力工具。不过可以肯定的是，这次制裁表态让 Figma 永久失去了中国市场。身边不少喜欢Figma 的设计师都表示立刻停止续费。与之相对的，是一众对标 Figma 的国产软件大放异彩。在确认制裁消息后不久，国产设计软件「即时设计」就发布紧急公告，承诺所有企业和设计师不仅可以自行通过即时设计官网自行导入文件，还可以通过企业微信联系「即时设计」进行批量迁移，也可以直接导出为 Sketch 文件，收获了一大波好评。老牌软件厂商蓝湖的新产品 MasterGo 也紧急上线了 Figma 文件导入功能：虽然国产软件研发时间长度不如Figma，但在使用体验上，丝毫不亚于Figma，在细节上甚至更胜一筹。与 Figma 相比，你不用担心看不懂英文，也不用担心网络崩溃，而且还有很多针对中国设计师的功能，比如你可以在即时设计上直接管理素材、复用大厂的设计组件库等。这两个软件优设网之前也都有过详细的介绍，感兴趣的可以看：即时设计：为什么都在推荐这款设计工具？它究竟比 Figma 好在哪里？编辑推荐：过去的几个月里，「即时设计」这款存在感爆棚的新形态国产设计工具吸引了太多设计师朋友的关注，也让很多人对于“它和国外的 Figma 到底有哪些差异？阅读文章 > MasterGo：蓝湖放大招了！憋了一年的免费设计神器「MasterGo」正式发布！Sketch 从发布至今，已经成为 UI 设计的主流工具，但包括我在内的不少设计师，越来越意识到，Sketch 不方便的地方太多了，特别遇到大型迭代项目，沟通的成本极高，顺手举例：1）多人负责一个需求时，需要用最传统的方式，一个人修改完打包好源文件，再发给另一个人，效率极低。阅读文章 > 但无论云端服务多么稳定，我们依然建议大家准备一个移动硬盘，随时将重要的设计文件存在本地。有条件的设计师，可以直接搭建NAS。这件事发生后，有网友发现 Adobe 也早在3月5号就宣布全面停止在俄销售。原本以为设计无国界，没曾想覆巢之下无完卵，这则消息更引起了设计师们的焦虑。取代 Figma 简单，但 Adobe 深耕设计行业多年，PS 甚至成为了修图的代名词，如果哪天这把达摩克利斯之剑落到中国头上，对设计行业的影响可想而知。好在也不是所有设计软件都选择了战队。知名3D设计软件 Blender 就发布公告 —— 不会禁止俄罗斯用户使用，将捍卫艺术家和开发者的自由。可以预见的是，未来中国崛起的过程中，肯定会迎来愈加频繁的制裁，所以之后优设网也会针对国外各类软件，推荐对应的国产版，给大家一个保底的Plan B。不过风险中也藏着巨大的机会，正如优设网专栏作者龙爪槐守望者在设计圈里提到：这件事情会让很多企业重新评估使用国外工具风险，从而选择购买和采用国产软件服务，因此 ToB 产业会更加繁荣，建议设计师多储备相关知识技能，应对未来的行业变化。围观完整设计圈 https://www.uisdc.com/group早在2020年，优设网就有意提高了B端设计类文章的数量，因为目前C端的体验设计已经卷到不行了，而B端依然是一片蓝海。由于两者的设计思路迥异，如果想转B端，建议先把优设网的B端相关文章都尽可能阅读一遍，做好笔记。在这里也推荐一个完整的B端设计自学系列：超详细！总监出品的B端设计规范指南（一）：布局在 C 端设计中，不管是给车载客户端、手机客户端、电脑客户端设计界面，都有比较具体的规范需要我们学习和遵守。阅读文章 > 超详细！总监出品的B端设计规范指南（二）：字体[link https://www.uisdc.com/b-side-design-specification]第二篇，我们就要回到 UI 整个类目里最麻烦，也是最重要的规范类型——字体。阅读文章 > 超详细！总监出品的B端设计规范指南（三）：配色B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。阅读文章 > 超详细！总监出品的B端设计规范指南（四）：控件第四篇我们全面认识一下B端的控件设计。阅读文章 > 超详细！总监出品的B端设计规范指南（五）：控件下面，就回到我们之前停摆的控件讲解，继续认识控件有关设计的内容。阅读文章 > B 端设计指南（六）：数据图表怎么设计？基本的控件单元完成后，下面就要开始介绍 B 端设计的另一座大山，图表的设计了。阅读文章 > 总监出品的B端设计指南（七）：常用图表的设计和应用上期介绍了图表设计，这期继续分享图表设计和应用的相关知识。阅读文章 > 关于Figma 的消息暂告一段落，之后的文章我们会详细聊聊，有哪些国产软件可以作为Adobe 平替，敬请期待~本篇来源：优设网原文地址：https://www.uisdc.com/figma-disappear
按钮 容器 控件 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。按钮几乎是每一个页面不可或缺的元素，对于按钮的认识基本停留在视觉层面，一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。视觉是一个观察的切入点，但仅停留在视觉层面还是不够的，比设计表现更重要的往往是背后支持设计的理由。本文中的所有案例均来自线上产品，观点仅是个人粗浅的理解，有疑问的地方欢迎大家讨论指正。按钮的定义1. 按钮的来源数字世界是现实世界的一种映射，许多数字概念，都可以在现实世界中找到原型。按钮就是很生动的一个案例。在视觉表现上贴近现实生活中真实物体的外观，拟合用户心智模型，降低用户的认知和理解成本。2. 按钮的定义如果从视觉形式上看，按钮的组成很简单，一个矩形容器加上文字或图标即可组合成一个常见的按钮，但是仅仅从视觉层面定义按钮是不严谨的。按钮是一种重要的控件类型，而控件是图形用户界面（GUI）的主要构成模块。想要深入理解按钮，就必须要求我们首先理解什么是控件以及控件的分类。3. 控件分类和介绍定义：控件是用户和产品间进行交流的屏幕对象，是图形用户界面（GUI）的主要构成模块。分类：根据用户目标，可将控件分为 4 大类。每一类控件下又有更多具体细分。所有界面中常见的具体控件都可以根据其功能找到所属的类别。4. 按钮的分类在以上各个细分控件中，我将部分控件归入按钮类别：命令控件下的：传统按钮、图标按钮、文字按钮选择控件下的：开关按钮、单选按钮、组合图标按钮、状态切换按钮（开关和复选框样式比较固定，为了方便讨论，姑且不算在按钮范畴之内）因此如果以按钮为主体，以功能属性为分类条件，可将按钮分为：命令型按钮和选择型按钮命令型按钮与选择型按钮的区别不论从功能维度、交互维度、视觉维度上看，这两类按钮各自都有不同的特点。选择型按钮非瞬时状态有：“选中”和“未选中”两种互斥状态。可以把选择型按钮理解为某种状态的确认和展示。命令型按钮的非瞬时状态只有一种：正常状态，当用户点击命令型按钮后，命令即可下达。可以把命令型按钮理解为一个动作，点击按钮代表着立即执行这个动作。常见按钮的拆解介绍完了命令型按钮和选择型按钮在功能、交互、视觉层面的区别点后，我们再来看看实际工作中常见和常用的按钮类型。1. 传统按钮（有容器兜底的按钮）的来源：GUI 中“按钮”的概念来源于真实世界中的按钮。真实的按钮具有一个非常显而易见的特点：拥有一个适合点击按压的受力面，这个受力面就是可点击感的来源。试想一下，假设一个按钮只有针尖般大小，且不说你是否能认出这是按钮，即便你知道这是按钮，你会有按下的欲望吗？真实情况下，摆在人们面前的按钮面积越大，想按压的欲望就越强。因此传统按钮的最显著特点就是拥有一个承载内容的“受力面”，也就是承载文字或者图标的“容器”。受限于早期的显像技术，以及与真实世界的对照，这种“容器”通常一般都是矩形，后期渐渐衍生出更加柔和的圆角。风格发展：在相当长的一段时间里按钮都有三维凸起的特征，进一步巩固了按钮的可点击感。不过进入移动时代后，这种流行趋势发生了改变，按钮的三维印记被不断移除。用户已经建立起了成熟的心智模型，即便按钮在视觉上越来越“平”，也不妨碍点击行为的发生。结合多年的使用经验，用户已经将矩形形状这一特征和按钮牢固地联系了起来。即便现在的按钮大多都是扁平化，用户也能一眼就辨认出按钮属性。2. 传统按钮的拆解：常见按钮一般是由容器和内容组成。容器层面容器形状：移动端比较主流的按钮形状有：矩形、圆角矩形、胶囊形和圆形 4 种。一般，在人们的认知里，圆角越大传递的感觉越圆润亲切。其实形状本身并没有好坏区别，与单纯视觉偏好相比，元素的统一性更加重要。一旦选定了某一种按钮形状，就需要保证所有场景中出现的按钮都尽量看上去整体统一。容器尺寸：视觉上，按钮越大，越吸引用户注意，决定按钮大小的主要依据是按钮在页面中的优先级。而一个产品涉及到页面众多，如果不同的页面元素之间缺乏统一的调度规则，就会出现按钮尺寸过多，没有规律，细节混乱，效率低下的情况。为了既能适应不同的场景，又能保持产品级的控件统一，一般要给按钮尺寸设定几个档位以适配不同页面需求。排除个别特殊页面，一般把按钮设置为 5 个优先级梯度档位就足以满足设计需求。我们可以从优先级从高到低的顺序，将按钮分为：特大、大、正常、小、特小 5 个尺寸档位。下面展示最常使用的三个档位，大、正常、小档位。容器颜色：按钮的大小、形状、颜色三个维度中，人眼是对颜色信息最为敏感的。在一个页面中，突出一个元素的方式有多种，其中最简洁有效的方式就是用颜色进行突出。颜色包含了色相、饱和度和明度三种属性，改变颜色的不同属性，都会对按钮的表意产生影响。同时，不同的颜色代表着不同的含义，配色时需要加以注意。容器样式：容器除了基本的尺寸、形状、颜色之外，还有多种样式。上文介绍的容器是强面性的，此外，容器还有弱面性、线性等样式。容器细节：虽然现阶段的按钮越来越扁平，但在扁平的趋势下，依旧有发挥设计创意的空间。颜色渐变、投影、动效都是常用的设计手法。内容层面聊完了“容器”部分，再来看看容器承载的“内容”又有哪些细节点。3. 图标按钮的介绍并非所有按钮都需要容器，尤其当按钮密度较大时，去掉容器只保留内容，可以更好地提高空间利用率，简约视觉。4. 文字按钮的介绍比图标按钮更轻量的按钮类型是文字按钮，以文字的形式展示，和界面融合度更高，当用户有需要时才会注意到文字按钮的可点击性。5. 传统按钮与图标按钮的组合这种组合形式相当常见，将多个功能整合在一个区域内，如底部工具栏（ToolBar）或者顶部导航栏（Navigation Bar）。不同按钮承载着不同功能，侧重越明显，越利于用户快速识别并决策。特殊按钮类型上面介绍的是常见的按钮形式，除了以上按钮，有一些按钮形式专门适用于某些特殊场景。如悬浮按钮、胶囊按钮等。按钮的优先级一个页面往往有多个按钮，不同按钮承载不同功能，功能之间有相同或者不同的优先级，因此按钮之间也存在这相同或者不同的视觉优先级。我们分两类情况来讨论：相同优先级的按钮和不同优先级的按钮组合。按钮样式小结上文罗列了实际工作中常用到的一些按钮样式，最重要的步骤是分清按钮主次，使用不同的样式进行搭配。优先级强到弱：强面性按钮、弱面性按钮/线性按钮、图标按钮、文字按钮碎碎念：本文中出现的部分名词，比如“弱面性”、“容器”等，只是为了便于交流和统一指向，并没有具体权威出处。文中提及的按钮类型均来源于线上产品，样本有限，适用场景相对固定，还有很多样式没有一一遍历。但掌握了如何选择样式的原理，就可以根据日后具体需求做出合理方案。文中出现的数据都是经验型数据，如按钮按下状态是在正常状态下添加 10%纯黑的遮罩，文字字号大小等，这些都是建议型数据，可以根据具体情况灵活调整。有哪里说得不对的地方，欢迎讨论和指正。本篇来源：优设网原文地址：https://www.uisdc.com/button-application
在路上
落霞与孤鹜
表哥
张大湿
