用户界面设计文档:手指友好型设计

文章描述:手指友好型设计-为了更好的点击而设计.

玩飞镖的时候,靶心是最难射中的位置,因为靶心是整个靶面上面积最小的部分。越是小的目标,就越是难以达到。这个准则在移动设备的触摸屏幕上同样适用。

众所周知,对于触屏设备用户来说,面积小的目标比面积大的目标更难操纵。所以,在设计移动设备界面的时候,触控目标一定要充分的大,足以让用户操作自如。但是多大才算充分呢?多大才是对于大多数用户最合适的尺寸呢?各大移动设备开发者已经认识到这个问题,最常见的做法是在各大厂商的用户界面设计文档中寻找答案。

那么,设计文档怎么说?

Apple的IPhone Human Interface Guidelines推荐触控目标的最小尺寸是44*44 pixels。Google的Android Design说7-10mm是比较理想的尺寸。Microsoft的Windows Phone UI Design and Interaction Guide推荐的最小触控目标尺寸为7*7mm(26*26px),理想的尺寸为9*9mm(34*34px)。Nokia的开发指南建议目标尺寸应该不小于10*10mm(28*28px)。

虽然每个设计文档都给出了大体的合适尺寸,但是我们可以看到各个设计文档都有所不同。实际上,有些他们所推荐的尺寸是远小于用户手指尺寸的,而正是这些误差导致了用户在操作过程中的种种问题。

小目标,大问题

如果触控目标太小的话,用户需要付出额外的精力来进行精确的点击。用户需要不断的调整他们的手指来点击目标并获得反馈。有的人习惯用指腹,这样可以覆盖整个目标区域,但如此以来就很难在点击的同时看到按钮的内容,也看不到点击的反馈。而有些人用指尖,这样可以在点击的同时获得视觉反馈。如果用户需要多次尝试才能到达目标的话,就会影响任务操作的顺畅,耗费了不必要的精力,并且增加了用户的挫折感。

除此之外,小的触控目标还很容易导致误操作。当小的按钮被组合在一起的时候,用户很容易因为目标太小而点击到邻近的按钮,从而触发了其他动作。这样的误操作在用户使用大拇指进行操作时尤为明显。有些用户为了在点击的同时看到反馈甚至将手指侧过来进行点击,其实,这完全是可以避免的。

对于用户来说,很多时候他们只有一只手来操作设备,单手握持设备的时候,大概就只能用拇指进行点击操作了。我们的设计不能因为用户用的是拇指而不是食指而出现更难点击的情况,更不能导致他们的误操作。

食指的平均宽度

MIT的一项研究指出,大多数成年人的食指宽度为16-20mm,换算后大约为45-57px,在设计文档中,只有Apple的44px还比较接近。

如果触控目标的宽度能够达到45-57px,那么操作起来就很舒适了,并且在进行点击的时候,按钮的边缘是可见的,这样点击的反馈也能很好的体现出来。用户点击和拖放目标的速度也能大大提高。根据费茨定律,目标越小,达到目标的时间越长。小的目标需要用户付出额外的精力去精确的点击它,增加目标的宽度就不用担心这些问题了。

拇指的平均宽度

有的用户喜欢用食指进行操作,而用拇指的用户更是大有人在。两者最大的不同在于拇指更宽。一个成年人的拇指宽度大概是25mm,换算之后大约是72px。

对于拇指用户来说,72px宽的触控区域能够很好的进行定位,同时也能看到目标的边缘和角落,从而获得反馈信息。

Microsoft Research的一项研究发现,触屏用户的误操作数量随着点击目标的增大而减小,用户点击目标的速度也随之变快。

虽然增大目标的尺寸有诸多好处,但在某些情况下也有例外。大家都知道,移动设备的空间是很有限的,如果一味的增大按钮目标的尺寸,移动设备尤其是手机的屏幕肯定会不够用。所以在设计的时候,我们必须解决屏幕大小和点击目标大小之间的冲突和矛盾,在屏幕允许的情况下尽可能的使用充分大的按钮目标,如果实在不行,我们还有设计指南的推荐尺寸可用。

游戏中的应用

另一个我们需要考虑的问题是用户什么时候用食指,什么时候用拇指。如果是在游戏当中的话,用户会更倾向于使用拇指进行操作,想想PSP,NDS。所以,游戏应用中的控制区域最好要适合拇指的宽度。同样,触控目标的大小要既能舒适的控制,又能看到目标的反馈。

毫无疑问,让移动应用中的触控区大小与用户手指尺寸相匹配大大提高了应用的可用性。如果用户在使用移动应用的时候还要特别花注意力来进行点击操作,那么其用户体验必将大打折扣。

本文编译自汪锐,原文地址。

时间: 2024-09-18 02:43:14

用户界面设计文档:手指友好型设计的相关文章

如何写软件设计文档

软件设计的不同模型:瀑布式.快速原型法以及迭代式 自从1968年提出"软件工程"概念以来,软件开发领域对于借鉴传统工程的原则.方法,以提高质量.降低成本的探索就从未停止过.而在这个过程中,提出了许多不同的软件开发模型,典型的有:瀑布式,快速原型法,以及迭代式开发等. 瀑布式模型 是由W.W.Royce在1970年最初提出的软件开发模型,在瀑布模型中,开发被认为是按照需求分析,设计,实现,测试 (确认), 集成,和维护顺序的进行. 快速原型法 快速原型模型的第一步是建造一个快速原型,实现

设计理念-有关设计文档的分析

设计师无论"点子"多酷.多富创意,难免面对实际"交付物"--交互文档书写的问题.尤其在一些大公司,文档书写的漂不漂亮有时是"Make your work visible"的关键. 实际项目中,文档大体可以分为三类: - 用户需求文档 - 商业战略文档 - 设计文档 用户需求文档主要解决网站为"谁"提供服务,用户是谁?的问题.商业战略文档主要是对产品概念模型.网站主要内容和商业竞争分析.而设计文档的书写才是这里讨论的重点. 首先

设计文档的制作经验分享

最近准备做一个设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法.之后的设计文档分享中,会加入更多的设计文档案例来分析讨论. Here we go. 作为一个交互设计师,我们要全局掌握产品的背景,逻辑,用户体验.但是,我们不能忽略设计过程中一个很关键的步骤,设计输出. 如果我们用email或者其他大海报的方式来输出设计文档,有没有产品经理会抱怨说看不懂?有没有开发抱怨使用过程中效率低?在我之前的工作经验中,我一直保持用一种方式来输

如何制作实用美观的设计文档

  作为一个交互设计师,我们要全局掌握产品的背景.逻辑.用户体验.但是,我们不能忽略设计过程中一个很关键的步骤,设计输出. 如果我们用email或者其他大海报的方式来输出设计文档,有没有产品经理会抱怨说看不懂?有没有开发抱怨使用过程中效率低?在我之前的工作经验中,我一直保持用一种方式来输出设计文档,InDesign + PDF,在之前的产品同事与开发同事得到的反馈是好的,这里也希望分享并讨论这个方式是不是适合我们腾讯的产品开发节奏. 用InDesign输出PDF设计文档的好处有不少,我这里先列举

产品交互设计:如何制作实用美观的设计文档

中介交易 SEO诊断 淘宝客 云主机 技术大厅 前言:最近准备做一个设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法.之后的设计文档分享中,会加入更多的设计文档案例来分析讨论. Here we go. 作为一个交互设计师,我们要全局掌握产品的背景,逻辑,用户体验.但是,我们不能忽略设计过程中一个很关键的步骤,设计输出. 如果我们用email或者其他大海报的方式来输出设计文档,有没有产品经理会抱怨说看不懂?有没有开发抱怨使用过程中

手指友好型交互设计:为了更好的点击而设计

玩飞镖的时候,靶心是最难射中的位置,因为靶心是整个靶面上面积最小的部分.越是小的目标,就越是难以达到.这个准则在移动设备的触摸屏幕上同样适用. 众所周知,对于触屏设备用户来说,面积小的目标比面积大的目标更难操纵.所以,在设计移动设备界面的时候,触控目标一定要充分的大,足以让用户操作自如.但是多大才算充分呢?多大才是对于大多数用户最合适的尺寸呢?各大移动设备开发者已经认识到这个问题,最常见的做法是在各大厂商的用户界面设计文档中寻找答案. 那么,设计文档怎么说? Apple的IPhone Human

传达出设计的“灵魂”——关于设计文档的分析

设计师无论"点子"多酷.多富创意,难免面对实际"交付物"--交互文档书写的问题.尤其在一些大公司,文档书写的漂不漂亮有时是"Make-your-work-visible"的关键. 实际项目中,文档大体可以分为三类:- 用户需求文档-商业战略文档-设计文档用户需求文档主要解决网站为"谁"提供服务,用户是谁?的问题.商业战略文档主要是对http://www.aliyun.com/zixun/aggregation/8780.htm

互联网产品设计:产品设计文档(PDD)

传统上写产品需求文档(PRD)的做法,就是把用例.流程图和网页原型图一股脑的放到一个Word文档里.一般一个产品都包含乃几十个乃至上百用例,每个用例都有自己的流程图,每个流程图又包含了少则几个多则几十的网页原型图,结果就是产品需求文档变得庞大无比,写的人费事儿,读的人更惨. 自从我受到了这样文档的折磨,我就一直都在琢磨怎么才能把文档写得更简单一点,让阅读的人-通常是设计师和程序员-能够在最短的时间内领会产品的设计. 原来做UI设计师的时候,我创造了一种用流程图来表示产品交互的办法,这个方法受到了

实战从需求文档到设计文档的书写规范(一)

1.前言 本文有两个目的:实现每晚构建平台和探讨一个软件从需求文档到设计文档的书写规范. 每晚构建是软件研发管理中极具价值的手段,对于加快发现和改正缺陷,降低集成风险,提高产品质量,加强成员沟通与协作,缩短产品上市时间,增加项目开发透明度,提高项目组成员信心和斗志有着非常重要的作用和意义.本文从软件工程过程:需求定义,分析,设计出发描述了实战每晚构建平台的大部分过程. 软件工程中文档有着极其重要的地位,良好的文档风格和习惯是一个团队成熟的重要标志.目前有些软件研发人员特别是刚刚走上岗位的研发人员