• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分?#39029;?#20540;
发新话题
打印

[其他] 按钮设计的七大原则

按钮设计的七大原则

千库网
注:按钮是交互设计中必备的元素,它在用户和系统的交互中承担着非常重要的作用。在本文中,我将分别介绍创建有效按钮必须要知道的七项基本原则。


一、按钮就是按钮当涉及到与用户界面交互时,用户需要立即知道什么是“可点击的”,什么不是。设计中的每一个项目都需要用户进行解码,一般来?#25285;?#29992;户解码需要的时间越多,可用性就越差。
但是用户如何理解某个元素是否具有交互?#38405;兀?#20182;们靠以前的经验和视觉符号来判断界面中元素的含义,这就是为何创建按钮时必须使用恰当的视觉元素(比如尺寸、形状、颜色、阴影等)。视觉符号具有重要的信息价值——有助于在界面中创建可?#26377;浴?/font>
不幸的是,在许多界面中,交互性的符号很弱,大大地减少了可发?#20013;浴?#22914;果交互不够清晰,用户连哪些是可?#32536;?#20987;的,哪些是不行的都弄不清楚的话,设计做的再酷也没什么意义了。
对于移动端的用户来?#25285;?#36825;个问题就更严重了。在尝试了解单个元素是否具有交互性时,PC端用户可以将光标移到元素上,并检查游标是否改变了状态。然而移动端用户就没这?#21482;?#20250;了,他们只能点击,除此之外没有别的方法可以检测了。
不要以为对用户来?#25285;?#30028;面中的东西都是显而易见的。
在许多情况下,设计人员故意不将按钮标识为交互元素,因为他们认为交互元素对用户来说是显而易见的。在设计界面时,您应该始终牢记:使用熟悉的设计创建按钮,用户理解交互元素的能力是远不及你的,因为作为设计师,你当然知道你的设计有什么用。
下面给几个绝大多数用户都会熟悉的按钮:
  • 带有正方形边框的填充按钮
  • 充满圆角的按钮
  • 充满了阴影的按钮
  • .幽灵按钮


在以上的例子中,“充满阴影的按钮”对用户来说是最清晰的,用户一看到这个按钮的维度就知道这是可?#32536;?#20987;的。
不要忘记留白!
按钮本身的视觉固然重要,其周围的空白部分也很关键。以下面的“幽灵按钮”为例,有些用户也许会把它当成是信息框。


二 、把按钮放在用户想要的地方按钮应该放在用户容易发现的地方,不要让用户满世界的找按钮。如果用户找不到按钮,他们就?#25442;?#30693;道这个按钮的存在。尽可能使用传统的布局和标准的UI模式。
传统的按钮布局提高了可发?#20013;裕?#37319;用标准的布局,用户可以很容易地理解每个元素的目的——即使它是一个没有强指针的按钮。将标准布局与干净的视觉设计和充足的空白相结合,将使布?#25351;?#23481;易被理解。
不要和用户玩按钮游戏,测试设计的可发?#20013;裕?#24403;用户第一次来到包含一些可操作行为的页面时,他们应该很容易就找到相应的按钮才对。
三、标注按钮的功能带有通用或误导性标签的按钮可能会给用户带来巨大的挫败感,编写按钮标签时要清楚地解释每个按钮的功能。理想情况下,按钮的标签应该清楚地描述它的作用。
你?#33804;?#29992;户清楚的知道点了某个按钮之后会有什么反应。来看个简单的例子,假设用户不小心点了“删除”按钮,就会看到以下消息:


在这个语境里,“OK”和“Cancel”到?#29366;?#34920;什么意思?大多数用户都会?#39318;約海骸?#22914;果我点了Cancel会发生什么?”
所以,不要设计一个只由两个按钮“OK”和“Cancel”组成的对话框或表单。
用“Remove”作为标签就比“OK”清晰多了,用户看了就知道到底是什么意思。另外,如果“Delete”是一个潜在的危险操作,你可以用红色来标注一下。



包图网
有人?#25285;?#26059;转木马是最残忍的游戏,彼此?#20998;?#21364;有永恒的距离……

TOP

四、按钮的大小要适当按钮大小应该反映该元素在屏幕上的优先级,大按钮意味着更重要的动作。
优先级高的按钮:让最重要的按钮看起来就是最重要的,增加它的尺寸(按钮更大对用户来说就是更重要),使用?#21592;?#33394;来吸引用户的注意力。


做按钮时要考虑移动端用户的操作友好性,很多APP里的按钮做的太小了,导致用户常常误操作。


麻省理工学院的触觉实验?#24050;芯?#21457;现:
手指垫的平均长度在10-14mm之间,指尖的长度为8-10mm,所以10mm x 10mm就是一个很好的最小触摸目标尺寸。


五、注意?#25215;?font face="Arial, &quot ">按钮的?#25215;?#24212;该反映用户和系统之间交互的本质。问问你自?#28023;?#29992;户期望在这个屏幕上看到的是什么样的?#25215;潁?#24182;据此设计。
例如,如何在分页中排?#23567;?#21521;前/向后”按钮? 一般来?#25285;?#21521;前移动的按钮应该在右边,向后移动的按钮应该在左边。
六、避免使用过多的按钮很多APP和网站?#21363;?#22312;这个问题,提供的选项太多,用户反倒什么也?#25442;?#20570;了。设计APP或者网站的页面时,多想想你认为用户最应该进行的操作是什么吧。
七、提供视觉或听觉反馈
当用户点击按钮时,他们希望界面可以给些恰当的反馈。如果没有任何反馈,用户会以为系统没有收到他们的操作,然后就会重复点击。这?#20013;?#20026;常常导致多个不必要的操作。
为什么会这样?作为人类,在与某物进行互动之后我们总是期望能得到反馈的。不管是视觉的、听觉的或者触觉的,总?#33804;?#25105;们知道互动成功了。


对于?#25215;?#25805;作,比如下载,它不仅需要?#21857;?#29992;户输入,而?#19968;?#26174;示进程的当?#30333;?#24577;。


八、结论尽管按钮是交互设计的一个普通元素,但它值得投入大量的精力,把这个元素做好。记住,按钮用户体验设计最主要的两个点就是识别和清晰。
作者:Nick Babich(微信公众号:集创堂)
原文链接:https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
翻译:熊小熊(微信公众号:集创堂)

有人?#25285;?#26059;转木马是最残忍的游戏,彼此?#20998;?#21364;有永恒的距离……

TOP

楼主写这么多东西也不容易,值?#27599;?#23450;。?#34892;?#27004;主分享经验
另帖子下面的原文链接已失效。

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.94236731.com All rights reserved.

分分彩一天刷10万流水