header_v0.7.32

小程序开发模式中的问题及Coolsite360解决方案

340天前发布

原创文章 / 平面 / 教程
意派 原创,如需商业用途或转载请与意派联系,谢谢配合。

意派科技运营总监赵玉勇于12月10日参与了2016年HTML5移动生态大会——移动应用与小程序专场以“分享移动应用及小程序未来发展趋势”为内容主旨的应用分会场,与数位行业顶尖移动应用技术大牛、业界领袖,在实战经验中剖析方案与趋势,共同探讨如

2cf25853b815a8012060c8d6c05c.jpg

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


意派科技运营总监赵玉勇(老赵)参与了圆桌讨论,并做了 “小程序开发模式中的问题及Coolsite360解决方案” 的主题演讲。

bacc5853b7fba8012060c8191b94.jpg

小程序的未来红利探讨(老赵右一)


f7735853b882a8012060c8b8a342.jpg

意派科技运营总监老赵演讲中


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


小程序开发模式中的问题


ae5b5853b907a801219c7708bab4.jpg


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


设计认知问题:

 

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


设计转换问题:


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


人员配合问题:


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


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


55915853b9c7a801219c77d522ee.jpg


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


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


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


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


179f5853b9daa8012060c8092ee5.jpg


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


40035853b9fda8012060c8b67cc3.jpg


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


d7de5853ba4ca801219c77fa4d36.jpg


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


4. 丰富的应用模版


99e95853ba2da801219c778621be.jpg


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


5. 丰富的布局样式部件


62495853ba1ea8012060c83a74d0.jpg


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


6. 可以对组件进行扩展


bff65853ba5fa801219c77ddb2e9.jpg


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


7. 支持用户交互设置


e3875853ba70a801219c77fd8861.jpg


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


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



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


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


4a2c5853baa9a8012060c83c6332.jpg



2
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功