關於小程序的界面設計開發的探索

在咱們作不少軟件的時候，通常都會前端後端分開，對於咱們通常的開發人員來講，側重一個方向居多，如編碼的就較少設計UI的設計開發，特別在目前一些APP、Web方面，界面的設計方面更加是比較精細化，也愈來愈須要一些專業化的人員去專門處理。不過話說回來，不少時候，咱們小項目也須要本身可以舉得起大刀，用得了菜刀，有時候形勢所逼也須要咱們擅長後端開發的人員兼顧UI的開發，通常不太複雜的界面也不用去專門找一個UI設計的人員了。本篇專門針對於小程序的界面設計方面進行一些探索性的研究討論，介紹小程序界面設計的一些思路和方向。

一、基於快速開發的設計平臺

在網上搜索一下，關於小程序零編碼的平臺如雨後春筍通常，使人應接不暇，各類設計平臺的網站使人眼花繚亂，隨着這幾年H5頁面設計的興起，不少這樣的設計平臺，換一個馬甲就繼續囊括小程序的在線設計了，感受上是重複了互聯網早期網頁設計的那種風潮，小程序零代碼？那種是一種比較簡單的靜態小程序，也多是具備一些表單填寫功能的小程序，不過這種需求隨着小程序的熱度高升而帶動了不少這些商機，畢竟通常商家沒有一個看着順眼的小程序，感受就低人一等般，所以這樣相似靜態頁面般的小程序仍是有很大的市場。

而基於這些快速開發的設計平臺，只須要繳納年費，就能夠套用模板，快速設計出比較美觀的界面了，速度第一啊，通常設計人員搞一套過得去的界面，還須要瞭解客戶需求，還須要設計下，至少一個一天半天，人家直接出效果部署，先後幾分鐘就搞定，所以有很大的市場。

這些開發平臺通常不給導出源碼（如表明的凡科輕站 http://www.fkw.com/），即便可以使用其餘途徑下載到小程序的源碼，也是高度被高度封裝混淆的，很難搞的明白，固然部分樣式仍是能夠參考下的，這類設計平臺的特色是付費模板比較多，並且也比較好看。

也有一些可以給導出源碼，源碼要求符合小程序的標準格式，較好的閱讀的（這個表明有意派Coolsite360 http://www.coolsite360.com/wxapp/），基於快速設計小程序界面，基於一些組件模板的開發，不過缺點是組件模板太少，這個應該是基於開發人員的視角來作的，若是可以堅持能夠導出文件，且組件內容比較多的話，應該頗有吸引力。

另一個也值得提一下的是墨刀，這個也是基於設計師的視角來設計小程序界面的，界面元素比較豐富，略顯得臃腫一些。這個是一個客戶端的軟件，安裝後能夠進行界面的設計，另外能夠導出網頁文件，但非小程序格式內容，這點作的沒有前面說的意派Coolsite360好。

 

基於這些開發，應該是在素材或者模板比較豐富的時候，快速套用一些設計風格比較方便，能夠很方便作出比較專業的效果，不過也缺點是受制於人，還有就是要交納很多的費用，這對於通常小項目或者偶爾作的小程序項目的團隊來講，是一個很多的費用。

 

二、基於Sketch設計

通常如今設計APP、Web網站、小程序等，均可能會用到強大的設計工具Sketch，這個工具在設計領域用的愈來愈普遍，並且功能確實也夠好，不過和其餘工具同樣，須要花點時間來學習下如何使用，目前微信官方不少資源都同時放出Sketch的設計原稿，能夠在網站上下載到的。

Sketch 是一款適用於全部設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁，圖標以及界面設計的最好方式。

Sketch 是爲圖標設計和界面設計而生的，它是一個有着出色 UI 的一站式應用。

Sketch是一個功能強大的、易用的偉大產品，是應用在Mac上的一款設計軟件，在UI設計領域有着很好的聲譽，只要搜一下這個關鍵字，不少教程和相關資源都會出現，學習起來也不算太難。

 它的界面分爲幾個區域，以下所示

基於Sketch的設計，咱們也能夠用按部就班的方式來組合咱們的設計圖，也就是原子設計理念來指導模塊化處理。

基於Sketch的開發，須要積累必定的時間，不過好處就是不用受制於一些貌似很強大的界面設計平臺，那些早期使用、或者快速交付的時候使用卻是能夠，長久的話，仍是須要掌握相關的設計知識，利用專業工具快速開發本身的界面。

厚積薄發，慢慢的積累更多一些Sketch的素材以及設計資源，多動手解決問題纔是根本。

在小程序的界面設計完成後，咱們就能夠結合咱們的後端API，在客戶端封裝相關的JS的處理，從而實現一個前端後端完整的解決方案。