触摸交互设计快速入门:手机篇 - 优设网 - UISDC

触摸交互设计快速入门:手机篇

2014/01/13 8727评论区

当拇指和食指的操作习惯还停留在桌面时代时,应该如何进行交互设计?交互设计师Josh Clark为你讲解在移动端触摸屏的交互设计中,设计师应该如何思考问题,应该怎样打造“手指交互友好型”界面。

2

伟大的移动端界面设计,要做的不仅仅是将视觉元素装进小小的屏幕中,还要考虑到交互问题。在触摸屏不断完善、市场占有率不断提高的背景下,越来越多的用户主用手指进行交互操作,关于手指的一些人机工程学,也应该作为设计的考量。新的交互形式,需要设计师不再局限于视觉和信息层级方向的设计,要把眼光放得长远,多多借鉴工业设计中人机交互的一些观点。触摸屏不仅仅是视觉交互,还包含了很多人机工程学的因素:用户在用手指操作时,感觉如何?

相关推荐:
《经验分享:APP设计中便捷的单手操作》
《优秀手机应用设计需要遵循的8大原则》
《网页与APP中那些优美的登陆表单》

拇指法则

针对触摸屏的设计需要深思熟虑,其中的一个问题便是:手指,通常在屏幕上的哪个部位进行操作?

例如,单手持握手机,除非你的手指天生长得特别特别长,一般你都会用拇指进行点击操作。因此,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。

4

因为拇指,人类才具有具有精确的抓握能力,从而在进化中脱颖而出,成为智慧的物种,但在手机操作中,拇指的可控范围有限,缺乏灵活度。当然,如果你竭尽全力,拇指还是能够在整个屏幕上进行滑动操作的。但是在大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。

将主要操作目标放在拇指的热区。例如,当用右手持握手机的时候,拇指的热区如下图所示,在左下角呈现一个弧形。

 

这就是为什么,工具栏和导航条一般都在手机界面的下边缘——这跟我们在桌面界面中的惯例截然相反。这正是由于拇指可控范围有限导致的,在触摸屏上的界面设计与传统惯例相反,导航条和主要操作目标被放到了底部。

针对屏幕底部,拇指的热区进行设计,解决了很多用户的问题。这比“左撇子”用户的问题更加重要。因为这个社会上,右撇子还是占据大多数的。而几乎每个用户在使用手机时,都有过“单手持握,拇指操作”的经历。(公交车上,一只手扶好栏杆,另一只手操作手机)

而屏幕底部的拇指法则,无论那只手进行操作,都适用。与此同时,它也给予设计师一些暗示:要怎样组织操作目标的视觉层级,以给予用户最便捷舒适的体验。例如,按iOS的设计惯例,一般把编辑按钮放在右上角,即明显,又能避免因为误碰而导致界面突然改变。

6

 

将控件打压置屏幕底部不仅仅关乎到拇指操作的舒适性,还关系到一个问题:如果放在上面,用手指操作时,会挡住阅读的视线。如果控件在底部,不管手怎么移动,至少不会挡住主要内容,从而给予清晰的视角。呈递内容的屏幕在上方,控制按键在下方。是不是感觉有一种很熟悉的感觉?没错,工业设计上很多经典产品也是这么布局的:iPod、计算器、老式手机,还有很多数不胜数的产品。

我,机器人

 

这条关于顶部/底部的设计规律很简单,也很实用。但不是所有按照其设计的产品都从其中收益:Android系统习惯将大量的控制元素塞到屏幕的下方。这些接近屏幕边缘的按钮大量拥挤在一起,再加上物理按键,手指非常不便于操作。Android为了将控件放到屏幕底部,不惜把搜索栏放到上方(下图)。这就是Android的主屏幕布局,非常失误。(这里想要说明的就是:其实设计规律依然有效,错误在于不合理的遵循设计规律,堆砌导致了空间布局问题)

 

8

 

(为了解决空间有限的问题)一定要避免在触摸交互界面中堆砌控件,尤其是底部区域。 不幸的是,这意味着安卓App不得不将控件放到屏幕的上方来避免拥挤问题。但也不理想:1.处于拇指热区之外。2.操作容易挡住视线。但总比原来的那种布局好,原来那种布局,对于手指肥胖的人来说,真是一场噩梦。

对于安卓来说,App导航栏和控件应该放在顶部。这和iPhone的惯例相反,因为iPhone只有一个Home按键,不会像Android,本身就有3个左右的物理按键,再加上屏幕底部界面中的控件,会很难以操作。iPhone上的Foursquare(右图),而Android上的Foursquare(左图)之所以这么设计,可不是偶然。

10

 

从某种角度上讲,这种反堆砌元素(为防止操作失误,提倡避免底部堆砌元素)似乎是“内容在上,控制在下”元素的对立。Android虽然有效的避免了元素的堆砌,减少了失误操作,但这种设计模式导致了前面提到过的问题:操作过程中,手会遮挡视线。

Web应用:在应用中进行应用

相似的,在移动端互联网中,反堆砌原则给互联网浏览带来了不便。网页以及网页应用,一般需要依托浏览器才能实现浏览。浏览器有自己的按钮和控件,而网页/网页应用 的界面中也有按钮和控件。如果你滑动屏幕,将网页中的导航栏滑动至屏幕底部,那么你会发现,附近还有浏览器的工具栏,这种界面元素冲突导致操作极其容易出现出错(见下图)。那就意味着,要尽量避免“网页的导航栏滑动到屏幕底部”现象的发生,这就需要我们将网站的工具栏放在顶部(部分指导准则中轻描淡写的写着:使用CSS代码position:fixed,就能实现固定,但殊不知,很多手机浏览器不支持此功能。)

12

Android的问题可不一样。Android的手机浏览器,也就是Chrome,将导航栏放到顶部依然不能解决它的问题,问题在于整体页面。因为Chorme的控件吃掉了大量的空间,用户在浏览过程中的体验非常不顺畅,有一种挤牙膏的感觉,再加上顶部导航栏,真让人窒息(见下图早期Chrome)。

14
因此,在《移动至上》中,Luke Wroblewski写到“当导航选项不再占据内容的空间,便是人机对话的开始”时间就是金钱,下载耗费流量,所以信息传递一定要快速直观(避免因为控件太多,占据大量空间,从而导致用户阅读速度下降)

不管这些问题,趋势依然是:网页浏览体验要以内容为主,并且将主要的导航栏限制在屏幕的底部。Wroblewski通过一种有效的设计模式解决了这一系列的问题,你可以在Ad Age移动版网站上看到,所有的导航元素被塞进一个菜单按钮,而菜单按钮在屏幕右上方。只需要敲击这个按钮,就会全屏弹出导航选项。仅仅需要锚链接就能跳转至页面底部进行浏览。

16

Wroblewski写到,这种方有几种优点:

“这种设计模式,用最少量的导航元素,占据最少量的空间,就能给予用户导航,让用户选择所需信息进行浏览,而且信息层级更少,仅仅需要简单的锚链接就能工作。无需购买昂贵的Javascrip,无需叠加层级,无需建立单独的导航页就能够实现——仅仅是锚链接,就能帮助用户跳至页面底部。这有点像HTML 0.”

“内容至上,控制处下”似乎只是一条简单的法则,但正如你所见,情况不同,我们也应该根据这条法则做出适当的调整。然后按需设计,让设计既能遵循这条法则,以保证用户的无障碍浏览(否则手依然会挡住视线),又能根据有限的空间进行布局,以保证页面不拥挤、不复杂。如果两全无法其美,也只能找个折中的办法了。

其实,移动端触摸屏的设计,本文提到的问题,通俗的讲,就是两个:

1.空间有限,元素过于拥挤会导致失误操作。
2.如果“控制”在上方,而“内容”在下方,用手操作的时候,会挡住视线,不方便阅读。

总结一下不同平台的设计模式:

1.iPhone中, 将 app 控件放到屏幕底部(内容至上)
2.Android中, app 控件放到屏幕顶部(空间有限)
3.对于网页app来说,全局导航放在整个页面的最底部(而不是屏幕的底部)

但是这些指导规则仅仅适用于手机;当在更大的触摸屏上,我们该如何进行交互设计?iPad上的游戏规则,再一次改变,我们下次再谈。

另:本文写于2012年,在一些技术细节上不免和今日有所差异,但一些原则性的论述是超越时间的。

谢谢观看!

 

作者:Josh Clark
翻译:@MartinRGB

本文由优设网原创翻译,转摘请注明优设网译文出处,谢谢各位小编。

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量61万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/touch-interaction-design-phone

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设大课堂 职场 优设专访 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里