前言

低代码设计器的宗旨就一个，就是让用户舒心。用户体验好无非就两点：操作简单，速度快。

低代码设计器常用的模块

物料区

物料区不宜过窄，也不能太宽，不能超过屏幕的三分之一。

建议放屏幕左边，从左往右拖拉是大部分用户的使用习惯。次选放上边，和下边都可，不分伯仲。

设计区

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

组件属性设置区

若设计区居中则可以使属性设置区放最后边，若设计器占满右边，则属性设区也可以放左边。

但要注意与物料区之间的重叠，可采用选项卡的形式。

常用的设计器例子

图1

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

优点：

简洁

缺点：

不好扩展

图2

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

优点：

简洁

可以同时进行设计

缺点：

设计区狭小

扩展上限有限

图3

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

优点：

简洁

可以同时进行设计

缺点：

设计区狭小

扩展上限有限

图4

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

优点：

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

扩展性强

缺点：

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

图5

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

优点：

可以使是设计区更大。

可以使物料区更大。

极大的扩展性。

缺点：

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

设计区内容无法同时设计

总结

根据自己的业务复杂度进行设计不要盲目追求扩展性。

业务模块尽量拆分细化，具体到某个阶段可以快递调整布局。

设计区和扩展代码区尽量的大。

减少操作的距离。

开发者要做性能取舍，产品设计师要做个性取舍。