6评论

做交互设计时,按钮大小如何规范

极品黄牛 2018-09-10 3k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏策划行业精英群361498939

做界面交互设计的时候,有个看似简单但依然容易引起撕逼的问题——按钮到底得做多大。无论是面对美术同学设计的各种精美小巧细如针尖的按钮,或是策划同学各种“加加加”的需求轰炸,还是老板“大大大”的呼喊,最终还是需要落地——按钮这玩意,多大才是大,多小才算小。这个时候,就需要一套设计规范和标准,但也要言之有理,让人心服口服地遵守。
本文就介绍一个简单快速的入门,让大家了解到按钮大小设计的逻辑,还有到底应该设多少大小的问题。
事先说明:本文介绍的每一节的课题,都是值得交互设计们深入研究的。本文从简单入手,讲究快速实用,摒弃容易混淆新人的长篇大论,但还是建议能查阅网上的相关资料,才能更加深入地了解这方面的知识,希望能帮助到大家。

1、菲茨定律(Fitts’s Law)

关于按钮到底做多大,有一个很牛逼的公式,称为菲茨定律:
其中:
MT=完成点击的时间,理论上来说越小越好
a、b 是变化参数,不知道有什么用
A = 起点到目标中心的距离,也就是手指移动到按钮的距离
W = 目标在运动轴线上的宽度,也就是按钮的大小

作为一个文科生对于任何数学公式都是拒绝的,有兴趣的同学可以百度详细研究。列出这个公式的目的是,让大家了解到,我们所谓的“按钮手感”,是由哪几个参数影响的。

不想研究这个公式的同学,可以直接看对这个公式的解读(翻译):
1)按钮越大,越容易被点中(这个有点像废话)。
2)尺寸小的按钮,只要增大微小一点,对可点击性就增加很多。
对第二点的理解就是,按钮做得太小是很可怜的,牺牲任何东西都不能牺牲按钮大小
3)随着按钮的增大,可点性增幅降低
同样,一味无脑地增大按钮尺寸,并不能带来体验感的同样幅度的提升,差不多就好。
4)按钮过大,不会显著增加精度,但会降低速度
按钮过大带来的好处会越来越小,而且会带来另外新的问题——想象一下:拿着一个硕大无比如同桌子一样大小的手柄,肯定不如正常尺寸的好。

本节get:菲茨定律是一个很牛逼的定律,想深入研究可以看知乎上的一篇文章(传送门:https://zhuanlan.zhihu.com/p/25530956)。

2、不要废话直接给结论吧

菲茨定律是原理,但最终结论是什么呢,到底要设置多大的按钮呢,有很多讲交互的书籍,有各种答案:

ISO标准:
标准尺寸——19mm*19mm(mm是尺寸单位,毫米)
最小尺寸——9.5mm
最低标准——6.4mm
按钮和按钮之间最小间距——3mm

iOS(苹果)标准:
1倍率设备——44*44dp(dp表示像素,根据苹果设备屏幕,换算下来约7mm)

安卓标准:
48dp(约为7.4mm)

微软标准:
115dp(约为9mm)

看了这么多标准,是不是有点懵?
实际上,目前没有一个统一的标准,没有人可以解释为什么9mm的按钮会比8mm的按钮好,熟悉微积分的同学应该知道,一个平滑的曲线是可以无限分割的,没有那个“好”与“不好”的明显边界。
不过,现在界面都要求精细化,按钮都偏向往小了做,所以9mm~15mm就已经算得上是大按钮了,6mm~9mm是普遍喜欢的区域。但做人要有底线,最好不要再低于6mm了,而且细小的按钮加上过密的排布和微小的间距,会更加加重“误触的灾难”。
另外补充一句,特别是游戏,一些重要的入口,是不在这个体系之内的。相信大家对于很多手游内一个硕大的“play”或“开始游戏”按钮的印象都不会陌生吧。

本节get:
大按钮9mm~15mm
小按钮6mm~9mm
请尽量保持在这两个标准内

3、什么是PPI

当有人说最合适的按钮是XX像素时,那么这个人不是外行就是太懒。在移动设备上,不谈设备直接说像素(px)应该是多少多少,都是没有意义的。

打开百度,查看PPI的解释——PPI是Pixels Per Inch缩写,pixels per inch所表示的是每英寸所拥有的像素(pixel)数目。简单的说,每个手机的PPI都不一样,所以你的手机的6毫米(mm),和我的手机的6毫米(mm),是不一样的,也就是对应的像素值(px)也是不一样的。

所以PPI没什么玄乎的,就是把第2节的毫米(mm)转成像素(px)的媒介,计算方法也很简单,像素=PPI*毫米值*0.03937就可以了,当然也可以弄个高大上的公式:

实际工作中,建议大家把一些主流的设备上的都列出来,等到要做的时候再算就会很繁琐,而且事先列出来有助于时刻遵守,做得多了也就不用再一一对着看了,自然而然就会有意识地去遵守,有点像“肌肉记忆”。

另外,大家也会接触到一个DPI的概念,这两个概念非常类似,甚至有一些地方都混为一谈。网上介绍DPI和PPI区分的文章很多,有兴趣的同学可以自行寻找学习,但是有一点个人的建议:如果你是做手机游戏和软件的界面设计的,可以只关注PPI,而无视DPI,不然大量的信息充斥进来,很容易混淆。

那么如何知道设备的PPI呢,很简单直接百度,或者自己也可以算,参考我这个公式:
通过计算发现iPhoneX和官方公布的数值略有差距,可能全面屏采用了一套不同的算法。

另外再最后啰嗦一句,其实很多项目,都是只有一个“设计分辨率”的,也就是GUI设计的时候,只是以一个分辨率作设计,其他分辨率只是进行适配,不太可能每个分辨率都单独进行一套设计。目前游戏主流的设计分辨率是1334*750(iPhone6),或是1920*1080(Plus设备)。

本节get:
根据设备的PPI,把物理大小(mm)转成像素(px),才有实际操作设计的意义。

4、不同的位置对大小的影响

由于移动设备的小巧,所以其持握方式也会对按钮大小有要求,一般来说,离设备边缘的按钮应该设的更大一些,离设备越中间的按钮就可以放宽要求。

另外,如果是竖屏模式的游戏或软件,甚至是可以支持单手操作的,最好在这个基础上增加1mm左右。具体原因是:
横屏操作,和屏幕接触的主要还是大拇指指面,而横屏下,接触屏幕的很有可能是拇指指腹,从接触面积上来说,几乎少了一半。设置过iPhone指纹解锁的人应该知道,录入手指正面的指纹后,系统还需要我们录入指腹的指纹,这也是考虑到单手手持手机下,手指和指纹屏的接触情况。

5、其他解决办法

当然,规范是死的,实际情况还会有很多不得不违反规范的做法,为了让设计效果和实际体验折中妥协,我们还可以采取下列方法:

只牺牲一个维度(宽或高),也能达到较好的点按效果:

不怕小按钮,就怕小按钮扎堆,如果是并排密集的按钮,最好能预留出间距,防止误触:
上面那个3mm,放置在iPhone 8 Plus上对应的像素就是47,对应其他的设备也可以用上文介绍的方法计算出来。

让按钮的触控区域和按钮的实际尺寸脱钩,这个就需要程序做支持了,这是最一劳永逸的做法,可以应对各种不同的情况,但要注意一点:触控区域代替了按钮,执行响应的任务,那么触控区域本身就应该代替按钮,执行遵守上文所说的一系列规范了。


...