移動(dòng)端配置平臺(tái)的設(shè)置，不僅要保證B端產(chǎn)品的邏輯清晰與操作流暢，更要注意對(duì)C端產(chǎn)品的控制與呈現(xiàn)。

隨著移動(dòng)技術(shù)的飛速發(fā)展和移動(dòng)產(chǎn)品用戶數(shù)量的不斷提升，移動(dòng)端產(chǎn)品市場競爭可謂如火如荼，在這樣的大環(huán)境下，催生出了許多對(duì)移動(dòng)端產(chǎn)品進(jìn)行配置的B端工具型或內(nèi)容型產(chǎn)品。

在設(shè)計(jì)此類產(chǎn)品的過程中，不僅要保證B端產(chǎn)品的邏輯清晰與操作流暢，更要注意對(duì)C端產(chǎn)品的控制與呈現(xiàn)，這類B端后臺(tái)產(chǎn)品也就超越了普通B端或C端產(chǎn)品的定式，成為一種相對(duì)特別的存在。

產(chǎn)品特點(diǎn)

配置類產(chǎn)品本身是一種比較常見的B端產(chǎn)品，但當(dāng)配置的目標(biāo)為C端移動(dòng)產(chǎn)品的時(shí)候，也使得這類產(chǎn)品變得特殊化了一些。這類產(chǎn)品的使用者并非C端普通大眾用戶，而是提供給B類企業(yè)客戶的運(yùn)營或開發(fā)，在這個(gè)平臺(tái)上實(shí)現(xiàn)對(duì)移動(dòng)端進(jìn)行編輯、配置或管理，從而對(duì)移動(dòng)端產(chǎn)品的進(jìn)行一定程度上的控制。

正是由于這種“控制性”的存在，兩個(gè)產(chǎn)品之間的相互聯(lián)系就顯得更加重要，因此在設(shè)計(jì)過程中，除了要保證B、C兩端作為兩個(gè)獨(dú)立產(chǎn)品的業(yè)務(wù)邏輯和用戶體驗(yàn)，還要特別注意兩端產(chǎn)品的交互關(guān)系。怎樣增強(qiáng)B端平臺(tái)操作對(duì)移動(dòng)端的可控感，讓用戶的一系列操作能成功的響應(yīng)反饋，降低使用過程中的不可預(yù)測性，減少“挫敗感”，以及怎樣平衡兩端產(chǎn)品因各種差異帶來的落差，就成為主要的設(shè)計(jì)目標(biāo)。

這類B端配置類產(chǎn)品常見的有內(nèi)容型和工具型兩種，內(nèi)容型多為在B端編輯或生產(chǎn)內(nèi)容，由移動(dòng)端呈現(xiàn)給用戶閱讀查看，同時(shí)B端也對(duì)內(nèi)容進(jìn)行管理，如大家都很熟悉的微信公眾平臺(tái)。

微信公眾平臺(tái)，內(nèi)容編輯及運(yùn)營平臺(tái)

工具型一般表現(xiàn)為對(duì)移動(dòng)產(chǎn)品的某些功能進(jìn)行設(shè)置，最后由移動(dòng)端展示實(shí)現(xiàn)該功能，如個(gè)推、騰訊信鴿等推送設(shè)置平臺(tái)，另外一些交互設(shè)計(jì)師比較熟悉的原型設(shè)計(jì)工具如墨刀、Marvel等也可歸為這類產(chǎn)品。

墨刀，原型設(shè)計(jì)工具，在web上完成原型設(shè)計(jì)，在手機(jī)/平板上查看體驗(yàn)原型產(chǎn)品

通過上文的描述我們可以看出，移動(dòng)端的B端配置平臺(tái)由于涉及移動(dòng)端產(chǎn)品的控制，因而產(chǎn)品邏輯也更加復(fù)雜。那在設(shè)計(jì)這類產(chǎn)品過程中需要注意哪些重點(diǎn)，有沒有一些“套路”可巡呢？

最近負(fù)責(zé)的網(wǎng)易有料是一款智能信息流推送及流量變現(xiàn)平臺(tái)，幫助企業(yè)用戶快速打造自己的信息流產(chǎn)品。有料本身涵蓋B端內(nèi)容配置平臺(tái)、移動(dòng)端DemoAPP、SDK等多款產(chǎn)品，其中內(nèi)容配置平臺(tái)是比較典型的移動(dòng)端的配置平臺(tái)，企業(yè)用戶在該平臺(tái)上實(shí)現(xiàn)對(duì)移動(dòng)端的內(nèi)容、功能甚至樣式控制，從而幫助其完成移動(dòng)端信息流產(chǎn)品的開發(fā)實(shí)現(xiàn)。結(jié)合網(wǎng)易有料設(shè)計(jì)實(shí)踐，我總結(jié)了以下幾個(gè)設(shè)計(jì)點(diǎn)可以研究探索。

1. 重視預(yù)覽

在我們?nèi)粘Ｉ罟ぷ髦杏玫降母鞣N工具型產(chǎn)品里，經(jīng)常會(huì)使用到預(yù)覽功能，這是一種最簡單直接的提供可控感的設(shè)計(jì)方法。預(yù)覽能讓用戶看到具體操作后的目標(biāo)結(jié)果，不但能提高操作效率，更能給用戶非常直接且直觀的掌控感。

預(yù)覽的設(shè)計(jì)需要注意幾個(gè)關(guān)鍵點(diǎn)，首先，預(yù)覽需及時(shí)。我們提供預(yù)覽功能，目的是讓用戶直接看效果，但也正是因?yàn)檫@種直觀性，用戶同時(shí)也會(huì)將在預(yù)覽時(shí)看到的所有一切當(dāng)做是最終呈現(xiàn)效果，也就是說如果預(yù)覽出現(xiàn)問題，將會(huì)使用戶對(duì)最終效果產(chǎn)生懷疑。因此如果某個(gè)操作后預(yù)覽不夠及時(shí)，比如預(yù)覽加載時(shí)間過長，或者需要有前提（例如點(diǎn)擊保存按鈕）才會(huì)生效，用戶就會(huì)認(rèn)為真實(shí)的功能實(shí)現(xiàn)效果甚至性能有問題。

騰訊移動(dòng)推送平臺(tái)，在填寫標(biāo)題和內(nèi)容時(shí)右側(cè)的預(yù)覽視圖是沒有時(shí)間差及時(shí)變化的，給用戶真實(shí)、直觀的控制感

另外，在B端web界面上模擬C端手機(jī)界面的預(yù)覽雖然已經(jīng)能讓用戶看到實(shí)現(xiàn)效果，但移動(dòng)端和web端畢竟是不同的終端環(huán)境，不論再怎樣模擬都不可能顯示最真實(shí)效果，因此最好能提供給用戶可以在手機(jī)上預(yù)覽的入口，讓用戶在真實(shí)的設(shè)備和環(huán)境下查看最后的展示效果。

特別是涉及文字內(nèi)容顯示，以網(wǎng)易有料為例，用戶可以自己在B端平臺(tái)編輯文章然后分發(fā)到APP頻道內(nèi)，那最終的顯示效果如何，字號(hào)大小、行間距是否符合手機(jī)閱讀習(xí)慣，文章配圖顯示是否清晰等，都只有在手機(jī)上才能真實(shí)的查看出閱讀效果并發(fā)現(xiàn)相關(guān)問題，以便及時(shí)糾錯(cuò)改正。

網(wǎng)易有料，提供DemoAPP以便用戶可在手機(jī)上預(yù)覽最真實(shí)的展示效果

2. 所見即所得

預(yù)覽功能為可控感的建立提供了基礎(chǔ)，但這還不夠，在B、C兩端的交互過程中，考慮到要兼顧B端的操作效率和C端的直觀展示，所見即所得的設(shè)計(jì)方式就成為了最好的選擇。

所見即所得的設(shè)計(jì)概念在很多產(chǎn)品中都很常見，一般有三種。

1.?工作臺(tái)本身涵蓋預(yù)覽功能，拖拽組件完成內(nèi)容布局，調(diào)整參數(shù)完成配置，另外也提供更真實(shí)預(yù)覽界面查看效果，很多工具型的產(chǎn)品都采用這種模式。這種模式下每個(gè)步驟的操作都需由用戶手動(dòng)操作，享有完全控制權(quán)的狀態(tài)下也很直觀，但效率不足。

墨刀原型設(shè)計(jì)工具，工作臺(tái)本身就是一種預(yù)覽視圖，完成界面及原型設(shè)計(jì)后，也可點(diǎn)擊右上角「運(yùn)行」按鈕查看更純粹的界面預(yù)覽

2.?工作臺(tái)與預(yù)覽視圖相對(duì)獨(dú)立，一些文本編輯器和配置工具都采用過這種模式。這種模式下編輯效率得到極大提升，直觀性也很好。

上下分欄式的Markdown編輯器，所見即所得的模式使得編輯效率大大提高

個(gè)推推送平臺(tái)，推送信息的配置和移動(dòng)端信息預(yù)覽左右分開顯示，預(yù)覽視圖內(nèi)不可操作

3.?工作臺(tái)與預(yù)覽視圖雖相對(duì)獨(dú)立，但預(yù)覽視圖內(nèi)可操作，輔助完成部分編輯工作。這種模式代入感更強(qiáng)，但可能會(huì)影響操作的連貫性。

微信公眾平臺(tái)，添加菜單的操作在預(yù)覽視圖內(nèi)完成，其余配置在右側(cè)表單內(nèi)完成

這三種模式各有利弊，但落實(shí)到產(chǎn)品，還是要結(jié)合具體的業(yè)務(wù)場景來謹(jǐn)慎選擇。仍以網(wǎng)易有料為例，用戶在B端內(nèi)容管理平臺(tái)上進(jìn)行頻道管理操作時(shí)，由于移動(dòng)端產(chǎn)品根據(jù)本身業(yè)務(wù)需求和移動(dòng)端規(guī)范已設(shè)計(jì)完成，導(dǎo)航欄、tab欄這些組件并不允許用戶編輯；另外在B端能配置的只是頻道tab的名稱及類型、狀態(tài)等參數(shù)，并沒有需要用戶去添加的組件或元素，因此第一種模式雖然可控性強(qiáng)，但并不符合產(chǎn)品的實(shí)際情況。

后兩種模式在移動(dòng)端配置產(chǎn)品設(shè)計(jì)中更常見一些，幾經(jīng)嘗試，設(shè)計(jì)初期我們采用了第三種模式，讓用戶不但在預(yù)覽視圖有代入感的內(nèi)完成新建頻道、切換頻道順序這些基礎(chǔ)但重點(diǎn)的操作，還可以在后續(xù)的表單填寫部分完成配置流程，以達(dá)到操作便捷性和預(yù)覽直觀性的綜合。

交互初期方案，新建頻道和頻道排序都需在預(yù)覽視圖內(nèi)完成

但在后續(xù)的體驗(yàn)和測試中發(fā)現(xiàn)，雖然在手機(jī)預(yù)覽視圖內(nèi)的操作很少，但這種所謂有參與感的所見即所得，還是打亂了用戶管理頻道的連貫性，并且用戶即使在預(yù)覽視圖內(nèi)操作，得到的控制感也并沒有比獨(dú)立預(yù)覽多，相反的，切換頻道這個(gè)操作因?yàn)橹荒茉趨^(qū)域有限的預(yù)覽視圖內(nèi)進(jìn)行，反而給用戶帶來使用上的不便（用戶無法快速的定位到目標(biāo)頻道）。因此最終，我們還是采用了第二種模式，所有對(duì)頻道的新建、配置、調(diào)整位置等管理操作均由復(fù)雜表單完成，預(yù)覽視圖只提供預(yù)覽功能，再通過加強(qiáng)反饋的方式提高所見即所得的真實(shí)感和可控感。

最終交互方案，所有頻道管理都由復(fù)雜表單完成，預(yù)覽視圖只供預(yù)覽

3. 加強(qiáng)反饋

系統(tǒng)對(duì)操作給與及時(shí)的反饋和響應(yīng)是產(chǎn)品設(shè)計(jì)中的基礎(chǔ)要求，那在B端配置產(chǎn)品中，除了產(chǎn)品本身業(yè)務(wù)功能的操作反饋，“配置”的交互過程中的反饋就顯得更加重要。要讓用戶明確的感知到我在B端平臺(tái)進(jìn)行的每個(gè)配置操作都是實(shí)實(shí)在在能有效影響到移動(dòng)端界面和內(nèi)容的。

繼續(xù)以有料為例，完成各個(gè)頻道的配置后，經(jīng)發(fā)布移動(dòng)端界面才確定生效，在APP上才可查閱到最新的頻道內(nèi)容（編輯過程中預(yù)覽視圖雖能看到變化但并不生效）?！鞍l(fā)布”是一個(gè)重要的操作節(jié)點(diǎn)，發(fā)布成功，配置平臺(tái)與移動(dòng)端的交互也就成功了，因此在頁面頂部采用了比較重的狀態(tài)欄樣式，發(fā)布前后狀態(tài)欄明顯改變，通過這個(gè)變化給用戶反饋發(fā)布操作成功，同時(shí)配合一些文字說明，提醒用戶B端操作已告一段落可以去移動(dòng)端查看配置效果了。

發(fā)布前后狀態(tài)欄的明顯變化，讓用戶更加明確此時(shí)的場景狀態(tài)，避免產(chǎn)生困惑

再舉個(gè)例子，用戶在B端平臺(tái)上切換表單分別進(jìn)行編輯的過程中，手機(jī)預(yù)覽界面中的頻道不需點(diǎn)擊也會(huì)隨之自動(dòng)切換；除此之外，在手機(jī)預(yù)覽界面點(diǎn)擊頻道，同樣也能控制表單內(nèi)頻道的切換。這樣打通了配置表單和預(yù)覽視圖相互反饋的設(shè)計(jì)，不但使用戶在編輯頻道的流程中提高效率，更提高了B端平臺(tái)和移動(dòng)端的聯(lián)系以增強(qiáng)控制感。

網(wǎng)易有料，加強(qiáng)了配置表單和預(yù)覽視圖中頻道的聯(lián)系和反饋

4. 平衡內(nèi)容差異

作為內(nèi)容型產(chǎn)品，除了對(duì)移動(dòng)端進(jìn)行配置管理外，還有一部分重要的功能就是內(nèi)容的呈現(xiàn)。由于平臺(tái)、操作系統(tǒng)、交互方式等種種不同，同樣的內(nèi)容在PC端和移動(dòng)端查看閱覽是兩種完全不同的場景和體驗(yàn)。那怎樣平衡內(nèi)容B端生產(chǎn)而由移動(dòng)端閱覽的模式，減少因跨平臺(tái)而產(chǎn)生的影響手機(jī)端閱讀體驗(yàn)的問題，也是在產(chǎn)品設(shè)計(jì)中需要特別注意的一點(diǎn)。

平衡內(nèi)容差異的方法有很多，在微信公眾平臺(tái)的素材庫頁面，舊的版本由于自身文本編輯器的種種問題，導(dǎo)致各種第三方公眾號(hào)排版工具和插件大行其道，在近期的版本中，可以看到微信不斷優(yōu)化編輯器，不僅提供了兩端縮進(jìn)、段前距、段后距、字間距、模板等功能滿足了移動(dòng)端文章排版的需要，一些功能如字間距也只提供了更適合手機(jī)端的候選數(shù)值，通過這些方法為用戶提供更適合移動(dòng)端閱讀的B端文本編輯器。

微信公眾平臺(tái)，更適合移動(dòng)端閱讀的文本編輯器

在有料中，B端作為內(nèi)容配置平臺(tái)，內(nèi)容主要來自兩個(gè)部分，一部分是有料提供的內(nèi)容庫（例如網(wǎng)易生態(tài)下云音樂、云課堂等各個(gè)產(chǎn)品提供的優(yōu)質(zhì)內(nèi)容），另一部分用戶也可自己編輯原創(chuàng)內(nèi)容投遞到自己的APP下。 其中內(nèi)容庫由于來源眾多，不同的來源文本樣式都有不同，即使有的做過移動(dòng)端顯示的優(yōu)化，但優(yōu)化方案也不盡相同。因此為了控制移動(dòng)端的呈現(xiàn)效果，提升產(chǎn)品整體的視覺統(tǒng)一和閱讀體驗(yàn)，對(duì)于不同來源的內(nèi)容，我們采用了統(tǒng)一規(guī)范的排版規(guī)則，并且通過不斷的測試，在不影響原文基本段落樣式的基礎(chǔ)下，保證其在手機(jī)上閱讀的優(yōu)質(zhì)體驗(yàn)。

寫在最后

以上是我在項(xiàng)目實(shí)踐中進(jìn)行的一些問題思考和方法調(diào)研，其實(shí)很多時(shí)候移動(dòng)端的B端配置平臺(tái)并不會(huì)單獨(dú)出現(xiàn)，還會(huì)配套提供C端即移動(dòng)端的產(chǎn)品，當(dāng)產(chǎn)品范圍涵蓋了兩端產(chǎn)品時(shí)，除了上文提到的幾點(diǎn)，還會(huì)有很多其他細(xì)節(jié)需要注意（如保持兩端產(chǎn)品的視覺統(tǒng)一）。這類產(chǎn)品B、C兩端雖彼此獨(dú)立卻又相互依賴，因此設(shè)計(jì)還需站在全局性的綜合考慮，將兩個(gè)產(chǎn)品視為一個(gè)整體，避免厚此薄彼的情況發(fā)生。

作者：劉媛，網(wǎng)易數(shù)據(jù)科學(xué)中心交互設(shè)計(jì)師。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@劉媛

題圖來自 Unsplash，基于 CC0 協(xié)議