您的位置:首页 > Web前端 > 其它 > 正文

网页按钮设计的几个建议

更多 时间:2014-4-16 类别:Web前端 浏览量:797

网页按钮设计的几个建议

网页按钮设计的几个建议

在页面里要强调的链接自然会以按钮的形式表现,尤其所谓重量级按钮是促成观者完成页面功能的一个很重要的部分,所以对于其本身来讲,应该具有“吸引眼球”的效果。

 

一、对于一个可以起到吸引用户点击作用的按钮,建议从下面几个方面来思考

 

1.按钮本身的颜色

本身的颜色应该区别于它周边的环境色,因此它要更亮而且有高对比度的颜色。

 

2.按钮的位置

按钮的位置也需要仔细考究,基本原则是要容易找到,特别重要的按钮应该处在画面的中心位置。

 

3.按钮上面的文字表述

在按钮上使用什么文字传递给用户非常重要。需要言简意赅,直接明了,如:注册、下载、创建、免费试玩等,甚至有时候用“点击进入”,这一点上就是千万不要让观者去思考,越简单、越直接越好。

 

4.按钮的尺寸

通常来讲,一个页面当中按钮的大小也决定了其本身的重要级别,但也不是越大越好,尺寸应该适中,因为按钮大到一定程度,会让人觉得那不像按钮,潜意识的认为那是一块区域,导致没有点击欲望。

 

5.让其充分通透

你的按钮不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出,也需要更多的padding(内边距)才能让文字更容易阅读。

 

6.注意鼠标滑过的效果

给予较为重要的按钮适当加一些鼠标滑过的效果,会有力的增强按钮的点击感,给用户带来良好的用户体验,起到画龙点睛的作用。这里要注意的 是,不太适合按钮集中的地方,每个都增加高亮的鼠标滑过的效果,这样会造成视觉过于杂乱,影响用户浏览的舒适度,所以要强调的是“恰当”地添加鼠标滑过的 效果。

 

其实在我们平常的设计当中有很多重量级不那么高的按钮,需要“低调”处理,也就是说在一个页面当中,众多的按钮,是有功能优先级别的,这样就务必让一堆按 钮也呈现出视觉的优先级别。

 

二、网站按钮的10大错误用法

 

1.使用‘重置/清空’按钮

这毫无意义。为什么我会把刚输入的内容清空?如果填错了,改了就是,完全没必要把所有都清空然后从头开始填写。更糟糕的是,重置/清空按钮还常常被放在左边,这很容易导致误按。你知道有多少用户会因为 不小心‘清空’了所有的内容,然后愤怒的放弃填写么?

 

2. 按钮太小

如果你希望用户点击‘马上订购’按钮,那一定要让用户看到,要足够大。

 

3. 按钮不容易发现

应该让它很醒目。如果按钮颜色和网页背景类似,它会融化在背景里。按钮要与其他颜色明显的区分开,这样即使是色盲/色弱的用户也可以非常容易的看到。

 

4. 按钮位置不合理

继续操作的按钮应该放在右边,返回上一步的按钮应该放在左边。这才符合用户的逻辑习惯。

 

5. 花哨的按钮

有些设计师为了原创,会设计非常华丽的按钮,结果是按钮看起来完全不像用户所熟悉的按钮样子。所以,应该让按钮非常简洁,灰底白字的普通按钮是最有用的。像这样花哨的按钮就没有遵循这个基本原则。

 

6.按钮上的文字不合理

如果你不管具体的功能,把所有的按钮都叫‘确认’或‘继续’,那你应该重新考虑按钮的文字。理想情况下,按钮的文字应该清楚地描述它的功能,例如,‘更新个人资料’或者‘付款’或者‘下一步’。另外,在按钮上使用‘《’或‘》’表示操作的步骤也是很好的方法。

 

7.按钮太多

如果你给用户太多的按钮,他们很可能会不知所措,然后什么都不点直接放弃。应该选择你最希望用户做的操作,然后给它设计醒目而且足够大的按钮。当你确实还需要用户作其他操作时,可以用相对较小的按钮,太多的按钮让用户完全搞不清楚重点在哪里。

 

8. 按钮太丑陋

有些按钮简直丑陋到你会让鼠标离它们越远越好。看看下面的这些按钮,你会点击它们么?

 

9. 按钮没有提示文字

如果希望用户点击一个按钮,你需要在他点击前明确的告诉他们按钮的功能。

 

10. 令人讨厌的按钮

那些带动画,旋转或者其他糟糕效果的按钮只会让人厌恶,分散用户的注意力。

 

 

您可能感兴趣