中后臺(tái)工具產(chǎn)品的面向用戶人群大多在企業(yè)內(nèi)部，通常情況下，產(chǎn)品經(jīng)理可能會(huì)更加注重功能和業(yè)務(wù)邏輯，但其實(shí)，中后臺(tái)產(chǎn)品的交互體驗(yàn)也十分重要，優(yōu)秀的交互體驗(yàn)，可以減少業(yè)務(wù)人員使用產(chǎn)品時(shí)所產(chǎn)生的困惑。一起來(lái)看看本文為中后臺(tái)產(chǎn)品經(jīng)理所總結(jié)的交互知識(shí)吧。

前言介紹

中后臺(tái)工具產(chǎn)品指的是為企業(yè)內(nèi)部用戶提供產(chǎn)品模塊，這類產(chǎn)品相較于用戶端（C 端），由于用戶人群受限于企業(yè)內(nèi)部，因此交互體驗(yàn)的容錯(cuò)性會(huì)更大，因此中后臺(tái)的產(chǎn)品經(jīng)理通常更關(guān)注功能和業(yè)務(wù)邏輯，而輕視交互體驗(yàn)。

伴隨企業(yè)規(guī)模和用戶群體擴(kuò)大，其實(shí)中后臺(tái)一些較差的產(chǎn)品交互體驗(yàn)，實(shí)際上也會(huì)對(duì)前線作業(yè)人員帶來(lái)更大的干擾，因此本文期望通過(guò)整理一些常用的交互知識(shí)，讓中后臺(tái)產(chǎn)品經(jīng)理能夠在日常工作中作出一些合理設(shè)計(jì)和判斷。

一、用戶端與中后臺(tái)產(chǎn)品相同點(diǎn)與區(qū)別

1. 相同點(diǎn)

1. 都要給人使用；
2. 都要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡；
3. 產(chǎn)品設(shè)計(jì)的核心思想：解決什么問(wèn)題。

2. 不同點(diǎn)

從產(chǎn)品設(shè)計(jì)角度來(lái)說(shuō)，用戶端產(chǎn)品偏重用戶體驗(yàn)，中后臺(tái)產(chǎn)品偏重信息流。

中后臺(tái)產(chǎn)品追求如何讓用戶在最短時(shí)間，最短路徑，最低成本達(dá)到目的。

中后臺(tái)端產(chǎn)品來(lái)說(shuō)，要解決的主要是不同生產(chǎn)關(guān)系的協(xié)作溝通需求，在中心化的組織架構(gòu)下，中后臺(tái)產(chǎn)品需要滿足不同層級(jí)，組織內(nèi)外的協(xié)作溝通。中后臺(tái)產(chǎn)品需要考慮比如權(quán)限設(shè)計(jì)，角色分配，運(yùn)營(yíng)數(shù)據(jù)展示等功能，在功能穩(wěn)定的前提下提升生產(chǎn)效率。

二、什么是好的用戶體驗(yàn)

中后臺(tái)產(chǎn)品面向的用戶對(duì)象是企業(yè)內(nèi)部，使用相關(guān)產(chǎn)品的用戶也是人，因此好的用戶體驗(yàn)的原理是相通的。

用戶體驗(yàn)良好的判定標(biāo)準(zhǔn)是：別讓用戶想、別讓用戶猜、別人用戶煩。針對(duì)中后臺(tái)流程性產(chǎn)品，細(xì)化來(lái)看在操作前、中、后都需要有良好的提示與反饋。

1. 操作前：可預(yù)知

如：產(chǎn)品界面中通過(guò)清晰的導(dǎo)航告訴用戶在哪里、能去哪里、會(huì)去到哪里。

2. 操作中：有反饋

針對(duì)用戶的每一步操作，予以明確的狀態(tài)變化。

3. 操作后：可撤銷

幫助用戶挽回錯(cuò)誤的決策。

三、輕松掌握的一些交互原理

1. 視覺動(dòng)線

人的閱讀方式應(yīng)該是遵循某種習(xí)慣進(jìn)行的，好像讀書本一樣——除了從左到右，還有從上到下的方式。閱讀引力是從上到下，從左到右，呈現(xiàn)Z字形移動(dòng)，而起點(diǎn)和終點(diǎn)會(huì)作為重點(diǎn)視覺記憶區(qū)，中間過(guò)程會(huì)輕掃作為次要視覺記憶區(qū)。

（本圖是介紹視覺動(dòng)線的網(wǎng)絡(luò)用圖）

一些奇奇怪怪的知識(shí)：阿拉伯字母的文字都是從右到左，因此他們的產(chǎn)品界面是都是從右到左設(shè)計(jì)。

2. 操作熱區(qū)

針對(duì)手機(jī)相關(guān)產(chǎn)品，Steven Hoober在文章《How do users really hold mobile devices?》進(jìn)行了廣泛的研究。用戶拿手機(jī)的方式有六種，甚至更多。大多數(shù)情況下，用戶用拇指觸摸屏幕，無(wú)論是單手還是雙手。而有時(shí)，也會(huì)用食指進(jìn)行觸控。

最重要的內(nèi)容應(yīng)該在中心，其他關(guān)鍵導(dǎo)航控件在底部。

3. 功能設(shè)計(jì)原則

1）減少輸入

能讓用戶點(diǎn)擊，就不讓用戶打字。如流程申請(qǐng)類產(chǎn)品功能，可以盡可能將手動(dòng)填寫的方式轉(zhuǎn)變成結(jié)構(gòu)化選項(xiàng)。

2）減少記憶

減少用戶需要記憶的操作，如使用短信驗(yàn)證碼、人臉識(shí)別等方式代替密碼。

3）縮短路徑

對(duì)于一次性需要填寫較多內(nèi)容的功能，支持暫存操作，密集復(fù)雜的表單項(xiàng)進(jìn)行拆解、歸類，降低用戶填寫壓力。

4）去除干擾

將不重要的項(xiàng)目合并折疊，讓用戶專注于重要、必要的填寫任務(wù)。

四、設(shè)計(jì)案例參考

PC端中后臺(tái)端產(chǎn)品基本由導(dǎo)航、篩選、表格幾大模塊構(gòu)成，表格面積占比最大，頁(yè)面呈現(xiàn)最為重要，會(huì)直接影響用戶的使用體驗(yàn)。

1. 導(dǎo)航設(shè)計(jì)

作用：導(dǎo)航欄在中后臺(tái)產(chǎn)品起到分發(fā)、引導(dǎo)作用，幫助用戶在復(fù)雜的后臺(tái)頁(yè)面中，尋找出自己真正想要的功能。

• 菜單廣度：導(dǎo)航菜單中每一個(gè)層級(jí)包含的菜單項(xiàng)數(shù)目為廣度。
• 菜單深度：導(dǎo)航菜單層級(jí)的數(shù)目為深度。

深廣度平衡幫助用戶進(jìn)行快速選擇，通過(guò)能夠?qū)φ麄€(gè)產(chǎn)品架構(gòu)有著第一眼的認(rèn)識(shí)。

7±2 原則：

原則解釋：1956 年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有 7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯(cuò)。因此菜單建議最多不要超過(guò) 9 個(gè)，最少不要低于5個(gè)，超過(guò)9個(gè)時(shí)，一定要對(duì)菜單進(jìn)行分組。

復(fù)雜中后臺(tái)產(chǎn)品導(dǎo)航建議采用混合式導(dǎo)航，如阿里云，由于功能較多，采用的就是橫縱向都有的導(dǎo)航。

2. 主要按鈕和次要按鈕如何擺放？

主要按鈕與次要按鈕如何放置，需要評(píng)估效率與準(zhǔn)確率。

一般來(lái)說(shuō)，順延用戶操作路徑，主按鈕要左側(cè)，提升錄入效率；控制表單全局的頂部按鈕、底部按鈕，一般置右側(cè)，讓用戶了解操作項(xiàng)，再進(jìn)行決策。

3. 表單設(shè)計(jì)

有明確的邏輯順序，通過(guò)步驟條簡(jiǎn)化任務(wù)；步驟小于3步，無(wú)需展示；橫向步驟條最常用，適合步驟較少的場(chǎng)景；縱向步驟條適合步驟較多或步驟數(shù)目處于動(dòng)態(tài)變化的場(chǎng)景。

60%的標(biāo)簽超過(guò)8個(gè)字或有國(guó)際化需求，使用頂對(duì)齊，視線從上至下，閱讀與表單填寫都高效直接。

50%標(biāo)簽名稱短，使用左右對(duì)齊（最常用）。

容易出錯(cuò)的表單填寫：

當(dāng)希望用戶詳細(xì)閱讀時(shí)，解釋文字的展示樣式。

4. 提示信息

5. 數(shù)據(jù)脫敏設(shè)計(jì)

最后，產(chǎn)品功能和交互設(shè)計(jì)一定需要結(jié)合用戶場(chǎng)景，例如一些面向戶外工作場(chǎng)景的功能，就不適應(yīng)正常的標(biāo)準(zhǔn)，反而相應(yīng)的字體大小、交互設(shè)計(jì)會(huì)更加強(qiáng)烈，以上交互原則也是一樣，需要與自己實(shí)際面對(duì)的用戶場(chǎng)景選擇合理的交互方案。