組件化思維對(duì)于一個(gè)設(shè)計(jì)師來說十分重要，它能夠幫助你更好的去進(jìn)行產(chǎn)品的設(shè)計(jì),那么組件化思維對(duì)于設(shè)計(jì)者都起到什么作用呢?

1.符合產(chǎn)品功能邏輯，組件化的設(shè)計(jì)理念能幫助設(shè)計(jì)符合產(chǎn)品功能邏輯。

 

2.有助于保持交互一致性，在一個(gè)項(xiàng)目里，選擇日期應(yīng)該是統(tǒng)一的交互方式，在整個(gè)產(chǎn)品中就應(yīng)該只有一種存在形式。所以時(shí)間選擇器就是一個(gè)組件，一個(gè)可以復(fù)用的組件，如果你沒有組件化思維，很可能出現(xiàn)好幾個(gè)不同的時(shí)間選擇器，一會(huì)兒是流輪撥盤，一會(huì)兒是日歷，一會(huì)兒又是下拉列表，這樣的設(shè)計(jì)絕對(duì)是不能上線的。當(dāng)然該統(tǒng)一的地方還有很多，比如:錯(cuò)誤提示的形式，講度條的交互方式，導(dǎo)航欄和按鈕的樣式。表單，下拉菜單等等。

 

3.減少開發(fā)工程師的工作量,開發(fā)時(shí)使用不同的技術(shù),了解不同技術(shù)之間的差異,設(shè)計(jì)時(shí)按照每個(gè)開發(fā)軟件的組件來做設(shè)計(jì)極大的減少了開發(fā)的時(shí)間.

 

4.保持視覺風(fēng)格的統(tǒng)一，在同個(gè)項(xiàng)目不同頁(yè)面按鈕等組件的樣式上應(yīng)該保持統(tǒng)一。

 

5.便于多設(shè)計(jì)師協(xié)作組件化設(shè)計(jì)是大型設(shè)計(jì)項(xiàng)目的必要條件，多人協(xié)作完成項(xiàng)目時(shí)，應(yīng)當(dāng)保持視覺統(tǒng)一規(guī)范，組件化建立就起到了至關(guān)重要的作用。

 

6.便于修改設(shè)計(jì)，設(shè)計(jì)總是需要修改優(yōu)化的，只需要根據(jù)需求調(diào)整需要調(diào)整組件即可。

 

針對(duì)各種組件的開發(fā)軟件做了以下介紹,歡迎在評(píng)論區(qū)進(jìn)行補(bǔ)充與探討!

 

echarts
 幫助各行業(yè)進(jìn)數(shù)據(jù)處理以及分析,一鍵生成餅圖,柱狀圖,甘特圖,折線圖等多種圖表;簡(jiǎn)道云的圖表分析

 

各種圖示效果樣式案例可供設(shè)計(jì)者參考

 

https://echarts.apache.org/examples/zh/index.html#chart-type-line

 

Ant Design

ant通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn),規(guī)范設(shè)計(jì)的設(shè)計(jì)思維,有豐富的設(shè)計(jì)資源與組件,對(duì)設(shè)計(jì)樣式的表達(dá)起到非常好的參考作用

https://ant.design/index-cn

 

Element

與Ant Design稍加相似,可供設(shè)計(jì)者作為輔助參考

 

https://element.eleme.cn/#/zh-CN/guide/design

 

 

另外其它的開發(fā)工具:

React是用于構(gòu)建用戶界面的JavaScript庫(kù)，起源于Facebook的內(nèi)部項(xiàng)目

 

Hook 可以中文譯為“掛鉤”或者“鉤子”，逆向開發(fā)中改變程序運(yùn)行的一種技術(shù),在逆向開發(fā)中是指改變程序運(yùn)行流程的技術(shù)，通過Hook在別人的程序中。需要了解其Hook原理，這樣就能夠?qū)阂獯a攻擊進(jìn)行有效的防護(hù)

 

 

Umi 是一個(gè)可插拔的企業(yè)級(jí) react 應(yīng)用框架。 插件化 umi 的整個(gè)生命周期都是插件化的，甚至其內(nèi)部實(shí)現(xiàn)就是由大量插件組成

 

 可擴(kuò)展 Umi 實(shí)現(xiàn)了完整的生命周期,并使其插件化,Umi 內(nèi)部功能也全由插件完成。此外還支持插件和插件集,以滿足功能和垂直

 

Vue 有兩大特點(diǎn)：響應(yīng)式編程、組件化。其優(yōu)勢(shì)為：輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快。

vue是單頁(yè)面應(yīng)用，使頁(yè)面局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，這樣大大加快了訪問速度和提升用戶體驗(yàn)。它的第三方ui庫(kù)很多節(jié)省開發(fā)時(shí)間。https://cn.vuejs.org/v2/guide/index.html

 

 

注: vue是我們的常用框架，大多數(shù)客戶的選擇。ant?react?hook?umi，中后臺(tái)這個(gè)也比較多，最近的項(xiàng)web端的基本上是這兩種選型。

其它常設(shè)計(jì)有wpf/qt/mfc/開發(fā)，在c++或c#下運(yùn)行的客戶端程序

 

 

其它例如:

Bootstrap 是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包。是基于 HTML、CSS、JAVASCRIPT 的,它簡(jiǎn)潔靈活,使得 Web 開發(fā)更加快捷

https://getbootstrap.com/docs/5.1/examples/

developer與material匯聚了ios、安卓組件框架及人機(jī)交互指南,相關(guān)鏈接:

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.google.cn/docs/quality-guidelines/core-app-quality

https://material.io/components?platform=android

 

藍(lán)藍(lán)設(shè)計(jì)——    作者：純純

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)