案例解析:競品之間的交互設計分析
本次選擇的分析的產品是faceu和B612,兩者在功能方面高度重合,下面主要從產品框架、頁面布局、流程操作、交互細節和視覺表現5個方面分別來對比一下各自的優缺點。
1、產品框架
先看一下各自的首頁:
兩者主功能方面基本相似,都是主打拍照、美圖、表情包制作等功能;
最大的區別就是兩款產品對于未來的定位的不同,從目前的框架可以看出來,Faceu對于社交和社區屬性還是有一定的眼光和野心,而B612結構框架更為簡單,目前還只是單純地做工具。
從產品方向來講,Faceu的眼光和布局更為長遠,B612拓展性不算很好,一旦有產品框架上的大變動會影響當前的導航和頁面布局。
2、頁面布局
其實兩者首頁的頁面布局非常相似,但是在側重點方面還是有些區別的:
B612底部有3個按鈕,分別是貼紙,拍攝和濾鏡,稍微探索一下就能明白貼紙和濾鏡是輔助美化拍照用的,而頭頂上有個小小的圖標,所實話一開始根本就沒注意到,用過之后才知道這是做表情包的,這里我感覺有點太過弱化了。
Faceu的底部也是三個按鈕,分別是消息、拍攝和好友,這三個是平行的關系,更像是底部的標簽tab,用戶點擊按鈕或者左右滑動分別能夠切換到相應的標簽,整個過程比較流暢。拍攝旁邊有個表情包,可以看出這兩個是平行的,而且也很明顯,但是這個地方只能點擊切換,這里如果換成左右滑動和點擊切換拍攝和表情包或許會更好(個人拙見),畢竟從操作頻次來講用戶選擇表情包的操作是遠遠大于消息和好友的。
3、流程操作
這里主要分析主操作流程,注冊和拍攝流程:
可以看到Faceu的注冊流程有4步,比B612要多一步,這個地方要吐槽一下,Faceu的注冊登錄屬于強制性的,這里就沒有B612顯得那么友好了,而且最后一步強制填Faceu號也是個人覺得沒有必要的,如果別人已經在用了就得不停地更換,這個過程會讓人崩潰的,很有可能用戶直接放棄注冊,所以個人覺得這個地方可以讓用戶跳過,去到app里面再去設置。
B612流程本身沒有問題,最大的問題在于它的密碼設置,它的密碼設置限制條件很多,而且還沒有任何提示,用戶不得不去想一個新的密碼,這無形中提高了用戶的注冊門檻,其實我覺得完全沒有必要,又不是金融類app沒必要把賬戶安全密碼條件設置的那么苛刻。
用戶引導方面,Faceu引導用戶手機賬戶注冊,B612引導第三方賬戶(微信、qq)注冊。
拍攝主流程是最核心的操作,決定了能夠留住用戶與否,它們兩者的流程基本上是一模一樣的,都是從首頁—貼紙—濾鏡—保存—分享這么一個流程,但是細節上面還是會有些不同;
B612的貼紙和濾鏡頁面底部比Faceu多了一個拍攝的按鈕,用戶能夠隨選隨拍,不用回到首頁再點擊拍照,從體驗上來講是比Faceu更優的。只是其按鈕位置放的不夠好,首先遮擋了貼圖內容,會讓用戶誤操作,其次視覺上也不是很好看,所以可以考慮重新擺放其位置。
保存頁面Faceu還可以進行對照片進行二次編輯,比較符合用戶當前的使用場景,用戶只需在當前流程進行圖片美化編輯,無需保存再重新導入再編輯。最后的分享界面Faceu也將產品本身的社交圈緊密的聯系在了一起。
4、交互細節
先看一下B612的兩個例子:
B612在選擇相冊選照片的時候右邊有個小控件,按住可以根據時間快速定位,這個體驗相當好,一般用戶手機里面的照片都非常多,它這個小功能可以讓用戶快速找到目標而不是一屏屏的滑。
右圖是圖片編輯的時候點擊左下角的叉叉會有彈窗提示,這里也是一個很好的防錯機制,因為在圖片編輯界面用戶手動操作量很大,如果一不小心誤觸關閉,那么用戶所有的心血都白費了,所以在這個場景下它選擇給一個二次確認還是很合適的。
開啟權限這個Faceu就做的很好,讓用戶自己選擇開啟哪個,而不是一進來就不停地跳彈窗。
上面3個都是Faceu的保存分享頁,底部控件樣式都不同,這個是不是可以考慮統一一下?
圖片引導保存本地,表情包引導分享,背后的原因是表情包(gif圖片)在本地預覽不了?
兩個分享流程一個跳轉發送頁面,一個彈浮層,交互方式似乎不太統一。
5、視覺表現
視覺表現方面Faceu更出彩,顏色、品牌傳達、卡通形象各個方面做得都很出色,在視覺上面可能更討年輕人歡喜,顯得更有活力和青春,也很符合產品定位。
最后總結一下:
- 產品框架層面,Faceu框架更靈活,拓展性更好;
- 頁面布局層面,B612界面更簡潔一些;
- 流程操作層面,各有優劣,B612流程比較簡單,Faceu可能用戶操作會稍微多一點;
- 交互細節層面,也是各有優劣;
- 視覺表現層面,Faceu無疑是更為出色的。
本文由 @小米渣 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自PEXELS,基于CC0協議
faceu現在專注做工具了,放棄了社交功能。
總感覺之后要突出社交的話 Faceu這樣的設計布局應該會顛覆了吧
哈哈 手機號暴露了