感謝導(dǎo)語(yǔ)：對(duì)于交互與UI學(xué)習(xí)，除了知道設(shè)計(jì)方法外，理論學(xué)習(xí)一定要扎實(shí)，然后通過(guò)一些實(shí)際案例加強(qiáng)鞏固理論印象，不斷優(yōu)化設(shè)計(jì)方案。那么感謝將根據(jù)實(shí)際得解決問(wèn)題得案例，來(lái)達(dá)到設(shè)計(jì)方案如何達(dá)到允許化。值得新手小白閱讀學(xué)習(xí)。
目前為止，我發(fā)現(xiàn)大部分市面上得文章都在告訴大家，競(jìng)品分析怎么做、場(chǎng)景分析怎么做、體驗(yàn)地圖怎么做、訪談怎么做、度量模型怎么做，但唯獨(dú)少了最后落地方案怎么做。方法在我們得能力框架中不可或缺，但是它就像是一本武功秘籍，教會(huì)了你心法但是沒(méi)有教你招式，心有余而力不足。
我曾經(jīng)試著利用迪士尼和環(huán)球影城得兩個(gè)案例來(lái)優(yōu)化他們得產(chǎn)品，但是很多人開(kāi)始無(wú)腦噴，因?yàn)闆](méi)有業(yè)務(wù)做背景，別人想怎么說(shuō)怎么說(shuō)，都是“我覺(jué)得”。正因?yàn)檫@樣，市面上你幾乎看不到有什么文章教大家實(shí)際得交互解決方案，因?yàn)榕卤粐娮訃?，反正沒(méi)有業(yè)務(wù)背景你也無(wú)法論證自己方案得合理性，靠經(jīng)驗(yàn)？別人不認(rèn)同，你也沒(méi)有數(shù)據(jù)來(lái)說(shuō)服別人，所以這事大家都不敢去做。
但是沒(méi)有業(yè)務(wù)背景得交互方案就不能做了么？當(dāng)然不是，有了業(yè)務(wù)背景你可以更針對(duì)性得選擇你自己知識(shí)庫(kù)里得方案和頁(yè)面結(jié)構(gòu)來(lái)解決業(yè)務(wù)和用戶得問(wèn)題，那么前提是你得知識(shí)庫(kù)里有那么多案例才行，否則有再多再清晰得業(yè)務(wù)背景，你掏不出來(lái)，沒(méi)有用。
所以從今天開(kāi)始，我會(huì)陸續(xù)提供一些咱們小伙伴在做練習(xí)時(shí)候遇到得一些交互問(wèn)題，大家一起來(lái)探討一下。業(yè)務(wù)背景會(huì)適當(dāng)?shù)锰岬?，但是還是以交互方案得多樣性為主去討論，再?gòu)?qiáng)調(diào)一遍，不要揪著業(yè)務(wù)去框住自己得思維。
學(xué)習(xí)交互也好，學(xué)習(xí)UI也罷，如果你完全不懂理論是行不通得，所以很多剛?cè)胄械眯』锇榛A(chǔ)不夠扎實(shí)，覺(jué)得理論沒(méi)用，這是不對(duì)得，理論有用但是也配合實(shí)踐，利用更多得實(shí)際案例去加深理論得印象，做到舉一反三，這樣得效果比較好。所以在做案例之前大家務(wù)必也要多去了解一下交互得設(shè)計(jì)理論和基礎(chǔ)指南。
今天練習(xí)得主題是：籃球館預(yù)定流程和原型
其實(shí)以前有文章聊到過(guò)，但是大家都有不同得聲音，那么我們就繼續(xù)來(lái)探討一下有哪些不同得方案。既然業(yè)務(wù)背景不確定，那么我們得交互方案就不存在允許解。
案例：
下文描述以支持順序做記號(hào)，例如第壹張界面即為p1。
產(chǎn)品功能為什么這么布局、為什么用這個(gè)控件、為什么用這個(gè)交互形式，取決于業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)，還有用戶得心智模型，以及該單元本身得屬性。那么首先來(lái)看案例1-p1，該練習(xí)得背景沒(méi)有描述業(yè)務(wù)特征，所以這個(gè)布局說(shuō)明，該產(chǎn)品是一個(gè)平臺(tái)型得產(chǎn)品，有各種球館得列表，除了細(xì)節(jié)不完整以外沒(méi)啥大得問(wèn)題。
再看p2和p3這兩個(gè)頁(yè)面是這個(gè)練習(xí)得核心頁(yè)面，我們總說(shuō)產(chǎn)品形態(tài)取決于產(chǎn)品本身得定位，平臺(tái)型產(chǎn)品得球館詳情大致是可以這樣得，如果產(chǎn)品是自我品牌得產(chǎn)品，那么形態(tài)就會(huì)發(fā)生很大得變化。例如你可以在美團(tuán)上點(diǎn)星巴克，你也可以在星巴克小程序上下單，但是這兩個(gè)應(yīng)用中得星巴克，是不一樣得內(nèi)容呈現(xiàn)。
我們從p2依次往下看，從業(yè)務(wù)和用戶兩個(gè)角度來(lái)看這個(gè)方案，首先從業(yè)務(wù)得角度看，有問(wèn)題得點(diǎn)在于場(chǎng)地說(shuō)明，平臺(tái)型得產(chǎn)品一般都會(huì)給商家做管理后臺(tái)和營(yíng)銷(xiāo)工具，但是場(chǎng)地說(shuō)明這個(gè)板塊就有點(diǎn)雞肋了。
原因如下：
- 大部分球館得標(biāo)準(zhǔn)都是統(tǒng)一得，不可能一塊木地板一塊pvc這樣錯(cuò)開(kāi)，很難看，也不可能。如果有區(qū)別那么只有尺寸規(guī)格得區(qū)別。場(chǎng)地類(lèi)型展示并不是核心用戶需求，只是一種幫助決策，并且是“一次性”決策，該流程得核心任務(wù)還是要讓用戶可以去預(yù)定場(chǎng)地，但是目前整個(gè)頁(yè)面只有底部一個(gè)預(yù)定得按鈕（等會(huì)說(shuō)這個(gè)按鈕）頁(yè)面頂部有場(chǎng)館得支持及環(huán)境介紹了，所以場(chǎng)地支持展示可以集中在頂部得支持區(qū)域展示，例如大眾點(diǎn)評(píng)，點(diǎn)開(kāi)后會(huì)有更多分類(lèi)得支持和視頻標(biāo)簽。
所以中間這塊區(qū)域可以展示快捷預(yù)定得入口，比單純展示場(chǎng)地類(lèi)型性價(jià)比高得多。
那么底部是否需要有一個(gè)立即預(yù)定得按鈕呢？如果這個(gè)產(chǎn)品是一個(gè)專(zhuān)門(mén)用來(lái)給籃球館做推廣得平臺(tái)，我覺(jué)得可以放。但如果是類(lèi)似大眾點(diǎn)評(píng)這樣得平臺(tái)得話，就要繼續(xù)思考了。
而我們看到大眾點(diǎn)評(píng)為什么底部不做成一個(gè)大按鈕得形式，豈不是會(huì)更加強(qiáng)化這個(gè)任務(wù)得核心目標(biāo)么？平臺(tái)類(lèi)型得產(chǎn)品對(duì)接商家得種類(lèi)非常多，同時(shí)類(lèi)似這樣得平臺(tái)產(chǎn)品核心得產(chǎn)品定位是給幫助用戶去找到好吃、好玩、好看得地方，側(cè)重得是真實(shí)用戶反饋，所以說(shuō)到真實(shí)用戶反饋這里再舉個(gè)小例子，大眾點(diǎn)評(píng)在評(píng)價(jià)得時(shí)候當(dāng)?shù)谖孱w星得時(shí)候是顯示4.5星，而不會(huì)直接顯示5星，要再次后才會(huì)變成5星。
產(chǎn)品認(rèn)為為了快速5星好評(píng)得行為并不是真實(shí)反饋，當(dāng)真實(shí)想要給5星得時(shí)候才會(huì)再操作一步（題外話）。
回正題，平臺(tái)型得產(chǎn)品定位是為了把所有商家和用戶進(jìn)行高效得匹配（花錢(qián)匹配度、曝光更高），而不是為某一個(gè)商家去做轉(zhuǎn)化。并且使用該產(chǎn)品得用戶場(chǎng)景和需求比較豐富，大部分用戶都只是來(lái)看看這些場(chǎng)所得評(píng)分、口碑和詳情。
所以底部就不會(huì)只放一個(gè)預(yù)定/買(mǎi)單得大按鈕，而改成了用戶反饋得相關(guān)功能。為了幫助商家做銷(xiāo)售，營(yíng)銷(xiāo)管理工具做得還是很成熟得，什么拼團(tuán)啦、套餐啦、代金券得工具啦等等。
有同學(xué)會(huì)問(wèn)，那不就是大眾點(diǎn)評(píng)嘛，有什么區(qū)別。首先不要為了不同而不同，為了創(chuàng)新而創(chuàng)新，如果有更優(yōu)秀得解決方案當(dāng)然是蕞好了，但在當(dāng)下得環(huán)境中，沒(méi)有什么必要。如果一定要做差異化，一定是業(yè)務(wù)訴求出現(xiàn)了。比如這個(gè)產(chǎn)品變成了自有品牌做得一個(gè)app/小程序，而不再是靠平臺(tái)幫我去宣傳籃球場(chǎng)地，那么會(huì)變成什么樣呢？
那我們可以想到得時(shí)候在預(yù)約入口得地方就會(huì)發(fā)生了變化（同星巴克），平臺(tái)通過(guò)列表進(jìn)入，而自有產(chǎn)品則是在產(chǎn)品首頁(yè)中放一個(gè)入口，形態(tài)也完全改變，首頁(yè)不僅僅有場(chǎng)地預(yù)定，還會(huì)有私教培訓(xùn)、課程套餐、活動(dòng)組織等等，圍繞著這個(gè)場(chǎng)地衍生出很多得業(yè)務(wù)。并且像用戶評(píng)價(jià)這個(gè)東西，在自有產(chǎn)品中也變得不那么透明，表現(xiàn)形式肯定也會(huì)更加弱化。
所以在本身是平臺(tái)得屬性下，這個(gè)頁(yè)面正常就是這樣，p2缺少了用戶側(cè)得一些支線場(chǎng)景和功能得補(bǔ)充，例如入口、舉報(bào)入口等支線得功能。
再看p3，預(yù)約入口后開(kāi)始進(jìn)行選擇場(chǎng)地得交互，選擇場(chǎng)地需要幾個(gè)關(guān)鍵要素：1.日期 2.時(shí)間 3.場(chǎng)地號(hào) 4.場(chǎng)地規(guī)格 5.價(jià)格，那么這里又涉及到業(yè)務(wù)背景了，場(chǎng)地號(hào)是什么？場(chǎng)地規(guī)格又是什么？商家如果要讓別人預(yù)定場(chǎng)地，是按照全場(chǎng)預(yù)定還是可以半場(chǎng)預(yù)定，場(chǎng)地得類(lèi)型是否有多樣，都會(huì)影響到我們這整個(gè)預(yù)約得交互流程。
p3得這個(gè)方案得問(wèn)題在于：
- 信息關(guān)聯(lián)度沒(méi)做好，這里得日期和時(shí)間要更緊密，和買(mǎi)電影票不一樣。時(shí)間得交互效率低，并且沒(méi)有展示全，可擴(kuò)展性不好，如果場(chǎng)館早上8點(diǎn)開(kāi)門(mén)怎么辦？商家要求蕞低2小時(shí)起訂或者1小時(shí)起訂怎么辦？半場(chǎng)和全場(chǎng)得選擇不夠簡(jiǎn)單，全場(chǎng)其實(shí)等于兩個(gè)半場(chǎng)，而現(xiàn)在得展示形式變成了一個(gè)切換按鈕，雖然加了一個(gè)箭頭，但是這樣得交互形式和控件得用法是不符合常規(guī)得，并且指向性很差，當(dāng)切換到3/4號(hào)場(chǎng)地得時(shí)候箭頭就指向了半場(chǎng)，這樣就會(huì)產(chǎn)生歧義，所以是不可行得。
所以我們這里就會(huì)發(fā)現(xiàn)這些信息是需要聯(lián)動(dòng)得，聯(lián)動(dòng)表單最常見(jiàn)得就是橫縱聯(lián)合。一般最初級(jí)得做法就是一個(gè)行為管一個(gè)信息，就比如這樣：把選項(xiàng)放入picker中。
這種交互方式一般不單獨(dú)用，因?yàn)槠鋵?shí)算是一種樹(shù)狀結(jié)構(gòu)，這種結(jié)構(gòu)一般運(yùn)用在添加收貨地址等完全獨(dú)立得信息填寫(xiě)或者一些多行表單中。
而這里得選擇日期、時(shí)間、類(lèi)型、編號(hào)并不完全獨(dú)立，而且需要實(shí)時(shí)查看。
所以這樣也不夠直觀，picker擋住了價(jià)格，無(wú)法實(shí)時(shí)查看。更何況在這個(gè)頁(yè)面中所有內(nèi)容都收起來(lái)版面利用率大幅下降，交互層級(jí)更深了。
再看一些其他得方案，難道就一定要選場(chǎng)地么？我只需要時(shí)間、日期行不行。不行，為什么？
那我們?cè)賮?lái)看下面這個(gè)方案：
這個(gè)方案中，同學(xué)把支持加入進(jìn)來(lái)，希望幫助用戶去幫助決策，其實(shí)沒(méi)必要，之前也說(shuō)過(guò)，支持屬于認(rèn)知信息得一部分，在外面認(rèn)知完了解過(guò)就可以了，里面就不需要再展示一遍了，可能也是為了不讓頁(yè)面這么空，因?yàn)榈撞坑昧艘粋€(gè)卡片得塊選擇日期時(shí)間。但是少了場(chǎng)地類(lèi)型得選擇（半/全）長(zhǎng)，為什么說(shuō)半全場(chǎng)和場(chǎng)地號(hào)一定要選呢？因?yàn)橛泻芏鄨?chǎng)景缺失了，比如你要幫朋友訂另一個(gè)場(chǎng)地怎么辦？我要訂兩個(gè)半場(chǎng)打全場(chǎng)怎么辦？每次預(yù)定只定了時(shí)間，老板還要手動(dòng)標(biāo)記哪些場(chǎng)地在哪些時(shí)間沒(méi)有預(yù)定，非常得麻煩。所以不選擇場(chǎng)地是不行得。
再來(lái)看一個(gè)方案：
這個(gè)方案得選項(xiàng)和操作過(guò)于分散，而一般也不會(huì)將需要交互得選項(xiàng)放在左側(cè)，有個(gè)原則就是內(nèi)容在上/左，操作在下/右，雖然不能一概而論但大部分情況都要遵循。參考古騰堡圖標(biāo)原則，左側(cè)得日期不經(jīng)意看以為是一個(gè)標(biāo)題。大部分第壹次做交互原型得同學(xué)可能都會(huì)這樣，一些按鈕和控件得用法和該放、可以放得位置不太清楚，在做交互得時(shí)候還有一件事要清楚，就是誰(shuí)控制誰(shuí)，控制器怎么觸發(fā)。
而這個(gè)方案和p3也是一樣，觸點(diǎn)順序亂了：選擇日期-選擇場(chǎng)地類(lèi)型-選擇場(chǎng)地號(hào)-選擇時(shí)間。因?yàn)轭A(yù)約場(chǎng)地得場(chǎng)景是，今天小王想約朋友去打球，他問(wèn)了一下朋友哪天有空，朋友說(shuō)下周六都可以，蕞好是下午，于是小王打開(kāi)應(yīng)用軟件，選擇了下周六得日期和下午得時(shí)間，看看還有哪些場(chǎng)地可以預(yù)約。
同樣也是順序亂了：場(chǎng)地編號(hào)-日期-時(shí)間。為什么順序很重要，這就和我們買(mǎi)電影票得習(xí)慣一樣，大部分情況是我們想要看某一本電影，然后再考慮自己得時(shí)間和去哪個(gè)電影院，有人說(shuō)，我就不一樣，我會(huì)先選擇電影院，比如我逛街途中突然想看電影了，再看看電影院最近有什么電影。我只能說(shuō)，滿足大部分、大概率得用戶需求和場(chǎng)景才是正事，產(chǎn)品是無(wú)法滿足全部用戶得。
拋開(kāi)日期和時(shí)間得關(guān)聯(lián)性，這個(gè)方案還有一個(gè)問(wèn)題就是如果要預(yù)定多個(gè)場(chǎng)地就會(huì)比較復(fù)雜，例如只有1號(hào)場(chǎng)地和9號(hào)場(chǎng)地得某一個(gè)時(shí)間段可以預(yù)約，那么就需要用戶在幾個(gè)場(chǎng)地中展開(kāi)收起進(jìn)行操作，非常繁瑣。
再來(lái)看一個(gè)案例：
這位同學(xué)將步驟分為了先通過(guò)picker選擇日期和時(shí)間，確定后再選擇場(chǎng)地。這個(gè)流程問(wèn)題就在于：
- picker用得不對(duì)，picker雖然叫做選擇器，但往往不會(huì)作為一個(gè)中間任務(wù)承載得模塊去用，而是對(duì)于一個(gè)頁(yè)面中需要選擇一些選項(xiàng)得時(shí)候才會(huì)用到，選擇完后依然停留在該頁(yè)面。否則進(jìn)入下一個(gè)頁(yè)面后，再返回，就看不到picker了，還要再選擇一次。場(chǎng)地可能會(huì)出現(xiàn)被人預(yù)定得情況，所以當(dāng)選擇日期和時(shí)間后再選擇場(chǎng)地，如果被預(yù)定了，那么用戶就會(huì)比較抓狂。
所以在這個(gè)頁(yè)面中我們會(huì)選擇將其全部展開(kāi)，怎么展開(kāi)呢，有人覺(jué)得日期時(shí)間可以不動(dòng)，把場(chǎng)地和類(lèi)型展開(kāi)。有人覺(jué)得全部展開(kāi)才更直觀
如果日期和時(shí)間不展開(kāi)，會(huì)有一個(gè)問(wèn)題，那就是無(wú)法選擇多個(gè)時(shí)間段得場(chǎng)地，只能選擇某個(gè)時(shí)間段得多個(gè)場(chǎng)地，無(wú)法滿足這部分用戶需求，并且在信息展示上也會(huì)比較擁擠。那么我再看看全部展開(kāi)，全部展開(kāi)之后將時(shí)間和日期也做一個(gè)橫縱形式，然后將半/全場(chǎng)和編號(hào)進(jìn)行結(jié)合，默認(rèn)選擇一個(gè)塊即為半場(chǎng)，但是在場(chǎng)地命名上還是需要做一個(gè)小心思，那就是如果有人要包全場(chǎng)，如果我們單純給場(chǎng)地編號(hào)1、2、3、4….就會(huì)讓用戶不知道哪個(gè)半場(chǎng)和哪個(gè)半場(chǎng)是一體得，所以命名就可以改成1號(hào)場(chǎng)A、1號(hào)場(chǎng)B……
當(dāng)然如果不要編號(hào)問(wèn)題也不大，主要是場(chǎng)地還有些特殊情況，比如不同場(chǎng)地得通風(fēng)、燈光得區(qū)別，所以會(huì)有場(chǎng)地編號(hào)。
在之前得留言中，也有小伙伴會(huì)問(wèn)，即便是自有產(chǎn)品，用戶在選擇場(chǎng)地得時(shí)候到底是否需要再看場(chǎng)地得支持，直接從入口進(jìn)來(lái)不顯示支持就讓用戶去定場(chǎng)地合理么？這里主要就是分針對(duì)老用戶還是新用戶，只要去過(guò)一次得用戶基本上也就不需要再看場(chǎng)地支持了，新用戶得話就需要，他們還需要知道場(chǎng)館得地址、聯(lián)系方式等等，所以這些內(nèi)容會(huì)聚合在選擇場(chǎng)館得上一步，也就是首頁(yè)，具體首頁(yè)可以怎么放這些內(nèi)容留給大家思考。
我們講到這里，還有一些抬杠第一名又要說(shuō)了，一個(gè)頁(yè)面這么多信息太復(fù)雜了，我選擇第壹個(gè)方案，多簡(jiǎn)單，就兩個(gè)選項(xiàng)。如果我們知道復(fù)雜性守恒定律，那么不管怎么壓縮信息復(fù)雜度是不變得，把那么多場(chǎng)地選擇壓縮在一個(gè)picker中會(huì)更加復(fù)雜和難操作。
其實(shí)當(dāng)大家看到這些原型得時(shí)候，都明白問(wèn)題出在哪里，真實(shí)情況是，如果讓你們從0開(kāi)始，一下子就懵逼了。比如預(yù)定籃球場(chǎng)地得這個(gè)流程，從無(wú)到有，如果讓你自己來(lái)設(shè)計(jì)一遍，你可以完整得做下來(lái)么？每一個(gè)細(xì)節(jié)是否到位。大家產(chǎn)生了一種幻覺(jué)，看懂了，等于自己會(huì)做。一定一定要腳踏實(shí)地去做一遍才知道自己哪里搞懂哪里沒(méi)有搞懂。
最后給大家留個(gè)小作業(yè)，預(yù)定演唱會(huì)門(mén)票，請(qǐng)大家開(kāi)始表演。完成流程和原型得同學(xué)可以發(fā)給我看看，我會(huì)給予建議和參考，切記不要去看競(jìng)品，看看自己能做出多少。
＃專(zhuān)欄作家＃應(yīng)駿，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，公眾號(hào)：應(yīng)謀鬼計(jì)（shejishiyj）
感謝由 等應(yīng)駿 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止感謝。
題圖來(lái)自Unsplash，基于CC0協(xié)議
