起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識B端設(shè)計方法論：頁面還是彈窗
在B端產(chǎn)品設(shè)計中，我們要怎么選擇信息展現(xiàn)樣式？這篇文章里，作者結(jié)合實際設(shè)計過程中所總結(jié)的經(jīng)驗，對于常用的展現(xiàn)樣式及適用場景做了整理，一起來看看，或許可以幫你理清信息展現(xiàn)樣式選擇的思路。
大家在做B端產(chǎn)品設(shè)計時，不知道有沒有遇見過這樣的情況？
“這部分信息內(nèi)容的展示，為了保證系統(tǒng)的統(tǒng)一性，還是用頁面進行展示”
“不行不行，這個內(nèi)容量級比較小，彈窗會比較好”
“不對，信息內(nèi)部還會有交互，不能彈窗跳彈窗，還是頁面吧……”
在做原型設(shè)計時，經(jīng)常就會遇見，今天確定了用這樣的樣式，等第二天再次打開時，就立馬想要換成另一種樣式。但是換完之后，心里依舊沒底，仍然會很忐忑。
為了增加原型設(shè)計時的確定性，筆者對于常用的展現(xiàn)樣式及適用場景做了整理，大家可以參考下。
一、整體思路
展現(xiàn)樣式選擇的核心思路，總結(jié)成一句話就是：
不同維度下，樣式與用戶信息獲取這一需求的相互匹配。
維度是大前提，是在結(jié)合實際的需求場景下，所做的提前準備。
樣式是知識儲備，其源自對于各個樣式特點的掌握與理解。
匹配度的衡量，是在充分了解以上兩點的基礎(chǔ)上，做出的利弊權(quán)衡。
1. 維度
這里的“維度”指的是，當前的信息所產(chǎn)生的作用。
作用的產(chǎn)生一般可以從兩方面進行判定，一個是用戶對于信息的實際需求，另一個則是產(chǎn)品設(shè)計者的期望。
用戶的實際需求：信息詳情，就是為了滿足用戶查看的需求。
產(chǎn)品設(shè)計者的期望：toast提示，就是設(shè)計者對于產(chǎn)品模塊的期望。
2. 樣式
現(xiàn)在常用的展現(xiàn)樣式，可以分成兩大類：頁面類、彈窗類。
頁面類對應的就是頁面樣式，彈窗類則包括彈窗、浮層、抽屜。
每一種展現(xiàn)樣式都有自己的特點，不同的特點適配不同的場景。
3. 匹配度
匹配度就是對于用戶的需求與樣式特點之間的衡量。
衡量的難點就在于衡量標準的確定，這個在下文會有所提及。
二、決策思路
在進行樣式選擇時，初始的第一層決策就是對于樣式大類的確定。
需要選擇出是要使用“頁面類”還是“彈窗類”。
這里可以通過“用戶聚焦程度”來進行決策。
（注：由于“用戶聚焦程度”這個概念比較抽象，在實際場景中他可以將其具象為用戶預計停留時長、信息量級、信息重要程度等一些可被量化的維度幫助判斷）
1. 用戶聚焦深
聚焦程度越深，用戶對于當前信息的需求就越獨立。
而信息的獨立性，則會降低當前信息與原頁面信息的關(guān)聯(lián)性。
新的的信息與原頁面信息的關(guān)聯(lián)性不大，那么用戶對于原頁面信息的需求也就不高。
由此就可以得出一個結(jié)論：“新信息是可以獨立于原頁面之外展現(xiàn)的?！?/strong>
對于這種相對獨立的信息展示，就比較適合以一個單獨的頁面來承載。
2. 用戶聚焦淺
聚焦程度的深淺，是針對于新信息與原有信息來說的。
新信息的聚焦程度淺，相對的原有信息的聚焦程度就會深，用戶對于原有信息就會有需求。
所以新信息的展示樣式，就不能脫離原有頁面信息而存在，這時彈窗類樣式就是一個很好的選擇。
但具體選用哪一種彈窗樣式呢？
以下有幾個維度可以參考：
1）新信息是否有強關(guān)注的需求
當新信息需要用戶進行強關(guān)注時，建議采用“彈窗”樣式。
彈窗這一展現(xiàn)樣式其最大的特點，就是在展現(xiàn)時會有一個遮罩效果。
遮罩的存在，間接性的排除了其他信息的干擾，從而保證用戶的注意力全部聚焦在彈窗上。
同時彈窗的交互只是在原有頁面上的彈出，并沒有跳出原有頁面，依舊保持與原有信息的關(guān)聯(lián)。
2）新信息是否有展示位置的需求
當新信息需要在一些特殊的位置展示時，建議采用“浮層”樣式。
浮層的展現(xiàn)樣式最大的特點就是展現(xiàn)位置靈活。
既可以根據(jù)觸發(fā)原件位置的變化而變化，如下圖所示：
也可以選擇特定的位置進行顯示，如：toast提示、移動端的提示banner等。
而彈窗與抽屜的展現(xiàn)位置相對較固定，一個是默認在屏幕中間展示，另一個則是左/右滑動出現(xiàn)。
3）信息量級
當新信息的展示對于量級有要求時，可根據(jù)具體量級來決定對應彈窗類型。
浮層所能承載的信息量級最少；
抽屜所展示的信息量級相對較大，同時也支持通過上下滑動查看信息；
彈窗展示的信息量級相對較靈活，可以根據(jù)實際的需要場景，對應彈窗的大小進行縮放。
4）新信息與原頁面有同步交互需求
當新信息與原有頁面信息，需要有同步交互的需求時，建議選擇抽屜。
抽屜樣式的展示，依然會保留部分的原有頁面信息，在展示抽屜信息的同時，依然可以對于原有頁面的信息進行操作。
而彈窗與浮層的“同步性”就不如浮層樣式，彈窗的遮罩會全量覆蓋原有信息，浮層則是沒有辦法做同步的交互。
三、總結(jié)
對于信息展現(xiàn)樣式的選擇總的思路就是：用戶聚焦程度→具體需求場景。
在具體決策前，需要做的準備有兩點：用戶需求的分析、各個樣式特點的積累。
以上是筆者在實際設(shè)計的過程中所總結(jié)出來的經(jīng)驗，希望能幫助到各位。
本文由 @珞小土 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
很有意思的角度，我是桌面軟件開發(fā)的，屬于C/S端。你看咱們的IDE哪些，顯示信息都有一個控制臺，很少有彈窗的，因此我在設(shè)計軟件的時候就很少有彈窗，控制臺 is all you need。另外，除非軟件有更新提示，我才會做彈窗。