小程序開發模式中的問題及Coolsite360解決方案

2016年HTML5移動生態大會以“分享移動應用及小程序未來發展趨勢”為內容主旨的應用分會場,邀請數位行業頂尖移動應用技術大牛、業界領袖,在實戰經驗中剖析方案與趨勢,共同探討如何抓住小程序第一波紅利。 ...

11cover.png


2016年HTML5移動生態大會——移動應用與小程序專場于12月10日在北京國際會議中心召開,以“分享移動應用及小程序未來發展趨勢”為內容主旨的應用分會場,邀請數位行業頂尖移動應用技術大牛、業界領袖,在實戰經驗中剖析方案與趨勢,共同探討如何抓住小程序第一波紅利。

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

12cover.png
小程序的未來紅利探討(老趙右一)

 

13cover.png
意派科技運營總監老趙演講中


以下是 “微信小程序可視化設計平臺” 演講的主要內容:

小程序開發模式中的問題

2mode.png


小程序開發是一個純粹的前端開發,主要牽扯到產品經理/UI設計、與javascript程序員這兩種角色。在實際的開發過程中,會存在反復的溝通、調整甚至返工,主要原因在于:

1. 設計認知問題:

UI設計一般是在PS/Sketch這些平面設計工具中完成設計,等到真機賞看到實際效果時、才會發現那些在平面靜態設計狀態下沒有考慮到到問題;

2. 設計轉換問題

javascript程序員需要根據設計進行UI開發,包括用戶交互邏輯開發,這其實是一個翻譯的過程,難免會出現在UI設計上的理解偏差;

3. 人員配合問題

自從有了產品經理/UI設計、程序員的分工,雙方的溝通配合就會成為一個問題,往往出現UI設計需要盡快進行調整,但程序員卻很難及時配合的情況。

解決方案:Coolsite360-專業小程序設計工具

3uiue.png


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

小程序可視化設計平臺的形態

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

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

4tool.png


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

5flex.png


3. 通過部件支持 WeUI 設計規范

6weui.png


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

4. 豐富的應用模版

7template.png


Coolsite360具有豐富的應用模版,可以直接套用修改、極大提升設計效率。

5. 豐富的布局樣式部件

8component.png


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

6. 可以對組件進行擴展

9extend.png


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

7. 支持用戶交互設置

ainteraction.png


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

小程序可視化設計與開發的配合

b1souce.png

 

b2source.png


Coolsite360小程序工具可以直接導出符合小程序技術框架的代碼包,后續可以通過GIT的分支合并、進行設計與js開發的并行進行。

小程序發布對于UI設計的影響

cdesign.png



 


關注公眾號,獲取更多H5設計、響應式網頁設計資訊

10

网上棋牌作弊是真的吗