Web端如何構(gòu)建通知體系及系統(tǒng)化思維模型?

2 評論 6576 瀏覽 61 收藏 14 分鐘

通知的設(shè)計(jì)從業(yè)務(wù)上包含兩個維度,即緊迫性和重要性,在設(shè)計(jì)上有三種表現(xiàn)形式,即界面層次、視覺效果和回收機(jī)制.

Web系統(tǒng)中通知體系的設(shè)計(jì)通常相對分離于系統(tǒng)的交互操作,在根據(jù)業(yè)務(wù)需求進(jìn)行體系化的系統(tǒng)功能構(gòu)建的時候很容易忽視掉,關(guān)于通知的設(shè)計(jì)在現(xiàn)階段的形式有很多,例如Toast,Modal,Noticebar等等以及每種通知形式的用法,每個通知形式都有前人總結(jié)出來很好的使用方式,但有兩個弊端:

第一、每種形式都是深入思考總結(jié)出來的規(guī)律如果不了解其中背景及背后的思路歷程很難真正將知識融入到個人的思維體系中;

第二、各種通知形式之間有太多的交叉點(diǎn),信息分類不夠獨(dú)立,如果只留于表面去用在日常的交互設(shè)計(jì)里,很容易被這些碎片化知識所淹沒。

所以觸發(fā)我思考的動力也是這篇文章的目的是:

一、建立體系化思維,在這些前人總結(jié)出的知識里,幫助個人的思維模型中構(gòu)建每種知識之間連接。

二、從全新的角度去整合分類這些信息通知的設(shè)計(jì),找出知識之間相對獨(dú)立的規(guī)律,從而在使用過程中能針對每次不同業(yè)務(wù)特點(diǎn)的輸入,快速的輸出相對系統(tǒng)完善的通知設(shè)計(jì)方案。

本文旨在和大家探討,我也非常高興能有不同觀點(diǎn)之間進(jìn)行碰撞,這樣才能將思維模型構(gòu)建的更清晰完善。

01

第一章包含兩塊部分,第一是文章的使用范圍,思考的邊界;第二是關(guān)于通知設(shè)計(jì)體系的思維模型的介紹。

使用范圍

Web端交互/視覺設(shè)計(jì)(其他端也有參考意義).

邊界

這篇文章的邊界在于,我所說的“通知”是指系統(tǒng)對用戶進(jìn)行單向的信息傳遞,即信息的流向?yàn)椤跋到y(tǒng)”到“用戶”,包括大家理解的消息,提示,告警,通知等等一類,只要屬于系統(tǒng)對用戶具有時限性的信息傳遞都在這個規(guī)律內(nèi),但是不包含“用戶”到“系統(tǒng)”的信息反饋過程。

下文中對通知進(jìn)行規(guī)律總結(jié)的基礎(chǔ)源于交互界面中“層”的概念。

什么是“層”

在現(xiàn)階段真實(shí)的產(chǎn)品生態(tài)中,我們大部分的操作界面都是在一塊平面的屏幕顯示器上,所有的界面都可以看成是的壓縮在一個平面中(VR/AR界面除外),在我做設(shè)計(jì)的過程中會盡量理清各個界面層之間在空間上的分布關(guān)系以及歸類各個層的特點(diǎn),如果用一句話概括就是界面元素之間的遮擋關(guān)系。

通知案例收集

下面收集了一些國際上比較有影響力公司的界面案例,因?yàn)橹卦诳偨Y(jié)出我的規(guī)律,所以對于案例我就不詳細(xì)與大家介紹。

有沒有發(fā)現(xiàn),即使是同樣的界面表現(xiàn)形式,每個公司團(tuán)隊(duì)對于它們的理解/命名/用法都不一樣,國內(nèi)關(guān)于這類的文章現(xiàn)狀也是這樣,我們可以先暫時拋開對名字符號的記憶,只要我們將背后的語義達(dá)到共識,但如果有更好的名字符號能準(zhǔn)確的表達(dá)語義歡迎告知。

web端如何構(gòu)建通知體系及系統(tǒng)化思維模型

通知在操作維度上相對獨(dú)立于系統(tǒng)當(dāng)前的交互操作,我們只需依據(jù)業(yè)務(wù)訴求設(shè)計(jì)頁面通知方式來達(dá)到的目的,那么當(dāng)輸入的是不同的業(yè)務(wù)訴求,我們需要給出的輸出是什么時候用什么界面通知形式,和構(gòu)建怎樣的界面通知體系。

首先,通知的設(shè)計(jì)從業(yè)務(wù)上包含兩個維度即緊迫性和重要性,在設(shè)計(jì)上有三種表現(xiàn)形式即界面層次、視覺效果和回收機(jī)制。

這里我構(gòu)建的知識之間的連接規(guī)律:緊迫性影響界面層次,重要性影響視覺效果和回收機(jī)制。

在緊迫性維度上:

web端如何構(gòu)建通知體系及系統(tǒng)化思維模型

緊迫性影響的界面層次再分為三個層次,分別是操作前、操作中和操作后,從而將系統(tǒng)中的“通知”分為三個層級。處理的是多個界面間的分布關(guān)系。

  • 第一層為操作前,是指用戶在界面操作時覆蓋在當(dāng)前操作界面層上的一層,通常表現(xiàn)為緊迫度最高,系統(tǒng)需要用戶立即了解的信息。典型的界面交互表現(xiàn)形式有:Modal、Flag、Toast 等等。
  • 第二層為操作中,是指用戶在界面操作時的界面層,緊迫性上為中,系統(tǒng)需要傳遞給用戶的信息沒有那么緊迫。典型的界面交互表現(xiàn)形式有:Noticebar、Inline notification、Statubar等等。
  • 第三層為操作后,是指用戶在界面操作時置于當(dāng)前操作界面層下的一層,通常表現(xiàn)為緊迫度最低,系統(tǒng)不需要用戶立即了解的信息。典型的界面交互表現(xiàn)形式有:Message box等等。

在重要性維度上:

重要性影響的視覺效果包括:視覺層級(視覺對比、元素大小、色彩冷暖、等等)、視覺位置(相對于上一項(xiàng)操作的視覺焦點(diǎn)的視線中心/邊緣區(qū))、視覺信息轉(zhuǎn)換率(易理解的視覺信息、信息與用戶意愿相關(guān)度等等)。處理的是一個界面內(nèi)的分布關(guān)系。

重要性影響的回收機(jī)制包括:手動回收、自動回收。

web端如何構(gòu)建通知體系及系統(tǒng)化思維模型

在使用的時候,只需根據(jù)業(yè)務(wù)訴求,判斷系統(tǒng)對于用戶傳遞信息的緊迫性和重要性兩個維度的特征上去設(shè)計(jì)或者使用相應(yīng)的界面表現(xiàn)形式,去構(gòu)建自身系統(tǒng)的界面通知體系規(guī)則。

02

第二章是具體介紹運(yùn)用這種思維模型如何在實(shí)際的產(chǎn)品設(shè)計(jì)中進(jìn)行從0到1的構(gòu)建通知體系,也就是從這里構(gòu)建的世界觀所用的方法論工具

第一步:細(xì)分層級。目標(biāo)-創(chuàng)建業(yè)務(wù)適配的不同等級;

根據(jù)第一章所構(gòu)建的思維模型所得出的工具如下:

web端如何構(gòu)建通知體系及系統(tǒng)化思維模型

在上圖中,Y軸為重要性,X軸為時間軸代表緊迫性。(因?yàn)閷τ跁r限性消息來說,過期的消息和沒過期的消息在對于用戶/系統(tǒng)來說是特點(diǎn)比較獨(dú)立的兩種類別,所以再細(xì)分了一下,以Y軸再代表一下一個重要時間節(jié)點(diǎn),即截止期限D(zhuǎn)eadline)

當(dāng)一個業(yè)務(wù)輸入時先判斷系統(tǒng)傳遞給用戶這個時限性消息的緊迫性是哪個等級的,我這里先根據(jù)界面的三個層次操作前,操作中,操作后,將緊迫性(Urgency)分為四個級別(你也可以根據(jù)你的業(yè)務(wù)場景將緊迫性細(xì)分為更多級別或是更少):

未過期的消息:

U1 緊急(操作前層);

U2 緊急度適中(操作中層);

U3 不緊急(操作后層)

已過期的消息:

Us 過期消息(在哪個層級可根據(jù)業(yè)務(wù)來決定)

然后判斷重要性的等級,你同樣可以根據(jù)自己系統(tǒng)的需求構(gòu)建幾個重要性等級,比如我這里設(shè)置了三個重要性(Important)等級:

  • I1 非常重要
  • I2 重要
  • I3 不重要

第二步:建立關(guān)聯(lián)。目標(biāo)-形成你的通知體系模型;

統(tǒng)計(jì)現(xiàn)有常見可用的交互形式,并根據(jù)交互形式表現(xiàn)出來的結(jié)果,將你構(gòu)建的緊迫性,重要性等級對應(yīng)起來。下圖是我收集的常見和對我可用的一些交互形式

(提示,希望大家看以下我收集的常見交互形式時,大家只從交互形式所表現(xiàn)出來的結(jié)果來思考,而不要想起目前見到的常見的用法,我們從表現(xiàn)的結(jié)果角度來探討,我把樣式的名稱去掉了,并且用手繪的方式表現(xiàn)了一下,這樣能更少的受到其他因素的干擾)

web端如何構(gòu)建通知體系及系統(tǒng)化思維模型

在構(gòu)建這個模型的時候大家可以根據(jù)形式表現(xiàn)出來的特點(diǎn),想第一章里描述的一些影響緊迫性和重要性的規(guī)則來構(gòu)建,大家可以仔細(xì)看其中的遮擋關(guān)系以及頁面中放置位置的關(guān)系,你可以嘗試在你的業(yè)務(wù)系統(tǒng)或是大公司的界面方案中進(jìn)行分析里進(jìn)行驗(yàn)證。

第三步:業(yè)務(wù)評估。目標(biāo)-輸入業(yè)務(wù)達(dá)到快速輸出交互形式;

收集你的系統(tǒng)內(nèi)所有通知類型,構(gòu)建一個Raw的通知體系框架,然后不斷的調(diào)整細(xì)化等級和調(diào)整規(guī)則,下圖是我在使用的時候的做法。

web端如何構(gòu)建通知體系及系統(tǒng)化思維模型

比如有一條通知是“用戶的賬號即將過期“,對于我這個系統(tǒng)的業(yè)務(wù)中,首先分不同角色,因?yàn)橥粋€通知對于不同人的重要程度和緊迫程度是不一樣的,所以對于管理員來說,一個臨時用戶的賬號即將過期,對于管理員來說緊迫性和重要性接近為0,但對于用戶角色1來說,即將過期在緊迫性上為比較緊迫的(U2),在重要性上為最重要的(I1)。

第二條為“用戶的賬號已過期”,對于管理員來說為U3I3,對于這類的通知我會在消息盒子里進(jìn)行分類和處理盡量和它本身消息盒子里的業(yè)務(wù)通知區(qū)分開,對于用戶角色1來說為U1I1,我會用形式最強(qiáng)烈的模態(tài)框來通知。

最后一個提示,如果你的某個通知業(yè)務(wù)在頁面中的表現(xiàn)形式在常見的里不能滿足,你完全可以依據(jù)這個思路創(chuàng)新一個新的交互形式滿足你的需求,并且將其融入進(jìn)這個體系中,不要把自己的思路限制在現(xiàn)有各個公司所使用的交互形式里,創(chuàng)新能力對設(shè)計(jì)師很重要。

總結(jié),通知體系的設(shè)計(jì)很容易在分析業(yè)務(wù)的時候忽略掉,如果能在一個局部業(yè)務(wù)里開始對整體體系的思考,我覺得一定是對系統(tǒng)整體的解決方案是有提升意義的,另外這個方法還有一個邊界的限定,就是對于離線的通知,離線的通知在整個通知體系里也很重要,這里只覆蓋了在頁面內(nèi)的交互和通知,離線通知在思考的時候也可以試著在這個邏輯內(nèi)思考,總之通知體系只要去思考解決一個本質(zhì)問題就是:系統(tǒng)用最合適的方式將一個時限性的信息傳遞給用戶。只要這個方向把握住,運(yùn)用怎樣的方法都只是其次,我這里總結(jié)的模型也只是一種,我們只要能朝著這個結(jié)果去思考,把問題定義清楚,對于通知來說應(yīng)該就沒有什么解決不了的問題。

 

作者:WuP,公眾號:WuP的想法

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 非常感謝,從此文章中學(xué)到了一些想了解的設(shè)計(jì)基礎(chǔ)

    回復(fù)
  2. 來自浙江 回復(fù)