在我們做很多軟件的時候，一般都會前端後端分開，對於我們一般的開發人員來說，側重一個方向居多，如編碼的就較少設計UI的設計開發，特別在目前一些APP、Web方面，界面的設計方面更加是比較精細化，也越來越需要一些專業化的人員去專門處理。不過話說回來，很多時候，我們小項目也需要自己能夠舉得起大刀，用得了菜刀，有時候形勢所逼也需要我們擅長後端開發的人員兼顧UI的開發，一般不太複雜的界面也不用去專門找一個UI設計的人員了。本篇專門針對於小程序的界面設計方面進行一些探索性的研究討論，介紹小程序界面設計的一些思路和方向。
1、基於快速開發的設計平臺
在網上搜索一下，關於小程序零編碼的平臺如雨後春筍一般，令人目不暇接，各種設計平臺的網站令人眼花繚亂，隨著這幾年H5頁面設計的興起，很多這樣的設計平臺，換一個馬甲就繼續囊括小程序的在線設計了，感覺上是重複了互聯網早期網頁設計的那種風潮，小程序零代碼？那種是一種比較簡單的靜態小程序，也可能是具有一些表單填寫功能的小程序，不過這種需求隨著小程序的熱度高升而帶動了很多這些商機，畢竟一般商家沒有一個看著順眼的小程序，感覺就低人一等般，因此這樣類似靜態頁面般的小程序還是有很大的市場。
而基於這些快速開發的設計平臺，只需要繳納年費，就可以套用模板，快速設計出比較美觀的界面了，速度第一啊，一般設計人員搞一套過得去的界面，還需要了解客戶需求，還需要設計下，至少一個一天半天，人家直接出效果部署，前後幾分鐘就搞定，因此有很大的市場。
這些開發平臺一般不給導出源碼（如代表的凡科輕站 http://www.fkw.com/），即使能夠使用其他途徑下載到小程序的源碼，也是高度被高度封裝混淆的，很難搞的明白，當然部分樣式還是可以參考下的，這類設計平臺的特點是付費模板比較多，而且也比較好看。
也有一些能夠給導出源碼，源碼要求符合小程序的標準格式，較好的閱讀的（這個代表有意派Coolsite360 http://www.coolsite360.com/wxapp/），基於快速設計小程序界面，基於一些組件模板的開發，不過缺點是組件模板太少，這個應該是基於開發人員的視角來做的，如果能夠堅持可以導出文件，且組件內容比較多的話，應該很有吸引力。
另外一個也值得提一下的是墨刀，這個也是基於設計師的視角來設計小程序界面的，界面元素比較豐富，略顯得臃腫一些。這個是一個客戶端的軟件，安裝後可以進行界面的設計，另外可以導出網頁文件，但非小程序格式內容，這點做的沒有前面說的意派Coolsite360好。
基於這些開發，應該是在素材或者模板比較豐富的時候，快速套用一些設計風格比較方便，可以很方便做出比較專業的效果，不過也缺點是受制於人，還有就是要交納不少的費用，這對於一般小項目或者偶爾做的小程序項目的團隊來說，是一個不少的費用。
2、基於Sketch設計
Sketch 是一款適用於所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁，圖標以及界面設計的最好方式。
Sketch 是為圖標設計和界面設計而生的，它是一個有著出色 UI 的一站式應用。
Sketch是一個功能強大的、易用的偉大產品，是應用在Mac上的一款設計軟件，在UI設計領域有著很好的聲譽，只要搜一下這個關鍵字，很多教程和相關資源都會出現，學習起來也不算太難。
它的界面分為幾個區域，如下所示
基於Sketch的設計，我們也可以用循序漸進的方式來組合我們的設計圖，也就是原子設計理念來指導模塊化處理。
基於Sketch的開發，需要積累一定的時間，不過好處就是不用受制於一些貌似很強大的界面設計平臺，那些早期使用、或者快速交付的時候使用倒是可以，長久的話，還是需要掌握相關的設計知識，利用專業工具快速開發自己的界面。
厚積薄發，慢慢的積累更多一些Sketch的素材以及設計資源，多動手解決問題才是根本。
在小程序的界面設計完成後，我們就可以結合我們的後端API，在客戶端封裝相關的JS的處理，從而實現一個前端後端完整的解決方案。
閱讀更多 前端小學生 的文章
