如何正确设计「按钮」,看完这些公式你就知道!

按钮在界面设计中,属于最基础的元素部分组成,按钮设计的精致,整个页面的品质也会上升不少的档次。

今天给大家分享这篇文章,主要讲解在设计按钮时我们应该考虑哪些因素;包括视觉上,有哪些万能的方法及公式,能够正确的制定按钮的设计标准,来提升整个设计的系统性。

如何正确设计「按钮」,看完这些公式你就知道!

一、按钮有哪些作用?

在设计按钮之前,需要先理解按钮起到的代表含义——什么地方该加按钮,什么地方不加按钮,在系统化设计思路中需要非常有讲究。

通常按钮在页面,主要起到以下三点作用:

1. 某一类型的功能操作

这种比较常见,如一些控件形态的按钮,比如加减、折叠、展开、下拉等;这类按钮会起到一些功能形态的作用,常用于交互场景;所以在这类按钮设计中,应当弱化按钮形式,重点强调功能,突出主体信息。

如何正确设计「按钮」,看完这些公式你就知道!

2. 下一步的明确指引

当页面内容信息过多后,用户容易失去信息焦点,从而忘记下一步操作。

信息种类越多,用户权衡的时间就会越久,用户选择罢手及跳出的几率也会越大;所以这个时候,在合适的地方增添按钮,能够很好的引导用户进行下一步操作,提升整体操作的成功率。

其次从体验层面,也一定程度能起到页面动线的引导作用,比如下方的一组卡片,在增添了按钮后行动点很明确,非常有点击欲望。

如何正确设计「按钮」,看完这些公式你就知道!

3. 固定习惯,明确心理预期

当用户知悉某个按钮能指向某个操作,或者获取某类信息后,长期以往用户就会形成使用这个按钮的习惯,这样对提升复访及固定心智是非常有效果。

所以如果你认为你负责的产品或者是内容,能持续为用户带来价值,那么在页面的关键节点,不如将按钮设计的更醒目;这样用户下次再看到这个按钮时,固定习惯会引导他持续的点击。

如何正确设计「按钮」,看完这些公式你就知道!

二、按钮有哪些类型?

这里我不以按钮的长相来区分按钮的类型,如汉堡按钮或者别的什么的,意义不大。

我主要还是想通过以按钮的功能区分,来划分类型,这样大家理解起来更为清晰。

1. 功能性质按钮

这类按钮见到的最多,我们常用的APP里,大量都充斥了这类按钮,这类按钮会起到重点的功能交互,帮助用户得到TA想要的信息;其次样式上面,其实圆形的点击欲,会更强一些,肉眼看起来也更利于点击;而方型的按钮,则显得更为正式、严谨。

如何正确设计「按钮」,看完这些公式你就知道!

公式:如果是圆形按钮,圆角的半径=高度的50%比较合适;而如果是方按钮,边角的小圆角半径控制在15%以下比较合适,我个人喜好用10%。

如何正确设计「按钮」,看完这些公式你就知道!

2. 聚焦大按钮

这类按钮通常见于一些核心页面的强指引,比如登录、注册、提交表单、或者是保存等,对页面全局进行操作的一些按钮。

需要注意的是,这类按钮只适合对页面全局进行操作,而且页面中大按钮的数量不宜超过2个,信息尽量需要保持聚焦。

如何正确设计「按钮」,看完这些公式你就知道!

公式:基于@2x,这类大按钮的高度≥72px是比较合适的,通常的尺寸有 80px、88px、96px,大家可以根据产品面向的人群来定高度。

如果页面面向的人群较为广泛,我建议采用 88px 或者是 96px 的这种大号版本,毕竟操作起来更为方便。

如何正确设计「按钮」,看完这些公式你就知道!

3. 吸底按钮

这类按钮的优先级,在整个页面属于最高,页面的所有信息,都将聚焦在这个按钮中;由于按钮是吸底的,所以会一直浮在页面上,不受页面篇幅影响控制。

如何正确设计「按钮」,看完这些公式你就知道!

需要注意的是,吸底按钮一定是页面最重要的功能,或者是整个页面的下一步指引,比如淘宝的立即购买,或者是饿了么、美团的立即下单,又或者是常见的充值界面。

如何正确设计「按钮」,看完这些公式你就知道!

公式:基于@2x,吸底的高度≥80px是比较合适,常见的尺寸有88px、100px、112px ,按钮的大小可以根据内容来定,建议高度保持在72px以上比较合适。

这里需要注意的是,吸底的按钮,需要产出两套设计稿,一套为常规稿,一套为iPhoneX的适配稿。

iPhoneX底部控件的区域高度为68px,所以iPhoneX设计稿的吸底高度=常规设计稿吸底高度+68px。

如何正确设计「按钮」,看完这些公式你就知道!

三、按钮有哪些状态?

另外在设计按钮的时候,也别忘了补充按钮的多个状态的设计稿。

常见的状态,有以下四种:

1. Normal-正常态

这个为按钮的正常显示态,就是正常页面中的显示效果。

如何正确设计「按钮」,看完这些公式你就知道!

2. Hover-悬浮态

这个为按钮的悬浮态,一般只会出现在使用鼠标的时候;当鼠标指针停留在按钮时,按钮发出的特殊反馈,则为悬浮态;这类形式在移动端交互中无作用,所以移动界面设计中不需要考虑这个状态。

如何正确设计「按钮」,看完这些公式你就知道!

公式:正常情况 Hover 态增加 10% 黑色就可以,原理如下:

如何正确设计「按钮」,看完这些公式你就知道!

3. Pressed-点击态

这个为按钮的按压态,就是按钮在被点击或者是按压后的效果。

如何正确设计「按钮」,看完这些公式你就知道!

公式:在APP设计中,点击后的效果我们设一个标准值让开发实现就好了。

常用的值有 按钮减少20%的透明度,或者增添20%的暗度,这两个都可以。

通常我建议在亮色上的按钮,使用暗度叠加(增添20%的黑色),在暗色上的按钮,则使用透明度减少(透明度改为80%),实现效果原理参考Hover 态那张配图。

4. Disable-禁用态

当信息未填充完整,或者是某类条件未到,按钮会出现不可点击的状态,处于禁用形式;这个时候,按钮就会呈现禁用态。

这个禁用态无论是web还是app,很多场景都会用到,所以建议设定一套标准的设计规范,避免重复定义这个效果。

如何正确设计「按钮」,看完这些公式你就知道!

公式:禁用态尺寸及大小不变,仅使用色值做区分;建议使用灰色或者是不透明色,常用的禁用色有#CCC或者#999,需要尽可能把样式做弱,避免用户做无效的点击。

四、按钮的风格及尺寸

在目前移动互联网设计中,虽然按钮的种类很多,但风格变的逐渐统一,更多都是色值及细节上的差异。

从大的风格来看,按钮还是分为这这几种类型:扁平化、轻拟物、重拟物及游戏按钮。

1. 扁平化按钮

这类按钮我们设计用的最多,信息简洁、操作方便、形式追随功能。

这里也给大家分享一下我在设计扁平化按钮的一些经验,比如高度、宽度,以及阴影的色值。

公式:按钮高度,这个通常是文字字号的2.4倍然后取4的倍数整数,比如字号是24,那么按钮的高度=57.6,离4倍数最近的是56;所以高度=56,圆角=10%的高度,取整后是6px。

如何正确设计「按钮」,看完这些公式你就知道!

另外如果觉得不合适,也可以单位往8递增或者是递减即可,例如 56、64、72、80、88px。

按钮宽度:如果不是那种全局按钮,通常按钮的宽度=最多容纳字数的宽度+按钮高度,就好啦;还是以上面那个例子为例,按钮高度=56,文字宽度=96,那么按钮的宽度=56+96=152。

如何正确设计「按钮」,看完这些公式你就知道!

2. 轻拟物按钮

这类按钮近几年变的非常流行,甚至QQ、淘宝,都开始大面积使用;因为这类按钮在保持信息简洁的同时,仍然有较强的点击欲,视觉上面也能够增添页面的品质感。

如何正确设计「按钮」,看完这些公式你就知道!

公式:渐变方向,建议采用水平渐变,重色在右侧,轻色在左侧更为合适。

阴影色值我之前就写过,不知道大家还记得么,阴影颜色=按钮颜色的 Alpha50%,x=0,y=按钮高度的20%,模糊值=按钮高度的50%,扩展=按钮高度的 -15%,高级又简单,完美!

如果觉得这个弥散阴影太大的同学,也可以自己手动简单调整下,不碍事。(这个公式仅适用于Sketch,用PS的同学,也可以按照这个逻辑自行研究一下。)

如何正确设计「按钮」,看完这些公式你就知道!

另外说一句,实际上这个阴影公式并没有什么很多的依据,大多数都是我个人原创总结出来的,简单好用。

比如下面的这些按钮的样式,用了公式后的效果大家可以自行感受:

如何正确设计「按钮」,看完这些公式你就知道!

3. 重拟物及游戏按钮

在一些营销页面中,按钮的样式通常需要做的比较游戏化。

游戏化的按钮,大部分会采取游戏场景中的元素,再采用拟物的手法,来进行打造。

通常游戏化的按钮,需要重点几个部分组成,学过素描的同学应该会知道,立体的物体,通常会有几大特征,分别为高光、亮部、暗部、投影及反光。

那么如果我们需要绘制一个在营销或者游戏场景中使用的按钮,只需要保证这个按钮有高光、亮部、暗部、投影及反光的这些特征;然后饱满一点就,立马就可以出效果啦。

如何正确设计「按钮」,看完这些公式你就知道!

当然,我举的这几个例子都是最基础版本,如果你想做的更丰富一些,那也是没问题的,这个可以case by case 来定。

这个没有太多的公式可以总结,更多的是看设计师的基础美术水平啦~~

如何正确设计「按钮」,看完这些公式你就知道!

5. 新拟态按钮

在写这篇文章的时候,突然刷到了一套新拟态的控件设计风格,有种眼前一亮的感觉。

虽然这套设计视觉上很有层次很好看,不过感觉短时间之内,比较难大面积推广,因为开发实现起来还是会比较耗费成本。

如何正确设计「按钮」,看完这些公式你就知道!

 

作者:小学鸭,公众号:UX小学

本文作者 @UX小学

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部