2019年，UI設(shè)計(jì)師應(yīng)該了解的這10個(gè)前端框架
現(xiàn)在越來越多的公司開始要求UI設(shè)計(jì)師掌握基本的前端技能，本文給大家列舉了2019年10個(gè)比較常用的前端框架，一起了解下。
從去年下半年開始，互聯(lián)網(wǎng)行業(yè)慢慢進(jìn)入寒冬，一些設(shè)計(jì)師也不得不重新找工作。關(guān)于求職這個(gè)事情，UI黑客之前寫過一篇文章《面試了50多位UI設(shè)計(jì)師，我總結(jié)了這些求職技巧》，大家可以參考下。打鐵還需自身硬，找工作最重要的還是靠自身的能力。
那么究竟需要具備什么樣的能力能得到公司的青睞呢？
就拿市面上眾多的UI培訓(xùn)班來說吧，作為盈利性機(jī)構(gòu)，培訓(xùn)班的課程結(jié)構(gòu)肯定是和當(dāng)下公司實(shí)際需求掛鉤的。畢業(yè)的學(xué)生被公司錄用越多，口碑效應(yīng)就會(huì)出現(xiàn)，那么報(bào)班的生源也會(huì)越多，培訓(xùn)機(jī)構(gòu)自然賺的越多。
越來越多的培訓(xùn)機(jī)構(gòu)開設(shè)了前端課程，這就說明公司實(shí)際需求大概也是這樣的。現(xiàn)在求職，不說自己會(huì)點(diǎn)前端都不好意思面試，UI設(shè)計(jì)師學(xué)前端也是時(shí)下的趨勢(shì)。
實(shí)際上，在公司項(xiàng)目中，設(shè)計(jì)師了解前端，會(huì)極大提升和程序員的協(xié)作效率，減少技術(shù)信息不對(duì)稱的現(xiàn)象。如果在一個(gè)網(wǎng)站項(xiàng)目中，程序員還在跟設(shè)計(jì)師講解最基本的html、css、盒子模型知識(shí)，那開發(fā)效率就可想而知了。
很多公司的項(xiàng)目，都采用了前端框架來開發(fā)，如果設(shè)計(jì)師了解這些框架，能在框架的結(jié)構(gòu)基礎(chǔ)上進(jìn)行UI設(shè)計(jì)，那無疑會(huì)提高項(xiàng)目整體的開發(fā)效率。下面就一起了解下常見的前端框架，說不定面試的時(shí)候能幫大忙。
Ant Design
螞蟻金服出品，非常著名的框架。就算你不了解前端，也會(huì)在公司的項(xiàng)目中多少聽到程序員說起過。目前很多公司都在用，已經(jīng)很成熟。而且提供了對(duì)設(shè)計(jì)師友好的Sketch規(guī)范文件，可以直接拿來用。
Ant Design是基于React開發(fā)的，并不是傳統(tǒng)的html。React 起源于 Facebook 的內(nèi)部項(xiàng)目，現(xiàn)在已經(jīng)成了一個(gè)很流行的開發(fā)工具。
理想的項(xiàng)目開發(fā)流程是，設(shè)計(jì)師和程序員一起熟悉Ant Design的各種樣式，設(shè)計(jì)師不再隨意設(shè)計(jì)，而是基于框架的基礎(chǔ)樣式進(jìn)行設(shè)計(jì)創(chuàng)新。這樣程序員在進(jìn)行UI設(shè)計(jì)稿還原的時(shí)候，能極大提高開發(fā)效率。
現(xiàn)在很多項(xiàng)目都使用了Ant Design，一些公司在招聘UI設(shè)計(jì)師的時(shí)候甚至?xí)懮希毫私釧nt Design規(guī)范的優(yōu)先考慮。所以這個(gè)框架建議設(shè)計(jì)師都好好看一下。
Bootstrap
Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包，是一個(gè)CSS/HTML框架，目前世界上的很多網(wǎng)站開發(fā)都使用了這個(gè)。其中的柵格理論、響應(yīng)式解決方案都變成了業(yè)界的參考規(guī)范。
很多設(shè)計(jì)師在學(xué)前端的時(shí)候，都會(huì)接觸到這個(gè)框架，甚至培訓(xùn)機(jī)構(gòu)有專門的課程，所以重要性可見一斑。
Taro UI
Taro UI，一套基于 Taro 框架開發(fā)的多端 UI 組件庫(kù)，可以在微信小程序 / H5 / ReactNative 等多端適配運(yùn)行。京東用戶體驗(yàn)設(shè)計(jì)部的凹凸實(shí)驗(yàn)室出品。
現(xiàn)在一個(gè)產(chǎn)品要求在iOS、安卓、小程序、h5等多端運(yùn)行，針對(duì)不同的客戶端開發(fā)不同的代碼會(huì)產(chǎn)生巨大的成本，這時(shí)候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro，就可以只寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、RN等）運(yùn)行的代碼，節(jié)約成本。
iView
一套基于 Vue.js 的高質(zhì)量UI 組件庫(kù)。Vue.js 是一個(gè)JavaScriptMVVM庫(kù)，是一套構(gòu)建用戶界面的漸進(jìn)式框架。
在網(wǎng)站中可以看到數(shù)量眾多的UI組件和對(duì)應(yīng)代碼，本質(zhì)上和我們制作UI規(guī)范是一樣的。
LuLu UI
LuLu UI，是一個(gè)基于jQuery，針對(duì)PC網(wǎng)站，兼容ie8、ie7的前端UI框架，包含很多靜態(tài)或動(dòng)態(tài)UI組件。對(duì)設(shè)計(jì)師非常友好，只需要簡(jiǎn)單的html、css知識(shí)就能快速上手使用。
區(qū)別于Ant design面向中后臺(tái)開發(fā)，LuLu UI非常適合面向外部用戶的網(wǎng)站開發(fā)。會(huì)簡(jiǎn)單HTML和jQuery就可以上手了，不像一些流行框架，需要較多的學(xué)習(xí)成本。
QMUI
QMUI，騰訊出品，分為Web、iOS、安卓三個(gè)端，都有相應(yīng)的dome下載安裝，設(shè)計(jì)師可以下載安卓和iOS應(yīng)用，經(jīng)?？纯蠢锩娴慕M件，熟悉后，和技術(shù)的協(xié)作會(huì)更有效率。
Element
http://element-cn.eleme.io/#/zh-CN
餓了么出品，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)，很適合開發(fā)后臺(tái)產(chǎn)品。有意思的是里面的默認(rèn)圖文數(shù)據(jù)很多都是食物……
Fusion Design
阿里推出的一個(gè)適合設(shè)計(jì)、技術(shù)共同使用的設(shè)計(jì)規(guī)范框架?；灸康囊彩菫榱俗屧O(shè)計(jì)師在一個(gè)標(biāo)準(zhǔn)框架內(nèi)設(shè)計(jì)界面，同時(shí)也提供了Sketch插件，讓設(shè)計(jì)的組件直接轉(zhuǎn)化為代碼，技術(shù)直接調(diào)用。
WeUI
WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。
這個(gè)小巧的框架提供了微信頁(yè)面常用的組件，我們?cè)谠O(shè)計(jì)微信風(fēng)格的項(xiàng)目時(shí)，可以參考使用。
Framework 7
一個(gè)簡(jiǎn)單、免費(fèi)的HTML框架，主要用來構(gòu)建移動(dòng)端web應(yīng)用，分為iOS和安卓?jī)煞N風(fēng)格。
其本身的結(jié)構(gòu)非常簡(jiǎn)單，使用了最基礎(chǔ)的html、css和js構(gòu)建，很容易上手使用。也可以用來作為原型開發(fā)工具，迅速創(chuàng)建一個(gè)應(yīng)用的原型。
總結(jié)
此外還有很多其他的前端框架，以上10個(gè)框架其實(shí)不需要設(shè)計(jì)師非常深入去了解，最基本的要求是設(shè)計(jì)師對(duì)其內(nèi)容、樣式、組件有個(gè)大致的認(rèn)知即可。在和技術(shù)協(xié)作的過程中，知道哪些組件不需要額外設(shè)計(jì)，哪些組件可以進(jìn)行樣式擴(kuò)展。
就比如設(shè)計(jì)師去學(xué)習(xí)前端，并不是去代替前端的工作，而是對(duì)UI界面有個(gè)更深層次的認(rèn)知，設(shè)計(jì)的同時(shí)會(huì)考慮到界面的交互性、擴(kuò)展性、可用性。猶如庖丁解牛，透過表象看到結(jié)構(gòu)本質(zhì)，提高自己的界面把控能力。
END
