按钮怎么设计,这12个知识点告诉你!

释放双眼,带上耳机,听听看~!

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

01、每个按钮只能有一种样式

按钮怎么设计,这12个知识点告诉你!

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

02、包含事件状态和提供视觉反馈

按钮怎么设计,这12个知识点告诉你!

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

03、差异化按钮类型

按钮怎么设计,这12个知识点告诉你!

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

04、保持按钮风格一致

按钮怎么设计,这12个知识点告诉你!

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

05、非按钮不应该看起来像按钮

按钮怎么设计,这12个知识点告诉你!

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

06、保持大小写一致

按钮怎么设计,这12个知识点告诉你!

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

07、知道何时使用图标

按钮怎么设计,这12个知识点告诉你!

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

08、避免长标签

按钮怎么设计,这12个知识点告诉你!

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

09、标签应该清晰传达它代表的操作行为

按钮怎么设计,这12个知识点告诉你!

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

10、在链接之间添加间距

按钮怎么设计,这12个知识点告诉你!不要忽视链接类型的操作按钮。当它们一起出现时,确保为它们添加足够的间距。

11、不要换行标签文本

按钮怎么设计,这12个知识点告诉你!按钮标签的换行降低了可读性——看起来也很糟糕。确保文本在一行之内显示。

12、标签不应该长于一个按钮的宽度

按钮怎么设计,这12个知识点告诉你!

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

人已赞赏
产品设计

规范化做好设计改版

2020-7-10 22:58:59

产品设计

iOS真的越来越像Android了吗?

2020-7-14 23:28:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索