從桌面端向移動端移植功能時,B端產品經常會面臨一個問題:桌面端導航數量多,而移動端導航入口數量有限。如何解決這個問題,釘釘、飛書、Teambition給了一種答案,可供大家參考。
咱們講了很多桌面端的交互設計,最近在使用 App 時發現了一個自己觀察到的小趨勢,隨便寫寫與大家探討探討~
不知道大家在處理移動端導航中,有沒有遇到這樣的情況。公司的移動端設計是 “優雅降級”,即先滿足桌面端產品的設計后,再逐步去考慮如何適配移動端。導致移動端頁面中出現了意想不到的問題。
最為常見的就是底部導航欄的 導航菜單 不夠用。
為什么不夠用,我拿?釘釘桌面端?進行舉例
在釘釘的桌面端中,包含有?我的團隊、消息、文檔、工作臺、通訊錄?五大重要模塊,其次在左下方還會有?日歷、待辦、DING、郵箱、會議、直播、收藏、更多?等應用功能。在桌面端將這些功能規劃完成后,你會如何設計移動端導航呢?給大家是5秒鐘時間進行思考? ~
下面繼續查看:
我們先想想移動端導航有哪些 “公式” 可以套,底部導航、頂部導航、桌面式導航、舵式導航,這便是移動端導航設計中最為常見的幾個公式模型。而它的導航承載的最大數量不會超過五個,因此使用起來顯然不太滿足。
而在釘釘面臨的問題和我們實際工作中遇到的問題類似,底部的導航可能會出現?10+?的情況,究竟應該怎么辦~
明白問題后我帶著各位去分析分析。
首先我們在設計中,遇到數量多的內容時,首先想到的應該就是信息分層,將10多個導航進行拆分,顯然釘釘也是這么做的。
接下來你會發現釘釘在最近更新的版本中,出現一個不同尋常的交互。
通過上劃底部導航菜單,彈出一個類似的底部抽屜,將剩余的模塊放置在抽屜下。這樣就能將完整的導航形式在移動端呈現給用戶
說說這樣設計的優點:
- 確實能夠保證在桌面端產品結構不變的情況下,對移動端進行合理適配。因為按照傳統的交互框架下難以滿足現在的問題
- 移動端與桌面端的導航體驗基本保持一致,滿足用戶對整個產品架構的認知
再聊聊缺點:
- 入口太深:因為交互入口需要進行上劃的操作才行,需要一段時間的用戶教育,讓大家熟悉這個方式。
- 冗余:目前釘釘太多的內容導致整個產品給人的感覺十分臃腫,再新增這個交互后需要的學習理解的內容就過于繁多,說實話我作為一個釘釘的用戶,我要去寫一個工作中的項目文檔,我是應該選擇:去協作?去工作臺?去項目?去最近使用?同時又擁有文檔、石墨文檔、Teambition如何選擇?
雖然知道釘釘擁有強大的 ISV生態,但目前很多ISV的功能與釘釘自身產品功能重疊,交集過多。
當然這類交互并不是釘釘自己創新設計的,我是在?Teambition?以及?飛書?這兩款產品上第一個發現(這兩款與釘釘的做法還不太一樣),隨著釘釘的跟進,相信這類交互很快會成為?一個移動端的全新解決方式。
最后再說說飛書與 Teambition 的在這個交互中的細節
首先在飛書中,底部導航的配置主要來源于兩個方面
- 飛書管理后臺:提供給管理員,讓公司的管理者可以對默認的導航進行一個統一配的配置
- 用戶:用戶可以根據自身的需求特性,對底部導航進行自己個性化的配置
其次,飛書不會存在釘釘入口太深的問題,用戶點擊更多,就展開抽屜,用戶更容易理解。
Teambition也是類似,就不做拓展,這便是移動端設計的小趨勢,大家可以在實際工作中用起來~
今天就簡單講了講這個趨勢。
原文鏈接:CE青年(公眾號)
作者:CE青年