APP 設計中,小紅點的特點及設計是怎樣的

小紅點作為中國產品的特色設計,和facebook的“點贊”類似,都有很多學問在內。

APP 設計中,小紅點的特點及設計是怎樣的

剛開始工作的時候,做過一版訊息的頁面,當時雖然加上了小紅點,但卻不知道它為什麼要這樣設計,現在訊息頁面需要改動,於是便想弄清楚其背後的設計原理。

我提出了一些問題:小紅點的定義和作用是什麼?有哪些視覺特點?常見樣式有哪些?我們為什麼這麼想點選它呢?

這篇文章就和大家分享一下關於小紅點的設計。

目錄

1。小紅點的定義

2。小紅點的作用

3。視覺特點

4。常見樣式

5。為什麼老是想點選

小紅點的定義

小紅點是我們慣用的叫法,它正式的名稱應該叫做徽標(Badge)。通常指出現在圖示右上角的紅色圓點或帶數字和文字的紅點,如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

小紅點的作用

它的主要作用有兩個,一個是起到通知的作用,告訴使用者有未讀的訊息或有未處理的任務;另一個是起到為入口導流的作用,引導使用者點選進來,增加點選量,如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

以微博和安居客為例,微博頁面中的小紅點是為了通知使用者有20條未讀的訊息,安居客頁面中的小紅點為了引導使用者去看推薦的房源資訊。

視覺特點

主要從顏色及消除方法兩方面闡述一下小紅點的視覺特點。

1。顏色

小紅點為了“逼迫”人們點選,通常會使用高明度+高純度的紅色,因為紅色色彩感知強烈,而且有警告、危險的含義。更容易和頁面形成強烈的對比,引起人們的注意。QQ中好友和系統的訊息推送都使用了紅色的小紅點,如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

但有時候為了不過多幹擾使用者,也會使用色彩感知較弱的藍色。比如QQ群助手裡的訊息推送就使用了淺藍色的小紅點。如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

2。消除方式

最常見的消除方式就是點選一下,小紅點就消失了;或者是把最後層級的小紅點點選完,上面層級的小紅點才會消失。

而有的 APP 把這個過程做的非常有趣,如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

QQ訊息入口的小紅點可以被隨意地拉伸,然後爆炸消失,用這種趣味的方式可以減輕使用者的厭煩情緒。

最好能夠為使用者設定一個一鍵消除的按鈕,這樣可以大大減少使用者的操作成本,如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

以淘寶為例,因為使用者要和眾多的商家溝通,再加上很多會員群或者系統訊息的推送,訊息通常會非常多,而一鍵清除只需要點選一次就可以消除所有的小紅點,大大減少了操作成本。

常見形式

常見的小紅點有純紅點、數字+背景色、文字+背景色3種形式,它們都有各自對應的使用方法以及使用場景。

1。純紅點

這種形式常用在一些入口上面,引導使用者點選進入更深的層級,是最常見的一種形式。如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

以支付寶為例,支付寶首頁中出現的這些純紅點,目的就是為了讓使用者點選這些入口,把使用者引入更深的層級。

2。數字+背景色

這種形式就是在純紅點的基礎上加入了數字,主要用於訊息通知的場景中,提醒使用者有未讀的訊息並且可以向用戶顯示具體的數量。如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

以淘寶和微博為例,淘寶中的訂單訊息、微博的資訊訊息,都使用了這種紅點形式。其中淘寶的訂單訊息是使用者想要看到的,而微博的資訊訊息是系統自動推送給使用者的,使用者被動接收不想要的訊息時,會產生厭煩心理。

3。文字+背景色

這種形式是在純紅點的基礎上加入了文字,常用於運營活動的場景,文字內容通常是一些有較強吸引力的詞句,為了吸引使用者點選。

APP 設計中,小紅點的特點及設計是怎樣的

上圖美團的頁面中,就使用了了“贏現金”、“特惠”、“享特價”、“領券”等特別具有誘惑力的詞來吸引使用者點選。

以上就是小紅點常見的三種形式,但是在實際專案中會涉及到多個層級和多個入口,所以一般都是多種樣式的小紅點組合起來使用。

為什麼老是想點選

這裡涉及到了“知覺流暢性”,我很喜歡科學家種太陽在果殼問答中的觀點,以下是原文摘要:

為什麼人腦會在加工資訊時,在知覺層面上,刻意追求對資訊的合理簡化?

因為外界資訊太多,大腦分分鐘過載崩潰,所以需要犧牲大量的噪音資訊,把其中有意義的好理解的能記住的,篩選出來,然後作為知覺加工的產出。這是人腦在漫長的進化過程中逐漸習得的一種認知習慣。

為什麼人類也會“喜歡”那些本來就整齊劃一從而容易被大腦組織加工的東西呢?

因為知覺流暢性。知覺流暢性涉及個體對刺激較低水平的加工,反映了個體對知覺外部資訊難易程度的主觀感受。它本身並不是一種認知操作,只是一種有關認知操作的感受。比如,看到雜亂無章的房間,有的人就會覺得頭很大,而看到收拾得井井有條的房間,可能就舒服多了。

簡單來說,就是人類的大腦在處理整齊劃一的事物時,因為消耗的能量比較少,所以感覺很流暢,就會產生愉悅感,如下圖:

APP 設計中,小紅點的特點及設計是怎樣的

圖1中所有的矩形都整齊劃一的排列,我們在瀏覽的時候很流暢,但圖2中有一個矩形角度發生了變化,當我們瀏覽到這個矩形時,大腦忽然停頓了,是不是特別想把它擺正?

同樣的,小紅點的出現就是打破了整體頁面的流暢性,和頁面形成特別強烈的對比,讓人不得不把它點掉,以保持知覺的流暢性和大腦的愉悅感。

總結

今天主要分享的一件事是 APP 中小紅點的設計,我總結了五個點是:

1。小紅點的主要作用:一個是起到通知的作用,另一個是起到為入口導流的作用。

2。通常會使用紅色,這是因為紅色色彩感知強烈,更容易和頁面形成強烈的對比;如果想不過多幹擾使用者,可以使用色彩感知較弱的藍色。

3。有趣的消除方法可以較少使用者的厭煩心理,新增一鍵清除可以較少操作成本。

4。在實際專案中會涉及到多個層級和多個入口,一般都是多種樣式的小紅點組合起來使用。

5。小紅點借用了人類大腦會對流暢的事物產生愉悅感的現象,打破頁面流暢性,引起人們的注意而去點選。

參考引文:

本文由 @望儘儘是青山 原創釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

頂部