設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類

UX
7 評(píng)論 29979 瀏覽 224 收藏 8 分鐘

本篇講述的是feedback反饋類;反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

設(shè)計(jì)規(guī)范中最重要的部分就是組件規(guī)范了,制定組件的規(guī)范有哪些好處呢?

  1. 高效簡(jiǎn)單:熟悉了解組件的用法之后,在做界面設(shè)計(jì)時(shí),只需要合理運(yùn)用組件就可以快速搭建web端界面,高效無差錯(cuò)。由于有成套的組件規(guī)范,所以在交互設(shè)計(jì)和視覺設(shè)計(jì)過程中無需每次都重復(fù)勞動(dòng)。
  2. 統(tǒng)一用戶體驗(yàn):由于使用了統(tǒng)一的組件規(guī)范,所以保證了的視覺和交互設(shè)計(jì)統(tǒng)一性,保證整體的用戶體驗(yàn)性。
  3. 提升設(shè)計(jì)綜合能力:由于減少了做組件重復(fù)性勞動(dòng),交互設(shè)計(jì)師/PM 可以將更多時(shí)間和精力放在討論業(yè)務(wù)、設(shè)計(jì)方法、設(shè)計(jì)思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動(dòng)業(yè)務(wù)創(chuàng)新。

根據(jù)組件的用途,可以分為六大類:Feedback 反饋、from 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

本篇講述的是feedback反饋類;反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

toast

定義:用戶產(chǎn)生操作,出現(xiàn)toast提示,一般2-3s消失;通過toast中的提示語(yǔ)告知用戶需要了解的信息。讓用戶的行為在使用過程中得到反饋和幫助。

使用場(chǎng)景:

  1. 可提供成功、警告或錯(cuò)誤等反饋信息。
  2. 頂部居中顯示并自動(dòng)消失,是一種不打斷用戶操作的輕量級(jí)提示方式。

例如簡(jiǎn)書在沒有上傳專題封面時(shí)就點(diǎn)擊創(chuàng)建專題按鈕,出現(xiàn)toast提示,提示用戶要先上傳專題封面才能創(chuàng)建專題。

toast的消息提示分類一共有三種類型:成功類、失敗類、常規(guī)類。

組件樣式有兩種:可以點(diǎn)擊操作使其消失、不可點(diǎn)擊操作使其消失。

alert 警示提示

定義:當(dāng)用戶進(jìn)行某種操作時(shí),網(wǎng)站會(huì)出現(xiàn)對(duì)應(yīng)的警告信息提示用戶,該提示信息的狀態(tài)不會(huì)主動(dòng)消失。

使用場(chǎng)景:

  1. 當(dāng)某個(gè)頁(yè)面需要向用戶顯示警告的信息時(shí)。
  2. 非浮層的靜態(tài)展現(xiàn)形式,始終展現(xiàn),不會(huì)自動(dòng)消失,有的組件用戶可以點(diǎn)擊關(guān)閉。

例如淘寶購(gòu)物車,刪除之后,會(huì)出現(xiàn)alert警示提示,淘寶的例子屬于alert的變種,用戶可以點(diǎn)擊“撤銷本次刪除 ”進(jìn)行還原之前的毀滅性操作。

alert警示提示的消息分類一共有三種類型:成功類、失敗類、常規(guī)類。當(dāng)然也可以不含有icon操作,含有icon操作的話警示性會(huì)更強(qiáng)。

alert警示組件樣式有兩種:帶有刪除操作,不帶有刪除操作。

dialog對(duì)話框

定義:用于提示用戶當(dāng)前操作,或是完成某個(gè)任務(wù)時(shí)需要的一些其他額外的信息。對(duì)話框可以用確定/取消的簡(jiǎn)單的應(yīng)答模式,也可以是自定義復(fù)雜的模式,例如表單的填寫。

使用場(chǎng)景:

  1. 用戶在進(jìn)行重要操作的時(shí),需要進(jìn)行二次確認(rèn)。
  2. 用于重要的反饋提示,讓用戶知道信息提示。
  3. 承載少量的表單填寫類,減少頁(yè)面的跳轉(zhuǎn)。

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因?yàn)檫@個(gè)原因,導(dǎo)致我們平時(shí)看到的確定有時(shí)候在左邊,有時(shí)候在右邊。

微博和微信公眾號(hào)后臺(tái)的的對(duì)話框,確定在左邊,而淘寶的對(duì)話框在右邊。微信公眾號(hào)的對(duì)話框是小浮層彈窗,避免了遮罩出現(xiàn),同時(shí)對(duì)話框也出現(xiàn)在操作按鈕的附近,對(duì)用戶的干擾性也是最弱的。

dialog對(duì)話框,有三種常見的使用場(chǎng)景。其中表單對(duì)話框、提示類、輕量級(jí)提示類、表單類樣式都是基于二次確認(rèn)類對(duì)話框樣式的改變而得到不同的樣式。

Notification通知提醒框

定義:懸浮出現(xiàn)在網(wǎng)頁(yè)右上角,用于全局的提醒式通知。常見于服務(wù)器異常、操作失敗等

使用場(chǎng)景:

  1. 較為復(fù)雜的通知內(nèi)容。
  2. 帶有交互的通知,給出用戶下一步的行動(dòng)點(diǎn)。
  3. 系統(tǒng)主動(dòng)推送。

Notification通知提醒框出現(xiàn)在網(wǎng)頁(yè)右上角,一般4-5s消失,也可以點(diǎn)擊叉號(hào)進(jìn)行關(guān)閉。

tooltip 文字提示

定義:簡(jiǎn)單輕量的的文字提示。

使用場(chǎng)景:

  1. 鼠標(biāo)移入則立即顯示提示,移出則立即消失,不承載復(fù)雜文本和操作。
  2. 常用于解釋操作按鈕的文字說明。

還有一種tooltip是瀏覽器自帶的,瀏覽器自帶的和本篇的tooltip的區(qū)別是:瀏覽器自帶的鼠標(biāo)移入一般2s才顯示,多用于折行打點(diǎn)的文字提示。例如簡(jiǎn)書,而本篇的tooltip鼠標(biāo)移入就出現(xiàn),切組件風(fēng)格和瀏覽器自帶完全不一樣。

tooltip組件按照需要解釋說明的對(duì)象位置不同,可以有以下不同的樣式。

相關(guān)閱讀

如何構(gòu)建Web端設(shè)計(jì)規(guī)范

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)理念篇

#專欄作家#

UX,微信公眾號(hào):UEDC,人人都是產(chǎn)品經(jīng)理專欄作家。前華為ITUX交互組組長(zhǎng),現(xiàn)美團(tuán)點(diǎn)評(píng)高級(jí)交互設(shè)計(jì)師。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 原來提示框,都分這么多種呢,開眼了

    來自北京 回復(fù)
  2. alert 部分提到的刪除操作,是不是理解為關(guān)閉更容易懂啦!

    來自陜西 回復(fù)
  3. 除了 form 表單,單詞拼錯(cuò)以外,沒發(fā)現(xiàn)大毛病

    來自浙江 回復(fù)
  4. 可以可以不錯(cuò)不錯(cuò)

    來自江蘇 回復(fù)
  5. 大神 什么時(shí)候 更新后面的呀

    來自浙江 回復(fù)
  6. 淘寶那個(gè)是瀏覽器的原生confirm

    來自廣東 回復(fù)
  7. 學(xué)到啦 歸納的很清楚 ??

    來自浙江 回復(fù)