B端UI界面交互設(shè)計(jì)規(guī)范概述
編輯導(dǎo)語(yǔ):UI界面設(shè)計(jì),是對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。那么,B端產(chǎn)品UI界面進(jìn)行交互設(shè)計(jì)的通用規(guī)范是什么呢?本文作者為我們做出了解答。
一、概述
1. 前言
最近負(fù)責(zé)參與編寫了公司的《B端UI界面交互設(shè)計(jì)規(guī)范》,主要對(duì)用戶與產(chǎn)品交互的各個(gè)方面做了相關(guān)的描述,為B端產(chǎn)品的用戶界面提供了規(guī)范與指導(dǎo)。
2. 目標(biāo)
《B端UI界面交互設(shè)計(jì)規(guī)范》為通用性質(zhì),用于指導(dǎo)與約束B端UI開發(fā)。
- 在UI界面開發(fā)過(guò)程中,給各產(chǎn)品相關(guān)開發(fā)人員提供統(tǒng)一的規(guī)范與指導(dǎo),提升了溝通效率,保證了產(chǎn)品界面的最終規(guī)范化的實(shí)現(xiàn)效果。
- 通過(guò)規(guī)范保證了較好的體驗(yàn)方式并可在公司內(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è)計(jì)人員、產(chǎn)品開發(fā)、測(cè)試人員。
4. 基本原則
本規(guī)范相關(guān)行為交互約束基于UCD相關(guān)方法論,參考尼爾森(Jakbob Nielsen)提出的十大可用性原則進(jìn)行設(shè)計(jì):
1)狀態(tài)可見(jiàn)性原則
用戶在頁(yè)面上的任何操作,無(wú)論是單擊、滾動(dòng)還是按下鍵盤,頁(yè)面應(yīng)及時(shí)給出反饋。其中”及時(shí)“是指,頁(yè)面響應(yīng)事件小于用戶能夠忍受的等待時(shí)間。
2)環(huán)境貼切原則
頁(yè)面一切表現(xiàn)和描述,應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時(shí)代背景),而不要使用世界第二的語(yǔ)言。
3)撤銷重做的原則
為了避免用戶的誤用和誤擊,網(wǎng)頁(yè)應(yīng)提供撤銷與重做的功能。
4)一致性原則
使用同一用語(yǔ)、功能、操作保持一致,同樣的語(yǔ)言、同樣的情景、操作應(yīng)該出現(xiàn)同樣的結(jié)果。
5)防錯(cuò)原則
通過(guò)頁(yè)面的設(shè)計(jì)、重組或特別安排、防止用戶出錯(cuò),比出現(xiàn)錯(cuò)誤信息提示更好的是更用心的設(shè)計(jì)防止這類問(wèn)題發(fā)生。
6)易取原則
盡量減少用戶對(duì)操作目標(biāo)的記憶負(fù)荷,動(dòng)作和選項(xiàng)都應(yīng)該是可見(jiàn)的,把需要記憶的內(nèi)容擺上臺(tái)面。
7)靈活高效原則
中級(jí)用戶的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶,不要低估和輕視為大多數(shù)用戶的設(shè)計(jì),保持靈活高效。
8)易掃原則
用戶瀏覽網(wǎng)頁(yè)一般是掃視閱讀,這意味重點(diǎn)信息的突出、弱化無(wú)關(guān)項(xiàng)以及剔除無(wú)關(guān)信息就顯得尤為重要了。
9)容錯(cuò)原則
錯(cuò)誤信息應(yīng)該用語(yǔ)言表達(dá)(不用代碼),較準(zhǔn)確地反映問(wèn)題所在,并且提出一個(gè)建設(shè)性的解決方案。
10)人性化幫助原則
如果系統(tǒng)不使用文檔是最好的,但是有必要提供的幫助和文檔。任何信息應(yīng)日你故意去搜索,專注于用戶的任務(wù),列出具體的步驟來(lái)進(jìn)行。
幫助性提示最好的方式是:無(wú)需提示、一次性提示、常駐提示、幫助文檔。
二、UI交互通用規(guī)范
以下為B端產(chǎn)品交互設(shè)計(jì)通則,是所有的交互模式必須遵守的普遍規(guī)范,用以統(tǒng)一產(chǎn)品的交互行為,包括可用、不可用、請(qǐng)求異常、加載異常等。
1. 受范性指示
受范性,是指鼠標(biāo)指針移過(guò)可點(diǎn)擊區(qū)域時(shí)的視覺(jué)變化。用以說(shuō)明該對(duì)象是可操作的,以及何時(shí)可以進(jìn)行操作。
- 可點(diǎn)擊與不可點(diǎn)擊情況下,鼠標(biāo)樣式應(yīng)當(dāng)有所變化;
- 對(duì)象對(duì)數(shù)表指針的移動(dòng)的響應(yīng)必須及時(shí)有效;
- 響應(yīng)形式必須明確清晰(如:鼠標(biāo)滑過(guò)按鈕,提示按鈕被按下效果);
- 受范性表現(xiàn)要保持一致:同等功能和操作的元素受范性必須相同(如:鼠標(biāo)指向鏈接文字時(shí)都做同樣的變化);
- 在鼠標(biāo)指針移開時(shí)對(duì)象必須及時(shí)恢復(fù)原來(lái)狀態(tài);
- 命令按鈕也經(jīng)常被實(shí)現(xiàn)為鏈接樣式(文本+下劃線),此時(shí)為了與普通的鏈接相區(qū)分,必須提供非常明顯的不同于鏈接的受范性制指示。
2. 關(guān)鍵操作指引
當(dāng)界面中出現(xiàn)多個(gè)操作項(xiàng),從產(chǎn)品設(shè)計(jì)角度,用戶重點(diǎn)關(guān)注或推薦用戶操作的關(guān)鍵項(xiàng)需通過(guò)色彩、操作引導(dǎo)等方式幫助用戶關(guān)注。
在一個(gè)操作區(qū)域內(nèi),關(guān)鍵操作項(xiàng)只能為一個(gè),如圖所示:
對(duì)于可能會(huì)影響用戶操作,且易被用戶忽略的操作項(xiàng),需做好操作指引,如下圖所示:
3. 操作不可用狀態(tài)
當(dāng)用戶在某些場(chǎng)景不能進(jìn)行操作時(shí),該命令按鈕(或其他的形式)在外觀上應(yīng)顯示為不可用狀態(tài)(如置灰),來(lái)使界面穩(wěn)定,使用戶保持恒定和完整的思維模式,減少用戶的認(rèn)知負(fù)擔(dān)。
顯示為不可用狀態(tài)的按鈕或文本必須保持與可用狀態(tài)的位置、大小、形態(tài)保持一致,僅顏色、灰度和立體效果等發(fā)生變化,如下圖所示:
鼠標(biāo)移入到不可用區(qū)域時(shí)簡(jiǎn)要提示不可用原因,如圖所示:
操作不可用的情況主要包括:
- 目錄導(dǎo)航不可用
- 操作不可用
- 工具按鈕不可用
基礎(chǔ)規(guī)則:
- 因授權(quán)導(dǎo)致的操作不可用,該操作項(xiàng)不可見(jiàn);
- 因操作行為受用戶前置操作條件影響不可用,標(biāo)注為不可用狀態(tài);
- 因服務(wù)安裝失敗、或服務(wù)異常導(dǎo)致不可用,該操作相比不可見(jiàn);
- 不可用狀態(tài)需提示操作不可用原因,在有多種條件時(shí),優(yōu)先顯示第一種不可用原因。
4. 操作行為及時(shí)反饋
當(dāng)用戶在界面中進(jìn)行相關(guān)操作時(shí),需及時(shí)反饋用戶當(dāng)前行為產(chǎn)生的結(jié)果。
操作反饋情況主要包括:
- 如輸入時(shí),輸入數(shù)據(jù)合法性檢查,不合法的數(shù)據(jù)輸入及時(shí)提醒。如下圖所示:
- 避免用戶進(jìn)行不在合理范圍內(nèi)的頻繁操作,及時(shí)進(jìn)行界面元素效果響應(yīng),避免用戶頻繁操作下發(fā)指令出現(xiàn)不必要的錯(cuò)誤。如下圖所示:
- 需要用戶進(jìn)行等待時(shí),提供用戶當(dāng)前行為狀態(tài)反饋,無(wú)法給出準(zhǔn)確、有效的狀態(tài)時(shí),建議給出一個(gè)范圍值或者操作邊界。如下圖所示:
- 對(duì)行為結(jié)果,及時(shí)告知用戶操作結(jié)果,反饋應(yīng)當(dāng)盡量避免描述含糊不清。如下圖所示:
下一篇講解B端“文本”UI交互設(shè)計(jì)規(guī)范。
作者:云計(jì)算產(chǎn)品,公眾號(hào):云桌面產(chǎn)品,歡迎關(guān)注
本文由 @云計(jì)算產(chǎn)品 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
大佬你可千萬(wàn)別刪稿啊,關(guān)注收藏準(zhǔn)備有時(shí)間就一篇篇學(xué)習(xí)的,跪謝了!
建議可以把下一篇和上一篇鏈接放到文章里
文中說(shuō)命令按鈕也經(jīng)常被實(shí)現(xiàn)為鏈接樣式(文本+下劃線),在現(xiàn)實(shí)中,我接觸的命令按鈕都是帶邊框的,或者是純文字的按鈕。您說(shuō)的這個(gè)表現(xiàn)形式是否在哪個(gè)產(chǎn)品里可以看看,有點(diǎn)不懂
規(guī)范性文件確實(shí)很重要,即便說(shuō)規(guī)范內(nèi)容有待商榷,也可以后續(xù)迭代。公司使用統(tǒng)一的設(shè)計(jì)規(guī)范做指引,起碼能確保產(chǎn)品風(fēng)格的一致性,保證基礎(chǔ)性功能的合理。說(shuō)白了就是產(chǎn)品B格能有個(gè)托底,不會(huì)太LOW。
明白人兒
初級(jí)的
后面會(huì)有深度的,歡迎關(guān)注
你來(lái)寫一個(gè)高級(jí)的我看看
這部分在貴公司,是產(chǎn)品團(tuán)隊(duì)的工作范疇還是UI團(tuán)隊(duì)的?
您是???規(guī)范的制定嗎? 這部分是UED整個(gè)團(tuán)隊(duì)都需要涉及的
基本原則第十點(diǎn),是不是表述有誤,任何信息應(yīng)日你故意去搜索的意思是不是任何信息用戶都可以去搜索?
是的,感謝指正
啟動(dòng)中,你可以把啟動(dòng)按鈕變成不可點(diǎn)擊狀態(tài),更好點(diǎn),要不用戶一樣會(huì)點(diǎn)擊下去,忽略提示
是的,這個(gè)地方只是舉例說(shuō)明,多謝指正
下一篇催更~~太實(shí)用了
謝謝,會(huì)盡快更新的,歡迎關(guān)注
寫得太好了
謝謝支持,歡迎關(guān)注