本文是參考國內(nèi)交互設(shè)計標準網(wǎng)站及用戶行為研究實現(xiàn)的用戶體驗設(shè)計規(guī)范，用于后臺設(shè)計，網(wǎng)站設(shè)計等。

一、統(tǒng)一性

涉及到的產(chǎn)品越多，產(chǎn)品統(tǒng)一性越強，實現(xiàn)信息同頻，開發(fā)和設(shè)計快速了解信息

• 字段統(tǒng)一：模塊之間的tab的字段位置保持統(tǒng)一，減少用戶記憶負擔

• 按鈕位置統(tǒng)一：（頁面功能操作按鈕，添加按鈕，導出按鈕，批量操作按鈕的位置）

一個項目中會涉及到多種按鈕，甚至一個頁面中也會涉及到多種不同功能的按鈕，這個就需要把同一類型或同一功能的按鈕，它們的位置統(tǒng)一。減少用戶學習成本。

因為如果同一樣的功能按鈕在不同的變換位置的話會打亂用戶已經(jīng)形成的習慣，增加其學習成本。（盡量采取以下情況的一種）

• 幫助說明的統(tǒng)一性

幫助說明的表現(xiàn)形式有很多種，但不管選那種整個項目要保持統(tǒng)一，一些特殊情況除外，固定一個位置，可以方便用戶在最短的時間內(nèi)，快速完成此項操作和獲取內(nèi)容。

二、權(quán)重性

權(quán)重是為了突出有效信息，也能在不同元素建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

• 主次關(guān)系對比

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷，來突出其中一項相對更重要或者更高頻的操作。

突出的方法，不局限于強化重點項，也可以是弱化其他項。

按鈕主次

信息主次

但是在一些需要用戶慎重決策的場景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導用戶做出判斷

數(shù)字主次

• 操作難易順序

表單在遵守操作流程的情況下，讓用戶涉及到的操作從易到難，讓用戶有填下去的動力。

排序規(guī)則

（1）有“有默認項”的選項；

（2）有“選項”的選項；

（3）只輸入“數(shù)字”的選項；

（4）“添加圖片”“修改”等涉及復(fù)雜操作的選項；

（5）“備注”“商品賣點”等選擇。

左右排版的時候?qū)ⅰ爸匾靥铐棥毕仍趶淖筮叄v向排列）開始排版（排版時仍按照我們的從簡到難的規(guī)則）

注：當“必填項”比“非必填項”多時，排版上要考慮，就按照次序，左邊排滿，再排右邊。

• 可視區(qū)域不=可點擊區(qū)域

在使用Table 時，文字鏈的點擊范圍受到文字長短影響，可以設(shè)置整個單元格為熱區(qū)，以便用戶觸發(fā)。

注：當懸浮在“客戶”所在的文字鏈單元格時，鼠標

【指針】隨即變?yōu)椤臼中汀浚瑔螕艏纯商D(zhuǎn)。

當需要增強按鈕的響應(yīng)性時，可以通過增加用戶點擊熱區(qū)的范圍，而不是增大按鈕形狀，從而增強響應(yīng)性，又不缺失美感。

注：在移動端尤其適用。

鼠標移入按鈕附近，即可激活Hover 狀態(tài)

三、有效交互

• 頁內(nèi)編輯：

單字段行內(nèi)編輯

當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』

狀態(tài)一：普通的瀏覽模式，不區(qū)分可編輯行和不可編輯行；

狀態(tài)二：鼠標懸停時，『指針』變?yōu)椤菏中汀?，編輯區(qū)域底色變黃，出現(xiàn)『Tooltips』提示單擊編輯；

狀態(tài)三：鼠標點擊后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。

單字段行內(nèi)編輯

當『易讀性』為主，同時又要突出操作性的『易編輯性』時，可使用『文字鏈/圖標編輯』

狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標；

狀態(tài)二：鼠標點擊『編輯』后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。

多字段行內(nèi)編輯

當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』

注：編輯模式在不破壞整體性的前提下，可擴大空間，以便放下『輸入框』等表單元素；其中，在Table 中進行編輯模式切換時，需要保證每列的不跳動。

• 輕量化設(shè)計

減少負擔，增加輕量化的操作

注：刪除的操作是謹慎的，系統(tǒng)在不打斷當前操作的時候給出二次提醒確認。

• 輸入框?qū)崟r判斷

填寫表單的條件反饋。

注：不需要提交后才出現(xiàn)提示，輸入及時給用戶反饋

• toast反饋提示

完成整個操作后的提示以及系統(tǒng)提示

注：重要的，文字多于15個字以上不適合放在toast里面提示。

• 提供邀請

提供下一步操作的入口

不僅要提示他發(fā)生了什么，還能引導他怎么做，甚至能讓他一步到位直接跳轉(zhuǎn)到要進行下一步操作的頁面去操作

當頁面沒有按鈕時，提供明確的入口。

最后，關(guān)于后臺的用戶體驗設(shè)計規(guī)范就總結(jié)到這里啦。

文章來源：站酷    作者：chaih
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)