通過(guò)前三篇內(nèi)容，我們了解了系統(tǒng)的結(jié)構(gòu)框架和內(nèi)容區(qū)域的設(shè)計(jì)思路，基本上已經(jīng)可以搭建一個(gè)完整的網(wǎng)站原型了。那么接下來(lái)的這章就主要是介紹一些組件的設(shè)計(jì)，以便擴(kuò)充我們的武器庫(kù)，讓我們搭建的系統(tǒng)細(xì)節(jié)上更加完善、展示效果上更加多樣化。

彈窗窗口

彈窗是系統(tǒng)常用的一種展示內(nèi)容的方式，在網(wǎng)頁(yè)、軟件、系統(tǒng)、APP都是非常常見(jiàn)的。我覺(jué)得彈窗更多的是一種容器，用戶來(lái)盛放內(nèi)容，這和我上兩章提到的內(nèi)容的“彈窗式”展示樣式是一致的。那這邊單獨(dú)將彈窗作為一種組件進(jìn)行介紹，是因?yàn)閺棿白鳛橐环N最常見(jiàn)的展現(xiàn)方式，但是在結(jié)合到不同的場(chǎng)景、針對(duì)不同目的會(huì)有很多種不同的彈窗形式，所以這邊對(duì)彈窗進(jìn)行了整理和說(shuō)明。

【彈窗結(jié)構(gòu)】彈窗主要分為彈窗控制區(qū)和內(nèi)容區(qū)兩個(gè)部分組成。

• 彈窗控制區(qū)：展示彈窗對(duì)應(yīng)的內(nèi)容名稱，控制彈窗的變化（放大、縮小、關(guān)閉等）；
• 內(nèi)容區(qū)：展示內(nèi)容信息，常見(jiàn)為表單、列表、詳情等形式，和上章介紹的內(nèi)容區(qū)（詳情頁(yè)）樣式基本一致；

彈窗交互

介紹系統(tǒng)中常見(jiàn)的彈窗交互：

（1）彈窗交互-打開(kāi)方式

居中打開(kāi)：常規(guī)的彈窗是在界面正中間展開(kāi)；

底部展開(kāi)：為了不影響用戶目前的操作，常見(jiàn)系統(tǒng)消息、新聞提示等彈窗會(huì)在界面右下方打開(kāi)；

抽屜式：從側(cè)邊展開(kāi)彈窗；

懸?。ㄎ恢貌还潭ǎ簭棿按蜷_(kāi)位置不固定，主要是表現(xiàn)了彈窗內(nèi)容和用戶操作內(nèi)容的聯(lián)系性；，一般彈窗內(nèi)信息量較少；

（2）彈窗交互-控制動(dòng)作

默認(rèn)大?。捍翱诘哪J(rèn)尺寸大小，應(yīng)貼合所要展示的內(nèi)容進(jìn)行調(diào)整，即寬度/高度不指定，一般有底部遮罩的彈
窗是不能進(jìn)行移動(dòng)放大和縮小操作的；

最大化：

最小化：點(diǎn)擊做小到標(biāo)簽欄或者有一個(gè)最小化懸浮窗口；

拖動(dòng)：鼠標(biāo)左鍵長(zhǎng)按窗口頂部控制區(qū)域進(jìn)行拖動(dòng)，一般可以拖動(dòng)的彈窗是沒(méi)有底部遮罩

其他：根據(jù)業(yè)務(wù)需求可以有刷新、上下翻頁(yè)等功能；

彈窗分類

根據(jù)彈窗的不同功能和使用場(chǎng)景，可以分成以下幾種彈窗：

• 【引導(dǎo)彈窗】主要是用于介紹界面相關(guān)信息功能，引導(dǎo)用戶操作；
• 【選擇彈窗】主要是進(jìn)行選擇操作，包括人員、圖片、項(xiàng)目等；
• 【任務(wù)彈窗】完成某項(xiàng)任務(wù)， 包含新增/修改、注冊(cè)、事項(xiàng)流程等；
• 【提示彈窗】用戶提示用戶，包括操作確認(rèn)、信息提示/反饋等；
• 【內(nèi)容彈窗】彈窗展示內(nèi)容信息，主要用戶內(nèi)容查看；

（1）引導(dǎo)彈窗

• 【樣式說(shuō)明】：常用于首頁(yè)進(jìn)入系統(tǒng)或者某個(gè)功能模塊，對(duì)當(dāng)前界面的介紹以及操作引導(dǎo)幫助用戶盡快熟悉使用方法。
• 【適用場(chǎng)景】：新手引導(dǎo)、操作引導(dǎo)、系統(tǒng)介紹…

（2）選擇彈窗

• 【樣式說(shuō)明】：常用于進(jìn)行選擇的頁(yè)面，因?yàn)橹恍枰M(jìn)行一次選擇操作所以為保持前后頁(yè)面的聯(lián)系，用彈窗展示會(huì)更好；
• 【適用場(chǎng)景】：人員選擇、圖片選擇、操作方式（支付方式）選擇、分類（用戶類型）選擇等；

（3）任務(wù)彈窗

• 【樣式說(shuō)明】：用戶完成某些任務(wù)，單獨(dú)用彈窗展示會(huì)更高效；
• 【適用場(chǎng)景】：辦事（流程）彈窗、編輯、設(shè)置、登錄/注冊(cè)…

（4）提示彈窗

【樣式說(shuō)明】：此類彈出窗只用于告知用戶某些需要強(qiáng)制確認(rèn)、提示的信息（報(bào)錯(cuò)類提醒中，支持查看錯(cuò)誤信息）,并需要用戶做出相應(yīng)的決定操作；

【適用場(chǎng)景】：

1. 對(duì)頁(yè)面中一些操作重要度較高的再確認(rèn)，如是否刪除？是否放棄保存？
2. 【提示信息】提示一些說(shuō)明性質(zhì)的信息；
3. 【警告信息】系統(tǒng)可預(yù)知的客戶錯(cuò)誤操作提示，錯(cuò)誤級(jí)別低；
4. 【錯(cuò)誤信息】因不可預(yù)知的原因引起的操作失敗提示，一般在異常捕獲后提示；
5. 【成功信息】用戶操作完成并成功后提示。

（5）內(nèi)容彈窗

和上一章內(nèi)容詳情頁(yè)設(shè)計(jì)保持一致，這里就不再做過(guò)多介紹了。

其他組件

下面就介紹下其他常用的組件，根據(jù)不同的功能和使用場(chǎng)景我們可以分為：

• 【分頁(yè)】主要用戶頁(yè)碼切換，常用于列表頁(yè)面；
• 【附件】用于上傳附件操作；
• 【信息回復(fù)】對(duì)內(nèi)容的評(píng)論和信息反饋，消息回復(fù)等組件；
• 【其他】各種數(shù)據(jù)圖表、天氣等個(gè)性化組件；

分頁(yè)組件

附件管理

信息回復(fù)

其他組件

小結(jié)

這章主要是介紹了我自己整理一些系統(tǒng)中常用的組件設(shè)計(jì)案例，因?yàn)槭俏易约旱恼砗头诸悾云鋵?shí)這些組件還有更多的內(nèi)容和更加專業(yè)的分類方式，而且組件的樣式和交互方式其實(shí)還有很多很多，每一個(gè)類型都可以擴(kuò)展起來(lái)詳細(xì)介紹。這里沒(méi)有做過(guò)多的介紹，只是希望整理的這些內(nèi)容對(duì)大家的設(shè)計(jì)有一些啟發(fā)和指導(dǎo)意義。

后記

基本上整個(gè)系統(tǒng)原型快速搭建的方案已經(jīng)講完了， 這是我去年就編輯好的，后來(lái)因?yàn)楣ぷ髟蜃约阂餐浟死^續(xù)更新分享。今年定的一個(gè)目標(biāo)就是要更多的總結(jié)和整理自己工作中學(xué)習(xí)到的內(nèi)容，才想起來(lái)自己原來(lái)還有這個(gè)分享沒(méi)有完成。回頭來(lái)看自己之前的整理還是有很多欠缺的地方的，從系統(tǒng)框架上自己只整理了一些常用的布局方式，還有一些個(gè)性化的設(shè)計(jì)內(nèi)容可以擴(kuò)展，很多內(nèi)容的整理分布布局都有些問(wèn)題，也有更多更好的設(shè)計(jì)交互案例沒(méi)有給大家整理分享，很多內(nèi)容也是和同事一起整理的，沒(méi)有什么專業(yè)性，還存在著很多問(wèn)題。那今年還會(huì)對(duì)這篇內(nèi)容重新進(jìn)行整理迭代，希望到時(shí)候有更好的內(nèi)容分享給大家。

備注：文章中的截圖內(nèi)容都來(lái)自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)及時(shí)聯(lián)系我進(jìn)行處理。

相關(guān)閱讀：

如何快速搭建系統(tǒng)原型（一）

如何快速搭建系統(tǒng)原型（二）：內(nèi)容區(qū)（首頁(yè)）設(shè)計(jì)

如何快速搭建系統(tǒng)原型（三）：內(nèi)容區(qū)（詳情頁(yè)）設(shè)計(jì)
 

作者：蝙蝠喵，菜鳥(niǎo)交互設(shè)計(jì)師一枚，2年未滿的產(chǎn)品交互設(shè)計(jì)經(jīng)驗(yàn)，2年電商APP運(yùn)營(yíng)經(jīng)驗(yàn)。

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