講那么多設(shè)計(jì)方法,不如多做一些設(shè)計(jì)方案

7 評(píng)論 5258 瀏覽 27 收藏 20 分鐘

編輯導(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。

交互練習(xí)與作業(yè)講解

產(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)。

交互練習(xí)與作業(yè)講解

我們從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)雞肋了。

原因如下:

  1. 大部分球館的標(biāo)準(zhǔn)都是統(tǒng)一的,不可能一塊木地板一塊pvc這樣錯(cuò)開,很難看,也不可能。如果有區(qū)別那么只有尺寸規(guī)格的區(qū)別。
  2. 場(chǎng)地類型展示并不是核心用戶需求,只是一種輔助決策,并且是“一次性”決策,該流程的核心任務(wù)還是要讓用戶可以去預(yù)定場(chǎng)地,但是目前整個(gè)頁面只有底部一個(gè)預(yù)定的按鈕(等會(huì)說這個(gè)按鈕)
  3. 頁面頂部有場(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星。

交互練習(xí)與作業(yè)講解

產(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è)方案的問題在于:

  1. 信息關(guān)聯(lián)度沒做好,這里的日期和時(shí)間要更緊密,和買電影票不一樣。
  2. 時(shí)間的交互效率低,并且沒有展示全,可擴(kuò)展性不好,如果場(chǎng)館早上8點(diǎn)開門怎么辦?商家要求最低2小時(shí)起訂或者1小時(shí)起訂怎么辦?
  3. 半場(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中。

交互練習(xí)與作業(yè)講解

這種交互方式一般不單獨(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è)方案:

交互練習(xí)與作業(yè)講解

這個(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è)方案:

交互練習(xí)與作業(yè)講解

這個(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è)案例:

交互練習(xí)與作業(yè)講解

這位同學(xué)將步驟分為了先通過picker選擇日期和時(shí)間,確定后再選擇場(chǎng)地。這個(gè)流程問題就在于:

  1. picker用的不對(duì),picker雖然叫做選擇器,但往往不會(huì)作為一個(gè)中間任務(wù)承載的模塊去用,而是對(duì)于一個(gè)頁面中需要選擇一些選項(xiàng)的時(shí)候才會(huì)用到,選擇完后依然停留在該頁面。否則進(jìn)入下一個(gè)頁面后,再返回,就看不到picker了,還要再選擇一次。
  2. 場(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……

交互練習(xí)與作業(yè)講解

當(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 小白需要的就是這種,太感謝了!

    來自河北 回復(fù)
  2. 寫的很棒!完成流程和原型在公眾號(hào)發(fā)給你嗎?

    來自廣東 回復(fù)
    1. 是的哈

      來自浙江 回復(fù)
  3. 太詳細(xì)了,而且淺顯易懂,我先收藏了,點(diǎn)贊。

    來自河南 回復(fù)
  4. 這個(gè)分享好棒啊,清晰明了,很有條理,視覺效果很舒適

    來自北京 回復(fù)
  5. 好記性不如爛筆頭,邊學(xué)邊做

    來自廣西 回復(fù)
  6. 干貨!

    來自浙江 回復(fù)