火星网校
设计细节:按钮的设计技巧
发布时间：2024-04-03 10:47:31 浏览量：290次
按钮是UI设计中常见的元素之一，如果你掌握了按钮的设计技巧，那你的设计将会更上一层楼。
按钮是一种交互式的元素，可引导用户对其进行描述性的操作。可以打赌，如果按钮上显示“保存”，单击它很可能会“保存”某些内容。它是任何产品设计中最重要的交互元素之一。
它可能导致购买、下载、发送和许多其他重要的操作。数字按钮也是现实世界中按钮的延展，比如：电视遥控器、电唱机或是游戏控制器中的按钮。
最重要的是要清楚
一个按钮应该看起来像是一个按钮
设计按钮时，最重要的规则是要使其足够突出，因此不会与其他信息按钮混淆。
由上图可见，通过从按钮中删除元素，按钮的可操作性逐渐消失，它变成了简单的装饰/文字
好的设计是符合用户的认知习惯的我们习惯了通常与动作相关的某些形状和形式。我们的按钮看起来越类似于按钮相关特征越好，这就是为什么矩形（或圆角矩形）始终是按钮最安全的选择原因。
该元素将被立即标识为按钮
用户无法识别其他形状或形式的设计，比如三角形、圆形、无规律图形等。慎用此类的设计，只有在特殊场景或整体视觉风格要求极大的突破性、创新性时才使用这样的设计。
这些设计仍需要更多的时间被识别为可操作性的元素
按钮元素的拆解在设计按钮时，请记住这些元素中的每一项，并明智的选择它们。以设计规范和产品调性为基础，考虑哪种按钮的设计风格更适合我们的产品并合理的运用到更多界面设计中去。
可以借助网格来设置填充和安全区域的值。在上面的例子中，右边内部边距是垂直间距的两倍，这是提高可读性的安全选择。
间距和对齐按钮间距不对称是所有界面中最常见的问题之一，仔细观察按钮标签是否在水平和垂直方向上居中展示。
除了网格的方法外，还可使用大写字母W确保一种安全的按钮间距的方法，如果按钮标签的上下边距至少有1W的空间，你的设计是OK的，在左右边距上最好使用2x W来提升可读性。
切记，不要忘记按钮的安全空间，如果你有一组按钮，那么每一个按钮的安全空间应该是不重叠的。
合适的大小
网页和移动端的设计都有最小的可点击尺寸，如果你的按钮设计太小，将很难单击或点击它们，这将会给用户带来负面的情绪，甚至卸载你的产品。最好的方法是在移动端设计上所有的交互式元素的尺寸最小不低于44*44。
在移动端设计中按钮最小尺寸为：48*48，在基于光标的设备中，最小按钮的尺寸为：32*32。切记按钮越大，操作的便利性越高。
好的实践
按钮也可以与icon搭配一起使用，结算的按钮可以使用购物车icon增强识别性，但是一定要有“结算”一词。
在按钮中的文本后面加上一个向右的箭头，识别性更强。按钮的引导性更强。
阴影可以使按钮的操作性更强，比平面按钮更加突出。在按钮中添加一个微妙的阴影，使它从背景中脱引而出。关于按钮阴影的设计稍后讨论。
圆角
圆角比矩形按钮更为友好和正面。但是，与此同时，围绕着圆角的设计变得更加困难。如果你在按钮上方保留对齐的文本，则圆角越圆，则该文本在视觉上将越少越合适。它是你感觉好像左边空白处在同一直线上。
对齐图标
在按钮上进行较好的图标对齐是最困难的事情。在许多情况下，字体粗细和图标的粗细之间的关系直接影响它们。但是，有一条简单而有用的规则在大多数情况下都适用。
根据我们的圆角半径，我们创建一个圆或是正方形，其大小等于按钮的高度。在其中，我们创建另一个形状来容纳icon。它与我们的文字高度相同。然后，将图标放置在较小的形状内。
如果是人字形，最好使高度与字高相同，并且你还可以根据字体高度检查线宽。匹配越紧密，最终的按钮效果越好。
边缘平衡如果你使用的是圆角按钮，请记住将正确的圆角比率与屏幕上的其他元素对齐。切记对所有内容使用相同的值会在边界上造成不平衡感。
此处的对角线间距与垂直和底部的对角线间距相同。这样可以得到更好的外缘处理。
对角线间距比边间距大（左）和小（右）。这导致边缘太突出，把焦点从按钮本身转移开。
摘要
当你开始设计主按钮、辅助按钮、三级按钮时，请记住每次都要针对几个因素进行检查，即使是很小的不一致或不对齐等都会导致转化率降低。
有了按钮转化和点击就很重要了。
切记：
- 使你的按钮看起来像是一个按钮
- 使标签垂直和水平居中
- 按钮内部有足够的间距
- 如果你使用图标，请正确使用尺寸和保持对齐
- 根据使用按钮的位置设置边框的圆角
- 检查圆角半径是否与其他界面设计相匹配
- 保持按钮的合适尺寸，但按钮尺寸越大，越易点击和识别
原文地址：
https://uxdesign.cc/design-better-buttons-a5c90a113280
作者：Michal Malewic
译者：haselina
相关精彩：让我们谈谈新拟态和可访问性
图标设计的7大原则
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
