火星网校
人性化的ui按钮设计技巧，来学习一下
发布时间：2024-04-03 12:24:28 浏览量：246次
现代人越来越离不开智能设备
面对屏幕上无数的按钮
点还是不点是个问题
像是我加班的按钮从来关闭不了
不知道大家有没有发现，按钮越多，我们点击得越慢。这是因为只要有按钮，我们的下意识就会“检查”它们，直到确认无误后才会”决定”点击。
让用户在繁多的按钮当中找到需要点击的那一个，其实是有技巧的，以下5个point，只要运用恰当，点击率一定会直线上升。
01
按阅读顺序放置按钮
不少app都会有这样的错误：把最重要的按钮放在第一位，想要吸引用户的注意力。这其实是违反人眼的阅读习惯的，在划动屏幕阅读的时代里，用户反而会注意到这些按钮的样式，而不是顺序。
按钮的顺序不是为了被看到，而是为了更快的被点击。将最重要的按钮放在第一位，而不是根据阅读顺序从上往下放置，是十分反人类的。
将最重要的按钮设置为高亮，并且顺着阅读顺序放置，避免了要用户重新检查按钮，让他们能够从上往下看清选项，用最快的时间做出决定。
这种做法除了符合人眼视觉流程，也符合我们使用智能设备的习惯，按钮在下方更方便我们的手指头点击。
02
用形状区分按钮
还有一个经常出现的错误就是只用文本来表示按钮，设计师仅仅用文本来表达次选项，这种设计非常不利于“引导”用户点击，也容易让用户只看到首选项。
文本按钮还会让用户产生困惑，分不清这是按钮还是信息，这种不确定性会让他们直接跳过这些按钮。
除了文本按钮，点击区域太小也会让人感到不知所措。所以把文字放在按钮形状里面能够有效让人觉得这是一个按钮，并引导人点击。
03
用颜色推进点击
通常首选项的按钮都是很容易被识别的，因为它要引导用户达到目的。如果你不确定到底要怎么要设置，可以想想用户使用app时的需求是什么，他们想要达到什么目标。
像是购物app，用户的最终目标是买东西，所以高亮的首选项应该是付款。以上这个例子，“keep shopping”和“购物车”都是次选项。
“keep shopping”让用户返回继续看详情或者浏览其他商品，“购物车”则是查看已经选了哪些东西。相比之下，这两个选项，“购物车”的优先级要比“keep shopping”高，因为查看购物车后，还有一次引导用户付款的“机会”。
颜色能够为推进用户点击做出贡献，尤其是当颜色和按钮文本不一样颜色的时候，更容易引导用户点进去。
如果用同色系的不同明度的颜色来区分按钮，效果就更加明显了！
04
文本的粗细
不要以为掌握了以上技巧就可以放松了，我们可以做更多，来优化细节。跟用不同明度的颜色一样，不同优先级的文本也应该有相应的变化。
不同选项的文本，用不同粗细来表示。这个例子中，“checkout”用了粗体来强调自己的优先级。
从视觉上来看，三种不同的粗细度，反应了它们之间的关系，但不会造成视觉效果的突兀，又能引导用户点击。
05
加个图标
最后一个技巧，是为让你的按钮更加“人性化”。前面我们强调了用颜色来区分优先级，不过有一类人群，这个技巧不起作用，那就是眼盲的人。所以，需要用别的方式来提醒他们。
没错！就是加图标！用图形来强调，如此一来就能确保所有用户都能注意到这个按钮了，即使是没有颜色，它还是整个页面中最闪亮的星！
今天的分享就到这啦，如果以上错误例子你都做过的话，看完文章赶紧改正过来！千万不要做完自我感觉都挺好！今天的反面例子，经过层层优化，变成了正面例子！
～此文转载，如有侵权，请联系删除
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
