編輯導(dǎo)語(yǔ)：若想對(duì)某款產(chǎn)品進(jìn)行改版設(shè)計(jì)，則需要對(duì)現(xiàn)有產(chǎn)品的功能進(jìn)行了解，并洞察用戶使用產(chǎn)品的相應(yīng)需求，進(jìn)而找準(zhǔn)設(shè)計(jì)改版的注意要點(diǎn)和事項(xiàng)。本篇文章里，作者結(jié)合迪士尼APP進(jìn)行了一次產(chǎn)品架構(gòu)層和交互層的優(yōu)化改版，不妨來(lái)看一下，也許會(huì)對(duì)你有所啟發(fā)。

很多小伙伴想知道如果不是真實(shí)工作的項(xiàng)目怎么去做改版練習(xí)，今天就教大家一些簡(jiǎn)單的思路，讓你們可以把這些改版設(shè)計(jì)放到作品集中。

本次教程分享會(huì)分為交互和視覺(jué)包裝2個(gè)部分，今天先來(lái)講一下如何去優(yōu)化整個(gè)產(chǎn)品架構(gòu)和交互。

其實(shí)我覺(jué)得做練習(xí)改版在某種程度上比實(shí)際項(xiàng)目要更復(fù)雜，因?yàn)榫毩?xí)改版你掙脫了束縛和沒(méi)有限制條件，你可以隨心所欲地去指定任何商業(yè)策略，拋開(kāi)技術(shù)成本和難題去設(shè)計(jì)各種你認(rèn)為可以提升用戶體驗(yàn)的方案，而如果自己缺少聚焦和控制的能力，最后方案會(huì)出現(xiàn)很多的漏洞，雖然是練習(xí)改版，但是你的設(shè)計(jì)依然還需要有說(shuō)服力。

其實(shí)改版的流程相信大家通過(guò)這幾年的耳濡目染心里有一個(gè)大致的框架，比如收集數(shù)據(jù)和資料研究產(chǎn)品的定位、用戶，然后從這個(gè)方面切入進(jìn)去先定義好大框架，或者是自己作為用戶去體驗(yàn)產(chǎn)品梳理出來(lái)各種維度的問(wèn)題去進(jìn)行優(yōu)化等等。

但是每次產(chǎn)品不同文明要選擇的策略也不同，比如讓你去改版一個(gè)音樂(lè)類產(chǎn)品，那么基本上你很難脫離一些大廠的設(shè)計(jì)框架，因?yàn)檫@類產(chǎn)品已經(jīng)很成熟，再花心思也只是為了不同而不同。

為什么選擇迪士尼這個(gè)APP去改版，類似一個(gè)品牌用在游樂(lè)園區(qū)配套的產(chǎn)品上很少見(jiàn)，這樣的產(chǎn)品屬性、功能和用戶場(chǎng)景可以很豐富，所以做起來(lái)一定會(huì)比常規(guī)的產(chǎn)品來(lái)的有意思，并且自己也是去過(guò)迪士尼使用過(guò)這個(gè)APP，特別想幫它優(yōu)化一下，再有一點(diǎn)就是好久沒(méi)出作品了順便做一下。

一、改版流程第一步：我想讓它成為什么樣子

這樣的產(chǎn)品幾乎沒(méi)有競(jìng)品，從現(xiàn)有版本我們也可以看到它就像一個(gè)電子版地圖、個(gè)人票務(wù)、增值服務(wù)工具的集合體，所以如果讓你來(lái)操手這個(gè)產(chǎn)品，你會(huì)把他變成什么樣子，是一個(gè)純工具類的？還是偏社交的？亦或者是電商屬性強(qiáng)烈的產(chǎn)品呢？

那么在這一步我們首先還是要考慮的是用戶用該產(chǎn)品到底要干什么，并不是我們把它做成什么樣用戶就一定會(huì)用，如果脫離這層理解，那么你后面的一切都很難解釋。

這次改版，我并沒(méi)有收集大量的數(shù)據(jù)，只是對(duì)少部分用過(guò)該產(chǎn)品的用戶去做了了解，并結(jié)合我個(gè)人的體驗(yàn)和經(jīng)驗(yàn)做出后續(xù)的方案。

為什么？因?yàn)閿?shù)據(jù)不太好找，而且太麻煩了，哈哈，像我這么誠(chéng)實(shí)的設(shè)計(jì)師應(yīng)該不多了。

所以，我綜合研究了一下，決定還是讓它成為一個(gè)主工具化的、附帶品牌增值的產(chǎn)品，在這個(gè)產(chǎn)品中，你可以更好地通過(guò)地圖去找到景點(diǎn)游玩、打卡，可以更方便地進(jìn)行購(gòu)票和增值服務(wù)購(gòu)買，也可以在產(chǎn)品中找到喜歡的迪士尼相關(guān)商品，所以工具屬性占60%，其余屬性占40%。

使用這個(gè)APP的用戶一般會(huì)有幾種場(chǎng)景：

1. 還未購(gòu)票但是想要了解迪士尼相關(guān)情況的用戶；
2. 已購(gòu)票正在在園區(qū)游玩的用戶；
3. 已經(jīng)購(gòu)票等待開(kāi)園的用戶；
4. 游玩結(jié)束的用戶。

這就好像我們?nèi)ナ褂脤?dǎo)航工具、共享類產(chǎn)品一樣，大部分場(chǎng)景都會(huì)集中在使用前、中，而使用后幾乎不會(huì)再打開(kāi)，而我們也沒(méi)有必要強(qiáng)行讓用戶在游玩后還頻繁地引導(dǎo)他進(jìn)入。

那么有同學(xué)要說(shuō)那為啥要做商城，站在品牌的角度，迪士尼的收入大部分來(lái)源于品牌衍生的周邊，包括園區(qū)服務(wù)，所以官方的商城可以在用戶在游玩前后都可以進(jìn)行服務(wù)，比如酒店預(yù)訂、美食餐飲、積分兌換等等。

所以如果我是迪士尼老板，我會(huì)希望產(chǎn)品能幫助用戶更快地體驗(yàn)到他們想要體驗(yàn)的項(xiàng)目，同時(shí)他們可以在APP中解決他們隨時(shí)隨地的需求，并且希望用戶更喜歡迪士尼園區(qū)的體驗(yàn)，分享給更多的朋友。

二、改版流程第二步：理解現(xiàn)有的功能、需求和場(chǎng)景

對(duì)于現(xiàn)有的規(guī)則和必要的功能一定是不可少的，所以接下來(lái)我們就來(lái)分析一下，目前產(chǎn)品中想要做但是沒(méi)有做好的點(diǎn)。

1. 首頁(yè)

1）首先映入眼簾的是一大張地圖，這倒沒(méi)什么問(wèn)題，可以滿足用戶在園內(nèi)瀏覽地點(diǎn)的需求，但問(wèn)題是這張地圖還沒(méi)有線下發(fā)的紙質(zhì)地圖好用，究其原因是沒(méi)有定位和導(dǎo)航。

當(dāng)時(shí)我在找景點(diǎn)的時(shí)候也是要花很長(zhǎng)時(shí)間先搞清楚自己在哪里，然后才能知道要去哪里，如果只有景點(diǎn)的坐標(biāo)是不夠的。

2）這個(gè)產(chǎn)品的形態(tài)和其他很多產(chǎn)品不同，現(xiàn)版本迪士尼將個(gè)人中心、尊享服務(wù)、購(gòu)票等所有相關(guān)的功能都聚合到了頁(yè)面底部的頭像中，這對(duì)第一次使用產(chǎn)品的用戶不太友好，從來(lái)沒(méi)有接觸過(guò)這樣形態(tài)的首頁(yè)突然間有點(diǎn)不會(huì)用了，所以如果用戶想進(jìn)行其他的任務(wù)就會(huì)變的很繁瑣。

不管什么類型的產(chǎn)品，首頁(yè)的目的還是要讓大部分用戶能夠快速認(rèn)知這個(gè)產(chǎn)品是干什么的，能幫助自己解決什么問(wèn)題，目前首頁(yè)只能告訴用這是個(gè)可以看迪士尼電子地圖的軟件。

3）首頁(yè)上方是不同類型定位的切換，但好像有點(diǎn)分類不清晰，很難找。購(gòu)物車在這里和用戶場(chǎng)景更不吻合。

2. 個(gè)人中心

個(gè)人中心堆積了很多功能，大致可以分類為：購(gòu)票、購(gòu)買增值服務(wù)、關(guān)聯(lián)門票（行程：預(yù)約等候卡）、攻略、訂單、通知，用戶已進(jìn)入該頁(yè)面其實(shí)很難第一時(shí)間找到想要的信息，并且有些文案也很難理解。

相信很多人第一次去迪士尼有幾個(gè)關(guān)鍵詞會(huì)特別不理解，什么是預(yù)約等候卡，之前叫fp快速通道卡，什么是尊享卡、什么是禮賓服務(wù)、什么是導(dǎo)覽服務(wù)、什么是早享卡，被一堆的卡和服務(wù)弄的眼花繚亂，說(shuō)到底其實(shí)就是去玩的人太多了，誰(shuí)有錢誰(shuí)可以體驗(yàn)得更好。

所以我們務(wù)必要先搞清楚這些花里胡哨的增值服務(wù)，這樣才能讓用戶快速?zèng)Q策，那我這里也順便幫大家理一下：

1）預(yù)約等候卡：意思就是在固定的幾個(gè)熱門項(xiàng)目，在高峰期的時(shí)候，需要通過(guò)搶預(yù)約等候卡才有【排隊(duì)的資格】，并非所有時(shí)段所有項(xiàng)目都需要。

2）尊享卡和禮賓服務(wù)：這倆就相當(dāng)于氪金快速排隊(duì)進(jìn)入，禮賓服務(wù)的套餐包含的服務(wù)更多，除了快速入園進(jìn)入項(xiàng)目外，還有預(yù)留觀賞區(qū)、幫助取餐等。

但是這倆服務(wù)的排隊(duì)其實(shí)還是要排一會(huì)的，因?yàn)橐灿泻芏嗳速I，比如原來(lái)隊(duì)伍要排一小時(shí)，現(xiàn)在只需要排十幾分鐘或更快。

3）導(dǎo)覽服務(wù)：嗑大金的插隊(duì)服務(wù)，更高級(jí)別的插隊(duì)、秒排、先挑座位等等，大家可以去官網(wǎng)看下介紹，這里就不多說(shuō)了，有錢真好。

4）早享卡：比官方開(kāi)園時(shí)間提前1小時(shí)進(jìn)入，買的人也不少你懂的。不氪金只能靠肝，要么手速快能搶到等候卡，要么就氪金減少排隊(duì)時(shí)間，總之，這么多卡都是需要你付出成本的。

但是對(duì)于新用戶來(lái)說(shuō)其實(shí)很難理解這些什么卡和服務(wù)，所以有時(shí)候這些命名真的可以改一改，例如免排隊(duì)卡、快速排隊(duì)卡、提前入園卡、預(yù)約排隊(duì)卡什么的，哈哈。

但是別人還想要里面多增加一些套餐服務(wù)，我們就按他的來(lái)吧。好了，說(shuō)到這里，我們就要把個(gè)人中心所有內(nèi)容都拆出來(lái)進(jìn)行重新分類組合，讓功能脈絡(luò)更清晰。

根據(jù)對(duì)用戶場(chǎng)景的分析還有最初對(duì)產(chǎn)品的定位，我打算將產(chǎn)品功能劃分為4塊：以下原型非常粗糙，請(qǐng)各位帥哥美女不要扣我細(xì)節(jié)，謝謝。

3. 產(chǎn)品功能原型

1）首頁(yè)電子地圖

用戶可以更快捷地找到自己想去的地方新增個(gè)人定位功能，將個(gè)人中心弱化收到左上角，同時(shí)在頂部做掃一掃和地圖/列表的切換這兩個(gè)功能，前者是為了配合園區(qū)內(nèi)的掃碼活動(dòng)、綁定門票的高頻操作，后者是為了滿足用戶更快速地瀏覽景點(diǎn)項(xiàng)目。

也可以在頁(yè)面下方進(jìn)行更細(xì)化的搜索，這里將所有地點(diǎn)的類型從原來(lái)的11個(gè)重新整合劃分為6個(gè)，同時(shí)把原來(lái)在首頁(yè)的篩選功能集合到了搜索中，更加一體化，契合場(chǎng)景。那么這個(gè)首頁(yè)就可以滿足用戶想要快速定位尋找的需求。

點(diǎn)擊到某一個(gè)景點(diǎn)后會(huì)進(jìn)入景點(diǎn)的詳細(xì)介紹，在這個(gè)界面中有很多場(chǎng)景：例如該景點(diǎn)的一些開(kāi)放時(shí)間、人群限制、什么類型的項(xiàng)目、怎么去、當(dāng)前要排多久等等，那么從用戶需求的頻率進(jìn)行優(yōu)先級(jí)排一下，大致就是以下的設(shè)計(jì)。

其實(shí)我個(gè)人認(rèn)為現(xiàn)在迪士尼接待的游客越來(lái)越多，商業(yè)化氛圍太強(qiáng)，沉浸感其實(shí)做得不夠。故事要循序漸進(jìn)地講，這樣才引人入勝，而不是一上來(lái)就是快來(lái)玩吧，但是隊(duì)伍很長(zhǎng)，你可以花錢，玩完了就快走這樣的套路；人多雖然不假，但是你可以限流啊，如果品質(zhì)做得足夠好，游客是愿意付費(fèi)的。

所在詳情里我弱化了項(xiàng)目相關(guān)的信息，多放了一個(gè)故事用來(lái)介紹該景點(diǎn)，增加一些代入感，也可以讓很多不知道這個(gè)場(chǎng)景是什么故事的游客了解這個(gè)故事到底講了什么。

詳情頁(yè)還考慮到的是很多游客還是對(duì)預(yù)約等候和尊享服務(wù)是什么意思，所以尊享服務(wù)透出進(jìn)行橫向滑動(dòng)展示，可以查看尊享服務(wù)說(shuō)明，同時(shí)底部也給業(yè)務(wù)向的高亮入口，直接突出服務(wù)的利益點(diǎn)，預(yù)約等候卡會(huì)在需要開(kāi)放的時(shí)候才可以點(diǎn)擊，展示當(dāng)前可預(yù)約的時(shí)間段。

點(diǎn)擊尊享服務(wù)后可選擇自己想要游玩的冒險(xiǎn)演出，因?yàn)闃?lè)園規(guī)則單次只能選擇一場(chǎng)活動(dòng)進(jìn)行參與，用戶選擇完后會(huì)彈出確認(rèn)，確認(rèn)后則會(huì)顯示成功界面，在這個(gè)界面中比較重要的信息是預(yù)約碼、下次可搶時(shí)間、適用時(shí)間、添加游玩組成員等，同時(shí)也可以取消預(yù)約，搶完等候卡后需要再做一個(gè)閉環(huán)。

這里不需要給返回按鈕，只需要告訴用戶這張卡如果退出后還能再哪里打開(kāi)就可以了，所以底部會(huì)讓用戶進(jìn)入“我的預(yù)約卡”，也就是行程界面。

如果用戶不想去我的預(yù)約卡界面，也可以點(diǎn)擊右上角的縮小，將頁(yè)面縮回到首頁(yè)的懸浮按鈕，如果不想顯示則可以長(zhǎng)按進(jìn)行刪除，在即將開(kāi)始排隊(duì)前半小時(shí)會(huì)在首頁(yè)給用戶一個(gè)小氣泡進(jìn)行提示。

2）行程/打卡

行程/打卡板塊做了不同的狀態(tài)，第一個(gè)是用戶未關(guān)聯(lián)或購(gòu)買門票，那么顯示的就是可以購(gòu)買的門票和年卡套餐等。

如果已經(jīng)購(gòu)買門票的也可以直接關(guān)聯(lián)門票，關(guān)聯(lián)后該頁(yè)面會(huì)展示為相關(guān)的增值服務(wù)入口，就是剛才說(shuō)的尊享卡一類的，并且綁票后會(huì)顯示添加游玩組成員，將一起來(lái)的玩伴添加進(jìn)來(lái)，以便后續(xù)搶預(yù)約等候卡的時(shí)候快速添加同伴。

當(dāng)關(guān)聯(lián)完門票后，可能是這樣兩種場(chǎng)景：

1. 關(guān)聯(lián)門票但還未入園；
2. 在園內(nèi)關(guān)聯(lián)門票準(zhǔn)備開(kāi)始玩。

所以不管哪種場(chǎng)景，都需要相應(yīng)的攻略進(jìn)行輔助，可能前者會(huì)更需要攻略，畢竟入園之后的用戶都是提前做好準(zhǔn)備的。

那么入園的用戶在這里還有哪些需求呢？

我想到了打卡，其實(shí)迪士尼是很多小姐姐小朋友喜歡來(lái)玩的，男生比較喜歡去環(huán)球影城（到時(shí)候北京見(jiàn)）所以女孩子和小孩子喜歡干什么？當(dāng)然是拍美美的照片了，那么這里剛好可以和迪士尼樂(lè)拍通服務(wù)進(jìn)行一個(gè)關(guān)聯(lián)，用戶可以在打卡板塊上傳自己拍攝的照片和定位，也可以預(yù)約迪士尼專業(yè)攝影幫你拍照。

但是我并不想做一個(gè)很復(fù)雜的社交板塊，因?yàn)橐婚_(kāi)始就說(shuō)了，它60%是工具，所以這里只提供上傳照片、文字編輯還有點(diǎn)贊、導(dǎo)航的功能、查看他人打卡的功能，而不會(huì)再延伸去做評(píng)論、私信等功能。

當(dāng)然如果說(shuō)到用戶動(dòng)機(jī)的話，也可以關(guān)聯(lián)到積分，迪士尼其實(shí)可以做積分系統(tǒng)，比如年卡、購(gòu)物、各種消費(fèi)都有積分累計(jì)，最后換商品、年卡等活動(dòng)都是不錯(cuò)的。

打卡板塊做了兩個(gè)不同的原型，區(qū)別在于一種是宮格形式的分類入口，另一種是tab形式的切換入口，這倆入口的區(qū)別在于你是否需要讓用戶深度瀏覽。那么前面說(shuō)了，要弱化，于是tab切換的泛瀏覽會(huì)更適合當(dāng)下的定位。

另外行程板塊還有開(kāi)園時(shí)間和各項(xiàng)主題演出時(shí)間的入口，方便在游玩的用戶能有所準(zhǔn)備，原來(lái)的時(shí)間功能是集合在了個(gè)人中心。

但是這個(gè)功能還是和行程比較密切的，所以放在行程界面。雖然步驟可以列得很簡(jiǎn)單，但是設(shè)計(jì)的時(shí)候還是需要考慮很多方面的，比如門票和年卡要分開(kāi)嗎？商城里也可以買票這里還需要提供嗎？在未關(guān)聯(lián)門票時(shí)需不需要提供增值服務(wù)選項(xiàng)？打卡詳情要做到什么程度等等。

3）商城

商城其實(shí)比較好理解，可以賣很多東西，無(wú)非就是把票、迪士尼商品、餐飲、酒店等一體化了，在原有的產(chǎn)品里，酒店可以預(yù)訂，餐飲只是提供介紹和定位，那我們既然做改版就不用管那么多了，默認(rèn)可以在線上直接點(diǎn)餐取餐就可以了。

4）個(gè)人中心

個(gè)人中心在工具類產(chǎn)品中是比較弱的，弱化個(gè)人中心也是側(cè)面提高其他信息的分發(fā)效率，因?yàn)檫@個(gè)產(chǎn)品還是主打用戶在園內(nèi)活動(dòng)時(shí)的使用體驗(yàn)，所以個(gè)人中心在園內(nèi)游玩時(shí)的打開(kāi)頻次不會(huì)很高，主要還是首頁(yè)和行程。所以個(gè)人中心我打算放在導(dǎo)航欄，讓個(gè)人中心更輕量化，讓用戶聚焦在“玩”這件事上。

三、做個(gè)小總結(jié)

我們回顧一下思路

1. 確定好產(chǎn)品的定位、目標(biāo)還有用戶需求

這步其實(shí)是很重要的，很多同學(xué)做改版和設(shè)計(jì)往往就是最初的定位和目標(biāo)在設(shè)計(jì)流程中被忽略了，譬如你的目標(biāo)是提高用戶綁卡效率，那么就要針對(duì)綁卡流程進(jìn)行假設(shè)、測(cè)試、優(yōu)化，所以不管后面的個(gè)人中心也好，還是首頁(yè)定位的設(shè)計(jì)、范圍層的功能劃分也好都是圍繞產(chǎn)品的工具化，提高用戶在游玩時(shí)候的效率而設(shè)計(jì)。

2. 列舉更多的場(chǎng)景完善功能

因?yàn)槭亲约焊陌?，那么更?cè)重用戶體驗(yàn)弱化業(yè)務(wù)需求，在功能上不追求過(guò)多的提升業(yè)務(wù)價(jià)值，而是讓用戶體驗(yàn)更好。

所以為了挖掘用戶體驗(yàn)，不得不提到用戶的場(chǎng)景分析，場(chǎng)景分析大家也可以去看u一點(diǎn)料2中的分析，多考慮下一個(gè)場(chǎng)景如何在當(dāng)前場(chǎng)景進(jìn)行引導(dǎo)。

3. 思考邏輯流程和交互方式

當(dāng)你確定好該場(chǎng)景需要什么功能后，下一步就要考慮這個(gè)功能要如何展開(kāi)，例如打卡板塊如果想做的輕量化用一個(gè)彈窗形式展示圖文，那要如何進(jìn)行相應(yīng)的其他操作。

比如分享會(huì)喚起的彈窗如何和當(dāng)前彈窗進(jìn)行兼容，在搜索、篩選、不同類型設(shè)施之間如何切換等等，我們需要在做原型的時(shí)候考慮好，否則到視覺(jué)階段再考慮很可能會(huì)推翻好多個(gè)界面。

還有比如搜索時(shí)不同設(shè)施服務(wù)的分類搜索，是做成圖標(biāo)形式的入口（類似高德），還是做成tab切換。

這里考慮的是做成tab，因?yàn)橄窀叩履菢拥膶m格入口是因?yàn)橛写罅克阉鹘Y(jié)果，比如美食，所以他需要有很多的篩選標(biāo)簽，而迪士尼不同，他的美食商店并沒(méi)有那么多，篩選條件也很少，所以用tab切換更方便快捷。

而且既然這里有其他的分類，最好也做成統(tǒng)一的形式，最終還是考慮用tab更符合產(chǎn)品和用戶需求，雖然有個(gè)圖標(biāo)還挺好看的。

4. 繪制原型

這一步要思考的就是什么元素應(yīng)該在什么位置，在實(shí)際工作中，交互設(shè)計(jì)其實(shí)也不需要在這個(gè)步驟中花大量時(shí)間，只需要把信息層級(jí)體現(xiàn)清楚就好。

但畢竟這玩意兒是我們自己一個(gè)人做，那么原型就先大致考慮好元素位置吧（做不好看文章里展示也太丑了）。

好了，那么今天交互部分的分享就先到這里了，接下去我會(huì)開(kāi)始視覺(jué)部分，這是個(gè)難題，因?yàn)檫@樣一個(gè)產(chǎn)品好看的圖片不多，很多概念稿之所以看起來(lái)好看70%是因?yàn)閳D片好看，因?yàn)榘媸讲季忠簿湍菐追N，換來(lái)?yè)Q去都差不多，所以比較擔(dān)心沒(méi)有高級(jí)的圖片，如果實(shí)在找不到高級(jí)的圖片我也認(rèn)了！

期待最后的成果吧～剩下可能還會(huì)更新UI篇和包裝篇，這三篇盡量在后面1個(gè)月內(nèi)更新完成。

如果有深度體驗(yàn)過(guò)的小伙伴歡迎下方留言跟我交流喔，因?yàn)檫€有更多用戶場(chǎng)景沒(méi)有挖掘到，如果你是游客你還有其他的需求嗎？

＃專欄作家＃

應(yīng)駿，人人都是產(chǎn)品經(jīng)理專欄作家，公眾號(hào)：應(yīng)謀鬼計(jì)（shejishiyj）

本文由 @應(yīng)駿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議