我花了五个小时,完成了iOS 11新版App Store的交互探索

WWDC 2017 上发布了全新的 iOS 11 ,系统本身在设计上就有了诸多变化和更新:信息更扁平的控制中心、WP 风格的大标题、截图编辑功能、相机直扫二维码等等。不过,作为一名电商设计师和 App 爱好者,此次更新最让我感兴趣的莫过于 App Store 的“改头换面”了。

文章目录[隐藏]

我花了五个小时,完成了iOS 11新版App Store的交互探索

WWDC 2017 上发布了全新的 iOS 11,系统本身在设计上就有了诸多变化和更新:信息更扁平的控制中心、WP 风格的大标题、截图编辑功能、相机直扫二维码等等。不过,作为一名电商设计师和 App 爱好者,此次更新最让我感兴趣的莫过于 App Store 的“改头换面”了。

有目的的分析和设计才有效。所以聊具体改版方案之前,我们先来捋一下 App Store 的产品目标。很清晰,App Store 的产品目标可以分为以下两个方面:

1. 商业目标 吸引更多优质开发者入驻平台,提供更多优质 App,构建更完善、更高水准的应用生态环境。当然还有,赚更多的钱。

2. 体验目标 帮助用户发现想要的 App。

可以再对用户类型细分为两类:

第一类用户,有明确的目标,大多通过朋友推荐或其他外部渠道已经得知App 概况,并使用搜索查找 App;

第二类用户,有模糊的诉求,如好玩的游戏、有趣的社交、新奇的设计等等,通过 Store 首页、排行榜、编辑精选等渠道来“逛”,以此发现感兴趣的 App。

显然,此次改版是想要着重抓住第二类用户的心。

确定目标后,我们可以用一句话来描述 App Store 改版前的产品状况:

货架特性明显,导购能力匮乏。

具体来说,可以拆分成以下三个方面:

1. 流量红利不再 一项数据表明,2015年至2016年,泛生活应用数量占比提升30.7%,但应用流量占比仅提升16.7%。可见,与其说 App Store 自我创新,不如说是整个市场环境都在倒逼“应用商店”开拓新的应用分发方式。

2. 传统导购免疫 普通用户的手机中大约会安装20-30个 App,但他们在半年甚至一年内,可能都不会去下载、尝试新的 App。一方面,极少数的 App 已经满足了我们日常绝大部分需求,用户口味越来越刁钻;其次,App 下载和试用成本与日俱增,对于传统呆板、无趣的导购推荐方式基本产生了免疫。

3. 榜单秩序混乱 iOS 平台的刷榜甚至成为了一个完整的产业,除了巨头应用之外,其他游戏、App 在 Store 并不好过。正由于原本 Store 的导购渠道只有首页推荐和排行榜两种,排行榜成为巨大、单一的流量入口,导致很多其实非常精致、良心的应用无法被用户所发现。

综上所述,光是提供精确的搜索和完整的 App 信息已经无法满足市场和消费者,如何帮助用户发现更多、更优质的应用才是改版所考虑的重点。因此,“内容化导购”成为本次 App Store 改版的核心目标。

接下来,我们看看具体改版中值得一提的方案。

一级导航变化

精品推荐、类别、排行榜、搜索、更新,旧版的5个底部 Tab 中,前三个在新版中被直接替换为今天、游戏、App,而更新优先级提前,搜索被置于最后。

我花了五个小时,完成了iOS 11新版App Store的交互探索

最重要的,就是移除了排行榜 Tab。这意味着 App Store 彻底改变了应用推荐的规则,将不再强依赖评论、评分,直接斩杀了应用刷单;

其次,将游戏单独从应用中独立出一个 Tab。游戏作为整个应用市场中盈利最强的存在,一方面为开发者和 App Store 带来了绝大部分的收入,另一方面游戏应用的黏性、活跃度也远超其他 App。因此,这次将游戏单独列为一个一级 Tab ,不失为一种聚焦流量的做法;

另外,弱化搜索和分类,更多依赖内容进行应用分发。从一级导航中移除分类,后置搜索,都明显是为了让出更多的流量到前三级 Tab。传统货架式导购的疲软已经被市场所证明,在保证搜索常驻的前提下,确实没有必要对它和分类做过多的强调。

纯信息流的今天 Tab

今天 Tab 是此次改版中最让我动容的地方。作为第一级 Tab,巨大、显眼的卡片式设计意味着信息透出更为聚焦,但一屏一个卡片,也牺牲了很多效率。今天 Tab 下,每日会推送一批卡片,分为以下几类:

World Premiere(世界首发):最优先展示的资源位,用于投放那些备受瞩目的 App。

我花了五个小时,完成了iOS 11新版App Store的交互探索

旧版的精品推荐 Tap 常常在巨作发布时占用一整行的卡片来做推广,但这种方式并不够产品化,分立的卡片也无法很好地展示 App 特点,逼格和调性都不够高。

我花了五个小时,完成了iOS 11新版App Store的交互探索

现在,通过信息流卡片中最顶层的资源位,能够非常好地提出首推应用。

App of The Day、Game of The Day(今日应用/游戏):每日重点推荐的一款应用和游戏

这部分的卡片图片都设计的非常精美,但信息交互我觉得还不够好。如下图可见,卡片上最显眼是“GAME OF THE DAY”,而被推荐的应用名却被弱化在左下角,难免有些本末倒置。如果把两者优先级对掉,效果可能更好。

我花了五个小时,完成了iOS 11新版App Store的交互探索

The Daily List/Collection(列表):带有推荐主题的 App 集合

为了缓解今日 Tab 的卡片低效,List 也是非常自然的一个设计。值得一提的是,每日的推荐主题都可能不一样,如下图“Relax. Breathe. Zen Out Anywhere”所推荐的就是四个放松身心的应用。

不过这里卡片的设计我又有意见了,你能猜到标题是可以点击,查看完整 List 列表的吗?第一眼我还以为就只有四个推荐呢。所以,把“查看全部”的行动点强化是非常有必要的。

我花了五个小时,完成了iOS 11新版App Store的交互探索

How to/Tips/Deep Dive:关于 App 使用心得、技巧、深度体验的文章。

如图所示,这卡片的设计就比楼上的 xx of The Day 合理许多,突出标题,并且将 App icon 单独在底部区块呈现,更容易阅读和识别。

我花了五个小时,完成了iOS 11新版App Store的交互探索

卡片内容详情没什么好说的,去导航的设计非常具备沉浸感,排版、图片和视频播放体验都很不错。在文章最后,会放置应用入口和直接下载/购买行动点,毕竟这么详细的图文介绍可比点击去应用详情页有趣、有效多了。

我花了五个小时,完成了iOS 11新版App Store的交互探索

更有层次感的游戏、App Tab

旧版的精品推荐页面设计得非常单调,除了顶部的轮播 Banner 以外,就靠下面一个接一个的“泳道”展示 App。而且,旧版的 App 展示出了必要信息(icon、标题、价格等)以外,就没有太多导购信息了。

所以,编辑精选的 App 到底好在哪儿?新品有什么值得关注的地方?所谓的大作推荐,又如何了解更多应用细节?这些问题我们都无从得知。

我花了五个小时,完成了iOS 11新版App Store的交互探索

新版的界面设计和信息呈现很好地优化了以上问题。

通过大图 Banner、小图 List、分类分流三类组件的交错穿插,来形成有节奏感的页面阅读,可以缓解原本单调页面中的视觉疲劳。同时,对于大卡片都会有一段说明文案,视频会直接进行播放,而小图应用也都会有小段介绍。基本上,整个页面都是在贯彻内容透出这个策略,让消费者明白为什么这些应用是“好”的。

我花了五个小时,完成了iOS 11新版App Store的交互探索

不足之处当然也有。首先整个页面延续了旧版大量使用“左右横滑”的设计,在开拓页面空间的同时带来了可见性差、效率低等问题。另外和今天 Tab 类似,游戏/App 里也存在了同种信息多种表达的情况。

如下图所示,同样是应用介绍,却采用了三种大感觉一致但细节又不同的设计。

我花了五个小时,完成了iOS 11新版App Store的交互探索

强调内容的详情页

App 详情页在旧版中,主要承担了展示应用自身信息的作用:截图、介绍、更新日志等,即便是用户评价也放在二级页面。在新版中,首先对页面布局做了较大改动,把评分、排行、年龄分级放在了较优先的位置。

我花了五个小时,完成了iOS 11新版App Store的交互探索

顺应多平台特性,该应用如果也有 iPad、TV、Watch 版本,可以在下拉项中查看他们各自的截图。

一个小问题是,查看其他平台截图的时候会一次性在纵向全部展开,导致页面变的很长,下面的开发者、评价等内容就更远了。考虑到用户可能只要查看某一个额外平台,如果采用横向分 Tab 来展示,效率可能更高一些:

我花了五个小时,完成了iOS 11新版App Store的交互探索

旧版,页面下滑的时候会有一整个大区块停留在顶部,非常遮挡视线。现在新版把头部做小,既保证了随时随地可以下载应用,也保证了下面内容的透出。

我花了五个小时,完成了iOS 11新版App Store的交互探索

更加突出的用户评价

评价内容被做得更大更突出,毕竟这已经成为用户了解应用的一个绝佳渠道。不过页面上这个“轻点评分”的摆放有点困惑,到底是对应用评分还是对评价评分?虽然花点成本之后能理解是对应用评分,但放在这个位置非常容易误解以为和下面的评价卡片是一体的信息。

稍作改动之后就清晰很多:

我花了五个小时,完成了iOS 11新版App Store的交互探索

此外,进入评价列表后头部 Bar 就不见了,其实并不方便帮助用户随时随地进行决策,所以我把它给加了回去:

我花了五个小时,完成了iOS 11新版App Store的交互探索

页面最底部,是一个分流区块,有点类似国内电商 App 的猜你喜欢,对于浏览到最后但还没有决策流量来说,这是一个很好的出口。但还是老问题,左右横滑效率太低,既然已经到了底部,纵向直接多摆放几个又有什么问题呢?或者至少,可以和首页的那些应用 List 一样,每一滑多呈现一些应用。

我花了五个小时,完成了iOS 11新版App Store的交互探索

小结:

1. 内容化分发是整个市场的大趋势,中国算是这块的先驱,各大电商网站一两年前就已经开始了这部分尝试:直播、内容号、达人推荐等等。百度、腾讯等应用市场也很早就开始了“应用+”的转型。不过,得益于 iOS 的封闭系统和高质量应用,现在的转型虽然晚,但还是有机会做好做精。

2. “左右横滑”一定要慎用,追求高逼格的下场就是用户根本不去使用这个组件;

3. 对应市场型应用来说,“效率”是一个非常重要的目标。在合理的范畴内,尽可能在少的屏幕内透出多的内容、商品、应用,是节省用户的时间。一味追求简洁,有时得不偿失。

4. 信息结构一致性非常重要。以前我也纠结过是“用不同的形式承载不同的内容”,还是“用相同的形式承载不同的内容”,事实上,我们要让用户关注信息本身,而不是外在。所以,在设计时,尽可能统一结构,可以大大降低用户理解成本。

欢迎关注作者的微信公众号:

zlqr21

「这2篇好文帮你从iOS 10 学习设计」

  1. 《从iOS 10设计指南变化看设计的新趋势》
  2. 《热门趋势!从IOS 10 的交互设计中学到的3个设计启示》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/20417/

(0)
震天下震天下
上一篇 2017-06-09 12:03
下一篇 2017-06-12 15:38

相关推荐

  • 升级篇:利用品牌基因法进行图标设计

    图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

    2017-05-04
  • Magic Sketch——寓教于乐的哄娃神器

    棒妈说这是一款哄娃神器。坐飞机火车时,需要娃瞬间安静时,这款神器简直好用到飙泪。这是一款玩具,也是一款画画工具。寓教于乐,大概说的就是这款过年可以代替压岁钱的神器。(请于微店购买)面对市场上琳琅满目的玩具很多宝妈宝爸表示挑花了眼、剁断了手还是没有买到让宝宝满意的到底应该选择什么玩具,才符合宝宝的成长需求?小汽车呀,变形金刚、芭比娃娃,还是...现在还在买这些玩具?你OUT了!孩子开心固然重要,但也别错过宝宝早期智力开发的黄金阶段!寓教于...

    2018-04-12
  • 从2种形式和4种附加价值,来浅谈APP启动页

    当应用程序被用户打开时,在程序启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。
    ——摘自苹果官方对于iOS启动页的设计说明

    2017-05-05
  • 用AB测试改进用户体验设计,做出正确决策

    本文转译自TubikStudio,全文有删减。设计师们每天都在面对一些难以抉择的情况。面对这样的问题,有经验的团队会对两者进行测试,来确定哪种方案最好,其中一种流行的方法是AB测试。AB测试将用户分成两组,每组都显示不同的版本,一半看到A版本,另一半看到B版本。AB两个选项的差异根据产品经理来决定,可以是颜色差异,也可以是位置差异等。两个版本的有效性可以用浏览量、点击次数或其他数据来衡量。对于设计师来说,这是分析目标受众群体行为模式和特...

    2018-02-24
  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • 在处理 CRO 与用户体验设计时常会犯的四项错误

    转换率优化(Conversion Rate Optimation, CRO)逐渐受到越来越多的关注。资本雄厚的公司通过增长黑客团队与持续优化作后盾,也影响越来越多人搭上 CRO 的风潮。整体来说,重视对网站效果的测试是一件好事。转换率(Conversion Rate)= 欲望(Desire)─ 障碍(Friction)

    2017-05-17
  • 实例剖析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。本文作者(熊猫小生)通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、雅各布·尼尔森(Jakob Nielsen)简介雅各布·尼尔森(Ja...

    2018-01-30
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05
  • 设计师们全都疯了!出Ps的Adobe公司又出新神器!

    图文来源:新设技 这次Microsoft 与 Adobe 强强联手退出了神器一样的应用,让现场设计师为之疯狂~~,不多说了,看视频吧... 设计师们,这到底是什么节奏啊~~?你们都懂的... 随著 Microsoft CEO Satya Nadella 近日…

    2014-10-12