花了五個小時！完成新版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. 信息結構一致性非常重要。以前我也糾結過是“用不同的形式承載不同的內容”，還是“用相同的形式承載不同的內容”，事實上，我們要讓用戶關注信息本身，而不是外在。所以，在設計時，儘可能統一結構，可以大大降低用戶理解成本。

------

歡迎關注作者的微信公眾號：王鎮雷

商業轉載請聯繫作者獲得授權，非商業轉載請註明出處！

關注優秀網頁設計官方微信號：youshege；和百萬設計師一起來學習設計吧