亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

B端UI界面交互設(shè)計(jì)規(guī)范概述

發(fā)布時(shí)間：2024-03-16 19:56:24 瀏覽量：268次

編輯導(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ā)過程中，給各產(chǎn)品相關(guān)開發(fā)人員提供統(tǒng)一的規(guī)范與指導(dǎo)，提升了溝通效率，保證了產(chǎn)品界面的最終規(guī)范化的實(shí)現(xiàn)效果。
  • 通過規(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)可見性原則

用戶在頁(yè)面上的任何操作，無論是單擊、滾動(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ò)原則

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

6）易取原則

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

7）靈活高效原則

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

8）易掃原則

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

9）容錯(cuò)原則

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

10）人性化幫助原則

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

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

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

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

1. 受范性指示

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

  • 對(duì)象對(duì)數(shù)表指針的移動(dòng)的響應(yīng)必須及時(shí)有效；
  • 響應(yīng)形式必須明確清晰（如：鼠標(biāo)滑過按鈕，提示按鈕被按下效果）；
  • 受范性表現(xiàn)要保持一致：同等功能和操作的元素受范性必須相同（如：鼠標(biāo)指向鏈接文字時(shí)都做同樣的變化）；
  • 在鼠標(biāo)指針移開時(shí)對(duì)象必須及時(shí)恢復(fù)原來狀態(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)需通過色彩、操作引導(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)（如置灰），來使界面穩(wěn)定，使用戶保持恒定和完整的思維模式，減少用戶的認(rèn)知負(fù)擔(dān)。

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

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

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

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

  • 因授權(quán)導(dǎo)致的操作不可用，該操作項(xiàng)不可見；
  • 因操作行為受用戶前置操作條件影響不可用，標(biāo)注為不可用狀態(tài)；
  • 因服務(wù)安裝失敗、或服務(wù)異常導(dǎo)致不可用，該操作相比不可見；
  • 不可用狀態(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)反饋，無法給出準(zhǔn)確、有效的狀態(tài)時(shí)，建議給出一個(gè)范圍值或者操作邊界。如下圖所示：
  • 對(duì)行為結(jié)果，及時(shí)告知用戶操作結(jié)果，反饋應(yīng)當(dāng)盡量避免描述含糊不清。如下圖所示：

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

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

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

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定