B端產(chǎn)品中的浮層組件的設(shè)計(jì)思考

1、浮層是在頁(yè)面上方展示的浮層容器，可展示文本、按鈕、列表、標(biāo)簽、表單項(xiàng)等內(nèi)容，在B端產(chǎn)品中有著非常廣泛的應(yīng)用。根據(jù)內(nèi)容和作用，可以分為不同的設(shè)計(jì)組件。例如Notification，Tooltip，Dialog等等。這些組件都可以看作是頁(yè)面空間的延展，最近在項(xiàng)目工作中有了一些新的思考，今天我們就來(lái)討論下浮層組件的設(shè)計(jì)，希望大家能夠有新的收獲。主要內(nèi)容包括以下4部分：浮層組件的類(lèi)型浮層組件3個(gè)的特點(diǎn)幾個(gè)應(yīng)用案例浮層組件應(yīng)用的注意事項(xiàng)01/浮層組件的類(lèi)型說(shuō)起浮層就離不開(kāi)“模態(tài)”和“非模態(tài)”。簡(jiǎn)單的理解，“模態(tài)”就是用戶必須進(jìn)行交互操作的浮層，否則浮層會(huì)一直存在，并且無(wú)法進(jìn)行頁(yè)面功能操作。例如對(duì)話框，這

2、種強(qiáng)制性保證了對(duì)話框信息的有效傳遞，但是對(duì)戶操作流程造成了比較強(qiáng)的阻斷?！胺悄B(tài)”則不需要給出反饋，不影響用戶的其他操作，沒(méi)有強(qiáng)制性，可以說(shuō)是“來(lái)去自如”。微信PC端圖片查看功能中信息提示很好的反映了兩者的差異。對(duì)于無(wú)法查看的圖片，采用模態(tài)彈窗形式，提醒用戶無(wú)法查看的原因，用戶需要點(diǎn)擊確定后，才能繼續(xù)操作。如果查看到最后一張圖片，系統(tǒng)采用非模態(tài)的Notatifion組件提醒。組件未消失時(shí)，用戶也可以回看或其他操作，更加輕量化。具體到組件設(shè)計(jì)層面，浮層的類(lèi)型就比較多了。例如AntDesign 設(shè)計(jì)規(guī)范共定義了8種浮層組件，Element 設(shè)計(jì)規(guī)范則定義了9種浮層組件，增加了Messagebox組

3、件，其實(shí)就是Dialog 對(duì)話框的簡(jiǎn)易版。具體的差異感興趣的同學(xué)可以自己去查閱一下。 Ant Design設(shè)計(jì)規(guī)范 Element 設(shè)計(jì)規(guī)范02/浮層組件的特點(diǎn)1）構(gòu)建獨(dú)立空間，簡(jiǎn)化頁(yè)面信息量浮層在一定的條件下觸發(fā)展示，作為一種容器可以形成臨時(shí)的內(nèi)容空間。不會(huì)占據(jù)頁(yè)面空間，并且可以簡(jiǎn)化頁(yè)面的信息量，有助于頁(yè)面的內(nèi)容布局。例如常見(jiàn)的數(shù)據(jù)可視化展示時(shí)，重點(diǎn)在于圖形展示，詳細(xì)數(shù)據(jù)放置在浮窗中展示，從而保證了頁(yè)面的可視化效果。浮窗展示空間2）交互輕量化對(duì)于強(qiáng)調(diào)操作效率的B端產(chǎn)品，如非必要，需要盡量減少頁(yè)面的跳轉(zhuǎn)次數(shù)，實(shí)現(xiàn)當(dāng)前頁(yè)面內(nèi)的流程閉環(huán)。在交互流程上，浮層組件停留在當(dāng)前頁(yè)面，相比頁(yè)面跳轉(zhuǎn)的交互方式

4、效率更高。在觸發(fā)機(jī)制上，非模態(tài)浮層可以實(shí)現(xiàn)懸停展示，移走消失，操作更加方便。某些信息反饋類(lèi)的組件還可以自動(dòng)消失，最大程度上減少了用戶操作。并且非模態(tài)浮層同樣可以承載按鈕、選擇器，表單等功能性組件，用戶可以就近操作，從而提高效率。QQ瀏覽器設(shè)置浮窗在頁(yè)面布局方面，浮層也更加靈活，可以出現(xiàn)在頁(yè)面中間、側(cè)邊、上方、下方等各個(gè)位置，尺寸可大可小，對(duì)于不太復(fù)雜的信息都有較好的適應(yīng)性。3）實(shí)現(xiàn)操作的所見(jiàn)即所得由于非模態(tài)窗口不具有強(qiáng)交互性，一般不占據(jù)屏幕中間位置，更多的是跟隨功能選項(xiàng)或者頁(yè)面邊緣。這就為功能操作的所見(jiàn)所得提供了便利性，方便用戶做出操作決策。例如表格列設(shè)置功能，操作后即可實(shí)時(shí)展示操作結(jié)果?；蛘?/p>

5、頁(yè)面皮膚的設(shè)置，用戶選擇后即可預(yù)覽效果，方便用戶對(duì)比選擇。QQ瀏覽器皮膚切換03/浮層組件的應(yīng)用案例在實(shí)際使用場(chǎng)景中，浮層組件主要應(yīng)用在信息反饋、內(nèi)容展示和功能操作3個(gè)方向，給大家介紹幾個(gè)案例。1）預(yù)覽展示，減少用戶的操作成本W(wǎng)indows11 任務(wù)欄懸停程序圖標(biāo)時(shí)，顯示浮窗預(yù)覽當(dāng)前運(yùn)行的任務(wù)，通過(guò)圖形化的方式，讓用戶更好的識(shí)別任務(wù)內(nèi)容，便于用戶做出選擇。在淘寶Web端訂單頁(yè)面，商品在未收貨狀態(tài)下，物流狀態(tài)就成為用戶更加關(guān)心的信息，懸停顯示物流最新?tīng)顟B(tài)，用戶可以不進(jìn)入詳情頁(yè)快速獲取信息，交互上更加便捷，有效的減少了用戶操作成本。2）就近原則，快捷操作在B端產(chǎn)品中，表格信息如何快速分拆內(nèi)容，查看

6、單個(gè)數(shù)據(jù)的詳情信息呢？如果采用跳轉(zhuǎn)頁(yè)面，或者表格按鈕等形式，都無(wú)法帶給用戶更加流暢的操作體驗(yàn)。通過(guò)浮層展示功能選項(xiàng)，就可以實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)的查看信息詳情。類(lèi)似于操作系統(tǒng)的右鍵功能，方便快捷。同樣在微信公眾號(hào)編輯器中，懸停和選中圖片都可以調(diào)出圖片編輯功能，就近的設(shè)計(jì)形式，保證了用戶的操作效率。3）引導(dǎo)作用，輔助功能指向我們使用Chrome瀏覽器登錄網(wǎng)站時(shí)，經(jīng)常提醒我們保存或者更新密碼。這是脫離了網(wǎng)頁(yè)之外的瀏覽器自帶功能。如果采用模態(tài)對(duì)話框方式，在屏幕中間彈窗展示確認(rèn)對(duì)話框，會(huì)阻斷用戶的正常操作流程。使用了非模態(tài)窗口，并與密碼管理功能入口強(qiáng)關(guān)聯(lián)，可以引導(dǎo)用戶認(rèn)知功能入口。04/組件使用注意事項(xiàng)對(duì)于組件如

7、何使用，各大廠商都給出了較為明確的場(chǎng)景說(shuō)明。但是規(guī)范是死的，如何靈活運(yùn)用就需要“仁者見(jiàn)仁、智者見(jiàn)智”了。1）基于用戶場(chǎng)景的思考當(dāng)我們面對(duì)刪除功能的時(shí)候，基于防錯(cuò)原則，首先想到是增加確認(rèn)彈窗，這看起來(lái)是沒(méi)有問(wèn)題的。但是不是最優(yōu)的解決方案呢？例如同樣是刪除網(wǎng)址收藏功能，QQ瀏覽器和Chrome瀏覽器給出了兩種解決方案。QQ瀏覽器刪除時(shí)，增加了確認(rèn)彈窗，用戶確認(rèn)后可刪除。QQ瀏覽器確認(rèn)彈窗Chrome 瀏覽器的方案時(shí)，順應(yīng)用戶操作，直接刪除內(nèi)容，顯示成功提示的同時(shí)，增加了容錯(cuò)的“撤回”按鈕。Chrome瀏覽器浮窗提醒我們可以先思考下用戶場(chǎng)景，刪除是個(gè)比較高風(fēng)險(xiǎn)的操作，用戶一般只有產(chǎn)生了強(qiáng)烈又明確的意

8、圖時(shí)，才會(huì)主動(dòng)刪除內(nèi)容。無(wú)論是確認(rèn)彈窗還是撤銷(xiāo)功能，都是為了避免用戶誤操作。所以就要評(píng)估用戶誤操作的幾率和誤操作后帶來(lái)的用戶損失。就書(shū)簽而言，用戶損失并不大，誤刪除后再加入收藏就可以了。關(guān)于誤操作的幾率QQ瀏覽器只有選中內(nèi)容后，才能激活刪除按鈕，另外還可以通過(guò)右鍵菜單、更多按鈕、選擇”刪除“選項(xiàng)后才能完成操作，其實(shí)防錯(cuò)機(jī)制做的比較好的，因此誤操作的幾率比較低。關(guān)于操作成本誤操作幾率比較低的情況下，我個(gè)人認(rèn)為Chrome 容錯(cuò)的設(shè)計(jì)方案更優(yōu)一些，刪除的流程更順暢，只需要在誤操作時(shí)撤銷(xiāo)就可以了。QQ瀏覽器確認(rèn)彈窗的方式操作成本更高，不過(guò)好在能夠批量刪除。在一定程度上解決了頻繁彈窗的問(wèn)題。這種容錯(cuò)思維在Chrome中其他場(chǎng)景中也有應(yīng)用，我覺(jué)得還是值得借鑒的。2）避免濫用現(xiàn)在各種反饋有點(diǎn)泛濫的趨勢(shì)，所見(jiàn)即所得的場(chǎng)景下，我覺(jué)得并不需要增