童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

从1。2亿次的点击中,苹果学到了这个提高用户体验的方法

11月27日 程染筱投稿
  从iOS9改版到iOS10之后,锁屏页面的音乐控件变大了,用户体验明显提高。那么最佳的按钮触摸大小应该是多少?经过1。2亿次的实验后,这个结果被微软苹果等顶级公司采用,强烈推荐学习。
  你可能说不出来,但你肯定知道这种感觉当你触摸手机应用界面而它不能正常工作时候,当你感觉你只有精细的点击,才能出发正确的命令时,那种混合起来的沮丧和失败感。
  但是,如果你可以自己创建用户界面,你知道如何合理避免这种情况吗?如果你知道可以通过创建可靠的触摸元素,来帮助您的客户减少错误,使用效率更快,使用感觉更开心吗?
  这是可能的。我们来探讨一下为什么。
  这是你最后一次让我失望了,iOS9
  我在iOS9锁屏页面上使用音乐控件时,遇到了这个问题。
  在日常使用听歌时,我走在路上想要跳过一首歌,我无法在第一次或第三次就点击操作成功,有时甚至三次都不能成功;有时候,我会误触把音量调到最高点;其他时候,我可能会误暂停这首歌。
  最终,这个界面带给我的负面体验,使我改变了我的使用行为:我避免在这界面进行操作。
  这是一个可怕的失败经历。一个专门为了节省我的时间而设计的界面,最终却使我浪费了更多时间。
  不知为何,iOS9的音乐控制破坏了用户界面的关键规律。但是到底破坏的是哪个规律呢?
  不过幸运的是,iOS10来了,改变了界面。更大的控件,更大的点击目标,更大的封面和歌曲信息,使听歌和阅读都变得更容易。
  换句话说,我在路上对歌曲使用操作的出错率明显下降。
  这是为什么呢?
  有科学的答案。
  从1。2亿次的点击中学习
  2016年,芬兰Oulu大学,Maryland大学和Parck学院的研究人员组成一个研究小组。他们的目标是,确定在触摸屏幕上单手使用最容易的按钮尺寸。
  他们测试了两个场景。第一个:执行一次性任务,例如激活按钮,点击复选框,或选择单选按钮。第二个:执行一系列任务,例如输入电话号码。
  在研究期间,研究人员测试了每一种场景下的按钮大小。他们发现当单个任务的按钮小于9。2mm时错误率显著增加;对于系列任务,按钮大小小于9。6mm时错误率显著增加。比较特别的是,对于系列任务,9。6mm和11。5mm之间大小的按钮,造成的错误率差不多。
  五年后,德国两所大学的研究人员进行了一系列研究。他们的目标是,确定触摸屏幕按钮的最佳大小。
  为了进行研究,研究人员发布了一个安卓游戏,这个游戏被下载了大约100,000次,记录了大约1。2亿次点击事件。这个游戏的玩法很简单:玩家必须点击屏幕上任何地方的各种尺寸的浮动圆圈,游戏才能继续。
  研究人员分析了游戏中的点击事件后发现,对于小于15mm的圆圈来说,游戏玩家的错误率稳步上升,小于12mm的圆圈,失误率大幅下降。而对于小于8mm的圆圈来说,40左右都会失误。
  这次研究还发现,对于超过12mm的目标尺寸,精确度的改进并没有什么意义。
  还有无数的研究,包括苹果、谷歌和微软等主要厂商所建议的元素大小。不过,我们首先需要讨论的是所有这些标准的基础:菲兹定律(Fitts’sLaw)。
  历史
  作为产品设计师,我们受益于前辈的辛勤工作。在这种情况下,美国俄亥俄州立大学的心理学家保罗菲兹PaulFitts在1954年创造了一项原则,后来被称为菲兹定律,成为人机交互的基础。
  通俗来说,菲兹定律是人将手移到物体所需的时间的一个模型。物体越近,粗略的说物体越大,手就越快越容易移动到这个物体。
  菲兹可以用数学模型来模拟。应用于触摸屏幕界面时,如果知道屏幕上的目标的大小和距离,可以确定手指点击到目标需要多长时间。
  这里是方程:MTablog2(2AW)
  其中:
  MT完成移动所需的时间
  a,b随情况而变化的参数
  A从起点到目标中心的距离
  W目标沿运动轴的宽度
  我不是数学家,但我所做的研究表明,对数函数部分是非常重要的。
  《MindHacksTomStafford》这本书里,对动态的影响总结的非常好:
  虽然基本信息是显而易见的(更大的目标更容易选择),精确的数学表征令人激动,这个表征包含了对数函数意味着大小和反应时间之间的关系形状是曲线的,所以小的物体尺寸增加,会变的更容易选择,而大的物体的大小增加并没有太大的差异。这也同样适用于目标距离的变化。
  现代研究不断的证明了这一点。在我之前应用的两篇论文里,每篇论文都显示出按钮大小递减在12mm到15mm之间。
  但是最佳的尺寸到底是多少?我们可以用它来设计更好的用户界面。
  适用菲兹定律来设计更好的用户界面
  适用菲兹定律作为基础,整合早期的研究,几乎可以设计出真正好触击的用户界面。
  首先,我们从上面两项研究中得出的按钮大小得出建议:
  9。2x9。2mm
  9。6x9。6mm
  12x12mm
  15x15mm
  接下来,我们将Apple、Google和Microsoft的设计规范和触控目标相结合:
  Apple:44x44points
  Google:48x48dp8dp或更多56x56dp
  Microsoft:9x9mm2mm的两边留白13x13mm
  我们如何应用这些数值?
  我们需要将这些毫米测量值转化为像素,并将我们的设备像素转化为点。由于像素的定义没有标准的尺寸,因此我们需要使用以下共识,特定显示屏下的每英寸的像素数量。
  PixelsPPI(。03937inchespermmmm)
  假设我们使用的是iPhone7的Retina显示屏。根据Apple的规格,iPhone7的显示屏的PPI为326。
  需要做的就是把毫米单位的建议值带进这个公式中:
  Pixels326(。03937inchespermmmm)
  我猜大多数人现在都是在Sketch中做UI,所以将结果转化成点Points。iPhone7的像素密度为200,所以我们只需要在这种情况下除以2,以便在1x的情况下进行设计。
  其次,我们转换了所有这些尺寸,来比较一下iPhone7显示屏的内容。这里还有各个公司的标准关键尺寸:
  那么问题来了,iOS9和iOS10锁定屏幕中音乐控件的大小到底是多少,会出现以上研究中的数字吗?
  从iOS9到iOS10,苹果扩大了控制范围,从7mm到12。8mm。
  这刚好符合MicrosoftTouch的规范。
  设计真正可用的用户界面
  由于人的手指的平均宽度为1014mm,平均指尖的宽度为814mm,MITTouchLab发现,我们可以更容易的定义一个范围,来创建一个真正可用的UI。
  微软标准下的真正可用的UI是由最小尺寸10mm,最佳触摸元素大小13mm左右。
  在这个范围内,可以创建减少用户操作失误,使用效率更高,使用体验更好的界面。
  
投诉 评论 转载

需要产品经理用心做好的交互体验:开关现在的产品越发变得精细且有人情味,一个小小的弹框,提示都是接触用户,实现人机交互的入口,善用弹窗、提示让用户感知你的贴心和用心,往往是产品被用户喜欢并快速爱上的美好开始。不要忽……从交互层面探讨:不一样的App该如何设计?针对APP同质化现象,本文作者从从交互层面探索了不一样的App该如何设计,且谈及自己的解决方案。值得一读。前段时间一篇名为《为什么App设计得越来越像》的文章在朋友圈被设……不同用户体验渠道的无缝衔接不管在什么渠道或设备上,无缝衔接是组成可用的多渠道体验的5大关键点之一。那些能让不同渠道之间的转换体验变得简便的公司,将拥有市场竞争优势。用户通过许多渠道与你的公司或组织……交互设计启示录:交互设计三大标准,信息表述五种方式交互设计本就该是互联互通环环相扣的。交互设计是设计人与物的对话(dialog),交互设计的目的包括:有用性、易用性和吸引性的设计和改善。近些年随着互联网化进程加快,特别是……6种实验性的网页导航模式,激发你独特的设计灵感不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。虽然绝大多数的设计都遵循设计规则和用户的使用习惯,但是标新立异的设计仍然非常有市……UI设计中可借鉴平面设计技巧(版式设计1)UI设计是随着智能设备的飞速发展、互联网行业的发展以及农林牧渔传统行业的急于转向而兴起。主要是企业对移动设备交互界面的重视。在企业越来越重视界面设计的今天。传统的平面设计能为现……从1。2亿次的点击中,苹果学到了这个提高用户体验的方法从iOS9改版到iOS10之后,锁屏页面的音乐控件变大了,用户体验明显提高。那么最佳的按钮触摸大小应该是多少?经过1。2亿次的实验后,这个结果被微软苹果等顶级公司采用,强烈推荐……Icon改版:对于细节的把控才是关键在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。在旧版页面中,我们发现有几个问题,比如:页面形式复杂,导致页面的焦点太多,重要功能不够突出……回顾交互设计的过去,并展望其未来你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NU……Banner设计技巧:6招搞定点缀元素的运用今天我要给大家讲的是点缀元素的在Banner设计里的运用和玩法,它也是大家经常需要用却又经常忽略了或用不好的一个知识点。我以前就反复提到过,一个最常规的最完整的Banne……为什么你爱用的App,都用卡片式设计?今天这篇文章,将全面介绍卡片式设计,看完之后,你会知道为什么爱用的app都喜欢用这样的设计。网页和手机app逐渐摈弃了传统单一的页面设计,向完全个性化的用户体验发展。这种……线上广告更加吸引人的5个思路今天说讲述的5个思路是不同的,内容决定设计,留白,故事都和这种填鸭式的广告不是一个路子。而线上广告和传统广告最大的不同在于,它可以创造体验。现如今的设计师大都是多面手,虽……
进阶之路:听了这么多道理,为何依旧做不好产品?产品经理基本功:迭代时间管理转行产品经理的前几个月,我都做了什么前与后的社交关系链值得创业公司借鉴的项目管理办法:目标导向三招,产品经理教你吹开那个封尘已久的脑洞最好的设计不过就是与用户相恋不靠谱的产品经理:这六点表现,你中了么?产品方法论如何确定需求优先级以产品角度分析,互联网家装平台的模式、需求和关键点为工具类产品加点“社交”元素从亚马逊公司业务,解读“飞轮效应”五更入宣城诣天庆观朝谒张雨绮接棒谢娜,低情商得罪嘉宾,一句话更让自己人设崩塌生活知识科普朋友结婚可以送花吗一场激烈的拔河比赛多肉喜欢什么土壤什么牌子的麦丽素最好吃?初中毕业季班主任寄语字李竞恒:公冶长、奴隶制与儒家毛毛虫的梦吴三桂投降清朝,真是冲冠一怒为红颜,为了。。。个值得推荐的个人提升方法毕加索与苹果大学

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界