Dooring低代码关于辅助设计的思考和实践

简介: Dooring低代码关于辅助设计的思考和实践

image.png

hello, 大家好, 我是徐小夕, 今天继续和大家分享有关 Dooring低代码 的技术实践, 我会从辅助设计的维度来和大家分享一下 Dooring 在这方面做的一些技术实践和展望.

H5-Dooring 断断续续已经迭代了3个年头, 从UI设计,到组件物料, 再到搭建能力, 一直在不断更新,往更优的方案迈进, 致力于打造极致的用户体验. 接下来我分享的内容主要由以下几个方面组成:

image.png

1. 组件面板可定制

传统的搭建系统组件面板基本是固定的, 如果后期组件逐渐增多, 对用户侧会造成一定的使用负担. 由于用户常用的组件数是有限的, 所以为了提高用户发现目标组件的效率, H5-Dooring 提供了组件定制面板, 用户可以自己定制常用的组件显示, 并支持组件搜索:

image.png

同时编辑器支持组件搜索能力:

image.png

通过这种方式, 我们可以把组件物料的选择权交给用户, 让用户有更多的自定义能力, 从而提高搭建幸福感.

2. 画布辅助设计

画布辅助设计主要是为了帮助用户更精准的进行页面搭建, 使得非技术人员也能做出专业的页面设计. 接下来分享一下 Dooring 在画布辅助上做的改进.

2.1 参考线设计

image.png

这块主要借鉴了老牌设计软件 PhotoShop, 我们可以便捷的在 Dooring 的标尺双击来生成参考线(包括x轴, y轴), 我们可以把参考线拖拽到画布任意位置, 来实现对元素定位的参考.

2.2 标尺设计

image.png

标尺设计主要是为辅助参考线, 进行更精准的参考线位置和布局的规划, 随着画布的缩放, 参考线也会等比例缩放, 保证和画布一致.

2.3 网格线设计

image.png

网格线的价值在于用户可以在非设计稿的情况下, 精准控制元素的位置, 比如对齐, 排列等, 我们可以通过网格布局(Dooring的设计哲学之一) 的搭建模式下更快速的布局和排版页面.

2.4 配色面板

在传统搭建平台里, 如果没有丰富的模版支持撑, 小白用户很难做出精致的页面, 包括设计元素, 包括色彩搭配等, 所以基于这样的背景, Dooring 引入了免费素材库和色彩搭配面板, 方便用户做页面设计参考:

image.png

素材库里列出了我们调研之后得出的的几个常用分类:

  • 商业素材
  • 生活类素材
  • 自然类素材
  • 插画类素材

配色方案目前提供了:

  • 传统色
  • 低调色
  • 渐变色
  • 色彩通用搭配方案
  • 卡其色

用户可以参考配色方案搭建不同色彩风格的页面.

3. 视图控件

视图控件主要是方便用户可以更快捷的调整画布和控制画布中的元素. 我们都知道一旦页面中的元素变多之后, 我们在查找组件或者调整页面结构的时候就会变得非常麻烦, 比如页面过长, 我们需要上滑动才能定位到指定位置, 再比如页面元素过多, 我们想快速找到某一个元素并调整, 这样变得非常困难, 所以 Dooring 基于这些痛点做了一些改进和优化.

3.1 尺寸控制

image.png

通过 Dooring 提供的画布控制面板, 我们可以快捷的切换画布大小, 或者通过手动输入自定义尺寸的方式来改变画布大小.

3.2 图层管理

为了解决上述分析的第二个问题, Dooring 设计了图层管理面板.

image.png

我们可以通过图层管理面板轻松的管理画布中的组件, 比如:

  • 显示/ 隐藏 组件
  • 删除组件
  • 调整组件排序(后期会迭代)

当然后期也会提供更强大的图层面板.

3.3 快捷键支持

为了方便用户在画布中高效的创作, 快捷键是必不可少的, 所以 Dooring 也提供了快捷键的能力:

image.png

我们可以通过快捷键, 快速的实现复制, 删除, 粘贴图片等功能.

4. 搭建模式的创新

传统搭建平台一般都是自由布局或者自然流布局, 搭建模式比较单一, 很难满足用户不同业务场景的搭建需求, 所以Dooring 在这方面做了一定的创新, 同时支持两种模式的搭建:

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

用户可以更新不同场景随意切换.

image.png

5. 有关智能设计的展望

后期 Dooring 也会在智能化方向做一些努力, 比如无痕生成页面, 智能参数化生成模版等, 在搭建体验和搭建生态上也会持续完善, 如果你有更好的建议, 欢迎随时反馈~

目录
相关文章
|
3月前
|
机器学习/深度学习 人工智能 搜索推荐
Codewave学习体验分享:低代码开发世界的黑马
Codewave学习体验分享:低代码开发世界的黑马
|
3天前
|
机器学习/深度学习 人工智能 架构师
未来编程趋势:低代码和无代码开发平台
【8月更文挑战第16天】随着企业数字化转型的加速,传统的软件开发模式已无法满足日益增长的业务需求。低代码和无代码开发平台的兴起,为非技术背景人员打开了一扇快速实现应用创新的大门。本文将探讨这一趋势如何重塑软件开发领域,以及它对IT专业人员的意义。
|
12天前
|
人工智能 安全 物联网
低代码开发10平台,总有一款适合你
本文介绍的十款低代码开发平台,如Zoho Creator、OutSystems等,各具特色,满足不同业务需求。Zoho Creator提供强大灵活的应用构建能力,支持自动化工作流及跨平台应用;OutSystems强调高效开发与企业级安全性;Mendix擅长快速构建企业级应用,特别是在物联网项目中表现突出;Appian专注业务流程管理,提升工作效率;PowerApps则深度集成微软生态系统,便于构建定制化业务应用;Quick Base适合中小企业快速开发定制应用;
31 3
|
3月前
|
前端开发 数据可视化 JavaScript
探索前端可视化开发:低代码平台原理与实践
【4月更文挑战第7天】本文探讨了低代码平台在前端开发中的应用,介绍了其模型驱动、组件化和自动化部署的原理,强调了提升效率、降低技术门槛、灵活适应变更和保证一致性等优势。建议开发者明确适用场景,选择合适平台,并培养团队低代码技能,同时规划与现有技术栈的融合,实施持续优化治理。低代码平台正改变开发格局,为业务创新和数字化转型提供新途径。
138 0
|
9月前
|
SQL 缓存 数据可视化
如何设计一个低代码平台?
如何设计一个低代码平台?
522 0
|
3月前
|
数据可视化 搜索推荐 前端开发
编码如画,以梦驭马——CodeWave低代码平台全侧写
编码如画,以梦驭马——CodeWave低代码平台全侧写
113 0
|
3月前
|
数据采集 人工智能 前端开发
Dooring-Saas低代码技术详解(干货分享)
Dooring-Saas低代码技术详解(干货分享)
122 1
|
3月前
|
前端开发 IDE JavaScript
【inBuilder 低代码开发实验室】使用inbuilder完成UBML低代码设计开发
【inBuilder 低代码开发实验室】使用inbuilder完成UBML低代码设计开发
64 0
|
3月前
|
搜索推荐 数据管理 数据安全/隐私保护
代码、低代码、无代码开发触手可及的低代码平台源码
代码、低代码、无代码开发触手可及的低代码平台源码
101 0
|
10月前
|
搜索推荐 数据可视化 关系型数据库
OneCode 低代码平台 AIGC快速构建无代码应用
OneCode是一款基于DDD模型驱动设计的低代码引擎。从2022年底推出以来,现在的最新版本是1.1.0。本文重点是采用OneCode提供的工具来实际搭建一个简单的(员工请销假)业务应用。在搭建过程中穿插讲解一些功能设计思想以及使用方法。