带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗,2022 年初的回顾与展望(7)https://developer.aliyun.com/article/1340417?groupCode=taobaotech
易用性建设
在介绍完技术架构上为产品可扩展性作出的种种努力后,本章将着重介绍弹窗搭建平台 xEditor 是如何在产品设计上为用户服务,大幅提升弹窗搭建效率。
在产品设计之初,我就受到各方伙伴的质询?这个产品是给谁用?这显然是个非常好的问题,想清楚为谁设计,永远是产品设计的第一步。对此,我的思考是,基于线上弹窗的复杂程度不一,弹窗的搭建工作也必然不可能完全由运营完成,因此,对于简单的弹窗应该提供足够符合直觉的交互界面,让无技术背景的用户可以轻松完成搭建,而对于交互复杂的弹窗,可以允许有一定技术背景的用户完成,但整个应用的交互复杂度要要尽量控制在非技术用户在经过文档培训后便能成功搭建。
鉴于产品的用户既可能是运营或产品,也可能是开发,因此在产品的界面设计上,就不能偏向任何一方,而是要选择一个尽量符合两方操作习惯和认知系统的设计。为此,我调研了集团与行业内各类搭建平台(iceluna,云凤蝶, xEditor 等)和设计工具(Axure,Sketch,Photoshop 等),最终决定在产品界面上参照 Axure 的界面设计, 使用拖拽 + 配置的核心交互形式。
之所以这样选择,主要因为以下三点:
- 拖拽 + 配置生成视觉要素是一种符合用户直觉的 UI 创建方式,很多年来 Axure,Sketch,Photoshop 等应用已帮助用户树立了心智模型;
- Axure 的界面设计十分经典,大多数用户对此十分熟悉;
- Axure 作为业界专业的原型设计工具,本身覆盖的功能就基本能满足弹窗搭建需要,因此 follow 其功能设计规范,是站在巨人的肩膀上,能最大限度避免未来踩坑;
下面是最终的产品界面展示:
xEditor 交互界面
交互设计优化
除了在界面上尽量遵循用户使用习惯,合理分区排布功能外,xEditor 另一个值得一提的交互设计优化便是能够根据弹窗模版类型的不同,为用户展示不同的交互界面,对于一个展示类型的弹窗(即弹窗本身不发送请求,仅展示内容,点击弹窗后跳转),用户看到的界面将是这样:
注意到了吗?相较于「完全体」的编辑器而言,展示类弹窗模版缺失了右上角的「数据中心」面板,并在左侧「组件库」中也仅展示了必要的三个组件。这一切都归功于 xEditor 插拔式模块的技术架构,通过这种方式,我们可以尽量降低用户的理解成本,让用户仅需关心自己需要关心的事情。通过将产品噪音降至最低,我们可以实现对于纯展示类弹窗,用户的搭建成本不超过 1 分钟。
相较于实际开发中项目启动,注册埋点,功能实现和测试的时间,xEditor 至少节省了 2 人日的弹窗开发工作量!
带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗,2022 年初的回顾与展望(9)https://developer.aliyun.com/article/1340415?groupCode=taobaotech