關(guān)于設(shè)計(jì)中的組件化思維

2022-4-5    純純

組件化思維對(duì)于一個(gè)設(shè)計(jì)師來(lái)說(shuō)十分重要,它能夠幫助你更好的去進(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ā)軟件的組件來(lái)做設(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通過(guò)模塊化解決方案,降低冗余的生產(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ù),通過(guò)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,這樣大大加快了訪問(wèn)速度和提升用戶體驗(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/


developermaterial匯聚了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)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔