編輯導(dǎo)語：UI界面設(shè)計，是對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。那么，B端產(chǎn)品UI界面進(jìn)行交互設(shè)計的通用規(guī)范是什么呢？本文作者為我們做出了解答。

一、概述

1. 前言

最近負(fù)責(zé)參與編寫了公司的《B端UI界面交互設(shè)計規(guī)范》，主要對用戶與產(chǎn)品交互的各個方面做了相關(guān)的描述，為B端產(chǎn)品的用戶界面提供了規(guī)范與指導(dǎo)。

2. 目標(biāo)

《B端UI界面交互設(shè)計規(guī)范》為通用性質(zhì)，用于指導(dǎo)與約束B端UI開發(fā)。

• 在UI界面開發(fā)過程中，給各產(chǎn)品相關(guān)開發(fā)人員提供統(tǒng)一的規(guī)范與指導(dǎo)，提升了溝通效率，保證了產(chǎn)品界面的最終規(guī)范化的實現(xiàn)效果。
• 通過規(guī)范保證了較好的體驗方式并可在公司內(nèi)部進(jìn)行復(fù)用：提升了開發(fā)效率，降低了UI開發(fā)成本，提高了產(chǎn)品UI品質(zhì)。
• 保持了B端各模塊UI界面外觀與操作行為的一致性，加強(qiáng)了產(chǎn)品品牌化特征。

3. 適用范圍

本規(guī)范適用于B端所有產(chǎn)品，用于約束產(chǎn)品UI界面信息、操作交互、通用組件等相關(guān)內(nèi)容，適用于產(chǎn)品經(jīng)理、產(chǎn)品交互人員、產(chǎn)品UI設(shè)計人員、產(chǎn)品開發(fā)、測試人員。

4. 基本原則

本規(guī)范相關(guān)行為交互約束基于UCD相關(guān)方法論，參考尼爾森（Jakbob Nielsen）提出的十大可用性原則進(jìn)行設(shè)計：

1）狀態(tài)可見性原則

用戶在頁面上的任何操作，無論是單擊、滾動還是按下鍵盤，頁面應(yīng)及時給出反饋。其中”及時“是指，頁面響應(yīng)事件小于用戶能夠忍受的等待時間。

2）環(huán)境貼切原則

頁面一切表現(xiàn)和描述，應(yīng)該盡可能貼近用戶所在的環(huán)境（年齡、學(xué)歷、文化、時代背景），而不要使用世界第二的語言。

3）撤銷重做的原則

為了避免用戶的誤用和誤擊，網(wǎng)頁應(yīng)提供撤銷與重做的功能。

4）一致性原則

使用同一用語、功能、操作保持一致，同樣的語言、同樣的情景、操作應(yīng)該出現(xiàn)同樣的結(jié)果。

5）防錯原則

通過頁面的設(shè)計、重組或特別安排、防止用戶出錯，比出現(xiàn)錯誤信息提示更好的是更用心的設(shè)計防止這類問題發(fā)生。

6）易取原則

盡量減少用戶對操作目標(biāo)的記憶負(fù)荷，動作和選項都應(yīng)該是可見的，把需要記憶的內(nèi)容擺上臺面。

7）靈活高效原則

中級用戶的數(shù)量遠(yuǎn)高于初級和高級用戶，不要低估和輕視為大多數(shù)用戶的設(shè)計，保持靈活高效。

8）易掃原則

用戶瀏覽網(wǎng)頁一般是掃視閱讀，這意味重點信息的突出、弱化無關(guān)項以及剔除無關(guān)信息就顯得尤為重要了。

9）容錯原則

錯誤信息應(yīng)該用語言表達(dá)（不用代碼），較準(zhǔn)確地反映問題所在，并且提出一個建設(shè)性的解決方案。

10）人性化幫助原則

如果系統(tǒng)不使用文檔是最好的，但是有必要提供的幫助和文檔。任何信息應(yīng)日你故意去搜索，專注于用戶的任務(wù)，列出具體的步驟來進(jìn)行。

幫助性提示最好的方式是：無需提示、一次性提示、常駐提示、幫助文檔。

二、UI交互通用規(guī)范

以下為B端產(chǎn)品交互設(shè)計通則，是所有的交互模式必須遵守的普遍規(guī)范，用以統(tǒng)一產(chǎn)品的交互行為，包括可用、不可用、請求異常、加載異常等。

1. 受范性指示

受范性，是指鼠標(biāo)指針移過可點擊區(qū)域時的視覺變化。用以說明該對象是可操作的，以及何時可以進(jìn)行操作。

• 可點擊與不可點擊情況下，鼠標(biāo)樣式應(yīng)當(dāng)有所變化；

• 對象對數(shù)表指針的移動的響應(yīng)必須及時有效；
• 響應(yīng)形式必須明確清晰（如：鼠標(biāo)滑過按鈕，提示按鈕被按下效果）；
• 受范性表現(xiàn)要保持一致：同等功能和操作的元素受范性必須相同（如：鼠標(biāo)指向鏈接文字時都做同樣的變化）；
• 在鼠標(biāo)指針移開時對象必須及時恢復(fù)原來狀態(tài)；
• 命令按鈕也經(jīng)常被實現(xiàn)為鏈接樣式（文本+下劃線），此時為了與普通的鏈接相區(qū)分，必須提供非常明顯的不同于鏈接的受范性制指示。

2. 關(guān)鍵操作指引

當(dāng)界面中出現(xiàn)多個操作項，從產(chǎn)品設(shè)計角度，用戶重點關(guān)注或推薦用戶操作的關(guān)鍵項需通過色彩、操作引導(dǎo)等方式幫助用戶關(guān)注。

在一個操作區(qū)域內(nèi)，關(guān)鍵操作項只能為一個，如圖所示：

對于可能會影響用戶操作，且易被用戶忽略的操作項，需做好操作指引，如下圖所示：

3. 操作不可用狀態(tài)

當(dāng)用戶在某些場景不能進(jìn)行操作時，該命令按鈕（或其他的形式）在外觀上應(yīng)顯示為不可用狀態(tài)（如置灰），來使界面穩(wěn)定，使用戶保持恒定和完整的思維模式，減少用戶的認(rèn)知負(fù)擔(dān)。

顯示為不可用狀態(tài)的按鈕或文本必須保持與可用狀態(tài)的位置、大小、形態(tài)保持一致，僅顏色、灰度和立體效果等發(fā)生變化，如下圖所示：

鼠標(biāo)移入到不可用區(qū)域時簡要提示不可用原因，如圖所示：

操作不可用的情況主要包括：

• 目錄導(dǎo)航不可用
• 操作不可用
• 工具按鈕不可用

基礎(chǔ)規(guī)則：

• 因授權(quán)導(dǎo)致的操作不可用，該操作項不可見；
• 因操作行為受用戶前置操作條件影響不可用，標(biāo)注為不可用狀態(tài)；
• 因服務(wù)安裝失敗、或服務(wù)異常導(dǎo)致不可用，該操作相比不可見；
• 不可用狀態(tài)需提示操作不可用原因，在有多種條件時，優(yōu)先顯示第一種不可用原因。

4. 操作行為及時反饋

當(dāng)用戶在界面中進(jìn)行相關(guān)操作時，需及時反饋用戶當(dāng)前行為產(chǎn)生的結(jié)果。

操作反饋情況主要包括：

• 如輸入時，輸入數(shù)據(jù)合法性檢查，不合法的數(shù)據(jù)輸入及時提醒。如下圖所示：

• 避免用戶進(jìn)行不在合理范圍內(nèi)的頻繁操作，及時進(jìn)行界面元素效果響應(yīng)，避免用戶頻繁操作下發(fā)指令出現(xiàn)不必要的錯誤。如下圖所示：

• 需要用戶進(jìn)行等待時，提供用戶當(dāng)前行為狀態(tài)反饋，無法給出準(zhǔn)確、有效的狀態(tài)時，建議給出一個范圍值或者操作邊界。如下圖所示：

• 對行為結(jié)果，及時告知用戶操作結(jié)果，反饋應(yīng)當(dāng)盡量避免描述含糊不清。如下圖所示：

下一篇講解B端“文本”UI交互設(shè)計規(guī)范。

作者：云計算產(chǎn)品，公眾號：云桌面產(chǎn)品，歡迎關(guān)注

本文由 @云計算產(chǎn)品 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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