當B端遇上C端:移動端配置平臺設計思考
移動端配置平臺的設置,不僅要保證B端產品的邏輯清晰與操作流暢,更要注意對C端產品的控制與呈現。
隨著移動技術的飛速發展和移動產品用戶數量的不斷提升,移動端產品市場競爭可謂如火如荼,在這樣的大環境下,催生出了許多對移動端產品進行配置的B端工具型或內容型產品。
在設計此類產品的過程中,不僅要保證B端產品的邏輯清晰與操作流暢,更要注意對C端產品的控制與呈現,這類B端后臺產品也就超越了普通B端或C端產品的定式,成為一種相對特別的存在。
產品特點
配置類產品本身是一種比較常見的B端產品,但當配置的目標為C端移動產品的時候,也使得這類產品變得特殊化了一些。這類產品的使用者并非C端普通大眾用戶,而是提供給B類企業客戶的運營或開發,在這個平臺上實現對移動端進行編輯、配置或管理,從而對移動端產品的進行一定程度上的控制。
正是由于這種“控制性”的存在,兩個產品之間的相互聯系就顯得更加重要,因此在設計過程中,除了要保證B、C兩端作為兩個獨立產品的業務邏輯和用戶體驗,還要特別注意兩端產品的交互關系。怎樣增強B端平臺操作對移動端的可控感,讓用戶的一系列操作能成功的響應反饋,降低使用過程中的不可預測性,減少“挫敗感”,以及怎樣平衡兩端產品因各種差異帶來的落差,就成為主要的設計目標。
這類B端配置類產品常見的有內容型和工具型兩種,內容型多為在B端編輯或生產內容,由移動端呈現給用戶閱讀查看,同時B端也對內容進行管理,如大家都很熟悉的微信公眾平臺。
微信公眾平臺,內容編輯及運營平臺
工具型一般表現為對移動產品的某些功能進行設置,最后由移動端展示實現該功能,如個推、騰訊信鴿等推送設置平臺,另外一些交互設計師比較熟悉的原型設計工具如墨刀、Marvel等也可歸為這類產品。
墨刀,原型設計工具,在web上完成原型設計,在手機/平板上查看體驗原型產品
通過上文的描述我們可以看出,移動端的B端配置平臺由于涉及移動端產品的控制,因而產品邏輯也更加復雜。那在設計這類產品過程中需要注意哪些重點,有沒有一些“套路”可巡呢?
最近負責的網易有料是一款智能信息流推送及流量變現平臺,幫助企業用戶快速打造自己的信息流產品。有料本身涵蓋B端內容配置平臺、移動端DemoAPP、SDK等多款產品,其中內容配置平臺是比較典型的移動端的配置平臺,企業用戶在該平臺上實現對移動端的內容、功能甚至樣式控制,從而幫助其完成移動端信息流產品的開發實現。結合網易有料設計實踐,我總結了以下幾個設計點可以研究探索。
1. 重視預覽
在我們日常生活工作中用到的各種工具型產品里,經常會使用到預覽功能,這是一種最簡單直接的提供可控感的設計方法。預覽能讓用戶看到具體操作后的目標結果,不但能提高操作效率,更能給用戶非常直接且直觀的掌控感。
預覽的設計需要注意幾個關鍵點,首先,預覽需及時。我們提供預覽功能,目的是讓用戶直接看效果,但也正是因為這種直觀性,用戶同時也會將在預覽時看到的所有一切當做是最終呈現效果,也就是說如果預覽出現問題,將會使用戶對最終效果產生懷疑。因此如果某個操作后預覽不夠及時,比如預覽加載時間過長,或者需要有前提(例如點擊保存按鈕)才會生效,用戶就會認為真實的功能實現效果甚至性能有問題。
騰訊移動推送平臺,在填寫標題和內容時右側的預覽視圖是沒有時間差及時變化的,給用戶真實、直觀的控制感
另外,在B端web界面上模擬C端手機界面的預覽雖然已經能讓用戶看到實現效果,但移動端和web端畢竟是不同的終端環境,不論再怎樣模擬都不可能顯示最真實效果,因此最好能提供給用戶可以在手機上預覽的入口,讓用戶在真實的設備和環境下查看最后的展示效果。
特別是涉及文字內容顯示,以網易有料為例,用戶可以自己在B端平臺編輯文章然后分發到APP頻道內,那最終的顯示效果如何,字號大小、行間距是否符合手機閱讀習慣,文章配圖顯示是否清晰等,都只有在手機上才能真實的查看出閱讀效果并發現相關問題,以便及時糾錯改正。
網易有料,提供DemoAPP以便用戶可在手機上預覽最真實的展示效果
2. 所見即所得
預覽功能為可控感的建立提供了基礎,但這還不夠,在B、C兩端的交互過程中,考慮到要兼顧B端的操作效率和C端的直觀展示,所見即所得的設計方式就成為了最好的選擇。
所見即所得的設計概念在很多產品中都很常見,一般有三種。
1.?工作臺本身涵蓋預覽功能,拖拽組件完成內容布局,調整參數完成配置,另外也提供更真實預覽界面查看效果,很多工具型的產品都采用這種模式。這種模式下每個步驟的操作都需由用戶手動操作,享有完全控制權的狀態下也很直觀,但效率不足。
墨刀原型設計工具,工作臺本身就是一種預覽視圖,完成界面及原型設計后,也可點擊右上角「運行」按鈕查看更純粹的界面預覽
2.?工作臺與預覽視圖相對獨立,一些文本編輯器和配置工具都采用過這種模式。這種模式下編輯效率得到極大提升,直觀性也很好。
上下分欄式的Markdown編輯器,所見即所得的模式使得編輯效率大大提高
個推推送平臺,推送信息的配置和移動端信息預覽左右分開顯示,預覽視圖內不可操作
3.?工作臺與預覽視圖雖相對獨立,但預覽視圖內可操作,輔助完成部分編輯工作。這種模式代入感更強,但可能會影響操作的連貫性。
微信公眾平臺,添加菜單的操作在預覽視圖內完成,其余配置在右側表單內完成
這三種模式各有利弊,但落實到產品,還是要結合具體的業務場景來謹慎選擇。仍以網易有料為例,用戶在B端內容管理平臺上進行頻道管理操作時,由于移動端產品根據本身業務需求和移動端規范已設計完成,導航欄、tab欄這些組件并不允許用戶編輯;另外在B端能配置的只是頻道tab的名稱及類型、狀態等參數,并沒有需要用戶去添加的組件或元素,因此第一種模式雖然可控性強,但并不符合產品的實際情況。
后兩種模式在移動端配置產品設計中更常見一些,幾經嘗試,設計初期我們采用了第三種模式,讓用戶不但在預覽視圖有代入感的內完成新建頻道、切換頻道順序這些基礎但重點的操作,還可以在后續的表單填寫部分完成配置流程,以達到操作便捷性和預覽直觀性的綜合。
交互初期方案,新建頻道和頻道排序都需在預覽視圖內完成
但在后續的體驗和測試中發現,雖然在手機預覽視圖內的操作很少,但這種所謂有參與感的所見即所得,還是打亂了用戶管理頻道的連貫性,并且用戶即使在預覽視圖內操作,得到的控制感也并沒有比獨立預覽多,相反的,切換頻道這個操作因為只能在區域有限的預覽視圖內進行,反而給用戶帶來使用上的不便(用戶無法快速的定位到目標頻道)。因此最終,我們還是采用了第二種模式,所有對頻道的新建、配置、調整位置等管理操作均由復雜表單完成,預覽視圖只提供預覽功能,再通過加強反饋的方式提高所見即所得的真實感和可控感。
最終交互方案,所有頻道管理都由復雜表單完成,預覽視圖只供預覽
3. 加強反饋
系統對操作給與及時的反饋和響應是產品設計中的基礎要求,那在B端配置產品中,除了產品本身業務功能的操作反饋,“配置”的交互過程中的反饋就顯得更加重要。要讓用戶明確的感知到我在B端平臺進行的每個配置操作都是實實在在能有效影響到移動端界面和內容的。
繼續以有料為例,完成各個頻道的配置后,經發布移動端界面才確定生效,在APP上才可查閱到最新的頻道內容(編輯過程中預覽視圖雖能看到變化但并不生效)?!鞍l布”是一個重要的操作節點,發布成功,配置平臺與移動端的交互也就成功了,因此在頁面頂部采用了比較重的狀態欄樣式,發布前后狀態欄明顯改變,通過這個變化給用戶反饋發布操作成功,同時配合一些文字說明,提醒用戶B端操作已告一段落可以去移動端查看配置效果了。
發布前后狀態欄的明顯變化,讓用戶更加明確此時的場景狀態,避免產生困惑
再舉個例子,用戶在B端平臺上切換表單分別進行編輯的過程中,手機預覽界面中的頻道不需點擊也會隨之自動切換;除此之外,在手機預覽界面點擊頻道,同樣也能控制表單內頻道的切換。這樣打通了配置表單和預覽視圖相互反饋的設計,不但使用戶在編輯頻道的流程中提高效率,更提高了B端平臺和移動端的聯系以增強控制感。
網易有料,加強了配置表單和預覽視圖中頻道的聯系和反饋
4. 平衡內容差異
作為內容型產品,除了對移動端進行配置管理外,還有一部分重要的功能就是內容的呈現。由于平臺、操作系統、交互方式等種種不同,同樣的內容在PC端和移動端查看閱覽是兩種完全不同的場景和體驗。那怎樣平衡內容B端生產而由移動端閱覽的模式,減少因跨平臺而產生的影響手機端閱讀體驗的問題,也是在產品設計中需要特別注意的一點。
平衡內容差異的方法有很多,在微信公眾平臺的素材庫頁面,舊的版本由于自身文本編輯器的種種問題,導致各種第三方公眾號排版工具和插件大行其道,在近期的版本中,可以看到微信不斷優化編輯器,不僅提供了兩端縮進、段前距、段后距、字間距、模板等功能滿足了移動端文章排版的需要,一些功能如字間距也只提供了更適合手機端的候選數值,通過這些方法為用戶提供更適合移動端閱讀的B端文本編輯器。
微信公眾平臺,更適合移動端閱讀的文本編輯器
在有料中,B端作為內容配置平臺,內容主要來自兩個部分,一部分是有料提供的內容庫(例如網易生態下云音樂、云課堂等各個產品提供的優質內容),另一部分用戶也可自己編輯原創內容投遞到自己的APP下。 其中內容庫由于來源眾多,不同的來源文本樣式都有不同,即使有的做過移動端顯示的優化,但優化方案也不盡相同。因此為了控制移動端的呈現效果,提升產品整體的視覺統一和閱讀體驗,對于不同來源的內容,我們采用了統一規范的排版規則,并且通過不斷的測試,在不影響原文基本段落樣式的基礎下,保證其在手機上閱讀的優質體驗。
寫在最后
以上是我在項目實踐中進行的一些問題思考和方法調研,其實很多時候移動端的B端配置平臺并不會單獨出現,還會配套提供C端即移動端的產品,當產品范圍涵蓋了兩端產品時,除了上文提到的幾點,還會有很多其他細節需要注意(如保持兩端產品的視覺統一)。這類產品B、C兩端雖彼此獨立卻又相互依賴,因此設計還需站在全局性的綜合考慮,將兩個產品視為一個整體,避免厚此薄彼的情況發生。
作者:劉媛,網易數據科學中心交互設計師。
本文來源于人人都是產品經理合作媒體@網易UEDC,作者@劉媛
題圖來自 Unsplash,基于 CC0 協議
分析到位 正好要做這方面的練習 價值滿滿
文章分析得很贊,最近我也是在做B端的產品,想請教作者一些問題,方便留下聯系方式么?
喜歡看網易UEDC的文章。