CoolSite360 - 響應式網站/微信小程序 設計工具

11月3日，又是大半夜，微信公眾平臺發布了微信小程序開放公測的消息。

11月4日，Coolsite360小程序設計工具上線公測！

這是國內第一款微信小程序可視化設計工具，集成小程序所有組件，可以在線進行小程序UI設計，支持Flex布局，可直接導出符合小程序標準的代碼供后續開發。          

我們看看 Coolsite360 小程序設計工具有哪些亮點：

集成微信小程序組件 

微信小程序所定義的組件全部集成進來了，設計師可以直接以可視化的方式添加使用。

預置微信設計規范

微信對小程序的UI提出了完整的設計規范，并提供了設計規范資源庫。我們將這套規范也預置進來，設計師可以輕松設計出符合規范要求的小程序了。

支持Flex布局

面對各種手機屏幕尺寸，采用Flex樣式布局，可以確保內容布局的完美適配。我們為此專門開發了Flex樣式設置面板，方便設計師進行布局調整設計。

可視化的樣式設置

對于設計師來說，時時刻刻都需要知道設計效果如何，可視化的樣式設置面板，幫助設計師直觀快速地掌握這一點。相比較于基于代碼的開發工具，無疑更適合于設計師。

支持動畫／交互觸發設定

設計師可以直接完成最終用戶交互體驗的設計，而這些，之前都是要靠程序員編代碼才能搞定的。

實時手機預覽小程序設計

在設計過程中，可以實時在手機中預覽整體效果，畢竟導出到微信小程序開發環境中還是有點麻煩。

一鍵導出小程序代碼

這才是最核心、最關鍵的部分，我們會自動把設計師的設計成果，轉化為符合微信小程序框架規范的代碼包，下載后就可以在微信小程序開發環境中打開，進行后續處理。到了這一步，程序員們就可以接手、進行邏輯和數據層面的開發了。

除了上面說的這些，小程序設計工具還支持粘貼Sketch生成的樣式、支持自定義組件擴展屬性......應該說非常靈活，可以滿足各種個性化的設計要求。

下面再來看三個Demo感受下：

->>部件demo

->>果庫UI

->>豆瓣電影

說了這么多，歡迎大家通過桌面瀏覽器，注冊體驗Coolsite360 小程序設計工具（ http://www.coolsite360.com/ ）。對于Epub360的老用戶們無需注冊，可以使用Epub360用戶賬號直接登錄。

在開始體驗之前，請大家先看看視頻講解，對我們的小程序設計工具有一個整體了解，也歡迎大家閱讀本次推送的第二篇《Coolsite360小程序設計工具快問快答》。