我花了五个小时，完成了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，而更新优先级提前，搜索被置于最后。

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

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

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

纯信息流的今天 Tab

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

World Premiere（世界首发）：最优先展示的资源位，用于投放那些备受瞩目的 App。

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

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

App of The Day、Game of The Day（今日应用/游戏）：每日重点推荐的一款应用和游戏

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

The Daily List/Collection（列表）：带有推荐主题的 App 集合

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

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

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

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

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

更有层次感的游戏、App Tab

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

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

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

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

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

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

强调内容的详情页

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

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

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

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

更加突出的用户评价

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

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

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

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

小结：

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

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

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

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

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

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

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

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

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

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

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