2016年HTML5移动生态大会——移动应用与小程序专场于12月10日在北京国际会议中心召开，以“分享移动应用及小程序未来发展趋势”为内容主旨的应用分会场，邀请数位行业顶尖移动应用技术大牛、业界领袖，在实战经验中剖析方案与趋势，共同探讨如何抓住小程序第一波红利。

AG九游会科技运营总监赵玉勇（老赵）参与了圆桌讨论，并做了 “小程序开发模式中的问题及Coolsite360解决方案” 的主题演讲。

以下是 “微信小程序可视化设计平台” 演讲的主要内容：

小程序开发模式中的问题

小程序开发是一个纯粹的前端开发，主要牵扯到产品经理／UI设计、与javascript程序员这两种角色。在实际的开发过程中，会存在反复的沟通、调整甚至返工，主要原因在于：

1. 设计认知问题：

UI设计一般是在PS／Sketch这些平面设计工具中完成设计，等到真机赏看到实际效果时、才会发现那些在平面静态设计状态下没有考虑到到问题；

2. 设计转换问题

javascript程序员需要根据设计进行UI开发，包括用户交互逻辑开发，这其实是一个翻译的过程，难免会出现在UI设计上的理解偏差；

3. 人员配合问题

自从有了产品经理／UI设计、程序员的分工，双方的沟通配合就会成为一个问题，往往出现UI设计需要尽快进行调整，但程序员却很难及时配合的情况。

解决方案：Coolsite360-专业小程序设计工具

通过使用Coolsite360小程序设计工具，“设计即交付”，可以很大程度解决这些问题。

小程序可视化设计平台的形态

Coolsite360小程序可视化设计，让设计即交付成为可能。从以下几个方面来看看是如何做到 “设计即交付” 的。

1. 具备完整小程序组件与样式设置面板

2. 支持 Flex / rem 解决屏幕适配问题

3. 通过部件支持 WeUI 设计规范

微信官方对小程序设计规范有非常明确的视觉与规则要求，通过丰富的WeUI样式部件，Coolsite360支持WeUI设计规范。

4. 丰富的应用模版

Coolsite360具有丰富的应用模版，可以直接套用修改、极大提升设计效率。

5. 丰富的布局样式部件

小程序的UI开发主要是布局样式，通过丰富的布局样式部件，可以通过拼装的方式、选用合适的部件快速完成小程序页面设计开发。

6. 可以对组件进行扩展

Coolsite360小程序设计工具中有一些扩展组件，是基于小程序原生组件组合扩展开发出来的，后续会持续开发常用的组件，弥补小程序原生组件、提升小程序UI设计开发效率。

7. 支持用户交互设置

Coolsite360小程序工具支持设置交互触发与动画，以上图为例，通过设置点击触发配合组件的动画，就能做出侧滑、弹出蒙层等交互效果，真正完成用户交互的设计开发。

小程序可视化设计与开发的配合

Coolsite360小程序工具可以直接导出符合小程序技术框架的代码包，后续可以通过GIT的分支合并、进行设计与js开发的并行进行。

小程序发布对于UI设计的影响

关注公众号，获取更多H5设计、响应式网页设计资讯