2016年HTML5移動生態(tài)大會——移動應(yīng)用與小程序?qū)鲇?2月10日在北京國際會議中心召開，以“分享移動應(yīng)用及小程序未來發(fā)展趨勢”為內(nèi)容主旨的應(yīng)用分會場，邀請數(shù)位行業(yè)頂尖移動應(yīng)用技術(shù)大牛、業(yè)界領(lǐng)袖，在實戰(zhàn)經(jīng)驗中剖析方案與趨勢，共同探討如何抓住小程序第一波紅利。

意派科技運營總監(jiān)趙玉勇（老趙）參與了圓桌討論，并做了 “小程序開發(fā)模式中的問題及Coolsite360解決方案” 的主題演講。

以下是 “微信小程序可視化設(shè)計平臺” 演講的主要內(nèi)容：

小程序開發(fā)模式中的問題

小程序開發(fā)是一個純粹的前端開發(fā)，主要牽扯到產(chǎn)品經(jīng)理／UI設(shè)計、與javascript程序員這兩種角色。在實際的開發(fā)過程中，會存在反復(fù)的溝通、調(diào)整甚至返工，主要原因在于：

1. 設(shè)計認知問題：

UI設(shè)計一般是在PS／Sketch這些平面設(shè)計工具中完成設(shè)計，等到真機賞看到實際效果時、才會發(fā)現(xiàn)那些在平面靜態(tài)設(shè)計狀態(tài)下沒有考慮到到問題；

2. 設(shè)計轉(zhuǎn)換問題

javascript程序員需要根據(jù)設(shè)計進行UI開發(fā)，包括用戶交互邏輯開發(fā)，這其實是一個翻譯的過程，難免會出現(xiàn)在UI設(shè)計上的理解偏差；

3. 人員配合問題

自從有了產(chǎn)品經(jīng)理／UI設(shè)計、程序員的分工，雙方的溝通配合就會成為一個問題，往往出現(xiàn)UI設(shè)計需要盡快進行調(diào)整，但程序員卻很難及時配合的情況。

解決方案：Coolsite360-專業(yè)小程序設(shè)計工具

通過使用Coolsite360小程序設(shè)計工具，“設(shè)計即交付”，可以很大程度解決這些問題。

小程序可視化設(shè)計平臺的形態(tài)

Coolsite360小程序可視化設(shè)計，讓設(shè)計即交付成為可能。從以下幾個方面來看看是如何做到 “設(shè)計即交付” 的。

1. 具備完整小程序組件與樣式設(shè)置面板

2. 支持 Flex / rem 解決屏幕適配問題

3. 通過部件支持 WeUI 設(shè)計規(guī)范

微信官方對小程序設(shè)計規(guī)范有非常明確的視覺與規(guī)則要求，通過豐富的WeUI樣式部件，Coolsite360支持WeUI設(shè)計規(guī)范。

4. 豐富的應(yīng)用模版

Coolsite360具有豐富的應(yīng)用模版，可以直接套用修改、極大提升設(shè)計效率。

5. 豐富的布局樣式部件

小程序的UI開發(fā)主要是布局樣式，通過豐富的布局樣式部件，可以通過拼裝的方式、選用合適的部件快速完成小程序頁面設(shè)計開發(fā)。

6. 可以對組件進行擴展

Coolsite360小程序設(shè)計工具中有一些擴展組件，是基于小程序原生組件組合擴展開發(fā)出來的，后續(xù)會持續(xù)開發(fā)常用的組件，彌補小程序原生組件、提升小程序UI設(shè)計開發(fā)效率。

7. 支持用戶交互設(shè)置

Coolsite360小程序工具支持設(shè)置交互觸發(fā)與動畫，以上圖為例，通過設(shè)置點擊觸發(fā)配合組件的動畫，就能做出側(cè)滑、彈出蒙層等交互效果，真正完成用戶交互的設(shè)計開發(fā)。

小程序可視化設(shè)計與開發(fā)的配合

Coolsite360小程序工具可以直接導(dǎo)出符合小程序技術(shù)框架的代碼包，后續(xù)可以通過GIT的分支合并、進行設(shè)計與js開發(fā)的并行進行。

小程序發(fā)布對于UI設(shè)計的影響

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