如何设计一个低代码设计器？（如何设计一个低代码设计器程序）

前言

低代码设计器，旨在让用户舒心。其优质体验源于两大要点：操作简易，响应迅速。

低代码设计器常用的模块

物料区

物料区不宜过窄，也不能太宽，不能超过屏幕的三分之一。建议放屏幕左边，从左往右拖拉是大部分用户的使用习惯。次选放上边，和下边都可，不分伯仲。

设计区

设计区可以放中间居中，建议面积二分之一或以上。也可以放右边整个沾满。

组件属性设置区

若设计区居中则可以使属性设置区放最后边，若设计器占满右边，则属性设区也可以放左边。但要注意与物料区之间的重叠，可采用选项卡的形式。

常用的设计器例子

如图1所示，第一种设计，简洁。

优点：

l 简洁

缺点：

l 不好扩展

图1

如图2所示，若有多个设计区，上下均分。

优点：

l 简洁

l 可以同时进行设计

缺点：

l 设计区狭小

l 扩展上限有限

图2

如图3所示，若有多个设计区，左右均分。

优点：

l 简洁

l 可以同时进行设计

缺点：

l 设计区狭小

l 扩展上限有限

图3

如图4所示，若有多个设计区，还可以通过顶部tab选项进行切换设计。

优点：

l 顶部切换能全面切换设计器，可以是两种不同的设计页面，比如流程设计器，模型设计器等，可以独立的有自己的物料区和属性设置区。

l 扩展性强

缺点：

l 对相同物料的设计器不好处理

图4

如图5所示，若有多个设计区，把属性栏也放到左边进行tab切换。

优点：

l 可以使是设计区更大。

l 可以使物料区更大。

l 极大的扩展性。

缺点：

l 属性设置和物料拖拽不能同时进行

l 设计区内容无法同时设计

图5

总结

在进行设计时，请结合业务复杂度的实际情况进行规划，避免盲目追求过度的扩展性。对于业务模块，建议进行细致拆分，以便在特定阶段能够迅速调整布局，提升响应速度和灵活性。同时，确保设计区和扩展代码区的空间充足，以便更好地满足开发需求。

在界面设计上，要尽量减少操作的距离，提高用户的使用效率和舒适度。开发者在面临性能与功能之间的权衡时，需做出明智的取舍；而产品设计师在追求个性与创新时，也需考虑用户体验和实际需求。