在我們做很多軟件的時候,一般都會前端后端分開亥宿,對于我們一般的開發(fā)人員來說卸勺,側重一個方向居多,如編碼的就較少設計UI的設計開發(fā)烫扼,特別在目前一些APP曙求、Web方面,界面的設計方面更加是比較精細化映企,也越來越需要一些專業(yè)化的人員去專門處理悟狱。不過話說回來,很多時候堰氓,我們小項目也需要自己能夠舉得起大刀挤渐,用得了菜刀,有時候形勢所逼也需要我們擅長后端開發(fā)的人員兼顧UI的開發(fā)双絮,一般不太復雜的界面也不用去專門找一個UI設計的人員了浴麻。本篇專門針對于小程序的界面設計方面進行一些探索性的研究討論得问,介紹小程序界面設計的一些思路和方向。
1软免、基于快速開發(fā)的設計平臺
在網(wǎng)上搜索一下椭赋,關于小程序零編碼的平臺如雨后春筍一般,令人目不暇接或杠,各種設計平臺的網(wǎng)站令人眼花繚亂哪怔,隨著這幾年H5頁面設計的興起,很多這樣的設計平臺向抢,換一個馬甲就繼續(xù)囊括小程序的在線設計了认境,感覺上是重復了互聯(lián)網(wǎng)早期網(wǎng)頁設計的那種風潮,小程序零代碼挟鸠?那種是一種比較簡單的靜態(tài)小程序叉信,也可能是具有一些表單填寫功能的小程序,不過這種需求隨著小程序的熱度高升而帶動了很多這些商機艘希,畢竟一般商家沒有一個看著順眼的小程序硼身,感覺就低人一等般,因此這樣類似靜態(tài)頁面般的小程序還是有很大的市場覆享。
而基于這些快速開發(fā)的設計平臺佳遂,只需要繳納年費,就可以套用模板撒顿,快速設計出比較美觀的界面了丑罪,速度第一啊,一般設計人員搞一套過得去的界面凤壁,還需要了解客戶需求吩屹,還需要設計下,至少一個一天半天拧抖,人家直接出效果部署煤搜,前后幾分鐘就搞定,因此有很大的市場唧席。
這些開發(fā)平臺一般不給導出源碼(如代表的凡科輕站 http://www.fkw.com/)擦盾,即使能夠使用其他途徑下載到小程序的源碼,也是高度被高度封裝混淆的袱吆,很難搞的明白厌衙,當然部分樣式還是可以參考下的,這類設計平臺的特點是付費模板比較多绞绒,而且也比較好看婶希。
也有一些能夠給導出源碼,源碼要求符合小程序的標準格式蓬衡,較好的閱讀的(這個代表有意派Coolsite360 http://www.coolsite360.com/wxapp/)喻杈,基于快速設計小程序界面彤枢,基于一些組件模板的開發(fā),不過缺點是組件模板太少筒饰,這個應該是基于開發(fā)人員的視角來做的缴啡,如果能夠堅持可以導出文件,且組件內(nèi)容比較多的話瓷们,應該很有吸引力业栅。
另外一個也值得提一下的是墨刀,這個也是基于設計師的視角來設計小程序界面的谬晕,界面元素比較豐富碘裕,略顯得臃腫一些。這個是一個客戶端的軟件攒钳,安裝后可以進行界面的設計帮孔,另外可以導出網(wǎng)頁文件,但非小程序格式內(nèi)容不撑,這點做的沒有前面說的意派Coolsite360好文兢。
基于這些開發(fā),應該是在素材或者模板比較豐富的時候焕檬,快速套用一些設計風格比較方便姆坚,可以很方便做出比較專業(yè)的效果,不過也缺點是受制于人揩页,還有就是要交納不少的費用旷偿,這對于一般小項目或者偶爾做的小程序項目的團隊來說烹俗,是一個不少的費用爆侣。
2、基于Sketch設計
一般現(xiàn)在設計APP幢妄、Web網(wǎng)站兔仰、小程序等,都可能會用到強大的設計工具Sketch蕉鸳,這個工具在設計領域用的越來越廣泛乎赴,而且功能確實也夠好,不過和其他工具一樣潮尝,需要花點時間來學習下如何使用榕吼,目前微信官方很多資源都同時放出Sketch的設計原稿,可以在網(wǎng)站上下載到的勉失。
Sketch 是一款適用于所有設計師的矢量繪圖應用羹蚣。矢量繪圖也是目前進行網(wǎng)頁,圖標以及界面設計的最好方式乱凿。
Sketch 是為圖標設計和界面設計而生的顽素,它是一個有著出色 UI 的一站式應用咽弦。
Sketch是一個功能強大的、易用的偉大產(chǎn)品胁出,是應用在Mac上的一款設計軟件型型,在UI設計領域有著很好的聲譽,只要搜一下這個關鍵字全蝶,很多教程和相關資源都會出現(xiàn)闹蒜,學習起來也不算太難。
它的界面分為幾個區(qū)域抑淫,如下所示
基于Sketch的設計嫂用,我們也可以用循序漸進的方式來組合我們的設計圖,也就是原子設計理念來指導模塊化處理丈冬。
基于Sketch的開發(fā)嘱函,需要積累一定的時間,不過好處就是不用受制于一些貌似很強大的界面設計平臺埂蕊,那些早期使用往弓、或者快速交付的時候使用倒是可以,長久的話蓄氧,還是需要掌握相關的設計知識函似,利用專業(yè)工具快速開發(fā)自己的界面。
厚積薄發(fā)喉童,慢慢的積累更多一些Sketch的素材以及設計資源撇寞,多動手解決問題才是根本。
在小程序的界面設計完成后堂氯,我們就可以結合我們的后端API蔑担,在客戶端封裝相關的JS的處理,從而實現(xiàn)一個前端后端完整的解決方案咽白。