Dooring低代碼關(guān)于輔助設計的思考和實踐

作者：徐小夕 2023-01-31 07:47:14

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

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

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

1. 組件面板可定制

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

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

2. 畫布輔助設計

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

2.1 參考線設計

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

2.2 標尺設計

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

2.3 網(wǎng)格線設計

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

2.4 配色面板

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

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

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

配色方案目前提供了:

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

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

3. 視圖控件

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