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