APP交互受用戶體驗(yàn)驅(qū)動(dòng)，臻于精致，縱深廣闊。web后臺(tái)交互因功能復(fù)雜而常常做的難看，屬于內(nèi)在”美”，要溫度不要風(fēng)度。對(duì)于新人產(chǎn)品，他做的移動(dòng)交互你可能覺(jué)得不滿意，但能湊合用。但是拉去做后端的話，他很可能遇到“這東西我咋畫(huà)啊？以前沒(méi)整過(guò)這么磕磣的！”這樣的時(shí)刻。因?yàn)楹蠖水a(chǎn)品類屬erp系統(tǒng)，不是人人都有機(jī)會(huì)偷窺別人家后院的‘過(guò)墻梯’。

本文繼“后端產(chǎn)品經(jīng)理筆記：需求文檔語(yǔ)法”之后，梳理后端交互方案，有興趣的朋友可以看看。因?yàn)楸容^基礎(chǔ)，所以歡迎交流指正。

一、后端交互概述

（1）成熟的后端web系統(tǒng)，甚至可以不跟開(kāi)發(fā)說(shuō)界面和交互，只需要在后臺(tái)數(shù)據(jù)、邏輯規(guī)則層面交代清楚，然后一筆帶過(guò)：“頁(yè)面展示前6個(gè)字段，其中字段A、B做搜索”。

為什么？因?yàn)槊恳豁?yè)的格式都是一樣的，插件都是復(fù)用的。比如時(shí)間搜索都是‘2018-01-02 00:00:00’-2018-02-02 00:01:01’的格式。

盡管同個(gè)輪子在不同模塊可能會(huì)大材小用或者捉襟見(jiàn)肘，但是這樣最快，用戶能忍受，難題可解決。

所以這種文檔寫(xiě)法是不是很輕松又不失體面?！?dāng)然前提是你的開(kāi)發(fā)不是新入坑的。

（2）但是遇到跳出六界之外的奇怪需求，或是新系統(tǒng)的時(shí)候，輪子不夠用，不得不定義界面效果。

概括起來(lái)就是：表格、搜索項(xiàng)、按鈕、彈窗、加載、提醒等功能，及其交互方式、顏色、字體、大小、間距、位置等。

（3）表格

• 操作欄放左右都有好處。如果沒(méi)有A/B測(cè)試或用戶訪談數(shù)據(jù)支持時(shí)，建議還是放在左邊。因?yàn)槟阋嘈艠I(yè)務(wù)人員的熟練程度，已經(jīng)到了‘沒(méi)槍頭都能捅死人’的境界，他們來(lái)頁(yè)面就是為走完流程。
• 表格的每個(gè)獨(dú)立方格有自適應(yīng)和固定大小的，內(nèi)容不規(guī)律時(shí)候記得告訴開(kāi)發(fā)，避免擠壓變形。
• 如果欄位較多，要么不重要的字段就不做頁(yè)面展示。實(shí)在不行可以放一個(gè)【更多】按鈕，點(diǎn)擊后次級(jí)展開(kāi)。實(shí)在實(shí)在不行的時(shí)候才做列表下發(fā)的橫向滾動(dòng)條。
• 數(shù)據(jù)量大的時(shí)候，注意每頁(yè)不要展示太多。50條足夠，主要是為加載速度著急。
• 局部加載：初打開(kāi)頁(yè)面時(shí)候可以為空，不加載。需點(diǎn)擊搜索按鈕才加載，避免等待過(guò)長(zhǎng)。
• 表格行之間用斑馬色做背景。
• 一個(gè)表格中內(nèi)容較長(zhǎng)的，自動(dòng)換行。若2-3行展示不完，省略，防止上下拉過(guò)長(zhǎng)。

（4）搜索項(xiàng)

相似項(xiàng)可以合并搜索。比如：修改時(shí)間/新增時(shí)間下拉選擇切換，共用時(shí)間選擇框。優(yōu)點(diǎn)是省地方，缺點(diǎn)是不能選交叉的部分。

必要時(shí)也可以在右側(cè)增加差異，比如增加‘搜全局’/‘搜當(dāng)前’，也或者如下圖：

下拉選項(xiàng)進(jìn)行篩選的時(shí)候，要考慮多選、搜索、全選： 即點(diǎn)擊下拉框 則選項(xiàng)帶復(fù)選按鈕，且上方出現(xiàn)搜索框。

聯(lián)動(dòng)搜索：也是多用在下拉框搜索中，比如：‘性別’項(xiàng)選了女的時(shí)候，彈出‘是否生育’的下拉框。若選了男則不會(huì)出現(xiàn)該次級(jí)選項(xiàng)。

帶大小關(guān)系的怎么玩呢？

比如下面這個(gè)可以這樣：

當(dāng)選大于的時(shí)候，后面置灰。選介于時(shí)候 兩側(cè)都能輸入。

（5）彈框

• 弱提醒：toast提醒，祈禱知悉的作用。無(wú)關(guān)閉鍵，1.5-3秒消失。期間不影響業(yè)務(wù)執(zhí)行其他操作。
• 二次確認(rèn)框：除了有意引導(dǎo)用戶的，基本都老實(shí)實(shí)把‘確定’按鈕放在左側(cè)，‘取消’放在右側(cè)。
• 通過(guò)按鈕管控不同權(quán)限：對(duì)規(guī)則設(shè)置頁(yè)面只有查看沒(méi)有編輯權(quán)限的時(shí)候，可以將已有的編輯頁(yè)面的保存按鈕隱藏即可，方案和開(kāi)發(fā)都省事。
• 彈框/新頁(yè)面/側(cè)滑頁(yè)面：如果內(nèi)容獨(dú)立且零碎，彈出比較干凈。如果新界面內(nèi)容多，比如：也是表格的形式，就用打開(kāi)新頁(yè)面。如果需要用新舊頁(yè)面要做對(duì)比，則側(cè)滑，比如：點(diǎn)擊則左滑出新頁(yè)面。

二、場(chǎng)景小例子

（1）上傳圖片是個(gè)很簡(jiǎn)單的場(chǎng)景。我們分析下，在后端做這個(gè)至少需要滿足3點(diǎn)：上傳；刪除；預(yù)覽縮略圖。

所以簡(jiǎn)單的可以這樣：

（2）如果你做規(guī)則設(shè)置，那么想象一下，新建規(guī)則頁(yè)面有多個(gè)可選參數(shù)，還有非參數(shù)項(xiàng)，比如：是否啟用、名稱、優(yōu)先級(jí):，當(dāng)需要給一個(gè)規(guī)則設(shè)置優(yōu)先級(jí)的時(shí)候。

怎么選優(yōu)先級(jí)呢？

分析下優(yōu)先級(jí)的目的是，新規(guī)則要在全部已有規(guī)則中排個(gè)優(yōu)先順序，因此至少要滿足兩點(diǎn)：

1. 用戶可以將當(dāng)前規(guī)則放置在任意排位上。
2. 用戶可以看到之前已排上優(yōu)先級(jí)的規(guī)則數(shù)據(jù)。

我們可以看下這個(gè)方式：

在新建的規(guī)則優(yōu)先級(jí)欄位的放置【編輯】按鈕，點(diǎn)擊該按鈕打開(kāi)一個(gè)含有所有已有規(guī)則的彈框，就中列出各規(guī)則名稱和對(duì)應(yīng)的優(yōu)先級(jí)。然后點(diǎn)擊任何一條，則將新規(guī)則插入其前（也可以規(guī)定為其后），然后保存即可。

（以上所述都是比較簡(jiǎn)單的，有機(jī)會(huì)做補(bǔ)充，歡迎大家交流。）

本文由 @環(huán)滁皆山也 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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