GameRes游资网

 找回密码
 立即注册

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

发布者: D小游 | 发布时间: 2018-9-11 14:02| 评论数: 2

游戏类型:   设计类型: 

文/极品黄牛

做界面交互设计的时候,有个看似简单但依然容易引起争论的问题——按钮到底得做多大?无论是面对美术同学设计的各种精美小巧细如针尖的按钮,或是策划同学各种“加加加”的需求轰炸,还是老板“大大大”的呼喊,最终还是需要落地——按钮这玩意,多大才是大,多小才算小?这个时候,就需要一套设计规范和标准,但也要言之有理,让人心服口服地遵守。

本文就介绍一个简单快速的入门,让大家了解到按钮大小设计的逻辑,还有到底应该设多少大小的问题。

事先说明:本文介绍的每一节的课题,都是值得交互设计们深入研究的。本文从简单入手,讲究快速实用,摒弃容易混淆新人的长篇大论,但还是建议能查阅网上的相关资料,才能更加深入地了解这方面的知识,希望能帮助到大家。

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

关于按钮到底做多大,有一个很牛逼的公式,称为菲茨定律:

1.png

其中:

MT=完成点击的时间,理论上来说越小越好。

a、b 是变化参数,不知道有什么用。

A = 起点到目标中心的距离,也就是手指移动到按钮的距离。

W = 目标在运动轴线上的宽度,也就是按钮的大小。

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

不想研究这个公式的同学,可以直接看对这个公式的解读(翻译):

1)按钮越大,越容易被点中(这个有点像废话)。

2)尺寸小的按钮,只要增大微小一点,对可点击性就增加很多。

对第二点的理解就是,按钮做得太小是很可怜的,牺牲任何东西都不能牺牲按钮大小。

3)随着按钮的增大,可点性增幅降低。

同样,一味无脑地增大按钮尺寸,并不能带来体验感的同样幅度的提升,差不多就好。

4)按钮过大,不会显著增加精度,但会降低速度。

按钮过大带来的好处会越来越小,而且会带来另外新的问题——想象一下:拿着一个硕大无比如同桌子一样大小的手柄,肯定不如正常尺寸的好。

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

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

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;请尽量保持在这两个标准内。

03、什么是PPI

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

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

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

2.png

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

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

那么如何知道设备的PPI呢,很简单直接百度,或者自己也可以算,参考我这个公式:

3.jpg

通过计算发现iPhoneX和官方公布的数值略有差距,可能全面屏采用了一套不同的算法。

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

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

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

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

4.png

另外,如果是竖屏模式的游戏或软件,甚至是可以支持单手操作的,最好在这个基础上增加1mm左右。具体原因是:

横屏操作,和屏幕接触的主要还是大拇指指面,而横屏下,接触屏幕的很有可能是拇指指腹,从接触面积上来说,几乎少了一半。设置过iPhone指纹解锁的人应该知道,录入手指正面的指纹后,系统还需要我们录入指腹的指纹,这也是考虑到单手手持手机下,手指和指纹屏的接触情况。

05、其他解决办法

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

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

5.png

不怕小按钮,就怕小按钮扎堆,如果是并排密集的按钮,最好能预留出间距,防止误触:

6.png

上面那个3mm,放置在iPhone 8 Plus上对应的像素就是47,对应其他的设备也可以用上文介绍的方法计算出来。

7.png

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

via:游戏扶持by腾讯游戏学院

最新评论

闻人胖砸 发表于 2018-9-12 10:32:25
斯....斯国一
不明觉厉啊!
943757389 发表于 2018-9-14 10:00:14
T=a+blog2(D/W+1)
  • 2018,手游出海市场格局将重新洗牌!
  • 伽马数据《游戏企业品牌报告》发布:超4千
  • 游戏的经验曲线该如何设计?
  • 游戏寒冬继续蔓延
  • 历时3年打造的横版跑酷,《忍者必须死3》上
  • 应用宝8月手游报告:IP游戏成绩斐然 玩法融

小黑屋|稿件投递|广告合作|关于本站|GameRes游资网 ( 闽ICP备05005107-1 )

GMT+8, 2018-9-23 05:02

快速回复 返回顶部 返回列表