我花了五個小時，完成了iOS 11新版App Store的交互探索

WWDC 2017 上發(fā)布了全新的 iOS 11，系統(tǒng)本身在設(shè)計上就有了諸多變化和更新：信息更扁平的控制中心、WP 風(fēng)格的大標(biāo)題、截圖編輯功能、相機直掃二維碼等等。不過，作為一名電商設(shè)計師和 App 愛好者，此次更新最讓我感興趣的莫過于 App Store 的“改頭換面”了。

有目的的分析和設(shè)計才有效。所以聊具體改版方案之前，我們先來捋一下 App Store 的產(chǎn)品目標(biāo)。很清晰，App Store 的產(chǎn)品目標(biāo)可以分為以下兩個方面：

1. 商業(yè)目標(biāo) 吸引更多優(yōu)質(zhì)開發(fā)者入駐平臺，提供更多優(yōu)質(zhì) App，構(gòu)建更完善、更高水準(zhǔn)的應(yīng)用生態(tài)環(huán)境。當(dāng)然還有，賺更多的錢。

2. 體驗?zāi)繕?biāo) 幫助用戶發(fā)現(xiàn)想要的 App。

可以再對用戶類型細(xì)分為兩類：

第一類用戶，有明確的目標(biāo)，大多通過朋友推薦或其他外部渠道已經(jīng)得知App 概況，并使用搜索查找 App；

第二類用戶，有模糊的訴求，如好玩的游戲、有趣的社交、新奇的設(shè)計等等，通過 Store 首頁、排行榜、編輯精選等渠道來“逛”，以此發(fā)現(xiàn)感興趣的 App。

顯然，此次改版是想要著重抓住第二類用戶的心。

確定目標(biāo)后，我們可以用一句話來描述 App Store 改版前的產(chǎn)品狀況：

貨架特性明顯，導(dǎo)購能力匱乏。

具體來說，可以拆分成以下三個方面：

1.?流量紅利不再 一項數(shù)據(jù)表明，2015年至2016年，泛生活應(yīng)用數(shù)量占比提升30.7%，但應(yīng)用流量占比僅提升16.7%?？梢?，與其說 App Store 自我創(chuàng)新，不如說是整個市場環(huán)境都在倒逼“應(yīng)用商店”開拓新的應(yīng)用分發(fā)方式。

2.?傳統(tǒng)導(dǎo)購免疫 普通用戶的手機中大約會安裝20-30個 App，但他們在半年甚至一年內(nèi)，可能都不會去下載、嘗試新的 App。一方面，極少數(shù)的 App 已經(jīng)滿足了我們?nèi)粘＝^大部分需求，用戶口味越來越刁鉆；其次，App 下載和試用成本與日俱增，對于傳統(tǒng)呆板、無趣的導(dǎo)購?fù)扑]方式基本產(chǎn)生了免疫。

3.?榜單秩序混亂 iOS 平臺的刷榜甚至成為了一個完整的產(chǎn)業(yè)，除了巨頭應(yīng)用之外，其他游戲、App 在 Store 并不好過。正由于原本 Store 的導(dǎo)購渠道只有首頁推薦和排行榜兩種，排行榜成為巨大、單一的流量入口，導(dǎo)致很多其實非常精致、良心的應(yīng)用無法被用戶所發(fā)現(xiàn)。

綜上所述，光是提供精確的搜索和完整的 App 信息已經(jīng)無法滿足市場和消費者，如何幫助用戶發(fā)現(xiàn)更多、更優(yōu)質(zhì)的應(yīng)用才是改版所考慮的重點。因此，“內(nèi)容化導(dǎo)購”成為本次 App Store 改版的核心目標(biāo)。

接下來，我們看看具體改版中值得一提的方案。

一級導(dǎo)航變化

精品推薦、類別、排行榜、搜索、更新，舊版的5個底部 Tab 中，前三個在新版中被直接替換為今天、游戲、App，而更新優(yōu)先級提前，搜索被置于最后。

最重要的，就是移除了排行榜 Tab。這意味著 App Store 徹底改變了應(yīng)用推薦的規(guī)則，將不再強依賴評論、評分，直接斬殺了應(yīng)用刷單；

其次，將游戲單獨從應(yīng)用中獨立出一個 Tab。游戲作為整個應(yīng)用市場中盈利最強的存在，一方面為開發(fā)者和 App Store 帶來了絕大部分的收入，另一方面游戲應(yīng)用的黏性、活躍度也遠(yuǎn)超其他 App。因此，這次將游戲單獨列為一個一級 Tab ，不失為一種聚焦流量的做法；

另外，弱化搜索和分類，更多依賴內(nèi)容進行應(yīng)用分發(fā)。從一級導(dǎo)航中移除分類，后置搜索，都明顯是為了讓出更多的流量到前三級 Tab。傳統(tǒng)貨架式導(dǎo)購的疲軟已經(jīng)被市場所證明，在保證搜索常駐的前提下，確實沒有必要對它和分類做過多的強調(diào)。

純信息流的今天 Tab

今天 Tab 是此次改版中最讓我動容的地方。作為第一級 Tab，巨大、顯眼的卡片式設(shè)計意味著信息透出更為聚焦，但一屏一個卡片，也犧牲了很多效率。今天 Tab 下，每日會推送一批卡片，分為以下幾類：

World Premiere（世界首發(fā)）：最優(yōu)先展示的資源位，用于投放那些備受矚目的 App。

舊版的精品推薦 Tap 常常在巨作發(fā)布時占用一整行的卡片來做推廣，但這種方式并不夠產(chǎn)品化，分立的卡片也無法很好地展示 App 特點，逼格和調(diào)性都不夠高。

現(xiàn)在，通過信息流卡片中最頂層的資源位，能夠非常好地提出首推應(yīng)用。

App of The Day、Game of The Day（今日應(yīng)用/游戲）：每日重點推薦的一款應(yīng)用和游戲

這部分的卡片圖片都設(shè)計的非常精美，但信息交互我覺得還不夠好。如下圖可見，卡片上最顯眼是“GAME OF THE DAY”，而被推薦的應(yīng)用名卻被弱化在左下角，難免有些本末倒置。如果把兩者優(yōu)先級對掉，效果可能更好。

The Daily List/Collection（列表）：帶有推薦主題的 App 集合

為了緩解今日 Tab 的卡片低效，List 也是非常自然的一個設(shè)計。值得一提的是，每日的推薦主題都可能不一樣，如下圖“Relax. Breathe. Zen Out Anywhere”所推薦的就是四個放松身心的應(yīng)用。

不過這里卡片的設(shè)計我又有意見了，你能猜到標(biāo)題是可以點擊，查看完整 List 列表的嗎？第一眼我還以為就只有四個推薦呢。所以，把“查看全部”的行動點強化是非常有必要的。

How to/Tips/Deep Dive：關(guān)于 App 使用心得、技巧、深度體驗的文章。

如圖所示，這卡片的設(shè)計就比樓上的 xx of The Day 合理許多，突出標(biāo)題，并且將 App icon 單獨在底部區(qū)塊呈現(xiàn)，更容易閱讀和識別。

卡片內(nèi)容詳情沒什么好說的，去導(dǎo)航的設(shè)計非常具備沉浸感，排版、圖片和視頻播放體驗都很不錯。在文章最后，會放置應(yīng)用入口和直接下載/購買行動點，畢竟這么詳細(xì)的圖文介紹可比點擊去應(yīng)用詳情頁有趣、有效多了。

更有層次感的游戲、App Tab

舊版的精品推薦頁面設(shè)計得非常單調(diào)，除了頂部的輪播 Banner 以外，就靠下面一個接一個的“泳道”展示 App。而且，舊版的 App 展示出了必要信息（icon、標(biāo)題、價格等）以外，就沒有太多導(dǎo)購信息了。

所以，編輯精選的 App 到底好在哪兒？新品有什么值得關(guān)注的地方？所謂的大作推薦，又如何了解更多應(yīng)用細(xì)節(jié)？這些問題我們都無從得知。

新版的界面設(shè)計和信息呈現(xiàn)很好地優(yōu)化了以上問題。

通過大圖 Banner、小圖 List、分類分流三類組件的交錯穿插，來形成有節(jié)奏感的頁面閱讀，可以緩解原本單調(diào)頁面中的視覺疲勞。同時，對于大卡片都會有一段說明文案，視頻會直接進行播放，而小圖應(yīng)用也都會有小段介紹?；旧?，整個頁面都是在貫徹內(nèi)容透出這個策略，讓消費者明白為什么這些應(yīng)用是“好”的。

不足之處當(dāng)然也有。首先整個頁面延續(xù)了舊版大量使用“左右橫滑”的設(shè)計，在開拓頁面空間的同時帶來了可見性差、效率低等問題。另外和今天 Tab 類似，游戲/App 里也存在了同種信息多種表達的情況。

如下圖所示，同樣是應(yīng)用介紹，卻采用了三種大感覺一致但細(xì)節(jié)又不同的設(shè)計。

強調(diào)內(nèi)容的詳情頁

App 詳情頁在舊版中，主要承擔(dān)了展示應(yīng)用自身信息的作用：截圖、介紹、更新日志等，即便是用戶評價也放在二級頁面。在新版中，首先對頁面布局做了較大改動，把評分、排行、年齡分級放在了較優(yōu)先的位置。

順應(yīng)多平臺特性，該應(yīng)用如果也有 iPad、TV、Watch 版本，可以在下拉項中查看他們各自的截圖。

一個小問題是，查看其他平臺截圖的時候會一次性在縱向全部展開，導(dǎo)致頁面變的很長，下面的開發(fā)者、評價等內(nèi)容就更遠(yuǎn)了。考慮到用戶可能只要查看某一個額外平臺，如果采用橫向分 Tab 來展示，效率可能更高一些：

舊版，頁面下滑的時候會有一整個大區(qū)塊停留在頂部，非常遮擋視線?，F(xiàn)在新版把頭部做小，既保證了隨時隨地可以下載應(yīng)用，也保證了下面內(nèi)容的透出。

更加突出的用戶評價

評價內(nèi)容被做得更大更突出，畢竟這已經(jīng)成為用戶了解應(yīng)用的一個絕佳渠道。不過頁面上這個“輕點評分”的擺放有點困惑，到底是對應(yīng)用評分還是對評價評分？雖然花點成本之后能理解是對應(yīng)用評分，但放在這個位置非常容易誤解以為和下面的評價卡片是一體的信息。

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

此外，進入評價列表后頭部 Bar 就不見了，其實并不方便幫助用戶隨時隨地進行決策，所以我把它給加了回去：

頁面最底部，是一個分流區(qū)塊，有點類似國內(nèi)電商 App 的猜你喜歡，對于瀏覽到最后但還沒有決策流量來說，這是一個很好的出口。但還是老問題，左右橫滑效率太低，既然已經(jīng)到了底部，縱向直接多擺放幾個又有什么問題呢？或者至少，可以和首頁的那些應(yīng)用 List 一樣，每一滑多呈現(xiàn)一些應(yīng)用。

小結(jié)：

1.?內(nèi)容化分發(fā)是整個市場的大趨勢，中國算是這塊的先驅(qū)，各大電商網(wǎng)站一兩年前就已經(jīng)開始了這部分嘗試：直播、內(nèi)容號、達人推薦等等。百度、騰訊等應(yīng)用市場也很早就開始了“應(yīng)用+”的轉(zhuǎn)型。不過，得益于 iOS 的封閉系統(tǒng)和高質(zhì)量應(yīng)用，現(xiàn)在的轉(zhuǎn)型雖然晚，但還是有機會做好做精。

2.?“左右橫滑”一定要慎用，追求高逼格的下場就是用戶根本不去使用這個組件；

3.?對應(yīng)市場型應(yīng)用來說，“效率”是一個非常重要的目標(biāo)。在合理的范疇內(nèi)，盡可能在少的屏幕內(nèi)透出多的內(nèi)容、商品、應(yīng)用，是節(jié)省用戶的時間。一味追求簡潔，有時得不償失。

4.?信息結(jié)構(gòu)一致性非常重要。以前我也糾結(jié)過是“用不同的形式承載不同的內(nèi)容”，還是“用相同的形式承載不同的內(nèi)容”，事實上，我們要讓用戶關(guān)注信息本身，而不是外在。所以，在設(shè)計時，盡可能統(tǒng)一結(jié)構(gòu)，可以大大降低用戶理解成本。

歡迎關(guān)注作者的微信公眾號：

「這2篇好文幫你從iOS 10 學(xué)習(xí)設(shè)計」

1. 《從iOS 10設(shè)計指南變化看設(shè)計的新趨勢》
2. 《熱門趨勢！從IOS 10 的交互設(shè)計中學(xué)到的3個設(shè)計啟示》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com