from/站酷/e签宝设计

image.png

什么是低代码？

低代码开发是一种可视化应用开发方法。通过低代码开发，不同经验水平的开发人员能够通过图形用户界面，使用拖放式组件和模型驱动逻辑来创建 Web 和移动应用。低代码开发平台减轻了非技术开发人员的压力，帮其免去了代码编写工作，同时也为专业开发人员提供了支持，帮助他们提取应用开发过程中的繁琐底层架构与基础设施任务。业务和 IT 部门的开发人员可以在平台中协同，创建、迭代和发布应用，而所需时间只是传统方法的一小部分
image.png

现状

低代码平台已经与已于2020.7上线，目前已服务于运营后台。平台基础能力已经具备，即将从满足简单需求开始向私有云侧发起支持，将会面对的更多的业务、场景，平台的搭建能力需要进行提升。产品需要从满足基本功能为主，转向更好的适配业务，给客户带来更好的用户体验。且平台不再是仅对个别内部使用员工，将会有更多的员工开始使用，所以平台的使用体验需要进行升级。

挑战与机遇

通过体验走查发现由于前期缺乏设计师接入，产品在可用性上确实存在很多问题，但是通过相关利益者访谈后目前最为重要的问题则是在展示侧。配置出的表单可读性较低，与设计师设计过的表单有较大的差距。以及随着业务发展开放对外后，特别是在面对私有云、政府等大量外部企业，表单的使用体验则是产品基础能力，于此同时还要求表单具备更强适配能力，从而满足企业的定制需求。（在满足客户提出的基本需求，我们的表单能做到和客户产品完全融合到一起，包装成为客户的产品，对市场销售起到一定的作用，成为产品的卖点之一）设计目标：提升表单体验和扩展性

拆解

表单的体验优化可分解为表单自身的样式问题和表单配置问题；表单扩展性可定义为表单自身的扩展，即问题拆解为产品的自身的配置能力和使用者配置的能力。
image.png

目标一：表单自身提升

表单自身的提升主要集中在框架层和表现层上的优化上，而表单是以一个个组件而构成，所以在表现层主要是以组件样式为主；在框架层主要以布局样式为主
image.png

表单布局

不同平台有这的布局方式，为满足平台的配置需求，获取公司内、业务方的页面，以及各个平台的对表单的设计规范，通过对这些表单整理，从而得出表单配置上需要获取的相应能力
image.png
通过内部各大平台的页面收集及行业内表单设计规范，对表单进行2个维度的归类，从布局的角度归为：静态布局、流式布局、响应式布局；从列数分为，多列和单列布局。

1.静态布局（Static Layout）

定义：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位
特点：所有元素的尺寸一律使用 px 为单位。静态布局是传统的网站布局方式，当屏幕缩小时，会出现横向和竖向的滚动条，隐藏溢出部分。
使用情况：静态布局为最普遍的布局，内部平台大部分采用的都是该布局方式
image.png

2.流式布局（Liquid Layout）

定义：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
使用情况：公司内使用该布局较少，多为外部企业使用。同类低代码平台搭建的页面多为该布局
image.png

3.响应式布局（Responsive Layout

定义：为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合
使用情况：由于设计及开发花费成本较高，使用该布局项目较少，多为对用户体验要求较高项目使用。各大设计平台的设计规范均均使用该模式，在多列时，面对不同分辨率的屏幕可以以最佳的布局展示。
image.png

总结

1.当前平台仅支持自适应式布局，缺乏静态布局，而静态布局在市场上占据比列非常高，所以需要及时补充和完善
2.从列数角度列看，多列布局和混合布局出现的频率非常高，当前平台并无多列布局配置，只能通过“布局组件”完成配置，从而无法满足在配置上的需求
**

组件样式

通过组件css样式，筛选出在展示上关键属性，进行统一归类和总结
image.png

元素样式

内容：（字号、颜色、大小）input text
辅助信息：（字号、颜色、大小）label、leading icon、trailing icon、validation message
边框：（颜色、边宽度、大小）border radius、border
间距：（大小）left padding

对比总结

为满足各种场景、平台的定制需求，这些属性需要展示出来，通过在直观的配置方式从而来满足业务需求
**

目标二：提升配置体验

通过增加大量的配置项从而满足业务需求，然而通过观察用户在实际工作流中，用户主要如何实现功能，很少关注表单的样式，在沟通中发现，对有些样式的配置项并不能很好的理解，且缺乏对样式的敏感度，所以在增加大量的样式的配置后，界面的样式依旧保持不变，甚至可能不如从前，由于界面展示了更多了元素，页面复杂度增加导致用户效率降低。面对这样的情况，需要从降低用户使用负担下手，帮助用户在不影响产品配置能力的前提下配置出合适的表单。

挑战

1.不同业务方、不同业务线样式不一致
2.同一业务下面对不同场景使用组件也需要做调整

常规思路

在当前的业务流程中增加一个环节设计师设计，使用该流程后增加整体时间以及人工成本，所以希望在此流程上进行改进和优化。
image.png
现实中设计师是如何进行多平台项目设计
image.png
通过对现实场景的借鉴，我们对当前的配置流程进行改造
image.png
image.png
**

第一步：低代码基础组件库-布局

静态布局：通过页面拆分：由组件大小+间距构成（组件尺寸、列之间距离、组件之间距离）
image.png
流式布局：在流式布局中，组件长度随页面大小改变而改变故不做限制，仅限制列间距和组件间距
image.png
自适应布局：是所有布局中配置最为复杂，需要引入栅格概念，在不同尺寸下，组件和间距需要占据不同的栅格数
image.png

平台基础组件库-组件

基础组件库需要的尽可能全的考虑各种场景出现的情况。以输入组件为例，我们总结出4大类型：布局方式、对齐方式、组件状态、附加内容。4大调整：颜色、字号、尺寸、圆角
image.png

第二步：选择开放给实施人员配置项

通过与实施人员反复沟通和探讨，以操作频率为关键因素，挑选出在搭建时页面时需要高频调整内容，提取出高频操作功能开放给实施人员。
image.png

第三步：提升配置体验

为平台转换合适语言

在实际业务中，“标签长度”会根据实际情况调整，而配置后台不能像sketch作图软件一样操作便利，且实施人员也也没有设计师所具备的设计感，所以想要调整出合适的尺寸，需要花费更多精力。针对这一样情况，我们需要从业务侧考虑调整更合适的配置方式。
在实际配置设计过程中设计师在设计标签长度时考虑的更多是要容纳下多少字数，通过容纳字的多少来制定标签长度，以及在实施人员配置时考虑的也是容纳字数来制定宽度。所以在配置时我们将像素单位改成字数单位。
image.png

更多优化点

image.png
以及为了提升产品使用效率在配置界面中也增加了更多细节优化：扩大40%选择中范围，使得组件更加容易点击；丰富平台样式，区分容器与容器…

总结

低代码平台逐步优化过程中与实施者有了更深入的接触，他们在配置过程中更加注重的是功能的实现，对最后产出的界面样式的关注度并不高。所以要不断提升智能输出的能力，降低用户使用负担。
用户在配置产品的过程其实也是设计的过程，可以通过现实中设计过程映射至产品配置过程，从而能对产品的体验有更大的提升