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

2016-02-16 23:21 6 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐触摸交互设计快速入门之手机篇,赶紧看过来吧!

【 tulaoshi.com - 平面设计 】

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

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

拇指法则

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

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

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

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

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

我,机器人

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网
因此,在《移动至上》中,Luke Wroblewski写到当导航选项不再占据内容的空间,便是人机对话的开始时间就是金钱,下载耗费流量,所以信息传递一定要快速直观(避免因为控件太多,占据大量空间,从而导致用户阅读速度下降)

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

触摸交互设计快速入门之手机篇,PS教程,图老师教程网

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

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

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

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

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

谢谢观看

来源:http://www.tulaoshi.com/n/20160216/1576359.html

延伸阅读
最近做了一次口碑网注册流程改造,简单说一下激活邮件的设计上的一些小心得: 1、尽量不要用图片,尤其是别把激活链接做成一个点击按钮。 2、尽量少的给链接,最好只有一个显眼的链接。其他链接一律变短,弱化。链接明文显示。 以上两点,都是基于激活邮件的第一要素:简洁,省去所有不必要的干扰元素。让用户打开邮件,快速点击激活链...
作用:跳转到上一个页面或下一个页面。 元素:分类的基本元素有:上页+页码+下页(如标注1);总页码(如标注2);跳转页(如标注3);确认按钮(如标注4); 场景:根据以上这些基本元素在不同的场景会有不同的组合 (场景1)19楼论坛: 论坛页面数量多的时候会达到上千页;分页的内容多数是顶贴或者是原创陆续更新帖子所以一般用户都会查看首页原创...
之前有些朋友说:白社会的交互还是有些不错的地方的。本人作为参与者之一,听了也很高兴,被人认可当然是件很幸福的事了~高兴之余,也不能忘了分享快乐,在这里有关于白社会的交互设计也想跟大家聊一聊。一提创新这个词,感觉话题有点大,有点重,我先说说我对创新的看法,就像上面引用含义的一样,创新其实是站在巨人肩膀上的,同时也是面对...
包豪斯运动(1918-1933)起源于德国,是纯粹而诚实的设计理念的复兴,其影响波及到建筑、艺术、字体、产品设计诸多领域。其特色是强调功能,去除装饰。包豪斯的美感和信念来自于工业和设计制造,是受现代工业文明影响的设计思潮。在谈到包豪斯的理念时,哥伦比亚大学的 Watter Gropius 认为,包豪斯的目的在展现群体合作的同时不丧失个性。 它的...
长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行,主要是交互设计师和视觉设计师对于交互设计的困惑,以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座;现在把它整理成文,希望与同行切磋,共同进步。 这篇文章是我几年来在美国从事交互设计工作的一个经验总结。...

经验教程

760

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部