首页

一个按钮让我扣了3天细节！！！

博博

按钮设计是我们经常会遇到的一个类型，一个好的按钮其最重要的就是激起点击欲，让人忍不住去戳戳戳。

我们来看看下面这个按钮：

很普通，处处都很常见的一种按钮，没有任何点击欲。

那我们应该怎么做出她的点击欲呢？

其实就是要让按钮更有立体感，话不多说直接上干货！

1.层次

可以用不同的颜色，放大一圈，形成对比：

上下错开一些让按钮的造型饱满立体一些，从原来的单一一层变为两层：

2.层次

为了让按钮更立体我们可以把这两层个复制一层，往下移动几个像素：

这样按钮是不是就已经立体多了？别急，还有呢！

3.光影

这里细节就比较多，想把按钮做到晶莹剔透可不容易，给大家好好讲一下。

先给图形加上一个内发光：

使用剪切蒙版，涂颜色或者再来一层内发光，加强这个效果：

复制一层，选用更深的颜色，向下移动，剪切蒙版到里面去，把按钮有一个明显的明暗分割线，形成这种光的层次和厚度：

沿着造型刻画高光，和边缘有些间隔：

在白色的底座上加入按钮的投影：

这样一个剔透，立体感强的按钮造型就完成啦！

那还能不能让点击欲更强一些呢？

4.表像图形

放上文案看看：

就还是有点单对吧。

这种时候我们就可以从按钮的文案出发，加入一些图案，让它更生动！

比如这里的文案是“发射”，就联想到了火箭，我们可以绘制一个火箭出来。

把它加入到按钮上：

这样一个丰富且有点击欲的按钮就完成了！

并可以用同样的逻辑去延展别的按钮，让他们保持统一性：

总结

增强按钮的点击欲的方式，其实就是让它变得立体且丰富。

1.层次：单独的一个色块，会很单薄，增加层次增加其在造型上的丰富度。

2.厚度：厚度可以让按钮变得更立体。

3.光影：让按钮富有变化，更立体和吸引人。

4.表像图形：一个关联文案信息的点缀图案，可以让人更有食欲。



作者：菜心轻量文      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

评论(0) 浏览(426)

UI组件要点「狙击」：按钮设计的这些坑别再踩啦！

纯纯

按钮设计


为了设计正确的交互，我们需要回顾一下物理按钮的历史和起源。物理按钮是UI组件的前身，当今的数字产品都还在大量使用它们。按钮很棒，即使用户不了解基本的机制或算法，只用手指触摸就可以让电器、汽车或系统运行/关闭。在《Power Button》中，作者Rachel Plotnick描述了当今按钮文化的起源，并解释了按钮是如何成为数字命令方式的。


“你按下按钮，剩下的我们来做。” ——柯达相机的醒目标语吸引了潜在消费者。


即使在今天，这也是吸引用户的地方——通过简单触摸就能让事情发生的即时满足感。尽管有大量新的家用电器和设备都变成了触摸屏，但物理按钮并不会消失，因为它们让人形成的行为习惯，会影响按钮设计的直观性和易用性，是一种永远存在的实物参考。


01 按钮 vs 链接

按钮向用户传递了操作的可执行性，在整个UI里很常见，例如：对话框、表单和工具栏等。按钮和链接之间的区别，请注意：

-链接是导航到另一个地方时应用的，例如：“查看全部”页面、“ Roger Wright”个人简介等；

-按钮是在执行动作时应用的，例如：“提交”、“合并”、“创建”、“上传”等。



02 让用户直观感受按钮状态

为按钮创建正确的交互和样式，是按钮设计过程中重要的组成部分之一。在不改变组件或产生视觉干扰的前提下，每个按钮的状态都必须有明确定义，以使其与周围布局区别开来。



正常—表示该组件已启用交互；

突出提示—用户使用键盘，进入编辑状态；

鼠标悬停—当用户将鼠标置于交互式元素上方时；

点击—按下状态表示用户已轻点按钮；

进度/加载—用户操作行为没有立即执行，表示正在完成操作中；

禁用—表示该组件当前处于非交互状态，但将来可以启用。


03 按钮的颜色、形状和大小

常见的是圆角矩形按钮，这些按钮即使在输入框旁，用户也能快速识别。按钮样式的选择取决于用途、平台和应用准则。以下是一些最受欢迎的样式变化：



04 建立按钮样式等级

样式主要用于区分重要和不重要的动作。创建动作层次结构，该层次结构将指导用户进行多种选择。通常，可以有一个突出的按钮（该样式通常称为“首要”按钮），剩下的按钮则依据重要程度建立不同的样式等级。



05 《Don’t Make Me Think》

这是可用性工程师Steve Krug撰写的书籍标题，其中讲到了一点：对用户而言，界面清晰明了非常重要，不要给用户制造难题。人们周围其实已经被电子产品包围了，多年使用各种设备、软件的经验，一定程度上固化了人们对按钮外观和功能的认知。如果与常见的“标准”存在较大偏差，也会给用户造成困惑。



避免对交互式和非交互式元素使用相同的颜色，否则用户不知道该点击哪里。


06 一致性的重要性

“一致性是最强大的可用性原则之一：当事物始终表现相同时，用户不必担心会发生什么。” —雅各布·尼尔森（Jakob Nielsen）


一致性提升了速度性和准确性，有助于避免错误。创建可预测性，帮助用户控制和实现产品中的目标。当创建主要、次要和第三种样式时，试着找找一致元素，如颜色、形状等。按钮设计不仅要在设计系统内部保持一致，在整体平台也要进行统一。



07 使按钮足够大以实现可靠交互

按下按钮应该是一个简单的操作任务，如果用户无法正常进行，或在过程中错误地按到了相邻元素，不但给用户造成了负面体验又浪费了时间。


对于大多数平台，请考虑被触摸的目标至少为48x48dp。无论屏幕大小，这种尺寸的触摸目标的物理尺寸应为9mm，触摸屏元件的目标尺寸至少是7-10mm。



对于图标按钮来说，请确保触摸目标超出元素的可视范围。这不仅适用于移动设备、平板电脑，同时也适用于网络上的指示设备，比如鼠标。


08 无障碍设计

所有组件都应推行无障碍设计。目标区域的大小是影响可访问性的因素之一，其他的则是字体大小、颜色和对比度，也有很多工具能检查组件的设计性能。



设计师应与开发团队紧密合作，确保按钮与屏幕阅读器协同工作。添加role =“ button”将使一个元素作为按钮控件出现在屏幕阅读器上。


09 手势应用

手势应用，让用户可以通过触摸与应用程序进行交互。使用触摸来完成任务，不仅提供了触觉控制还非常节约时间。某些手势（比如滑动以触发上下文动作、双击或长按来标记喜欢等）每天都被人们广泛使用，但对于普通用户而言，它们仍然不太明显，建议把它们替换给高级用户执行操作。



10 按钮标签信息易于理解

按钮传达的信息与其外观一样重要，错误的信息会让用户感到困惑，甚至是误导用户操作。正确的按钮标签会引导用户完成操作，最好使用动词，并在按钮上标记其实际功能。


就像按钮在问用户——“您要（添加到购物篮中）吗？” 或“您要（确认订单）吗？”，避免使用Yes/No或过于通用的标签，比如Submit。



11 确定/取消，还是取消/确定？

两者都是正确选择，但设计师可能会花几个小时来讨论哪个更合适。

-确定按钮在前，是自然流畅的阅读顺序。Windows把确定按钮放在了前面；

-确定按钮在后，可以帮助改善流程。这种顺序形式，帮助用户再采取行动前，对所有选项评估，有效地帮助人们避免错误。苹果则是把确定按钮放在最后的；

任何一种选择其实都没有错，也不会造成什么可用性灾难。



12 避免使用禁用按钮

每个人都遇到过这种情况：在屏幕上停留了几秒或几分钟，怎么操作都没反应，这才发现原来是禁用按钮使我们无法进行下一步。禁用控件让组件短暂处于非交互状态，但如果使用不当，则非常容易让用户产生负面情绪。



我建议尽量避免禁用按钮，最好始终启用它，如果用户未提供某些必需信息，则只需突出显示空白字段或显示通知可。


文章来源：UX辞典(站酷)

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(833)

按钮设计的知识点分析

雪涛

虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。

按钮几乎是每一个页面不可或缺的元素，对于按钮的认识基本停留在视觉层面，一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。视觉是一个观察的切入点，但仅停留在视觉层面还是不够的，比设计表现更重要的往往是背后支持设计的理由。本文中的所有案例均来自线上产品，观点仅是个人粗浅的理解，有疑问的地方欢迎大家讨论指正。

从6个层面，系统分析按钮设计的知识点

按钮的定义

1. 按钮的来源

数字世界是现实世界的一种映射，许多数字概念，都可以在现实世界中找到原型。按钮就是很生动的一个案例。在视觉表现上贴近现实生活中真实物体的外观，拟合用户心智模型，降低用户的认知和理解成本。

从6个层面，系统分析按钮设计的知识点

2. 按钮的定义

如果从视觉形式上看，按钮的组成很简单，一个矩形容器加上文字或图标即可组合成一个常见的按钮，但是仅仅从视觉层面定义按钮是不严谨的。按钮是一种重要的控件类型，而控件是图形用户界面（GUI）的主要构成模块。想要深入理解按钮，就必须要求我们首先理解什么是控件以及控件的分类。

3. 控件分类和介绍

定义：控件是用户和产品间进行交流的屏幕对象，是图形用户界面（GUI）的主要构成模块。

分类：根据用户目标，可将控件分为 4 大类。

从6个层面，系统分析按钮设计的知识点

从6个层面，系统分析按钮设计的知识点

每一类控件下又有更多具体细分。所有界面中常见的具体控件都可以根据其功能找到所属的类别。

从6个层面，系统分析按钮设计的知识点

4. 按钮的分类

在以上各个细分控件中，我将部分控件归入按钮类别：

命令控件下的：传统按钮、图标按钮、文字按钮

选择控件下的：开关按钮、单选按钮、组合图标按钮、状态切换按钮（开关和复选框样式比较固定，为了方便讨论，姑且不算在按钮范畴之内）

因此如果以按钮为主体，以功能属性为分类条件，可将按钮分为：命令型按钮和选择型按钮

从6个层面，系统分析按钮设计的知识点

命令型按钮与选择型按钮的区别

不论从功能维度、交互维度、视觉维度上看，这两类按钮各自都有不同的特点。

从6个层面，系统分析按钮设计的知识点

从6个层面，系统分析按钮设计的知识点

选择型按钮非瞬时状态有：“选中”和“未选中”两种互斥状态。可以把选择型按钮理解为某种状态的确认和展示。

命令型按钮的非瞬时状态只有一种：正常状态，当用户点击命令型按钮后，命令即可下达。可以把命令型按钮理解为一个动作，点击按钮代表着立即执行这个动作。

从6个层面，系统分析按钮设计的知识点

常见按钮的拆解

介绍完了命令型按钮和选择型按钮在功能、交互、视觉层面的区别点后，我们再来看看实际工作中常见和常用的按钮类型。

1. 传统按钮（有容器兜底的按钮）的来源：

GUI 中“按钮”的概念来源于真实世界中的按钮。真实的按钮具有一个非常显而易见的特点：拥有一个适合点击按压的受力面，这个受力面就是可点击感的来源。试想一下，假设一个按钮只有针尖般大小，且不说你是否能认出这是按钮，即便你知道这是按钮，你会有按下的欲望吗？真实情况下，摆在人们面前的按钮面积越大，想按压的欲望就越强。因此传统按钮的最显著特点就是拥有一个承载内容的“受力面”，也就是承载文字或者图标的“容器”。受限于早期的显像技术，以及与真实世界的对照，这种“容器”通常一般都是矩形，后期渐渐衍生出更加柔和的圆角。

从6个层面，系统分析按钮设计的知识点

风格发展：

在相当长的一段时间里按钮都有三维凸起的特征，进一步巩固了按钮的可点击感。不过进入移动时代后，这种流行趋势发生了改变，按钮的三维印记被不断移除。用户已经建立起了成熟的心智模型，即便按钮在视觉上越来越“平”，也不妨碍点击行为的发生。结合多年的使用经验，用户已经将矩形形状这一特征和按钮牢固地联系了起来。即便现在的按钮大多都是扁平化，用户也能一眼就辨认出按钮属性。

从6个层面，系统分析按钮设计的知识点

2. 传统按钮的拆解：

常见按钮一般是由容器和内容组成。

从6个层面，系统分析按钮设计的知识点

容器层面

  • 容器形状：

移动端比较主流的按钮形状有：矩形、圆角矩形、胶囊形和圆形 4 种。一般，在人们的认知里，圆角越大传递的感觉越圆润亲切。其实形状本身并没有好坏区别，与单纯视觉偏好相比，元素的统一性更加重要。一旦选定了某一种按钮形状，就需要保证所有场景中出现的按钮都尽量看上去整体统一。

从6个层面，系统分析按钮设计的知识点

  • 容器尺寸：

视觉上，按钮越大，越吸引用户注意，决定按钮大小的主要依据是按钮在页面中的优先级。而一个产品涉及到页面众多，如果不同的页面元素之间缺乏统一的调度规则，就会出现按钮尺寸过多，没有规律，细节混乱，效率低下的情况。为了既能适应不同的场景，又能保持产品级的控件统一，一般要给按钮尺寸设定几个档位以适配不同页面需求。排除个别特殊页面，一般把按钮设置为 5 个优先级梯度档位就足以满足设计需求。

我们可以从优先级从高到低的顺序，将按钮分为：特大、大、正常、小、特小 5 个尺寸档位。

下面展示最常使用的三个档位，大、正常、小档位。

从6个层面，系统分析按钮设计的知识点

  • 容器颜色：

按钮的大小、形状、颜色三个维度中，人眼是对颜色信息最为敏感的。在一个页面中，突出一个元素的方式有多种，其中最简洁有效的方式就是用颜色进行突出。颜色包含了色相、饱和度和明度三种属性，改变颜色的不同属性，都会对按钮的表意产生影响。同时，不同的颜色代表着不同的含义，配色时需要加以注意。

从6个层面，系统分析按钮设计的知识点

  • 容器样式：

容器除了基本的尺寸、形状、颜色之外，还有多种样式。

上文介绍的容器是强面性的，此外，容器还有弱面性、线性等样式。

从6个层面，系统分析按钮设计的知识点

  • 容器细节：

虽然现阶段的按钮越来越扁平，但在扁平的趋势下，依旧有发挥设计创意的空间。

颜色渐变、投影、动效都是常用的设计手法。

从6个层面，系统分析按钮设计的知识点

从6个层面，系统分析按钮设计的知识点

内容层面

聊完了“容器”部分，再来看看容器承载的“内容”又有哪些细节点。

从6个层面，系统分析按钮设计的知识点

从6个层面，系统分析按钮设计的知识点

3. 图标按钮的介绍

并非所有按钮都需要容器，尤其当按钮密度较大时，去掉容器只保留内容，可以更好地提高空间利用率，简约视觉。

从6个层面，系统分析按钮设计的知识点

4. 文字按钮的介绍

比图标按钮更轻量的按钮类型是文字按钮，以文字的形式展示，和界面融合度更高，当用户有需要时才会注意到文字按钮的可点击性。

从6个层面，系统分析按钮设计的知识点

5. 传统按钮与图标按钮的组合

这种组合形式相当常见，将多个功能整合在一个区域内，如底部工具栏（ToolBar）或者顶部导航栏（Navigation Bar）。不同按钮承载着不同功能，侧重越明显，越利于用户快速识别并决策。

从6个层面，系统分析按钮设计的知识点

特殊按钮类型

上面介绍的是常见的按钮形式，除了以上按钮，有一些按钮形式专门适用于某些特殊场景。

如悬浮按钮、胶囊按钮等。

从6个层面，系统分析按钮设计的知识点

按钮的优先级

一个页面往往有多个按钮，不同按钮承载不同功能，功能之间有相同或者不同的优先级，因此按钮之间也存在这相同或者不同的视觉优先级。

我们分两类情况来讨论：相同优先级的按钮和不同优先级的按钮组合。

从6个层面，系统分析按钮设计的知识点

从6个层面，系统分析按钮设计的知识点

按钮样式小结

上文罗列了实际工作中常用到的一些按钮样式，最重要的步骤是分清按钮主次，使用不同的样式进行搭配。

优先级强到弱：

强面性按钮、弱面性按钮/线性按钮、图标按钮、文字按钮

从6个层面，系统分析按钮设计的知识点

碎碎念：

本文中出现的部分名词，比如“弱面性”、“容器”等，只是为了便于交流和统一指向，并没有具体权威出处。文中提及的按钮类型均来源于线上产品，样本有限，适用场景相对固定，还有很多样式没有一一遍历。但掌握了如何选择样式的原理，就可以根据日后具体需求做出合理方案。文中出现的数据都是经验型数据，如按钮按下状态是在正常状态下添加 10%纯黑的遮罩，文字字号大小等，这些都是建议型数据，可以根据具体情况灵活调整。

文章来源：站酷   作者：设计师doo


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(1497)

时间显示的设计细节

分享达人

背景

“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。

从3个方面，帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面，帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。

从3个方面，帮你掌握时间显示的设计细节

在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：

1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；

2）两个时间点之间则表示时间段。

所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面，帮你掌握时间显示的设计细节

时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。

从3个方面，帮你掌握时间显示的设计细节

在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。

从3个方面，帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定，一般场景总结如下：

从3个方面，帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。

从3个方面，帮你掌握时间显示的设计细节

在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。

从3个方面，帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。

文章来源：优设   作者：VMIC UED



分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(853)

弹窗主按钮与菲茨定律的纠葛

分享达人

问题是这样的：有位设计师和我探讨弹窗主按钮在左侧还是右侧的问题，他说，他觉得应该在右侧，原因是因为菲茨定律（Fitts’ Law）：“弹窗主按钮在右侧，次按钮在左侧，是由于菲茨定律，这是因为边角的按钮更容易被点击。”


主按钮在右侧，这个我是能理解的，但在右侧的原因是由于菲兹定律决定的，我是持需考证态度的，毕竟虽然这个说法确实听到过，但我认为还有待进一步梳理，这里需要细究的要点包括：


第一、弹窗主按钮一定要在右侧吗？


第二、如果弹窗主按钮“更适合”在右侧，是不是只有菲茨定律的原因，还有其他原因吗？


第三、菲茨定律到底在解决什么问题，它是否除了上述问题，还解决了其他问题？


带着这三个问题，本文打算从如下几个方面展开：
第一部分：弹窗主按钮位置 
1、PC端弹窗主按钮位置情况 
2、弹窗主按钮位置在哪里更合适 
第二部分：费茨定律 
1、什么是菲茨定律 
2、菲茨定律的启示 
第三部分：总结 

第一部分：弹窗主按钮位置
1、PC端弹窗主按钮位置情况
为了聚焦用户的视觉与心理，激起用户的反馈，弹窗诞生了。由于弹窗可以承载的内容丰富，且交互具备扩展性，弹窗被广泛应用于应用、网页等产品中。在弹窗设计中，标题、关闭的位置基本设计者们基本不会产生争议，而主次按钮的位置是一个永恒的话题。 

1.1、按钮组位置
对于弹窗来说，按钮组的位置位于footer区，此点无可争议。但按钮组应该在footer区的左侧、中间，还是右侧呢？从大量产品设计中我们可以发现，位于左边的比例几乎为0，中间大约5%，而位于右侧的比例达到95%。 

1.2、主次按钮顺序
既然弹窗按钮组在95%的情况下都为右侧，那么我们就来看下，在该种情况下，win和mac系统主次按钮的顺序是怎样的，站在巨人肩膀上，总是能看的更远。 

主按钮是指行动按钮，行动按钮是连接用户与产品的接触点，一个优秀的行动按钮，可以提升用户体验，且帮助用户高效完成任务。主按钮颜色在视觉上通常被醒目突出，而次按钮被弱化表现，这可以降低用户出错的风险，及提高用户完成操作的概率。 

在win系统中：
主按钮在左侧，次按钮在右侧。 

在mac系统中：
主按钮在右侧，次按钮在左侧。 

这里插一句题外话，mac的窗口关闭，最小化、最大化按钮在左上角，而win在右上角，它俩总是做啥都反一反。 

那为什么win和mac会做出不同的选择呢？背后又有哪些设计理念在支撑？翻阅了网上各种说法后，我总结出如下说辞： 

1、mac倾向于把当前场景下推荐用户点击的按钮放在右侧，例如，mac推荐取消，就会把取消放右侧；推荐储存，就会把储存放右侧。且右侧按钮为主按钮，视觉上突出强化。 

2、win倾向于把最安全的按钮（比如取消，关闭）放在右侧。因此，可以说它的主按钮在左侧，只是主按钮没有明确的视觉样式，保持和次按钮一致。 
2、弹窗主按钮位置在哪里更合适
关于主次按钮在左侧还是右侧更合适，两大巨头给出来的设计方案是不同的，网上也有很多同学做了该方面的实验，结果大致是说：不论主按钮在左侧还是右侧，只要系统中统一皆可。就像中国人吃饭用筷子，西方人用刀叉，与其纠结筷子和刀叉哪个更适合吃饭，还不如考虑用户的习惯、使用场景等因素，制定出更合适自身产品的解决方案。 

不过话说回来，目前支持弹窗主按钮在右侧的人数占多数（产品专家、设计专家、用户皆包括），原因不外乎：
1、右手操作原则； 
2、用户在弹窗中的阅读模式为“Z”字模式； 
3、BLABLA（接下来我们看看是不是菲茨定律也要参与进来）。 

第二部分：费茨定律
什么是菲茨定律
1954年保罗.菲茨首先提出菲茨定律，费茨定律是用来预测从任意一点到目标中心位置所需时间的数学模型，其后来在人机交互领域也得到了广泛的应用。它的计算公式为： 
T代表完成移动所需的平均时间； 
a代表光标开始/停止的时间； 
b代表光标移动的速度； 
D代表从起点到目标中心的距离； 
W代表目标的宽度（按移动方向为水平方向计算）。 

首先，完成移动所需的平均时间由两个参数来决定，即起点到目标中心的距离D和目标的大小W。其次，起始点与目标距离远，耗时越长；目标越大，耗时越短。 

这里还涉及用户在使用产品时到达到目标的心理诉求：
1、用户对鼠标指针达到目标并没有时间要求，则用户会缓慢移动鼠标指针，在此过程中逐步调整鼠标指针移动的位置，从而最终达到目标。 

2、用户对鼠标指针达到目标有明确时间要求（例如股票下单场景），此时用户会快速将鼠标指针移动到目标附近，然后在做精细化的调整，从而精确操作目标。 

由上我们可以发现，不论用户是否对鼠标指针达到目标有时间要求， 菲茨定律中的两个关键点为：鼠标指针移动到目标大致区域及精细化微调后精确定位目标中心。且在实际产品设计中，我们必须要考虑如何让用户的鼠标指针以最短的时间到达目标。 

因此，我们可以将菲茨定律中，从起点到目标所需的时间细化为以下四种情况：
1、距离远-目标大
除了鼠标指针需要跨越较大的屏幕范围，相对来说还是比较容易到达目标的，因为目标大。 
2、距离远-目标小
用户需要在鼠标达到目标可触位置前做一些鼠标位移的精细化调整。 
3、距离近-目标大
用户无需做太精细的调整就可以轻易到达目标。 
4、距离近-目标小
在快速到达目标后，鼠标需要做一些精细化的调整。 

以上的距离远近实际上还可以进行细化区分，一个是鼠标指针处于页面任意位置，与目标并无上下文关系；一个是鼠标指针处于下一步操作的上一步位置。 

这里可能会影响到的情况是，当鼠标指针处于页面任意位置时，目标元素的大小需要做通用化考虑（使用业界标准或用户的常规认知）。而当可以非常明确鼠标指针与目标的上下关联时，可以适当调整设计策略，例如鼠标hover一个按钮，出现面板，我们可以发现 ，鼠标指针一定是在按钮上了，才可以去进行下一步操作，这个场景下，鼠标指针的起始位置永远是不变的，变的是目标，即选择了面板中的哪个操作。 

菲茨定律的启示
从上述可知，在产品设计中，我们需要 优先考虑使用“距离近-目标大”的设计方案，再考虑“距离远-目标大”和“距离近-目标小”(但也不能太小，还是要稍微合理化一些），不要去考虑“距离远-目标小”的方法。下面梳理了一些在产品中用到菲茨定律的例子，让大家加深对菲茨定律的感知。 

1、点击区域合理加大，降低操作复杂度。例如表格排序功能，需要扩大点击区域。 
2、可点击属性视觉化。例如tabs的下面会带一条选中的宽度线，由此可推理出鼠标hover到其他tabs上的区域也是如此。 
3、相关内容与操作靠近。例如word中鼠标选中文字，右键可带出相关的操作。 
4、相关按钮互相靠近摆放。例如word文档需要被保存，通常保存和取消靠近，便于用户快速做出选择和操作。 
5、给目标操作安排流程，而不是点状设计功能。例如对单条数据启动编辑后，在原位进行保存。 
6、不希望用户操作的时候，目标设计远一点。例如word文档需要被保存时，mac系统会将“不储存”按钮距离“储存”按钮远一些。 
7、控制风险。在移动端中，如果不想用户误触，会将危险系数较高的按钮放在距离拇指热区远的位置。还有例如睡眠、关机、重启等按钮也不适合放一起（实际上真的放一起了，我无数次误关机）。 

第三部分：总结
说到这里，想必大家对菲茨定律已经有了基本认知吧。在菲茨定律中，有一条为：页面四周的按钮更容易被点击（无限可选中），因为鼠标达到屏幕的边角后，就不可能在超过了，所以mac和win都会将按钮放在屏幕边缘。这个就是那位设计师小伙伴说的，“弹窗主按钮在右侧，次按钮在左侧，是由于菲茨定律，这是因为边角的按钮更容易被点击。” 

实际上我们会发现，假如弹窗的主按钮在右侧，鼠标也并不是达到屏幕的边角，鼠标只是达到了弹窗的边缘（这里会存在一定的心理边缘感知，可能那位设计师就是说的这个吧）。然而，这与菲茨定律中的边角无限可选中概念不是一回事。 

所以说，目前弹窗主按钮大家更赞同在右侧的设计理念是：
1、右手操作原则：右手用鼠标，用户会习惯性把光标放在屏幕右边。 
2、用户在弹窗中的阅读模式为“Z”字模式：先浏览标题，最后视觉落脚点在footer右侧。手眼协调，手会执行视觉落脚点的操作。 
3、mac已经培养了大多数人的用户习惯，这点从很多产品设计中就可以看出，放弃用户习惯就是挑战用户体验，所以，我们为何不去拥抱呢。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：站酷    作者：小果1

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(1265)

如何让按钮设计的更迷人

seo达人



按钮在UI界面设计中是不可或缺的元素之一，这篇文章我们将介绍不同类型的按钮包括按钮的状态和交互。我们介绍的都是日常界面中使用的普通按钮，并不包括单选按钮、选项卡、复选框等其他类型的按钮。

 

按钮的不同分类如下：

* 动作按钮

* 常用按钮样式

* 按钮的颜色和形状

* 按钮状态和反馈

* 标签按钮

* 触摸屏按钮

* 按钮的位置

* 系统按钮

* 总结

 

动作按钮 

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。

 

1_1.行为召唤（CTA / C2A）

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

行为召唤按钮

对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。

 

1_2.主要操作按钮

虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。

主要操作按钮

对于主要操作，我喜欢使用实心按钮。

 

1_3.次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

主按钮旁边的辅助按钮的两种设计

我更倾向于使用线性按钮或文本链接作为辅助按钮。

 

1_4.三级按钮

三级按钮通常用于其他操作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要操作。

不同形式的三级按钮

一般来说，人们会使用较小或较不突出的按钮样式。

 

常用按钮样式 

下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。

 

2_1.实心按钮

实心按钮是带有实心填充的按钮。

一个实心按钮

 

2_2.线性和幽灵按钮

线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。

线性按钮（左）和幽灵按钮（右）

 

2_3.圆形按钮

圆形按钮其边缘设置为最大圆角半径。

圆形按钮

 

2_4.FAB（悬浮按钮）

悬浮按钮是一种巧妙的设计模式，Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮，但实际上它们用在屏幕上的主要操作按钮。

一个悬浮按钮

如果您想了解有关FAB的更多信息，我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html )

 

2_5.文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本，甚至就是文本本身（例如“阅读更多”）。

文本链接的不同样式

在颜色方面，大多数网站使用蓝色，因为它是最容易识别的。为什么文本链接的颜色会使用蓝色？它一直追溯到是万维网的发明者，在他选择颜色时发现蓝色很酷的一种颜色，即使是色盲的人通常也能看到它。

 

2_6.带图标的标签按钮

图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。

带图标的标签按钮

处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。

方法1：让图标的大小对齐字体的顶线。

方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

 

2_7.图标按钮

图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮 – 尤其是那些很抽象的语意。

 

2_8.带图标的文本链接

某些文本链接可能带有图标。这些通常不会在正文中使用。

各种带图标的文本链接

 

按钮的颜色和形状 

在设计按钮时，需要考虑以下几个不同的元素。

 

3_1.颜色

在设计产品时，你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色，你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )

不同颜色的按钮

 

另外，在选择颜色时应该考虑色彩心理学。红色按钮多用于删除，黄色按钮多用于警示等。

“删除”、“警告”、“保存”和“更多”按钮

 

3_2.边界半径

边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。

不同边界半径设置的按钮

 

3_3.投影

按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通过使按钮在悬停状态下来达到这个效果。

不同阴影设置的按钮

 

3_4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时，请确保它清晰可辨。

不同标签样式的按钮

以下是一些简单的方法可以让字体清晰易读：

* 选择大写的标签或大标题。（Material Design使用过带有大写标签的按钮。）

* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。

* 选择字体时，请确保字体清晰。

 

3_5.垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高，并在其中添加一定单位的内间距。例如：“我的按钮标签的行高为20px，垂直内间距为8px”。

不同垂直内间距的按钮

为什么会这样设定呢？这里有两个原因：

1）有视觉障碍的人可能会增大浏览器中的字体，因此他们需要更改字体大小而不会将按钮高度定死。

2）这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距，而不是固定高度。

 

3_6.水平内间距

有两种方法可以接近水平内间距。

 

第一个方法：

使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。

宽度由网格决定的按钮

 

第二个方法：

两侧有固定内间距。我通常还会定按钮最小宽度，虽然避免了很窄的按钮，但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。

宽度由内间距和标签长度决定的按钮

 

按钮状态和反馈 

按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。

 

4_1.点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态，当然如果用户没有完成必要的步骤，按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址，他们就不能提交他们的详细信息。

点击和禁用按钮

 

4_2.悬停和悬停离开（鼠标悬停和鼠标悬停离开）

在PC端按钮应具有不同的状态，让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反，但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。

悬停演示按钮

平板电脑和移动设备上永远不会出现悬停状态，因为你的手指无法“悬停”。如果您正在为应用程序进行设计，请不要担心此状态。

 

4_3.焦点

焦点状态可能会让用户困惑。如果你的用户专注度较差，他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动，从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。

默认的焦点状态是蓝色“发光”，幸运的是，我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。

两个不同“焦点”状态的例子

 

4_4.按下

按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时，该按钮会指示为“已点击”。

“按下”状态的按钮

 

4_5.点击

按钮需要“点击”状态以向用户指示它已被点击。

“点击”状态的按钮

 

按钮标签 

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范，以避免以后花更多时间去改变你所有的按钮标签。

 

5_1.动词的用法

大多数按钮都包含指示按钮将执行什么操作，例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词，但在接口上下文中，它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词”+“名词”结构，这会让操作更具规定性，例如“保存文章”等，而不是“保存”。

 

5_2.案例

你还应该决定使用哪种字体大小写。以下是我使用的一些规范：

所有大写字母，例如“NEXT SECTION”，我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。

标题框，例如“Next Section”，我倾向于避免使用标题大小写，因为它不像句子大小写那样容易阅读。就语调而言，我认为它介于“专业”和“会话”之间。

句子大小写，例如“Next section”，我把它们用于更“友好”或“对话”的平台。它更像是一句话，正常我们一句话结束会加一个句号，但是为了设计的美感，请不要加一个句号。

小写，例如“next section”，小写按钮标签使用频率较低。

 

5_3.一致性

为按钮编写标签时，请确保一致性。以下是一些我在项目使用的指导原则：

选择字数：每个按钮一个、两个或多个字

选择大小写：句子大小写，或大写，或标题大小写，或小写

标签结构：如“动词”+“名词”，或“动词”等。

 

触摸屏按钮 

桌面按钮大小调整（单击）

因为桌面上的光标比触摸屏上的手指小，所以您可以将按钮缩小很多。

 

触摸屏按钮尺寸（点击）

麻省理工学院触摸实验室的研究表明，人在使用触摸屏时手指部分是8-10毫米，如果你想避免用户手指触摸错误，最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。

那么，你应该做多大尺寸的按钮呢？专家们说的是：

Material Design建议接触目标应为48dp x 48dp，不同接触点之间距为8dp。

虽然我找不到关于iOS设计系统目标尺寸的任何文档，但一般的理解是，它的最小目标尺寸是44 x 44磅。

如果您在设计大小尺寸方面遇到困难，我强烈推荐Zac Dickerson关于易用性的故事。

 

按钮位置 

如果你非要放置2个按钮，主按钮应放在哪一侧？

主要和次要按钮的两种不同立场

选项A显示左侧为主按钮。它可能是用户首先想要看到的，所以先显示它。

选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮，方便他们继续完成他们的旅程。右侧的按钮也表示继续。

 

系统按钮 

这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮，因为他们的原理是经过深思熟虑的。

Material Design System的按钮

Material Design 按钮图片

Material Design中介绍了按钮的操作，以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。

查看按钮部分：

https://material.io/design/components/buttons.html

 

悬浮按钮在这里查看：

https://material.io/design/components/buttons-floating-action-button.html

 

总结

如果没有按钮，你就不能真正构建界面；我们应该更多的关注它们。了解按钮在界面中是如何设计的？怎样正确的使用按钮并为你的用户提供最佳的体验？

 

原文地址：UX Collective

译文地址：水手哥学会计（公众号）

作者：Tess Gadd

译者： 水手哥

转载请注明：学UI网》如何让按钮设计的更迷人

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源：站酷   作者：陈皮Celia 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(1107)

按钮的最佳尺寸到底是多少？

雪涛

很多设计师包括我在内对按钮尺寸有着颇多困惑。为什么很多产品甚至苹果本身并没有遵循 44pt 的标准规范？为什么有些场景下的 CTA 按钮那么小？按钮的最佳尺寸到底是多少？按钮规范背后到底是什么样的科学依据？这些依据可否量化？

emmmm，如果你和我一样有着这些困惑，本篇文章应该可以给你很多启发。

按钮尺寸对点击行为的影响

按钮的尺寸具体影响到的依旧是视觉和交互的两种能力。

视觉能力上很好理解。当一个元素尺寸越大，人眼就越容易抓捕到这个元素。所以那些越重要的东西，往往会给予更大的尺寸来强制用户注意到它，这也可以解释为什么甲方总喜欢不停地在背后指指点点嫌弃元素太小，就是因为这些元素对他们来说非常重要，只是他们没有我们那么专业，知道强调一个东西的手法不仅仅是放大一种策略。

因此，相对较大的按钮尺寸从视觉上，可以迅速捕获用户的注意力，对点击行为是有益的。

而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目标尺寸越大，移动至目标所花费的时间就越短。所以，较大的按钮尺寸可以降低用户交互的交互成本，使得目标更加”易点“，对点击行为同样是有益的。

但是，按钮尺寸并非越大越好，一方面是避免视觉上的失衡，另一方面也会受到界面空间限制、以及场景差异等因素的影响。

规范中的定义

我们先来看下 iOS 的。苹果规定的最小点击区域是 44pt，这意味着一旦点击区域低于 44pt，将可能会出现点击失准的情况。当然，一些控件（标签栏图标、文字链）可以在视觉表现上只有 24pt*24pt，但是会在周围加入额外的填充使其达到 44pt。

但是，在实际的 iOS 原生产品界面中，很多按钮并未严格执行 44pt 这个数值。小于 44pt 的按钮比比皆是，比如信息页的发送、App Store 的获取、购买浮层的确认、添加 siri、导航类右上角的工具型按钮，它们的点击区域为按钮本身，但是均未达到 44pt。况且其中有一些还是非常典型的 CTA 按钮，比如 App Store 产品详情页中的获取按钮，它的高度仅仅是 27pt。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

而 Android 中的按钮建议尺寸是 56dp，但是和 iOS 一样存在着大量低于这个尺寸的情况。其中不乏那些 CTA 按钮。

学会CTA 设计方法后，按钮的点击率高了49%！

在绝大多数人的眼里，交互设计师的职责是对产品用户体验负责，毋庸置疑这肯定是正确的。但交互设计师并不是一个独立的个体，我们既服务于用户又服务于团队，服务于产品的商业价值，提升转化率也是交互设计中不得不考虑的重要一环。

阅读文章 >>

按钮的最佳尺寸到底是多少？这篇给你权威答案！

这些情况的发生其实也很好理解，每个按钮所对应的用户场景、业务诉求不同，因此并不能一招鲜用一个尺寸吃遍所有场景。但是，有没有一些科学的依据来可量化地解释按钮尺寸对点击的影响？

从 Apple Music 说起

著名产品设计师斯科特·赫尔夫就曾在他的文章《Using science to make truly tappable user interfaces》中提过，iOS9 的 Apple Music 在锁屏界面下的按钮过小，经常会发生无法准确点击的情况，他需要集中精力精确得点击才能完成任务。

不过苹果在 iOS10 之后，锁屏界面下的三个按钮、乃至进度、音量的控制球全部被显著地增大。这使得歌曲点击操作的错误率明显下降，不论是在什么场景下（你懂得，跑步、挤地铁这些不可控的场景下总是会有听歌的需求）都可以轻松地点击。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

而他为了解释按钮尺寸所带来的变化，引入了历史上著名的两个实验。

第一次实验

2006 年，芬兰 Oulu 大学，Maryland 大学和 Parck 学院的研究人员组成一个研究小组。他们的研究目标是，确定在触摸屏幕上单手使用最容易的按钮尺寸。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

他们进行了两组不同场景的实验。第一组让受试者执行一次性的任务，点击一个 CTA 按钮、复选框或者多选框；第二组让受试者执行多次连续的任务，比如输入电话号码。并且在实验期间，研究人员测试了每一种场景下按钮的尺寸。最终的实验结果表明，单个任务下，按钮尺寸小于 9.2mm 后错误率显著增加，而多次连续任务下，按钮尺寸小于 9.6mm 后的错误率显著增加。

特别的是，对于多次连续任务，9.6mm 到 11.5mm 之间的错误率基本不变。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

看到这，来稍微总结一下，9.2mm 和 9.6mm 是两个关键的尺寸节点。在单次任务和多次连续任务下，按钮尺寸分别小于 9.2mm 和 9.6mm 会导致错误率的攀升。这个结果和 MIT Touch Lab 研究得出的最佳热区尺寸 10mm 很接近。

第二次实验

当然，这还不算完。5 年后，德国两所大学的研究人员又进行了一项类似的研究，目的是确定触摸屏幕按钮的最佳大小。

他们的实验方法相对就很潮了。他们专门开发了一款安卓游戏，游戏玩法也很无脑：玩家必须要精准地点击到屏幕中任何地方飘动的任意尺寸的圆圈，游戏才能继续。并且速度越快，得分也就越高。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

这款游戏在上线之后被下载了 10w 次，并且悄咪咪得暗中记录了用户所有的点击行为，记录总量约为 1.2 亿次。

最后根据统计分析，得出了错误率和圆圈尺寸的图表关系。你可以看到，和 5 年前的实验同样，呈现类似的指数关系。研究人员根据图表发现：

在圆圈尺寸小于 12mm 后，错误率开始逐步提升。在尺寸小于 8mm 之后，错误率高达 40%以上。并且研究还发现，在圆圈尺寸超过 12mm 之后，玩家的正确率并没有得到显著的提升。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

结论

由上述的两个实验，我们可以概括出一些有用的结论。

  • 根据各自的实验，在目标尺寸分别小于 9.2mm、9.6mm 或者 12mm 后，均会导致错误率的攀升；
  • 当目标尺寸增加到一定程度之后，正确率基本保持不变。

那么，按钮的最佳尺寸到底是多少呢？

斯科特将实验得出的关键尺寸与苹果、谷歌和微软三大规范进行结合，发现了一些有意思的现象——

  • iOS 的 44pt 对应到实际尺寸为 6.9mm，约 7mm；
  • Android 的 56pt 对应到实际尺寸为 8.8mm，约 9mm；
  • 而微软的 9mm+两边 2mm 的热区，对应的实际尺寸为 13mm。

可以看到 Android 和微软的尺寸，基本对应到了这两项实验得出的关键尺寸。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

最后，再来看下开头 iTunes 的锁屏界面的按钮。可以看到从 iOS9 到 iOS10，苹果将按钮可点范围由 7mm（44pt）扩大至 12mm（82pt），结果也正好符合了微软的规范。看到这里，你肯定更困惑了——按钮的最佳尺寸到底是多少？

其实，并不存在什么按钮的最佳尺寸。

不论是 iOS 的 44pt，Android 的 56dp，还是微软的 82pt，都需要具体情况具体分析。界面布局、用户场景、业务诉求等等，都属于按钮尺寸的影响因素。

比如下面这些 iOS 端产品的 CTA 按钮，它们的尺寸最小到 26pt，最大到 87pt，而且每个产品内部的 CTA 按钮也存在差异。你能说出这些按钮哪一个是最佳尺寸吗?

按钮的最佳尺寸到底是多少？这篇给你权威答案！

当然，我们起码可以去界定一些相对可控的范围。

这里我简单根据斯科特文章中的结论，结合市面主流产品的情况划分出按钮的几类尺寸：

1. 常规场景、局部模块

比如 App Store 的产品详情页的获取，知乎中个人主页的关注，都属于当前页的局部模块，点击之后通常是状态的变化或者出现新的弹层。这些按钮的尺寸我建议控制在 28pt~40pt 之间。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

2. 常规场景、全局模块、强业务属性

比如微信个人页的添加好友、各大电商商品详情页的加购、登录注册页的登录注册等等。这些页面的 CTA 按钮隶属于页面全局，所以可以给它极高的权重、甚至全局吸底展示（如详情页），以更快地促进点击。通常，这类按钮在常规场景下具备了最大尺寸。我个人的建议是保持在 40pt~60pt 之间。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

3. 不可控场景

不可控场景的意思就是，用户点击按钮时所处的场景可能比较特殊，并且这种特殊的场景很可能给用户带来一系列无法掌控的风险。

比如 keep 在跑步场景下的按钮，就需要充分考虑到跑步时不稳定的状态，如果按钮和常规场景一样，那很容易发生无法准确点击的情况，增加意外事故发生的概率；包括来电场景、地图导航场景、快递取件场景等等，都属于不可控的场景。各位可以自己代入脑补一下，这些场景中无法准确点击时容易产生什么样的后果。

所以这些场景中的按钮就得够大，以尽可能覆盖到那些极端的不可控情况。我个人的建议保持在 60pt~90pt 之间。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

当然，这仅仅是很粗略的参考区间值，如何结合现有业务诉求、用户场景需求等因素去合理地界定才是重中之重。如果为了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。

其实从知乎去年 10 周年的大改版可以看到一些有意思的细节。很多按钮的高度比以往更高了。比如盐选会员的续费按钮，由之前的 36pt 提升到了 40pt。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

个人主页的关注按钮也由 28pt 提升到了 32pt，你仔细看的话，按钮的宽度也发生了变化，从之前的 90pt 提升到了 100pt。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

邀请回答界面中的写回答按钮，也由原本的文字链，提升到了实心按钮，高度则直接复用了关注按钮的尺寸——32pt。哦，不好意思，这应该是按钮设计形式上的改变。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

总之一句话，知乎这次的改版，CTA 按钮的尺寸更大了。我们从尺寸对点击行为的影响可以推导出，这次改版背后更为明确的业务目标——促进UGC内容生产、促进关系链沉淀（一旦沉淀了复杂的关系链，用户也就更难以离开平台）以及会员付费转化。



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源：优设   作者：转行人的设计笔记

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务




评论(0) 浏览(1973)

如何让你的「按钮设计」上档次？

雪涛

按钮在界面设计中，属于最基础的元素部分组成，按钮设计的精致，整个页面的品质也会上升不少的档次。今天给大家分享这篇文章，主要讲解在设计按钮时我们应该考虑哪些因素，包括视觉上，有哪些万能的方法及公式，能够正确的制定按钮的设计标准，来提升整个设计的系统性。

如何让你的「按钮设计」上档次？送你这份万能公式！

按钮有哪些作用？

在设计按钮之前，需要先理解按钮起到的代表含义。什么地方该加按钮，什么地方不加按钮，在系统化设计思路中需要非常有讲究。通常按钮在页面，主要起到以下三点作用：

1. 某一类型的功能操作

这种比较常见，如一些控件形态的按钮，比如加减、折叠、展开，下拉等。这类按钮会起到一些功能形态的作用，常用于交互场景。所以在这类按钮设计中，应当弱化按钮形式，重点强调功能，突出主体信息。

如何让你的「按钮设计」上档次？送你这份万能公式！

2. 下一步的明确指引

当页面内容信息过多后，用户容易失去信息焦点，从而忘记下一步操作。信息种类越多，用户权衡的时间就会越久，用户选择罢手及跳出的几率也会越大。所以这个时候，在合适的地方增添按钮，能够很好的引导用户进行下一步操作，提升整体操作的成功率。其次从体验层面，也一定程度能起到页面动线的引导作用，比如下方的一组卡片，在增添了按钮后行动点很明确，非常有点击欲望~

如何让你的「按钮设计」上档次？送你这份万能公式！

3. 固定习惯，明确心理预期

当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长期以往用户就会形成使用这个按钮的习惯，这样对提升复访及固定心智是非常有效果。

所以如果你认为你负责的产品或者是内容，能持续为用户带来价值，那么在页面的关键节点，不如将按钮设计的更醒目。这样用户下次再看到这个按钮时，固定习惯会引导他持续的点击。

如何让你的「按钮设计」上档次？送你这份万能公式！

按钮有哪些类型？

这里我不以按钮的长相来区分按钮的类型，如汉堡按钮或者别的什么的，意义不大。我主要还是想通过以按钮的功能区分，来划分类型，这样大家理解起来更为清晰。

1. 功能性质按钮

这类按钮见到的最多，我们常用的APP里，大量都充斥了这类按钮，这类按钮会起到重点的功能交互，帮助用户得到TA想要的信息。其次样式上面，其实圆形的点击欲，会更强一些，看起来也更利于点击。而方型的按钮，则显得更为正式、严谨。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：如果是圆形按钮，圆角的半径=高度的50%比较合适，而如果是方按钮，边角的小圆角半径控制在15%以下比较合适，我个人喜好用10%。

如何让你的「按钮设计」上档次？送你这份万能公式！

2. 聚焦大按钮

这类按钮通常见于一些核心页面的强指引，比如登录、注册、提交表单、或者是保存，等对页面全局进行操作的一些按钮。需要注意的是，这类按钮只适合对页面全局进行操作，而且页面中大按钮的数量不宜超过2个，信息尽量需要保持聚焦。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：基于@2x，这类大按钮的高度≥72px是比较合适的，通常的尺寸有 80px、88px、96px，大家可以根据产品面向的人群来定高度，如果页面面向的人群较为广泛，我建议采用 88px 或者是 96px 的这种大号版本，毕竟操作起来更为方便。

如何让你的「按钮设计」上档次？送你这份万能公式！

3. 吸底按钮

这类按钮的优先级，在整个页面属于最高，页面的所有信息，都将聚焦在这个按钮中。由于按钮是吸底的，所以会一直浮在页面上，不受页面篇幅影响控制。

如何让你的「按钮设计」上档次？送你这份万能公式！

需要注意的是，吸底按钮一定是页面最重要的功能，或者是整个页面的下一步指引，比如淘宝的立即购买，或者是饿了么、美团的立即下单，又或者是常见的充值界面。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：基于@2x，吸底的高度≥80px是比较合适，常见的尺寸有88px、100px、112px ，按钮的大小可以根据内容来定，建议高度保持在72px以上比较合适。这里需要注意的是，吸底的按钮，需要产出两套设计稿，一套为常规稿，一套为iPhoneX的适配稿。iPhoneX底部控件的区域高度为68px，所以iPhoneX设计稿的吸底高度=常规设计稿吸底高度+68px

如何让你的「按钮设计」上档次？送你这份万能公式！

按钮有哪些状态？

另外在设计按钮的时候，也别忘了补充按钮的多个状态的设计稿。常见的状态，有以下四种：

1. Normal-正常态

这个为按钮的正常显示态，就是正常页面中的显示效果。

如何让你的「按钮设计」上档次？送你这份万能公式！

2. Hover-悬浮态

这个为按钮的悬浮态，一般只会出现在使用鼠标的时候。当鼠标指针停留在按钮时，按钮发出的特殊反馈，则为悬浮态。这类形式在移动端交互中无作用，所以移动界面设计中不需要考虑这个状态。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：正常情况 Hover 态增加 10% 黑色就可以，原理如下

如何让你的「按钮设计」上档次？送你这份万能公式！

3. Pressed-点击态

这个为按钮的按压态，就是按钮在被点击或者是按压后的效果。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：在APP设计中，点击后的效果我们设一个标准值让开发实现就好了。常用的值有按钮减少20%的透明度，或者增添20%的暗度，这两个都可以。通常我建议在亮色上的按钮，使用暗度叠加（增添20%的黑色），在暗色上的按钮，则使用透明度减少（透明度改为80%），实现效果原理参考 Hover 态那张配图

4. Disable-禁用态

当信息未填充完整，或者是某类条件未到，按钮会出现不可点击的状态，处于禁用形式，这个时候，按钮就会呈现禁用态。这个禁用态无论是web还是app，很多场景都会用到，所以建议设定一套标准的设计规范，避免重复定义这个效果。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：禁用态尺寸及大小不变，仅使用色值做区分。建议使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要尽可能把样式做弱，避免用户做无效的点击。

按钮的风格及尺寸

在目前移动互联网设计中，虽然按钮的种类很多，但风格变的逐渐统一，更多都是色值及细节上的差异。从大的风格来看，按钮还是分为这这几种类型：扁平化、轻拟物、重拟物及游戏按钮。

1. 扁平化按钮

这类按钮我们设计用的最多，信息简洁，操作方便，形式追随功能。这里也给大家分享一下我在设计扁平化按钮的一些经验，比如高度宽度，以及阴影的色值。

公式：按钮高度，这个通常是文字字号的2.4倍然后取4的倍数整数，比如字号是24，那么按钮的高度=57.6，离4倍数最近的是56，所以高度=56，圆角=10%的高度，取整后是6px。

如何让你的「按钮设计」上档次？送你这份万能公式！

另外如果觉得不合适，也可以单位往8递增或者是递减即可，例如 56、64、72、80、88 px

按钮宽度：如果不是那种全局按钮，通常按钮的宽度=最多容纳字数的宽度+按钮高度，就好啦。还是以上面那个例子为例，按钮高度=56，文字宽度=96，那么按钮的宽度=56+96=152

如何让你的「按钮设计」上档次？送你这份万能公式！

2. 轻拟物按钮

这类按钮近几年变的非常流行，甚至QQ、淘宝，都开始大面积使用，因为这类按钮在保持信息简洁的同时，仍然有较强的点击欲，视觉上面也能够增添页面的品质感。

如何让你的「按钮设计」上档次？送你这份万能公式！

公式：渐变方向，建议采用水平渐变，重色在右侧，轻色在左侧更为合适。阴影色值我之前就写过，不知道大家还记得么，阴影颜色=按钮颜色的 Alpha50%，x=0，y=按钮高度的20%，模糊值=按钮高度的50%，扩展=按钮高度的 -15%，高级又简单，完美！

如果觉得这个弥散阴影太大的同学，也可以自己手动简单调整下，不碍事。（这个公式仅适用于Sketch，用PS的同学，也可以按照这个逻辑自行研究一下）

如何让你的「按钮设计」上档次？送你这份万能公式！

另外说一句，实际上这个阴影公式并没有什么很多的依据，大多数都是我个人原创总结出来的，简单好用。比如下面的这些按钮的样式，用了公式后的效果大家可以自行感受~

如何让你的「按钮设计」上档次？送你这份万能公式！

 

3. 重拟物及游戏按钮

在一些营销页面中，按钮的样式通常需要做的比较游戏化。游戏化的按钮，大部分会采取游戏场景中的元素，再采用拟物的手法，来进行打造。

通常游戏化的按钮，需要重点几个部分组成，学过素描的同学应该会知道，立体的物体，通常会有几大特征，分别为高光，亮部，暗部，投影及反光。那么如果我们需要绘制一个在营销或者游戏场景中使用的按钮，只需要保证这个按钮有高光，亮部，暗部，投影及反光的这些特征，然后饱满一点就，立马就可以出效果啦。

如何让你的「按钮设计」上档次？送你这份万能公式！

当然，我举的这几个例子都是最基础版本，如果你想做的更丰富一些，那也是没问题的，这个可以case by case 来定。

这个没有太多的公式可以总结，更多的是看设计师的基础美术水平啦~~

如何让你的「按钮设计」上档次？送你这份万能公式！

新拟态按钮

在写这篇文章的时候，突然刷到了一套新拟态的控件设计风格，有种眼前一亮的感觉。虽然这套设计视觉上很有层次很好看，不过感觉短时间之内，比较难大面积推广，因为开发实现起来还是会比较耗费成本。

如何让你的「按钮设计」上档次？送你这份万能公式！

我把源文件保存下来了，对这个感兴趣或者好奇这种效果如何实现的同学，可以下载源文件研究~~ sketch、psd、Figma 格式都有。

文章来源：优设    作者：UX小学

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(1749)

视觉系统中的按钮

雪涛

我爱按钮们。我可以用按钮做很多事：进行下一步，做出决定，或者完成事务。有了按钮，交互变得焕发生机。

这就是为什么按钮们是一个设计系统里最重要的组成部分。非常简单，它们在指定的区域提供可以点击的简单标签。因此，按钮是你应用一种设计语言的基本特征的重要方式，之后你可以把特征扩展到其他更复杂的部分上。

这篇文章讲的是我在一个新生系统中着手设计主要按钮、次要按钮、以及一大堆其他类型按钮的时候所学习到的 12 条经验。

评论(0) 浏览(4228)

那些迷人的按钮设计

蓝蓝

按钮是网页设计最重要的组成元素之一，是用户和网站进行交互的重要桥梁。要设计出优秀的按钮是一件非常困难的事情，需要提供设计师的整体ui设计能力。因为设计师们需要从整体设计的角度考虑按钮设计成什么样的风格才能和页面的其它部分很好的融合，同时按钮的设计要操持风格的一致性。下面蓝蓝设计和大家分享网页中15个迷人的按钮设计案例，一起欣赏。相信可以帮住大家提高ui设计服务能力的，让您在ui设计公司立稳脚步，处于不败之地。

Radio fm buttons

评论(0) 浏览(2889)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档