我花了五个小时,完成了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

相关推荐

  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • 交互设计不只是解决业务问题

    「解决问题」是很多人对设计的定义归纳,具体到产品/交互设计领域,深入理解业务并提出合适的解决方案也是一项很基础、重要的要求。但对于用户体验/交互设计师来说,我觉得「理解业务」和「解决问题」本身都并不足…

  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • 超实用的响应式排版快速指南

    译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。

    2017-06-02
  • 好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • 设计思维常用的五种工作方法

    什么是设计思维呢?顾名思义,设计思维就是设计师用来思考问题和解决问题的方法。如何培养设计思维?今天这篇用两个实战案例帮你一窥设计思维的奥妙。

    2017-05-06
  • 当交互设计遇到用户体验

    【交互设计原则】 *符合用户使用需求 *基于用户的心理模型设计 *一致性 *及时有效的反馈和解释 *形式追随功能 *单一任务、渐次呈现 1.符合用户使用需求 设计一个产品,最基础的原则就是要符合用户的使用需求。确定…

    2015-09-20
  • 4K已至,保障用户体验是成功的关键

    4K技术介绍1.1什么是4K分辨率图像的大小一般用像素分辨率来表示,例如1920*1080的分辨率就意味着图像是由水平方向每行1920个像素以及垂直方向每列1080个像素组成的。出于方便交流的原因,业界也常常以图像水平方向上的像素值来表示图片大小,而且为了简化交流过程,一般情况下会用“K”来描述像素值,其中1K相当于1024个像素,几K就是指图像的水平方向每行像素值达到或者接近1024的几倍。以此为标准,4K图像就是指水平方向每行像素值...

    2018-04-04
  • 物联网产品用户体验设计的5个关键

    来源:物联之家网编译:冬夜物联网智库 整理发布转载请注明来源和出处------【导读】------创建物联网产品良好用户体验的5个关键:简化入门、顺畅的跨平台设计和交互、个性化和背景、一体化体验、创新体验方式。设计一个伟大的、用户体验极佳的物联网产品说起来容易做起来很难。仅仅为一个新应用程序构建直观的用户体验就极具挑战,而物联网系统通常由多个设备、多个具有不同功能的应用程序和接口、输入输出数据流和用户权限分配组成,因此,为如此复杂的系统...

    2018-04-10
  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

    2016-02-22