看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
三招做好按钮设计
三悠
杭州
/
设计爱好者
/
3天前
/
325浏览
版权
私信
关注
三招做好按钮设计
三悠
关注
前言
好久没更新了,感觉特别惭愧,最近立志要把每日一更的目标落实下来,欢迎大家监督。
今天跟大家聊一下做好按钮设计的三大招:
按钮等级
按钮设计要点
按钮设计注意事项
正文
一、按钮等级
在同一界面中,通常应当区分两种按钮等级:主要操作按钮和其他按钮。每个界面都应包含一个用于主要操作的突出按钮,这个高度强调的按钮最受关注,界面元素的排列应该清楚地表明其他按钮不太重要。
最高级别的视觉突出按钮为填充按钮,用于屏幕上的主要、最重要或最常见的动作。它可以帮助人们快速识别他们最可能想要的动作。
收藏
同时,避免在一个视图中使用太多的填充按钮,填充按钮过多会增加认知负担,因为人们在做出选择之前必须花时间比较多个可能的选项。
二、按钮设计要点
1. 根据产品属性为按钮选择适合的形状
直角
:严谨、安全、力量、高端。适用于金融类、奢品类。
全圆角
:活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类,提升亲和力,拉近与用户的距离。
小圆角
:稳定、中性。适用于用户跨度较大的常规类产品中,例如微信。
2. 使用适合的按钮状态
比如启用、悬停、按下和禁用。使用多个按钮时,确保一个按钮的启用状态与另一个按钮的禁用状态不同。
另外要避免使用禁用按钮,禁用控件让组件短暂处于非交互状态,但如果使用不当,则非常容易让用户产生负面情绪,最好始终启用它,如果用户未提供某些必需信息,则只需突出显示空白字段或显示通知更好。
3. 提供恰当的反馈
当存在未能立即完成的操作时,需要及时提供反馈,清楚地传达延迟的原因。例如可在按钮中显示活动指示器,如“检查”更改为“检查中…”。
收藏
按钮设计注意事项
使用以动词开头的标题来帮助传达按钮的操作,如“添加到购物车”。
按钮的标签文本不要换行,为了获得最大的易读性,标签文本应保留在单行上。
使用样式而不是大小来从视觉上区分多个选项中的首选。
避免仅依靠颜色来传达切换按钮的状态,确保每个人都能感知按钮状态的视觉差异。例如,除了使用高对比度的颜色值之外,还可以包括其他视觉更改,例如添加背景形状或更改按钮的内容。
按钮圆角设置最好不要超过按钮高度的1/3,这样不会使其看起来过于拥挤。
收藏
结语
以上就是本期的分享,希望跟大家一起学习、共同成长。
1
举报
|
声明
收藏
分享
原创文章
UI
网页
按钮
相关推荐
换一换
B端筛选设计的优势盘点
383
三悠
怎么找到体验设计灵感 第5期
251
三悠
怎么找到体验设计灵感第4期
414
三悠
会员精选
体育赛事UI设计语言提炼—小脑府
406
小脑府设计团队
推广
B端数据可视化的设计思路
125
三悠
关注
品牌VI系统
2006
恶狗设计中心
数据可视化太重要了
59
三悠
列表总是做不好?不知道什么原因,来这里看看
92
三悠
如何设计列表页
59
三悠
列表页设计总结
230
三悠
表单设计的三大场景
86
三悠
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
你可能喜欢
换一换
GR 微光跑者 | ABD案例
160
ABD品牌策略设计
ClipMind产品UXUI和品牌设计
212
FCC_Lucas
北屿NORYU户外轻运动时尚品牌全案设计
335
王十三品牌设计
数字人民币游戏棋
381
万鱼鱼
「羊年IP」羊羊得亿,来年啥都有亿点!(可授权)
166
重生宝宝
AIGC——线稿怎样真正进入 AI 商业视觉工作流?
410
AICG的小卡拉米
相关收藏夹
换一换
关注
品牌VI系统
2006
恶狗设计中心
关注
作品集
984
VI微娅
关注
数据可视化
494
盘底的洋葱像我
关注
贵族勋章等级图标/语音直播图标 1v1dating
302
Rafael_Hai
关注
IP形象及IP内容
7658
蔡蔡文化
关注
管理后台系统
2461
灵机亿动
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
按钮
#按钮
按钮
设计】
设计
设计、
设计
#设计#
#设计
if设计
设计,
@设计
an设计
设计
🤮设计
设计‘’
is设计
设计‘
设计
设计。
设计🔍
设计a
设计#
#设计
#设计
设计
#设计
设计
设计’
it设计
AS设计
by设计
设计in
in设计
a设计
设计|
设计.
、设计
登录注册
1
登录即可同步推荐记录哦
收藏
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享