宁波IT培训
美国上市IT培训机构
0574-87236644
如何让按钮设计的更迷人（上）
- 时间：2019-08-02 11:15
- 发布：宁波达内培训
- 来源：网络
- 分享到：
按钮在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的网站上查看( )
2_5.文字链接
文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本，甚至就是文本本身（例如“阅读更多”）。
文本链接的不同样式
在颜色方面，大多数网站使用蓝色，因为它是最容易识别的。为什么文本链接的颜色会使用蓝色？它一直追溯到是万维网的发明者，在他选择颜色时发现蓝色很酷的一种颜色，即使是色盲的人通常也能看到它。
2_6.带图标的标签按钮
图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。
带图标的标签按钮
处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。
方法1：让图标的大小对齐字体的顶线。
方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。
2_7.图标按钮
图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。
图标按钮具有不同的风格
如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮 - 尤其是那些很抽象的语意。
2_8.带图标的文本链接
某些文本链接可能带有图标。这些通常不会在正文中使用。
各种带图标的文本链接
按钮的颜色和形状
在设计按钮时，需要考虑以下几个不同的元素。
3_1.颜色
在设计产品时，你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色，你可以使用在线对比度检查器。我使用的是那个。( )
不同颜色的按钮
另外，在选择颜色时应该考虑色彩心理学。红色按钮多用于删除，黄色按钮多用于警示等。
“删除”、“警告”、“保存”和“更多”按钮
3_2.边界半径
边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。
不同边界半径设置的按钮
3_3.投影
按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( )
Material Design通过使按钮在悬停状态下来达到这个效果。
不同阴影设置的按钮
3_4.标签样式
标签样式归结为字体以及阅读的容易程度。选择字体时，请确保它清晰可辨。
不同标签样式的按钮
以下是一些简单的方法可以让字体清晰易读：
* 选择大写的标签或大标题。（Material Design使用过带有大写标签的按钮。）
* 确保标签颜色与按钮填充对比较为突出。您可以使用( ) 查看。始终确保您的颜色符合AAA要求。
* 选择字体时，请确保字体清晰。
3_5.垂直内间距
按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高，并在其中添加一定单位的内间距。例如：“我的按钮标签的行高为20px，垂直内间距为8px”。
不同垂直内间距的按钮
为什么会这样设定呢？这里有两个原因：
1）有视觉障碍的人可能会增大浏览器中的字体，因此他们需要更改字体大小而不会将按钮高度定死。
2）这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距，而不是固定高度。
预约申请免费试听课
上一篇：如何定义你的色板
下一篇：如何让按钮设计的更迷人（下）
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 达内时代科技集团有限公司 版权所有
选择城市和中心
北京
内蒙古
山东省
江苏省
上海
湖南省
江西省
贵州省
广西省
广东省
海南省
台湾