用户 数据 按钮 早期的设计主要靠感觉和审美，慢慢的设计越来越讲究方法论和心理学，以后还可以再加一种，那就是依靠数据，它将让每个人都能获益。本文将从什么是好的运营设计出发，分析运营设计师如何通过设计语言去帮助运营活动提升数据的思路与技巧。拓展阅读：如何高效完成运营设计？大厂高手总结了这3个方面！前言在现如今的社会中，每天都有各式各样的商战。阅读文章 > 什么是好的运营设计？对于很多设计师来说，设计的好不好看？风格独不独特？专业表现力如何？在设计领域里有没有开创先河？可能是更看重的。而对于业务方来说，活动的数据好不好？市场反应如何？能否在此成功案例基础上建立一个成功的商业标准？是业务方更看重的。设计师追求的是运营活动的设计品“质”，而业务方则更追求的是运营活动数据“量”，各有侧重点，但如果只纯粹的追求一面，那肯定是不确切的。好的运营设计，应该是“质”和“量”两者兼具，在保证设计专业性的同时运用视觉语言吸引用户参与活动，达到多流量、多曝光、多转化等目的，从而帮助业务提升商业价值，才称得上好的运营设计。简单讲，有“质”有“量”的设计才是好的运营设计。运营设计应该关注哪些数据“量”？正常的 DAU、MAU、CTR、CVR、GMV，我们都需要理解这些数据代表的含义；但有一点需要注意，数据跟设计的影响关联度到底有多大，因为有的数据不一定是设计改动就会带来的，而是诸多其它因素变动导致的。那影响活动数据“量”的因素有很多，如投放渠道、投放时间、活动成本、产品价格，口碑、玩法以及页面的适配性、流畅度等等都有关系。常见数据指标：用6个章节，帮你掌握常见的数据指标和数据分析模型一文读懂设计师应该懂的数据指标和数据分析模型。阅读文章 > 举个例子，用户的活跃数据，比如日活 DAU 与月活 MAU，往往跟内容与服务本身的质量有关系。设计很难影响到活跃度，用户并不怎么会因为你的设计，而特地跑过来瞄两眼，除非你的设计也是属于内容的一部分；所以这块需要你自己多想想，把其中的因果关系梳理清楚。所以，我们的更多精力，往往可以放在点击率 CTR 上，这个才比较能代表，你的设计是否能吸引到用户点击，是否能吸引到用户进入详情页消费。那是不是提高了资源位/落地页的点击就一定能提高业务转化？并不是，提高点击可以说是变相提高了曝光，意味着有更多的销售机会，但下单转化是受很多方面的因素影响的，单纯提高点击其实不一定能提高销售转化，但正如上所述，我们能通过设计上的一些小小的“技巧”来帮助业务创造更多的机会，正是我们运营设计的价值。所以对于运营设计来说，着重需要关注的是前两层，资源位和落地页的点击率 CTR。那今天我就举几个小例子，分享一下帮助业务创造更多机会的设计小技巧：资源位1. 版式结构针对 banner 图中，左边放文案/商品哪种点击更好而进行测试测试结果显示手机类新品广告是左边放商品，右边放文案的效果更好，具体原因是什么？我们可以先看看其他类目的测试情况。其他类目包括美妆、家具以及虚拟类等等，均是左边放文案，右边放商品点击更高，这时我们再看看具体原因究竟是什么。首先有一个前提，人类的阅读惯性是从左至右、从上至下的一个过程。对应我们的 banner 来说，自然是左边区域的信息更容易被用户接收得到。基于这个前提，我们再看回案例。以上数据内容引自分期乐广告研究所首先左边是推新品手机的广告，手机类有什么品牌，有什么新品上市，关注这块的用户都比较了解（品牌方早已有铺天盖地的宣传），这时先看图就知道是不是他们所需要的，也就是说左边放商品的识别成本更低，于是点击会更好；而其他类目或卖场活动由于品牌十分繁杂，缺少知名爆款，用户其实是很难会被商品图吸引的。用户更多是先看有什么优惠，然后再进去看看有没自己喜欢的，这时候左边放文案的识别成本更低，点击也就更高。因此不同类目的用户诉求不同，应根据用户的需求来决定版式形式。2. 设计形式之前商旅有一个系列化的运营活动-差旅图鉴城市篇，会根据不同城市属性，介绍优质的酒店内容，引导用户预订。为了能体现系列化，在设计上，采用相同的设计风格，以此来帮助用户培养活动心智。广州篇上线之后，点击率不错并高于平均点击。但当北京篇上线后，数据呈现下滑趋势，而且低于平均数值。在合肥篇上线前，复盘了数据回落的原因：1）视觉较为相似，容易引起用户视觉疲劳。2）城市名太小，用户容易忽略，以为是同一个活动。因此合肥篇 banner 在设计形式上以极简的文字放大并突出城市名字再加上醒目的按钮来测试点击效果。没想到合肥篇上线后，点击率飙升，并超过之前其他城市篇的点击数据，大大超出预期。当资源位点击率遇到瓶颈的时候，不妨试试改变下设计形式，说不定是一个突破口。3. 动效在实践中我们发现，用户对动态的元素关注度是最高的，其次是色彩最后是明度。通过合理的优先级规划，可以有效的吸引用户注意力，让他们关注设计师想让他们关注的东西。在 banner 中，行动点按钮优先级最高，所以可以采用动态按钮，成为用户最关注的东西引导他点击。我们在携程商旅的入口进行动效按钮的首次尝试，通过和过往 banner 平均点击率对比，动效可显著提升点击率。落地页在设计移动端的落地页面时，一定要注意首屏主图高度的设置。常规的主图一般高度都定在 600px-750px 左右，余下一屏能展现的内容区域有限。如果将头部高度缩短，从而用户也可以在首屏看到更多信息，引导用户有兴趣向下滑动。于是我们将主图高度缩减到 550px。2. 分割线符号化视觉分割线是一种布局元素，有助于将主图和内容区清晰划分。使用分割线的目的在于使布局变得清晰，更易于用户理解。我们将携程商旅的 logo 为基础图形进行创意演变，和分割线相结合，为品牌营销传播制造抓手的同时也能和其他竞品产生视觉差异化。3. CTA 按钮位置CTA，Call to Action，行为召唤，是一种营销术语。用普通人类语言说，就是通过一些形式（通常都是按钮）让用户采取下一步行动，通过提升点击率来进一步提升转化率。能够为产品带来正向价值的按钮（关注、支付、下单、订阅等）都是 CTA 按钮，因此，作为页面中的 CTA 按钮，优先级是最高的。根据@Josh Clark 屏幕拇指原则，将按钮放在屏幕底部可以有效降低点击行为所消耗的成本。通常一屏内无法放满所有的内容，如果放在第二屏甚至长图末尾，对点击来说是大打折扣的。所以对于 CTA 按钮，一般都采用吸底处理。3 月底上线的促开通「对公支付」的活动上，我们按照以上三点设计策略进行了落地页规范化设计，并在 CTA 按钮上增加了动态的效果有效的吸引用户注意，帮助页面提升点击率。如何提高CTA按钮的点击率：学会这3个方面，帮你提高CTA按钮的点击率怎样设计 CTA 按钮，能够增加点击率和转化率呢？阅读文章 > 落地页设计，常见的页面信息结构：主图+内容区，主图：主副标题+氛围图；内容区：模块平铺/叠加，做设计之前就需要对页面中的内容进行布局的规范化，包括 logo 位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，给用户带来一致体验和品牌感知。呈现效果写在最后无论是用数据指标做效果衡量，还是用数据指标进行问题判断和原因锁定，客观公正的态度和科学的实验方法都是最重要的。数据相关的知识体系非常复杂，甚至需要有专职的数据分析师或用户研究员参与，文中列举的是一些基础的数据分析，或许不太全面，也是个人阶段性的心得总结，不足之处请多包涵，欢迎大家一起讨论。欢迎关注作者微信公众号：「TripDesign」本篇来源：优设网原文地址：https://www.uisdc.com/operation-design-thinking-skill
按钮 操作 用户 一、前言众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。本期将探讨这些隐藏在细微处的交互差异，从而更深入了解用户体验中设备/行为/界面的关系。更多差异分析：中西方电商网站设计有哪些差异？我总结了这3个！作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。阅读文章 > 二、五个小案例1. 输入框的清除按钮清除按钮（clear button）是用来清除输入框内容的按钮。当输入框中存在内容时，出现在输入框的末端，点击后可清空已输入内容。pc 通过键鼠操作可以快速删除，但基于触屏交互的移动端删除操作较为麻烦。因此清除按钮在移动端中更常见，特别是在登录注册、搜索框等页面。清除按钮可以快速清空内容，提高操作效率，降低输入错误时的负面影响。虽然在 web 界面中很少使用上述的清除按钮，但“快速清除内容”的需求依然存在。主要出现在多项内容同时清空的场景，例如 b 端筛选中常用的“重置/清除”功能，以及多选框中快速清空选项。2. Hover 态光标 hover（悬停）是 PC 端的常用的轻量交互操作，当光标悬停时界面元素会产生状态改变。Hover 可以为用户显示隐藏的信息（展示 tooltips/二级菜单）；或指示按钮状态，提示用户此处可点击触发事件。但是移动端的光标（手指）不会长期悬停在屏幕上，所以不会有 hover 态。而且指尖轻触即表示“点击”，因此按钮将直接从“normal”变为“pressed”状态。相比于 pc 少了“hover”作为中间状态，因此在界面设计上移动端按钮需要明确的引导性，以传递“此处可点击”的信息。对于 hover 的二级菜单，移动端需要多点击一步展开，或者 tab 切换进行快速跳转。3. 按钮 VS 手势复杂的手势输入是移动端的优势，但 PC 端需要更多按钮来承载功能。下拉刷新是移动端 feed 流常用的操作，将页面刷新和下滑手势丝滑的结合起来。在 PC 中如要实现内容区域的便捷刷新，则需要添加一个[刷新]按钮。在 banner 轮播中，pc 通常会提供准确的“上/下一页”按钮，而移动端中普遍通过滑动查看上/下一张。类似的案例还有图片放大缩小、视频音量调节。究其原因，鼠标操作一般都有精确的操作/点击对象，因此通过按钮触发事件更为普遍。手势操作可以基于整体对象进行滑动/拖拽，这是符合用户手势操作心智的交互方式。同时手势操作的准确度低，屏幕空间有限，用手势代替按钮的性价比很高。4. 长按与右键右键呼出更多菜单是 PC 端的常用操作，移动端中的对应操作则由单击长按完成。而对于针对对象的编辑菜单，在 pc 端需要选中文本对象后需要点击右键，而移动端中选中文本后会立刻弹出菜单。这由于移动端中没有像"ctrl+c""ctrl+v"一样的快捷操作，快速弹出菜单减少用户操作步骤；而且选中后若再次叠加一个长按行为，很容易误判成单击从而取消选中。5. 弹窗PC 端信息反馈的样式更加多样，包括 tooltip、toast、message、drawer 等。相比移动端有更多非模态弹窗，应用方式更灵活，用户使用过程流畅。由于屏幕面积小，移动端弹窗面积占比更大，对用户而言打断感受更强，在设计过程中需要谨慎。同时，移动端和 pc 的弹窗按钮位置也有所区别。目前移动端中强引导按钮普遍在右侧，而 win 系统中强引导按钮在左侧（MacOS 则在右侧）。三、小结交互方式差异深刻影响了 PC 和移动端界面形态，这些设计细节隐藏在日常交互行为中。虽然使用已有组件库时很容易忽略，在多端系统设计过程中依然需要注意这些差异性细节。移动端缺少 hover输入相对不便点击准确性低手势操作便捷长摁呼出菜单PC 端hover 能实现轻量级的交互输入方式高效快捷光标点击准确右键呼出菜单即使是相同的产品功能也会产生差异化的交互变体，这些变化可能是基于设备限制、程序限制或人机交互行为。在多端产品时，如果忽略了这些交互细节，除了影响产品可用性，还可能违背用户的使用习惯，导致产品体验细节的缺位。整体来看，交互界面不仅是功能的可视化载体，他还缝合了设备应用和用户行为，是产品使用流程的中枢。往前，界面/交互设计中应该兼容硬件能力，并传递准确的用户输入数据；往后，设计应该向用户传递设备的能供性，将设备能力转换成可感知的界面上的能供性，从而为用户提供完整且细致的产品体验流程。欢迎关注作者微信公众号：「ASAK设计」本篇来源：优设网原文地址：https://www.uisdc.com/pc-mobile-interaction-difference
栅格 按钮 组件 新的一年，先祝大家运势涨如脱兔，因为年前和过年这段时间工作没那么忙，就抽空继续整理了一些工作中对B端设计的总结，希望可以带给需要的人一些启发。如有纰漏，欢迎各路大神指正。上一篇说到了设计原则，接下来我们讲讲 B 端常用组件的内容。超全面的B端设计规范指南（一）：设计原则前言B 端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态，在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解，希望可以带来一些启发。阅读文章 > 谈到 B 端组件，很多人的印象是多且杂，想要全面准确的熟悉这些它们，需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情，我一般是按照使用场景去对组件分类整理。下面我们根据这个分类框架来逐个聊聊这些组件。一、基础组件说到基础组件，我想再将其细分成两个大类：一类是通用组件；一类是栅格/导航。怎么去更深刻的理解这两类的区别呢，我们可以打个这样的形象比方：通过这个比方我们不难理解，栅格/导航是先给页面定下了基本框架，而通用组件则是在这个框架基础上搭建页面的所用到基本元素。1. 通用组件常见通用组件一般包含：色彩/字体/间距/圆角/分割线/按钮。需要注意的是，通用组件看起来似乎很简单，但却是决定产品品牌调性、界面细节品质的重要因素，在设计过程中需要引起我们的高度重视。色彩色彩可分为主色，功能色，中性色三类。下面谈谈这三类颜色如何配置，以及如何定义这些颜色梯度。① 主色主色的选取主色作为产品的主要色调，在选取时应当优先选择品牌色，但有一点要注意的是 B 端和 C 端不一样，B 端一般不适合采用暖色系作为主色，如果品牌色为暖色调，则尽量考虑另选取一个冷色系作为主色，原因有两点：一是为了避免和警告、错误色冲突，产生歧义；二是冷色系带有商务、专业、冷静的情感，更符合 B 端产品调性。同时主色选取应避免高亮、荧光色、灰调高的颜色。主色的应用主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。② 功能色功能色主要用于页面表征状态，常见有成功色、警告色、报错色等。成功色主要用于操作结果成功提示以及标签配色等。警告色主要用于警告提醒功能以及标签配色等。报错色主要用于系统报错提示、圆点提示、以及标签配色等。③ 中性色中性色在页面设计中应用非常广泛，从线条到文字再到图形等等都可以见到它的影子。Tips：无论我们主色调是什么，中性色在调色时建议可加入适量的蓝色调，可让页面观感更清爽。④ 颜色梯度选取好了颜色后，怎么去更合理的定义每个颜色的梯度呢？（这里主要指对主色以及功能色定义梯度）我的方法是给颜色加一层半透明黑/白遮罩，当我们需要浅色，通过调整白色遮罩透明度得到合适颜色；而当我们需要深色时，则通过调整黑色遮罩透明度得到合适颜色。这样定义颜色梯优点是后续如果需要更改配色，只需一键替换全局色即可，大大提高工作效率。文字文字规范包含字体、字号、字重、行高等。① 字体/字重B 端字体/字重一般按照如下规范即可：② 字号不同于 C 端，B 端在字号选择上应当尽量保持克制。研究表明，Web 端上正文字号为 14 时，可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级，优先级从高到低的手法应该是颜色、字重、字号，也就是说一般尽量不采用字号大小区分文字层级。③ 行高行高可以参照下面的公式或行高参照表快速获得，如果通过公式算出行高非整数或非偶数，可就近取偶整数。间距关于间距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考虑到 4 的颗粒度偏小，因此可优先考虑 8px 的倍数作为间距值，在一些特殊场景可采用 4px 的倍数间距值。分割线分割线宽度一般统一为 1px 即可，同时注意颜色不可过深，以免干扰主体信息。如果需要不同层级分割线，可用颜色深浅来区分。圆角圆角大小一般根据使用场景控制在 2-3 个梯度即可，既不能全部统一一个圆角值，同时也不适合出现过多圆角值。同时圆角值不要过大，建议控制在 2-6px，以符合 B 端产品严谨专业调性。按钮这里从按钮的大小/状态/排放位置几个纬度来讲。① 按钮尺寸按钮高度一般情况下可以设置 3-4 种尺寸按钮，足以满足各种使用场景。至于按钮宽度，我们一般定义一个最小值，当超过最小值时，可设置 padding 值，按钮宽度根据内容自适应。② 按钮状态操作按钮过程中，按钮会呈现不同的交互状态。③ 按钮位置对于主次按钮组合，主次按钮排放位置应该怎么规定呢？可分为两种场景：一是当为从左到右阅读顺序时，主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时，主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时，应权衡优先级做出取舍。2. 栅格/导航熟悉通用组件后，我们要通栅格/导航来确定产品页面框架。栅格栅格可以有效地保证设计的一致性、让页面布局更具规律，并提高团队协作效率。应该如何设计栅格呢？① 栅格区域的划定我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层，而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。② 栅格自适应规则随着页面宽度变化，一般来说是通过栏宽变化实现自适应。③ 栅格栏数的确定根据页面内容丰富程度，栅格栏数一般定 12 或者 24 栏，考虑到 B 端产品功能往往比较复杂，建议采用 24 栏即可。④ 上下布局栅格⑤ 左右布局栅格导航导航可分为全局导航与局部导航。① 全局导航全局导航包含顶部导航、侧边导航、混合导航。这三种导航样式各具特点，应结合产品特性选择合适的导航样式。这里要注意的一点是，当产品可用性和用户体验产生冲突时，应优先保证产品可用性。② 局部导航局部导航包含面包屑、标签页、步骤条、分页器。面包屑面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系，并且可以快速回到上几级导航。标签页标签页可以帮助用户在一个页面实现快速切换不同内容，提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。步骤条当任务复杂或者存在先后关系时，可将其分解成一系列步骤，这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条，作用包含 3 点：一是让用户对操作流程长度和步骤有个预期，二是明确知道自己目前所在步骤，三是可以对用户的任务完成度有明确的度量。步骤条一般分为横向与纵向两种样式。步骤条小 Tips：当步骤条中有操作难度偏大的内容时，为了提高用户操作完成率，我们可以考虑把其放在靠后的步骤中，原因是用户前面已经完成了大部分简单操作，后面碰到高难度操作后，出于损失厌恶心理，不会轻易放弃操作。分页器当有大量内容需要展现时进行分页加载处理，分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。分页器一般分为迷你、简易、自定义三种样式。妙用分页器小 Tips：当表格中需要对数据全选操作时，为了提高操作效率，可将自定义每页跳数调到最大。例如一共 100 条数据，默认每页 10 条数据，要完成全选需要点击 9 次翻页，10 次全选（表格的全选框勾选后一般只选中当前页面全部数据，而不是所有页面总数据），当把每页条数调整为 50 后，则只需翻页 1 次，点击 2 次全选即可。到这里关于 B 端的基础组件就全部梳理完了，后续我们就来揭开展示组件的神秘面纱。部分参考资料：《B 端产品设计-Mia》《Ant Design》本篇来源：优设网原文地址：https://www.uisdc.com/design-principles-3
按钮 操作 让人 不论做什么产品，界面上几乎都少不了「确定」按钮。例如：操作提示时、进行选择时、填写表单时……完成、保存、下单……各种代表“确定某一步骤”的按钮，都可以统称为确定按钮。以前的产品设计，大量以来确定按钮，但是现在的产品设计，确定按钮用得越来越少了。倒不是因为不需要确定操作了，而是除了「确定按钮」之外，设计师们发现了更好的方式。往期细节分析回顾：淘宝网页设计摆烂？淘宝京东网页细节体验分析最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。阅读文章 > 一、能自动「确定」，就不需要按钮有一句话说：最好的交互就是没有交互同样，最好的「确定」按钮，其实是没有按钮。例如，手机锁屏时，输入密码后不需要确定按钮就可以直接验证进入。能这么做是因为手机锁屏密码固定六位数，而电脑的锁屏密码通常不确定，所以还是需要一个「确定」按钮。这说明，如果能够预料到用户的操作数量，且操作很简单的话，是完全可以考虑去掉「确定」按钮的。二、不是什么时候，都适合写「确定」通常「确定」字面上可以表示：“我知道了/就这样”。如果是提示或者是简单的操作，则比较适合使用「确定」文案。三、把确定了什么写出来如果是发送、登录、购买、支付……这类目的性很强的操作，与其写「确定」还不如直接把操作目的写出来。不然，如果只写「确定」，让人容易犯迷糊。四、进行了输入/修改，得用「保存」输入操作后，用户最怕丢失信息没有保存，回头得重新写。如果只是简单的表单，例如设置用户名什么的，重来一次倒也无所谓。但如果是填写项达到三、四条甚至更多，看不到「保存」两个字难免担心数据丢失。如果按钮上写清楚「保存」两个字，也让人安心一些。如果是自动保存，也需要把相应反馈展示出来。五、只是结束流程而非操作，可以用「完成」其实「完成」按钮大多可以用「确定」替代。但是「完成」的特别之处，是表达了“结束流程”的概念。所以，如果想让用户感觉按下按钮之后不会进行任何其它操作，而仅仅只是结束流程而已，则很时候使用「完成」。六、工具类产品，可以用「XX 并 XX」很多工具类产品，为了操作效率会把两个操作并列起来。例如我现在打在所用的公众号编辑器，就有一个「保存并群发」的按钮：这样做挺好的，工具类产品效率最重要美观是其次。两个经常要连贯执行的操作，合为一个按钮能够减少没必要的点击。而一旦把操作合并了，肯定要写清楚比较好。否则如果没说明白，既让人难以理解，而且点起来又不放心，导致学习成本大大增加。有一个问题是，如果文字太长了，可以考虑简化按钮文案并在旁边加点提示。工具类产品效率最重要美观是其次，因为如果不写清楚很难让人理解。以上是我自己做 B/C 端各类产品过程中，对「确定」按钮的思考总结。如果大家有其它的见解或者补充，欢迎评论。欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/disappearing-ok-button
按钮 形式 需求 签到的存在不仅可以增加用户的黏性，也是激活用户参与度的关键因素之一。签到按钮在 UI 设计场景中，算是较为常见的一个类型，一个好的签到按钮不仅可以提高用户的关注度，也能激发用户的点击欲。这就是给你的一个关于签到设计的小需求：这个小需求看起来很常见，交互设计也许给你的是签到两个字，也有可能帮你画了一个外框。总归它是显得很普通的，是不是没有一点设计感呢？那我们如何去增加设计感，还要有自己的特色，做出一个差异化的签到按钮呢？让我们带着这个问题，和黑马哥一起卷起袖子开干吧！签到功能交互设计分析：签到功能该怎么设计？从12个方面详细解析！本文是关于签到功能的视觉汇总分析。阅读文章 > 一、签到设计的类型在开始案例实战之前得先梳理一下关于签到设计的类型，方便我们挑选出最适合当前产品的风格。1. 纯文字形式纯文字形式属于最为简单的样式，有直接文字展示、文字带下滑线、文字加箭头等，这个形式不是很建议，缺少设计感和用户关注度。2. 按钮形式为了提高签到的点击属性，通常以按钮的形式设计较为稳妥，也就是我们说的签到按钮。按钮通常是带圆角的和全圆角形式，也分为线性外框、面性外框、质感外框等。想要设计得比较突出，通常会在按钮的质感上面进行视觉表现，增加光影质感和纹理图形等装饰。比如：极光风（弥散光）、流体渐变、图形纹理等都是不错的方向。3. 文字加图标形式在签到按钮的基础上，进行进一步强化就会配合图标或者图形进行视觉感增强。图标设计的角度出发发挥性也比较大，便于设计师做出更多方案。图形的角度可以是 IP 形象的结合，不仅可以提高情感化设计，也能做出差异化的设计方案。4. 微动效的形式微动效相较于静态表达来说，自然是要更为突出一些，签到按钮动态形式也是较为常见的存在。如果想要突出签到设计，微动效的表达是不会让你失望的。5. 特殊造型形式常规的形式依然离不开按钮的表达，为了打破常规形成差异化的设计，在签到按钮造型上面也是可以进一步深思的。在能够体现出点击属性的前提下，我们可以结合产品属性和业务特征，探索出符合属性范围的造型，也能使得签到设计更有特色。小结当我们梳理了一些常见的签到设计类型之后，就可以结合需求选择比较贴合的形式。当然，也可以创造出不一样的设计，下面就和黑马哥一起来演示一下吧！二、签到按钮设计实战需求：为一个充电桩产品设计签到按钮，需要体现出产品的服务属性，也要能变得更有特色。UI 设计师拿到这个需求都会觉得：这个也太简单了。于是就会快速的做出几个样式，虽然毫无设计感可言，但是老板喜欢就可以啦！不过，如果老板不喜欢呢，有没有思考过如何留有后手。1. 分析总结无论需求的大小，个人都会先进行一些简单的分析和总结。要知道别人做出来都是啥样式，然后再总结这些设计都有什么方法论。也就是本文开篇总结的一样，虽然很简短，但是总结有助于让自己更有把握。2. 梳理关键词关键词梳理可以打开我们的思路，虽然只是一个按钮，但是我们也可以通过关键词发散出更有意思的设计表达。比如充电桩这个产品我们可以梳理出哪些关键词呢？3. 绘制草图如果根据关键词都去进行电脑绘制比较耗费时间，先进行一些初步的草图有助于灵感的快速表现。4. 确定思路通过草图我们可以发散思维，选择出几个具有代表性的方案进行电脑绘制。这里黑马哥选择了电池这个表达作为示意，不仅可以体现充电的概念，也能体现出设计差异。5. 绘制初步造型只要思路确定了，绘制起来就比较快啦！快速把电池的造型绘制出来，然后再结合按钮的特征进行微调，以满足“签到”文案在造型轮廓中的布局。6. 初步配色确定造型后进行了初步的配色，利用大色块把整体的配色关系体现出来，这里也要思考动态表达的色彩关系。7. 质感深入很多设计师都只是进行简单的层级表达，缺少质感深入的技巧。我们要通过色彩变化体现出造型的结构特征，也要通过光影处理把电池的质感强化出来。8. 字体处理大部分情况下对于 UI 设计师来说都会选择一些常规的系统级字体，不过这里作为一个按钮来说我们在字体的选择上面可以突破。这里我选择了阿里妈妈数黑体作为签到的字体，然后也进行了一些质感处理，贴合电池按钮的设计表达。9. 最终效果通过对字体和电池造型的绘制，完成了这个不一样的签到按钮。我们再将按钮放到界面场景中看一下，最后结合界面的背景做一下投影等处理，这个关于签到按钮的小需求就搞定啦！小作业以上的静态方案算是完成了，这里也给大家布置一些发散的小作业。如果要做动态表达，你会如何做？如果这里要体现签到送礼，不改变当前设计基础的前提下，你会从哪些方面入手？欢迎大家进行思考，尝试去完成这个小作业，大家有什么新的想法也可以微信黑马哥进行交流。三、小结通过一个关于签到按钮的小需求和大家进行了一些设计交流，设计的思考带有一定的主观性，我们在自己的需求中还需结合实际的情况做出调整。需求不分大小，每一个从自己手中出去的设计方案，我们都要尽力做到最完美，体现出自己的职业态度和设计能力。本文观点仅作为个人经验表达，如果觉得不错我们互相进步，如有不足欢迎大家留言补充。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/sign-in-function-design
按钮 操作 用户 提到按钮，大部分人印象就是文字加个背景框，并没有太多需要设计的空间。但是作为 B 端设计师，相信很多同学在工作过程中都产生过以下问题：按钮作为最基本的交互单位之一，几乎在每个页面中我们都会使用到。由于不同行业下业务场景的复杂性，很多时候很难直接参照其他产品的按钮进行复用，也无法用一套布置方案复用所有场景，所以作为 B 端设计师需要对按钮控件具备足够的认知，理解其背后的使用逻辑和规范，才能满足多层级跨场景的设计需要。本文结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对各位 B 端设计师同学的日常工作和学习有所帮助。更多按钮设计干货：万字干货！3个维度帮你有理有据做好CTA按钮设计任何设计师都曾经与 CTA 按钮打过交道。阅读文章 > 一、按钮的发展历史在详细介绍按钮前，我们先简单了解下按钮的发展历史。按钮的概念起初是源自现实物理世界的实体按钮，在日常生活中如电源开关、计算器、电话等都是通过实体按钮进行控制，由于其简单直观易操作的特性，即使如今各种电子产品都逐渐发展为触控屏操作，实体按钮依旧被保留了下来。当数字屏诞生后，人机交互设计开始走向数字屏幕后，为方便用户理解，在很长一段时间内设计师都是采用拟物风按钮来暗示用户可执行的操作。伴随着客户端设备升级和开发方式的变更，至 2013 年 Apple 在 iOS7 上第一次采用了扁平化设计，至此按钮样式开始往扁平化发展。随后历经了多年发展，按钮的样式开始层出不穷，但是无论样式如何变更，其背后的体验交互逻辑依旧是物理世界按钮的映射。二、什么是 B 端中的按钮1. 按钮的定义在 B 端设计中什么样的组件可以定义为按钮？我们先来看看国内外设计系统中对按钮组件的定义：总结来说，按钮可以理解为用于承载即时操作和命令的组件。由于 B 端产品业务逻辑复杂、页面流程多，相较于传统意义上的按钮，B 端中的按钮被设定为可复用、规范化的组件，通过对组件元素进行拆解、归纳、重组，将其划分为特定类型的组件方便管理和使用。按钮相较于输入框、选择器、单选框等控件无法进行数据输入，相较于标签、文字提示等控件也无法进行信息浏览，其关键在于「即时性」和「承载操作」，既可单独完成操作，也可与其他控件联动，作为触发操作的行动点。2. 容易与按钮混淆的控件① 标签 Tag虽然同样翻译为标签，但是此处指的是 Tag 标签，而非 Tabs 标签页。标签在样式上与按钮几乎相同，且同样可以添加图标标识和触发操作。两者的区别在于，标签侧重于信息的选择、筛选和分类，而按钮则只是单纯用于触发即时操作，因此很多时候标签会设置不同颜色样式以便信息区分。② 开关 Switch和其他录入控件相比，开关 Switch 最显著的特点便是和按钮一样触发后立即生效，因此很多初级设计师很容易将其与按钮归为一类。其区别是，开关承载的是两种互斥状态的切换，如打开/关闭、显示/隐藏、启用/禁用等，此外由于在视觉上符合用户对现实世界中开关的认知，所以可以直接展示当前项的状态。③ 单选/多选框 Radio/Checkbox单选框和多选框一般用于状态标记，但是无法直接触发操作，所以通常会和按钮配合进行使用。最常见的搭配场景便是在登录页，用户勾选「记住密码」或「自动登录」后标记其状态，再点击按钮进行登录。三、按钮的原子拆解相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。内容层：图标和文字自由组合。内容层作为操作引导的核心必须存在。容器层：控制颜色、圆角、描边、投影等样式，有些设计系统下还会加上交互动效，提升用户体验感。四、如何区分按钮类型在查阅大厂的设计规范时，相信以下按钮名称大家应该都不陌生：主按钮、悬浮按钮、图标按钮、危险按钮、下拉按钮、文字按钮、CTA 按钮……很多新手设计师会产生疑惑：为什么要划分如此多的按钮类型？这些按钮间的区别是什么？为什么各家设计系统下按钮分类都不相同，我应该选择哪种作为参考？为了区分好按钮类型，关键要先明确类目划分的边界。这里为了方便大家学习，我从按钮的强调程度和使用场景 2 个维度将按钮进行划分，基本涵盖了常见的按钮类型：1. 依据强调程度划分在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为 3 个层级：高度强调：承载页面上最重要和突出的行动点。为了保证视觉层级最高，通常会采用大面积主色填充或投影增加空间层级的方式进行区分，例如主按钮和 FAB 按钮（悬浮按钮）中度强调：承载仅次于最重要行动点的常规操作。为了避免太过吸引用户注意，通常采用中性色进行描边或填充，也被称之为次按钮。轻度强调：对页面中其他操作补充或可选操作。为了确保视觉上不凸显，通常不会填充背景色，常见于文字按钮和图标按钮。在轻度强调中还可以划分为弱强调（内容填充主色）和不强调（内容填充中性色），由于文字按钮填充中性色难以和正常文本进行区分，所以一般内容填充中性色只会用在图标上。由此我们得到了依据强调程度划分的几个常见按钮类型：主按钮 > 次按钮 > 文字按钮 > 图标按钮。接下来针对每种类型我们来展开说明。（FAB 按钮在 B 端页面中属于特定场景下使用的按钮，不具有通用性，故划分到使用场景中进行讨论）① 主按钮 Primary主按钮代表着页面中的核心操作项，是视觉权重最高的按钮，常用于突出提交、完成、确定等操作。为吸引用户注意，常使用品牌色填充背景引导用户视觉焦点。关于主按钮的使用需要遵循以下 2 个原则：在一个焦点任务中最多只使用一个主按钮。同时存在多个主按钮会让用户失去操作焦点，造成信息干扰。主按钮并非必须使用。如果没有必须突出的操作项，强行添加主按钮反而会打破按钮间的层级关系。② 次按钮 Secondary次按钮是使用最频繁的按钮，当在页面中不确定选择哪种按钮时，使用它往往是最安全的。次按钮通常使用中性色，其样式可以分为描边型和填充型：描边型使用最为广泛，是次按钮首选的样式，而填充型相对特殊，在不同设计系体下会根据业务场景选择是否使用。关于填充型次按钮相较于描边型，早年在 B 端产品中很少会见到使用填充型样式作为次按钮使用的，但是可以发现近几年国内外设计系统如 Arco Design、Marterial 等，开始陆续将填充型次按钮纳入到按钮组件库中。填充型次按钮更多的使用场景是在移动端上，其视觉强调程度弱于主按钮但又高于描边型，可以更好的表达组件的整体性和吸引用户注意。伴随着硬件设备的发展，桌面端和移动端的操作边界开始逐渐模糊，各产品开始追求全生态环境下的统一性。为降低用户在设备切换时的体验隔阂，一套设计系统需要能同时满足多端设备的兼容，而填充型样式更符合其场景需求。最典型的便是 iPadOS 连接鼠标操作时，悬停态下填充型按钮明显比描边型更容易被识别。如何选择次按钮的样式基于以上考虑，在工作中选择次按钮样式时可以参考以下建议：如果当前项目上已经有在使用的开源库，尽量以原有组件库为主。除非自身产品有设备互通的场景或需要同一套设计语言兼顾不同端，否则增加多余的次按钮样式只会更加复杂且影响用户的体验一致性。如果是项目是 0～1 搭建组件库，根据自身业务场景选择其中一种样式使用即可。一般桌面端产品使用描边型，如果产品生态中有移动端，为了保持设计语言的统一更建议采用填充型。此外还需考虑前端修改组件库样式时的开发成本。③ 文字按钮 Text文字按钮适合承载如取消、还原等无需特意强调的操作，通常使用在表格操作栏、表单页等场景。为了和普通文本做区分，提示当前内容可交互，需要加上链接色（一般是蓝色）提醒用户。文字按钮和链接的区别文字按钮和链接（Link）的默认样式一致，在搭建组件库时很容易发生混淆。其区别在于按钮用于发起动作，触发相应的业务逻辑，而链接的作用是导航，作为页面跳转或锚点定位的触点。为了更好地区分，可以在交互样式上进行处理：文字按钮：指针悬停时容器添加背景色。链接：指针悬停时文本添加下划线。④ 图标按钮 Icon图标按钮的视觉层级最弱，但是由于占据空间小，常用于同时展示多个操作项时使用。由于缺少文字解释，单纯的图标可能会造成用户的理解偏差，故建议在指针悬停时加上 Tooltip 的文字提示进行辅助说明，对于特定操作还可加上快捷键指引。2. 依据使用场景划分在依据强调程度划分的基础上，还有部分按钮只应用于在特定的业务场景中，所以各设计系统下的按钮分类会有所不同。以下按钮的应用场景较为频繁，故被单独划分为一类方便交流和管理。① 功能按钮 Function功能按钮顺应用户心智，采用绿色、橙黄色、红色代表了成功、警告、危险三种功能按钮，用户无需浏览按钮内容，直接通过色彩即可识别当前操作可能导致的后果。由于功能按钮的视觉权重往往比主按钮还高，在页面中需谨慎使用，避免对其他页面信息造成干扰。② 虚线按钮 Dashed相较于普通的描边型按钮，虚线按钮只承载传输文件或新增配置项等操作，为方便用户感知，将其描边设计为虚线样式。上传 Upload由于虚线按钮只能支持单纯的触发操作，在很多上传情景下不能满足其业务需求，故逐渐衍生出单独的上传组件，相较于虚线按钮：上传组件支持批量上传通常有更大的交互区域且允许支持拖拽上传，以降低用户的操作门槛搭配展示文件列表，用于对已上传文件进行预览、重新上传、删除等操作③ 幽灵按钮 Ghost顾名思义，幽灵按钮不具备实体性，一般底色为透明，其按钮的内容反色，通常使用在复杂或颜色较深的背景中，例如 banner 图、官网首图等，避免按钮突兀地破坏背景的整体性。由于幽灵按钮使用的场景不固定，因此无须严格遵循现有规范，只要满足其特定场景下的业务需求即可。④ 行为召唤按钮 CTACTA，即“Call to Action”的缩写，意思是行为召唤。该词原本是营销领域的术语，后来逐渐引用至互联网领域中，即目的在于给用户一个明确的反馈：当前事件的操作流程已经完成或即将发起一个新的流程。CTA 按钮之所以会被单独归类，因为当按钮作为吸引用户采取点击行为的载体时，时常在事件操作的最后一步出现，作为产品的关键触点之一，可以有效提高页面或屏幕的转化。也因此当页面中存在多个按钮时，CTA 按钮的优先级往往是最高的，可以通过色彩对比、元素点缀等方式引导用户点击。⑤ 悬浮按钮 FAB悬浮按钮 FAB，即 Floating Action Buttons 的缩写，其特点是会始终悬浮在页面的固定位置，不会随着页面滚动而消失。在 B 端产品中，FAB 按钮更多的使用场景是承载全局性的附属功能，常见操作包括咨询、客服、快捷键、点赞、收藏、分享、回到顶部等。在设计 FAB 按钮时需注意以下要点：不能干扰用户在当前页的正常操作和浏览。尽量放置在页面的固定位置，当操作数过多时可将其他操作下钻至更多按钮中。承载操作须是当前页的全局操作，无须与其他页面元素发生联动即可触发。如不能承载保存、删除、清空等操作。⑥ 下拉菜单 Dropdown按钮组不是单独的按钮类目，而是按钮组的集合体，当多个同级操作项同时出现，但不想占有太多页面空间时使用。通常按钮组会将最关键的主操作露出，其他操作收入更多操作项中。严格来说 下拉菜单 Dropdown 并不属于按钮类型，但因为其使用场景较为频繁且时常用来承载多个按钮操作，故在此处作为单独类型进行讲解。下拉菜单作为操作命令集合使用时，可以简单理解成按钮组：将多个操作按钮收纳到同一菜单下。在使用时有两点需要额外注意：和选择器 Select 的区别选择器 Select 属于录入控件，在基本形态上和 下拉菜单 Dropdown 高度相似，都是通过下拉浮层来容纳更多信息，在实际应用时经常容易被混淆。要区分两种组件，最关键是理解其使用场景：下拉菜单：当页面上的操作命令过多时，用此组件可以收纳操作元素。核心是菜单导航和命令集合选择器：用于一组选项中选择一个或多个数值。核心表单填写和数据筛选样式与操作项的关系当下拉菜单用来承载操作项时，各操作项关联性也会引起下拉菜单样式上的区别，这里用实际的案例辅助大家理解：乍一看似乎都是差不多的样式，在工作中很多设计师也是随机选择其中一种进行使用，但是作为设计师，就是应该从细节之处见真章，每一处设计都应有理有据。简单来说，以上三种组合按钮中的操作关联性是逐渐疏远的，这一点从按钮样式上也可以看出。新建一：合并同类项。突出新建操作本身，更多操作项是新增的数据类型进行区分，减少重复文案的出现。新建二：操作延展。强调的是数据导入的形式，提供更多操作渠道供用户选择。新建三：信息收纳。各操作项之间并没有关联性，只是缓解空间压力或突出使用最频繁的操作。五、按钮的交互状态在了解了以上按钮类型，我们来看看按钮的交互状态。不管哪种按钮类型都会存在相应的交互状态，设计师在交付设计稿时需要将不同状态下的按钮样式进行标注，方便前端开发。在刚开始接触按钮时也曾被一堆状态给乱花了眼，光是理解不同状态的区别已经头大。其实回头来看，开始只要记住 4 种最关键的按钮状态便可满足大部分的使用场景，即按钮的正常态、悬停态、点击态和禁用态。在日常工作中，没有设置聚焦态和加载态并不会影响用户的正常使用，但是加上后可提升用户的产品使用体验，大家可以根据开发成本和实际的业务情况考虑是否加上。1. 正常 Normal/Default按钮的初始状态，即默认情况下的基础样式，此处不多做介绍。2. 悬停 Hover当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别。悬停态通常还会配合鼠标指针变化辅助用户理解，在前端 CSS 样式表中常用 cursor:pointer，指针变化为伸出食指的手。由于悬停态是由鼠标指针移动引起，故只有设计桌面端产品时需要考虑到，而在移动设备上通过手指操作故按钮不存在悬停的状态。（在 iPadOS 更新至 13.4 版本后开始支持连接键鼠操作，但是在日常工作中很少会出现，此处不予以讨论）3. 激活/点击 Active/Press鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。4. 禁用 Disabled按钮无法操作被锁定时的状态。该状态是为避免用户误操作而设立，如在登录页未完成信息填写时将提交按钮禁用，提示用户无法点击，只有填写完必填字段后才可以点击提交。在鼠标悬停时指针变化为禁用状态，在前端 CSS 样式表中常用 cursor: not-allowed，通常会配合 tooltip 文字解释说明行动点不可用的原因，避免用户疑惑。值得一提的是，禁用按钮并非只有置灰一种样式，只降低色彩饱和度和明度也是禁用按钮的表现手法之一，且相较于置灰更方便用户识别主次按钮。以上是针对不同按钮状态的说明，这里并没有针对不同状态的样式进行详细说明，因为不同的设计体系下可能会采用不同状态样式进行展示。为方便对比，这里将常见组件库中的按钮状态进行了整理：可以发现，除了 TDesign 中描边按钮激活态下增加了中性色填充外，基本按钮状态都是保持着一致的梯度变化。这里以正常态的按钮样式为基准，将悬停和激活状态下的色彩变化进行整理：总结来看，在不同色彩的按钮上按钮状态会按照不同梯度分布：主色（品牌色）按钮色彩梯度从浅到深：激活 〉正常 〉悬停中性色按钮色彩梯度从浅到深：激活 〉悬停 〉正常之所以出现这种情况，主要是因为在搭建产品色彩体系时，品牌色一般会采用色板中间色作为主色（通常是第六个颜色），故不管往浅往深都有更多灵活调整的空间。而背景使用的中性色为了避免干扰视觉层级，通常选择色彩较浅的中性色，因此没有再往下延伸色彩梯度的空间。以上介绍的四种状态建议采用色彩组件库中色卡进行配色，上图标注了不同按钮状态的配色选择，下面是 AntD 和 ArcoD 的色板生成工具地址（关于产品取色未来会专门出一期文章进行讲解）。ArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具：https://ant.design/docs/spec/colors-cn#色板生成工具5. 聚焦 Focus该状态用于指示电脑光标的位置。在有些场景下不操控鼠标，只通过键盘方向或 Tab 切换选择页面元素进行操作，反而是更高效的操作方式。常见的聚焦态按钮样式为增加描边，有的设计系统下会采用和悬停态一样的样式。键盘操控快捷键推荐：「Tab」前进「Shift + Tab」后移「Enter」激活6. 加载 Loading表明用户操作后系统正在处理的状态。由于服务器响应或网络延迟等问题，有时候用户操作完需要间隔一段时间才能响应，加载态可缓解用户的焦虑情绪，避免用户由于未收到反馈而反复操作的情况。六、按钮设计需考虑的因素接下来便到了本文的最关键部分，也是按钮设计中出现最频繁和令人头痛的问题：我的按钮究竟应该放在哪里？在此之前先要理解按钮设计的目标是引导用户采取我们希望用户采取的行动。这就需要尽量帮助用户快速找到需要操作的按钮并了解执行该操作的结果，同时尽可能避免误操作。基于以上目标，我们从用户实际操作路径的视角来梳理按钮设计时应考虑的问题：按钮区在页面中的什么位置——空间位置有多个按钮时采用怎样的阅读顺序更合适——排列顺序按钮采用怎样的样式更合适——视觉样式1. 按钮区的空间位置当用户进入页面时，除了浏览当前页的信息内容还需要寻找接下来可执行操作的可交互区域，即按钮区。除了单纯通过视觉差异区分按钮和页面其他元素外，还需考虑到用户在信息浏览过程中的视觉动线。结合古腾堡法则和格式塔原理，给出以下设计建议：① 放置在用户的浏览路径中在没有其他视觉效果引导时，F 型和 Z 型网页浏览模式可以作为用户视觉动线的基础指导，关于以上 2 种浏览模式网上有太多相关介绍，此处就不再赘述。② 尽可能靠近其所控制或联动的对象将关联性强的信息放在一起，可以降低阅读成本，提高用户的感知效率。2. 多按钮的排列顺序① 保持用户的操作惯性这里先讨论一下开头提到的问题：主操作项放在左边合适还是右边合适？我们先来看看一些案例：可以发现，即使是业内顶尖的互联网公司也并没有遵从同一套确定方案。对于新用户而言，确定按钮的位置对操作时间和错误率影响并没有太大差别。并由此得出更关键的结论：不要轻易改变当前产品中用户已经习惯的按钮位置。在此基础上对于操作项不固定的页面，给大家整理了以下建议：② 同类操作项按组分类最典型的案例便是编辑器类产品的操作项，将同类操作区整理分组，方便用户查找。③ 阅读顺序符合操作预期此处的阅读顺序并非特指从左往右、从上往下，而是依据用户当前视觉动线，优先满足用户预期或操作可能性最大的按钮需要最先被用户发现。考虑到人体工程学操作习惯和操作后果的影响，还需注意一些特定的场景：④ 流程操作遵循方向认知习惯流程属性的按钮如上一步、返回、后退等操作用户习惯在左边，而下一步、前进、更多等操作在右边。⑤ 破坏性操作提升操作门槛如删除或清空按钮，尽可能放置在远离主按钮的位置，甚至可以下钻至更多按钮中，避免误触。3. 按钮的视觉样式在文章开始基于强调程度划分按钮类型时，按钮的视觉样式便是基于其强调程度划分的，页面中越是需要强调的按钮其视觉权重越高。前文中只划分了主按钮、次按钮、文字按钮、图标按钮这 4 种基本类型，此外还可以通过文本粗细、内容量等方式进一步细分。七、关于按钮的其他问题1. 按钮的尺寸按钮的尺寸优先体现在其高度上，而宽度一般根据内容区大小自动适配。通常会将按钮分为大、中、小这三种规格，以满足不同场景下的使用需求。高度大尺寸：通常使用在企业官网、账号登录、导航菜单等场景中。一般高度设置为 40～64px。中尺寸：按钮的默认尺寸，适用在 B 端页面的大部分场景。一般高度设置为 28～40px。小尺寸：常用于气泡弹窗等小型控件中。一般高度设置为 12～28px。宽度关于按钮宽度需要注意的是，由于按钮内容的不固定，同规格按钮可能因为内容量差异引起视觉上的层级误判。故为了减少按钮错综不齐的情况，建议设置按钮最小宽度的界限，一般为 4 个文字+左右内边距。2. 按钮的文案相较于其他方面，似乎大家对产品文案总是保持着“点到为止”的态度，但是并不意味着文案不重要，错误的文案会让用户产生疑惑，严重影响用户体验。相反好的按钮文字甚至可以做到即使不去阅读上下文，单凭按钮文案即可做出正确的判断。在一些关键节点的 CTA 按钮，文案的优化可以带来转化率大幅度的提升。因此关注文案细节也是设计师平时需要考虑的问题。优秀的按钮文案包含以下几个要点：① 内容简洁，删除赘词按钮区域寸土寸金，每一个字都要有其存在的意义，如果删除也不影响信息表达即没必要存在。② 表达清晰，避免产生歧义文字表达清晰，避免使用用户难以理解的专业术语。③ 规范用词，不要出现错别字常见的“登陆&登录”、“收获&收货”、“即时和及时”都是容易打错的词。下方给大家整理了 常见易错的按钮文案表，建议保存收藏。④ 一致的语法表达如统一采用动宾结构：修改价格、提交工单、查看更多等。⑤ 适当的情感化表达结合自身品牌特性，在按钮中融入适当的情感化文案，也是塑造品牌心智的触点之一。3. 按钮的圆角当前市面上主流的互联网产品大多都采用了圆角设计，因为圆角矩形相较于直角更具安全感和亲和力、在相似内容中识别度更高，且圆角对信息的聚焦性更强。同样 B 端设计中通常也会在按钮中加入圆角，方便用户更高效的辨别和获取信息，但是需要注意的是圆角并非越大越好，过大的圆角会导致按钮操作热区的缩窄，更不易被点击触发。如在移动端产品上都是采用手指按压，而桌面端采用鼠标指针单击，相较之下后者对点击按钮的触发精度要求更高，也因此全圆角按钮（也被称为胶囊按钮）更适合在移动端产品上使用。此外按钮的圆角设置还需考虑到产品整体的视觉一致性，在不同场景下都要保证统一的感官体验，如在大尺寸的按钮上圆角的曲率也应设置更大。8000字干货！超全面的 Web 端按钮设计指南按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。阅读文章 > 参考链接https://mp.weixin.qq.com/s/81Xbb2zEHqJS2bABY32ztQhttps://www.zcool.com.cn/article/ZMTI3MzkzMg==.htmlhttps://www.uisdc.com/button-applicationhttps://www.zcool.com.cn/article/ZMTI2MzUwMA==.htmlhttps://www.yuque.com/yovar/bq79sy/ufeuexhttps://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/https://www.woshipm.com/pd/3104897.html本篇来源：优设网原文地址：https://www.uisdc.com/button-design-7
按钮 用户 操作 按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结 web 端按钮设计的相关知识点：本篇文章着重讲解 web 端按钮，app 端与 pc 客户端按钮有部分知识点与之相通。后期会持续更新这两个端按钮的相关知识～按钮的定义与作用1. 按钮的起源与定义在物理世界按钮是这样定义的：是一种常用的控制电器元件，常用来接通或断开“控制电路”（其中电流很小），从而达到控制电动机或其他电气设备运行目的的一种开关。在日常生活中，灯的开关、电视遥控器上的按键、汽车上的各种控制键等等都是我们 UI 按钮在物理世界的实体存在。所以在之前很长一段时间，都很流行拟物风格的按钮，即在触摸屏上展示 1:1 复制物理世界按钮样式的 UI 按钮。虽然现在 UI 按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射。所以 UI 按钮设计，是否直观、易用会直接影响用户完成整个业务流程的感受、意愿及效率。例如：使用电视遥控器调台，电视却没有任何反应——感到苦恼、无法完成调台；点击业务流程中的提交按钮，页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。在 UI 设计中，按钮的定义如下：是一个明确指示交互行为动作的组件，标记了一个操作命令，响应用户点击行为，点击后可触发一个即时操作获得相应的反馈&结果。2. 按钮的作用接下来我们看一下 UI 按钮的具体作用：作用一：触发某种功能通过操作按钮，触发功能获得相应的反馈&结果，例如：收起、展开按钮——点击收起展开页面信息作用二：引导用户进行下一步操作将按钮放在适当的位置，去引导用户进行下一步操作，避免用户不知道后续如何进行，从而提高任务流程完成率。例如：在分步骤复杂的表单最后放置的“下一步”按钮，用户填写完当前页后，点击“下一步”——进入下一个填写流程中。作用三：聚合信息使用按钮，跳转详情页面，例如：对于一些说明、隐私政策等等，如果需要展示的内容过多，但又不是当前页面的重点，可以设置一个图标按钮或文字链接按钮，通过点击触发，可跳转完整的内容详情页。作用四：培养用户习惯通过相对固定的位置、形式、文案，以及触发反馈，可以培养用户操作认知和习惯。例如：对于一些常见图标按钮，收藏、点赞、分享、说明等，用户看到类似的样式，就会知道是什么含义，点击后会获得怎样的反馈。按钮的分类与使用场景通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低接下来我们详细看一下这两大类按钮的具体细分和使用场景1. 命令按钮控件常规按钮常规按钮，有主次按钮之分。主按钮承载重要核心操作、次按钮承载辅助操作。常规按钮的常见状态主要有以下 6 种：正常状态（Normal)——按钮在页面中正常可进行点击操作的状态聚焦状态(Focus）——为方便键盘用户，展示电脑光标所在位置的一种状态。用户可以通过键盘上的Tab键对页面内的元素进行选择操作。类似于表单填写中输入框的聚焦状态(获取焦点状态），我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个，从而进行填写操作。该状态，很多产品都去掉了，但是在开发代码中是可以设定的。如果设计师合理利用，可以提高产品易用性。举个例子：表单填写过程中，用户通过键盘完成了所有的填写项目。当我们的按钮设计该状态，就可以通过键盘继续操作，先聚焦按钮，然后点击enter键进行取消或提交操作。悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态点击状态(Pressed)——鼠标点击按钮的时候，按钮给出的效果反馈状态加载状态（Loading）——点击按钮后，因为系统、网络等等原因，操作需要等待一段时间后才会跳转或生效。这个时候就需要加载状态反馈给用户，避免给用户造成困扰(疑惑有没有点击成功？），避免用户因为困扰重复操作，缓解用户的等待焦虑。禁用状态(Disabled)——表示该按钮不可点击的状态，用于页面中未达到触发条件的时候，按钮的样式。以上几种状态，通常通过改变其填充颜色的灰度和亮度来表达不同的状态，具体呈现形式，可以根据自己产品的特性去定义。下面，我们来看下主按钮和次按钮的详细定义和常见状态案例展示。主按钮主按钮为高权重按钮，与页面上的核心操作强相关，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦。主按钮可以是色块+文字，也可以是色块+图标+文字；通常为主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）次按钮次按钮也叫标准按钮，为中权重按钮，在页面中使用最多。通常使用边框+文字的形式呈现。次按钮可以是边框+文字，也可以是边框+图标+文字；通常为灰色、主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）。此处以灰色为例，展示其变化规则：图标按钮图标按钮是一种图形，样式不一，为低权重按钮，在页面中根据业务情况展示，丰富页面效果。通常以用户已经形成认知的形式去展现，例如：文字按钮/链接文字按钮、链接为低权重按钮，视觉感弱。当某个按钮在同一个页面上重复出现，为了不干扰用户视线，可以使用文字按钮，例如表格行的操作项。文字按钮、链接也可以与图标组合使用，层级略高于纯文本按钮按钮菜单菜单按钮是一种合集按钮，将页面中一些低频操作或同类型操作整合收起，以达到精简页面的效果。展现形式可以是色块、文字链接、图标等等，点击后展开具体操作供用户选择。其他命令类型按钮幽灵按钮幽灵按钮是网页设计中，以线框简单示意轮廓、文字示意功能的按钮：样式通透简约，可以与页面背景很好的融合常用于官网设计，与图片结合使用与次按钮不同点在于，不受规范约束，可以根据设计场景定制轮廓粗细、字体大小粗细等现在很多网页中，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用。（现在很多网页产品，更注重行为召唤、点击率，使用色块形式的按钮能更好的聚焦用户目光）悬浮按钮悬浮按钮是指悬浮在页面上方的按钮，不会随着页面的滚动变化消失。源自安卓的 Material Design。应用到网页上，通常承载一些咨询、客服、置顶等常用功能或者想让用户使用的功能。设计要点：悬浮按钮是按钮一种展现形式，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮，例如收藏；可用来承载常用关键操作，例如网站某个作品页面中的：收藏、评论、推荐、分享的悬浮按钮；可作为引导工具，引导用户操作，例如很多官网都会悬浮在线咨询、客服一类的按钮；可以根据不同场景，在页面中选择是否放置悬浮按钮；不要过度使用悬浮按钮，如果一个页面上悬浮按钮太多，且分散在各个地方，会干扰用户视线，使得整个页面乱糟糟的；悬浮按钮只承载正向操作，不应该执行危险破坏性的操作，例如删除。2. 选择按钮控件选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：开关按钮开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效，适合用于具有对立意义的选项，无需与命令类按钮搭配使用。当出现以下情况时，我们应该使用开关：无需确认或审核操作，即可生效选择后的结果选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时单选框单选框是只能选中其中一项的按钮，它容许用户在一组选项中选择其中一个。选项数量一般为 2-5 个平铺展示，会更快捷提供给用户进行选择描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断复选框复选框是一种可同时选中多项的基础控件，允许用户从多个选项当中选择多个选项的选择控件。选项数量一般为 2-5 个平铺展示，会更快捷提供给用户进行选择具有半选中状态(indeterminate)可以独立出现，常用于「是否同意用户协议」等场景其他状态切换按钮胶囊选择按钮胶囊选择是单选框的一种衍生样式，特点是点击面积更大，同时更强调选项。在 element 中，胶囊选择既可以作为单选按钮、也可以作为多选按钮。但个人认为，胶囊选择的样式更适合当作单选按钮。标签选择按钮标签选择按钮样式多样，可以以按钮的形式单独存在，也可以与单、复选框结合构成结合样式使用。常规按钮的视觉组成上一个章节，我们弄清楚了按钮的分类与使用场景。以上按钮中，使用最多、层级最高的就是常规按钮，接下来我们以常规按钮为例，剖析它的视觉组成、绘制技巧以及各类风格样式。1. 常规按钮的组成元素常规按钮由容器、背景、描边、圆角、图标、文案、投影组成，这些元素不是必须出现的，而是根据具体使用场景去呈现。不同的元素搭配，构成的按钮样式也不同，以传达给用户各类信息。容器：整个按钮的承载体，容纳其他组成元素。容器的形状一般为规则图形，尺寸根据页面要求制定。背景：为按钮的底色，不同颜色的底色可以表达出按钮不同的功能特性，例如红色代表危险操作；同时也是不同按钮状态的展示形式。描边：为按钮最外层的边框线条，常用于次按钮的描边。不同颜色描边可以表达出按钮不同的功能特性，例如主色描边二级按钮、灰色描边三级按钮、红色描边危险按钮；同时也是不同次按钮状态的展示形式。圆角：传达按钮气质的一种元素，可影响界面视觉风格。图标：对按钮文案的一种图形化表达，目的是为了加强按钮层级、吸引用户注意力、丰富美化页面。文案：使用合适的字号表现样式，使用精简的文字表达按钮的含义。投影：一种丰富按钮样式的设计手法，让按钮突出，更具质感、层次感。可提升按钮的视觉呈现。特殊风格才会有，一般没有。根据以上组成元素，接下来我们来详细看一下，如何设计定义这些属性，不同属性对按钮的呈现有何影响。2. 按钮的容器与尺寸制定容器的形状，需要遵循无障碍设计在一套系统中需要保持样式的统一性符合用户认知，使用用户已经形成心智模型的样式设计师如何做无障碍设计？从这五个方面出发！互联网设计师如何着手发起无障碍优化？阅读文章 > 根据不同场景大部分产品可以将按钮分成超大、大、中、小三种。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸。此处做一个通用展示。超大按钮：用于登录等具有重要意义的场景下大按钮：用于全局性操作的界面上中按钮：标准按钮，可用于各类操作场景小按钮：用于局部控件类操作界面，例如下拉面板、选择器弹窗、表格等按钮的高度如何定义？通常以 4 的倍数去制定按钮的宽度如何定义？为了保证同一个组件内，不同字数文案按钮的样式统一，可以固定 4 个字以内的按钮为一个固定宽度（min-width)，超出 4 个字设定 padding 值自适应适配。3. 按钮的背景与描边按钮的背景色与描边色，可以表达出按钮的状态，也可以表达出按钮不同的功能特性。按钮的状态在前文我们已经详细展示过了，接下来我们来看看不同颜色的按钮表达出的功能特性。通常使用的颜色有以下几类：品牌色——主题色，常用于普通信息按钮功能色——成功色、危险色（出错、失败）、警告色（提醒）其他——灰度色，用于层级较低的二级、三级按钮4. 按钮的圆角按钮的圆角，主要分为三大类直角、圆角、全圆角。圆角通常使用的是小圆角，应尽量避免大圆角。直角——圆角为0px，形状尖锐，给人严谨的感觉，常用于性质较为严谨的产品。圆角——通常控制在按钮高度的1/6及以下，以2的倍数设定，例如2px、4px、6px等。通常根据产品的定位去设定。例如钉钉、企业微信的受众比较广泛，主要按钮的圆角值为4px；飞书的受众偏年轻，主要按钮的圆角值为6px。全圆角——全圆角按钮的圆角值固定为高度的50%，按钮形状柔和。web端全圆角的使用相对以上两种比较少，因为需要考虑到鼠标的操作热区与其他控件的组合使用。另外，同一套系统中，不同大小按钮的圆角值，应当根据按钮的尺寸，按统一比例设定，而非使用固定圆角。以达到视觉比例平衡，圆角“看起来”一致。5. 按钮的文案对于按钮中的文案，需要遵循以下原则；使用合适比例的字号精简文案，避免折行使用合理、无歧义的文案6. 按钮的投影按钮的风格除了扁平风，还有渐变、轻拟物等风格。通过颜色渐变、添加投影样式，可以塑造其他风格的按钮。对于按钮的投影需要注意以下几点：基于按钮本身的色值，去设置投影样式，会让投影更干净舒适。浅色按钮应避免使用投影，否则会影响按钮的识别度，页面显脏。根据页面慎重使用投影样式，一般层级较高的主要按钮才使用。（B 端扁平风格按钮使用居多）按钮的层级与排布分析完了表层样式规范，这个章节，我们来看看按钮在界面中的具体使用。1. 按钮的层级对于页面中常用组合搭配的按钮层级如下：01～12 层级由高到低排列（具体是否有这些样式，根据产品情况确定）高权重按钮——色块按钮中权重按钮——描边按钮低权重按钮——文字按钮、图标按钮（此处我们暂不考虑独立场景、层级的按钮）2. 按钮位置web 端页面，除去顶部和侧边导航栏，主要内容页面里的按钮该如何放置排布呢？我们可以将内容页面分为以下三个部分：标题栏(Header)——主要是全局性操作按钮，例如编辑、新建等；主体内容(Body)——有两种操作按钮第一种，是局部操作按钮，例如表格内部的操作项目；第二种，是全局性完成按钮，跟随在内容后的，例如取消、确定、上一步、下一步等；底栏(Footer)——主要是全局性页面完成按钮，需要贴底固定性质的。例如取消、确定、保存等。对于弹窗页面，内容相对比较少，按钮排布方式可以如下：对于内容页和弹窗页底部按钮的对齐方式，根据具体业务场景和视觉协调度选择即可（内容页居中比较多，因为页面太大了；弹窗右对齐比较多）。注意保持，同一类场景下对齐方式一致。3. 按钮顺序：确定了按钮的放置位置，还需要确定按钮放置的顺序。放置顺序分为两步确定：第一步：确定主按钮、次按钮的顺序第二步：确定同级别按钮之间的顺序确定主、次按钮的顺序首先，我们看一下页面中按钮的阅读顺序：左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。常见问题讨论：确定和取消该怎么放？这个问题，是在设计的过程中，经常被抛出来讨论的问题，有没有固定确切的答案呢。首先说明，没有。各个平台、软件都有不同的规范。最具代表的就是：win 的用户都习惯确定在左、取消在右；mac 的用户都习惯确定在右、取消在左。个人更倾向确定在右、取消在左的放置规则，原因如下：1. 根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；2. 根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；3. 根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；4. 根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；5. 根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到 web 端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约 90%，左利手的人仅约 10%，确定按钮在右，更利于绝大多数用户的操作）对于确定和取消到底该怎么放，大家可以结合自身产品的情况定位，需要注意的是，要保证同一个产品内规范一致。确定同级别按钮的顺序对于同级别按钮，我们需要遵循以下原则去确定顺序：相关按钮临近原则，将与主按钮相关的次按钮优先放在主按钮旁边。根据业务场景，按照前文的阅读顺序规律，衡量按钮权重再进行位置分配。除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：按钮设计的原则总结&注意事项最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项1. 设计原则按钮样式符合用户心智模型按钮类型、层级分明，规则统一按钮状态清晰，操作反馈明确根据业务场景使用合适的按钮2. 设计注意事项一个操作区域至多一个主按钮主次按钮样式统一、与其他控件样式区分处理按钮样式慎用大圆角按钮中的文字，字号适中，文案精简、无歧义合理使用投影样式根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。参考文章推荐1. 「按钮的学问：确定在左，取消在右？」推荐指数：五颗星推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式按钮的学问：确定在左，取消在右？开篇layq ：确认框，顾名思义，就是对用户的关键行为进行确认。阅读文章 > 2. 「交互细节！确定按钮到底该放在左边还是右边？」推荐指数：四颗星推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好交互细节！确定按钮到底该放在左边还是右边？仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？阅读文章 > 3. 「大厂高手出品！中台组件设计指南：按钮篇 」推荐指数：五颗星推荐理由：使用完整的规范去写的文章，实打实的案例。大厂高手出品！中台组件设计指南：按钮篇希望接下来每一篇关于中台组件的分享都对大家有所帮助，本文主要分享中台组件按钮的发展史、按钮的类型、按钮的使用规范等内容。阅读文章 > 4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」推荐指数：四颗星推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。按钮规范系列！从四个方面详解「按钮位置」的设计方法@Daidai丶呆 ：两年前，我写过一篇文章《高手课堂！阅读文章 > 5. 「5000 字干货！写给新人的按钮设计指南」推荐指数：五颗星推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。5000字干货！写给新人的按钮设计指南前言说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。阅读文章 > 6. 「从 6 个层面，系统分析按钮设计的知识点」推荐指数：五颗星推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 7. 「推荐！禁用状态二三事 」推荐指数：三颗星推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项推荐！禁用状态二三事sherry ：禁用，顾名思义，代表不可用的意思。阅读文章 > 结尾整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/web-button-design-guide
操作 按钮 内容 上期我们小聊了一下弹窗的定义与使用的常见场景，本期我们来聊点实际的：弹窗的内容布局，本来本期想把常见的两种弹窗问题：弹窗的从属关系（弹窗叠弹窗）、弹窗的流程关系（连续弹窗）都讲一遍，但写完基本布局以后发现字数超了，所以弹窗这个话题从 2 期变成 3 期了。用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 弹窗的基本布局以车为例，假如我们把“车”这种物体身上的零部件分成两种：一种叫基本零件、另一种叫附件。基本零件（比如发动机）是所有车都必须要有的、没有它车就开不起来，甚至就不能叫车。而附件（比如座椅、天窗），这些东西可有可无，每一样车的配置可能都不太一样。比如车装上铲子就是铲车，装上车箱就是货车。在做规范时，做控件的逻辑和组装车是很类似的：控件的内容布局也有基本零件和附件。基本零件的差异决定了不同弹窗类型（这种差异是比较大的、场景性的差异）；而附件的差异则决定了同类型弹窗的扩展性（也就是你定义的这类型弹窗，极限状态下最多能支撑什么样的场景）。按上一篇文章从交互的角度讲讲弹窗（上）来讲，触达、信息展示、操作弹窗各自的基本零件可以画成这样：用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 也没多难画成这样了以后我们可以发现，就算是支持复杂场景的大弹窗，其实骨架结构也是简单的。以 JIRA 这个操作弹窗为例：真的很爱大弹窗接下来我们就按照弹窗的基本框架布局来一项项地拆解弹窗的基本零件与常见附件，复杂问题展开讲，简单问题就简单过：相对简单的：容器、标题、关闭方式比较复杂的：内容区、主操作按钮附件：渐进展示弹窗的容器容器也就是弹窗尺寸，虽然在做规范的时候弹窗尺寸一般是 UI 去定义的，但作为交互我们也需要思考一些事情：弹窗的尺寸需要和内容适配。正常情况下，弹窗应该是不需要纵向滚动的（当然横向滚动就更应该避免了）。假如你的弹窗尺寸需要滚动一下才能展示全信息，应该先考虑它是不是过小。大弹窗和全页面、不同尺寸弹窗之间，应该有明确的界限。交互需要去界定什么样的信息量是弹窗容纳的极限，超过这个“极限”那么弹窗这种控件就无法承载、需要使用其他的展示形式。弹窗的标题弹窗必有标题，能不能写清楚弹窗标题，算是区分合格交互设计师与还差点意思的交互设计师的试金石。其实这事情说复杂也不复杂，只有 2 个事情需要注意：（1）假如这个弹窗是由用户主动触发的，那么弹窗标题应该与用户触发弹窗的操作按钮同名，或者至少有相同的关键字。此时弹窗是用户操作后的反馈，用户需要通过弹窗的标题来确认自己是否进入了正确的模块、进行了正确的操作。（2）弹窗标题与内容区说明文字要各有分工。一般来讲，弹窗标题简单陈述问题、询问行为或者作出行为建议。内容区的说明文字展开来解释出现问题的原因，以及操作后的后果。当然文案，或者更时髦的说法：UX writing，是一门很大的学问，甚至可以支撑起一个职位。所以这里讲的两条规则只是最为基础的原则，不能涵盖所有的文案要求（比如你要是做国际化，那么标题和正文的首字母大小写、加句号不加句号都需要考虑）。另外，B 端的文案规范有时候也无法推广向 C 端营销类设计，因此本篇暂时不做更多讨论。这篇15万人阅读的文章可以帮你了解B端文案：阿里设计师出品！B端产品文案指南说明： 本文主要面向 B 类业务、简体中文语境，提供实操性指南； 行业内约定俗成的常用语建议沿用，可以不依照这里的建议； 本文所指的文案不包含营销推广类文案。阅读文章 > 弹窗的关闭方式作为一个非常底层的控件，弹窗（或者说窗体）应该兼顾大部分用户的不同习惯，来保持整个系统有比较好的可用性。因此，建议在右上角添加“x”作为关闭操作性弹窗的最短路径，并且佐以键控、点击遮罩等多种关闭方式；除非要求用户明确表态（比如要求同意协议）。当然，更便捷的关闭方式代表着更多的误触，如何平衡可用性和误触，就要根据具体场景具体分析了。内容区与主操作按钮这两个东西不能分开来讲，它们是弹窗设计里最复杂、最经常出体验问题的部分。理解了内容区与主操作的关系，才能真正理解弹窗的设计。1. 内容区与操作的层级关系做 B 端产品时，设计系统的稳定是非常重要的一件事。构成设计系统稳定的重要因素之一，就是控件的操作模式的稳定和一致性。这个部分属于设计中比较难以量化验证的地方，就算做得很好，也可能并不能从业务数据上找到特别正向的反馈；但要是做得不好，整个设计系统（至少是交互系统）的逻辑会很快地被复杂的业务摧毁崩溃。设计系统一旦不能自圆其说，那就没有系统可言了。因此为了避免这种情况，做交互还是需要定义一下控件的基本层级关系和逻辑。弹窗的底栏层级高于内容区：底部操作栏上的主操作按钮承载着全局操作，它的行为对弹窗整体生效、可能会导致弹窗关闭；而内容区的操作只对内容区生效，并不会导致弹窗关闭。这意味着做交互的时候，需要在样式上为全局按钮、内容区按钮作出区分，以免用户产生困惑。比如说假如我们是一个中学老师，现在正在新增一个班级列表，班级列表里有所有同学的名字：到此为止内容区与操作的关系都还是清晰的，但一旦我们为弹窗加入导航控件——tab，那有些人可能就搞不清楚了。首先我们在做弹窗的时候，要尽量降低弹窗的层级结构和内容复杂度，尽量把用户完成任务的关键信息一开始就展示出来，避免用户在弹窗里四处探索。但假如说因为任务的因素非得在弹窗上加 tab 的话，还是需要记住：属于弹窗内容区的 tab 的层级低于弹窗操作区。在 windows/mac 的应用程序中，这个问题可以被官方规范提供的 group box 组件解决——可以理解为把内容区从弹窗上“框”了起来，在视觉上创造出内容区和操作按钮之间的层级差异。但是由于当前互联网整体的设计趋势倾向于减少层级、扁平化，所以在日常做设计时往往不再能使用这种视觉上的处理方式，只能做交互的人自己心里清楚。还是以新增班级为例，假如存在一个按钮让我们按一下就能上传班级列表的 excel，但是 excel 里有些名字可以读取出来，有些名字包含特殊符号（比如，、…），需要人为修改一下，那么这个弹窗也许就会这么做：这个时候跳转到到“读取失败”tab，底部栏的主按钮仍然存在——即使你可以给表单设置一些提交限制，要求读取失败的项目没有被手动修改的时候，不允许点击“新增”按钮。反过来说，正因为弹窗的操作区层级比内容区高，并且 tab 是一个导航控件而非选择控件，因此 tab+弹窗的潜台词是“点击操作按钮后，所有 tab 中的内容都会被提交，即使有些内容当前没有展示出来”，而不是“只有选中的 tab 会生效”。因此，假如你需要让用户在弹窗上作出选择，就不要使用 tab 等导航控件，而可以选择单选框/多选框这种典型的选择控件（或者苹果的 segemented control 这样有点像导航的选择器）。比如说我们在新增班级弹窗上给用户提供了两个功能：手动新增或批量新增两者的内容区样式不一样，那么画出来则是：值得注意的是，这个层级关系只能应用在弹窗上，在网页全页面上往往存在层级高于操作按钮的全局导航。2. 内容区与操作的映射关系有的时候，弹窗会提供多种操作选项，并且每种操作选项都会有大段的说明文字。还是拿学校老师新增班级做例子：校园网新上线了一个功能叫“智能新增班级”，这个选项可以根据你的身份，自动检测你带的学生并填充到表格里，你只需要把他们对应的班级标注出来就好了，不需要一个个手动填写学生姓名，非常方便，所以推荐老师使用。但由于系统还不是很完善，因此只能检测到高中部和小学部的学生，带初中部学生的老师，还是需要手动新增班级。假如非要用弹窗来做新建方式的选择入口，并且还按照我们之前的弹窗基本结构来处理，那么有些人可能会做成：这个案例和诺曼《设计心理学》里那个炉灶与旋钮的案例不谋而合。这样设计的劣势是，用户从读完内容区的文字，到去操作区进行行为，需要在心里先做一个判断——我是高中小学部还是初中部的老师？然后再做一个映射——高中/小学部点这个“智能新增”、初中部点这个“手动新增”。一来一去反应时间就变长了、出错概率也更高。因此，我们可以在这个案例上增强文案与选择器的亲密性，让用户做出判断的瞬间就可以完成操作，无需再做一次映射：甚至，假如这个任务以效率为第一标准并且规范定义的比较宽松，我们还可以省略“下一步”按钮，直接将点击生效的热区放置在内容区上：同理，优化操作按钮的文案也能帮助用户消化内容区与操作按钮之间的映射关系。比如说这种再确认弹窗：习惯上来讲我们会将一个弹窗的积极操作（确认、提交、更改…）修改为与弹窗标题或内容区联系性更强、更符合场景的说法，比如说打印机的“打印”弹窗，操作按钮写作“打印”而不写作“确认”。这样做的好处也是帮助用户减少反应的时间。但另一方面，弹窗的消极操作（一般是取消或退出，注意消极/退出操作不等于破坏性操作，比如删除）的文案是不会修改的。这样做是为了让用户无论在什么场景下，都能感知到“取消”是一个无害的、不会造成严重后果的安全退出方式（和弹窗右上角的 x 一样）。3. 操作按钮与附件理想状态下操作按钮只有 2 个，但实际情况是多种多样的，所以有时候操作区也可能有超过 2 个按钮。我个人把 3 个操作按钮作为弹窗操作区的上限，假如超过 3 个按钮，那么就应该思考是不是去掉操作区，直接把按钮放在内容区里，以便帮助用户合理地判断自己应该按哪个按钮。当存在 3 个按钮时，按钮的摆放规则可以根据自己平台的特性决定，并没有通行的规则（但一般会将破坏性按钮放在主操作按钮的对侧）。假如弄不清楚用户的主要诉求，不用在多个按钮中非要选一个推荐操作。最常见的弹窗附件是“不再提示”按钮，选中后提交弹窗，则这个弹窗就在用户或者设备维度不再出现了。这个操作常规上用 checkbox 实现，并且放在弹窗内容区/操作区都可以接受。需要额外注意的有这么几点：（1）对于触达弹窗来说，点击“知道了”“立即开通”都能算是对弹窗的一种表态，因此选中“不再提示”以后，点击任何一个主要操作弹窗都应该不再展示。而相比之下，选中“不再提示”后又点击“x”就意味比较含糊了，考虑到一般“不再提示”选框都不做默认选中，因此这里选中很有可能是用户有强意愿，所以点“x”弹窗也不展示也说得过去。但对于操作弹窗来说，“取消”是全局性的消极操作。在任何情况下，用户点击“取消”的含义都是“放弃弹窗上的一切已完成操作并且退出弹窗”，所以这里只要用户点击了“取消”，无论是否选中“不再提示”，都应该视作选择未生效。虽然这样做在具体场景内有违背用户预期的可能，但为了全局交互规则的一致性，这样是更合理的。（2）有些人比较倾向于把“不再提示”做成操作按钮。我个人其实不太理解这种做法。假如这个弹窗具有用户价值，那么就持续弹好了，没必要设置“只弹一次”的限制；假如这个弹窗纯粹是商业化行为，那按钮文案写成“我知道了”，直接修改按钮的弹出逻辑即可，也没必要告诉用户错过这次机会以后就不提示了。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design-2
按钮 用户 文案 怎样设计 CTA 按钮，能够增加点击率和转化率呢？目录定义：什么是 CTA 按钮作用：CTA 按钮在界面中的作用设计：CTA 按钮需要注意些什么，通过什么方法增强 CTA 的点击总结定义CTA 是英文 “call-to-action”的简写，又名行为召唤按钮。是 Web 和移动软件应用中最常用的交互元素，其主要作用就是引导人们做出某些特定操作，从而提高产品的转化率。作用简而言之，就是设计师通过设计手法，视觉上突出按钮，让用户自然而然的产生点击按钮的行为，例如留下联系方式或者产生购买行为，都算是行为召唤。 行为召唤这一 UX 设计手段的主要目的就是催生交互、行为，提升转化，达成业务目标。 目前的主流电商 APP 在促销模块的购买按钮都在往大的面积，高饱和度，高层级的方向做。主要也是为了引导用户点击按钮并产生之后的一系列购买可能。怎样设计 CTA 按钮，能够增加点击率和转化率样式上1）按钮在样式是必须看起像是按钮，符合用户对以往按钮的认知，提高可辨识度，降低用户的学习认知成本 。纯文本按钮会让用户迟疑到底是按钮还是内容，从而造成混淆，这种不确定性可能会导致他们直接跳过这些按钮。如上图，在按钮在这个页面层级比较低，而且并不重要的时候可以是直接使用链接文字这样的按钮形式，一般的按钮根据在页面是视觉层级可以选择后面 2 种，无论是点击区域还是样式上更加容易吸引用户点击。2）使用渐变、阴影、圆角让按钮样式看上去更加的逼真，引导用户点击 。这些样式的应用会让按钮看起来更加立体，模拟现实生活中的按钮样式，比如，开关灯、键盘按钮等。用户在现实生活也需要对这些按钮进行点击和交互，如此用户看到这些按钮时，就直接知道如何去操作。3）正确的设计按钮的大小， 按钮的大小要符合拇指原则（44pt），同时按钮上下左右有足够的留白空间。需要一个页面相同位置的按钮组，必须有明确的层级区分，引导用户进行正确的操作，降低用户思考和选择的时间。例如上图的虾米、京东、网易云音乐 app 的登录页面，除了最重要的登录按钮最大，最突出外；其他的第三方登录以及账号密码登录等按钮都根据不同的层级重要性进行了样式区分。让用户可以直接进行正确（或者是你希望）的操作行为，降低用户的选择时间。文案上1）行为召唤按钮 ，顾名思义按钮对于用户的行为有一定召唤，指示作用。所以按钮上的文案可以使用紧迫感和即时性的文字提示。比如：立即、马上、开抢等。这些文字会给用户营造一种紧张、兴奋、刺激的感觉，刺激用户进行点击和消费。2）按钮文案应该表述明确，告知用户按钮的代表的意思，以及点击交互后会发生什么。通过清晰的文案给予用户操作预知，降低用户的使用成本和防备心态。同时文案也可以是利益点，促进用户点击，并产生消费。图 1 是苏宁易购购物车左划时效果，3 个按钮文案分别是表述清楚了不同的操作以及给予用户相应的操作预期。同时不同的按钮背景颜色表述了不同的操作层级，删除按钮是不可逆的操作，所以红色示警。图 2 是芒果台 tv 充值会员页面，按钮文案明确的说明：确认支付¥9，以及副文案开通会员后用户可以得到的利益点。用户可以很清楚的从按钮中的文案知道点击操作后，需要支付的¥9 元金额，以及可以得到的好处，排除了用户的疑惑，告知了用户好处，更有利于提高点击。交互上按钮在操作后需要及时给出用户不同状态的反馈，告知用户你的操作生效了，做到所见即所得，给用户安全感。例如：网页上的按钮鼠标悬停时，按钮会变色，提示并吸引用户点击。最起码按钮上的光标会变成小手；一些小游戏界面中需要引导用户点击按钮时，也会做各种动效，或是指引手势。总结CTA 是英文 “call-to-action”的简写，又名行为召唤按钮按钮在样式是必须看起像是按钮，符合用户对以往按钮的认知，大小要符合拇指原则（44pt）按钮文案上要清晰简洁，可以使用带有紧迫感、即时性、利益点的文案页面中按钮过多时，需要根据层级作出明确区分，减少用户决策时间按钮在操作后需要及时给出用户不同状态的反馈为吸引用户而存在：界面中CTA按钮的设计有何讲究APP和网站这样的数字产品中所包含的有效的交互系统，通常是由包含不同任务和功能的小元素组合到一起的。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/cta-button-ctr
按钮 控件 对象 设计心理学中的第三个交互设计概念：映射往期回顾：万字干货！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
复选框 表单 按钮 在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义….我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，这时应该选择哪个组件更合适呢？本文主要探讨这三个组件的基本特点，以及在 web 表单设计中，这三个组件使用上有什么区别，以及常见的场景如何去选择。文章概览Switch 开关 • 它就像是灭霸的响指1. 简要了解开关开关作为仿照物理开关的映射，提供了两种最为简单、直接的对立选项，比如开/关、启动/禁用等。它就像生活中控制灯泡的开关，点击灯泡立即亮起。所以它的意符也必须明确，不然用户都不知道，即将要启动/关闭什么。2. 开关组件的特点1）对象标签名称须传达清晰，能够让用户能够明确感知操作后的动作开启或关闭什么；2）主体标签信息和按钮是分离的，两个视觉焦点；3）一般点击后会立即反馈；4）没有 hovering 效果，有动作效果，更适合手指操作；5）非 W3C 组织官方 html 标记，极端情况不支持 Javascript。3. 苹果公司对开关组件的设计规范苹果的「Human Interface Guidelines」有着这么一份对于开关组件的使用规范定义，我们不妨可以借鉴。1) 避免使用开关控制局部细节或者次要的设置。开关的视觉权重比较高，所以用它控制内容较多更为合适，比如可以将它作为总开关打开或关闭一组设置。2) 通常不要用开关替代复选框。如果我们的规范中定义了复选框，则尽可能保持一致的使用规范。4. 开关使用场景举例通过上述对开关组件特点，结合苹果组件的规范，我们基本可以梳理出以下几条主要使用场景：1）开关的标签意符需传达清晰和单选、复选框不一样的是，因为开关主体的信息和按钮是分离的。用户在点击开关按钮前，必须清晰告知用户点击后会发生什么，甚至有时我们需要通过增加副标题来加以说明。2）一般只为立即生效的场景使用开关按钮在表单填写时，往往最终会有「提交」按钮作为结束态，开关作为表单字段的填写，用户点击后并不能够立即生效，而是需要再次点击「提交」按钮。3）有风险，需着重提醒用户开关的视觉权重较高，在复杂的表单信息中，它能够很快吸引到用户的注意力，并能够给用户以视觉提醒。4）避免大面积使用开关，使用它控制局部细节或者次要设置开关在视觉感知上它和按钮上有些接近，所以尽可能避免在表单中大量使用开关来控制局部层级内容，这时推荐使用复选框来替代开关作为局部。5）把它作为高层级内容控制或信息设置把它用来作为总控制来显示更高层级内容，避免 web 表单中大面积的使用开关按钮，会和其他的基本组件造成视觉干扰。这样可以既凸显其重要性，又能提升用户浏览表单的效率。5. 小结开关按钮就像是灭霸的戒指，视觉突出且反应快。用户浏览表单、填写内容组之间，一般不需要很强的视觉差异。如果填写的表单信息之间对比差异过大，开关往往给用户造成过大的视觉干扰，反而阻碍用户浏览表单的效率。Checkbox 复选框 • 它是一个机器小能手1. 简要了解复选框让用户在两个布尔值之间进行选择，勾选后和未勾选表示“是/否、要/不要、开启/关闭…” 等问题。以下内容主要讨论单个复选框的使用情况。2. 复选框的特点1）为了便于用户快速理解，一般复选框的标签内容是一句话，不会用逗号去作隔开。2）作为单选状态时，操作对象和标签主体内容视觉焦点是不分开的，选择后就知道它被选中了。3）可直接表示标签内容的开启、关闭。3. 场景举例分析1) 用户基本清楚会发生什么，使用复选框如果使用开关或者单选框，我们会发现视觉干扰特别严重，一般表单内容不需要特别去强调每一个字段的开启状态。当然如果排版限制，我们也是可以将复选框放到标签的右侧（放右侧复选框需对齐）。2）表单中的复选框生效，需要配合提交按钮一般情况下，表单填写中，复选框不会像开关点击后立即生效，它需要配合提交按钮生效。所以用户在提交前可查看他们填写的表单，更有助于在信息防错。（Ps. 在设置页，复选框可单独作为设置且立即生效。）复选框的主体标签信息和复选按钮在一起，特别是对于批量填写或设置一批字段，使用复选框效率更高。3）用复选框来控制表单局部细节如上述，如果控制对象的功能是表单的一个局部，或信息内容不是很多，用户也清楚知道选择后会是什么，这时候复选框更适合。这时我们不需要过重的给用户强调什么，用复选框会比使用开关让整个表单的结构内容更清晰。4. 小结复选框就像是一个机器小能手，它的应用拓展性比开关更强，它既可以作为层级内容使用，又可以作为设置项，点击后并立即生效。在表单中，作为局部、或者细节内容控制，使用复选框更合适。它也不会像单选按钮阅读有信息阻断的问题，不会像开关有强视觉干扰，它会让我们的视觉焦点更集中表单信息上。Radio 单选按钮 • 白天不懂夜的黑1. 简要了解单选按钮单选按钮最早的设计模型，来源于收音机切换频道的按键，当我们按下其中一个，其他的按钮就会被弹出，按下的那个按钮就成为了选中的状态。单选按钮可谓是泾渭分明，有你不能有我。2. 单选按钮的特点单选按钮的优点是，将所有信息条件暴露给到用户，它不像开关在使用上带有去猜测、探索的必要。1）每个选择都非常直观，如果希望用户阅读完所有选项，用它再好不过了。2）拓展性更强，相较于开关、复选框的布尔值，单选能承载两个或两个以上选择。3）必须提供默认值，且默认值可以承载内容。3. 场景举例分析1）需要让用户明确知道两者的区别，甚至需要强调两个选项的不同如果采用复选框，用户需要在两个差距较大的选项中去作思考。2）开启/关闭的单选状态，使用复选框复选框对于绝大多数用户都是非常清楚，使用复选框在空间、视觉焦点更是更集中的，所以如果只针对开启/关闭的状态，推荐使用复选框。3）每个选项都关联内容时，使用单选按钮我们知道，如果默认选项设计的好，会让很多人保持选择默认选项。下图这个案例，如果采用复选框或者开关，用户就不得不去探索思考开启后是什么，还要担心理解开启/关闭后带来的影响，而对于绝大多数用户来说，这边的报名设置系统默认内容无需改动。需注意给用户提供的默认选择，一定要是安全、方便的选项。4）较长需隐藏拆分的内容情况，使用单选按钮在表单设计中，如果遇到的内容需要重新组织或者拆分时，选择使用单选按钮。这样不仅能够做到表单信息简洁，也能够提高用户的浏览效率。5）垂直排列单选，信息阅读更佳如果字段名称较长，需要添加副标题加以说明，这时单选按钮承载的信息较多，使用垂直排列让用户有一致的起始阅读线，眼球转动幅度最小，信息获取体验更佳。如果标签文字较少，也可以横排不至于占用太多的垂直空间。4. 小结单选按钮就是白天和黑夜，互不干扰的条件，希望用户阅读完这两个选项，使用单选按钮再好不过了，考虑到单选按钮提供的默认选项，提供的要是绝大多数用户需要的，且是安全方便的，如果单选按钮标签文字过多，在排版时垂直排列拓展性更强，阅读体验更佳。全文总结开关更像是一个灭霸的戒指闪闪发光，不过在表单结构、各种控件内容较多，需要页面清晰、避免过多的视觉突出，所以尽量避免让无数个戒指闪亮中表单中。复选框它更像是一个机器小能手，适用和拓展性极强，即可以单独作为设置，不用配合其他提交按钮，也可以作为表单填写的一部分。当我们犹豫使用哪个组件时，选择它一般不会错。单选按钮就像是白天和黑夜，完全不见彼此。单选条件承载的信息也较多，如果希望用户对比感知到两者信息的不同，那么使用单选按钮。最后理论永远只是指导实践的一部分，上述内容可能只是在用户认知和易用性之间，找到一个相对平衡的点，具体的使用场景情况，还是要具体问题具体分析。参考文献Nielsen Norman GroupHuman Interface Guidelines用单选还是多选？这篇全面总结给你答案！本期文章主要研究单选和多选控件的设计细节，虽然是很常见的控件设计，但是也是有非常多需要注意的地方。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/switch-checkbox-radio
操作 按钮 苹果 hello，没想到这么快年就要过完了，今天来聊一聊苹果规范里两个令人迷惑的东西，action sheet 和 activity view。两个组件都属于常见组件，其中 action sheet 出现得更早。之后出现的 activity view 在布局上违背了 action sheet 的部分设计理念和规则，而苹果规范又对此语焉不详，因此有些同学对如何设计一个底部浮层（或者面板）产生了很多疑问。因此今天我们就从它的发展史出发来讲讲他们的差异，以及应该如何看待“规范”。可以说规范的演变就是不断吃书的过程。Action sheet 的演变历史action sheet 是设计规范中提供的最早的一批标准组件，和其他组件相比，苹果对 action sheet 的定义和迭代的更新其实不算多，它的样式也没有特别大的变化。在 2008 年 iPhone OS 2 时代的规范中，将 action sheet 和警告弹窗（alert）、模态视图（modal view）都归类为视图的不同类型。实际上“视图 view”这个说法一直都非常模糊，我猜测这个说法来源于 MVC 设计模式，是开发兼任设计时代遗留下来的名词。现在苹果将 view 解释为“应用程序用户界面的基本构件”，我个人把 view 按照原子系统理解为“页面模板”。从创立之初，action sheet 有两种用途：收纳针对用户当前任务的多种操作。这样就不用在页面上把这些操作全部展示出来。进行风险操作之前，可以用 action sheet 来做再确认。根据这两个用途，2008 年对 action sheet 的说明和规则总共有以下几点：一定要有底部取消按钮，除了取消按钮之外至少提供 2 个操作按钮点击操作按钮之后，action sheet 将会消失Action sheet 上不写说明文案，因为它是被用户主动点击弹出的页面，用户可以根据当前任务和按钮文案推断出这个浮层的作用。根据以上几点我们可以看出 2008 年前后移动端的业态还是比较简单的。第 2 条规则让 action sheet 是一个只能承载操作按钮的临时不稳定容器，它杜绝了使用 action sheet 来做多级复杂任务的可能性，而且也并没有提到任何和扩展性相关的解决方案。在 2011 年时，苹果对 action sheet 进一步作出了说明：解释了将取消按钮放在页面底部的作用：鼓励用户看完所有选项后再做出选择。强调风险/破坏性操作要用红色按钮。不允许纵向滑动，因为：过长的面板可能会导致用户花费过长的时间来思考每个选项；纵向滑动可能导致误触。自此，action sheet 的几个比较重要的规范就都成型了。尽管在 2014 年取消了“点击操作按钮后 action sheet 会消失”和“action sheet 上不写说明文案”的说明，让它的扩展性稍微强了一些，但是从苹果对其纵向滑动的限制、对「取消」按钮的强调上，可以看出 action sheet 仍然是暂时性的，倾向于不让用户停留太久、完成较为复杂的任务。在 iOS14 之后，苹果提供了新的组件 menu 来收纳操作，因此进一步限制了 action sheet 的使用场景。iOS14 版规范将 action sheet 归纳到 alert 警告弹窗中，“只有破坏性操作可以使用 action sheet，否则都应该使用 menu”。但在后续版本迭代中又更改了说法，现在 action sheet 基本上被用于承载与「用户发起的操作」直接相关的功能，比如删除/离开前的再确认，而不再承载“收纳主页面放不下的次级操作”的功能。Activity view 的演变历史Activity view 是为了“分享”这个功能定制的。目前为止它的使用场景基本限制在分享上，很少见其他场景使用这样的版式，但我个人认为它在未来有扩展场景的潜质。苹果一直有“分享”功能，这个功能最开始使用 action sheet 实现，然后在 iOS6 时期由 action sheet 改版了图标样式（但是很可惜没有说为什么这样改）。iOS6 时代苹果并没有成熟的 App 间分享功能，当时只支持 facebook、twitter、微博等几个有限的 App 分享，因此在页面设计上面也没有考虑扩展性。到了 iOS7 后，苹果进行了两个重要的功能迭代：允许 App store 中海量的第三方 App 接入“分享”功能。这导致分享页面上的操作数量不确定上线了 airdrop 功能，并且可能由于早期对这个功能的推广，iOS7 允许图片在当前页面内被多次分享给不同的人，因此只能支持单次操作的 action sheet 无法再满足诉求了。于是基于这两个重要的功能变化，才产生了我们熟悉的这个横滑版的 Activity view。activity view 的设计究竟想解决什么样的问题我们不得而知，因为它的规范中说的东西也比较语焉不详。只能说从它最终呈现的效果来看，和以往的设计有这些改变：Activity view 首次在 iOS7 的规范中登场时，是一个“控制器”controller，而非一个完整页面，这让它可以添加“取消”按钮成为一个类似 action sheet 的模态，也可以作为页面上的一个元素，搭配页面左上角的“取消”按钮。我个人认为这么设计其实挺冗余，页面允许横滑后，“取消”按钮非要放在页面底部的理由就根本不成立了，因为用户的视线并不一定是从上到下看完的，而有可能是从左到右，根本没往下看。没有必要为了遵守 action sheet 的规范而制作两套功能完全一样的版式。activity view 采用了大图标而非纵向文字列表的样式。从迭代趋势来看，合理猜测是因为接入第三方平台后图片 icon 的识别效率比纯文字更高。Activity view 允许横滑。这也违背了 action sheet“面板不允许纵向滑动”的理由。很明显这样做是因为接入第三方平台 app 数量不确定，只能通过横滑来保证一些系统操作（复制/投屏等）能够在第一屏露出。当然 iOS7 的 activity view 还有些其他的问题，比如有些人提到：这版设计过于强调 airdrop、横滑滚动比纵滑更费劲，而且对长文案的支持比较弱等等网站链接：https://medium.com/@graiz/useless-ui-e6f962e666e4基于这些问题，activity view 再次改版，也就是现在 iOS13 的样式。自此，activity view 完全脱离了早期 action sheet 规范的影响，它允许纵向滑动、不再添加底部取消按钮、并且支持用户在本页面进行多层级的相对较为复杂的操作（比如点击 airdrop 弹出二级弹窗，但不关闭此 activity view）。总而言之，根据现行的苹果规范：action sheet 更加聚焦、迅速，它不支持多层级操作，更多被用于再确认场景。Activity view 暂时被用于分享场景，它更加具有扩展性，且支持多层级操作。「写在最后」上面讲了这么多演变历史相关的东西，其实我们也可以看出来像苹果这样的操作系统迭代是很谨慎也很慢的。从 action sheet 到 activity view，苹果花了近 10 年时间。而我们日常做设计迭代速度和反应时间肯定是要比苹果快的。因此，做设计不要单纯照搬操作系统规范，而要去思考哪些东西比较贴合场景。控件设计更多干货：「这个控件叫什么」系列之Grabber/抓握指示器鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/activity-view-and-action-sheet
按钮 用户 操作 前言说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。从我们有记忆认知开始，按钮就时刻在和我们打交道，墙上的电灯开关、电视机的调节按钮、遥控器的按钮等等，这些物理按钮不仅仅是当下 UI 按钮组件的前身，且不会消失，依然会有很多非数字化的产品及机器设备在持续延用，不管如何演变，基本不会脱离实物参考。按钮最吸引我们的莫过于通过简单触摸就能轻松满足自己的行为需求，按钮设计的直观性及易用性会影响着人们完成一件事情的意愿及效率。在 UI 设计中，如何完美的避开问题、把按钮设计的更好，是每个设计师需要深思的问题。按钮设计的好坏，将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外，精致的按钮也会让整个页面的视觉提升档次。本篇文章将对按钮作出解析，介绍在设计按钮时需要着重考虑的因素及设计标准，并将理论付诸于实践。分享目录按钮的作用按钮的类型按钮的状态按钮的大小及风格常见误区及避坑指南总结按钮的作用1. 什么是按钮在 UI 设计中，按钮是一个明确指示交互行为动作的组件，主要用于触发某一个即时操作，很多时候，我们需要采取下一步行动或返回到上一步，都要通过按钮（部分场景可用手势交互）来完成。在视觉层面，按钮的组成看起来很简单，由一个底色块/线框加上一组文案即可组成，但真正要将按钮设计好，仅停留在视觉层面并不严谨，其大小、位置、色值、文案…等每一个细节的处理都关系着用户的操作体验，下面的这几种情况大家肯定有碰到过：2. 按钮有什么用通常，我们在设计按钮之前，需要详细理解按钮所存在的意义，哪里该加、哪里不该加、为什么要加，主要从以下几点来体现按钮的作用：功能性操作这种按钮很常见，比如展开、收起、下拉、加减等，按钮视觉较弱，重点强调该页面的功能，突出主体信息，在操作之后会发生一些交互变化，这类按钮主要起到功能形态的作用。明确引导下一步操作当用户完成一个页面的内容填充或信息确认，就会失去视觉焦点，而下一步按钮就会聚焦视觉重心，通过文案告知用户下一步该怎么做，常见的有保存、下一步、支付、确定…等。另外，用户需要完成某个任务，但同一个任务流程的信息、种类较多，这时就会通过分步骤、分页的方式，并在每个步骤的末尾增加一个能起到上下衔接作用的按钮，明确引导用户进入下一步操作，以此来提升用户完成整个任务的成功率。培养行为习惯如果在操作某个按钮之后得到了一定的利益，且能持续为用户带来价值，那么不妨将这个按钮设计的更醒目，并在同等级但不同的地方保持视觉的统一，持续培养用户点击习惯，当用户下次再看到类似这种按钮时，惯性思维就会引导点击。3. 按钮的组成在大部分的认知中，最常见的按钮就是一个底色块加上一句文案就完成了，殊不知一个好的按钮需要经过很多细节的把控，才能发挥出按钮的最大作用。例如文案的长短/边距、容器的大小/圆角、填充色的主/次之分…等，下面我们来看看一个按钮到底是由哪些属性、元素组成。圆角：传达出按钮的气质，决定用户的视觉感受，最常见的为小圆角，也有较为严谨、力量型的全直角、卡通可爱、年轻化风格的全圆角。图标：用于按钮含义的图形化抽象表达，例如加载中、编辑；容器：整个按钮的载体，容纳文案、图标等元素；边框：确定按钮的边界，常用于次级按钮描边；文案：用文字表达按钮的含义，精简文案；背景：表达按钮的当前状态，对按钮合理的使用主体色能有效传播品牌气质；投影：让按钮具有层次感，配合渐变背景能体现出微质感的效果。想让按钮设计更精致？收下这20条超实用的技巧按钮在产品界面中是非常重要的元件之一，按钮作为用户引流和行动触发来说都是至关重要的。阅读文章 > 按钮的类型1. 功能类型按照功能属性分类，可将按钮类型分为流程控制和功能选项操作。流程控制：常见的传统按钮，如支付、下一步、确定、保存等，容器承载着图标、图标+文案、文案。功能选项：开关/加减控件、标签栏/分类、状态切换等，操作之后只针对当前页面做出属性的调整，不涉及流程的变化。2. 视觉样式（横向）视觉样式有所区别，在不同的页面可能存在同等级的权重。常规按钮：最常见的按钮，当同一个页面出现多个常规按钮时，会有主次之分；虚线按钮：常用于添加、上传等操作；文本按钮：仅用文字作为触发点，部分会用主色、右侧箭头、下划线等方式突出。3. 层级分类（纵向）高权重：带有填充色的主操作按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主操作）按钮；中权重：带边框轮廓的概述按钮，同一页面可存在多个中权重的按钮；低权重：纯文本按钮，以及浅色填充+浅色文字的按钮，同一页面可存在多个低权重按钮。按钮的状态在设计按钮时，为了体现按钮不同的具体含义，以及后续设计、开发的统一性，明确按钮交互样式是设计过程中不可缺少的重要组成部分。设计师需要在不干扰界面视觉的前提下，对每个按钮的样式、状态有清晰的定义，与其他元素、布局区分开来，以确保按钮的可供性。常见的状态主要有以下几种：待激活状态：需要完成一定的操作、或有一个以上必要的前置条件后才允许交互；正常状态：按钮的正常显示状态，可进行交互操作；点击状态：触碰效果，表示按钮正在进行交互且未结束，会在正常状态的基础上增加一个纯黑色不且透明度为10%的蒙层，交互完成后，即会引发此按钮的真实作用；加载状态：产生交互后没有立即执行、或系统需要一定的时间才能执行完成；禁用状态：系统默认暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能使用。按钮的大小及风格1. 按钮的尺寸在 PC 端设计按钮时，因为鼠标的精准点击，我们通常会将按钮设计的小一些，同时也能让整个界面看起来更加细腻，只要不影响操作，36px~48px 范围内的按钮是比较常见的。但移动端的按钮设计，我们要更多的考虑到物理尺寸，即手指（指尖）在操作时需占用的实际范围。iOS 的设计规范中，将按钮的最小点击区域规定为 44pt，一旦小于这个数值，操作时就会出现精准度较低的情况，导致操作失误或无效。在实际的 iOS 界面中，很多应用在设计按钮时并未严格遵循最小 44pt 的这个标准，例如很多一、二级界面的次级功能入口，有些连 30pt 都不到，也并未对用户造成多大的影响，可能是对应的功能权重、用户点击频率都非常低的原因，还有一部分文字按钮，其本身永远都不可能达到最小的触控标准（触控热区加大即可），所以关于按钮的尺寸大小并非规定的很死板。费茨定律告诉我们「目标尺寸越大，移动至目标所花费的时间就越短」，所以，在满足手指触控范围的同时，还要根据所对应功能的权重占比来适当调节按钮的大小。不难理解，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被降低的同时，也减少了用户的操作成本。用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 我们以 8 像素栅格系统、iOS 的 2 倍图为例，较为常见的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。2. 按钮的风格在 UI 设计中，几乎每个页面都存在按钮，样式、种类也有很多，但设计风格常见的也就几种，例如扁平化、微质感、拟物化、新拟态（概念）…扁平化按钮通常在容器中填充一个纯色即可，没有多余的视觉干扰，操作简便，这种类型的按钮一般在应用中用的最多。例如：工具型应用、B 端应用等。微质感按钮相比扁平化，填充渐变色再加上浅浅的投影，不仅能保持信息内容的简洁、让用户产生更强的操作欲望，还能让页面具有品质感，更加耐看。例如：年轻化应用、娱乐类应用、儿童应用等。拟物化按钮大多设计的很立体，3D 质感、属性样式丰富多彩，参考现实世界中的事务或摄取应用场景中的某些元素，使其更加逼真，有较强的代入感。例如：游戏类应用、H5 专题、运营 banner 等。新拟态按钮2021 年风靡一时，几乎无人不知，但要想落地却不太现实，实用性不强，也只能在飞机稿中出出风头，随着时间的流逝，逐渐销声匿迹，不知哪天会不会经改良后再次面世（当初扁平化问世，也是几经波折，经多年改良才逐渐被大众所接受）。目前只有少数工具类应用使用了新拟态，例如：计算器、AI 设备控制、有道云笔记等。常见误区及避坑指南1. 主/次操作层级分明当同一个页面出现多个按钮时，只允许存在一个主操作按钮，其他不做特别设定。当然，如果次要操作较多，也不宜过多的出现次级按钮，可根据权重降级处理，以小图标或文字按钮的方式呈现。2. 统一样式主/次操作按钮要统一样式，用户需操作时，尽可能的减少其思考及选择时间，按钮应该迎合用户固有认知及惯性思维，节省时间成本，提高操作效率。3. 圆角值在大多数界面设计中，我们通常所见到按钮还是小圆角和全圆角居多，也有部分按钮完全直角，需要根据产品的行业属性与气质来选择最合适的圆角类型。不管如何，尽量避免大圆角（卡片除外）按钮，不方不圆、不伦不类的，显得不够成熟也不好看。小圆角小圆角按钮的圆角值通常控制在高度的 1/5、1/6，儿童类型的应用也有 1/4（较大）的，并非绝对值。如果习惯使用 8 像素网格，根据按钮的尺寸大小，直接将圆角值固定在 8px、16px、24px（较大）这几个数值，能减少设计组件的数量，也利于开发做组件封装后续调用。全圆角全圆角按钮的圆角值固定为高度的 1/2，或者在软件的圆角设置中直接将数值拉到极限。直角不设圆角值，在 PC 端较为常见，也有部分较为严谨的移动端应用使用直角按钮。4. 按钮中的文字按钮中的文字要便于用户理解，不能过于陌生或绕口，用户碰到不易理解的信息会产生困惑，甚至误导用户导致操作失误从而造成损失。除此之外，文字还需要精简，不能过多或折行且能合理的引导用户完成操作。上图的文案歧义就很明显，自以为聪明的设计师想要挽留用户，刻意将主次按钮样式对换，希望用户操作不成功，那么用户在需要取消订单时就疑惑了，到底是点击「确定」还是主操作按钮「取消」才能取消成功呢？或许稍加思考，用户也能反应过来，但无疑增加了选择难度、思考时间及操作成本。5. 文字与按钮比例按钮中的文字太大或太小都会影响用户对信息接收的效率，大小比例需要适中。文字太大会感觉很拥挤（跟大家衣服买小了感觉一样），没有呼吸感，要给文字四周留下足够的空间，同时文字太小会显得小气，看起来也会比较吃力，不利于信息接收。6. 按钮与其他组件的区分设计好按钮组件之后，页面中的其他组件或元素要与按钮有很明显的区别，避免让用户产生不必要的误解。7. 弹窗主/次按钮的位置在弹窗中，主按钮是在左？还是在右？这是一个争论不休的问题，那么不争了，在移动端的弹窗设计中，主按钮靠右就行了，不一定绝对正确，但绝对不是错的。根据调查数据显示，单手使用右手操作手机的用户比左手操作手机的用户量高，且用户也有一定的意识，左侧为上一步、右侧为下一步，顶部左侧为返回，右侧为保存或确定。8. 无障碍设计可访问性是按钮设计最重要目标之一，不仅要样式统一，还应符合用户的认知，让用户能快速知晓这个元素能否点击？点击之后会发生什么？甚至有种似曾相识的感觉。如果将按钮样式设计的与用户认知有较大的偏差，不易于用户理解。9. 减少使用禁用按钮在表单设计中，大部分都需要用户完成一定任务之后才能正常操作下一步按钮，在完成之前，需少用禁用按钮，在前面有讲到「待激活状态」，即在按钮中填充浅浅的主体色等待用户完成任务激活。通常系统默认不允许操作或存在时间限制会用到填充为灰色的禁用按钮，即便如此，也要尽量让系统将其隐藏，万不得已的情况下需要在按钮附近说明情况，以免使用不当引起用户的负面情绪。10. 投影的使用在给按钮添加投影时，选择灰色或纯黑色加调整不同明度即可满足基本效果，但如果想要更好的视觉体验，可以基于按钮本身的色值来调整，让投影效果看起来更舒适，跟页面更搭。另外，切勿过度使用投影，宁缺毋滥，若按钮的投影太深，看起来粗糙脏乱，还不如不用，颜色较浅的按钮尽量不使用投影，否则可能会影响按钮的识别度，让这个页面看起来不够清爽。总结对于设计师来说，按钮作为设计组件之一，有很多细节容易被忽略，我们需要对每一个细小的元素进行深入思考，如论任何大小组件，都需要做到精益求精，才能给用户带来更好的使用体验。一篇文章不足以道出按钮设计的精髓，还需要我们一起进行更多的挖掘，希望本篇文章能带给小伙伴们一些启发，下篇「图标」文章再见。从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/detail-and-application-of-buttons
按钮 容器 控件 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。按钮几乎是每一个页面不可或缺的元素，对于按钮的认识基本停留在视觉层面，一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。视觉是一个观察的切入点，但仅停留在视觉层面还是不够的，比设计表现更重要的往往是背后支持设计的理由。本文中的所有案例均来自线上产品，观点仅是个人粗浅的理解，有疑问的地方欢迎大家讨论指正。按钮的定义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
落霞与孤鹜
表哥
在路上
张大湿
