带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗,2022 年初的回顾与展望(8)

简介: 带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗,2022 年初的回顾与展望(8)

带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗,2022 年初的回顾与展望(7)https://developer.aliyun.com/article/1340417?groupCode=taobaotech


易用性建设

 

在介绍完技术架构上为产品可扩展性作出的种种努力后,本章将着重介绍弹窗搭建平台 xEditor 是如何在产品设计上为用户服务,大幅提升弹窗搭建效率。

 

在产品设计之初,我就受到各方伙伴的质询?这个产品是给谁用?这显然是个非常好的问题,想清楚为谁设计,永远是产品设计的第一步。对此,我的思考是,基于线上弹窗的复杂程度不一,弹窗的搭建工作也必然不可能完全由运营完成,因此,对于简单的弹窗应该提供足够符合直觉的交互界面,让无技术背景的用户可以轻松完成搭建,而对于交互复杂的弹窗,可以允许有一定技术背景的用户完成,但整个应用的交互复杂度要要尽量控制在非技术用户在经过文档培训后便能成功搭建。

 

鉴于产品的用户既可能是运营或产品,也可能是开发,因此在产品的界面设计上,就不能偏向任何一方,而是要选择一个尽量符合两方操作习惯和认知系统的设计。为此,我调研了集团与行业内各类搭建平台(iceluna,云凤蝶, xEditor 等)和设计工具(Axure,Sketch,Photoshop 等),最终决定在产品界面上参照 Axure 的界面设计, 使用拖拽 + 配置的核心交互形式。

 

之所以这样选择,主要因为以下三点:

 

 

  1. 拖拽 + 配置生成视觉要素是一种符合用户直觉的 UI 创建方式,很多年来 Axure,Sketch,Photoshop 等应用已帮助用户树立了心智模型;
  2. Axure 的界面设计十分经典,大多数用户对此十分熟悉;
  3. Axure 作为业界专业的原型设计工具,本身覆盖的功能就基本能满足弹窗搭建需要,因此 follow 其功能设计规范,是站在巨人的肩膀上,能最大限度避免未来踩坑;

 

下面是最终的产品界面展示:

 

 

 

image.png

 

xEditor 交互界面

 

image.png交互设计优化

除了在界面上尽量遵循用户使用习惯,合理分区排布功能外,xEditor 另一个值得一提的交互设计优化便是能够根据弹窗模版类型的不同,为用户展示不同的交互界面,对于一个展示类型的弹窗(即弹窗本身不发送请求,仅展示内容,点击弹窗后跳转),用户看到的界面将是这样:

 

image.png

 

 

 

注意到了吗?相较于「完全体」的编辑器而言,展示类弹窗模版缺失了右上角的「数据中心」面板,并在左侧「组件库」中也仅展示了必要的三个组件。这一切都归功于 xEditor 插拔式模块的技术架构,通过这种方式,我们可以尽量降低用户的理解成本,让用户仅需关心自己需要关心的事情。通过将产品噪音降至最低,我们可以实现对于纯展示类弹窗,用户的搭建成本不超过 1 分钟。

 

相较于实际开发中项目启动,注册埋点,功能实现和测试的时间,xEditor 至少节省了 2 人日的弹窗开发工作量!

 

带你读《2022技术人的百宝黑皮书》——我在淘宝做弹窗,2022 年初的回顾与展望(9)https://developer.aliyun.com/article/1340415?groupCode=taobaotech

相关文章
|
人工智能 算法 搜索推荐
题库管理|考试管理|基于Web的大学生题库管理系统的设计与实现
题库管理|考试管理|基于Web的大学生题库管理系统的设计与实现
1164 0
|
7月前
|
人工智能 Linux API
【OpenClaw保姆级图文教程】阿里云/本地部署、免费大模型配置、Skills接入与常见问题解答
2026年初,开源AI智能体框架OpenClaw(昵称“小龙虾”)在GitHub平台实现指数级增长,短短数周斩获15万+星标,成为全球增速最快的AI开源项目之一。这款工具打破了传统AI的被动交互壁垒,实现7×24小时无间断自主运行,能自主操控浏览器、编写调试代码、解析各类文件、执行系统命令,即使用户休息,也能按预设目标完成全流程任务。开发者EthanMoore更是凭借OpenClaw在30天内实现月均被动收入突破1.2万美元,印证了这款工具的自动化生产力价值。
1891 4
|
11月前
|
Kubernetes Cloud Native Nacos
nacos3.0
Nacos 3.0实现从配置中心到云原生控制面的跃迁,通过引入JRaft提升集群性能与稳定性,支持gRPC和xDS协议,打通服务网格生态,构建统一、可扩展的多集群服务治理平台,成为云原生基础设施的核心控制中枢。
|
10月前
|
负载均衡 Java 应用服务中间件
微服务服务注册与发现
项目采用微服务架构,便于扩展与团队协作,基于Spring Cloud Alibaba构建,使用Nacos、OpenFeign、Sentinel等组件,实现服务注册发现与远程调用,提升系统稳定性与可维护性。
|
存储 C语言
简述C语言文件操作
简述C语言文件操作
239 0
|
1天前
|
云安全 安全 网络安全
|
1天前
|
JavaScript 安全 前端开发
Nodejs Brotli decoder 代码执行漏洞 (CVE-2026-111497)10629
Node.js发布安全更新修复Brotli解码器高危RCE漏洞(CVE-2026-111497),建议受影响版本用户立即升级。
1590 0
|
7天前
|
人工智能 API 开发工具
DeepSeek Harness 神插件:白嫖 13 家大厂模型
`dsh-our-free-model` 是 DeepSeek Harness 神级插件:零配置、零API Key、零账号,聚合13家大厂免费模型(含DeepSeek V4.1 Flash、Kimi K3等),支持本地网关、用量看板与自动降级,真正实现“白嫖即用”。
1288 27
|
3天前
|
存储 人工智能 自然语言处理
阿里云千问办公官网登录入口:qwenwork.cn网页版免下载,注册送2000积分、登录每日再送100积分
千问办公(QwenWork)是阿里巴巴推出的一站式AI办公平台,定位"不止于对话,更注重交付"。它基于千问大模型,具备任务拆解与多步骤自动执行能力,用户一句话即可完成PPT生成、数据分析、网页搭建、视频剪辑、信息调研等复杂任务,覆盖网页端、桌面端及钉钉生态。网页版免下载,访问qwenwork.cn注册即得2000积分,每日登录再送100积分。个人版免费起用,另有付费版与企业版可选。
|
12天前
|
存储 人工智能 安全
千问办公官网入口网页版登录:qwenwork.cn 注册送2000积分、登录送100积分
阿里云千问办公(QwenWork)是AI智能工作平台,支持一句话生成PPT、表格、网页、视频及数据分析。个人免费版送2000积分+每日登录赠100分,含1GB存储、5个发布页;企业版198元/席/月起。阿里千问办公QwenWork官网:https://t.aliyun.com/U/0VCTGt 阿里AI工作平台,一句话完成数据分析、PPT 生成、视频剪辑、网页搭建等复杂任务