設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:提示類

UX
4 評論 20533 瀏覽 233 收藏 7 分鐘

本篇文章講解功能分類之提示類,如果我是寫信息的提示類,那么里面涉及到的會有toast、警示框、界面內(nèi)嵌、loading加載、tips提示、空數(shù)據(jù)界面、卡片等等,這就和之前講的有重復(fù)。所以,這里寫的提示類是消息的提示類,而不是信息的提示類。

提示性類型一共有四類:

  1. 紅點提示
  2. 數(shù)字提示
  3. 系統(tǒng)推送提示
  4. 彈框提示

依舊附上一張腦圖,組件控件分類(如果單純通過組件控件,難以滿足功能劃分的需求,所以我將這個范圍擴(kuò)大,分類里面不僅僅含有組件和控件,所以請不要在意細(xì)節(jié)。)

紅點提示

用途

通過紅點引導(dǎo)用戶點擊,從而達(dá)到要給用戶傳達(dá)的信息。

使用場景

1. 以產(chǎn)品的目標(biāo)來說,新功能更新想讓用戶知道并去使用,從而使用紅點提示用戶。

2. 新消息的提示,通過紅點讓用戶直觀的知道有信息。

3. 因為業(yè)務(wù)需要,通過紅點讓用戶去點擊操作。

舉例說明

微信讀書,列表關(guān)注欄出現(xiàn)紅點,點擊進(jìn)去,新增微信好友出現(xiàn)紅點。這樣的使用是為了讓用戶加微信讀書好友從而增加微信讀書的社交化和粘度。這個屬于使用場景第三條。

QQ日跡列表出現(xiàn)紅點,在日跡界面,有新增動態(tài),故通過紅點提示。這個屬入使用場景第二條。

MIX商店有新的更新,通過紅點引導(dǎo)用戶點擊消費,從而滿足業(yè)務(wù)目標(biāo)。這個屬于使用場景第三條。

數(shù)字提示

用途

通過數(shù)字讓用戶知道新更新的信息數(shù)量,同時引導(dǎo)用戶去點擊,從而達(dá)到要給用戶傳達(dá)的信息。

使用場景

1. 通過數(shù)字來提示用戶新功能的數(shù)量。

2. 通過數(shù)字來提示用戶收到信息的數(shù)量。

3. 桌面圖標(biāo)的數(shù)量讓用戶在進(jìn)去App之前就知道收到的信息數(shù)量。

舉例說明

Messenger在tab 我通過數(shù)字提示,讓用戶知道列表功能的數(shù)量。這屬于使用場景的第一條。

微信消息列表通過數(shù)字讓用戶知道,收到對方多少條消息。這屬于使用場景的第二條。

iOS 桌面圖標(biāo)的數(shù)量讓用戶在進(jìn)去App之前就知道收到的信息數(shù)量。這屬于使用場景的第三條。

紅點和數(shù)字提示兩者既有相同點又有不同點

  • 相同點:都是提示用戶,從而引導(dǎo)用戶去點擊達(dá)到信息傳導(dǎo)的作用。
  • 不同點:數(shù)字提示相對于紅點提示,提示強(qiáng)度更大。同時數(shù)字傳達(dá)用戶的信息更完整,具體到數(shù)量。

系統(tǒng)推送提示

用途

前提是iOS和安卓系統(tǒng)推送權(quán)限打開,通過系統(tǒng)推送讓用戶獲取到APP要傳達(dá)的信息,屬于強(qiáng)提示類。用戶通過推送消息進(jìn)入App獲取消息,提高產(chǎn)品的活躍度和使用粘性。

使用場景

1. 重要信息需要提示用戶,例如郵件,IM。當(dāng)用戶收到新消息時,系統(tǒng)自動推送。

2. 滿足運營需求,通過系統(tǒng)推送消息給用戶傳達(dá)運營促銷活動,吸引用戶去消費。

舉例說明

1. 如果網(wǎng)易郵箱的系統(tǒng)權(quán)限打開時,會收到系統(tǒng)推送,屬于使用場景第一條

2. 貓眼有新電影上映時,會有系統(tǒng)推送消息,引導(dǎo)用戶去點擊消費,這樣的行為也提高了用戶粘度。屬于使用場景第二條。

彈框提示

用途

彈框可以讓用戶知道一些重要的消息,同時通過彈框為某些業(yè)務(wù)提供一個流量入口。

使用場景

1. 運營需求,通過彈框的提示語和入口,從而達(dá)到流量導(dǎo)入的效果

2. 重要功能重要信息的入口。

3. 用于重要信息的提示,單純的提示信息的作用。

舉例說明

支付寶的信用生活界面,用戶進(jìn)入后會給出一個彈框提示,引導(dǎo)用戶去搶紅包。滿足運營需求。這屬于使用場景的第一條。

QQ的H5頁面通過彈框引導(dǎo)用戶去下載使用QQ音樂,這屬于使用場景的第二條。

QQ的服務(wù)號升級,通過彈框讓用戶知曉,這屬于使用場景的第三條。

相關(guān)閱讀

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:導(dǎo)航類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:引導(dǎo)類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:加載類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:網(wǎng)絡(luò)異常類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:空數(shù)據(jù)類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:操作類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:單元控件類

#專欄作家#

UX,微信公眾號:UEDC,人人都是產(chǎn)品經(jīng)理專欄作家。華為ITUX交互組組長。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 請問,使用場景的第一二三條在哪?我不知道……

    回復(fù)
  2. 1和2其實都算是徽標(biāo)的不同類型,不過您講的已經(jīng)比較全面了,收益了!

    來自江蘇 回復(fù)
  3. 很全面學(xué)習(xí)了。

    來自江蘇 回復(fù)
  4. 很全面,學(xué)習(xí)了

    回復(fù)