2016年9月，隨著微信小程序內(nèi)測(cè)的消息發(fā)布，引起了前端開(kāi)發(fā)圈的熱議，晚上放出的消息，第二天便有熬夜的嘗鮮者將小程序開(kāi)發(fā)教程推出，各種小程序相關(guān)的QQ群、微信群、論壇也很快集聚人氣，微信坐擁8億月活用戶，每一個(gè)動(dòng)作都牽動(dòng)眾多領(lǐng)域的關(guān)注，各個(gè)群體都在尋找屬于自己的風(fēng)口，筆者也湊湊熱鬧，由小程序做引，談?wù)剬?duì)設(shè)計(jì)領(lǐng)域的隨想。

首先，微信小程序到底是什么？

從產(chǎn)品角度來(lái)講，引自微信之父張小龍的觀點(diǎn)：

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可 打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。

從開(kāi)發(fā)角度來(lái)講：

小程序是通過(guò)類web開(kāi)發(fā)的方式，使用Javas cript、html（wxml）、css（wxss）開(kāi)發(fā)，結(jié)合微信提供的小程序組件和api，實(shí)現(xiàn)在微信內(nèi)運(yùn)行的具有原生app體驗(yàn)的應(yīng)用。

關(guān)于微信小程序的更多的信息請(qǐng)自行搜索，本文不做詳述，僅談?wù)動(dòng)尚〕绦蛞瓿龅南嚓P(guān)設(shè)計(jì)領(lǐng)域的思考。

在展開(kāi)之前，我們先看看其它相關(guān)的信息，看看是否能感受到一些趨勢(shì)。

1、Google：Progressive Web App

Progressive Web App 是近一兩年Google 在 Web 平臺(tái)開(kāi)始推廣的一個(gè)新概念，可以盡可能借助目前的web新技術(shù)（比如 Service Worker ， Push Notification 及其他展現(xiàn)層的新技術(shù)），可以實(shí)現(xiàn)離線應(yīng)用、通知功能，讓基于瀏覽器內(nèi)核的Web App 的體驗(yàn)接近Native App 。

2、Facebook：React native

React是目前很火的前端開(kāi)源框架，起源于 Facebook 的內(nèi)部項(xiàng)目，React native可以使用web的開(kāi)發(fā)方式（Javas cript、html、css）來(lái)構(gòu)建原生ios、Android app，試圖解決統(tǒng)一的跨平臺(tái)開(kāi)發(fā)，聲稱可以：Learn once, write anywhere，該框架于2013年5月開(kāi)源。

3、阿里：weex

2016年4月21日，阿里巴巴在Qcon大會(huì)上宣布跨平臺(tái)移動(dòng)開(kāi)發(fā)工具Weex開(kāi)放內(nèi)測(cè)邀請(qǐng)，Weex能夠完美兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開(kāi)發(fā)者通過(guò)Javas cript、html、css前端語(yǔ)言寫(xiě)出Native級(jí)別的性能體驗(yàn)，并支持iOS、安卓、YunOS及Web等多端部署。

以上談到的Google Progressive Web App、Facebook react native、阿里的weex 以及騰訊推出的小程序，四家巨頭，產(chǎn)品及商業(yè)模式會(huì)有很大不同，但在技術(shù)研發(fā)領(lǐng)域都在做一件事：希望通過(guò)統(tǒng)一的開(kāi)發(fā)方式（Javas cript、html、css），解決跨平臺(tái)的web以及app開(kāi)發(fā)及部署。

看到這里，可能會(huì)感覺(jué)還是和設(shè)計(jì)無(wú)關(guān)，筆者倒是認(rèn)為，這些會(huì)對(duì)設(shè)計(jì)領(lǐng)域帶來(lái)深遠(yuǎn)影響，隨著微信小程序的推出，相信UI設(shè)計(jì)師短期內(nèi)又會(huì)火起來(lái)，除此之外，還會(huì)帶來(lái)哪些影響？

1、統(tǒng)一的布局與樣式描述語(yǔ)言，帶來(lái)全棧設(shè)計(jì)師的興起

網(wǎng)頁(yè)、ios app、Android app各自采用不同的結(jié)構(gòu)布局及樣式描述語(yǔ)言，帶來(lái)很大的設(shè)計(jì)與開(kāi)發(fā)困擾，隨著html、css做為統(tǒng)一的web及app的結(jié)構(gòu)布局及樣式設(shè)計(jì)語(yǔ)言，會(huì)大大降低前端設(shè)計(jì)的學(xué)習(xí)門檻，未來(lái)，具有優(yōu)秀的設(shè)計(jì)理念及精通響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)、app UI及交互設(shè)計(jì)的全棧設(shè)計(jì)師會(huì)越來(lái)越多，同時(shí)也會(huì)對(duì)設(shè)計(jì)師崗位要求越來(lái)越高。

2、設(shè)計(jì)即開(kāi)發(fā)- 設(shè)計(jì)直接交付成為可能

做為前端設(shè)計(jì)師可能都有這樣的感受，通過(guò)PS、AI出設(shè)計(jì)稿，用Principle、Flinto做高保真交互原型，效果很棒，但真正開(kāi)發(fā)出來(lái)，與設(shè)計(jì)稿相去甚遠(yuǎn)，除了客戶及老板的無(wú)節(jié)制改稿外，其實(shí)有兩個(gè)主要原因是目前設(shè)計(jì)流程的弊端：

一是靜態(tài)化設(shè)計(jì)方式：PS、AI無(wú)法呈現(xiàn)多尺寸屏幕適配，設(shè)計(jì)視角被局限，無(wú)法便捷地在動(dòng)態(tài)環(huán)境下修正設(shè)計(jì)。

二是不能做到設(shè)計(jì)直接交付：設(shè)計(jì)稿的最終呈現(xiàn)由程序員寫(xiě)代碼開(kāi)發(fā)，既不能保證最終設(shè)計(jì)的還原，也帶來(lái)了大量的溝通成本和UI開(kāi)發(fā)成本。設(shè)計(jì)直接交付，是指設(shè)計(jì)稿直接可用于業(yè)務(wù)開(kāi)發(fā)，UI及視覺(jué)交互層由設(shè)計(jì)師直接完成，設(shè)計(jì)即開(kāi)發(fā)。程序員在此基礎(chǔ)上僅完成業(yè)務(wù)邏輯及動(dòng)態(tài)數(shù)據(jù)的開(kāi)發(fā)。

未來(lái)，隨著Html、css做為web、app及微信小程序的結(jié)構(gòu)樣式設(shè)計(jì)語(yǔ)言，可視化設(shè)計(jì)工具會(huì)更加容易實(shí)現(xiàn)跨平臺(tái)的設(shè)計(jì)直接交付。

好在已經(jīng)有很多公司在致力研發(fā)可直接交付的可視化設(shè)計(jì)工具，adobe、webflow、froont以及我們意派的Coolsite360，可以無(wú)需編寫(xiě)html及css，直接動(dòng)態(tài)設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)，甚至可以可視化設(shè)計(jì)微信小程序（Coolsite360近期會(huì)推出小程序編輯器），并可導(dǎo)出可直接開(kāi)發(fā)的前端代碼。

3、Html、css 會(huì)成為更多領(lǐng)域的設(shè)計(jì)語(yǔ)言及規(guī)范

目前Javas cript開(kāi)發(fā)人員異常緊缺，原因在于Javas cript除了能做網(wǎng)頁(yè)前端開(kāi)發(fā)，還能做原生app開(kāi)發(fā)以及服務(wù)器端開(kāi)發(fā)，甚至用來(lái)進(jìn)行物聯(lián)網(wǎng)系統(tǒng)的開(kāi)發(fā)，同樣，html、css原本做為網(wǎng)頁(yè)的結(jié)構(gòu)布局以及樣式描述語(yǔ)言，也在向移動(dòng)app、桌面端應(yīng)用領(lǐng)域拓展，由于其具有良好的彈性布局及豐富的樣式描述，并且與Javas cript的無(wú)縫結(jié)合，將來(lái)會(huì)成為更多領(lǐng)域的設(shè)計(jì)語(yǔ)言及規(guī)范。

做為設(shè)計(jì)師，強(qiáng)烈建議一定要學(xué)習(xí)html以及css，雖然設(shè)計(jì)師學(xué)習(xí)編寫(xiě)代碼一直是一個(gè)非常困難的事，但，必須要學(xué)習(xí)，當(dāng)然，大多數(shù)設(shè)計(jì)師不一定非要自己寫(xiě)html以及css代碼，這些可以使用可視化工具，但基本的Html以及css的概念一定要有，掌握這些，除了完成設(shè)計(jì)需要，html、css本身就是一套非常值得學(xué)習(xí)的設(shè)計(jì)系統(tǒng)。

4、技術(shù)驅(qū)動(dòng)時(shí)代的設(shè)計(jì)缺失

做為非專業(yè)設(shè)計(jì)師，談這個(gè)話題有些牽強(qiáng)，也有些跑題，只是有感而發(fā)，希望能拋磚引玉。

隨著信息技術(shù)的發(fā)展及不斷滲透，越來(lái)越體現(xiàn)出技術(shù)驅(qū)動(dòng)的社會(huì)發(fā)展脈絡(luò)，互聯(lián)網(wǎng)技術(shù)及應(yīng)用的發(fā)展，已帶來(lái)了廣告、出版?zhèn)髅降缺姸嘈袠I(yè)的天翻地覆的變化，設(shè)計(jì)領(lǐng)域也同樣顯示出技術(shù)驅(qū)動(dòng)的特征，微軟的windows phone可能是個(gè)失敗的系統(tǒng)，但Metro UI規(guī)范帶來(lái)了耳目一新的信息交互設(shè)計(jì)思考和嘗試，google的Material Design從材質(zhì)與微交互的角度提升了交互體驗(yàn)以及規(guī)范了安卓app的設(shè)計(jì)統(tǒng)一。

但這些還遠(yuǎn)遠(yuǎn)不夠，相較于平面設(shè)計(jì)領(lǐng)域近100年歷史的平面構(gòu)成理論以及近60年的網(wǎng)格設(shè)計(jì)理論，在信息時(shí)代還未出現(xiàn)同等份量的設(shè)計(jì)方法理論體系，當(dāng)然，也有很多像IDEO這些相信設(shè)計(jì)改變一切的具有使命感的設(shè)計(jì)機(jī)構(gòu)在做出自己的努力。

我一直相信，在信息時(shí)代，設(shè)計(jì)師，除了做好UI及交互，應(yīng)該還能發(fā)揮更大的能量，如何通過(guò)設(shè)計(jì)改變現(xiàn)有的紛繁復(fù)雜的開(kāi)發(fā)模式？如何通過(guò)設(shè)計(jì)來(lái)統(tǒng)一描述復(fù)雜的業(yè)務(wù)邏輯？如何通過(guò)設(shè)計(jì)讓更多不懂設(shè)計(jì)的人做出有一定水準(zhǔn)的設(shè)計(jì)？如果你有好的想法，也歡迎與我們聯(lián)系，說(shuō)不定，可以一起做些有意思的事。

不管你關(guān)心不關(guān)心，微信小程序很快會(huì)來(lái)，或許你整天忙于加班趕稿，無(wú)暇顧及左右其它，但，變革會(huì)無(wú)聲無(wú)息地繼續(xù)，總有些人會(huì)先知先覺(jué)，擁抱變化，并不忘初心，這個(gè)人，會(huì)是你嗎？