本文章转自:触屏手机点击区域的小秘密
http://www.apkbus.com/android-23885-1-1.html
做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不是说你要把所有的按钮图标链接都设计的足够大,手机上的视觉焦点和操作焦点是不一样的,操作焦点是可被放大或移动的点击区域。
这里分享几个点击区域的小秘密,帮你解决操作准确率的问题。
一、扩大操作焦点
iPhone自带的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem,实际的点触区域都是被放大了的。
9420_navigationbar.png
虽然iPhone导航栏上的操作按钮仅有29px高,但是它的实际点触区域比整个导航栏的高度还要高出5px左右,大概能达到44px+5px,这样用户就不用小心翼翼的去点击返回按钮了,按钮点起来比看起来要大的多。
如果导航栏下边区域还有按钮,或者输入区域,点击下边的按钮经常会触发导航栏上的按钮,这点很多开发人员都可能遭遇过,我看到Cocochina上就有不少类似问题,比如wyx遇到的问题,比如dave遇到的问题。
类似的,新浪微博的撰写微博界面也是个列子,当用户想编辑第一行的文字的时候,点击文字经常会误触顶部操作栏的取消或发送。随享微博客户端也是,顶部导航栏下边有一排操作图标,还是比较容易引发误操作的。
8283_4.png
底部标签栏的可点击区域也比视觉焦点要多出5个像素左右,标签切换是比较常见的操作,这样一个小改动帮用户提升了标签切换的准确率。
d45b_5.png
但是正因为iPhone标准的TabBar的点击区域是有扩张的,所以如果你在TabBar上方放置可操作区域,都比较难以点击,Foursquare和USA today等应用最后都是采用自定义TabBar的方式规避问题的。
关于和设置往往被做成半透明图标,浮动在界面上,如果操作焦点=视觉焦点,那么用户就只能杯具的削尖指头去点了,还好这两个按钮的实际操作焦点要比视觉焦点大的多,保证了足够准确的点击。
f120_1.jpg
Android4.0规定的有效可触摸的UI元素标准是48dp,一般来说,48dp转化为一个物理尺寸,约为9毫米。建议的目标大小为7~10毫米,这一点与iPhone一致,这是一个用户手指能准确并且舒适触摸的区域。
如果所示,你的UI元素可能小于48dp,图标仅有32dp,按钮仅有40dp,但是他们的实际可操作焦点都达到了48dp的大小。
二、下移操作焦点
由于用户在进行各种操作的时候,需要确保自己准确的点击到了相应的元素,所以一般情况下,右手持机的用户,落点会偏右偏下,见下图:
655a_%E8%90%BD%E7%82%B9%E7%9B%91%E6%B5%8B.png
我们的UER把手机屏幕分成6*12个可点击的焦点,从用户的点击落点监测可以看到,右手持机的用户有很大一部分点击落点和视觉焦点是有很大偏差的,偏差具有一定的规律性。屏幕右下方格外明显。
如果你的应用是操作密集型,可以考虑调整有效点击区域,整体往右往下偏移几像素,准确率会有所提升。
##此部分内容希望有过类似研究的同学可以共同探讨##
三、留白以规避误点击
当然,仍然有很多情况,我们是无法用放大操作焦点或偏移操作焦点的方式来解决的,那就是当两个可操作元素确实离得比较近的时候。这时候,iPhone内置的应用会巧妙的采用留白排版方式以规避误点击。
2d92_liubai.png
比如iPhone系统的输入框,如果框右边有发送按钮的话,我们可以发现右侧是有个明显的留白的,由于中英文字体差异,中文的留白略大于英文。这个留白,一方面是为了规避跟发送按钮焦点太近的误操作问题,一方面是为了给滚动条留足够的空间。
c7f2_liubai2.png
而带有全部删除按钮的输入框,文字离全部删除按钮也会有适当留白,规避切换光标时可能引发的误操作。
当遇到焦点密集的问题的时候,我们都是可以利用增加行间距、元素间距和留白的方式来解决可点击区域问题。
最后再啰嗦一句小图标元素大点击区域的实现方式,方法1:UI提供带透明点击区域的图标,就是一张透明的图,上面一个小图标;方法2:UI提供一个大点的透明的图,覆盖到图标上面,点到上面就执行操作;方法3:程序人员自己去实现,方法请问他们,嘿嘿。
本文章转自:触屏手机点击区域的小秘密
http://www.apkbus.com/android-23885-1-1.html
分享到:
相关推荐
15.触屏手机UI点击区域的小秘密GUI.pdf
本实验涉及的是利用STM32处理触摸屏输入,实现特定区域的点击响应,并模拟红灯效果。通过这个实验,我们可以深入理解触摸屏的工作原理、STM32的中断处理机制以及与触摸屏驱动的交互。 1. **STM32微控制器**:STM32...
Java软件游戏转换为触摸屏手机工具的实现是一个技术性较强的过程,涉及到的主要知识点包括Java ME(Mobile Edition)、Android操作系统、游戏适配技术和编程接口的调整。以下是对这些关键点的详细解释: 1. Java ME...
西门子KTP触摸屏点击无反应,触摸失效的处理对策 西门子KTP二代精简触摸屏点击无反应,触摸失效的处理对策是指在西门子KTP二代精简触摸屏中出现的点击无反应、触摸失灵等问题的解决方法。 触摸屏失灵的原因 ...
本篇文章将深入探讨Qt如何处理触摸屏产生的事件,以及如何将其转换为鼠标动作,如点击、按下和释放等。 1. Qt触摸屏实现鼠标原理 Qt使用插件系统加载鼠标驱动程序,该驱动程序由QWSMouseHandler类代表。当服务器...
Java软件游戏转换工具主要用于将传统的基于Java MIDP (Mobile Information Device Profile)开发的软件和游戏适配到现代触摸屏手机上。随着智能手机和平板电脑的普及,许多旧的Java游戏和应用面临着无法在新设备上...
综上所述,实现jQuery图片点击放大及手机触屏滑动展示的功能涉及到了jQuery的选择器、事件绑定、CSS变换、触摸事件处理以及性能优化等多个方面,这需要开发者具备扎实的JavaScript和jQuery基础,以及对移动设备特性...
这样,无论是手机、平板还是大尺寸触摸屏,程序都能自动调整以适应屏幕。 2. **触摸友好的交互**:优化触摸事件,比如增大按钮和链接的点击区域,减少手指触控的精度要求。同时,减少需要精细操作的元素,因为手指...
在本教程中,我们将探讨如何将鼠标的点击事件转换为触摸事件,以便在支持触摸输入的设备(如智能手机和平板电脑)上实现相同的功能。 在Unity3D中,处理鼠标输入通常使用OnMouse系列的回调函数,例如OnMouseDown、...
【标题】"手机触屏手机点赞"涉及到的是一种在移动设备上实现的互动功能,它通常出现在社交媒体、新闻网站或应用程序中,允许用户通过简单的触摸屏幕来表达对内容的赞赏或支持。这种点赞功能在现代互联网应用中非常...
在UE4(Unreal Engine 4)和UE5(Unreal Engine 5)这两个流行的实时3D创作工具中,触摸屏交互是为用户提供直观控制的重要功能。尤其在移动设备和现代多触点设备上,理解如何处理触摸屏上的移动、旋转和缩放事件对于...
标题中的"C# 2010 win8.1 win10 触控屏 触摸屏按钮button点击范例 by Hank"表明这是一个关于C#编程语言的教程,具体是针对Windows 8.1和Windows 10操作系统上的触控屏应用开发。作者Hank提供了关于如何处理触摸屏上...
在这个“winform触摸屏事件小例子”中,我们将探讨如何利用.NET Framework的WinForms库,特别是在触摸屏环境中,实现面板(Panel)控件的滚动条自动移动,模拟手指拖动的效果。 首先,我们需要理解WinForms中的触摸...
2. **触控优化**:手机触屏网站模板需要特别考虑触控操作,比如按钮和链接的大小要适中,便于手指点击,滑动和手势操作也要流畅。这包括对触摸事件的支持,如tap、swipe和pinch-zoom等,以提高用户交互体验。 3. **...
unity 手机 触屏 控制玩家 移动 方向
能够实现单指旋转双指缩放,控制相机远近,点击事件按钮,适合UE4学习触摸屏的同学,移动开发,或者触摸屏开发
本项目基于MFC(Microsoft Foundation Classes)库,构建了一个简单的触屏模拟工具,使用户可以通过鼠标来实现触摸屏的点击和滑动效果。 MFC是微软为Windows应用程序开发提供的C++类库,它封装了Windows API,提供...
本压缩包文件"安卓自定义控件相关-不规则点击区域三角形点击区域.zip"主要涉及了如何创建一个不规则形状,特别是三角形的点击区域。在Android原生系统中,控件的点击区域通常是矩形,但开发者往往需要根据设计需求...
在某些场景下,我们希望用户在点击EditText之外的任何地方或者点击屏幕空白区域时,能够自动隐藏软键盘,以提供更流畅的操作流程。标题和描述所提到的,就是这样一个功能的实现方法。 在Android中,软键盘的显示与...
本项目名为"jquery 触屏点击放大图组",其主要目标就是在手机端实现这一交互特性。 首先,我们要理解jQuery库在其中的作用。jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...