编辑 s导读:一些刚入行的设计师，对tab和按钮、单选框和菜单的区别很困惑。他们之间是什么关系？本文作者以一个案例为切入点进行分析，希望对你有所帮助。
一、问题的由来本文讨论的话题来自于我自己工作中一个由来已久的疑问。
让 让我们从一个例子开始:你运营一个视频网站，它将向付费高级用户提供三项权利:跳过广告、免费音乐会员和折扣点。所以你设计了这样的会员权利页面:
这时，一个困惑的用户站了起来:这个页面是指 我是一个高级会员，同时享有三项权利，但这个网页可以 无法显示，所以我只能通过切换页面来查看我的三个权限，还是说 一个高质量的会员可以按下相应的按钮，选择三个权利之一，享受 ？用我们设计的语言，也就是 这是一个选项卡还是一组互斥的按钮？
为什么要把这两个东西弄得这么像？它们应该是这个样子吗？tab和按钮、单选框、菜单是什么关系？这些问题虽然听起来很基础，但深入探究控件近50年的发展史，却是一个值得研究和品味的小细节。
二、信息与行为、事物与事件、选项卡与按钮、信息显示控件与选择器的区别基本上就是信息与行为、事物与事件的区别。前者独立于使用者而客观存在。;的意图和行为。即使用户从不看或使用这些东西，它们仍然存在。和 事件和事件需要东西和人。;的操作行为来完成。
比如房间里有一箱苹果，这是客观事实，苹果也一样 东西 。当人们在中午饿了，他们走过去拿起一个苹果吃，然后 吃苹果 是一个事件。这个过程需要 苹果 以及拿起、咀嚼、吞咽的动作。这两个因素一起构成了 吃苹果 。
在现实生活中东西 和 事件和事件是完全不同的概念，谁也不会把这两件事混为一谈。 东西 就像名词，而 事件和事件是包含动词的主谓宾短语。前者看得见摸得着，可以稳定观察，后者不一定。例如，如果有人告诉你 桌子上有一个苹果，那么你一转身就能看到苹果确实在桌子上，所以这个事实是确凿的；但是如果一个孩子告诉你小明刚才打了我，取证不是那么容易的。然而，在人机交互中, 行动与行动和 行为与艺术渐渐不那么清晰了。
三、命令行时代人机交互发展之初 信息与广告和 行为与艺术， 东西 和 事件和事件可以很宽容。容易区分。
在用户不得不用命令行操作电脑的时代，他们看着客观存在的东西，执行一个动作，分享一个动作:输入指令。用户需要用这种告诉机器我想看什么，想做什么，这样用户就可以阅读文本，从句子的字面意思来判断事物和事件、信息和行为。
例如，从最初的情况开始，如果用户想要查看所有的好处，他将输入 查看好处和看看打印的福利是什么。如果系统要求用户选择兴趣，用户输入兴趣代表的号码或兴趣名称。
但是命令行界面的交互形式毕竟效率低下，不利于系统完整稳定心智模型的形成。因此，随着计算机作为家庭生产力工具地位的不断提高和新型操作设备 鼠标和鼠标，图形用户界面(gui)应运而生。
在命令行向图形用户界面过渡的过程中，首先出现了两种新的交互样式:菜单和输入框。早期的菜单和输入框的风格都很粗糙，和传统的命令行界面差别不大。因此，计算机从业者指的是早期只能显示字符但可以 t显示图形，所以他们只能使用菜单和文本输入框作为主要的交互形式，这有点讽刺，因为 玻璃电传打字机 。
在这个阶段, 菜单 只是一个不同于主屏幕的简单显示容器，甚至是 对话框 我们今天所熟悉的可以理解为菜单的变体。它不 不要紧是否把 行为与艺术or 信息与广告， 东西 or 事件和事件在菜单上，因为用户还是以类似命令行时代的交互理解事物，也就是通过阅读文本。
第四，图形界面时代，图形用户界面极大地改变了用户与计算机的交互。鼠标的普及使得用户界面的元素更多、更复杂，用户体验和心理学的研究成果也催生了许多新的交互风格。其中，有一个概念对今天的形式影响很大 美国的控制:逐步披露。
一般认为1981年施乐公司的施乐之星是第一个在图形界面中使用选择器/tab的产品。虽然这款电脑的商用性能不怎么样，但是在用户界面上做出了不少贡献。在该用户界面中，设计者决定采用以下策略，以便使用户不需要像在命令行界面时代那样通过键入和记忆命令短语来不断地与计算机进行交互:
将所有高频项展示给用户，无需打字，只需从选项中选择即可:这种策略催生了选择器组件，将不需要使用和显示的信息暂时收起，等到用户点击按钮时才逐渐展示；这种策略催生了tabxerox star时代非常粗糙的控制风格，无论是tab、switch还是多选。，都是以按钮的样式呈现的，所以一个选项是什么意思，怎么用，要看阅读文案来判断。例如，当用户看到 对齐:左对齐/右对齐/居中对齐，他们应该能够理解他们是否选择了三种对齐方法中的一种，当他们看到 显示:字符/段落和，他们应该了解他们是否选择显示与字符或段落相关的设置项目。
还有为什么tab和selector变成了我们今天看到的样子？这就不得不提鼠标的普及带来了一种全新的交互形式:直接操控进入交互设计师的视野。
据《今日》 的说法，直接操作一般指 对对象的直接操作，比如文件排序，放大缩小，移动位置等。直接用鼠标。与菜单和文本输入框相比，这种操作形式速度更快，反馈更多，更直观。比如我们现在非常熟悉的把一个文件拖到回收站的操作，就是直接操作的经典案例。
虽然直接操作在今天看起来很自然，但所有小学生都知道如何将文件拖到废纸篓中。然而，在80年代图形用户界面诞生之初，用户对家用电脑根本没有概念，更不用说拖动鼠标这种高端操作了。那么，设计师如何教育用户学会使用直接操作这种新的交互形式呢？
答案是:引入隐喻。
简单地说，隐喻意味着 直接或间接说明a和b相似，a具有b的特征，或者a可以通过操作bamp来操作；。用户完全陌生的人机交互概念，可以用日常生活中的事物来表达，让他们把自己的生活经验移植/应用到人机交互中，从而降低学习成本，让用户能够直观地识别如何使用某项功能。比如上面提到的 移动文件到废纸篓 是一个极好的不言自明的比喻:
因此，当设计师发现隐喻是一种有效的用户教育形式时，隐喻就成了当时流行的设计思想。沿着这个思路越走越远，终于诞生了一个类似于mircosoft bob这样的游戏界面的浮夸系统风格，我放出来让大家笑两次。
另一方面，使用隐喻的趋势也影响了控件的风格设计。例如，苹果公司在1988年开发的可视化编程软件fabrik就使用了 文件夹上的标签在现实生活中作为一个隐喻来设计标签，这表明用户可以快速跳转到不同的页面，就像在现实生活中根据标签在文件夹中翻找文件一样。
至此，我们可以发现隐喻 标签标签 由fabrik和图形 标签标签 施乐之星的纯按钮开始有了不同的风格。用户已经不能从文字中理解这个控件的交互，而需要从图形中区分和使用自己的日常生活。生活经验。所以从这个角度来说，不同风格的控件映射不同的实物，不同的实物应该对应不同的交互。
例如，由 单项选择 单选按钮是单选按钮。按下此按钮时，所有其他按钮都会弹出，因此一次只能选择一个。在 多项选择和复选框是纸质问卷/备忘录上的勾选框，因此您可以选择多个。
按下单选按钮 和 勾选备忘录 都是动态的事件和事件，而只有 文件夹中的分页标签是一个静态 东西 。这种隐喻性质上的差异，让人直观地判断tab和单选框使用上的差异。所以虽然在80、90年代没有充分讨论，但是在系统设计中，一般采用tab作为静态页面的导航，单选框/多选框作为动态选择行为。以appl《gui设计禁忌》的文章，他认为tab最好只用作导航，而不是选择器。因为它混淆了 信息显示与展示和 行为选择 。
最后，文本按钮的出现让用户逐渐对什么是 标签 什么不是。在windows7时代，也有垂直标签来支持标签过多导致水平空间不足的情况。不幸的是，另一个windows控件wizard有一个看起来像垂直标签的侧边栏。这个侧边栏综合布置了信息导航、快捷功能操作等各类入口。因此， 标签 或class 标签 被进一步拉宽。
与windows相比，mac 的方法更令人愉快。mac os有无线电盒，但它们也包含标签视图和分段控制，与施乐star ■原创风格。虽然看起来一模一样，但是从规范性上来说，前者负责信息展示，后者负责单选甚至多选动作操作，可以说是非常隐秘的，一般倾向于不区分 选择器和和 标签 风格。
mac的这种控件不使用隐喻，甚至有时不写文案，需要用户通过控件的位置和上下文来判断其用途。我个人认为，苹果之所以敢套用这种简单大胆的设计思路，主要是因为其产品更加大众化，场景也没有那么复杂。
扁平化时代和00 00年控件发展后隐喻的失败。;10年后，有两件事极大地影响了用户。;头脑。
ios7带来的扁平化设计趋势，让操控的整体风格向极简、轻量化方向突飞猛进。事实证明，不同控件的形状和颜色差异很大，用户不容易混淆按钮、单选框和选项卡。但是在扁平化设计的思想下，所有的控件都用方框甚至文字本身来表示，这无疑削弱了控件的可识别性。
其次，正如我们上面所说，隐喻的工作原理是允许用户将生活中常见的事物与控件进行比较。然而，时过境迁，当普通的东西在用户 生活变化很快，旧的比喻将变得无效。文件夹选项卡、单选按钮...这些东西早就是旧日历了。如果 隐喻 需要提前说明让用户明白，就不再管用了。
所以，对于很多非常年轻的新用户来说，用tab托管行为操作并没有什么不妥——毕竟文件夹在今天并不常见。
七、我们应该怎么做？让 让我们从结论开始:
唐 不要制定不必要的规则。对于大多数场景简单的产品来说，菜单/单选/选项卡并不能。;没关系。对于复杂的工具/企业产品，无论是it 移动或个人电脑/网络，it 最好区分操作/信息显示控件，严格区分单选和选项卡样式。首先，规则一:不要 不要制定不必要的规则。这其实有点违背交互设计。天生，我们可以 不要站在模糊的灰色地带。然而，在控件的应用中，符合场景比遵守a 规则与规则据说这在业内很普遍。比如我听到一些设计师分享，他们会严格要求作为导航控件的tab不要放操作，而菜单就是操作的聚合。我们已经演示了上面句子的后半部分。如果什么都没有，你可以从它诞生之初就把任何东西放到菜单上。对于前半句，我想展示一个案例:
此截图来自淘宝 s牛倩商家工作台，是淘宝卖家的商家后台。它揭露了 出版婴儿 在垂直导航上(让 姑且称之为tab)。这明显是高频操作。在这种情况下，你可以说还有其他的布局方法和解决方案，但没必要夸大把操作放在标签页上可以导致多么严重的用户体验问题或者控件定义问题。
对于大部分c端产品来说，不区分radio /tab，或者在一些高度定制的页面中用tab代替radio都是可以接受的。第一，因为无数产品经过了长时间的验证，所以在这些轻松简单的场景下，用户并不那么纠结于控件风格。第二是因为 信息与广告和 行为与艺术c端产品的，其实并不像现实生活中那么清晰，往往处于一个相对模糊的境地。拿取 酒店预订及服务举个例子， 查看酒店信息是信息显示，而 酒店预订及服务是一个动作流，但是用户在哪一步从 观看 致 行动与行动？不一定。
最后，工具/企业级产品不能套用c端产品的设计逻辑。在复杂的场景下(比如标签页是嵌套的，比如既有标签页又有选择器)，用户仍然能够准确理解控件的意图和交互形式，这是交互设计必须考虑的问题。比如，在windows的新fluent规范中，从来没有提到tab和单选框的互换关系。tab定义为纯导航控件，样式不同于单选/多选。
本文由@白话互动原创发布。每个人都是产品经理。未经许可，禁止转载。
题图来自unsplash，基于cc0协议。
了解更多如何去除win7中的图标框(win7桌面图标箭头)相关内容请关注本站点。