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

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

1. 組件面板可定制

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

同時(shí)編輯器支持組件搜索能力:

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

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

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

2.1 參考線設(shè)計(jì)

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

2.2 標(biāo)尺設(shè)計(jì)

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

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

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

2.4 配色面板

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

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

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

配色方案目前提供了:

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

用戶可以參考配色方案搭建不同色彩風(fēng)格的頁(yè)面.

3. 視圖控件

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

3.1 尺寸控制

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

3.2 圖層管理

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

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

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

當(dāng)然后期也會(huì)提供更強(qiáng)大的圖層面板.

3.3 快捷鍵支持

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

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

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

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

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

用戶可以更新不同場(chǎng)景隨意切換.

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

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