對于微信小程序、對于我們剛發(fā)布上線的Coolsite360小程序設(shè)計工具，我們有一些思考、感興趣的朋友也會有一些問題，這里跟大家做一個簡單的交流：

1. Coolsite360小程序設(shè)計工具能做什么？

CoolSite360推出小程序設(shè)計工具，幫助設(shè)計師無需編寫wxml以及wxss代碼，通過小程序可視化設(shè)計工具就可快速設(shè)計小程序交互UI。 

使用小程序設(shè)計工具設(shè)計的頁面，可以方便地在微信及瀏覽器上預(yù)覽，便于前期的原型展示分享。 

設(shè)計好的頁面，可以一鍵導出符合小程序標準的代碼，可直接進行功能開發(fā)。 

我們希望通過研發(fā)可視化設(shè)計開發(fā)工具，實現(xiàn)UI層的開發(fā)交由設(shè)計師進行。開發(fā)人員可以更專注業(yè)務(wù)邏輯的開發(fā)。

2. 小程序設(shè)計工具目前不能做什么？

目前版本專注于前端UI的可視化設(shè)計，還沒有涉及前端業(yè)務(wù)邏輯以及后端數(shù)據(jù)的處理，后續(xù)隨著版本的迭代，會推出具有一定后端數(shù)據(jù)處理能力的設(shè)計工具，在一定范圍內(nèi)可實現(xiàn)一站交付，但目前還需要導出前端代碼，由開發(fā)人員進行后續(xù)的開發(fā)。 

3. 小程序設(shè)計工具在UI設(shè)計方面主要功能有哪些？

小程序設(shè)計工具集成了微信官方提供的所有組件，可以通過可視化方式進行設(shè)定和屬性配置。 

支持常用css屬性的可視化設(shè)置，支持rem單位，支持flex布局，同時支持自定義css代碼，可通過sketch、ps等軟件復制樣式代碼，滿足全自由度設(shè)計。 

我們后續(xù)也會持續(xù)提供常用的部件模板，比如內(nèi)容列表、網(wǎng)格列表、卡片、導航等，方便用戶進行快速設(shè)計。 

4. 小程序設(shè)計工具除了完成靜態(tài)UI設(shè)計，還能做什么？

小程序設(shè)計工具還支持基本動畫的設(shè)定和控制，比如飛入、飛出、淡入、淡出、放大出現(xiàn)、縮小出現(xiàn)、旋轉(zhuǎn)，以及css transform動畫......并可以通過觸發(fā)器進行動畫控制。 

支持常用觸發(fā)器進行交互控制，比如顯示元素、隱藏元素、播放動畫、跳轉(zhuǎn)頁面、動態(tài)添加組件class、移除組件class、切換元素狀態(tài)以及結(jié)合微信小程序API開發(fā)的一系列觸發(fā)器，可以實現(xiàn)無需代碼進行一定范圍的UI交互控制。 

5. 近期的Coolsite360針對于小程序設(shè)計工具的開發(fā)計劃是什么？

我們會持續(xù)跟進小程序的官方動態(tài)，近階段會進行復合組件的開發(fā)，以彌補官方小程序基礎(chǔ)組件的不足，后續(xù)也會逐漸增加canvas的繪圖功能以及針對于UI微交互的可視化設(shè)置。 

6. 我沒有基礎(chǔ)，應(yīng)該如何著手？

如果要做能直接用于微信小程序開發(fā)的UI前端設(shè)計，除了基本的UI設(shè)計能力外，還需掌握一定的html、css知識，以及了解微信小程序的官方文檔。


作者：意派科技創(chuàng)始人兼產(chǎn)品總監(jiān) 陳建峰

 

 

關(guān)注公眾號，獲取更多H5設(shè)計、響應(yīng)式網(wǎng)頁設(shè)計資訊