在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
按钮设计的基本原则有哪些?按钮设计基本原则包括:强化按钮、凸显按钮位置、凸显重要按钮、把按钮按照合理的顺序放好、给按钮匹配释义标签、如果用户不想做任何操作,不安排按钮、弱化消极按钮。按钮创建并不是特别困难,但很容易在各类产品中找到一些体验不好的按钮设置影响用户体验。
一、强化按钮
强化按钮边缘或在按钮下方添加阴影使得按钮在视觉效果上更加强化,让按钮从背景上分离开;而且看起来可以吸引人去点击。如果单词周围没有形状和阴影包裹,那么没有办法感知其是一个按钮;而且一个单词是没有办法给予足够的视觉提示,吸引用户做点击操作的;按钮保持该有的按钮的基本属性。但许多网站设计师会担心一个凌乱的旧的按钮会破坏整体设计的格调。希望主操作按钮设计得很棒,同时也包含基础的按钮属性;而对于用户来说,这是一个最重要的地方,所以需要让用户感知到带有按钮属性的视觉愉悦。
二、凸显按钮位置
用户体验中争论最激烈的问题之一是:“确定按钮是在取消按钮的左侧或是右侧?”。这边还有一个关于按钮组合同样激烈的争论,例如研究上一个和下一个按钮的组合设计。你可以在很多地方找到这样的争论,而且观点往往不一。设计只包含有确认和取消两个按钮组合的对话框或弹窗。同时我也没有在哪个地方看到过只包含有上一步和下一步两个按钮的页面。在一个网页中,总会包含有其他的元素,比如文本、图像或者其他元素。
三、凸显重要按钮
在现有的产品中经常看到界面上罗列了一堆相似的按钮让用户去从中挑选,这个过程相当有难度,需要耗费用户的认知成本。为什么不给用户一点提示,让主按钮更加突出?把它变大一点或让它看起来更重要,创建一个更大的目标供用户单击。或尝试更传统的方法:用一个更亮的颜色作为主要的动作按钮,来让主按钮变得显而易见。
四、按钮顺序合理
如果主按钮需要放在用户下一个查看的位置,那么其他按钮应该放在哪里?应该把其他的按钮藏起来,这样用户就不太容易发现它们。虽然这是一个很好的建议,但是如果您不考虑其他设计因素而遵循它,可能会出现不正确的布局。对于从左到右阅读的语言,上一步按钮应该始终位于下一步按钮的左侧,所以给出的解决方法是重新排列字段和按钮,如图10所示。另一个方法是增加页面的左边距并将上一个按钮放入其中。
五、给按钮匹配释义标签
最佳体验设计原则:给按钮安置释义标签。不受欢迎的消息类弹框,告诉一些严重和可怕的错误,并希望单击确认。这种体验不好,我不想在收到这样的坏消息后再单击“确定”,当然不能保证用户会看到按钮上的标签。如果你在告警提示时放置了错误的按钮,一些用户不会阅读按钮的标签,而是会单击按钮;一些用户则会阅读这些标签,因此可以通过编写每个按钮释义标签来帮助用户快速理解;如果你发现自己陷入了一个争论中,比如说,取消操作应该在一个对话框中,记住你需要用它的功能性意思来标记按钮。
六、用户不想做任何操作不安排按钮
为了测试是否适用,我尽量去进行填写,但我真的不想注册一个网站或申请贷款或做其他目的的表单,所以这个时候有一个重置或取消按钮会比较方便。如果为从事表单设计的客户做设计,请确保包含重置按钮。如果为别人设计的,问问自己是否真的想清楚所有的填写过的内容。在流程中,用户遇到“登录”按钮和“注册”按钮两个选择,但用户要么不记得的登录凭据,要么不想注册,所以两个都不是用户的选择。用户想做的是将注册改为继续,从而实现了销售额的大幅增长。
七、弱化消极类按钮
放置用户不想操作的按钮,但是有时确实需要提供消极类按钮,如取消订单。在自己案例库中找到的看上去一个合理的“取消”按钮,截图来源一个网站,该网站的目标用户是那些即将准备进行一笔相当大的购买、每月支付长期款项的非熟练用户,因为这批用户不知道点击关闭窗口的关闭按钮就可以取消交易。
网页是用户和网页的对话过程。按钮在人和网页的对话中起着至关重要的作用。按钮设计一定要遵循设计基本原则。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
UI/UE设计师需要养成哪些职业好习惯?
UI/UE设计师需要养成哪些职业好习惯?对于很多新人进入职场很积极,肯吃苦有努力,专业能力有可能会比很多工作多年的还要好。工作中需要养成随时整理的习惯,每一个完成的项目都把最终的定稿方案提出来,保持与产品和技术有一定的面对面沟通,主动的去找他们阐述你的想法,面对面语言交流。新手设计师入职一定要养成好的工作习惯。
11926
2019-08-14 10:05:32
想做设计师?怎样系统学习Photoshop?
在互联网高速发展的过程中,UI设计师成为炙手可热的,甚至非专业出身的小伙伴纷纷加入到设计师的行列中。对于零基础的同学们而言,首要攻克的难关就是PS的使用。工欲善其事必先利其器,掌握好工具的使用才能更好的发挥设计的灵感。那我们应该怎样系统学习Photoshop呢?下面小编与大家一起学习一下Photoshop的学习内容。
8703
2019-08-07 18:11:27
【收藏】Photoshop快捷键集合
Photoshop是专业设计师必须掌握的一种工具。在平面设计、网页设计、UI设计等众多领域有非常广泛的应用。为了提高绘图速度,设计效率,PS软件定义了多种快捷方式。在实际应用中,掌握快捷键越多,设计师的实际工作效率就越高,能够大大节约设计时间。博学谷小编将所有的PS快捷键整理成为一片文章分享给大家,建议大家收藏。
6558
2019-08-08 14:18:01
UI设计晋升之路:必须掌握的原型设计软件
UI是用户界面的简称,主要工作是各种应用的界面设计。与此同时UI更需要关注的是用户体验以及交互设计。那在UI设计的职业发展规划中,他们的晋升路径是什么呢?需要具备什么样的技能?
7623
2019-08-14 10:19:39
淘宝电商UI设计教程学什么?学完能做什么?
大电商时代的来临,使得中国网购用户已达6.1亿,年快递业务量达507亿件。当然电商行业的激烈竞争也达到白热化阶段,有不少商家在电商行业赚得盆满钵满,但同样也有好多商家盈利为负增长。想要提高自身的行业竞争力,就需要激发消费者的购买欲。而高质量的产品宣传图是很重要的因素,同时高级产品精修师更是高薪难求。因此,淘宝电商UI设计教程才显得尤为重要。那么淘宝电商UI设计教程学什么呢?
4530
2019-11-19 18:13:58