背景

因业务需要PRD部门决定统一产品线设计语言。由于产品线系统数量庞大、业务种类丰富,AI Design设计系统在接入这些系统时出现了组件、设计模板、设计规范无法满足某些一线业务的问题。为了解决这些问题,帮助AI Design在未来的产品线应用中更加的顺利进行,我们(UIUX设计中心)决定对所能收集到12个PRD产品线系统进行设计调研。

目标

通过对现有产品的调研,了解一线产品业务。对业务场景进行归纳,探索可复用模板的业务模式;对AI Design设计语言在产品线实施过程中遇到的问题进行记录,为AI Design设计语言进化提供素材和方向。

过程

本次调研共涉及PRD产品线12个系统,访问地址如下。
PRD产品线系统收集

  • 集群洞察产品(CI)
  • DATA DISCOVERY (张晨)
  • AntDB (姜明俊)
  • AIDO:(何曲)
  • FOOT:(何曲)
  • 业务中台产品(舒素芬)
  • 应用门户
  • Data OS (苏欣)
  • AIMAP GIS(潘倩兰)
  • AI人工智能(黎琦璇)
  • 知识图谱

调研步骤

  1. 沉浸:对12个系统进行沉浸式体验,并记录体验中遇到的可能有价值的业务场景、组件和布局等发现。
  2. 尝试:尝试对所有系统的业务场景进行了梳理,输出一套目录。
  3. 迭代:选取5个典型系统,基于第一套目录,采用新的方式对业务进行梳理,输出了第二套目录。迭代过程中的5个典型系统共有93个最低层级目录,可复用目录为42个。业务场景可复用率达到45.16%。
  4. 测试:接入1个系统(AntDB)的业务场景来对第二套业务场景目录进行测试,业务场景重合率为46.15%。表明第二套业务场景目录较为有效。
  5. 完善:对文档进行小幅度微调。
  6. 总结:最终调研文档。

成果

a.业务场景梳理

通过对12个系统的沉浸调研梳理出比较有价值的业务场景,并分为高复现率业务场景、代表性业务场景、特色业务场景3类。具体的调研过程可查看调研记录。
调研记录

高复现率场景
在5个典型系统中重复出现过的业务场景。(5个典型系统共有93个最低层级目录,可复用目录为42个。业务场景可复用率达到45.16%。) 中后台系统设计调研报告 - 图1

代表性业务场景
在5个典型系统中未重复出现,但是可能具有一定代表性的业务场景。 中后台系统设计调研报告 - 图2
特色业务场景**
比如地图、图谱等有较强业务个性的系统,会具有一些特色业务场景。

中后台系统设计调研报告 - 图3

b.组件的变形


表格
可以上下移动条目的表格
image.png

标签页
1.带数据预览的Tab
image.png
2.右侧带搜索功能。
image.png

抽屉
用来填写表单的抽屉。
image.png

卡片
1.占据一整行的横向的卡片。
image.png
image.png

2.卡片的信息区域能够上下滑动。
image.png

c.布局形式补充**

导航
层级过多时,有需要双导航的情况。比如DataOS系统,更适合顶部为主导航的布局。导航的「设计模式」已开始在语雀文档中进行编写。
image.png

三个层级以上的面板
需求是否合理?
如果需求合理,当有三个层级以上的面板时,色板的颜色如何设定。
image.png

“图”查看器和编辑器**
地图的查看器、图谱编辑器、节点编辑器等页面。可以在设计语言文档的「设计模式」中进行规范补充。

(应用门户)
image.png
image.png
image.png
(AI MAP)
image.png
(AI人工智能)
image.png
image.png

(知识图谱)
image.png
image.png

可变宽度的面板
可调节宽度的面板在多个系统中都有出现。在信息量变化较大时,用来调节分配各个内容区域的占比。可以考虑设计统一样式。
image.png
image.png

具有Tab 功能的卡片
点击卡片来显示对应卡片的详细内容。这种布局在多种系统中出现,因而可以考虑设计统一样式。
image.png
image.png

过滤
平铺形式的过滤条件。
image.png
image.png

d.常见问题

主内容区域信息的下钻和返回方式
目前各个系统中主内容区域的页面跳转方式,有当前页面打开和打开新标签页。这两种跳转方式返回上一层级的交互,需要通过规范来约束。
image.png
image.png
DataOS系统中为主内容区域添加的面板切换动效可能是一种合适的解决方案,如下图。
未命名.gif

加载
加载和空数据混用的情况严重,易造成用户对当前区域或页面信息状态的困惑。
image.png

建议和下一步行动

1.分析梳理出来的「业务场景」,探索相关业务模版的可能性。
2.分析「变形组件」,对组件交互文档进行补充,必要时协作进行视觉规范补充。
3.将「布局形式补充」转化为设计模式文档和视觉规范的需求,进行设计模式的制定并协助视觉规范的设计。
4.对所发现的两个「常见问题」提出可行的解决方案。
4.每当有新的系统样本时,可以按照「业务场景」、「组件变形」、「布局形式补充」、「常见问题」来对系统样本进行分析并提炼有价值的内容来反馈到AI Design设计体系中。

总结

通过本次调研,对一种设计调研方法进行了实践,并得到了一些有价值的调研结果。本次调研结果为AI Design设计语言迭代的内容补充和结构升级提出了一些方向,将使AI Design设计语言拥有更强的适应性。