APP设计的那些知识点:如何设计好按钮Button

继续上一篇文章《移动端APP设计那些知识点:icon设计的原则与创新》,我们这节课谈谈移动端APP设计那些知识点:如何设计好按钮Button。

当然,button和icon设计都是在APP设计当中最常见的一些设计元素。也是APP的重要组成部分。

之前,25学堂分享了:

1、APP设计小技巧:如何进行APP按钮设计与排版

2、手机APP设计规范:图标和按钮视觉设计规范

app按钮和弹出层

那么,怎么样才能设计好的按钮Button呢?   阿里妈妈MUX团队的大神给我们分享了四个方法。

做好以下4点就能设计出一个很好的按钮设计:设计简洁,文案明确,强对比,强引导

 

设计好按钮的第一点:设计简洁

将按钮尽量设计简洁,去掉不必要的形式感,过多的形式感会增加用户对按钮的迷惑造成判断的错误;

如下图的APP常用导航图标按钮设计

app常用的按钮导航设计

app按钮设计

 

设计好按钮的第二点:文案要明确,要紧迫,要动词

明确:

按钮上的文案,作为导向来引导用户的行为,首要的目的就是让用户能够最快且清晰的明白他们的点击将会触达什么,因此提示性的文案一定要简短,明确,且直指重点,减少用户判断的时间;

文案的明确很多时候要比设计,颜色等更为重要;

很多情况下会有2个按钮同时出现,是两个完全相反的选择的时候,只有成功设计了提示性的文案才能让用户立即的得出判断;

 

紧迫:

像我们做的购物电商产品里面,使用带有紧迫感的词语更大程度的能让用户去采取行动。按钮上加上“现在”“立即” “马上”等文字,能大大提升按钮的转化率。这些文字能带给用户暗示和感知,如果再继续等待下去,很有可能就会错过这次大好的机会。

文案明确的按钮设计

上图中使用了“马上去抢” “入场疯抢”这种让人感觉有紧迫感的文案;

 

善用动词:

按钮如果使用动词,会让用户产生马上去行动的心里暗示,同时动词也带有强烈的指向性,可以告诉用户下一步该做什么;

app常用的按钮导航设计2

可以看下如下两组按钮,一组是名词,一组是动词,比较下哪一个让你看到更想去点击;

按钮设计

 

设计好按钮的第三点:强对比

按钮的强对比可以让它们从页面中脱颖而出,让用户能够简单地分辨出在哪儿点击时,既提高了效率,也提高了产品的转化率;

增强对比的方法主要是增强按钮与背景颜色的对比,以及增强按钮上文字与按钮背景颜色的对比;

强对比按钮设计

上图中的按钮使用了与背景对比很强的颜色,成为界面的焦点;

 

 

设计好按钮的第四点:强引导

按钮设计的时候通过一些引导性的设计,可以更好的引导用户去判断去点击,提高产品的用户体验;

增强引导最直观的做法就是颜色的选取,通过色彩心理学赋予用户的感受,可以起到很好的引导的作用;

从颜色上去突出和区分你希望他去点击的那个按钮,帮助用户去完成操作;

 

成组按钮

当2个按钮同时成组出现的时候,通过颜色去引导用户去点击你希望他完成的操作;

成组按钮设计

 

要想达到最强的引导,给按钮填充上颜色以及白色的文字,使用蓝色、绿色或者紫色等看着较为舒缓的颜色最好;

 

成组按钮设计2

在你希望引导用户点击的按钮旁边的按钮,最好不要被填充上太明显的颜色,会导致所有的按键之间的颜色对比变得太弱,让用户看到两个按钮时会经过一翻思考后才能做出决策,反之,如果只让它们显示边框则能更好的引导旁边的按钮;

 

不希望用户点击按钮

诸如删除,放弃等操作,从产品角度肯定是不希望用户去做出的决策,可在设计的时候在颜色上做些文章,引导用户三思而后行;

 

成组按钮设计3

将这类按钮填充上红色,橙色等较为刺激的颜色,让用户看到的时候,从心理角度就开始思考,再去做决策;

 

以上就是大神给我们分享的一些关于APP设计的那些知识点:如何设计好按钮Button的干货。希望对各位有所帮助。

 

最后,25学堂再来啰嗦一下:

1. 任何按钮Button设计都要因人而异,所谓以用户为中心,UCD;

2. 按钮设计一定要易见易读;

3. 给我一个点你的理由。

每天更新,
全站高品质素材免费下载!