用交互设计思维分析iOS10新特性

#交互设计# #iOS10#:本文用交互设计的思维对iOS10的新特性进行分析。撇开平时我们考虑的界面排布,页面元素等问题不谈,将视角转移到屏幕外的东西:如时间维度的,空间维度的,手势操作等等,以提升我们的用户体验。

本文作者是蘑菇街uni事业部设计团队,欢迎大家关注他们的追波地址:https://dribbble.com/mogu

站酷地址:http://www.zcool.com.cn/article/ZNDM2NTMy.html

背景

前段时间被一篇名为《从iOS10设计指南变化看设计的新趋势》的文章刷屏,文中从UI设计的角度分析了iOS10带给我们的设计新趋势:“大而简,简而精”。

文中指出,未来的设计将更注重产品的内容和操作体验,降低其他因素对用户使用上的干扰。设计师则需要在界面设计中去把握「大」和「简」的程度,以及思考如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标。(文章链接请戳:https://isux.tencent.com/ios-10-design-trends.html )。

iOS10相较于前几代的系统,他在交互方式上有了比较多的改变,在很多细节设计上,更是值得我们把玩和品位。正如苹果官方在他的更新说明里所描述的:“iOS 10是iOS发布史上的重磅之作”。

所有iOS10新特性罗列的文章网上已有很多,这里就不赘述了,本文则将从交互设计的角度出发,聊聊iOS10的变化带给我们设计上的启发和借鉴意义。

一、基于行为的设计

著名的交互设计专家Jon Kolko在他的《交互设计沉思录》中指出:“行为是发生在第四个维度(时间维度)上的,而交互设计的目标是试图随着时间的推移,逐渐理解并进而塑造人的行为”。

举个例子,iOS10最明显的细节之一:拿起手机就亮屏。

很多人之前会有这样的困扰:我只是想看个时间,一按Home键,duang!一不小心就进入系统界面了。现在有了这个设计,我们再也不用为了看时间或通知去按电源键或Home键了。

看图就懂(此功能目前只适用于iPhone SE,iPhone 6s或更新的机型)

1477465843-2674-101e000214422e7ec1c6

“拿起手机就亮屏”这个看似简单的功能,用过之后,就会让人自然而然地成为习惯。值得我们去思考:设计的目的是传达信息,除了界面上的交互行为,除了通过好看的UI来吸引用户的注意,更多地需要我们重新审视利用手机本身的特性以及用户特定场景下的行为需求,将产品渗透到人的生活中去,以最平易的方式做出更契合行为的交互。

二、交互体验更扁平

说到扁平,很多人直觉上觉得就是视觉上去掉了光影、特效、简化了元素,其实远不尽然。在移动互联已占据我们生活方方面面的今天,从用户操作的角度,将信息更加简单直接且高效地展示出来,提升交互的易用性和操作的便捷性,则更是设计“扁平化”的体现。

作为交互设计师,在产品的设计工作中,遇到最纠结的问题莫过于:需要在有限的屏幕空间内,将产品的信息内容尽可能多地展现出来,同时又要兼顾界面的优雅美观。

iOS1010在这次的优化中给我们提供了很好的设计思路。

1)横向空间的扩展

以Apple Music为例:

在新版本中,他用每个单元模块左右滑动浏览更多内容的操作,替代了每块只展示一个内容的设计形式。相比之前的版本,将并列的信息在当前界面浏览,无形中扩展了屏幕的空间,增加了单位面积的使用效率,减少了页面的跳转。

1477465843-4296-102200026cc1ce5e2fa3

这种交互形式其实并非Music中首创,早有几年前就出现的window phone,近有4月更新的Airbnb,以及国内以设计品质感而著称的美食类App-Enjoy中,都采用了这种交互形式。

1477465843-9405-101c0004e8c52ebea2e5

这种设计形式使页面的层级结构变少,用户不用一次次地在一级和二级页面之间切换,提高效率的同时也使结构变得清晰了。

相信这种趋势会越来越多地在各种内容类的App中被采用。

2)Z轴空间的扩展

在三维空间中,如果说纵向滑动利用的是Y轴空间,横向滑动利用的是X轴空间,那么iOS10中对Z轴空间的利用和拓展则给我们的操作着实带来了不小的快捷和方便。

1477465844-4412-102200026cc2622c1fda

我最喜欢iOS10的地方在于它改进的通知,可以通过3D touch快速地打开回复界面进行操作,完全不用进入app,可以就那样一直回复别人,直到离开为止。

对于我们App设计者来说,无论是针对推送信息,还是app内的内容,更好地利用好手机的这一特性,在提升操作体验的同时,还可以更好地去实现我们的业务目标。

3)手势操作更便捷

iOS10对于手势的操作,也有了更便捷的设计。以锁屏界面为例:

iOS9中:

进入系统界面:

  • 有touch ID识别指纹:按下Home键
  • 无touch ID识别指纹:右滑屏幕

插件中心:从顶上往下滑

消息中心:从顶上往下滑,并切换tab

相机:从右上角往上滑

iOS10:

进入系统界面:

  • 有touch ID识别指纹:按下Home键
  • 无touch ID识别指纹:按下Home键,输入密码

插件中心:右滑

消息中心:从顶上往下滑

相机:右滑

对比以上的两个操作,功能还是那些功能,但整体的操作却更加舒适便捷了,手指的操作变得更灵活直接,不需要上下来回,或者准确地对着某块控件才能完成操作。

Josh Clark在《Tapworthy-Designing Great iphone Apps》一书中分析得出,当我们单手操作时,虽然拇指能划到整个屏幕,但只有三分之一的屏幕是真正容易触及的——也就是拇指正对的区域。

1477465843-1418-101f0002fdb43ebd8cb3

随着iphone手机屏幕越来越大,如何设计操作体验,使操作更舒适,也是设计师们需要好好打磨的一个体验问题。

随着iOS10更新的地图应用中,对于手指操作体验的优化设计,使整个操作非常舒适,这种设计思路,也非常值得我们在平时的设计工作中借鉴。

原来的地图App中,各个界面中的手指操作区域是这样的:

1477465844-9359-101c0004e8c99d69ed76

在iOS10中,他的手指操作变成了这样:

1477465868-6601-101c0004e8c99d69ed76

所有的操作都集中到了“舒适区域”内,让用户能更方便地使用体验,不用因为手指不够长也切换成双手操作而苦恼了。

三、细节,还是细节

用户体验的本质在于:既要关注大局,又要关注细节,只有这样用户才能获得最好的体验。

处女座如苹果公司,在提升用户体验的道路上,对于细节的追求,经常会到一个让人惊叹的地步。

举两个小例子,可能平时很多人不太会注意到,但确实给我们带来了操作使用的便利。

顶部的信息条:

在iOS10中,回到上一个使用的App的回退操作,不再会遮住手机数据或者wifi信息条,可以让用户在不打断视野的情况下,快速回到之前用过的应用上。

1477465844-8277-101c0004e8c85b73a76d

另外有个很多人可能会注意不到的细节是:视频播放时,锁定屏幕,再次打开后,它会继续播放,不需要再一次点击播放按钮,so方便。

交互细节不是功能,在追求效率的公司里,往往会被觉得可有可无。但是往往只有对细节孜孜不倦追求的产品,才能做到足够让人惊艳。

结语

追求好的体验一直是我们的设计目标,不管是从视觉上,还是从交互上。

我们必须去思考,如何站在用户的角度,从问题的根源着手,从产品实际的使用场景出发,关注细节和情感,结合新系统,新趋势,为用户创造好的用户体验,以最终达到我们设计的目的。

·End·

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

(0)
iouedioued
上一篇 2016-10-26 15:03
下一篇 2016-10-26 15:56

相关推荐

  • 3月19日部分上海实习信息汇总

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

    2018-03-19
  • H5时代的多行文本框

    说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!首先一起回顾下输入框在PC端的应用:

    2017-06-04
  • 【交互设计】Dribbble上的 UI 大神MIKE作品欣赏

    Dribbble 上的UI 大神MIKE作品欣赏幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片…

    2017-08-04
  • Android界面设计视觉规范

    当你拿到Android的设计需求后,开始着手进行界面的设计,却不知道如何设计才能让用户对界面感到满意,设计出来的界面差强人意,返稿无数以至于一遍遍的修改?如果这就是你现在的状况,那么先别急着重新进行界面的设计,因为你首先得静下心来看一看这篇Android的界面设计规范。

    2017-05-31
  • 如果你即将面试交互设计,可以看看这篇文章

    从今年年初开始面试到现在,大大小小的面试也经历了十几场吧。之前苦于交互设计没有面试的题库,所以一路下来自己都有留心收集一些面试题,今天就来做个汇总。 本来交互设计也是设计类,设计类的面试只要看作品说话…

    2016-04-13
  • 孙一民:一幅上世纪的图景,一段广州建设的“芳华” | UED设计年会

    2018年伊始,“设计·文化·艺术引领下的城市发展和乡村振兴高峰论坛”在江苏宿迁成功召开。在本次论坛上,众多先进的设计思想汇聚于此,我们不仅看到了设计师眼中的城市发展、乡村振兴脉络,更从城市管理者的角度了解到如何展开以人为本的设计。论坛上,长江学者特聘教授,华南理工大学建筑学院院长、博士生导师孙一民发表了以“设计改变广州”为主题的演讲。从华南中心城市到国家中心城市,伴随着经济的迅猛发展,广州的城市建设也在进行着大步飞跃。常人所见,城市的...

    2018-02-26
  • 交互设计控件之按钮设计

    ♝点击上方“交互设计学堂”关注我们,送电子书一.主按钮和次按钮很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。主次按…

    2017-08-04
  • AB测试告诉你,你以为的设计不是你以为的设计。

    用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

    2016-08-29
  • APP引入一个新世界的可能性

    在上一篇文章中,我们介绍了概念"设计的地方,"这也解释了如何你可以更好地了解您的应用程序的使用情况和它的功能,以及如何可以变为更加重要的一部分,您的用户日常生活的步伐。我们这样做是通过分解如何分析应用程序功能的位置,如精确位置的数据已迅速成为必不可少的提供您的用户行为和利益的富有洞察力。

    2015-01-05
  • UED设计年会系列活动在江苏省宿迁市成功举办!

    欢迎点击上方蓝字免费订阅!阅读本文前,请您先点击本文标题下面的蓝色字体“快宿迁”再点击“关注”,并点击“置顶公众号”,这样您就可以每天继续免费收到文章了。每天都有分享。完全是免费订阅,请放心关注!2018年1月19—21日,UED设计年会系列活动在江苏省宿迁市成功举办,共议如何在当下中国,以设计、文化、艺术的力量引领城乡发展。年会系列活动包含“设计·文化·艺术引领下的城市发展和乡村振兴”高峰论坛、“衲田杯”可持续设计国际竞赛颁奖盛典暨第...

    2018-02-03