从交互设计的角度,看iOS11的5点不足

提前下载了开发者版本的iOS11体验了大半个月,除了很耗电、手机很烫以外,道长打算从交互设计的角度去浅析一下个人对iOS11部分交互以及可改进的地方,为了避免篇幅过长,所以只挑几点出来讲。


提前下载了开发者版本的iOS11体验了大半个月,除了很耗电、手机很烫以外,道长打算从交互设计的角度去浅析一下个人对iOS11部分交互以及可改进的地方,为了避免篇幅过长,所以只挑几点出来讲。

从交互设计的角度,看iOS11的5点不足

一、WP风格的标题栏及导航条功能

从交互设计的角度,看iOS11的5点不足

熟悉WinPhone(以下简称wp)交互风格的同学都知道,这种设计方式是wp一直推崇的,wp的风格就是标题左对齐并很大,不过它的UI界面操作是在底部浮动着,这个主要是跟硬件特性带来的操作习惯有关,另外本身wp自动的物理操作按键是在底部,所以iOS11这次这个改变道长个人觉得还是考虑没那么周全。

1、普通导航条

从交互设计的角度,看iOS11的5点不足

iOS11的页面操作功能还是在导航条上面,用户往上滑动页面时,大标题会隐藏、导航条的中间会把标题按照iOS7以后的显示方式显示居中,首先动画过度上来说还是蛮奇怪的,其次是会显得大标题多余,破坏UI整体性。可以改如下图:

从交互设计的角度,看iOS11的5点不足

改进:上滑时大标题导航条在左边变小,返回按钮依然在,另二三级后页面如果没有左右滑动切换页面造成冲突的情况下,统一考虑采用左滑返回上一级页面。

2、不统一的大标题+tab标签导航条

从交互设计的角度,看iOS11的5点不足

比如导航条里面有分tab标签的情况,iOS11就是不统一的,我们首先抛开说是tab导航条是包含于或不包含于大标题导航条的场景,更何况在最近通话和我的消息这两个场景里面,tab标签是大标题的分类,而iOS11却不统一。

改进:tab标签在大标题导航的下面,向上滚动时大标题变小,tab吸顶。

3、导航条功能的不统一

从交互设计的角度,看iOS11的5点不足

看两个界面里导航条的功能,个人收藏这一帧里的“添加”功能在左边,“编辑”功能在右边,而短信的却反过来,添加在右边,编辑在左边,同样是一级页面,承载相同能力的功能入口却放置在相反的位置,我考虑了不同的场景或可能性,但还是觉得很奇怪。

改进:统一“添加”在右边,“编辑”在左边。

二、Appstore里面不能统一的“返回”

从交互设计的角度,看iOS11的5点不足

Appstore的改变很大,业务上改最多,但在交互上,不得不提的是第一帧“今天”的APP详情页面,如上图一,想要返回到一级页面有两个操作方法,第一个是点击右上角的关闭按钮,第二个操作方法是长按界面向下拉一定距离后松开,则回到上一级页面。

而在App这一帧点击到某个APP的详情页面后,返回上一级页面的两个操作方法分别是点击导航条左边的“返回”按钮或长按页面向左滑动一定的距离。

改进:统一点导航左上角的“返回”按钮和长按向左滑动一定距离后返回上一级,下拉一定距离放开返回这个方案看起来不错,但很多页面都是需要下拉刷新的,而在物理动作上面,这两个会造成冲突,所以舍弃掉长按下拉一定距离放开返回上一级的操作。

三、3D touch真的那么好吗?

从交互设计的角度,看iOS11的5点不足

改动最大的这个地方,全都支持3D touch特性,使劲长按后弹出更多的操作界面,首先不讲这个界面看起来有多乱,苹果可能也考虑到不支持3D touch的机型怎么处理,所以就在调整屏幕亮度和调整音量的两个操作上面兼容了轻轻长按也能上下滑动来调整,而使劲长按(3D touch)是跳转到一个新的界面去,在这个页面用户有事轻轻的长按来调整亮度或音量大小。

讲真3D touch好费力啊。

那么像“长按”这么省力的交互手势真的比3D touch差吗?我和身边的小伙伴争论加“似乎达成共识”后觉得,长按和3D touch唯一能解决的问题是——在桌面上长按图标会触发的结果是icon上有删除按钮,而使劲长按能出快捷方式,所以我个人感觉这个3D touch真心没那么好。我们看一个长按的例子:

从交互设计的角度,看iOS11的5点不足

长按真的可以做很炫酷的事情啊,比如UC浏览器在新闻详情页面长按出现的“老罗大爆炸”功能,轻轻长按和使劲长按(3D touch),你选哪个?

#专栏作家#

芒果道长,人人都是产品经理专栏作家,起点学院特聘导师。腾讯课堂【30天教你做一个APP】作者。

本文独家首发于人人都是产品经理,未经本站许可,不得转载。

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

(0)
CatherineCatherine
上一篇 2017-08-04 09:24
下一篇 2017-08-04 10:25

相关推荐

  • 四个小故事 每一个都是“极致用户体验”的用心诠释(上)

    古老的印第安人有个习惯当他们移动得太快的时候会停下脚步,安营扎寨耐心等待自己的灵魂前来追赶而身为现代人的我们在开启一段旅程前最重要的事情莫过于挑选一家“想客户所想”的旅行社只有这样才能安心这次我们透过四个小故事向你娓娓道来为什么说驴妈妈客服是“极致用户体验”的先行者即便是大家族,也“一个都不能少”王女士来自苏州,今年40多岁,她十分看重亲情,每隔一段时间,就会带上全家出国旅游——由于出身于一个大家族,王女士每次在驴妈妈报团,几乎没有少于...

    2018-04-11
  • 设计师升维:集创思维构架设计逻辑

    现时代的设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态(集创思维)。体验分析_方案1_产品提供的原始方案
    方式:点击条目>输入数值或点击加减>点击确定完成
    最大操作次数23次:点击条目1次,点击21次+号到最大值,点击确定1次,少数用户会使用此方式。
    常规操作次数6次:点击条目1次,点击输入框1次,输入数值3次(如3.5),点击确定1次。
    最小操作次数3次:点击条目1次,点击+号随即完成1次,点击确定1次。体验分析_方案2_提前防止用户出错
    方式:点击条目>滑动弹窗>点击完成
    最大操作次数4次:点击条目1次,滑动到最底部需要2次,点击选择1次。
    最小操作次数2次:点击条目1次,无需滑动,当前已有他要的选择,点击选择1次。体验分析_方案3_减少操作
    方式:点击数值选择
    最大操作次数1次:直接点击选中
    最小操作次数1次:直接点击选中
    屏占比:半屏
    扩展性:低
    操作点击次数降低,但屏占比过多,且不适用于当数值更大时(如果以后数值扩展到100%,那么整几屏都是按钮)体验分析_方案4_减少操作,防止出错
    方式:拖动圆点选择
    最大操作次数:1次
    最小操作次数:1次
    屏占比:低
    扩展性:高
    操作次数低,效率高,屏占比少,具有适用性,可以多个此类操作叠加使用

    2017-05-17
  • 5种设计策略,让你的UI更加安全稳妥

    安全的设计应该是清晰,简单并且能够引导用户的。

    2017-08-04
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 做你女朋友,用户体验真差

    点上方蓝字关注「晚安少年」每晚十点,一位少年陪你说晚安文/陈大力经作者授权发布01先说件有趣的事。我前两天跟gay蜜吐槽我男朋友。内容是:不会夸人,半句甜言蜜语都说不得。明明本人是腿模级别身材,偏偏他一个劲儿挑出不足为道的赘肉来取笑。以及,起争执的时候,退化成“我就静静看你发疯”的不解意选手,仿佛眼前这一场不是他该来的比赛。gay蜜的回答是:嗯是有点过分了,女生不就喜欢被哄哄嘛。同一个情感问题,我也问了基友,直男小学弟一只。我这边慷慨激...

    2018-02-02
  • 提示信息的情感化设计,做一个有故事的淘宝

    未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。

    2017-05-05
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • Google发布"范本App”:手把手教你实现跨平台开发

    Google今天发布了一个全新的范本app,名为Universal Music Player,它能够在智能手机、平板电脑、Android Auto、Android Wear以及Google Cast上工作。将它称为"范本app"的原因主要是:它是Google公司为开发者们推出…

    2015-03-13
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04
  • apple watch 中文手册:开始

    重要 本文档是开发过程中使用的API或者技术的初步文档。苹果提供该文档以便于开发者使用苹果产品上使用技术和编程接口。后期该文档中信息会有所变动,所以依据本文档开发的软件应当使用最终的操作系统软件进行测试…

    2015-06-15