通過實例案件分析,看看大廠是如何做設計的
發(fā)布時間:2022-01-20 08:50 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 3479

瑞幸咖啡APP的一處改版設計


場景如下:用戶在瑞幸咖啡app下單時,選擇好商品并進入提交訂單頁面,此時可以在頁面中選擇要使用的優(yōu)惠券,并且在進入這個頁面時,已經(jīng)為用戶自動選擇了優(yōu)惠力度最大的一張券,減少了用戶的操作成本,如下圖:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

說到這里其實也只是常規(guī)操作,這種設計已經(jīng)很普遍了,但是讓作者感覺驚喜的其實是優(yōu)惠券右側的一個「取消使用」的小按鈕,我們把上面的圖片放大一下如下:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

在之前的舊版本中,是沒有這個「取消使用」按鈕的,可能有的朋友會說,默認選擇一張優(yōu)惠券才是比較好的設計方案啊,你怎么會因為這個功能驚喜?

其實要理解他的優(yōu)秀之處還是要從實際的使用場景來說,作者曾經(jīng)遇到過一種這樣的情況,其中有幾個條件如下:

  • 我的賬戶中存在20張5月份購買的28元代金券
  • 我在6月下單想買一杯24元的咖啡時,系統(tǒng)默認幫我選擇了這張28元的代金券
  • 代金券和優(yōu)惠券是兩個概念,不可同時使用
  • 我的賬戶中還存在一張5折優(yōu)惠券

當時賬戶中的20張代金券是之前官方搞活動的時候買的,所以我經(jīng)常出現(xiàn)的一種操作行為順序是:先點擊代金券一欄,進入代金券頁面,點擊「不使用代金券」按鈕,最后返回提交訂單頁面,再去選擇要使用的5折優(yōu)惠券。整個行為路徑被拉的很長,操作繁瑣還浪費時間。用戶的這種行為對于支付成功的比例是會有影響,所以后期瑞幸在改版時加上了上面的「取消使用」按鈕。

由于作者的代金券已經(jīng)在瑞幸承認財務造假時全部用掉了,所以上方圖片使用的是「不使用優(yōu)惠券」截圖。而不是「不使用代金券」截圖。其交互邏輯都是一樣的。

當時作者每天早上都會買一杯24元的咖啡,所以發(fā)現(xiàn)這個改版后真的十分驚喜,也感嘆瑞幸設計團隊的敏銳嗅覺,實在是優(yōu)秀。在思考一種設計方案的產(chǎn)出邏輯時,還是要結合不同的使用場景才能理解。


解讀百度地圖中的路線圖設計


場景如下:用戶在查看路線時,可以點擊頁面底部的截圖按鈕,將路線圖片保存到相冊,保存到相冊的圖片會顯示一張長圖,顯示全部展開的導航信息。

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

以下是對這個設計案例的解讀:

這個功能已經(jīng)上線了很長時間了,在之前看到這個截圖功能時,我的想法是「多余」,因為我們已經(jīng)到了導航信息頁面,即使是網(wǎng)絡信號不好也是可以繼續(xù)查看和展開折疊信息的,為什么還需要”截圖”呢?或者為什么不直接使用手機的截圖功能呢?最近由于到新公司入職,租房和公司的距離特別遠,在使用百度地圖導航的時候又注意到了這個功能,有了一些合理的解釋。

1. 為什么不直接使用手機的截圖功能?

手機截屏功能只能截取一屏,容易導致截圖后的信息不全。并且在上面這種換乘信息比較復雜的時候甚至需要3-4屏才能容納完整。還有一點原因是導航信息頁面很多信息是折疊起來的,即使是用戶手機中有截長圖軟件,也需要一個一個點擊展開才能開始截圖,大大增加了用戶的點擊次數(shù),效率很慢。

2. 已經(jīng)到了導航頁面,為什么還需要這個功能?

因為存在多種用戶場景,作者在之前的思維只考慮到了自己使用導航功能的場景,除此之外還存在幫他人查詢、長期記錄導航信息等場景。

真實場景1:某天我家里的老人在北京旅游,對于老人來說很大可能性就用一個微信,手機中不會安裝很多其他APP,所以此時我需要自己查詢好路線后發(fā)給他。(幫他人查詢場景)

真實場景2:去年五一假期的時候,我和女朋友計劃去杭州玩幾天,她又是一個非常有計劃的性格,所以提前做了旅行攻略,這個文檔中就用到了類似的導航信息圖。(長期記錄導航信息場景)

可能還存在一些作者沒有經(jīng)歷過和想到的場景。歡迎大家補充。

我們在做設計方案的時候,或是在評估一個功能是否有必要去做的時候,往往需要具備「場景化思維」,這樣可以幫助我們擺脫「自我思維」的局限性。從更多維度來進行評估。

還有一直停留在導航頁面,手機的耗電會比較快,截圖保存在本地可以省電。


我認為豆瓣中的這種設計不太好


場景如下:用戶在使用豆瓣APP查看電影詳情時,可以看到頁面中有演員表一欄,每屏可以顯示4個演員信息,用戶將演員表向左滑就可以查看到更多的演員,到達一定限度后,屏幕右側就會出現(xiàn)一個狀態(tài)叫做「更多」。

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

此時繼續(xù)向左滑的,「更多」就會變成「釋放查看」,如圖:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

出現(xiàn)此狀態(tài)后如果用戶停止滑動并松開手指。那么就會打開一個新頁面,顯示全部演員的列表或介紹。如下圖:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

這是一種比較新奇的交互方式,靈感來源可能是一些內容型產(chǎn)品中下拉刷新的場景。但是這種設計放在豆瓣里面是否合適呢,我有一些不一樣的想法。

首先,下拉刷新比左滑刷新從人體工程學上來說更加的自然。例如,當我們用右手拿著手機用拇指向下滑動時,由于人的拇指關節(jié)的構造就決定了上下滑動比左右滑動要更加輕松省力。

第二點則是用戶心智的問題。類似這種查看更多的交互方式一般會采用點擊的形式,用戶也已經(jīng)習慣了這種形式。點擊只需要點擊一次,而滑動則需要控制拇指移動的范圍和速度。對于如何取消打開下一個頁面、如何終止操作都不是很明確。

這里說的用戶心智,簡單來說就是用戶根據(jù)過往的經(jīng)驗,對可能會造成的結果的預測。我們都知道在設計師設計方案時,一定不能和用戶已有的操作是不同的,而是要順應用戶的操作習慣,這樣可以減少用戶認知成本和操作出錯率。

豆瓣中的這個設計在我看來是一種創(chuàng)新,是一次很勇敢的嘗試?赡苓@個設計在未來的某一天手勢操作的應用規(guī)模和范圍更廣,受眾更多時,會是一種優(yōu)秀的設計方案,但是在今天用戶的心智還處于探索期,所以對于用戶來說,認知成本會比較高。所以我認為在現(xiàn)階段,這不是一種非常優(yōu)秀的設計方案。


淘寶和京東的中類似的隱藏功能


場景如下:搜索功能是90%的產(chǎn)品中都不可缺少的功能,按照匹配度對搜索結果進行排序和展示也都是很常見的做法了,但是作者最近在京東和淘寶兩個產(chǎn)品中發(fā)現(xiàn)了一點關于搜索功能的創(chuàng)新設計,在此分享給大家。

1. 京東:搜索直達

在京東中,如果用戶在搜索框中輸入的關鍵詞與預先設計好的文字相同則不會顯示搜索結果,而是直接進入一個新的頁面,這個頁面一般是某業(yè)務功能的首頁。例如搜索「互聯(lián)網(wǎng)醫(yī)院」則是如下圖的結果:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

這種做法一般是流量規(guī)模很大的產(chǎn)品為了給新業(yè)務更多入口而設計的,在一些用戶規(guī)模數(shù)億的產(chǎn)品中,可能存在數(shù)百個子業(yè)務,這么多業(yè)務自然不可能每個都給與常駐顯示的入口,之前的做法一般是采用獨立的APP才承載,但是這就帶來了推廣新APP極高的成本問題,所以京東在這里采用了搜索直達的方式來給與更多業(yè)務隱藏式的入口,希望能夠用集團中流量最大的產(chǎn)品來為新業(yè)務帶來更多流量和用戶。

2. 淘寶:定向結果

在淘寶中也有類似的設計,例如用戶搜索「象牙」就會觸發(fā)一個保護大象保護野生動物的頁面,如下圖:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

淘寶這里很明顯就不是為了給新業(yè)務導流了,而是發(fā)揮巨型平臺的社會責任,體現(xiàn)了一些公益性的內容,但是如果只從產(chǎn)品設計來看的話,也不失為一種明智的選擇,因為搜索象牙時完全可以顯示一些「人工象牙」類的產(chǎn)品工藝品什么的,但這種搜索結果第一肯定是「賣假貨」,第二這點銷售額對淘寶來說也不值一提,所以還不如做些公益活動來博得用戶好感度。其簡介價值不見得比賣貨賺錢要低。

除了淘寶和京東之外,很多產(chǎn)品也有類似的設計,例如在網(wǎng)易云音樂中搜索「自殺」就會出現(xiàn)非常暖心的內容,在百度中搜索「自殺」第一條結果也是心理咨詢的熱線電話。(是不是廣告我就不知道了,沒試過)

總結這些設計其實都是在滿足一些「極少數(shù)場景」「特定場景」,類似的功能雖然暖心但也要注意產(chǎn)品生命階段再決定做不做,或是使用卡諾模型來對需求進行排序。


QQ音樂和知乎中相同的「生成圖片」設計


場景如下:當用戶在QQ音樂的播放音樂頁面中截圖時,系統(tǒng)會為用戶生成一張精美的海報,供用戶分享或保存,如下圖:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

當用戶在知乎的文章詳情頁面中選中一段文字時,可以選擇「金句分享功能」之后系統(tǒng)會為用戶生成一張精美的海報,供用戶保存或分享,如下圖:

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

5個產(chǎn)品細節(jié)剖析,讓你看看大廠是如何做設計的(二)

在這兩個產(chǎn)品中都出現(xiàn)了「生成圖片」的設計,以下是我對這種設計的思考

用戶進行截圖時有幾種可能的場景

  • 場景1:想截圖將信息保存起來
  • 場景2:想把內容發(fā)送給朋友
  • 場景3:分享到朋友圈

對于場景1來說,雖然用戶截圖體現(xiàn)了內容質量較高,但設計者其實并不希望用戶把內容截圖保存起來,而是更希望用戶把內容收藏起來。截圖保存和收藏的區(qū)別就在于用戶之后是否會經(jīng);氐奖井a(chǎn)品中,也就是決定了用戶留存率。那么怎么避免用戶截圖保存呢?難道直接禁用嗎?這顯然不可以。因為這就違反了用戶操作的目的,會在更大程度上傷害用戶體驗。其結果可能是帶來了更多的流失。所以此處設計方案的要求應該是:滿足用戶保存信息的目的并且避免用戶不再回來。

具體設計方案的思路可能是這樣的:

首先我要滿足用戶的目的,即保存內容,但是我可以只讓用戶保存一部分內容例如標題,再給用戶一個能夠找到正文的鏈接,即二維碼,這樣就滿足了用戶目的,并且也讓用戶需要內容的時候能夠再回到產(chǎn)品中來,提高了留存率。

對于場景2來說,生成圖片后同時給出了微信、QQ、微博等分享渠道,用戶可以一鍵把圖片分享過去,而不是返回桌面-找到微信-選擇好友-點擊加號-點擊圖片-選擇圖片-點擊發(fā)送這樣復雜的操作,減少了用戶的操作步驟,提高了效率。并且在用戶將圖片分享出去之后的流程里,看到該圖片的用戶也可以通過二維碼進入到知乎產(chǎn)品中,這就為產(chǎn)品帶來了更多用戶和活躍度,也達到了設計者的最想實現(xiàn)的目標。

場景3和場景2基本類似,就不再多說廢話。在這三種場景中,一張樣式更加精美的圖片都能夠起到增強用戶分享動力的作用,畢竟顏值即正義~

CorelDRAW2021視頻教程
我要自學網(wǎng)商城 ¥100 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC