按钮设计原则

2020-03-20 本文已影响0人 zzzzzshulin

按钮是在使用软件中必备的元素，连接用户与系统、产品、服务过程中起着重要作用，作为交互设计中的主要控件，我在本篇文章中将通过按钮看的可点击性、位置、反馈、尺寸这四个方面去讲诉交互设计师在设计按钮时需要依照的原则。

一、按钮的可点击性

当涉及到与用户界面交互时，用户需要立即知道什么是“可点击的”，什么不是。用户靠以前的经验和视觉符号来判断界面中元素的含义，该部分从形、色、字这三个方面出发，去描述按钮的可点击性如何设计。

（1）形

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

1、大色块按钮：具有突出性，第一时间就能锁定视觉焦点，所以非常适合用来引导用户操作（非常符合call to action即行为召唤原则）

2、幽灵按钮：描边按钮的突出性都较弱，在界面上视觉和谐度更高，指引性不强。

3、半透明按钮：指引性较差，但可保持界面的和谐度

4、投影按钮：在大色块按钮的基础上，让该按钮更突出，让页面层级关系更分明。

以上仅是将按钮做了分类，重要的是如何去运用，突出重要或引导用户行为的信息，从而达到设计的目的。

·淘宝双十一领取红包的入口弹窗，通过按钮“形”的差异，吸引用户继续领取红包。

（2）色

主要包含两个方面内容：

与品牌相呼应：常见的App按钮根据品牌主题色有着不同色彩；

行为召唤（call to action)：颜色鲜明，增加强烈的对比刺激用户点击欲望；

·知乎的注册、登录等常用功能按钮与品牌主题保持一致。

爱彼迎首页领取礼券按钮颜色非常明显，刺激用户的点击欲望。

（3）字

1、确保文字阅读无障碍

按钮文案应该提示用户具体的操作行为

让用户确信按钮将执行预期的操作，这有助于用户决策

用词准确，防止产生歧义

2、在按钮微文案的设计上，要简练清晰地指明功能，给予用户以提示。

tips：【登门槛效应】只一个人一旦接受了他人的一个微不足道的要求，为了避免认知上的不协调，藿香给他人以后留下前后一致的印象，就有可能接受更大的要求。利用登门槛效应，引导客户进行下一步消费。

给出有效的引导性文案，采用“去、试试、立即”这样的行为动词，降低门槛。

二、位置

（1）用户是扫视，不是细读

通过用户的浏览习惯去设计页面的样式，把握页面层级。

A 、古登堡式的浏览模式

左上角的“主观区”(Primary Optimal Area）、右下角的“终点区”（Terminal Area）、右上角的“强沉寂区”（Strong Fallow Area）和左下角的“弱沉寂区”（Weak Fallow Area）。按照这个图，西方读者会自然地人“主观区”开始，从左到右、从上到下扫视一个页面，直到“终点区”。整个视线路径是一个大号的Z，其中最开始的两个视觉驻留点就在页头上。