首页 > 建站资源 > 网站运营 > 交互设计:按钮设计的七大原则

交互设计:按钮设计的七大原则

时间:2018-05-16    来源:人人都是产品经理

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

一、按钮就是按钮

当涉及到与用户界面交互时,用户需要立即知道什么是“可点击的”,什么不是。设计中的每一个项目都需要用户进行解码,一般来说,用户解码需要的时间越多,可用性就越差。

但是用户如何理解某个元素是否具有交互性呢?他们靠以前的经验和视觉符号来判断界面中元素的含义,这就是为何创建按钮时必须使用恰当的视觉元素(比如尺寸、形状、颜色、阴影等)。视觉符号具有重要的信息价值——有助于在界面中创建可视性。

不幸的是,在许多界面中,交互性的符号很弱,大大地减少了可发现性。如果交互不够清晰,用户连哪些是可以点击的,哪些是不行的都弄不清楚的话,设计做的再酷也没什么意义了。

对于移动端的用户来说,这个问题就更严重了。在尝试了解单个元素是否具有交互性时,PC端用户可以将光标移到元素上,并检查游标是否改变了状态。然而移动端用户就没这种机会了,他们只能点击,除此之外没有别的方法可以检测了。

不要以为对用户来说,界面中的东西都是显而易见的。

在许多情况下,设计人员故意不将按钮标识为交互元素,因为他们认为交互元素对用户来说是显而易见的。在设计界面时,您应该始终牢记:使用熟悉的设计创建按钮,用户理解交互元素的能力是远不及你的,因为作为设计师,你当然知道你的设计有什么用。

下面给几个绝大多数用户都会熟悉的按钮:

  1. 带有正方形边框的填充按钮

  2. 充满圆角的按钮

  3. 充满了阴影的按钮

  4. .幽灵按钮

在以上的例子中,“充满阴影的按钮”对用户来说是最清晰的,用户一看到这个按钮的维度就知道这是可以点击的。

不要忘记留白!

按钮本身的视觉固然重要,其周围的空白部分也很关键。以下面的“幽灵按钮”为例,有些用户也许会把它当成是信息框。

二 、把按钮放在用户想要的地方

按钮应该放在用户容易发现的地方,不要让用户满世界的找按钮。如果用户找不到按钮,他们就不会知道这个按钮的存在。尽可能使用传统的布局和标准的UI模式。

传统的按钮布局提高了可发现性;采用标准的布局,用户可以很容易地理解每个元素的目的——即使它是一个没有强指针的按钮。将标准布局与干净的视觉设计和充足的空白相结合,将使布局更容易被理解。

不要和用户玩按钮游戏,测试设计的可发现性,当用户第一次来到包含一些可操作行为的页面时,他们应该很容易就找到相应的按钮才对。

三、标注按钮的功能

带有通用或误导性标签的按钮可能会给用户带来巨大的挫败感,编写按钮标签时要清楚地解释每个按钮的功能。理想情况下,按钮的标签应该清楚地描述它的作用。

你得让用户清楚的知道点了某个按钮之后会有什么反应。来看个简单的例子,假设用户不小心点了“删除”按钮,就会看到以下消息:

在这个语境里,“OK”和“Cancel”到底代表什么意思?大多数用户都会问自己:“如果我点了Cancel会发生什么?”

所以,不要设计一个只由两个按钮“OK”和“Cancel”组成的对话框或表单。

用“Remove”作为标签就比“OK”清晰多了,用户看了就知道到底是什么意思。另外,如果“Delete”是一个潜在的危险操作,你可以用红色来标注一下。

相关推荐
连按钮都设计不好 你还指望用户点击?
网站的分页设计如何做得让用户体验更愉悦?
WEB产品设计须理清脉络 引导用户做正确选择
用户注意力与交互设计的简单分析
13个国内知名互联网公司的产品设计团队博客网址
网站页面重构中如何创建良好的用户体验
互联网产品设计之影响用户体验的4个因素
交互设计的细节分析之分页设计
以移动应用设计为例讲解符合用户预期的设计思路
什么是响应式网页设计?
20大UI设计原则 设计师必备宝典
新浪潮下产品交互设计的三个新趋势浅析
如何在6个月内自学成才成为一个互联网设计师?
产品设计中认知心理学分析其交互设计
案例分析情感化设计对用户体验的影响
B2B行业网站导航菜单的易用性设计原则
细说用户体验设计背后的“黑暗模式”
10条有效提高网站可用性的经验技巧分享
互联网产品设计理念:产品即有机生命体
遵循用户需求的设计:最美APP的9条闪光定律
扁平化交互设计让用户体验更棒
如何让网站更“值得点击”?五大用户体验要点可搞定
从电商网站应用设计中学到的九个成功秘诀
作为一个顶尖产品经理必备的6大特征!
60个以小见大的互联网产品设计细节汇总
对话谷歌交互设计师:Google是怎么做设计的
细节决定成败!提高用户登录体验的5个细节
VXPLO:一款快速实现网页交互设计的工具?
网站设计的10大金律:帮你更好的留住用户!
我与交互设计这十年:交互之外的那些事儿
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
访谈:关于锤子科技 你不曾了解的有趣一面
戏说“愉悦”强迫症:真的交互设计满足需求
产品实用技巧:交互说明中容易忽略的几件事
华为总监:18条交互设计和心理学之间的联系

精彩推荐

热门教程