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

彈窗窗口

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

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

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

彈窗交互

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

（1）彈窗交互-打開方式

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

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

抽屜式：從側邊展開彈窗；

懸浮（位置不固定）：彈窗打開位置不固定，主要是表現(xiàn)了彈窗內(nèi)容和用戶操作內(nèi)容的聯(lián)系性；，一般彈窗內(nèi)信息量較少；

（2）彈窗交互-控制動作

默認大小：窗口的默認尺寸大小，應貼合所要展示的內(nèi)容進行調(diào)整，即寬度/高度不指定，一般有底部遮罩的彈
窗是不能進行移動放大和縮小操作的；

最大化：

最小化：點擊做小到標簽欄或者有一個最小化懸浮窗口；

拖動：鼠標左鍵長按窗口頂部控制區(qū)域進行拖動，一般可以拖動的彈窗是沒有底部遮罩

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

彈窗分類

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

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

（1）引導彈窗

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

（2）選擇彈窗

• 【樣式說明】：常用于進行選擇的頁面，因為只需要進行一次選擇操作所以為保持前后頁面的聯(lián)系，用彈窗展示會更好；
• 【適用場景】：人員選擇、圖片選擇、操作方式（支付方式）選擇、分類（用戶類型）選擇等；

（3）任務彈窗

• 【樣式說明】：用戶完成某些任務，單獨用彈窗展示會更高效；
• 【適用場景】：辦事（流程）彈窗、編輯、設置、登錄/注冊…

（4）提示彈窗

【樣式說明】：此類彈出窗只用于告知用戶某些需要強制確認、提示的信息（報錯類提醒中，支持查看錯誤信息）,并需要用戶做出相應的決定操作；

【適用場景】：

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

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

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

其他組件

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

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

分頁組件

附件管理

信息回復

其他組件

小結

這章主要是介紹了我自己整理一些系統(tǒng)中常用的組件設計案例，因為是我自己的整理和分類，所以其實這些組件還有更多的內(nèi)容和更加專業(yè)的分類方式，而且組件的樣式和交互方式其實還有很多很多，每一個類型都可以擴展起來詳細介紹。這里沒有做過多的介紹，只是希望整理的這些內(nèi)容對大家的設計有一些啟發(fā)和指導意義。

后記

基本上整個系統(tǒng)原型快速搭建的方案已經(jīng)講完了， 這是我去年就編輯好的，后來因為工作原因自己也忘記了繼續(xù)更新分享。今年定的一個目標就是要更多的總結和整理自己工作中學習到的內(nèi)容，才想起來自己原來還有這個分享沒有完成?；仡^來看自己之前的整理還是有很多欠缺的地方的，從系統(tǒng)框架上自己只整理了一些常用的布局方式，還有一些個性化的設計內(nèi)容可以擴展，很多內(nèi)容的整理分布布局都有些問題，也有更多更好的設計交互案例沒有給大家整理分享，很多內(nèi)容也是和同事一起整理的，沒有什么專業(yè)性，還存在著很多問題。那今年還會對這篇內(nèi)容重新進行整理迭代，希望到時候有更好的內(nèi)容分享給大家。

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

相關閱讀：

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

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

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

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

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