在我們做很多軟件的時(shí)候，一般都會(huì)前端后端分開(kāi)，對(duì)于我們一般的開(kāi)發(fā)人員來(lái)說(shuō)，側(cè)重一個(gè)方向居多，如編碼的就較少設(shè)計(jì)UI的設(shè)計(jì)開(kāi)發(fā)，特別在目前一些APP、Web方面，界面的設(shè)計(jì)方面更加是比較精細(xì)化，也越來(lái)越需要一些專業(yè)化的人員去專門處理。不過(guò)話說(shuō)回來(lái)，很多時(shí)候，我們小項(xiàng)目也需要自己能夠舉得起大刀，用得了菜刀，有時(shí)候形勢(shì)所逼也需要我們擅長(zhǎng)后端開(kāi)發(fā)的人員兼顧UI的開(kāi)發(fā)，一般不太復(fù)雜的界面也不用去專門找一個(gè)UI設(shè)計(jì)的人員了。本篇專門針對(duì)于小程序的界面設(shè)計(jì)方面進(jìn)行一些探索性的研究討論，介紹小程序界面設(shè)計(jì)的一些思路和方向。

1、基于快速開(kāi)發(fā)的設(shè)計(jì)平臺(tái)

在網(wǎng)上搜索一下，關(guān)于小程序零編碼的平臺(tái)如雨后春筍一般，令人目不暇接，各種設(shè)計(jì)平臺(tái)的網(wǎng)站令人眼花繚亂，隨著這幾年H5頁(yè)面設(shè)計(jì)的興起，很多這樣的設(shè)計(jì)平臺(tái)，換一個(gè)馬甲就繼續(xù)囊括小程序的在線設(shè)計(jì)了，感覺(jué)上是重復(fù)了互聯(lián)網(wǎng)早期網(wǎng)頁(yè)設(shè)計(jì)的那種風(fēng)潮，小程序零代碼？那種是一種比較簡(jiǎn)單的靜態(tài)小程序，也可能是具有一些表單填寫(xiě)功能的小程序，不過(guò)這種需求隨著小程序的熱度高升而帶動(dòng)了很多這些商機(jī)，畢竟一般商家沒(méi)有一個(gè)看著順眼的小程序，感覺(jué)就低人一等般，因此這樣類似靜態(tài)頁(yè)面般的小程序還是有很大的市場(chǎng)。

而基于這些快速開(kāi)發(fā)的設(shè)計(jì)平臺(tái)，只需要繳納年費(fèi)，就可以套用模板，快速設(shè)計(jì)出比較美觀的界面了，速度第一啊，一般設(shè)計(jì)人員搞一套過(guò)得去的界面，還需要了解客戶需求，還需要設(shè)計(jì)下，至少一個(gè)一天半天，人家直接出效果部署，前后幾分鐘就搞定，因此有很大的市場(chǎng)。

這些開(kāi)發(fā)平臺(tái)一般不給導(dǎo)出源碼（如代表的凡科輕站 http://xintu.fkw.com/），即使能夠使用其他途徑下載到小程序的源碼，也是高度被高度封裝混淆的，很難搞的明白，當(dāng)然部分樣式還是可以參考下的，這類設(shè)計(jì)平臺(tái)的特點(diǎn)是付費(fèi)模板比較多，而且也比較好看。

也有一些能夠給導(dǎo)出源碼，源碼要求符合小程序的標(biāo)準(zhǔn)格式，較好的閱讀的（這個(gè)代表有意派Coolsite360 http://xintu.coolsite360.com/wxapp/），基于快速設(shè)計(jì)小程序界面，基于一些組件模板的開(kāi)發(fā)，不過(guò)缺點(diǎn)是組件模板太少，這個(gè)應(yīng)該是基于開(kāi)發(fā)人員的視角來(lái)做的，如果能夠堅(jiān)持可以導(dǎo)出文件，且組件內(nèi)容比較多的話，應(yīng)該很有吸引力。

另外一個(gè)也值得提一下的是墨刀，這個(gè)也是基于設(shè)計(jì)師的視角來(lái)設(shè)計(jì)小程序界面的，界面元素比較豐富，略顯得臃腫一些。這個(gè)是一個(gè)客戶端的軟件，安裝后可以進(jìn)行界面的設(shè)計(jì)，另外可以導(dǎo)出網(wǎng)頁(yè)文件，但非小程序格式內(nèi)容，這點(diǎn)做的沒(méi)有前面說(shuō)的意派Coolsite360好。

基于這些開(kāi)發(fā)，應(yīng)該是在素材或者模板比較豐富的時(shí)候，快速套用一些設(shè)計(jì)風(fēng)格比較方便，可以很方便做出比較專業(yè)的效果，不過(guò)也缺點(diǎn)是受制于人，還有就是要交納不少的費(fèi)用，這對(duì)于一般小項(xiàng)目或者偶爾做的小程序項(xiàng)目的團(tuán)隊(duì)來(lái)說(shuō)，是一個(gè)不少的費(fèi)用。

2、基于Sketch設(shè)計(jì)

一般現(xiàn)在設(shè)計(jì)APP、Web網(wǎng)站、小程序等，都可能會(huì)用到強(qiáng)大的設(shè)計(jì)工具Sketch，這個(gè)工具在設(shè)計(jì)領(lǐng)域用的越來(lái)越廣泛，而且功能確實(shí)也夠好，不過(guò)和其他工具一樣，需要花點(diǎn)時(shí)間來(lái)學(xué)習(xí)下如何使用，目前微信官方很多資源都同時(shí)放出Sketch的設(shè)計(jì)原稿，可以在網(wǎng)站上下載到的。

Sketch 是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用。矢量繪圖也是目前進(jìn)行網(wǎng)頁(yè)，圖標(biāo)以及界面設(shè)計(jì)的最好方式。

Sketch 是為圖標(biāo)設(shè)計(jì)和界面設(shè)計(jì)而生的，它是一個(gè)有著出色 UI 的一站式應(yīng)用。

Sketch是一個(gè)功能強(qiáng)大的、易用的偉大產(chǎn)品，是應(yīng)用在Mac上的一款設(shè)計(jì)軟件，在UI設(shè)計(jì)領(lǐng)域有著很好的聲譽(yù)，只要搜一下這個(gè)關(guān)鍵字，很多教程和相關(guān)資源都會(huì)出現(xiàn)，學(xué)習(xí)起來(lái)也不算太難。

它的界面分為幾個(gè)區(qū)域，如下所示

基于Sketch的設(shè)計(jì)，我們也可以用循序漸進(jìn)的方式來(lái)組合我們的設(shè)計(jì)圖，也就是原子設(shè)計(jì)理念來(lái)指導(dǎo)模塊化處理。

基于Sketch的開(kāi)發(fā)，需要積累一定的時(shí)間，不過(guò)好處就是不用受制于一些貌似很強(qiáng)大的界面設(shè)計(jì)平臺(tái)，那些早期使用、或者快速交付的時(shí)候使用倒是可以，長(zhǎng)久的話，還是需要掌握相關(guān)的設(shè)計(jì)知識(shí)，利用專業(yè)工具快速開(kāi)發(fā)自己的界面。

厚積薄發(fā)，慢慢的積累更多一些Sketch的素材以及設(shè)計(jì)資源，多動(dòng)手解決問(wèn)題才是根本。

在小程序的界面設(shè)計(jì)完成后，我們就可以結(jié)合我們的后端API，在客戶端封裝相關(guān)的JS的處理，從而實(shí)現(xiàn)一個(gè)前端后端完整的解決方案。