場(chǎng)景如下：用戶在瑞幸咖啡app下單時(shí)，選擇好商品并進(jìn)入提交訂單頁(yè)面，此時(shí)可以在頁(yè)面中選擇要使用的優(yōu)惠券，并且在進(jìn)入這個(gè)頁(yè)面時(shí)，已經(jīng)為用戶自動(dòng)選擇了優(yōu)惠力度最大的一張券，減少了用戶的操作成本，如下圖：
說(shuō)到這里其實(shí)也只是常規(guī)操作，這種設(shè)計(jì)已經(jīng)很普遍了，但是讓作者感覺(jué)驚喜的其實(shí)是優(yōu)惠券右側(cè)的一個(gè)「取消使用」的小按鈕，我們把上面的圖片放大一下如下：
在之前的舊版本中，是沒(méi)有這個(gè)「取消使用」按鈕的，可能有的朋友會(huì)說(shuō)，默認(rèn)選擇一張優(yōu)惠券才是比較好的設(shè)計(jì)方案啊，你怎么會(huì)因?yàn)檫@個(gè)功能驚喜？
其實(shí)要理解他的優(yōu)秀之處還是要從實(shí)際的使用場(chǎng)景來(lái)說(shuō)，作者曾經(jīng)遇到過(guò)一種這樣的情況，其中有幾個(gè)條件如下：
- 我的賬戶中存在20張5月份購(gòu)買(mǎi)的28元代金券
- 我在6月下單想買(mǎi)一杯24元的咖啡時(shí)，系統(tǒng)默認(rèn)幫我選擇了這張28元的代金券
- 代金券和優(yōu)惠券是兩個(gè)概念，不可同時(shí)使用
- 我的賬戶中還存在一張5折優(yōu)惠券
當(dāng)時(shí)賬戶中的20張代金券是之前官方搞活動(dòng)的時(shí)候買(mǎi)的，所以我經(jīng)常出現(xiàn)的一種操作行為順序是：先點(diǎn)擊代金券一欄，進(jìn)入代金券頁(yè)面，點(diǎn)擊「不使用代金券」按鈕，最后返回提交訂單頁(yè)面，再去選擇要使用的5折優(yōu)惠券。整個(gè)行為路徑被拉的很長(zhǎng)，操作繁瑣還浪費(fèi)時(shí)間。用戶的這種行為對(duì)于支付成功的比例是會(huì)有影響，所以后期瑞幸在改版時(shí)加上了上面的「取消使用」按鈕。
由于作者的代金券已經(jīng)在瑞幸承認(rèn)財(cái)務(wù)造假時(shí)全部用掉了，所以上方圖片使用的是「不使用優(yōu)惠券」截圖。而不是「不使用代金券」截圖。其交互邏輯都是一樣的。
當(dāng)時(shí)作者每天早上都會(huì)買(mǎi)一杯24元的咖啡，所以發(fā)現(xiàn)這個(gè)改版后真的十分驚喜，也感嘆瑞幸設(shè)計(jì)團(tuán)隊(duì)的敏銳嗅覺(jué)，實(shí)在是優(yōu)秀。在思考一種設(shè)計(jì)方案的產(chǎn)出邏輯時(shí)，還是要結(jié)合不同的使用場(chǎng)景才能理解。
場(chǎng)景如下：用戶在查看路線時(shí)，可以點(diǎn)擊頁(yè)面底部的截圖按鈕，將路線圖片保存到相冊(cè)，保存到相冊(cè)的圖片會(huì)顯示一張長(zhǎng)圖，顯示全部展開(kāi)的導(dǎo)航信息。
以下是對(duì)這個(gè)設(shè)計(jì)案例的解讀：
這個(gè)功能已經(jīng)上線了很長(zhǎng)時(shí)間了，在之前看到這個(gè)截圖功能時(shí)，我的想法是「多余」，因?yàn)槲覀円呀?jīng)到了導(dǎo)航信息頁(yè)面，即使是網(wǎng)絡(luò)信號(hào)不好也是可以繼續(xù)查看和展開(kāi)折疊信息的，為什么還需要”截圖”呢？或者為什么不直接使用手機(jī)的截圖功能呢？最近由于到新公司入職，租房和公司的距離特別遠(yuǎn)，在使用百度地圖導(dǎo)航的時(shí)候又注意到了這個(gè)功能，有了一些合理的解釋。
1. 為什么不直接使用手機(jī)的截圖功能？
手機(jī)截屏功能只能截取一屏，容易導(dǎo)致截圖后的信息不全。并且在上面這種換乘信息比較復(fù)雜的時(shí)候甚至需要3-4屏才能容納完整。還有一點(diǎn)原因是導(dǎo)航信息頁(yè)面很多信息是折疊起來(lái)的，即使是用戶手機(jī)中有截長(zhǎng)圖軟件，也需要一個(gè)一個(gè)點(diǎn)擊展開(kāi)才能開(kāi)始截圖，大大增加了用戶的點(diǎn)擊次數(shù)，效率很慢。
2. 已經(jīng)到了導(dǎo)航頁(yè)面，為什么還需要這個(gè)功能?
因?yàn)榇嬖诙喾N用戶場(chǎng)景，作者在之前的思維只考慮到了自己使用導(dǎo)航功能的場(chǎng)景，除此之外還存在幫他人查詢、長(zhǎng)期記錄導(dǎo)航信息等場(chǎng)景。
真實(shí)場(chǎng)景1：某天我家里的老人在北京旅游，對(duì)于老人來(lái)說(shuō)很大可能性就用一個(gè)微信，手機(jī)中不會(huì)安裝很多其他APP，所以此時(shí)我需要自己查詢好路線后發(fā)給他。（幫他人查詢場(chǎng)景）
真實(shí)場(chǎng)景2：去年五一假期的時(shí)候，我和女朋友計(jì)劃去杭州玩幾天，她又是一個(gè)非常有計(jì)劃的性格，所以提前做了旅行攻略，這個(gè)文檔中就用到了類(lèi)似的導(dǎo)航信息圖。（長(zhǎng)期記錄導(dǎo)航信息場(chǎng)景）
可能還存在一些作者沒(méi)有經(jīng)歷過(guò)和想到的場(chǎng)景。歡迎大家補(bǔ)充。
我們?cè)谧鲈O(shè)計(jì)方案的時(shí)候，或是在評(píng)估一個(gè)功能是否有必要去做的時(shí)候，往往需要具備「場(chǎng)景化思維」，這樣可以幫助我們擺脫「自我思維」的局限性。從更多維度來(lái)進(jìn)行評(píng)估。
還有一直停留在導(dǎo)航頁(yè)面，手機(jī)的耗電會(huì)比較快，截圖保存在本地可以省電。
場(chǎng)景如下：用戶在使用豆瓣APP查看電影詳情時(shí)，可以看到頁(yè)面中有演員表一欄，每屏可以顯示4個(gè)演員信息，用戶將演員表向左滑就可以查看到更多的演員，到達(dá)一定限度后，屏幕右側(cè)就會(huì)出現(xiàn)一個(gè)狀態(tài)叫做「更多」。
此時(shí)繼續(xù)向左滑的，「更多」就會(huì)變成「釋放查看」，如圖：
出現(xiàn)此狀態(tài)后如果用戶停止滑動(dòng)并松開(kāi)手指。那么就會(huì)打開(kāi)一個(gè)新頁(yè)面，顯示全部演員的列表或介紹。如下圖：
這是一種比較新奇的交互方式，靈感來(lái)源可能是一些內(nèi)容型產(chǎn)品中下拉刷新的場(chǎng)景。但是這種設(shè)計(jì)放在豆瓣里面是否合適呢，我有一些不一樣的想法。
首先，下拉刷新比左滑刷新從人體工程學(xué)上來(lái)說(shuō)更加的自然。例如，當(dāng)我們用右手拿著手機(jī)用拇指向下滑動(dòng)時(shí)，由于人的拇指關(guān)節(jié)的構(gòu)造就決定了上下滑動(dòng)比左右滑動(dòng)要更加輕松省力。
第二點(diǎn)則是用戶心智的問(wèn)題。類(lèi)似這種查看更多的交互方式一般會(huì)采用點(diǎn)擊的形式，用戶也已經(jīng)習(xí)慣了這種形式。點(diǎn)擊只需要點(diǎn)擊一次，而滑動(dòng)則需要控制拇指移動(dòng)的范圍和速度。對(duì)于如何取消打開(kāi)下一個(gè)頁(yè)面、如何終止操作都不是很明確。
這里說(shuō)的用戶心智，簡(jiǎn)單來(lái)說(shuō)就是用戶根據(jù)過(guò)往的經(jīng)驗(yàn)，對(duì)可能會(huì)造成的結(jié)果的預(yù)測(cè)。我們都知道在設(shè)計(jì)師設(shè)計(jì)方案時(shí)，一定不能和用戶已有的操作是不同的，而是要順應(yīng)用戶的操作習(xí)慣，這樣可以減少用戶認(rèn)知成本和操作出錯(cuò)率。
豆瓣中的這個(gè)設(shè)計(jì)在我看來(lái)是一種創(chuàng)新，是一次很勇敢的嘗試？赡苓@個(gè)設(shè)計(jì)在未來(lái)的某一天手勢(shì)操作的應(yīng)用規(guī)模和范圍更廣，受眾更多時(shí)，會(huì)是一種優(yōu)秀的設(shè)計(jì)方案，但是在今天用戶的心智還處于探索期，所以對(duì)于用戶來(lái)說(shuō)，認(rèn)知成本會(huì)比較高。所以我認(rèn)為在現(xiàn)階段，這不是一種非常優(yōu)秀的設(shè)計(jì)方案。
場(chǎng)景如下：搜索功能是90%的產(chǎn)品中都不可缺少的功能，按照匹配度對(duì)搜索結(jié)果進(jìn)行排序和展示也都是很常見(jiàn)的做法了，但是作者最近在京東和淘寶兩個(gè)產(chǎn)品中發(fā)現(xiàn)了一點(diǎn)關(guān)于搜索功能的創(chuàng)新設(shè)計(jì)，在此分享給大家。
1. 京東：搜索直達(dá)
在京東中，如果用戶在搜索框中輸入的關(guān)鍵詞與預(yù)先設(shè)計(jì)好的文字相同則不會(huì)顯示搜索結(jié)果，而是直接進(jìn)入一個(gè)新的頁(yè)面，這個(gè)頁(yè)面一般是某業(yè)務(wù)功能的首頁(yè)。例如搜索「互聯(lián)網(wǎng)醫(yī)院」則是如下圖的結(jié)果：
這種做法一般是流量規(guī)模很大的產(chǎn)品為了給新業(yè)務(wù)更多入口而設(shè)計(jì)的，在一些用戶規(guī)模數(shù)億的產(chǎn)品中，可能存在數(shù)百個(gè)子業(yè)務(wù)，這么多業(yè)務(wù)自然不可能每個(gè)都給與常駐顯示的入口，之前的做法一般是采用獨(dú)立的APP才承載，但是這就帶來(lái)了推廣新APP極高的成本問(wèn)題，所以京東在這里采用了搜索直達(dá)的方式來(lái)給與更多業(yè)務(wù)隱藏式的入口，希望能夠用集團(tuán)中流量最大的產(chǎn)品來(lái)為新業(yè)務(wù)帶來(lái)更多流量和用戶。
2. 淘寶：定向結(jié)果
在淘寶中也有類(lèi)似的設(shè)計(jì)，例如用戶搜索「象牙」就會(huì)觸發(fā)一個(gè)保護(hù)大象保護(hù)野生動(dòng)物的頁(yè)面，如下圖：
淘寶這里很明顯就不是為了給新業(yè)務(wù)導(dǎo)流了，而是發(fā)揮巨型平臺(tái)的社會(huì)責(zé)任，體現(xiàn)了一些公益性的內(nèi)容，但是如果只從產(chǎn)品設(shè)計(jì)來(lái)看的話，也不失為一種明智的選擇，因?yàn)樗阉飨笱罆r(shí)完全可以顯示一些「人工象牙」類(lèi)的產(chǎn)品工藝品什么的，但這種搜索結(jié)果第一肯定是「賣(mài)假貨」，第二這點(diǎn)銷(xiāo)售額對(duì)淘寶來(lái)說(shuō)也不值一提，所以還不如做些公益活動(dòng)來(lái)博得用戶好感度。其簡(jiǎn)介價(jià)值不見(jiàn)得比賣(mài)貨賺錢(qián)要低。
除了淘寶和京東之外，很多產(chǎn)品也有類(lèi)似的設(shè)計(jì)，例如在網(wǎng)易云音樂(lè)中搜索「自殺」就會(huì)出現(xiàn)非常暖心的內(nèi)容，在百度中搜索「自殺」第一條結(jié)果也是心理咨詢的熱線電話。（是不是廣告我就不知道了，沒(méi)試過(guò)）
總結(jié)這些設(shè)計(jì)其實(shí)都是在滿足一些「極少數(shù)場(chǎng)景」「特定場(chǎng)景」，類(lèi)似的功能雖然暖心但也要注意產(chǎn)品生命階段再?zèng)Q定做不做，或是使用卡諾模型來(lái)對(duì)需求進(jìn)行排序。
場(chǎng)景如下：當(dāng)用戶在QQ音樂(lè)的播放音樂(lè)頁(yè)面中截圖時(shí)，系統(tǒng)會(huì)為用戶生成一張精美的海報(bào)，供用戶分享或保存，如下圖：
當(dāng)用戶在知乎的文章詳情頁(yè)面中選中一段文字時(shí)，可以選擇「金句分享功能」之后系統(tǒng)會(huì)為用戶生成一張精美的海報(bào)，供用戶保存或分享，如下圖：
在這兩個(gè)產(chǎn)品中都出現(xiàn)了「生成圖片」的設(shè)計(jì)，以下是我對(duì)這種設(shè)計(jì)的思考
用戶進(jìn)行截圖時(shí)有幾種可能的場(chǎng)景
- 場(chǎng)景1：想截圖將信息保存起來(lái)
- 場(chǎng)景2：想把內(nèi)容發(fā)送給朋友
- 場(chǎng)景3：分享到朋友圈
對(duì)于場(chǎng)景1來(lái)說(shuō)，雖然用戶截圖體現(xiàn)了內(nèi)容質(zhì)量較高，但設(shè)計(jì)者其實(shí)并不希望用戶把內(nèi)容截圖保存起來(lái)，而是更希望用戶把內(nèi)容收藏起來(lái)。截圖保存和收藏的區(qū)別就在于用戶之后是否會(huì)經(jīng)常回到本產(chǎn)品中，也就是決定了用戶留存率。那么怎么避免用戶截圖保存呢？難道直接禁用嗎？這顯然不可以。因?yàn)檫@就違反了用戶操作的目的，會(huì)在更大程度上傷害用戶體驗(yàn)。其結(jié)果可能是帶來(lái)了更多的流失。所以此處設(shè)計(jì)方案的要求應(yīng)該是：滿足用戶保存信息的目的并且避免用戶不再回來(lái)。
具體設(shè)計(jì)方案的思路可能是這樣的：
首先我要滿足用戶的目的，即保存內(nèi)容，但是我可以只讓用戶保存一部分內(nèi)容例如標(biāo)題，再給用戶一個(gè)能夠找到正文的鏈接，即二維碼，這樣就滿足了用戶目的，并且也讓用戶需要內(nèi)容的時(shí)候能夠再回到產(chǎn)品中來(lái)，提高了留存率。
對(duì)于場(chǎng)景2來(lái)說(shuō)，生成圖片后同時(shí)給出了微信、QQ、微博等分享渠道，用戶可以一鍵把圖片分享過(guò)去，而不是返回桌面-找到微信-選擇好友-點(diǎn)擊加號(hào)-點(diǎn)擊圖片-選擇圖片-點(diǎn)擊發(fā)送這樣復(fù)雜的操作，減少了用戶的操作步驟，提高了效率。并且在用戶將圖片分享出去之后的流程里，看到該圖片的用戶也可以通過(guò)二維碼進(jìn)入到知乎產(chǎn)品中，這就為產(chǎn)品帶來(lái)了更多用戶和活躍度，也達(dá)到了設(shè)計(jì)者的最想實(shí)現(xiàn)的目標(biāo)。
場(chǎng)景3和場(chǎng)景2基本類(lèi)似，就不再多說(shuō)廢話。在這三種場(chǎng)景中，一張樣式更加精美的圖片都能夠起到增強(qiáng)用戶分享動(dòng)力的作用，畢竟顏值即正義～
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。