以百度外賣為例,為UI設計師們提供一種分析App的思路
這篇文章我將從大家經常用到的百度外賣(iOS v4.4.1)說開去,闡述我自己分析一款app時候的思維邏輯和過程,當然我說的不一定對,希望能給新手朋友們一些思路。
信息架構梳理
我之前一直有跟進一些app迭代的習慣,比如百度外賣就是其中之一,當它更新來到了v4.4.1之后,和之前可謂發生了天翻地覆的變化,當我重新開始嘗試分析它的時候,我采取的辦法依舊還是和分析一款陌生app一樣,從已有產品的信息架構入手。
一個產品沒有信息架構梳理,就像在蓋一所遲早都會倒的樓。
信息架構到底是個什么東西呢?其實我所理解的并沒有江湖傳說的那么懸,我一般會把app的每一個點擊事件都點擊一遍,然后做相應的記錄,比如我做百度外賣如下這張信息架構圖大概用了一個半小時,整個過程乏善可陳:『點擊一下,記錄頁面信息,再點擊一下』如此循環。
但是這就像是破案一樣,你會從中發現一些線索去了解百度外賣的產品經理和交互設計師們當時是如何思考的。
下面請看百度外賣v4.4.1信息架構梳理圖:
大家可以先用這張圖對比大家現在iOS手機上的百度外賣(v4.4.1)看看,由于我是整張截圖可能會存在字太小頁面太長的問題,沒關系一會分析的時候我會截大圖,而且在文章下方的“下載”按鈕可以下載信息架構圖。至于圖上的星星點點和框框的標記,一會也會詳細闡述。
Part 1 – 首頁
首頁整個單元中存在幾個奇妙的交互亮點:
1、用力上拉,百度外賣會根據最近的一些熱點更換不同的插畫:
這是情感化設計的一種體現方式,偶爾給用戶帶來發現的驚喜。
2、搜索框上滑消失過后會隱藏到右側,如下圖所示:
3、滑動到信息架構里的『點餐流程』開始時,『為你精選』和『此刻最熱』兩個tab會置頂。如下圖所示:
4、點擊大banner不僅支持滑動,點擊右下角按鈕可供預覽。
雖然這個功能看似沒有什么特別重要的作用,但這是交互設計師為愉悅用戶設計的小把戲,明顯我感受到了他們的誠意:
5、購物車列表隱藏當前定位不可送的物品
外賣類產品一定有一個用戶情景是這樣的,用戶今天在家里面放了一堆食物在購物車但是未支付,過了幾天在公司不知道吃什么的時候發現我還有個購物車于是打開匆忙下單,誰曾想你在家時候放置在購物車內的外賣不一定能送到單位地址,肯定是百度外賣遇到這樣的用戶反饋很多,所以產品做出了這樣的交互:隱藏當前定位不可送達的物品。
(看到這個頁面的時候我不禁腦補除了一個被廣大用戶投訴疲于解釋的客服生無可戀的表情。)
說完了一些交互亮點之后,我們回過頭來看看首頁的信息架構:
在我的信息架構中,我把產品的核心邏輯流程加上了紅色五角星。也就是說一個外賣產品中,選擇地址,購物車,搜索功能和點餐流程是一定必不可少的。其中我又把點餐流程拆解成了選擇店鋪、從店鋪選擇菜品和支付流程三個關鍵部分以便于大家理解。
那么既然只需要紅色五角星的功能就可以滿足用戶的點餐流程,那么近半年來百度外賣app中加入的那些奇奇怪怪的功能是為啥呢?為了理解這個問題,我們先來看一下百度外賣這款產品半年來都做了哪些更新?答案是新增了以下幾點:
- 外賣榜單
- 小banner
- 遇見你的菜+能量午餐(匠心晚餐)
- 精選專題
- 頻道button數量(從8個變成了現在的19個)
而且新增的這些內容層級奇高,占據了首頁的第一、二屏
關于這些新增內容在這里我有一些自己的疑問和思考分享給大家:
1. 為什么之前已經有了一個大的輪播banner之后仍然要增加一些小的滑動banner?
我猜想可能是出于兩種考:
1、為了UI的美觀
在之前我的經驗是,一款app,允許用戶自定義的圖文越少,產品就越能做到美觀,外賣產品要面向很多獨立商家,每戶商家logo千奇百怪,比如大家看看下面這兩張圖的對比:
對比那種四爺牛拉logo被截斷的視覺體驗來說,首屏加入了一套滑動的小banner無疑是保證用戶進入第一眼就能感到飽含食欲的關鍵。
但是我認為作為一個體量這么大的產品,不會單純為了視覺的美觀就加入這么大一組滑動banner的,百度外賣加入這個一定有更加深層次的含義,于是我苦思冥想,想出了第二種可能性。
2、為了盈利創收
對的你沒有看錯,百度外賣體量這么大,總會有商業變現產品經理思考廣告入口往哪兒放,這么多的店鋪,除了默認算法的排名以外還有沒有一些別的辦法可以取巧?提到變現這種羞羞噠事情總是讓我們杏眼含春,欲罷不能,嘴上說不要不要,但是產品形態體現上卻很誠實:(好像有什么奇怪的app產品混了進去)
3、為什么圓形的頻道button數量越來越多了??
之前的外賣app,不論是百度還是美團,如今種類都越來越多了,美團從之前的8個變成了現在的16個,百度從之前的8個變成了現在的19個:(換上春節皮膚的icons)
有很多人可能和我有同樣的思考,比如我現在想喝粥吃粉吃面,那我直接去里面搜就好了啊,為什么現在多出了一個奇怪的『粥粉面』?比如我想吃點小龍蝦我直接去搜就好了啊為什么現在多出一個奇怪的『龍蝦盛宴』?偉大的設計準則less is more為什么在這里一點都不less?
我猜想這些奇奇怪怪越來越多icons主要承擔著三個部分的產品作用:
第一個作用:更加便捷的簡化流程。
當我點擊第一個『餐飲』icon時,跳轉到了如下頁面:
大家可以看到上面的滑動tab其實有『全部』、『品牌館』、『小吃快餐』、『粉面粥』、『川湘風味』、『西式快餐』、『日韓料理』、『燒烤海鮮』和『香鍋烤魚』這么多種類的,那么為什么唯獨會把『粥粉面』這一項提前在前面獨立成一個icon?我猜想肯定是數據上點這一個分類產品的用戶遠遠高于別的分類,所以產品經理根據數據做出的產品形態上的改變,把『粉面粥』這個tab單獨提前變成了『粥粉面』這一個icon,如下圖所示:(這里吐槽一下,這兩個名字不統一是什么鬼?。?/p>
(這個文案不統一的問題已經得到修改)
第二個作用:突出一些用戶以為沒有的邊緣功能和為別的產品導流。
比如百度糯米,萬能跑腿,買藥和訂花、超市購和定蛋糕水果奶茶之類的。
作為一線城市的年輕人,我們當然在用了這么幾年的外賣產品之后知道他們什么都能定,但是對于三四線城市的萌新來說,他們可能一直以為外賣產品只能定食物,所以把他們放在這里會突出效果。
(今年過年我回家還鬧了一個笑話,我們四線城市父母看到百度糯米以為是過年了專門賣糯米的我也是驚了個呆 = =所以千萬不要試圖以為你是了解用戶的,用戶這種生物什么事情都干得出來……)
第三個作用:為以后的運營活動和一些奇奇怪怪的市場行為埋下入口。
不得不承認,這種圖標頻道的設計方式一向就不是一種優雅的辦法,只是在平臺類產品由于信息太多必須要有所分類之后在UI中形成的產物。
這種形態的ui設計模式最大的作用是有利于擴展產品入口,所以萬一哪天你在百度外賣的這些頻道icon里面看到一些奇怪的廣告之類的東西也不用驚訝,畢竟是產品經理和交互設計師們也不想的。
但是我認為產品設計師不會這么無腦的為不可知的未來做擴展,事實上工作中的產品設計主要都是為了解決當前問題,所以這一點你們不要偏聽偏信,也歡迎交流別的意見。
好了 聊完小banner和這些頻道icons之后,我們來看百度外賣近半年來在app中新加入的『我最常吃』、『外賣榜單』、『遇見你的菜』、『能量午餐(匠心晚餐)』和『精選專題』五項:
這五項的層級都很高,大概在整個app首頁的第二屏,這樣設計到底為什么呢?
答:加入這五項的目的是為了減少用戶選擇?。▌澲攸c)
去年跨年的時候羅胖『時間的朋友2017』演講里面曾經講了一個故事,說的是他想請客吃飯但是不知道吃什么,于是咨詢了一位吃貨朋友,那個吃貨朋友告訴他:你如果要我告訴你那你就必須聽我的,聽我的就去xxx餐館,只點A、B、C、D、E、F這6樣菜,蘸料只放甲、乙兩種,不好吃你回來找我。羅胖表示那一刻特別幸福,心想這個朋友太靠譜了你還能對我再粗暴點么。。。
這個故事其實暗合百度外賣的產品邏輯:
- 『我最常吃』:喏,每次點的都是這幾樣,要不來份兒一樣的?
- 『外賣榜單』:喏,我們這里賣得最好和最受好評的是這幾樣。
- 『遇見你的菜』:喏,你也是老主顧了,我們推測啊你應該最喜歡吃這幾樣。
- 『能量午餐(匠心晚餐)』:喏,這幾樣東西是別人午餐(晚餐)常吃的,不然您試試?
- 『精選專題』:喏,這是俺們運營讓我們告訴你的,常吃這些啊對身體好!
你們說,有了這五項,誰還要一家店一家店的篩選?
如果用戶說我非要享受那種篩選的快感,那沒問題,您稍微下滑一點點兒就到篩選部分了,那部分您說了算~
可能剛開始更新的時候用戶是不太習慣前面多了這么多東西的。
(用戶內心OS:什么亂七八糟的推薦,老子想吃什么自己不清楚?)
但是當你接受了這個設定之后(不接受也沒辦法每天都要點餐啊——換隔壁美團),發現其實會方便不少。
總結:Don’t TMD make users choose.
Part 2 – 訂單
首先感謝大家看到這里還沒有關掉,你已經閱讀了三分之二了。
那我們就再來說一說第二個部分訂單。
你們肯定會有疑問,第二個部分難道不是『指南』么?對的,講道理的話,百度外賣整個app第二個單元確實是『指南』,但是大家有沒有一個疑問,為什么一個外賣app會有這樣一個奇怪和外賣半毛錢關系都沒有的單元,并且Buttonbar優先級還排在第二個?所以百度外賣的『指南』這個單元我會在未來對比愛奇藝『泡泡』和拉勾『言職』一起詳細另起一文詳細說說為什么現在的大型app里面總有奇怪的東西混進來。在這里就不做過多贅述。
關于訂單這個功能其實相對簡單:
『萬能跑腿』這個功能大家用一下就知道了我就不說展開了(也沒有內容展開)
我下面著重說一下訂單這個單元中中間涉及到一個產品設計中的小把戲叫埋深層級。
產品經理肯定是不鼓勵用戶進行投訴餐館操作的,但是投訴這個功能又必須存在,那如何解決這個矛盾呢?辦法是讓投訴這個操作的成本變高:
我清楚的記得,之前用戶在訂單列表頁就可以投訴,但是后來把投訴功能入口埋深到了下一層級——即必須點開訂單詳情才能投訴,如圖所示:
別看投訴功能就被埋深了一個層級,但是這個小小的改動沒準每個月能減少好幾萬單投訴呢。
既然說到這個了,那就不妨展開一些說點關于產品設計過程中某些功能信息層級的調整(下沉/上浮)規律,這些規律其實在不論是產品原型迭代或者UI設計在設計高保真迭代的時候都是可以作為理論支撐的點:
1. 某些功能是不推薦用戶使用但是又不能沒有的:方案是功能入口適當下沉
比如修改密碼;登出賬號;平臺類產品的投訴,退款,退單;活動報名類產品的請假等等
2. 某些平行功能當中的某一個比另外幾個點擊使用率大很多:該功能入口單獨適當上浮。(反之同理)
比如上文說到的『粥粉面』;比如微信更新之后把『收付款』當中的『付款』功能提前。
但是這里的下沉和上浮的度一定要把握好,不能影響并行的層級上其他功能使用。比如大家試想一下如果微信的buttonbar依次變成『朋友圈』、『信息』、『通訊錄』、『發現』、『我』會發生什么事?我覺得大概率會把微信變成一個強調朋友圈的微博而削弱IM功能。
3. 某些產品策略上的功能入口:功能入口適當(有時候不是適當 = =)上浮
比如喜馬拉雅的付費精品;脈脈的定制頭條;拉勾的言職;今日頭條之前主推的『視頻』;支付寶的一堆社交。
總結:根據埋點數據或者用研靈活調整功能入口是產品設計中的常用手法,但是把握這個度的過程中,需要懷著一顆敬畏之心。
Part 3 – 我的
關于『我的』頁面很常規其實沒啥好講的,但是這里面兩有個小的有意思的點:
第一是陳列館式的設計讓每一個相互不搭的獨立功能都能放在第一層級。
第二是從產品形態上為百度錢包導了一波流:之前的運營活動是使用百度錢包支付每單會便宜幾毛錢,所以我綁定了我的信用卡。
關于什么飯卡聯名卡之類的我就不細說了沒什么意思,這里想起了一個百度外賣有意思的功能,大概在兩年前,百度外賣還在推廣的時候出了一個叫mvp的東西,一年大概是一百多塊錢,買了以后全年不收配送費,后來可能由于辦的人太多導致賠的太厲害所以關掉了mvp這個功能入口,那已經購買mvp的人怎么辦呢?就多出了一個我的mvp的入口,到了一年之后所有人mvp消失了百度外賣就關掉了這個功能,假裝這一年什么事情都沒發生(2333……)。
總結
分析一款移動端產品的時候,一定要細心、耐心和敏銳。
好的設計師永遠是解決問題的。
我們只需要看這些信息架構如何被這款app呈現,呈現方式是否優雅,是否有一些看似奇怪而矛盾的點,并嘗試自我分析是什么導致了這些矛盾點的發生,保證自己在產品設計過程中由得借鑒就行了。
希望這次的文章能夠為廣大UI設計師們提供一種分析app的思路。
本文由 @Seany?原創發布于人人都是產品經理。未經許可,禁止轉載。
用力上拉,百度外賣會根據最近的一些熱點更換不同的插畫:
這個設計不錯
冒昧的叫你一聲大兄弟,看了你的這篇文章讓我感觸良多,雖然我們有看到最后一個字,但是你得內容與思路6的飛起,這篇文章對于我已經受益匪淺了。所以現在還是冒昧的想問一句我能和你聊聊嘛,理想,工作,生活,房價,隨便什么。教教我怎么轉產品吧。冒昧了!??!
我現在是交互設計師~ 也不是產品
好詳細啊 膜拜 學習
你好可以和你聊聊嘛?
聊啊~
你是UI轉產品經理?
現在還不是產品經理,目前是UI和Ux
哦哦哦
不錯不錯,點贊
感謝分享
第一次看到從UI角度分析APP,手動點贊
因為本身就是UI出身的交互,所以這方面敏感一些
能不能講一下后端是怎么架構的?,F在app很多功能也都是基于后臺功能架構去添加實現。