APP交互受用戶體驗驅動，臻於精緻，縱深廣闊。web後臺交互因功能複雜而常常做的難看，屬於內在”美”，要溫度不要風度。對於新人產品，他做的移動交互你可能覺得不滿意，但能湊合用。但是拉去做後端的話，他很可能遇到“這東西我咋畫啊？以前沒整過這麼磕磣的！”這樣的時刻。因為後端產品類屬erp系統，不是人人都有機會偷窺別人家後院的‘過牆梯’。
本文繼“後端產品經理筆記：需求文檔語法”之後，梳理後端交互方案，有興趣的朋友可以看看。因為比較基礎，所以歡迎交流指正。
一、後端交互概述
（1）成熟的後端web系統，甚至可以不跟開發說界面和交互，只需要在後臺數據、邏輯規則層面交代清楚，然後一筆帶過：“頁面展示前6個字段，其中字段A、B做搜索”。
為什麼？因為每一頁的格式都是一樣的，插件都是複用的。比如時間搜索都是‘2018-01-02 00:00:00’-2018-02-02 00:01:01’的格式。
儘管同個輪子在不同模塊可能會大材小用或者捉襟見肘，但是這樣最快，用戶能忍受，難題可解決。
所以這種文檔寫法是不是很輕鬆又不失體面。——當然前提是你的開發不是新入坑的。
（2）但是遇到跳出六界之外的奇怪需求，或是新系統的時候，輪子不夠用，不得不定義界面效果。
概括起來就是：表格、搜索項、按鈕、彈窗、加載、提醒等功能，及其交互方式、顏色、字體、大小、間距、位置等。
（3）表格
- 操作欄放左右都有好處。如果沒有A/B測試或用戶訪談數據支持時，建議還是放在左邊。因為你要相信業務人員的熟練程度，已經到了‘沒槍頭都能捅死人’的境界，他們來頁面就是為走完流程。
- 表格的每個獨立方格有自適應和固定大小的，內容不規律時候記得告訴開發，避免擠壓變形。
- 如果欄位較多，要麼不重要的字段就不做頁面展示。實在不行可以放一個【更多】按鈕，點擊後次級展開。實在實在不行的時候才做列表下發的橫向滾動條。
- 數據量大的時候，注意每頁不要展示太多。50條足夠，主要是為加載速度著急。
- 局部加載：初打開頁面時候可以為空，不加載。需點擊搜索按鈕才加載，避免等待過長。
- 表格行之間用斑馬色做背景。
- 一個表格中內容較長的，自動換行。若2-3行展示不完，省略，防止上下拉過長。
（4）搜索項
相似項可以合併搜索。比如：修改時間/新增時間下拉選擇切換，共用時間選擇框。優點是省地方，缺點是不能選交叉的部分。
必要時也可以在右側增加差異，比如增加‘搜全局’/‘搜當前’，也或者如下圖：
下拉選項進行篩選的時候，要考慮多選、搜索、全選： 即點擊下拉框 則選項帶複選按鈕，且上方出現搜索框。
聯動搜索：也是多用在下拉框搜索中，比如：‘性別’項選了女的時候，彈出‘是否生育’的下拉框。若選了男則不會出現該次級選項。
帶大小關係的怎麼玩呢？
比如下面這個可以這樣：
當選大於的時候，後面置灰。選介於時候 兩側都能輸入。
（5）彈框
- 弱提醒：toast提醒，祈禱知悉的作用。無關閉鍵，1.5-3秒消失。期間不影響業務執行其他操作。
- 二次確認框：除了有意引導用戶的，基本都老實實把‘確定’按鈕放在左側，‘取消’放在右側。
- 通過按鈕管控不同權限：對規則設置頁面只有查看沒有編輯權限的時候，可以將已有的編輯頁面的保存按鈕隱藏即可，方案和開發都省事。
- 彈框/新頁面/側滑頁面：如果內容獨立且零碎，彈出比較乾淨。如果新界面內容多，比如：也是表格的形式，就用打開新頁面。如果需要用新舊頁面要做對比，則側滑，比如：點擊則左滑出新頁面。
二、場景小例子
（1）上傳圖片是個很簡單的場景。我們分析下，在後端做這個至少需要滿足3點：上傳；刪除；預覽縮略圖。
所以簡單的可以這樣：
（2）如果你做規則設置，那麼想象一下，新建規則頁面有多個可選參數，還有非參數項，比如：是否啟用、名稱、優先級:，當需要給一個規則設置優先級的時候。
怎麼選優先級呢？
分析下優先級的目的是，新規則要在全部已有規則中排個優先順序，因此至少要滿足兩點：
- 用戶可以將當前規則放置在任意排位上。
- 用戶可以看到之前已排上優先級的規則數據。
我們可以看下這個方式：
在新建的規則優先級欄位的放置【編輯】按鈕，點擊該按鈕打開一個含有所有已有規則的彈框，就中列出各規則名稱和對應的優先級。然後點擊任何一條，則將新規則插入其前（也可以規定為其後），然後保存即可。
（以上所述都是比較簡單的，有機會做補充，歡迎大家交流。）
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
