hello, 大家好, 我是徐小夕, 今天繼續和大家分享有關 Dooring低代碼 的技術實踐, 我會從輔助設計的維度來和大家分享一下 Dooring 在這方面做的一些技術實踐和展望.

H5-Dooring 斷斷續續已經迭代了3個年頭, 從UI設計,到組件物料, 再到搭建能力, 一直在不斷更新,往更優的方案邁進, 致力于打造極致的用戶體驗. 接下來我分享的內容主要由以下幾個方面組成:

1. 組件面板可定制

傳統的搭建系統組件面板基本是固定的, 如果后期組件逐漸增多, 對用戶側會造成一定的使用負擔. 由于用戶常用的組件數是有限的, 所以為了提高用戶發現目標組件的效率, H5-Dooring 提供了組件定制面板, 用戶可以自己定制常用的組件顯示, 并支持組件搜索:

同時編輯器支持組件搜索能力:

通過這種方式, 我們可以把組件物料的選擇權交給用戶, 讓用戶有更多的自定義能力, 從而提高搭建幸福感.

2. 畫布輔助設計

畫布輔助設計主要是為了幫助用戶更精準的進行頁面搭建, 使得非技術人員也能做出專業的頁面設計. 接下來分享一下 ??Dooring?? 在畫布輔助上做的改進.

2.1 參考線設計

這塊主要借鑒了老牌設計軟件 PhotoShop?, 我們可以便捷的在 Dooring? 的標尺雙擊來生成參考線(包括x?軸, y軸), 我們可以把參考線拖拽到畫布任意位置, 來實現對元素定位的參考.

2.2 標尺設計

標尺設計主要是為輔助參考線, 進行更精準的參考線位置和布局的規劃, 隨著畫布的縮放, 參考線也會等比例縮放, 保證和畫布一致.

2.3 網格線設計

網格線的價值在于用戶可以在非設計稿的情況下, 精準控制元素的位置, 比如對齊, 排列等, 我們可以通過網格布局(Dooring的設計哲學之一) 的搭建模式下更快速的布局和排版頁面.

2.4 配色面板

在傳統搭建平臺里, 如果沒有豐富的模版支持撐, 小白用戶很難做出精致的頁面, 包括設計元素, 包括色彩搭配等, 所以基于這樣的背景, ??Dooring?? 引入了免費素材庫和色彩搭配面板, 方便用戶做頁面設計參考:

素材庫里列出了我們調研之后得出的的幾個常用分類:

• 商業素材
• 生活類素材
• 自然類素材
• 插畫類素材

配色方案目前提供了:

• 傳統色
• 低調色
• 漸變色
• 色彩通用搭配方案
• 卡其色

用戶可以參考配色方案搭建不同色彩風格的頁面.

3. 視圖控件

視圖控件主要是方便用戶可以更快捷的調整畫布和控制畫布中的元素. 我們都知道一旦頁面中的元素變多之后, 我們在查找組件或者調整頁面結構的時候就會變得非常麻煩, 比如頁面過長, 我們需要上滑動才能定位到指定位置, 再比如頁面元素過多, 我們想快速找到某一個元素并調整, 這樣變得非常困難, 所以 ??Dooring?? 基于這些痛點做了一些改進和優化.

3.1 尺寸控制

通過 Dooring 提供的畫布控制面板, 我們可以快捷的切換畫布大小, 或者通過手動輸入自定義尺寸的方式來改變畫布大小.

3.2 圖層管理

為了解決上述分析的第二個問題, Dooring 設計了圖層管理面板.

我們可以通過圖層管理面板輕松的管理畫布中的組件, 比如:

• 顯示/ 隱藏 組件
• 刪除組件
• 調整組件排序(后期會迭代)

當然后期也會提供更強大的圖層面板.

3.3 快捷鍵支持

為了方便用戶在畫布中高效的創作, 快捷鍵是必不可少的, 所以 ??Dooring?? 也提供了快捷鍵的能力:

我們可以通過快捷鍵, 快速的實現復制, 刪除, 粘貼圖片等功能.

4. 搭建模式的創新

傳統搭建平臺一般都是自由布局或者自然流布局, 搭建模式比較單一, 很難滿足用戶不同業務場景的搭建需求, 所以??Dooring?? 在這方面做了一定的創新, 同時支持兩種模式的搭建:

• 自由布局
• 智能網格布局

用戶可以更新不同場景隨意切換.

5. 有關智能設計的展望

后期 Dooring 也會在智能化方向做一些努力, 比如無痕生成頁面, 智能參數化生成模版等, 在搭建體驗和搭建生態上也會持續完善, 如果你有更好的建議, 歡迎隨時反饋~