三招做好按钮设计

用户头像
杭州/设计爱好者/3天前/325浏览
三招做好按钮设计
用户头像
三悠
前言
好久没更新了,感觉特别惭愧,最近立志要把每日一更的目标落实下来,欢迎大家监督。
今天跟大家聊一下做好按钮设计的三大招:
  1. 按钮等级
  2. 按钮设计要点
  3. 按钮设计注意事项
正文
一、按钮等级
在同一界面中,通常应当区分两种按钮等级:主要操作按钮和其他按钮。每个界面都应包含一个用于主要操作的突出按钮,这个高度强调的按钮最受关注,界面元素的排列应该清楚地表明其他按钮不太重要。
最高级别的视觉突出按钮为填充按钮,用于屏幕上的主要、最重要或最常见的动作。它可以帮助人们快速识别他们最可能想要的动作。
三招做好按钮设计(图ZMTU5MjcxNzI=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
同时,避免在一个视图中使用太多的填充按钮,填充按钮过多会增加认知负担,因为人们在做出选择之前必须花时间比较多个可能的选项。
二、按钮设计要点
1. 根据产品属性为按钮选择适合的形状
  • 直角
    :严谨、安全、力量、高端。适用于金融类、奢品类。
  • 全圆角
    :活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类,提升亲和力,拉近与用户的距离。
  • 小圆角
    :稳定、中性。适用于用户跨度较大的常规类产品中,例如微信。
2. 使用适合的按钮状态
比如启用、悬停、按下和禁用。使用多个按钮时,确保一个按钮的启用状态与另一个按钮的禁用状态不同。
另外要避免使用禁用按钮,禁用控件让组件短暂处于非交互状态,但如果使用不当,则非常容易让用户产生负面情绪,最好始终启用它,如果用户未提供某些必需信息,则只需突出显示空白字段或显示通知更好。
3. 提供恰当的反馈
当存在未能立即完成的操作时,需要及时提供反馈,清楚地传达延迟的原因。例如可在按钮中显示活动指示器,如“检查”更改为“检查中…”。
三招做好按钮设计(图ZMTU5MjcxNzY=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
按钮设计注意事项
  • 使用以动词开头的标题来帮助传达按钮的操作,如“添加到购物车”。
  • 按钮的标签文本不要换行,为了获得最大的易读性,标签文本应保留在单行上。
  • 使用样式而不是大小来从视觉上区分多个选项中的首选。
  • 避免仅依靠颜色来传达切换按钮的状态,确保每个人都能感知按钮状态的视觉差异。例如,除了使用高对比度的颜色值之外,还可以包括其他视觉更改,例如添加背景形状或更改按钮的内容。
  • 按钮圆角设置最好不要超过按钮高度的1/3,这样不会使其看起来过于拥挤。
三招做好按钮设计(图ZMTU5MjcxODA=) - 观点 - 站酷设计师三悠原创素材 - 站酷ZCOOL
收藏
结语
以上就是本期的分享,希望跟大家一起学习、共同成长。
1
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
【新年UI图标】游戏/娱乐icon
【新年UI图标】影音icon
新能源APP应用UIKit
【新年UI图标】优惠券icon
高级感金属拟物 UI设计组件库
UI通用设计素材1
手表表盘UI系列
Security Camera UI kit
我的钱包-UI界面设计-app
3D卡通UI界面图标可爱插画免扣素
新拟态风格 UI设计组件库
钱包ui模板
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
APP/小程序商业项目UI模板|99个高保真UI+79个原型
抽象液态渐变UI背景模版
【新年UI图标】汽车icon
【新年UI图标】珠宝icon
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】银行卡icon
户外旅行飞机情侣假日出行
你可能喜欢
相关收藏夹
大家都在看
登录注册