#RRGGBB，精准定义 RGB 色彩。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
无法想象没有按钮的页面是什么滋味，那定会像没有方向盘的汽车，让人不知所措吧？也无法想象按钮设计不恰当，会给用户带来怎样的困扰？
面对十万火急的任务需求，如果需要调动全部理性脑，深呼吸三秒，才能找到想要执行操作的按钮入口，我想这样的产品设计是失败的，是会被用户所唾弃的。
兰亭妙微UI设计公司，将详细剖析按钮的神秘面纱，了解它、研究它，让按钮设计成为产品的得力助手，为我们的产品赋能，为我们的工作提效，下面就让我们开启这场神秘之旅吧!
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
按钮在我们生活中起着很大的作用，它就像我们的小助手一样，帮我们一键开启想要的任务，凡事都能一键触达。
按钮在UI界面中，是一种界面交互控件，通常以矩形、圆形或其他几何形状呈现，具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作，如提交表单、执行命令、导航页面、切换状态等。
按钮一般包含文字标签、图标或两者的组合，以清晰传达其功能。同时，按钮在不同状态下会呈现出不同的视觉效果，如默认状态、按下状态、悬浮状态、禁用状态等，为用户提供操作反馈和引导。
❶ 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
❷ 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
❸ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如下面的站酷活动页就用了很多的文字按钮，只有当按钮被选中时，按钮才会高亮选中。
❹ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，让页面看起来更加的简洁。
❺ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
按钮的样式可以从多个方面进行分类和设计，以下是一些常见的样式分类：
❶ 按颜色划分
❷ 按形状分
❸ 按边框分
❹ 按图标分
❺ 按阴影样式分
❻ 按动画种类分
马蜂窝的功能主按钮，在点击的时候都会产生动画，交互感十足。
加载动画按钮：
当按钮处于加载状态时，按钮会有加载动画效果，如旋转图标、进度条等，常用于告知用户操作正在进行中。
3.1 默认按钮
按钮的初始状态，通常具有正常的颜色、形状和文字显示，等待用户操作。
3.2 待激活状态按钮
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用，用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态，并引导用户进行下一步操作。
3.3 点击状态按钮
当用户点击按钮时，按钮会呈现按下的状态，通常通过改变颜色、形状或添加阴影等方式来表示。
3.4 禁用按钮
在某些情况下，按钮会处于禁用状态，无法进行操作，通常会以灰色或半透明的方式显示，提示用户当前操作不可用。
3.5 加载状态按钮
加载状态按钮通常用于指示某个过程正在进行中，例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理，而不是卡住或出现错误。
3.6 危险提示状态按钮
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果，例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性，以避免误操作。
下边这两组弹框就是运用了危险按钮，来提示客户未来即将面临的风险，警示作用非常的明显。
在Web端，按钮尺寸没有固定标准。不过，一般来讲，按钮的高度常在32px-48px之间，宽度可根据内容灵活设置，但最好不要小于48px，这样方便用户用手指（触屏设备）或鼠标点击。
像一个简单的“提交”按钮，宽度可能是80px左右，高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适，易于交互。
麻省理工触摸实验室通过对人类指尖的研究，得出了关于界面按钮大小设计的一些重要参考数据。
对于食指，平均宽度在16至20毫米，指腹触摸区域尺寸为10至14毫米，指尖触摸区域尺寸为8至10毫米；对于拇指，平均宽度为25毫米，指腹触摸区域尺寸为12至16毫米，指尖触摸区域尺寸为10至12毫米。
由此建议，食指触摸的按钮应保证在8毫米×8毫米以上，且控件间距应保证至少在1毫米以上；拇指触摸的按钮应保证在10毫米×10毫米以上，且控件间距应保证至少在2毫米以上。
该研究还指出，大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
从按钮图标尺寸来看，根据苹果官方设计指南，iOS中按钮图标有不同标准。小图标尺寸为24×24pt，用于小型按钮，如导航；标准图标为32×32pt，用于普通按钮，适合次要操作按钮；大图标是 40×40pt，用于宽大按钮；特大图标则为48×48pt，用于特大按钮。
不同设备屏幕尺寸也有对应的建议图标尺寸，如iPhoneSE建议24pt，iPhone14及iPhone14Pro建议32pt，iPad 建议40pt 。
在最小触摸区域方面，iOS规定最小触碰区域为44×44pt，这种尺寸一般适合主要操作按钮。
UI按钮的组成主要包括以下几个关键元素：
圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮，如4px圆角；圆角越大，越有亲和力，人眼往往不喜欢非常锋利的物体，所以通常不建议使用0圆角的按钮样式，根据我大量的体验，我发现市面上确实也是带圆角的按钮居多些。
图标用于直观表达按钮的功能或状态，如加载中、编辑等。图标的设计应与整体页面风格一致，并确保其含义明确易懂。
内边距能够扩大按钮的可点击范围，帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然，你也可以根据你设计的实际情况做适当调整，规矩不是死的。
容器是包含所有视觉和交互元素的框架，包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
边框定义了按钮的边界，常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
文案是按钮上的文字描述，用于表达按钮的含义和功能。文案应简洁明了，易于理解，同时具有一定的吸引力。
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
投影用于凸显层级关系，帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用，以打造更好的视觉体验。
佐糖首页为了促进转化，特意将“开通会员”的按钮用投影凸显处理，带投影的按钮明显有向前走的感觉，比没有投影的按钮看起来更加显眼。
小小投影在页面中不仅起到增加空间感的作用，还起到了业务强调的作用，已经不仅仅是样式的一个承载了。
这些元素共同作用，不仅提升了按钮的功能性，还增强了其美观性和用户体验。在设计UI按钮时，应综合考虑这些因素，以确保按钮既美观又实用。
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动，并帮助用户防错。
1.1 提交与确认
在表单填写场景中，如用户注册、登录、信息提交等，按钮用于触发提交或确认操作，将用户输入的信息发送给系统进行处理。
1.2 执行功能
在各类软件中，按钮是执行具体功能的主要方式，如在图像编辑软件中，“裁剪”“旋转”“调整颜色”等按钮，可让用户快速实现相应功能。
2.1 页面切换
在多页面的应用或网站中，按钮可实现页面之间的切换，如网站的首页、产品页、关于我们页等，通过点击按钮，用户能方便地浏览不同页面内容。
2.2 菜单展开与收起
用于控制导航菜单的展开与收起，节省页面空间，提高界面的整洁度和易用性。
3.1 显示与隐藏
可用于控制某些元素的显示与隐藏，如在电商网站中，点击“查看更多商品详情”按钮，可展开隐藏的详细商品信息。
飞书中的这个小小按钮，它承载着隐藏折叠的功能，让页面看起来更加的简洁有序。
3.2 启用与禁用
在某些功能需要满足一定条件才能使用时，按钮可用于表示该功能的启用或禁用状态，如在未填写完必填项时，“提交”按钮处于禁用状态，无法点击。
中国移动云盘的登录页就是这么设计的，当前面信息没有填完，后面的登录按钮始终是禁用的状态，只有当信息填完，且填写正确，按钮才会亮起。
4.1 操作反馈
当用户点击按钮后，按钮会通过颜色、形状、动画等方式的改变，向用户提供操作反馈，告知用户系统已接收到操作指令。
4.2 引导提示
在一些复杂操作或新功能引导时，按钮可作为引导提示的一部分，告知用户下一步操作，如在新手引导流程中，突出显示“下一步”按钮。
心岛日志的新手指引中就是这样设计的，按钮在其中起了很重要的指引作用。
5.1 数据筛选
在数据展示界面，如表格、列表等，按钮可用于对数据进行筛选，方便用户快速找到所需信息。
钉钉打卡这个界面中，多亏有了日、周、月的筛选按钮，才让数据筛选变得如此便捷。
5.2 数据排序
通过点击“按时间排序”“按销量排序”等按钮，用户可对数据进行重新排序，以满足不同的查看需求。
很多产品的按钮颜色都是与它的品牌色高度一致的，它既是按钮，又是品牌色的传递大使。
网易云音乐的按钮色用的网易红，钉钉打卡的按钮用的腾讯蓝，都是在传递自己的品牌色，同时也是在进行指令的传达。
在日常设计中，页面无疑少不了按钮位置的摆放，那么按钮放置在什么样的位置合适，这也是一个值得深思的问题，也许我们已经司空见惯了按钮的位置摆放，但是我们知道它为什么要放这里或者那里吗？下面我们来看下这几种设计模型，让它告诉我们，为什么，在特定场景下，按钮位置要这么放？
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状，指用户的浏览路线——从左到右，从上到下的的视觉运动轨迹。
首先，人们从左上角到右上角进行扫描，形成一条水平线；第二步，向页面的左下侧，创建一条对角线；最后，再次向右转，形成第二条水平线，当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形。
1.2 视觉区域
1.3 应用案例
在电商网站中，商家会把热门推荐或主打产品放在区域1和区域3，以吸引用户的注意力。
在产品详情页面，将“加入购物车”“立即购买”等按钮放在区域4，方便用户在浏览完产品信息后进行购买操作。
天猫商城就是这样做的，把网站的LOGO图放置在左上角（区域1），把产品图放置在左下角（区域3），最后在用户浏览了全部页面之后，在右下角（区域4）放置购买按钮，引导用户下单。
在这个带有销售场景的页面设计中，购买按钮放置在右下角符合用户浏览习惯，也符合Z型视觉模型。
在B端应用软件中，可能运用的功能比较多，按钮也比较多，通过大量分析和观察发现，它们大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
腾讯云是这样处理的，中国移动网盘是这么处理的，看似巧合，其实也有它合情合理的一面，因为每一个动作的开始和结束都会更加的引人注意。
这就跟人们每次入职一个新公司一样，刚进去时会特别卖力、小心，后面时间长了，也就形成免疫，习惯了，但是当最后要离开这家公司的时候，最后心情又会特别复杂，回想起自己在这里成长的岁月，就会心生很多的感慨，也会特别的记忆深刻。
也许这也是为啥很多页面设计，喜欢把重要的按钮放置在每次视觉运动线的起点或者终点吧！
按钮的颜色在界面中不仅起到视觉点缀的作用，同时也是按钮状态的一种呈现和反馈。
按钮颜色不是千篇一律的品牌色，它也经常需要根据业务场景的不同，更换颜色，比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮，不同的按钮在颜色设计上都会有所区别。
此外，在设计按钮颜色时，有一些基本规范。
首先，从功能角度看，主要按钮通常会使用比较突出的颜色，像鲜艳的蓝色，这是因为蓝色醒目又不会过于刺眼，能引导用户去点击。次要按钮（如取消、返回）的颜色会稍淡一些，比如浅灰色，让用户知道这是相对次要的操作。
从颜色搭配来说，按钮颜色要和背景色有足够的对比度，方便用户识别。比如背景是白色，深色按钮就会很清晰；如果背景颜色较深，那按钮可以用浅色或者高亮度颜色。
另外，颜色的选择也要考虑产品的风格和使用场景。例如，在一个游戏软件里可能会使用更活泼的色彩，像红色、橙色；而在办公软件里，通常会采用比较沉稳的色调，如蓝色、黑色。
1.1 视觉清晰
按钮应采用用户熟悉的设计样式，如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
1.2 文字明确
按钮上的标签应准确、简明直接地介绍其功能，避免使用过于通用或模糊的表述，让用户清楚点击后会发生什么。
2.1 位置合理
将按钮放在用户期望看到的地方，如遵循F型或古腾堡原则，在页面的视觉焦点区域放置重要按钮。
2.2 尺寸适宜
按钮大小应反映其在屏幕上的优先级，更大的按钮用于更重要的操作，同时要适配用户的手指，避免误触。
3.1顺序得当、逻辑一致
按钮的顺序应反映用户与界面之间交互的逻辑，如“上一步”按钮通常在左边，“下一步”按钮在右边。
3.2 状态样式一致
按钮应具有一致的状态样式，如默认、按下、聚焦、禁用等，一个产品中，这些状态样式要高度的一致，不能在这个页面按钮样式是这样的，跑到另一个页面，样式又发生了改变。
著名的格式塔心理学也是这么认为的，它强调人对事物的理解是基于整体的、有组织结构的，如果按钮设计做到一致性，对提高产品的整体性是有非常大的改进的。
4.1 避免过多
避免在一个界面中使用过多的按钮，以免让用户感到无所适从，应优先考虑最重要的操作。
4.2 功能单一
每个按钮应尽量只执行一个主要功能，避免一个按钮承载过多复杂的操作，降低用户的认知成本。
希克定律指出，人的决策时间会随着选择的增加而增加。在按钮设计中，简洁的设计能减少用户的选择和认知负担，使用户能更快地做出决策并执行操作。
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致，包括颜色、形状、字体等方面，形成统一的视觉体系。
5.2 对比协调
在保持整体协调的基础上，通过对比突出重要按钮，如使用高对比度的颜色、较大的尺寸等，吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息，增强用户和产品的情感连接。
奥斯卡·王尔德说过：“习惯一旦养成，便很难改变。”
所以我们在设计按钮的时候，一定要符合人性的习惯，而不是试图改变人们的习惯。
带有分组的按钮摆放，让人看起来总是更加的有序，也更利于用户进行操作，面对同类型的功能操作点无需跳跃着去寻找，能很快在相似功能操作区域找到。
360的分组意识很强烈，三个不同区域的图标按钮样式都做了明显的区分，让界面看起来更加有序，操作起来也更加的便捷。
切不可一行按钮中出现多个高强调的按钮，Antdesign对这个也做了诠释，会对用户的行为进行错误的引导，也不利于聚焦。
通义这个页面虽然有多个选中的按钮，但是没有全部用高强调的按钮，只有强推荐的操作“开始录音”才用了强按钮。
其它通过相对浅的颜色做了弱按钮选中处理，视觉上主次分明，信息主次表达上也清晰可见。
当一个按钮同时兼顾两个交互动作的时候，一定要区分设计，不能赤裸裸的展示在一个按钮中，而不做任何区分。
具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。
简短的文字更易被用户阅读和记住，在一个按钮上最多不超过5个文字，重要的按钮一般使用2~4个字。
❶ 用纯灰色文字的弱化按钮
❷ 用灰色边框＋灰色文字的弱化按钮
❸ 用颜色边框+颜色文字的弱化按钮
❹ 用灰底+灰色文字的弱化按钮
❺ 用浅色底+颜色文字的弱化按钮
❻ 用纯颜色的弱化按钮
通过本篇文章的探讨，我们深入了解了B端按钮设计的九大核心要素。
从按钮的基本定义到Antdesign的分类，再到尺寸、构成、作用、位置和颜色等细节，每一部分都是提升用户体验的关键。
按钮设计不仅关乎美观，更影响着用户的操作效率和满意度。在UI界面中，遵循设计原则和注意事项，确保按钮既实用又具有吸引力，是每位设计师的职责。
希望本文能为设计师们提供有价值的参考，激发更多创新灵感，共同推动B端产品的交互设计向更高水平发展。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Apple推出的突破性产品 Vision Pro 在科技界引起了轰动，新的设计趋势即将到来。苹果首席执行官蒂姆·库克在 WWDC 2023 上自豪地展示了这款全新设备，展示了增强现实 (AR) 和空间计算的新时代。
凭借 Vision Pro，Apple 再次展现了其突破创新界限的能力。本文将探讨 Vision Pro 如何彻底改变 UX 设计行业并改变我们与技术交互的方式。
Vision Pro 将用户从传统显示器的限制中解放出来，开创了空间计算交互的新时代。
通过无缝融合增强现实和空间计算，苹果推出了一种独特的输入方法（结合眼动和手势），类似于鼠标或触控板。这一创新让用户体验设计师有条件打造超越屏幕限制、身临其境和直观的用户体验，开辟了无限的可能性。
彩云注：当我们大多数人已经习惯了 2D UI 的设计模式，这种新的交互方式，给了我们很多创新的空间，比如结合眼睛和手势，我们可以给用户带来更自然直觉的新体验。
Vision Pro 的设计将美学与功能无缝结合。这款设备采用铝制框架和曲面玻璃，外形类似滑雪护目镜，清楚地表明它的预期用途是在家庭和办公室等受控环境中。
包含用于图像捕获的物理按钮和用于调整的数字表冠确保了直观的控制，而灵活的表带和面罩使用户专注并屏蔽外部干扰。
彩云注：在考虑未来交互方式和视觉的时候，需要多结合硬件和软件的交互及视觉效果，怎样达到最直观的操作效果。
Vision Pro 主打增强现实，使其有别于以前的混合现实设备。通过将虚拟世界和物理世界无缝融合，用户体验设计师现在可以创造增强用户对现实感知的体验。
从将信息叠加到真实世界的物体上，到创建交互式 3D 环境，设计引人入胜、情境丰富的新体验。
对于 Vision Pro，用户体验设计师将需要考虑传统鼠标和触控板之外的新输入方法。
用于图像捕获的物理按钮和用于调整的数字表冠为设计师提供了交互设计的新途径。设计直观和无缝的控件对于确保流畅和沉浸式的用户体验至关重要。
Vision Pro 的突出特点之一是它的空间音频功能。通过集成内置的“音频 pods”，苹果通过创造丰富而身临其境的声音场景来增强用户体验。
这种革命性的音频本地化方法使设计师能够从不同的方向模拟音频源，从而与数字环境进行更吸引人、更逼真的交互。
在底层，Vision Pro 由苹果的标准 M2 芯片和专用于视频流的新 R1 芯片提供支持。
微型 OLED 显示屏，每空间提供令人印象深刻的 64 个像素，相当于标准 iPhone 像素，确保呈现清晰、充满活力的视觉效果。此外，与蔡司合作提供定制嵌入玻璃也体现了 Apple 的包容性和可访问性体验标准。
苹果推出了一项名为 EyeSight 的突破性功能，利用前置显示屏向房间内的其他人展示用户的眼睛。
通过捕获初始面部扫描，Vision Pro 在弯曲的前玻璃上创建用户的“真实眼睛”。这种对个人头像的创新使用促进了更真实和身临其境的社交互动，使用户能够在数字领域进行更深层次的联系。
Apple 对电子邮件和桌面等与工作相关的应用的重视表明，Vision Pro 是想主打一种生产力工具。
通过与 Microsoft Office 等现有应用和流行的线上会议服务无缝集成，这款头戴设备使专业人员能够增强他们的工作流程并更有效地协作。
这种工作第一的方法使 Vision Pro 与其他优先考虑游戏和娱乐的设备区分开来。
Vision Pro 开辟了内容消费和创作的新维度。不透明显示屏允许较暗的环境，非常适合展示从 iPhone 拍摄的 2D 照片以及捕捉空间照片和视频。
影院选项为用户提供了完整大屏幕的错觉，而游戏体验则投射到虚拟大屏幕上，提供身临其境的游戏体验。
苹果与迪士尼联手，正在建立令人兴奋的内容合作伙伴关系，这预示着 Vision Pro 的光明未来。
随着 Disney+ 的推出，用户可以期待一系列身临其境的互动娱乐体验。苹果和迪士尼之间的合作证明了 Vision Pro 在重新定义我们消费媒体方式方面的潜力。
为了适应 Vision Pro 的独特功能，Apple 推出了 VisionOS，这是一款专为空间计算设计的新操作系统。
这个新平台提供了丰富的教育功能，包括天文学、健康和音乐创作应用。此外，现有 iOS 和 iPadOS 框架的集成确保了开发人员的无缝过渡，并为专门针对 Vision Pro 定制的广泛应用生态系统铺平了道路。
凭借 Vision Pro，Apple 向用户体验设计行业的革命迈出了大胆的一步。通过将增强现实、空间计算和尖端硬件相结合，苹果公司创造了一款开启交互和沉浸新维度的设备。
随着用户体验设计师拥抱 Vision Pro 的功能，我们可以期待超越传统界面的突破性体验，使用户能够以前所未有的方式与数字内容和环境互动。
用户体验设计的未来已经到来，在 Vision Pro 的引领下，它看起来前景无限光明。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
组件状态是用户理解产品交互的核心，虽不直接显示却决定操作逻辑。兰亭妙微UI设计公司基于 Material 3 规范拆解启用、禁用、悬停等 6 种常用状态类型，详解状态层设计及各状态的适用组件与设计规则，助力打造清晰流畅的交互体验。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
本文聚焦交互设计核心认知，清晰区分UI 设计、交互设计、UX 体验设计，并逐一拆解高频交互术语，兰亭妙微UI设计公司帮你快速建立完整的交互知识体系。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
“Good design is durable.” 迪特 · 拉姆斯的设计十诫提到，好的设计应该是历久弥新、不会轻易过时的。
在 20 世纪，大多数日常用品都经历过颠覆式的变革、简化或技术迭代，比如电话、笔、黑胶唱片机等。然而有少数物品，它们已问世超过百年，形态与结构却跟设计之初别无二致，且还能较好地满足当下的需要。这些产品是如何诞生的？为什么他们能在时间的长河中维持恒定不变？兰亭妙微UI设计公司与您一起来学习。
1941 年，世界上第一台电子计算机诞生；1968 年，第一只鼠标原型问世。然而，与它们共同构成人机交互基础的 QWERTY 键盘，其布局早在 1874 年就已获得大规模应用。
如今我们已有语音、触摸屏、甚至是脑机接口等多种输入方式，却还是高度依赖着与 150 年前首批打字机外观相似的键盘。
QWERTY键盘的发明
1868 年，肖尔斯（Christopher Latham Sholes）和他的同事们将他们的第一台打字机运往芝加哥，首位客户是芝加哥波特电报学院的校长爱德华（Edward Payson Porter）。这台打字机有 28 个琴键式按键，外形似钢琴，与波特学院使用的休斯·菲尔普斯印字电报机相似。其键盘按字母表顺序排列：A 至 N 从左向右排布，O 至 Z 则从右向左延伸。
在会见了多名客户后，根据反馈，肖尔斯与其同事对键盘的构造与布局进行了多次改进。最终在 1872 年，《科学美国人》在头版以大幅版画形式报道了这台打字机，画面中清晰展示了其键帽结构，此时的打字机已配备 42 个按键，包含大写字母、数字 2 至 9，以及连字符、逗号、句号、问号等常用标点符号。
1874 年，肖尔斯发明的打字机由枪械制造商雷明顿公司（E. Remington and Sons）推向市场，并逐渐演变成为键盘的行业标准。其按键布局已与今天我们普遍使用的 QWERTY 键盘几乎完全相同，是当今世界上应用最广泛的键盘布局。尽管不同国家会因语言习惯在键位安排上做些微调，但整体结构仍遵循着这一经典设计。
扑朔迷离的键盘布局起源
这其中耐人寻味的是，肖尔斯是如何想出这种键盘排列方式的。
因其印刷行业的背景及报纸出版商的经历，肖尔斯应当熟悉排字工根据使用频率排列字盘的做法。有一种广为流传的理论认为 QWERTY 键盘的布局是为了限制打字者的速度：其核心原则是将高频使用的字母分隔开（尽管像 E 和 R 仍被放在一起），以此减少打字时连动杆的相互碰撞而导致的故障。换而言之，这是一种以暂时性的输入效率，换取机械运行的长期可靠性的妥协。
然而，京都大学的研究人员³提出，QWERTY 键盘布局的诞生可能与早期核心用户——电报员的工作习惯密切相关。研究中以 E、S 、Z 这三个字母在键盘上的布局为例来阐明这个观点。
当时，美国电报员需要把听到的摩尔斯电码实时转译成字母。在美国使用的电码中，字母 Z 与常用组合 SE 的编码恰好相同，均为“··· ·”（滴滴滴 滴）。当听到这样的电码序列，尤其是在缺乏上下文的单词的开头时，接收者无法立即判断是 Z 还是 SE，只能根据后续听到的电码来综合判断。这种不确定性会严重影响输入效率：在传统的 A-Z 顺序键盘上，若电报员开始输入 Z，之后发现应为 SE，手指就不得不在相距较远的键位之间移动并修改。
而 QWERTY 键盘布局的调整是，把 Z、SE 这两组容易引起混淆的字母安排在了彼此相邻的位置。这样一来，即使电报员在听到“滴滴滴 滴”时无法立刻判断，手指也能在紧邻的区域中快速选择或更正，而不必在全键盘上寻找。或许正是这类针对电报场景的优化，最终塑造了我们今天所熟知的 QWERTY 键盘格局。
虽然原因至今尚无定论，且无论是为了避免机械故障还是适配摩尔斯电码的输入习惯，都跟当下的使用场景有所不同，但至今为止也没有任何一种其他布局方式来取代它。
19 世纪，木浆制浆技术与工业造纸厂的出现让廉价纸张得以广泛流通。面对随之产生的大量零散纸张，人们开始使用手边常见的别针来加以固定——这被视为回形针的前身。尽管别针价格低廉、使用方便且用后即弃，但其缺点也十分明显：不仅容易生锈，还会刺穿纸张，留下难看的锈迹与孔洞。
最早的回形针专利记录来自挪威人约翰·瓦勒（Johan Vaaler），他在 1901 年提交了申请。专利摘要中写道，这是一种“由弹簧材料弯曲成矩形、三角形或其他形状的环，金属丝两端形成并排且方向相反的部件或舌片”。相比别针，回形针不需要通过刺穿纸面来固定纸张，并排的金属丝结构也提供了更多的固定方式。
1899 年，威廉·米德尔布鲁克（William D. Middlebrook）获得了回形针制造机械的设计专利，随后他将专利卖给了一家办公用品制造商，该公司将其注册为“宝石回形针”（Gem clip）。其有着标志性的双椭圆形环圈设计，通常采用镀镍或彩色塑料包裹的材质，不仅有效防锈，也兼顾外观的美感。
相比约翰·瓦勒的设计，宝石回形针将纸张与回形针接触的位置处理得更圆润，减少了刺破纸张的风险。螺旋状的钢丝具有一定的柔韧性，可轻松张开以便放入纸张，同时又有足够的弹性来夹紧文件。
几年后，乔治·W·麦吉尔（George W McGill）对宝石回形针做出了改良，进一步增大了内环的弧度，使其更明显地上翘。相比初代宝石回形针平缓的环圈末端，这种上扬的开口形成了更清晰的“示能”——直观地提示用户“此处可拉开并插入纸张”。在结构上，它也实现了更省力的开合体验。正是这一改良版本，逐渐演变成了今天最常见、最广泛使用的回形针。
回形针作为“固定文件”的工具这一认知，也自然而然地从现实世界延伸到了数字世界。在图形用户界面中，当我们想要将文件添加至邮件或文档时，常常能看到那枚熟悉的回形针图标。
中国最早的蚊香可追溯至宋代，一本记录民间生产技术的古籍《格物粗谈》中记载：“端午时，收贮浮萍，阴干，加雄黄，作纸缠香，烧之，能祛蚊虫”。这段记载中所述的制品可视为早期形态的“蚊香”，其外形类似于带芯的线香。换而言之，最初的蚊香是直的。
蚊香的螺旋形演变可以追溯到 19 世纪末的日本。当时，人们将除虫菊粉与锯末混合燃烧用于驱蚊。日本企业家上山英一郎（うえやま えいいちろう）生产了一种混合了淀粉和除虫菊的香，虽然驱蚊效果良好，但存在明显缺陷：不仅燃烧时间短，不到四十分钟便燃尽，而且与普通线香一样质地较脆，遇风易折。
1895 年，上山英一郎正致力于寻找延长蚊香燃烧时间的方法。期间，他的妻子在仓库中偶然看见一条盘踞的蛇，由此获得灵感，建议他将蚊香制成螺旋形状。这一设计在工程上极为巧妙：螺旋结构以最小的面积延展了蚊香长度（相比线状蚊香延长约 4 倍），也设置了一个单点、稳定、缓慢的燃烧路径，让蚊香既不会熄灭也不会因为香条过宽而燃烧太快。1902 年，可持续燃烧约七小时的螺旋状蚊香问世，并被命名为“金鸟蚊香”，其有着标志性的深绿色外观与印有红色公鸡头的包装设计。
如今我们使用的螺旋盘香，基本都是采用了这个结构，在保证单盘燃烧时间 7-8 小时的前提下，既能节省包装空间，又能在运输中互相支撑，防止断裂。
在拉链发明之前，人们用以拉紧衣物的工具繁多，包括系带、纽扣、别针、搭扣、腰带与松紧带等。纽扣是其中历史最久、使用最广的一种，但其使用效率较低，解开与扣上均需时间，且在耐用性上存在不足，时有脱落之虞。
19 世纪末，在追求“效率”的工业时代背景下，拉链应运而生。发明家惠特科姆（Whitcomb Judson）想解决传统的系带式高帮靴穿脱过于繁琐这个问题，在芝加哥世界博览会上展示了名为钩锁（clasp locker）的装置，它的核心目标很明确：用一次滑动，替代逐个系扣的繁琐过程，节省时间。但当时这种拉链依赖手工制作，成本较高，且质量不够稳定，最终因为结构缺陷及成本问题退出了市场。
1912 年，森贝克（Gideon Sundback）取得了突破性进展，他将惠特科姆发明的易崩开的钩环结构改成了稳定咬合的齿牙结构，实现凹凸完全咬合，使拉链闭合更牢固，开合也更加顺滑流畅。一百多年过去，如今金属拉链仍然在沿用这种工艺制造。
1923 年，百路驰（B.F. Goodrich）公司将森贝克设计的拉链用于一款女式橡胶靴，因其开合时会发出“滋滋”的摩擦声，公司便形象地将其命名为 “ZIPPER”。这个朗朗上口的名字随后逐渐被大众广泛采用，“拉链”也因此得名并沿用至今。
拉链与纽扣的争端
在时尚界，关于在服装上用拉链或是纽扣还引起过一场关乎功能、形式甚至是伦理上的论战。
从效率上而言，拉链无疑更胜一筹，其便利性也更符合我们现代快节奏生活的需要。纽扣的使用需要一定的技巧，而且会增加衣物的厚度，对于如今流行的紧身牛仔裤来说，纽扣可能使面料更容易鼓起或撕裂；而拉链则能通过“收紧并向上拉”的方式来解决这个问题。
但是，拉链更容易损坏和卡住，更难修理。它们也存在一定的安全隐患：在战场上，军服就曾发生过因拉链卡死耽误急救而导致伤亡的事件；反之，纽扣在意外拉扯下更易整体脱落而非卡死。
纽扣的另一个好处在于美观：随着时间的推移，纽扣与衣服的摩擦会形成独特的色落与磨损痕迹，对于牛仔爱好者来说是一个理想的特性。
还有一部分来自复古派的道德质疑，批评者称拉链简化衣物穿脱的特性会助长轻率行为，败坏社会风气。因此，尽管拉链技术早已成熟，直到 1947 年李维斯才将其应用于牛仔裤上。
最终在 1937 年，拉链在这场论战中击败纽扣，巩固了其在服装设计中的地位。如今，这个一百多年前的发明无处不在，被广泛应用于服装、行李箱和无数其他物品中，YKK（全球市场份额第一的拉链制造商）每年生产的拉链足以绕地球 50 圈。
面对技术的百年巨变，为何这些产品能不被淘汰，甚至其基本形态都与百年前最初发明时大体相同？值得肯定的是，他们的设计的确超越了同期其他产品，呈现出一些宝贵的特质。
简单精妙的结构
例如经典的宝石回形针，其双椭圆形结构在同期的其他设计中脱颖而出，以简洁优雅的形态高效实现了“不伤纸”这一核心需求；而螺旋形的蚊香设计，既延长了燃烧时间，又通过严丝合缝的嵌套，兼顾了节省包装空间和运输稳固性。
易用性
拉链和回形针是典型的无意识设计，它们形态与功能高度统一、无需学习曲线。即使是年幼的孩童，也能凭直觉学会使用拉链：20 世纪 30 年代拉链推广初期，拉链款童装就常常以“帮助幼儿学会自己穿衣，培养自理能力”作为卖点。
易工业化、标准化
回形针只需弯曲三次并剪断即可制成，易于自动化生产；螺旋形蚊香可通过钢制模具一次冲压成型，一台机器每分钟可生产数百盘蚊香，整个过程可高度标准化。规模化生产有效降低了成本，使其在市场上更容易取得价格优势，进而推动广泛普及。
然而，历经百年技术发展与社会变迁，新生需求与问题层出不穷。这些经典产品，是否真的一如诞生之初那般，显得全然不过时？或许，让它们保持不变的还有更深层的原因。
去年 11 月的香港大埔火灾事故造成了重大人员伤亡，令人痛心。在对这场事故的追责中，首当其冲地便是香港建筑行业的竹棚工程。许多人指出，竹材燃点仅为 265°C，远低于钢材，可能加剧火势蔓延。此外，竹棚的结构强度也相对不足——过去香港曾多次发生棚架坍塌事故。以香港的经济发展水平，完全有能力推动行业向钢材升级。但网络上仍有许多支持者声称：竹棚搭建技艺自清朝便出现在香港，已有上百年历史，具有文化传承价值，也是长久以来的行业惯例。
同样的，历史上也有其他证据表明 QWERTY 键盘并非最佳的键盘布局，比如美国心理学家发明的德沃拉克键盘布局（Dvorak keyboard layout）：这一布局基于字母使用频率和手的生理结构设计，拥有打字更快、更易学习和降低疲劳的特点。二战时一项研究表明，德沃拉克布局的打字员速度要比 QWERTY 布局打字员快 74%。即使是 QWERTY 键盘的发明人——肖尔斯本人也没那么笃定：尽管他很早就将设计卖给了雷明顿公司，但他终其一生都在不断改进布局，并创造出各种替代方案，在他去世的前一年，他还为自己的 XPMCH 键盘申请了专利。
螺旋蚊香的使用体验也没那么理想：其嵌套结构导致在拆分时比较困难，一不小心可能直接掰断，且必须依赖专用底座才能使用。这本质上是一种便利工业化生产而非优化用户体验的设计。然而，即使有了电蚊香这种更方便、健康、安全的替代品，螺旋蚊香仍凭借低廉的成本、成熟的产业链以及简易的仓储运输要求，在市场中占据着一席之地。
在历史较短的互联网领域也有类似的案例——比如搜索引擎结果页的布局与交互模式。自 2000 年代初谷歌确立“顶部搜索框 + 蓝色链接标题 + 简短摘要”的模式以来，其核心框架在近二十年间保持高度一致，并成为行业标准，不管是在网页端还是移动端。然而在移动端上，固定于屏幕顶部的输入框常位于手指的自然操作范围之外，用户需特意伸展才能触及，体验不够便捷。而“标题用蓝色表示超链接” 这个设计也稍显过时，在用户已基本认知“搜索结果标题可点击”的今天，整屏的蓝色可能带来不必要的视觉干扰，增加阅读负担。
回望这些产品或设计，其“不变”与其说是源于解决问题的完美，不如说是因为它们早早确立了“行业标准”，获得了先发优势，培养了牢固的用户习惯，进而形成了强大的路径依赖。一旦从用户到产业链的“惯性”形成，任何改变都将面临难以估量的转换成本。正因如此，即便它们存在一定的缺陷，市场往往也会接受，毕竟这是性价比相对较高的策略。
一些产品能历经百年而保持不变，固然有其设计上的优越性，但更值得深思的是不变的背后隐藏着的路径依赖与行业惯性的强大力量。百年的不变或许只是暂时的，可能是颠覆性的技术尚未诞生，或是缺少一个推动行业变革的契机。
归根结底，设计无法时刻去寻求那个完美的终极方案，而是在多重约束条件下寻找平衡——既要权衡用户习惯与使用体验，又要兼顾商业成本、行业发展情况与规模化需求，甚至还要回应文化传承与社会伦理的争议。同时，作为设计师也需要保持对行业规范与惯例的审视与批判意识，警惕将“长期不变”等同于“无可优化”，在考虑用户习惯转换成本的前提下，积极探索更适配当下需求的创新方案。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com