亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

在 2021 年終總結(jié)時(shí)發(fā)現(xiàn)這些年讀了很多的文章,雖說(shuō)也會(huì)通過(guò)各種工具記錄整理,但還是會(huì)覺(jué)得零散。最好的輸入是輸出,今年給自己定的目標(biāo)是寫(xiě) 10 篇文章。一來(lái)是把零散的知識(shí)整理歸納,串聯(lián)知識(shí)結(jié)構(gòu);二來(lái)是通過(guò)課題研究,提高專(zhuān)業(yè)深度。

在 B 端的產(chǎn)品設(shè)計(jì)中,經(jīng)常會(huì)使用到彈窗。選擇合適的彈窗展示形式,避免過(guò)度打擾用戶(hù),有效地向用戶(hù)傳遞/收集信息,幫助用戶(hù)做出更合理的決策,完成復(fù)雜的任務(wù),今天來(lái)聊聊如何設(shè)計(jì) B 端產(chǎn)品的彈窗。

彈窗定義:

彈窗是展現(xiàn)在用戶(hù)操作界面之上的容器,在 X 軸和 Y 軸的平行空間之外擴(kuò)展了頁(yè)面的高度。通過(guò)承載對(duì)應(yīng)信息,對(duì)當(dāng)前操作進(jìn)行補(bǔ)充/傳遞,是一種更靈活的信息容器。

常見(jiàn)彈窗類(lèi)型

常見(jiàn)的彈窗類(lèi)型:對(duì)話(huà)框 Modal、抽屜 Drawer、警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認(rèn)框 Popconfirm (在此重點(diǎn)闡述 B 端產(chǎn)品的彈窗)。

彈窗的分類(lèi)

從交互形式上,彈窗分為模態(tài)和非模態(tài)。通常來(lái)說(shuō)有遮罩為模態(tài),無(wú)遮罩為非模態(tài)。

1. 模態(tài)(Modal)

a 概念解析:

模態(tài)是目前比較常見(jiàn)的類(lèi)型,打開(kāi)模態(tài)彈窗,會(huì)停止當(dāng)前所有工作的進(jìn)度,它所屬的應(yīng)用程序不能繼續(xù)進(jìn)行,直到對(duì)話(huà)框關(guān)閉為止。

比如說(shuō)我在開(kāi)車(chē)的過(guò)程中,路過(guò)收費(fèi)站,必須將車(chē)停下來(lái)拿卡繳費(fèi)。打斷我的當(dāng)前的駕駛行為,專(zhuān)注完成交卡收費(fèi)行為。

模態(tài)彈窗最常見(jiàn)的類(lèi)型:對(duì)話(huà)框(Modal)、抽屜(Drawer)

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

b 常見(jiàn)案例

淘寶賣(mài)家平臺(tái)對(duì)于商品刪除,考慮到商品的重要性,在刪除前通過(guò)對(duì)話(huà)框的形式做二次確認(rèn)。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

阿里云以抽屜的方式展示模塊信息。這么做的主要考慮是抽屜可以展示較多的頁(yè)面信息,同時(shí)支持搜索和篩選等功能,并且在點(diǎn)擊抽屜后彈出二級(jí)頁(yè)面,有較強(qiáng)的拓展性。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

C 使用場(chǎng)景

模態(tài)對(duì)話(huà)框的目的和使用范圍對(duì)用戶(hù)而言非常清晰,比較容易引起注意;如:在執(zhí)行一個(gè)重要信息的刪除時(shí),通過(guò)二次詢(xún)問(wèn)引起用戶(hù)的注意,讓用戶(hù)再次做判斷;

承載較為緊急的信息,讓用戶(hù)快速處理;如:用戶(hù)未保存,就點(diǎn)擊離開(kāi)當(dāng)前頁(yè)面,通過(guò)對(duì)話(huà)框讓用戶(hù)做出選擇。

平臺(tái)限制用戶(hù)需要執(zhí)行完信息后才能進(jìn)行后續(xù)的操作;如:有贊的功能模塊需要付費(fèi)后才能使用,彈窗內(nèi)容可以是該模塊的介紹;

流程的引導(dǎo);如:阿里云產(chǎn)品當(dāng)用戶(hù)首次進(jìn)入,會(huì)出現(xiàn)分步驟的引導(dǎo)。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

缺點(diǎn):

01.本質(zhì)上強(qiáng)制中斷用戶(hù)的工作流程,需要立即關(guān)注;對(duì)于一些高風(fēng)險(xiǎn)如下單流程、支付流程要慎重使用;

02.造成認(rèn)知負(fù)荷,可能會(huì)忘記原始任務(wù)相關(guān)的一些細(xì)節(jié);

2. 非模態(tài)化(Non-Modal)

a 概念解析:

可以不打斷父應(yīng)用程序,無(wú)需停止進(jìn)度,用戶(hù)仍可以對(duì)父級(jí)內(nèi)容進(jìn)行交互。大部分應(yīng)用于信息的反饋和提示。

繼續(xù)用開(kāi)車(chē)做例子,在開(kāi)車(chē)的過(guò)程中,我可以聽(tīng)著音樂(lè),可以拿起口香糖放到口中。不必完全中斷我當(dāng)前的操作,可以繼續(xù)甚至同時(shí)處理。

非模態(tài)化彈窗最常見(jiàn)的類(lèi)型:警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認(rèn)框 Popconfirm

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

b 常見(jiàn)案例:

阿里云的「幫助文檔」在支持查看文檔的同時(shí),也支持對(duì)父頁(yè)面進(jìn)行編輯。幫助文檔的作用是指導(dǎo)用戶(hù)進(jìn)行軟件操作,基于這種使用場(chǎng)景選擇非模態(tài)彈窗,用戶(hù)可以在兩者之間切換,極大的提高幫助文檔的使用質(zhì)量。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

微信公眾號(hào)對(duì)新建分組的命名使用的非模態(tài)彈窗,屬于氣泡確認(rèn)卡片 popover 的演化。這種方式是基于分組命名是一個(gè)非主流程、低頻率、輕量級(jí)的操作,所以選擇這種溫和的方式。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

c 使用場(chǎng)景

非主流程相關(guān)的任務(wù)提示;如:對(duì)于一個(gè)創(chuàng)建流程來(lái)說(shuō),加載提示一個(gè)非主流程的操作,選擇全局提示 Message 進(jìn)行反饋提示;

用戶(hù)可以在父應(yīng)用程序和彈窗間快速切換,可以通過(guò)參考父級(jí)的信息對(duì)彈窗做操作;如:在飛魚(yú) CRM 平臺(tái)用戶(hù)無(wú)需關(guān)閉抽屜,只需要在父頁(yè)面切換不同的聯(lián)系人,即可查看/修改該聯(lián)系人的詳細(xì)信息;

比較溫和、低打擾,用戶(hù)無(wú)需停掉當(dāng)前的工作來(lái)完成;

缺點(diǎn):

01.避免用來(lái)承載內(nèi)容較多、過(guò)于重要的信息。

02.避免讓用戶(hù)做較為復(fù)雜的操作;

3. 模態(tài)還是非模態(tài)

模態(tài)化彈窗最常見(jiàn)的類(lèi)型:對(duì)話(huà)框(Modal)、抽屜(Drawer);非模態(tài)化彈窗最常見(jiàn)的類(lèi)型:警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認(rèn)框 Popconfirm;

但是,并不是所有的對(duì)話(huà)框和抽屜都是屬于模態(tài)化彈窗。

在決定使用兩種類(lèi)型時(shí),需要參考上下文的工作流程和業(yè)務(wù)場(chǎng)景,避免不必要的打斷用戶(hù)和他們的工作流程。最終的目的是引導(dǎo)用戶(hù)高效完成任務(wù)。

對(duì)話(huà)框 / 抽屜

在 Ant D 等眾多平臺(tái)級(jí)設(shè)計(jì)組件規(guī)范中對(duì)警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認(rèn)框 Popconfirm 都有較為明確的定義;

但是在實(shí)際的項(xiàng)目中,對(duì)話(huà)框 Modal、抽屜 Drawer 有較高的使用場(chǎng)景以及較強(qiáng)的業(yè)務(wù)屬性;在此主要針對(duì)對(duì)話(huà)框 Modal、抽屜 Drawer 進(jìn)行研究。

1. 對(duì)話(huà)框 Modal

a 概念解析

對(duì)話(huà)框以對(duì)話(huà)的方式讓使用者參與進(jìn)來(lái),在對(duì)話(huà)中輸入或輸出信息。以應(yīng)用場(chǎng)景劃分包括確認(rèn)類(lèi)、展示類(lèi)、任務(wù)類(lèi)三種;

b 確認(rèn)類(lèi)

考慮到信息的重要性,巨量引擎在刪除時(shí)給用戶(hù)二次確認(rèn)提示;

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

c 展示類(lèi)

拼多多商戶(hù)后臺(tái)對(duì)于 Logo 上傳規(guī)則的信息展示。將較為重要的信息通過(guò)對(duì)話(huà)框的形式推送給用戶(hù),引導(dǎo)用戶(hù)閱讀。對(duì)于 SaaS 產(chǎn)品中,具有營(yíng)銷(xiāo)性的信息,也可以選擇海報(bào)+文字的形式,營(yíng)造氛圍提升閱讀量。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

飛魚(yú) CRM 信息展示彈窗,作為新功能的宣傳海報(bào)。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

d 任務(wù)類(lèi)

巨量引擎用戶(hù)可以自定義表格列的內(nèi)容,通過(guò)對(duì)話(huà)框進(jìn)行編輯。這么做的考慮是,自定義列是一個(gè)相對(duì)獨(dú)立的流程,選用對(duì)話(huà)框完全不影響父頁(yè)面的布局,并且可以快速返回到父頁(yè)面。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

微信公眾號(hào)選擇圖片,分為選擇封面和編輯封面兩個(gè)步驟完成。

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

e 如何使用

對(duì)話(huà)框的尺寸一般根據(jù)內(nèi)容來(lái)設(shè)定,考慮到可閱讀性,通長(zhǎng)要給予最大尺寸的限制。

據(jù)統(tǒng)計(jì)我司配置的電腦最小屏幕分辨率是 1280X720,因此只要保證這個(gè)尺寸放得下,就不會(huì)出現(xiàn)顯示不全出現(xiàn)雙滾動(dòng)條的問(wèn)題。

最大尺寸:寬度選擇 960PX,高度以 Windows 為例,去掉系統(tǒng)底部功能條的高度(40PX)以及瀏覽器的高度(60-100PX)為 580PX,安全角度考慮,最終高度定為 540PX。

為適配更多場(chǎng)景,同時(shí)讓設(shè)計(jì)具有一致性。常規(guī)彈窗尺寸:寬度 560PX,高度 400PX。

2. 抽屜 Drawer

a 概念解析

通常從父窗體邊緣滑入,覆蓋住部分父窗體內(nèi)容。用戶(hù)在抽屜內(nèi)操作時(shí)不必離開(kāi)當(dāng)前任務(wù),操作完成后,可以平滑地回到原任務(wù)。在項(xiàng)目中,通常抽屜從右側(cè)向左劃出。

b 如何使用

01 推薦默認(rèn)寬度 378PX,大號(hào)抽屜寬度 736PX,分別可容納單列和雙列表單,而且保持了使用抽屜時(shí)父級(jí)頁(yè)內(nèi)容可見(jiàn)的優(yōu)勢(shì);

02 建議抽屜采用右側(cè)劃出的交互,不會(huì)遮擋父容器的內(nèi)容,在抽屜中填寫(xiě)信息/核對(duì)信息都可以參考父容器的內(nèi)容;

03 建議抽屜上的操作按鈕放在右上角,不會(huì)被遮擋;

04 建議抽屜上的關(guān)閉按鈕放在左側(cè),符合認(rèn)知習(xí)慣;

3. 對(duì)話(huà)框還是抽屜

4 個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì) B 端產(chǎn)品的彈窗

a 從內(nèi)容區(qū)分

內(nèi)容類(lèi)型:操作確認(rèn)、信息提示、操作反饋通常選擇對(duì)話(huà)框形式;表單編輯/內(nèi)容展示,使用表單和對(duì)話(huà)框均可;

表單數(shù)量:通常來(lái)說(shuō)抽屜可以承載更多的內(nèi)容,Ant D 建議在表單數(shù)大于 8 項(xiàng)時(shí)使用抽屜;可以進(jìn)行更復(fù)雜的操作;

內(nèi)容長(zhǎng)短:在展示信息給用戶(hù)時(shí)候,如果內(nèi)容少不超過(guò) 5 行建議采用彈窗;如果信息超出一屏,設(shè)計(jì)師可根據(jù)習(xí)慣使用;

b 從行為角度區(qū)分

由系統(tǒng)觸發(fā):選擇彈窗,打斷用戶(hù)當(dāng)前流程;用戶(hù)一般無(wú)預(yù)期,需謹(jǐn)慎使用;

由用戶(hù)觸發(fā):選擇抽屜,用戶(hù)主動(dòng)喚起,對(duì)動(dòng)作有一定預(yù)期,支持多層打開(kāi)支持任務(wù)流;

寫(xiě)在最后

本文從彈窗的定義、常見(jiàn)類(lèi)型入手,重點(diǎn)講解了模態(tài)彈窗和非模態(tài)彈窗,分析了使用場(chǎng)景和案例。同時(shí)將 B 端產(chǎn)品經(jīng)常使用的對(duì)話(huà)框和抽屜做分析,設(shè)計(jì)師可以根據(jù)場(chǎng)景內(nèi)容和用戶(hù)行為出發(fā),選擇合理的交互方式。

感謝閱讀,如有問(wèn)題歡迎隨時(shí)溝通。

參考:

https://baike.baidu.com/item

https://www.yuque.com/wuxinghua/01/qmyrgt

https://zhuanlan.zhihu.com/p/405853880

作者:求職幫er

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/17695.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀(guān)點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。