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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一級(jí)導(dǎo)航變化

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

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

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

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

純信息流的今天 Tab

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

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

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

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

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

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

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

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

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

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

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

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

更有層次感的游戲、App Tab

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

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

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

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

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

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

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

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

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

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

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

更加突出的用戶評(píng)價(jià)

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

稍作改動(dòng)之后就清晰很多：

此外，進(jìn)入評(píng)價(jià)列表后頭部 Bar 就不見了，其實(shí)并不方便幫助用戶隨時(shí)隨地進(jìn)行決策，所以我把它給加了回去：

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

小結(jié)：

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

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

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

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

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

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

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

【優(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è)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

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