以百度外賣為例,為UI設計師們提供一種分析App的思路

2020-12-18 人人都是產品經理

這篇文章我將從大家經常用到的百度外賣(iOSv4.4.1)說開去,闡述我自己分析一款app時候的思維邏輯和過程,當然我說的不一定對,希望能給新手朋友們一些思路。

信息架構梳理

我之前一直有跟進一些app迭代的習慣,比如百度外賣就是其中之一,當它更新來到了v4.4.1之後,和之前可謂發生了天翻地覆的變化,當我重新開始嘗試分析它的時候,我採取的辦法依舊還是和分析一款陌生app一樣,從已有產品的信息架構入手。

一個產品沒有信息架構梳理,就像在蓋一所遲早都會倒的樓。

信息架構到底是個什麼東西呢?其實我所理解的並沒有江湖傳說的那麼懸,我一般會把app的每一個點擊事件都點擊一遍,然後做相應的記錄,比如我做百度外賣如下這張信息架構圖大概用了一個半小時,整個過程乏善可陳:『點擊一下,記錄頁面信息,再點擊一下』如此循環。

但是這就像是破案一樣,你會從中發現一些線索去了解百度外賣的產品經理和互動設計師們當時是如何思考的。

下面請看百度外賣v4.4.1信息架構梳理圖:

大家可以先用這張圖對比大家現在iOS手機上的百度外賣(v4.4.1)看看,由於我是整張截圖可能會存在字太小頁面太長的問題,沒關係一會分析的時候我會截大圖,而且在文章下方的「下載」按鈕可以下載信息架構圖。至於圖上的星星點點和框框的標記,一會也會詳細闡述。

Part1–首頁

首頁整個單元中存在幾個奇妙的交互亮點:

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)

有很多人可能和我有同樣的思考,比如我現在想喝粥吃粉吃麵,那我直接去裡面搜就好了啊,為什麼現在多出了一個奇怪的『粥粉面』?比如我想吃點小龍蝦我直接去搜就好了啊為什麼現在多出一個奇怪的『龍蝦盛宴』?偉大的設計準則lessismore為什麼在這裡一點都不less?

我猜想這些奇奇怪怪越來越多icons主要承擔著三個部分的產品作用:

第一個作用:更加便捷的簡化流程。

當我點擊第一個『餐飲』icon時,跳轉到了如下頁面:

大家可以看到上面的滑動tab其實有『全部』、『品牌館』、『小吃快餐』、『粉面粥』、『川湘風味』、『西式快餐』、『日韓料理』、『燒烤海鮮』和『香鍋烤魚』這麼多種類的,那麼為什麼唯獨會把『粥粉面』這一項提前在前面獨立成一個icon?我猜想肯定是數據上點這一個分類產品的用戶遠遠高於別的分類,所以產品經理根據數據做出的產品形態上的改變,把『粉面粥』這個tab單獨提前變成了『粥粉面』這一個icon,如下圖所示:(這裡吐槽一下,這兩個名字不統一是什麼鬼!)

(這個文案不統一的問題已經得到修改)

第二個作用:突出一些用戶以為沒有的邊緣功能和為別的產品導流。

比如百度糯米,萬能跑腿,買藥和訂花、超市購和定蛋糕水果奶茶之類的。

作為一線城市的年輕人,我們當然在用了這麼幾年的外賣產品之後知道他們什麼都能定,但是對於三四線城市的萌新來說,他們可能一直以為外賣產品只能定食物,所以把他們放在這裡會突出效果。

(今年過年我回家還鬧了一個笑話,我們四線城市父母看到百度糯米以為是過年了專門賣糯米的我也是驚了個呆==所以千萬不要試圖以為你是了解用戶的,用戶這種生物什麼事情都幹得出來……)

第三個作用:為以後的運營活動和一些奇奇怪怪的市場行為埋下入口。

不得不承認,這種圖標頻道的設計方式一向就不是一種優雅的辦法,只是在平臺類產品由於信息太多必須要有所分類之後在UI中形成的產物。

這種形態的ui設計模式最大的作用是有利於擴展產品入口,所以萬一哪天你在百度外賣的這些頻道icon裡面看到一些奇怪的廣告之類的東西也不用驚訝,畢竟是產品經理和互動設計師們也不想的。

但是我認為產品設計師不會這麼無腦的為不可知的未來做擴展,事實上工作中的產品設計主要都是為了解決當前問題,所以這一點你們不要偏聽偏信,也歡迎交流別的意見。

好了聊完小banner和這些頻道icons之後,我們來看百度外賣近半年來在app中新加入的『我最常吃』、『外賣榜單』、『遇見你的菜』、『能量午餐(匠心晚餐)』和『精選專題』五項:

這五項的層級都很高,大概在整個app首頁的第二屏,這樣設計到底為什麼呢?

答:加入這五項的目的是為了減少用戶選擇!(劃重點)

去年跨年的時候羅胖『時間的朋友2017』演講裡面曾經講了一個故事,說的是他想請客吃飯但是不知道吃什麼,於是諮詢了一位吃貨朋友,那個吃貨朋友告訴他:你如果要我告訴你那你就必須聽我的,聽我的就去xxx餐館,只點A、B、C、D、E、F這6樣菜,蘸料只放甲、乙兩種,不好吃你回來找我。羅胖表示那一刻特別幸福,心想這個朋友太靠譜了你還能對我再粗暴點麼。。。

這個故事其實暗合百度外賣的產品邏輯:

『我最常吃』:喏,每次點的都是這幾樣,要不來份兒一樣的?

『外賣榜單』:喏,我們這裡賣得最好和最受好評的是這幾樣。

『遇見你的菜』:喏,你也是老主顧了,我們推測啊你應該最喜歡吃這幾樣。

『能量午餐(匠心晚餐)』:喏,這幾樣東西是別人午餐(晚餐)常吃的,不然您試試?

『精選專題』:喏,這是俺們運營讓我們告訴你的,常吃這些啊對身體好!

你們說,有了這五項,誰還要一家店一家店的篩選?

如果用戶說我非要享受那種篩選的快感,那沒問題,您稍微下滑一點點兒就到篩選部分了,那部分您說了算~

可能剛開始更新的時候用戶是不太習慣前面多了這麼多東西的。

(用戶內心OS:什麼亂七八糟的推薦,老子想吃什麼自己不清楚?)

但是當你接受了這個設定之後(不接受也沒辦法每天都要點餐啊——換隔壁美團),發現其實會方便不少。

總結:Don’tTMDmakeuserschoose.

Part2–訂單

首先感謝大家看到這裡還沒有關掉,你已經閱讀了三分之二了。

那我們就再來說一說第二個部分訂單。

你們肯定會有疑問,第二個部分難道不是『指南』麼?對的,講道理的話,百度外賣整個app第二個單元確實是『指南』,但是大家有沒有一個疑問,為什麼一個外賣app會有這樣一個奇怪和外賣半毛錢關係都沒有的單元,並且Buttonbar優先級還排在第二個?所以百度外賣的『指南』這個單元我會在未來對比愛奇藝『泡泡』和拉勾『言職』一起詳細另起一文詳細說說為什麼現在的大型app裡面總有奇怪的東西混進來。在這裡就不做過多贅述。

關於訂單這個功能其實相對簡單:

『萬能跑腿』這個功能大家用一下就知道了我就不說展開了(也沒有內容展開)

我下面著重說一下訂單這個單元中中間涉及到一個產品設計中的小把戲叫埋深層級。

產品經理肯定是不鼓勵用戶進行投訴餐館操作的,但是投訴這個功能又必須存在,那如何解決這個矛盾呢?辦法是讓投訴這個操作的成本變高:

我清楚的記得,之前用戶在訂單列表頁就可以投訴,但是後來把投訴功能入口埋深到了下一層級——即必須點開訂單詳情才能投訴,如圖所示:

別看投訴功能就被埋深了一個層級,但是這個小小的改動沒準每個月能減少好幾萬單投訴呢。

既然說到這個了,那就不妨展開一些說點關於產品設計過程中某些功能信息層級的調整(下沉/上浮)規律,這些規律其實在不論是產品原型迭代或者UI設計在設計高保真迭代的時候都是可以作為理論支撐的點:

1.某些功能是不推薦用戶使用但是又不能沒有的:方案是功能入口適當下沉

比如修改密碼;登出帳號;平臺類產品的投訴,退款,退單;活動報名類產品的請假等等

2.某些平行功能當中的某一個比另外幾個點擊使用率大很多:該功能入口單獨適當上浮。(反之同理)

比如上文說到的『粥粉面』;比如微信更新之後把『收付款』當中的『付款』功能提前。

但是這裡的下沉和上浮的度一定要把握好,不能影響並行的層級上其他功能使用。比如大家試想一下如果微信的buttonbar依次變成『朋友圈』、『信息』、『通訊錄』、『發現』、『我』會發生什麼事?我覺得大概率會把微信變成一個強調朋友圈的微博而削弱IM功能。

3.某些產品策略上的功能入口:功能入口適當(有時候不是適當==)上浮

比如喜馬拉雅的付費精品;脈脈的定製頭條;拉勾的言職;今日頭條之前主推的『視頻』;支付寶的一堆社交。

總結:根據埋點數據或者用研靈活調整功能入口是產品設計中的常用手法,但是把握這個度的過程中,需要懷著一顆敬畏之心。

Part3–我的

關於『我的』頁面很常規其實沒啥好講的,但是這裡面兩有個小的有意思的點:

第一是陳列館式的設計讓每一個相互不搭的獨立功能都能放在第一層級。

第二是從產品形態上為百度錢包導了一波流:之前的運營活動是使用百度錢包支付每單會便宜幾毛錢,所以我綁定了我的信用卡。

關於什麼飯卡聯名卡之類的我就不細說了沒什麼意思,這裡想起了一個百度外賣有意思的功能,大概在兩年前,百度外賣還在推廣的時候出了一個叫mvp的東西,一年大概是一百多塊錢,買了以後全年不收配送費,後來可能由於辦的人太多導致賠的太厲害所以關掉了mvp這個功能入口,那已經購買mvp的人怎麼辦呢?就多出了一個我的mvp的入口,到了一年之後所有人mvp消失了百度外賣就關掉了這個功能,假裝這一年什麼事情都沒發生(2333……)。

總結

分析一款移動端產品的時候,一定要細心、耐心和敏銳。

好的設計師永遠是解決問題的。

我們只需要看這些信息架構如何被這款app呈現,呈現方式是否優雅,是否有一些看似奇怪而矛盾的點,並嘗試自我分析是什麼導致了這些矛盾點的發生,保證自己在產品設計過程中由得借鑑就行了。

希望這次的文章能夠為廣大UI設計師們提供一種分析app的思路。

本文由@Seany原創發布於人人都是產品經理。未經許可,禁止轉載。

相關焦點

  • 通過實戰項目,從UI設計師角度認識產品原型
    其實UI設計師也叫做用戶體驗設計師,能做的也不僅僅是對交互稿的「填色」。一份設計稿的背後,包含了設計師對於用戶體驗的見解。設計師拿到原型就開始做設計稿,這樣效率不高,而且會有很多遺漏。但是原型上的文字非常多,對於設計師來說要理清思路非常吃力。在這之前,設計師應該知道產品經理是如何做出一份PRD文檔的。下圖為產品經理用axure做的常見的原型文檔:
  • 思路拆解:以酷狗大字版為例,探究如何為大流量項目制定增長方案
    給項目做增長,就像醫生給病人看病,需要找到病灶對症下藥。今天就拿市場上的一款產品:酷狗大字版為例拆解一下,以一個局外人的角度,看看我們是如何分析產品,如何制定增長方案的。一、項目簡述:酷狗大字版酷狗大字版,2019年12月上線,初期主打中老年人用戶群體,後期轉型成了音樂版的趣頭條,產品本質是在做流量生意。通過聽歌也能賺錢來吸引活躍用戶,再倒賣這批用戶給廣告商做投放。
  • 設計師們做UI設計和互動設計、界面設計等一般會去什麼網站呢?
    Dribbble的定義是「為設計師而展示和解答」(Show and tell for designers)。鼓勵創作者上傳個人的作品以及正在創作的作品。追波像是一條簡短的微博,設計師們可以隨時曬下自己在做什麼。https://dribbble.com/2,Behance隸屬於Adobe旗下的一個作品展示網站。
  • 當前主流外賣APP競品分析
    一、需求分析網際網路的普及給生活帶來了許多便利,隨著移動APP應用的高速發展,訂餐APP已經成功佔領整個餐飲外賣行業市場。訂餐APP為人們提供了便利的訂餐服務,用戶可以通過手機軟體查看附近門店,了解門店優惠活動和具體菜品價格,進而商家安排配送,從而實現足不出戶解決吃飯問題。
  • 百度地圖APP產品分析報告
    筆者以百度地圖app為分析對象,從產品功能結構圖、用戶調研、優化建議等方面做出深入分析,進而更加全面地了解這款產品。一、地圖app市場規模現狀1.app採用的功能結構比較接近,均為主頁地圖導航功能頁面+側邊功能欄+搜索欄+底部tab欄。
  • 百度地圖憑什麼能夠為雄安新區規劃提供依據?
    百度地圖事業部總經理李東旻表示,「 大數據能客觀反映城市生長脈絡,規劃是城市建設的源頭, 具有海量大數據和人工智慧技術的百度地圖與規划行業的龍頭機構中國城市規劃設計研究院籤約,能為城市把脈問診,探索城市規劃的新模式,為城市發展創造更大價值。」  問題是,眾多技術支持平臺中,百度地圖是依憑什麼,能夠為雄安新區的城市規劃提供依據?
  • ui設計師必備的專業技能
    德方ui培訓1. UI設計市場現狀UI設計遍布於各行各業,生活的方方面面都能感受到UI設計師的存在。無論手機還是電腦,我們瀏覽的每一個精美頁面都是UI設計師們的功勞。但是現在企業對UI設計師的招聘要求不僅僅停留在以前的做做圖和設計好頁面的層次了,設計師只有做到能夠滿足企業需求,才可以順利就業。
  • 以餓了麼和美團外賣為例 如何塑造網際網路式的差異化
    本文將以思維導圖模式展開,並結合實例說明,想要學習另外一種有效運營思路的小夥伴們請繼續往下看。二、以實例分析如何實現網際網路差異化1、定位的差異化(以餓了麼和美團外賣為例)1)兩者定位餓了麼:餓了就要餓了麼美團外賣:美團外賣 送啥都快
  • App從開發到上線有哪些過程,西安app定製軟體開發公司
    專業做西安app開發的青雲在線小編告訴您,首先是需求整理,這個階段是對項目進行初步整理,要實現哪些功能,先大致的整理出來,然後在根據需求進行詳細需求的分析,把一些重要的需求先確定下來,這樣就可以對項目有一個全面的了解,如果是找外包公司的話,開發需求文檔就會由開發公司提供,客戶只需要確定需求就可以。
  • 最基礎的角度來聊聊一位優秀的ui設計師是如何進行設計的
    本文從最最最基礎的角度來聊聊一位優秀的ui設計師是如何進行設計的,如何平衡前後端的需求,每一個環節如何衡量。1前端和後端的工作分工不同ui設計師在做前端設計的時候,對於各個按鈕等可交互組件的設計其實還不是很清楚。在互動設計階段一般是需要根據項目的複雜度來排列資源,在驗收的時候快速交付一個中期的功能解決方案,提出一個相對合理的預期和挑戰。
  • App從開發到上線都需要哪些過程
    專業做西安app開發的青雲在線小編告訴您,首先是需求整理,這個階段是對項目進行初步整理,要實現哪些功能,先大致的整理出來,然後在根據需求進行詳細需求的分析,把一些重要的需求先確定下來,這樣就可以對項目有一個全面的了解,如果是找外包公司的話,開發需求文檔就會由開發公司提供,客戶只需要確定需求就可以。
  • 看看老外的社交APP UI界面設計,不知道你能有啟發不?
    對話頁面的ui要怎麼設計呢?下面列舉12個國外社交app ui設計案例供設計師盆友們參考。1、Tomek Kwiatkowski作品,黑色背景設計,歷史聊天記錄跟當下聊天用橫線分隔開。2、Trupti Pawnikar設計作品,清晰簡潔的設計。
  • 有哪些外賣軟體有首減 什麼app訂外賣更便宜
    當大家不會做飯、懶得做飯、沒時間做飯時,相信都會拿個手機點個外賣吧,而在外賣軟體上,通常新用戶是可以享受到比較大的優惠的,這就讓不少人都想知道有哪些外賣軟體有首減了。像一些經驗豐富的人,就會在各個外賣軟體上訂外賣以享受新用戶的專屬優惠了。所以現在生活中有哪些外賣軟體有首減的?
  • 回家吃飯APP產品分析報告
    根據易觀智庫的統計數據,2014年度的中國網際網路餐飲外賣市場交易規模達到了150億左右,體量巨大。目前的外賣市場兩大主要目標人群是學生和白領,而在學生校園市場逐漸的飽和使得各大商家焦點轉移到了用戶範圍更廣的白領人群。而今天要分析的回家吃飯這款產品正是滿足了上班族的需求。另一方面,滴滴,UBER建立了汽車共享經濟,Airbnb是房屋共享,那麼回家吃飯,就是一種對美食共享的嘗試。
  • 西安app開發找哪家公司好,APP原生開發服務
    想要知道開發一款app的難度,可以從app開發的流程來進行了解,這樣就對於app開發有一個大款的認知,今天小編總結了一個app的開發到上線的過程,希望可以幫助到大家。要開發一個app,首先要做的就是需求分析,針對用戶的需求進行產品分析,是app開發過程中很重要的環節之一,因為可以詳細的需求對於後期的開發方案來說有很重要的作用,沒有確定開發需求是很難進行開發的。
  • 百度app為你寫詩 為你做不可能的事
    高梓淇詩意指數93分     張睿驚呼手機百度#為你寫詩#神奇!  細心網友發現,其實他們並非詩興大發,而是使用了手機百度新出的「為你寫詩」功能。據了解,手機百度客戶端iOS版「為你寫詩」功能於8月30日上線,只要用戶進入手機百度客戶端首頁,點擊「為你寫詩」選項,對人物或景物進行拍照上傳,手機百度後臺系統會根據網友的圖像,進行智能分析和匹配,為使用者量身打造屬於自己的詩。
  • 普通ui設計師如何向高級設計師進階
    普通ui設計師如何向高級設計師進階?沒有人想要一直停在原地踏步,ui設計師也是一樣。ui設計師想要提升自己的經濟狀況和社會地位,就要找到正確的發展路徑,並且不斷對自己充電。那麼普通的設計師怎麼才能夠進行自我提升呢?
  • UI設計怎麼做,才能拿到更高薪?
    下面就以3類設計師為例 解鎖一下設計師們強悍的技能 UI設計師——不只是做各種 APP 界面圖,然後加些icon這麼簡單,TA負責軟體界面的美觀、操作邏輯、人機互動等等,需要掌握紮實的平面構成、色彩構成、版式設計、設計心理、
  • ui靈感:地圖類app界面設計欣賞
    那麼,除了我們常用的百度地圖,高德地圖外,地圖app還能怎麼設計呢?今天就一起來欣賞幾個設計精美的地圖app。1,這個一個有生命的實況地圖,可以看到灰機灰,火車跑,廣告彈,當然,界面設計也是非常有卡通感。2,這是一個中規中矩的谷歌地圖設計稿。
  • ps入門教程ui設計,ps入門教程平面設計
    安卓首頁界面的設計教程  央ui設計面試培訓視頻教程美設計學院的課程設ui教程餐牌印刷設計包裝慢動作教程置很特別,大一是基礎課合成教程,燈大學ui視頻鉓設計手繪教程開拓思維的設計課程、解構服裝設計手繪教學視頻教程空間的素房子的平面圖設計教程描基礎等教海報插畫程海報,這些課程為我打廣場景觀設計排版互動設計視頻教程全套教程設計下設計後期教程思考的基礎。