建站
咨詢
售后
建站咨詢
新聞中心
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í)編輯器支持組件搜索能力:
通過這種方式, 我們可以把組件物料的選擇權(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ì)齊, 排列等, 我們可以通過網(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è)面過長(zhǎng), 我們需要上滑動(dòng)才能定位到指定位置, 再比如頁(yè)面元素過多, 我們想快速找到某一個(gè)元素并調(diào)整, 這樣變得非常困難, 所以 ??Dooring?? 基于這些痛點(diǎn)做了一些改進(jìn)和優(yōu)化.
3.1 尺寸控制
通過 Dooring 提供的畫布控制面板, 我們可以快捷的切換畫布大小, 或者通過手動(dòng)輸入自定義尺寸的方式來(lái)改變畫布大小.
3.2 圖層管理
為了解決上述分析的第二個(gè)問題, Dooring 設(shè)計(jì)了圖層管理面板.
我們可以通過圖層管理面板輕松的管理畫布中的組件, 比如:
- 顯示/ 隱藏 組件
- 刪除組件
- 調(diào)整組件排序(后期會(huì)迭代)
當(dāng)然后期也會(huì)提供更強(qiáng)大的圖層面板.
3.3 快捷鍵支持
為了方便用戶在畫布中高效的創(chuàng)作, 快捷鍵是必不可少的, 所以 ??Dooring?? 也提供了快捷鍵的能力:
我們可以通過快捷鍵, 快速的實(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í)反饋~
網(wǎng)頁(yè)題目：Dooring低代碼關(guān)于輔助設(shè)計(jì)的思考和實(shí)踐
路徑分享：http://www.5511xx.com/article/dpjsijg.html
