移动设计:体验、交互和创新之精髓

移动优先的设计策略将使产品拥有高度任务驱动的体验。用户可以将注意力聚焦在需要完成关键任务上,而不会被传统桌面产品中过多的无关因素所干扰。

移动设计:体验、交互和创新之精髓

早在2011年设计大牛Luke W就提出了“Mobile First”的设计理念,也就是现在几乎每个人都挂在嘴边的“移动优先”。

移动优先的设计策略将使产品拥有高度任务驱动的体验。用户可以将注意力聚焦在需要完成关键任务上,而不会被传统桌面产品中过多的无关因素所干扰。

而行业里似乎也有个趋势,设计师对移动端的设计工作趋之若鹜,认为只有做好移动端的设计才能有好的发展。虽然我不完全认同这个观点,但这也从侧面说明了移动平台在设计领域中的重要地位。中国的互联网市场几乎已经成为移动独占的市场,如何做好移动平台的设计已经成为大家最为关心的话题。

结合多年的移动端设计经验,一些阅读以及翻译获得的干货,我总结了以下几点设计要点,希望能对大家有帮助,其实这个Topic在业内也做过分享,就权当是官方版的笔记节选吧:

屏幕尺寸

屏幕尺寸的大小是移动端相较桌面端最为显著的不同,也直接影响了设计中内容的展现。相同的内容在桌面端可以完全展示出来,但在移动端也许就需要滚屏多次。在设计时如果只是简单地进行图片的缩放和界面的重排,是完全不可取的。而如何进行内容的重组、删减,并且合理利用屏幕的每一寸空间就成为了移动端设计的最基础技法。

手机界面无外乎可以归类为两种——列表页与内容页。

列表页

我们先来看一看列表页的设计中如何利用手机屏幕里有限的空间,参看一些主流的设计可以发现,列表有以下几种排列方式:

横向列表与纵向列表相当常见,也是最为基本的列表排布方式。

移动设计:体验、交互和创新之精髓

横向列表与纵向列表

横排纵向列表在照片的设计,电商商品的设计中也很常用,横纵双向列表以APP Store为代表。这样的设计思路也可以满足任何相似信息在同一页面中的排列的需求,例如,横向列表的交互方式也常用在顶部Tab上。

移动设计:体验、交互和创新之精髓

横排纵向列表及横纵双向列表

手机屏幕是一个平面空间,而这样的二维空间始终是有限的。有一些APP也另辟蹊径,打起了第三维度的主意。Safari以及某韩国浏览器的网页Tab设计,在有限的平面中让用户产生了空间感,虽然并没有产生了额外的空间,但是这样的设计让信息在垂直面上的展示可以更有层次,突出了需要展现的内容,如途中案例用户除了网页的标题外也不会再期待其余的预览了。

移动设计:体验、交互和创新之精髓

三维空间的巧妙利用

内容页

列表页是导航方式的思考,而对于内容页,则是信息架构的考验。内容页相对来说在设计上可以考虑的点就要多得多了。最基本原则就是做减法,也可以套用《简约至上——交互设计四策略》中的删除、组织、隐藏、转移等四个简化法则。举改版前的格瓦拉为例(今年年中的时候格瓦拉做了一次较大的改版,还没有细细研究,既然是讲设计法则,什么样的界面都一样)

移动设计:体验、交互和创新之精髓

格瓦拉客户端的移动版及桌面版(旧版)

在这个案例中,我进行比较分析的是电影详情页面。上图中左侧为iPhone版设计,右侧为Web版的部分截图。Web中展示的信息很多,影片名、基础信息、预告片剧照、介绍、评分、相关活动影评资讯等等。我们来看看在移动端上格瓦拉时如何处理的:

  • 在影片评分的细节上,移动端采用了“删除”的策略,删掉了不太重要的比例信息,只显示了相对重要的总分。同样,基于移动端的使用场景,用户进行快速购票的需求大大高于查看比较信息,所以也删除了影评和资讯的部分,以及Web端用来导流的相关活动模块;
  • 在影片基础信息的部分,采用了“组织”策略,Web的展现为一个项目一列,在移动端则进行了同类项合并的整合。而导演和主演的信息根据相关性和重要程度,与剧情简介放在了一起。这个信息层级的处理移动端优于Web,不过这个问题在新版的Web中得到了解决,导演和主演得到了更多篇幅。
  • 在剧情简介的部分,则使用了“隐藏”策略,用户需要点击一个小箭头才能够展开阅读,同样剧照也是如此处理,用户可以直接看到预告片。
  • 除了信息展示外,移动端在设计上更加基于场景,本案例中界面内的一切内容都是为了Call for Action“选座购票”服务的。这个设计在新版的Web中也得到了体现,毕竟这才是business嘛。

移动设计:体验、交互和创新之精髓

信息展现的简化原则

在屏幕空间的利用上,除了三维的物理空间,还有第四维——时间可以利用。通过用户对界面的操作,根据相应的状态显示或隐藏相应的内容,从而达到节约空间的目的。还是举格瓦拉移动端为例,当用户向下滚屏时,跟随着界面动画,海报和购票按钮逐渐缩小上移,与评分形成一个固定的信息块呈现在界面的顶部,这个设计很精巧。(新版的APP似乎少了许多亮点)

移动设计:体验、交互和创新之精髓

界面滚动时的动画效果

触屏操作

触屏操作是智能机与用户交互的全部,也是核心中的核心(就算是语音交互也大体需要和触屏交互相结合)。除了基本的点、划操作,许多手势(Gesture)也给移动端用户体验增色不少。让我们来先看看手势设计有什么需要注意的。

手势设计

作为一名合格的设计师,常用的手势操作设计必定烂熟于心,当然这对于用户来说也是简单得如同生理反应。传统的应用基于桌面端的体验,操作为主手势为辅,提供了很多按钮、链接;我个人认为如果对界面影响不大的话这样的设计比较保险,但一定会相对枯燥。现在,有越来越多纯手势应用兴起,他们的统一特点就是特别酷炫,因为界面上几乎没有什么按钮,可能整个应用只有“设置”是靠“点”出来的。

因为常用手势操作不多,且用法皆已约定俗成。比如上下划是浏览,双击或者pinch/spread用于缩放。纯手势驱动的应用在设计中需要注意如何降低用户的学习成本,提高手势的有效引导。例如下图的Solar在用户初次使用的时候就以Coach Mark进行了引导。大家细细研究就会发现,Solar的手势设计逻辑非常严谨,很符合常用操作的延伸,这样用户的学习成本很低。例如,“捏合或双击查看全部地点”,在常规手势中捏合代表缩小视图,等同于视角拉远从而可以看到更多的内容;在Solar的设计中你完全可以想象为所有地点元素形成一张大的图片;你当前在查看的一个地点即为这个图片中的一个元素,所以捏合时你自然会看到整张图,这两者在逻辑上可以无缝匹配,用户学习与记住的成本大大降低。

移动设计:体验、交互和创新之精髓

Solar的手势操作指引

此外,用户有可能在手机上装了许多纯手势交互的应用,你无法保证第三方的定义都相似,而对于用户来说,非自然的手势交互越多,用户需要记住得就越多,那么容易忘掉得也就越多,除非频繁使用。所以手势的指引最好方便用户可以随时调出。

移动设计:体验、交互和创新之精髓

Beat Music中可调出的手势指引

说到手势,就不得不提一下手势流,这种新兴的设计能够一定程度优化移动交互流程,减少那些复杂的点击操作。

用户持机操作的研究数据

研究数据对于设计的重要性不言而喻,但往往许多设计师只知其然而不知其所以然。手机不同于电脑,你要操作就一定要持机,大部分设计师都会把注意力只放在界面上,完全忽略了这一点。希望这个章节能让大家了解移动端设计背后的故事以及数据对于设计的指引作用。

这些数据皆来自于一名叫Steven Hoober的研究大神,他分别做了两项研究:第一项是在任何用户可能使用手机的地方,观察了1333名用户,最后得出用户使用手机的持机方式的数据。研究二是基于31名用户的深访,录屏剪辑得出的用户操作手机的热图。

数据一,关于用户持机,不出大家所料,单手持机的比例是最多的,其次是环握,最后是双手,用户会经常在这些持握方式中切换。比如我在查看聊天内容的时候是单手,然后快速上下划动寻找相关内容的时候会用上另一只手帮忙形成环握持机,最后回复对方使用了双手持机。同时手机屏幕中的绿黄红三色分别代表了手指触碰的难度,这些数据对于设计侧重上都有相当好的指引。

移动设计:体验、交互和创新之精髓

研究结果:各种持机情况的分布

另外这个图有一个非常值得关注的数据,单手持机中左手持机的比例高达33%;相比世界上仅有10%的左撇子多了3倍。原因也很简单:用户在使用手机的时候往往同时还在做别的事情,那么惯用手正被别的事情占用。例如在公交上,我就习惯用右手拉着扶手,左手拿着手机使用。这个数据让你无法忽视左手持机的情况,因为比例一点也不低。

数据二,关于用户操作手机的热点区域,如下图所示,研究发现用户的点击都集中在中间到偏下2/3的区域。而且还有一个有趣的细节,这些热点稍稍偏左一些,这似乎与人们从左到右的阅读习惯有关系,而且人们都是倾向于将视线集中在这个区域,那么点击自然就落在这个区域了。

移动设计:体验、交互和创新之精髓

研究结果:用户点击区域热点

而对于手势操作,有以下三种不同的情况:第一个是窗口类的短列表,右边两个都是全屏的长列表,中间是文字信息较少,右边是文字信息较多。不难发现第二张图和第三张图的差别,滑动热区往右侧移动了,说明用户不太在有内容的地方进行滑动。有可能是因为用户在阅读,也有可能用户害怕有误点击的操作。

移动设计:体验、交互和创新之精髓

研究结果:用户滚动手势的轨迹热点

还有一个有趣的现象,在阿拉伯语系的国家中,由于从右至左的文字习惯,这些热区恰恰相反了,这也从另一个侧面验证了前面推断的正确性。建议设计师们完成设计后,不妨做成纸膜,然后模拟的操作一下,看看是否符合持机于操作的习惯。

大屏设计

随着智能机屏幕越做越大,屏幕左上角的区域越来越难以被点击到,这要求设计师在界面设计中对核心交互元素的位置要给予充分的考虑。对于大屏趋势,我个人的解读是整个设计趋势大体有以下三种影响,仅供参考:

  1. 汉堡菜单的没落,当然和他固有的一些缺点也有关系。
  2. 底部返回菜单的出现,越来越多应用在尝试这样的自定义导航了,但是和系统自带的底部Tab以及顶部导航有一定的冲突,目前并没有见到什么应用在这方面处理得十分优秀。
  3. 以苹果为代表的无障碍触摸设计,在iOS 8以上的系统中,双击Home键会将界面下拉一半,便与操作顶部的按钮,其实这个是锤子先做出来的。

移动设计:体验、交互和创新之精髓

苹果的无障碍触摸设计

使用场景&设计规范

所有的设计都离不开场景,也就是大家常常说的Scenario。而这里需要特意提一下,因为移动端的使用场景于传统桌面端有着极大的不同。大家在考虑设计和需求时应该跳出传统桌面端的思考。大体来讲,在移动端的设计你需要更多考虑碎片化的使用场景、嘈杂的环境、不稳定的网络和各种可能发生的意外。

移动设计:体验、交互和创新之精髓

桌面端和移动端在使用场景上有着许多不同

对于设计规范,如何把一个iOS的应用设计得像iOS,Android设计得像Android?这是设计的基本功,好歹也能做个拷贝不走样吧?各种原文译文的规范网上比比皆是,篇幅过长就不细说了,建议大家熟读100遍!之前关于微信安卓版一度使用安卓规范最后又改成和iOS设计一模一样的讨论,知乎上有帖子,也可以去看看。我的解读就是:一切以业务为出发,在遵循规范的基础上做适合自己的调整。

移动创新

移动端较之桌面端,有许多有趣的交互方式和创新点。比如最早的定位,现在被广泛应用于导航、O2O餐饮拼车、社交等。再后来给微信带来爆发式增长的摇一摇。还有支付宝在使用的高频声波,就是咻咻咻当面付,这个音效只是给用户的一个反馈而已,实际上高频声波人耳是听不到的。

其实上述这些都不是什么高精尖的技术,关键是产品设计中合理地利用了这些交互方式给用户带来了全新体验。接下来这个案例,看似高大上实则毫无技术含量,这种创新很讨巧,无需大量开发成本,但与用户的交互感很强。实际上就是最基本的麦克风技术,配合触屏,达到吹奏乐器的体验感。

移动设计:体验、交互和创新之精髓

有趣的吹奏交互

此外,还有许多例如iBeacon室内为定位技术,NFC近距离无线通讯技术等。设计师也需要多下些功夫去了解这些移动技术,再结合场景开开脑洞,方能创新出有趣的体验。

#专栏作家#

Terryfan,人人都是产品经理专栏作家。目前在点融网担任用户体验总监,喜欢设计、推理、逻辑分析搞脑子。目前持续缓慢更新微信公众号开卷有译(terryfan_ux),进行翻译分享。

本文系作者授权发布,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32218/

(0)
CatherineCatherine
上一篇 2017-06-04 10:17
下一篇 2017-06-04 12:13

相关推荐

  • 5个优质的设计师导航网站汇总

    作为一名设计师想要设计出比较优秀的设计作品(包括网页设计和移动APP设计),除了拥有熟练的设计技能外,还需要拥有出众的创造力和审美。当然,如果你也有非常强的临摹能力也是不错的。 如果你对生活和万事万物没…

    2015-12-23
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 译文 | 交互设计中对于“可控性”的理解

     “今天,你可以自由的调节你的屏幕的亮度,关掉应用的通知,自主决定是否连接手机的无线网络等等,虽然这些只能将你的手机电量多延长了几分钟,但却让你满足于一种成就感:你可以完全掌控你的手机,你可以调整所有的设置!(其实你无法控制你手机的电池寿命!) ”

    2017-05-31
  • 什么样的体验是好的用户体验?

    互联网的时代,说是一个体验为王的时代,一点也不为过。在互联网时代,产品是否能够做成功,用户体验成为一个关键点,用户购买你的产品,并非是与你结束了交易,而是一个新的开始。当用户拿起你的产品,使用你的产品的时候,用户体验之旅才真正开始,而用户的体验之旅是否愉快,将直接影响到你的口碑,影响到你的销售。

    2017-05-23
  • 3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19
  • 用户体验设计师是做什么的

    用户体验设计师的责任UX设计师如何每天工作?这个问题的答案,正如许多问题一样,是:这要看情况而定。用户体验设计师的职责从公司到公司,甚至同一公司不同项目各不相同。尽管角色各不相同,但有一些职能是期望用户体验设计师去做的,这与他们所工作的公司无关。下面为总结的用户体验设计师的6个主要职责:1.产品研究产品研究(包括用户和市场研究)是每个用户体验设计师的用户体验设计项目的出发点。它为伟大的设计提供了基础,因为它允许设计师避免假设和做出信息驱...

    2018-03-03
  • 决战双11,哪些技巧可以让你的专题页设计脱颖而出?

    这是小编见过讲双十一专题设计的最完整最有帮助的文章,我只是看了十遍而已。“以前有个同事她说要减肥要健身
    我说好啊看你能坚持多久
    因为我也好几次喊过这种话
    最后却都不了了之了
    可是几个月后再看到他
    细腰美臀大长腿
    显得更加自信了
    是啊她总可以做到付诸行动
    而我只会给自己找借口
    也许再这样下去
    我都配不上和她做朋友了吧”全场5折起/全场买三免一/1元秒杀0元抢购/周年钜惠等等

    争做行业领跑者/先赚它1个亿/上天猫就购了/好物低价上京东等等热烈庆祝XXX成立几周年/欢迎XXX领导莅临我司/恭喜XXX荣获XXX称号乘年轻,住好点/Just Do It/我的青春我做主/你值得拥有bigger than bigger/again and again/more and more(完全不知所云但是看起来很厉害的样子的文案,超级大牌都爱用。。)老板跑路了/美工甩手不干了等(歪瓜出品,我后面会再提到,因为它简直是电商设计界的一股泥石流。。)改变食界,条条是道-卫龙买了就是朋友-故宫淘宝“那么,我去当香葱烤鸡肉串去了”“啊!要是把早上下的蛋也带来就好了”“我可不能在这种地方被吃掉”“您好,您的食材到了”保湿护肤一步到位/棉柔舒适超强吸附力/轻松舒适不变形等等,常用于详情页里

    2017-05-16
  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30