触屏手机点击区域的小秘密

标签: 触屏 手机 区域 | 发表时间:2012-03-07 14:08 | 作者:
出处:http://news.cnblogs.com/

做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不是说你要把所有的按钮图标链接都设计的足够大,手机上的视觉焦点和操作焦点是不一样的,操作焦点是可被放大或移动的点击区域。

这里分享几个点击区域的小秘密,帮你解决操作准确率的问题。

一、扩大操作焦点

iPhone 自带的控件 NavigationBar 上的 Button、TabBar 上的 Item、ToolBar 上的 ButtonItem,实际的点触区域都是被放大了的。

navigationbar 触屏手机点击区域的小秘密

虽然 iPhone 导航栏上的操作按钮仅有 29px 高,但是它的实际点触区域比整个导航栏的高度还要高出 5px 左右,大概能达到 44px+5px,这样用户就不用小心翼翼的去点击返回按钮了,按钮点起来比看起来要大的多。

如果导航栏下边区域还有按钮,或者输入区域,点击下边的按钮经常会触发导航栏上的按钮,这点很多开发人员都可能遭遇过,我看到 Cocochina 上就有不少类似问题,比如 wyx 遇到的问题,比如 dave 遇到的问题

类似的,新浪微博的撰写微博界面也是个列子,当用户想编辑第一行的文字的时候,点击文字经常会误触顶部操作栏的取消或发送。随享微博客户端也是,顶部导航栏下边有一排操作图标,还是比较容易引发误操作的。

4 触屏手机点击区域的小秘密

底部标签栏的可点击区域也比视觉焦点要多出 5 个像素左右,标签切换是比较常见的操作,这样一个小改动帮用户提升了标签切换的准确率。

5 触屏手机点击区域的小秘密

但是正因为 iPhone 标准的 TabBar 的点击区域是有扩张的,所以如果你在 TabBar 上方放置可操作区域,都比较难以点击,Foursquare 和 USA today 等应用最后都是采用自定义 TabBar 的方式规避问题的。

关于和设置往往被做成半透明图标,浮动在界面上,如果操作焦点=视觉焦点,那么用户就只能杯具的削尖指头去点了,还好这两个按钮的实际操作焦点要比视觉焦点大的多,保证了足够准确的点击。

1 触屏手机点击区域的小秘密

Android4.0规定的有效可触摸的 UI 元素标准是 48dp,一般来说,48dp 转化为一个物理尺寸,约为 9 毫米。建议的目标大小为7~10毫米,这一点与 iPhone 一致,这是一个用户手指能准确并且舒适触摸的区域。

如果所示,你的 UI 元素可能小于 48dp,图标仅有 32dp,按钮仅有 40dp,但是他们的实际可操作焦点都达到了 48dp 的大小。

二、下移操作焦点

由于用户在进行各种操作的时候,需要确保自己准确的点击到了相应的元素,所以一般情况下,右手持机的用户,落点会偏右偏下,见下图:

落点监测触屏手机点击区域的小秘密

我们的 UER 把手机屏幕分成6*12个可点击的焦点,从用户的点击落点监测可以看到,右手持机的用户有很大一部分点击落点和视觉焦点是有很大偏差的,偏差具有一定的规律性。屏幕右下方格外明显。

如果你的应用是操作密集型,可以考虑调整有效点击区域,整体往右往下偏移几像素,准确率会有所提升。

##此部分内容希望有过类似研究的同学可以共同探讨##

三、留白以规避误点击

当然,仍然有很多情况,我们是无法用放大操作焦点或偏移操作焦点的方式来解决的,那就是当两个可操作元素确实离得比较近的时候。这时候,iPhone 内置的应用会巧妙的采用留白排版方式以规避误点击。

liubai 触屏手机点击区域的小秘密

比如 iPhone 系统的输入框,如果框右边有发送按钮的话,我们可以发现右侧是有个明显的留白的,由于中英文字体差异,中文的留白略大于英文。这个留白,一方面是为了规避跟发送按钮焦点太近的误操作问题,一方面是为了给滚动条留足够的空间。

liubai2 触屏手机点击区域的小秘密

而带有全部删除按钮的输入框,文字离全部删除按钮也会有适当留白,规避切换光标时可能引发的误操作。

当遇到焦点密集的问题的时候,我们都是可以利用增加行间距、元素间距和留白的方式来解决可点击区域问题。

最后再啰嗦一句小图标元素大点击区域的实现方式,方法1:UI 提供带透明点击区域的图标,就是一张透明的图,上面一个小图标;方法2:UI 提供一个大点的透明的图,覆盖到图标上面,点到上面就执行操作;方法3:程序人员自己去实现,方法请问他们,嘿嘿。

本文链接



相关 [触屏 手机 区域] 推荐:

触屏手机点击区域的小秘密

- - 博客园_新闻
做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不是说你要把所有的按钮图标链接都设计的足够大,手机上的视觉焦点和操作焦点是不一样的,操作焦点是可被放大或移动的点击区域. 这里分享几个点击区域的小秘密,帮你解决操作准确率的问题. iPhone 自带的控件 NavigationBar 上的 Button、TabBar 上的 Item、ToolBar 上的 ButtonItem,实际的点触区域都是被放大了的.

触屏手机网站设计

- Ray ma - 互联网的那点事...
随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website. 触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计:.

触屏手机网站-炫版交互设计

- Qing - 所有文章 - UCD大社区
触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别.

【新闻】搜狐微博推出全新手机HTML5触屏版

- - HTML5研究小组
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的重要趋势,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用. 这种语言正在影响并将继续影响着各种操作平台.

[来自iPc.me] 诺基亚发布给力新机皇N9手机,全触屏无按键MeeGo系统!欲借其重新崛起?

- shubeta - iPc.me
在刚刚的新加坡Nokia Connection大会上,诺基亚发布了诺基亚N9,首款纯触摸屏智能手机,让一切变得更简单. 诺基亚N9的设计围绕人们最重要的事情:应用程序、动态更新、多任务间的切换. UI的操作由一个简单的手势代替……. [ 请大家更新订阅地址 http://feed.ipc.me ].

触屏网页设计初探 (二)

- 没剑 - 信息和交互 - UCD大社区
触屏版网页应用,实现移动场景用户需求、体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标. 在设计过程中需不断打磨细节,提升体验,令设计日臻完美. 让消息更随手,操作门槛更低 . 费茨法则(Fitts’ Law,1954)是一则人机交互法则. 它阐述了:快速移动到目标的时间是离目标距离与目标大小的函数.

Java 内存区域与内存溢出

- - CSDN博客综合推荐文章
Java虚拟机在执行Java程序的过程中会把他所管理的内存划分为若干个不同的数据区域. Java虚拟机规范将JVM所管理的内存分为以下几个运行时数据区:程序计数器,Java虚拟机栈,本地方法栈,Java堆,方法区. 下面详细阐述各数据区所存储的数据类型. 程序计数器(Program Counter Register).

Swipebox – 用于触屏设备的精美 jQuery Lightbox 插件

- - 博客园_梦想天空
  Swipebox 是一款可触摸的 . jQuery 灯箱效果插件,可用于桌面,移动和平板电脑. 它移动设备支持滑动手势导航,桌面电脑上可以用键盘导航,不支持. CSS3 过渡特性的浏览器使用 jQuery 降级处理,支持视网膜显示,能够通过 CSS 轻松定制.   在下列浏览器测试通过:Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, Windows Phone.

又是为了触屏移动设备而设计

- - 盒子UI
印象当中,最近这些年的春天总是会带来让人觉得真心别扭的气候体验,雨和冷风就像催化剂一样,让生活和工作当中的人和事也变得异常凌乱,仿佛一团被咀嚼到完全失去味道的槟榔. November Rain前奏当中的钢琴旋律多少可以让心安然一些,一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界. 可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗.

Adobe 全线触屏应用搬上 Android Market

- lht - 谷安——谷奥Android专题站
Adobe 并不是只有 Flash 应用,他们还有其它一些应用,现在 Adobe 已经将全线触屏应用都搬到了 Android 上,下面 6 个应用都是流行的桌面应用的 Android Honeycomb 平版本版本:. Adobe Photoshop Touch:使用核心 Photoshop 功能自由改变图像,专为平板定制的强大应用.