按钮每一行_由一个UI小按钮引发的设计思考

按钮是我们在UI设计中最常用到的控件之一&＃xff0c;但是我们真的了解这个最常用的控件吗&＃xff1f;本文详细拆解了12个关于按钮的知识点&＃xff0c;文章虽然基础&＃xff0c;但相信一定会对你有所帮助。

很多时候&＃xff0c;网站和应用程序对相同的动作类型使用多个按钮样式。清点一下你用了多少种按钮样式&＃xff0c;然后把它们匹配成每种类型一种样式。标准的按钮类型包括&＃xff1a;呼叫行动(CTA)&＃xff0c;主要&＃xff0c;次要&＃xff0c;三级&＃xff0c;成功&＃xff0c;危险&＃xff0c;链接等。

按钮状态&＃xff0c;如悬停、按下和进行中&＃xff0c;为用户提供所需的视觉反馈。如果没有事件状态&＃xff0c;用户可能会对提交操作时会发生什么感到困惑。

按钮类型应该在风格上进行区分&＃xff0c;以提供其层次结构的视觉提示。一个主要的操作按钮应该比次要的或三级的操作按钮更加突出&＃xff0c;并且设计出具有额外意图的不可逆结果的行动。

只要你保持整体风格一致&＃xff0c;任何设计风格都可以使用。如果你使用4px的边框半径&＃xff0c;微妙的渐变和阴影&＃xff0c;确保你所有的按钮类型都采用这种风格。

按钮(尤其是圆角矩形按钮)通常样式类似于标签。如果在设计中同时使用了这两个组件&＃xff0c;请确保添加足够的视觉差异以防止混淆。你最不希望看到的是用户愤怒地单击了一个元素&＃xff0c;却误以为是一个可操作的按钮。

无论你使用的是全大写&＃xff0c;标题大小写&＃xff0c;句子大小写&＃xff0c;还是小写&＃xff0c;确保你不同的按钮类型是一致的。

按钮堆叠在一起看起来很糟糕&＃xff0c;就像长表格的每一行一样。考虑一种更微妙的视觉风格——比如图标——用于具有重复内容的上下文中的操作。

长按钮或链接标签使用户界面混乱&＃xff0c;迫使用户思考。除非操作是唯一的、复杂的或会造成不可逆的损害(比如&＃xff0c;删除数据)&＃xff0c;否则将操作标签内容限制为仅体现必要的操作。

不要让用户猜测按钮的作用&＃xff0c;特别是如果它是不可逆转的。清晰简洁地解释行动的后果。像“是”、“不是”和“取消”这样的标签可能会被误解。在上面的例子中&＃xff0c;用户可以将“cancel”解读为确认取消了该位置&＃xff0c;而不是取消了它的删除。

不要忽视链接类型的操作按钮。当它们一起出现时&＃xff0c;确保为它们添加足够的间距。

按钮标签的换行降低了可读性——看起来也很糟糕。确保文本在一行之内显示。

虽然很明显&＃xff0c;但我见过许多设计中按钮文字的长度超过了按钮的宽度。不要硬编码按钮的宽度&＃xff0c;而是使用间距控制。而且&＃xff0c;尽量减少字符和单词的数量&＃xff0c;只需要能传达动作就可以了。也许最好的标签是根本没有标签——也许是一个图标。

原文&＃xff1a;https://medium.com/nextux/design-better-buttons-6b64eb7f13bc

推荐阅读&＃xff1a;

如果觉得用&＃xff0c;戳一戳下方&＃xff0c;三连鼓励一下