如何快速搭建系統(tǒng)原型(四):組件分享

18 評論 21431 瀏覽 91 收藏 13 分鐘

通過前三篇內(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)許可,禁止轉載。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 好文章!樓主能否分享一下lib,1649485088@qq.com,謝謝

    來自廣東 回復
  2. 有微信嗎 加下互相學習

    來自陜西 回復
  3. 跪求組件源文件………………2414522639@qq.com ,等待被拯救,感謝

    來自吉林 回復
  4. 求分享原型組件362725809@qq.com,萬分感謝。

    來自北京 回復
  5. 不能分享下lib,852773542@qq.com,謝謝啦

    來自陜西 回復
  6. 感謝分享,原型組件能分享一下么,1449213607@qq.com 感謝!

    來自北京 回復
  7. 樓主好人一生平安!求分享!644166879@qq.com

    來自上海 回復
  8. 求分享,1179786378@qq.com 跪謝樓主

    來自浙江 回復
  9. 謝謝分享,很實用,原型組件能分享么,577682534@qq.com,非常感謝!

    來自北京 回復
  10. 謝謝分享,很實用,原型組件能分享一下么,1181856827@qq.com!感謝!??!

    來自四川 回復
  11. 感謝分享~~~

    來自廣東 回復
  12. 謝謝樓主,樓主能分享下lib么 。1092637138@qq.com

    來自上海 回復
  13. 好文章!樓主能否分享一下lib,494910286@qq.com

    來自四川 回復
  14. 能不能分享下lib,1191424144@qq.com,感謝

    來自河北 回復
  15. 謝謝分享,文章系統(tǒng)、整體性強,受到較多啟發(fā),感謝??!RP組件原型能分享一下不,luodonggan1990@163.com!謝謝!

    來自山東 回復
  16. 謝謝分享

    回復
  17. 樓主可以分享lib就更好了??

    回復
  18. 蠻不錯的

    來自香港 回復