前言
在前面的文章中,我们已经提到,华为云有一个上云利器:应用编排设计器。作为华为云应用编排服务与用户沟通的桥梁,设计器坚持用户体验至上的理念,以图形化方式,在鼠标点击之间,助力企业快速上云。优质的交互体验,单手即可操作,让您边喝咖啡边上云。那么设计器的快,到底体现在哪些方面?下面我们就来聊一聊,设计器如何把快做到极致。
快速响应
俗话说,外在决定了是否要了解内在,用户对产品的印象,很大程度上取决于用户看到的第一眼界面。因此,一个能够快速呈现,干净简洁的界面是我们首先要考虑的。设计器充分考虑到浏览器渲染页面的机制,依照“做的越少,响应越快”的原则,在技术层面上做了如下优化:
a) 代码优化,按照CSS在前,JS在后的顺序加载页面,保证页面的快速呈现,防止JS加载时阻塞页面。
b) 代码充分的合并和压缩,尽可能的减少数据传输量
c) 减少HTTP请求数量,首页仅需加载静态文件。
d) 90%的用户操作均在前端进行,不会涉及后台交互
e) 启用缓存
快速引导
对于新用户来说,能够快速上手很重要。只有真正的使用了产品,才能对产品有更好的了解,才能获取更优质的体验。依照“所见即所得”的原则,我们要保证用户能够快速的获取需要的信息,并引导用户的操作。为此,设计器在交互上做了如下优化:
a) 首次加载,弹出引导页面,引导用户快速了解设计器各个功能组件
b) 资源列表归类分组展示,常用资源优先展示,帮助用户快速找到需要的资源
c) 拖拽智能辅助,可以包含的资源高亮显示
d) 连线智能辅助,可以建立关系的资源高亮显示
快速布局
设计器作为一个图形化的编辑器,为用户打造一个可视化的应用模型,是我们的一大亮点。用户通过鼠标的点击和拖拽,即可完成对应用模型的搭建。当然设计器做的不止这些,我们要做的是,帮助用户快速的搭建自己的应用。为此,设计器在图形化操作上做了一系列的优化:
a) 边框自动伸缩:智能判断布局空间,自动伸缩边框大小,省去用户反复调整边框的操作
b) 资源复制:快速克隆一组资源,效率成倍提升
c) 一键美颜:布局太乱,不美观怎么办?试下一键美颜功能,一键式布局。
d) 撤销/重做:操作错了怎么办?撤销/重做功能帮你快速恢复,解决后顾之忧。
快速编辑
作为应用编排服务的设计器,对模板的编辑能力必不可少。传统的手写模板,不仅耗时耗力,而且对编写者的门槛要求比较高。编写者要充分了解各种资源的属性信息和关联关系,还要具备一定的YAML和JSON的语法能力。这很大程度上加大了产品的使用难度,使得大部分用户只能望而却步。设计器抓住这一痛点,为模板的编辑功能添加了很多使用技巧和优化:
a) 属性智能提示:对于选中的资源,属性栏中实时显示该资源包含的属性信息,包括取值说明,使用建议等等。
b) 必选属性自动添加:对于资源的必选属性,设计器会尽可能的附带默认值,减轻用户编写负担
c) 可选属性一键添加:对于资源的可选属性,可根据需要一键添加
d) 关联关系自动补全:资源之间的关联关系跟随应用模型设计自动联动
e) 函数智能辅助:常用函数进行提示,并支持一键添加
f) 一键生成/更新inputs:模板输入参数,一键式生成
g) 实时代码提示:作为一个优质的编辑器,代码提示功能必不可少
h) 语法实时校验和提示:实时校验,语法有问题实时提示,专治语法不熟悉,手误等疑难杂症。
结束语
在应用编排设计器中,还有很多优化的细节,这里就不一一细说了。设计器致力于不断提升用户体验,持续的进行细节优化,努力为客户打造上云利器,帮助更多企业快速上云。