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

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

1. 組件面板可定制

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

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

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

2. 畫布輔助設(shè)計

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

2.1 參考線設(shè)計

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

2.2 標尺設(shè)計

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

2.3 網(wǎng)格線設(shè)計

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

2.4 配色面板

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

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

• 商業(yè)素材
• 生活類素材
• 自然類素材
• 插畫類素材

配色方案目前提供了:

• 傳統(tǒng)色
• 低調(diào)色
• 漸變色
• 色彩通用搭配方案
• 卡其色

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

3. 視圖控件

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

3.1 尺寸控制

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

3.2 圖層管理

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

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

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

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

3.3 快捷鍵支持

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

我們可以通過快捷鍵, 快速的實現(xiàn)復(fù)制, 刪除, 粘貼圖片等功能.

4. 搭建模式的創(chuàng)新

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

• 自由布局
• 智能網(wǎng)格布局

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

5. 有關(guān)智能設(shè)計的展望

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