小屏幕可视区域打造出成功的用户界面设计方案

文章描述:又是为了触屏移动设备而设计.

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

可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗。说正事儿吧。Designing for touch,关于这个话题及相关的文章,最近貌似已然铺到大街上了,不过我还是做我的吧。在标题里加了个不伦不类的“又是”二字,以示区分。内容方面应该会有些交集,但这是我自己的。

Josh Clark老师最近蛮活跃的。在本文中,他将向我们介绍一些触屏移动设备用户界面设计当中需要注意的问题,并对iPhone、iPad和Android相关设备在触控交互体验方面的友好性进行了对比和分析。欢迎,走着。

对于移动设备的操作系统及应用来说,判断其用户界面设计方案是否优秀的一个重要衡量标准,就是看它对于手指触控操作的友好程度。相比于桌面计算设备及相关的软件环境,触屏移动设备所具有的交互特性几乎将用户体验设计师们带入了工业设计的领域;设计方案更多是在体现着人机工学方面的原理,而不再是仅仅用来规划内容与功能的视觉呈现方式。

拇指热区与底部原则

首先,我们需要了解人们通常会以怎样的方式将手指停靠在设备上。拿手机来说,普通青年们多数会使用拇指来进行触控操作,所以触屏手机的界面交互方案基本是围绕着拇指来进行打造的。

拇指是很不可思议的,据说它是将我们与动物区分开来的重要标志之一。..拇指的功能具有相当的弹性,同时也受到一定的局限。对于常规的触屏手机来说,我们可以使用拇指扫过屏幕当中的大部分区域,但其中大约只有三分之一属于真正有效的触控区域。所以在设计当中,要尽量将最重要的界面交互元素放置在这个范围当中。在右手持机的状况下,有效触控区域位于屏幕的左下方:

这也正是移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部的原因。与此相反的是,在传统的桌面设备系统环境中,导航菜单一类的界面元素通常被放在界面顶部,无论是本地软件还是网页基本都是如此。对于我们有限的拇指作用范围来说,这种传统布局方式显然不能在移动设备的用户界面当中很好的适用。

相比之下,左下角还是右下角的问题略显次要。我们在实际当中经常会更改左右手持机方式,想想看是不是这样,譬如对于右撇子来说,当他们正在写字或是需要同时使用鼠标操作桌面设备时,通常会将手机交于左手操作;而左撇子们则正相反。不过在多数时间内,使用右手持机的用户还是要相对较多一些。

底部原则可以帮助我们对界面当中的可触控元素进行更好的组织。最常用的功能按键应该被放在拇指最容易触摸到的热点区域当中,而其它相对次要或是比较敏感的控制元素则应该尽量避开这个区域。以iOS中的“编辑”按钮来说,它通常被置于界面右上方,这个位置即可以保证它清晰可见,同时又不会被很容易的触碰到,以免发生误操作。

另外,底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏幕上进行操作的时候,手指下方的内容部分将会被遮挡住;只有将交互控制元素放在内容区域的下方,才能让这种负面效应降至最低。其实这是一条具有广泛适用性的设计原则,我们可以在很多其他类型的设备中看到这种原理的体现,例如iPod、计算器、带有实体键盘的普通手机、电子秤等,无不是内容在上,控制在下。

我,机器人(Android)

在Android设备中,底部原则这档子事被机身下方的实体硬按键搞的复杂了些许,尤其是冰淇淋三明治之前的平台。这些硬件级的控制按键占据着底部区域,在某种程度上会与应用内的底部交互元素形成视觉上的竞争。彼此层叠在一起的软硬件工具栏会使用户在快速操作的过程中产生迷惑,增大误操作的几率;对于在两个维度上共存于拇指热区当中的软硬件按钮,它们之间的冲突几乎是不可避免的。

固化的硬按键是无法被移除的,避免控制元素之间产生冲突的最直接的办法就是让虚拟与实体的工具栏在视觉上彼此分离,而这就意味着需要将Android应用中的相关控制元素和导航结构放置在用户界面的顶部。这自然不是最理想的解决办法,因为界面顶部离拇指热区远着呢,你要触摸其中的某个按键时,几乎会将半个手掌都覆盖在屏幕上。不过比起与硬件工具栏层叠在一起的方式来说,这种解决方案仍是利大于弊的。

这种将重要的控制及导航元素放在顶部的做法与iOS设备的方式正相反。虽然iPhone的Home按键同样在机身底部,但它的表现形式与Android设备的硬按键有很大区别,它不会对应用界面底部的相关操作元素带来视觉上的干扰。下面的截图展示了Foursqure应用在这两个平台中的界面设计方案对比:

[1] [2] [3]  下一页

时间: 2024-09-11 03:19:18

小屏幕可视区域打造出成功的用户界面设计方案的相关文章

周鸿祎:究竟怎样才能打造出一种成功的互联网产品

文/周鸿祎(奇虎董事长) 在互联网领域创业的人越来越多,但究竟怎样才能打造出一种成功的互联网产品,一直存在着理解的误区,也困扰着很多创业者. 从我个人多年的实践中,我认为互联网产品有几个容易被忽视的特点:第一,互联网产品要有一个灵魂,要符合相关领域的游戏规则,能打动用户的心.如果这一点没做好,产品外观做得再华丽,界面再漂亮.后台再强大,也很难成功.打动用户的心,这好像是废话,但也最质朴,很多产品其实不是在真正满足用户需求,而是在发明或幻想用户需求,甚至逆着用户需求在做.像国内很多SNS网站都模仿

手机小屏幕界面设计原则

1997年,那是一个春天,有一位老人在南海边画了一个圈,这个圈就画在咱大深圳!画圈的人是小平同志. 2014年,还是这个春天,移动设备的普及成为当下http://www.aliyun.com/zixun/aggregation/6298.html">互联网发展的又一次变革,我们在各种小屏幕上画着一个又一个的圈,如今,用户的移动体验无意正在变得更好,因为越来越多的网站已经开始为移动设备做了设计,设计师们也明白什么更适合小屏幕.然而,在手机上执行任务操作仍然存在着许多障碍. 亲爱的设基师朋友们

小屏幕改变了哪些邮件设计规则?

小屏幕改变了哪些邮件设计规则? 时间:2014-11-13 14:01 来源:快鲤鱼 作者:快鲤鱼 电子邮件营销的未来在于适应周围环境的能力.全球超过一半的电子邮件在移动设备上被打开,而根据全球领先的多渠道智能化营销服务商webpower的邮件客户数据分析,中国地区电子邮件移动设备打开率也增速迅猛,达到30%以上,而这一比例 预计在未来几年将继续增长.同时,不容 忽视的是,至少50%的移动用户将关闭或者删除没有优化阅读的电子邮件. 对于邮件发送者来说,解决移动小屏幕的邮件用户体验的一个最方便的解

ztree获取选中节点时不能进入可视区域出现BUG如何解决_jquery

zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 ● 采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 ● 兼容 IE.FireFox.Chrome.Opera.Safari 等浏览器 ● 支持 JSON 数据 ● 支持静态和 Ajax 异步加载节点数据 ● 支持任意更换皮肤 /

jquery可视区域加载的例子

javascript懒加载之可视区域加载 在制作js可视区域加载之前,我们首先必须了解各种高度,我之前的一篇文章javascript的height总结 jquery的各种高度 首先来说一说$(document)和$(window),如下: $(document).height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) 用一句话理解就是:当网页滚动条拉到最

通过js判断访客显示器屏幕分辨率并给出提示

这段代码大意是通过比较图片分辨率和桌面分辨率来判定改图是否适合直接用作访客的桌面壁纸   通过js判断访客显示器屏幕分辨率并给出提示 先给出代码示例: <script> <!-- fw="1920";fh="1200"; var uw=window.screen.width; var uh=window.screen.height; if(fw==uw) { if(fh==uh){document.write("<span clas

【IOS-COCOS2D游戏开发之十七】灵活使用精灵可视区域(TEXTURERECT)与锚点(ANCHORPOINT),并结合可视区域与锚点制作进度条!

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/501.html 今天Himi单用一篇博文来给童鞋们介绍精灵相关的两个常用的细节知识点: 首先来介绍第一个知识点:精灵可视区域: 不管在哪个移动平台上进行开发游戏都会接触使用到可视区域,比如Kjava(J2me)平台的setClip方法,Android的clipRect方法等等,那么在iOS上也一样存在,这里我们

天云科技打造出中国首个公有桌面云系统

来自天云科技的喜讯:天云科技上海浦东软件园<公有桌面云系统项目>于11月17日通过最终验收,中国首个公有桌面云诞生并已对外运营! 11月17日下午三点,上海浦东软件园<公有桌面云系统项目>最终验收会议在上海浦东软件园http://www.aliyun.com/zixun/aggregation/7494.html">股份有限公司9楼第三会议室召开,北京天云融创科技有限公司高级副总裁王琦以及项目组成员胡振宁.方志杨.董俊凯.王晓伟和上海浦东软件园股份有限公司验收项目小

visual studio 2008-看了个vc6写的小程序用vc2008写就出错了,请帮我看看出错在哪里?

问题描述 看了个vc6写的小程序用vc2008写就出错了,请帮我看看出错在哪里? 我在vc2008里写了个简单的DLL,并希望调用它,结果出错了,不知道出错在哪里,希望知道的朋友指点,谢谢! dll代码: int myadd(int a, int b)//自定义的函数,返回俩数之和 { // AFX_MANAGE_STATE(AfxGetStaticModuleState()); return a+b; } ; myadd.def : 声明 DLL 的模块参数. LIBRARY "myadd&q