绝密文档公开！首次揭秘数栈导航设计思路

一、写在前面

早在2017年，数栈当时没有这么多子模块，只有【离线开发+实时开发】2个部分，所以在导航设计上不存在问题，仅仅按照数据开发的通用设计逻辑即可。在2018年，增加了数据质量、数据API等几个模块，涵盖多个模块，整体的导航规划就变得很重要，搞得好的话，增加新的模块，可以继承现有的设计，搞不好，后续的改动就会比较大，甚至可能推翻重来，所以导航的重要性就在这里。

二、设计思考

既然包含了多个模块，有几个问题是需要重点考虑的：

1、向后兼容性问题，未来增加新的模块，对现有的导航方式必须改动很小，最好是不要改代码，而是改数据库或者配置的方式。

2、共性模块的抽取，每个模块大概有哪些功能，哪些模块是共性或十分类似的，应该抽取为统一的页面进行管理。

3、共性部分在聚合在一起的同时，也要有良好的产品体验，不能因为解耦造成体验很差。

4、结合商业模式也要考虑解耦性，未来产品的售卖模式是单独售卖，例如数据API可以不依赖其他模块单独输出。

三、问题解决思路

对于数栈产品经理来说，这是一个之前从来没遇到过的问题，那要怎么解决呢？这里提供一种思路：

自己没遇到过的问题，考虑一下别人有没有遇到过，如果有的话，那就去学习，如果没有，说明这个问题本身可能有问题
——简单地说，就是“借鉴”

整理了上述问题之后，首先不是思考如何画原型，而是去找哪里借鉴这个设计。

如何去找借鉴的地方呢？当时主要考虑了以下3个因素：

1、友商的产品要比我们多，最好能多很多，而且必须集成在1个导航体系内。

2、友商不能只有SaaS服务，因为SaaS服务可以做很高程度的耦合，但我们还要考虑各种产品独立部署的场景，要可拆分、可解耦。

3、最好是2B类产品，2C类产品这种场景的好像也不太多。

按上面的思路，能确定几类友商范围：

1、公有云：公有云一般有上百个产品，遇到的问题比我们更是复杂，既然参考了更复杂的案例，产品数量少就是小case，例如阿*云、亚*逊a*s、微*az*re及G**gle。

2、国内的企业服务厂商，华*、亚*，遇到的问题与我们是类似的，一般是输出有限的几个模块，面向专门的一家客户服务，也可以参考，例如：华*，国外的这方面友商不太了解。

四、参考产品的设计特点

1、友商一

登录后直接进入门户，平铺各种产品的入口链接，便于直接分流，分流可以说是此页面的唯一目的

顶部导航可根据需求定制，将常用产品「挂」上去

进入某个产品后，通过面包屑的形式提供多层导航

设计的优缺点

优点

产品线特别多，所以容纳性很强
导航清晰、简单、对公有云来说，在没有订购任何产品的情况下，会进入产品介绍页面，体验比较好

缺点：

顶部菜单没有充分利用，但对于深度用户可以自定义顶部导航，弥补了这个缺点

2、友商二

首页以dashboard的形式铺开，便于用户观察核心指标，但只能依靠左侧的导航来寻找产品。

设计优缺点

优点

左侧导航虽然是2级，但是融合性很好
首页进入后有核心报表，虽然也是分流，但体验较好，将核心监控指标直接露出

缺点

感觉顶部菜单没有充分利用，左侧菜单收缩的位置太靠下了，一大片空白下面可能还有个按钮

3、友商三

友商某产品截图，利用顶部导航拆分各个模块，同时借鉴了G**gle Dashboard的形式，将关键指标体现在首页。

设计优缺点

优点

首页进入后有核心报表，虽然也是分流，但体验较好，将核心监控指标直接露出

缺点：

UI不太美观
报表固定，当增加、减少时，报表部分要重新处理布局、重新开发

五、数栈的导航设计

参考了以上几个产品之后，数栈在设计上要注意以下几个问题：

1、可能最多有7—8个产品，但不会有公有云那么多。

2、数据质量、数据API、智能标签、数据地图等模块，会逐步演变的比较复杂，应充分利用顶部菜单，如果后续需要扩展功能，可以设计左侧菜单，便于扩展。

3、首页无需强分流，数栈几个产品的相关度很高，首页可以借鉴Google的dashboard模式。

4、导航上，充分利用顶部导航，为页面下面留出空间。

5、公有云大部分产品不使用顶部导航，猜测可能是因为二级菜单过多，无法统一（阿里云的dataworks使用顶部导航，也是由于其功能可以划分，且只用左侧导航会出现导航过多、无法与数据开发集成等问题；AWS的Cloud9也是使用了顶部导航）。

6、用户独立部署一个产品或多个产品时，导航的体验一致（包括从一个产品升级为多个产品）。

7、部署单一组件和多组件的区别就在于顶部上多了一个“xx产品”的icon，其他导航菜单不动，这样比较简洁，且体验一致。

六、数栈的设计方案

设计方案1

如果只部署一个产品，则左上角的产品矩阵icon不应该再显示了，子产品icon需要向左移动
如果由一个产品升级为多个产品，则左上角的产品矩阵icon需要显示出来，且子产品icon向右移动

设计方案2

一方面解决了单个部署和多个部署的体验一致的问题，部署多个产品和单个产品的区别在于顶部多了一个icon，且给人整体体验一致的感觉
另一个好处是，核心导航比较清晰，低频使用的功能放在不重要的位置

七、总结分析

以上内容就是数栈导航的一些设计过程和思路，最终选择了第二种设计方案。当然，这种方案也有一些问题，例如首页没有体现Dashboard等，有些问题已经有了解决思路，会在未来版本中逐步迭代优化掉。

本文首发于：数栈研习社

数栈是云原生—站式数据中台PaaS，我们在github上有一个有趣的开源项目：FlinkX DTStack/flinkxgithub.com

FlinkX是一个基于Flink的批流统一的数据同步工具，既可以采集静态的数据，比如MySQL，HDFS等，也可以采集实时变化的数据，比如MySQL binlog，Kafka等，是全域、异构、批流一体的数据同步引擎，大家如果有兴趣，欢迎来github社区找我们玩~

绝密文档公开！首次揭秘数栈导航设计思路相关推荐

InDesign 教程如何控制文档中的页数？
欢迎观看indesign教程,小编带大家学习 InDesign 的基本工具和使用技巧,了解如何在创建新文件时指定页数,以及如何在现有项目中添加和移除页面. 安装:Indesign 2021 for m ...
word指定文档每页行数
1.[布局],[页面设置]右下角剪头,出现页面设置对话框,选择[文档格式],找到[行数],输入36即可
1-50可复制到word文档外带圈的数生成方法
这 50 个带圈的数是可以复制到 word 文档外的. ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ ㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿其中前 20 个可以直接通过输入法的符号 ...
PHP能获取word页数吗,php - 如何在Linux上获取Word文档中的页数？
我看到这个问题.我还需要确定给定word文件(doc/docx)的页数.我试图调查phplivedocx/zf(@hobodave链接到最初的post答案中),但我在那里失去了手脚.我也不能使用任何外 ...
Java获取文档页数_获取PDF文档中的页数
一个简单的命令行可执行文件,名为:pdfinfo . 这是downloadable for Linux and Windows . 您下载包含几个与PDF相关的小程序的压缩文件 . 在某处提取它 . ...
一般性网络错误请检查网络文档_如何编写好的软件设计文档
原文链接作为一名软件工程师,我花了很多时间阅读和编写设计文档.在研究了数百篇这样的文档之后,我发现好的文档与项目成功之间有很强的关联性. 在本文中,我尝试去说明如何才能编写好的设计文档. 本文分为4 ...
微信小程序接口文档PHP,微信小程序API 导航
微信小程序API 导航一.wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. OBJECT 参数说明: 示例代码: ...
软件设计文档示例模板，万能的软件设计文档模板
文章目录 1 设计概述 1.1 功能概述 1.2 非功能约束 2 系统部署图与整体设计 2.1 系统部署图 2.2 下单场景子系统序列图 2.3 退款场景子系统序列图 2.4 退款场景子系统活动图 3 ...
软件测试文档结课论文,软件测试课程论文设计报告.docx
软件测试课程设计上海电机学院课程设计报告课程名称: 软件测试方法和技术课题名称: 软件测试方法和技术姓名: 班级: 带教老师: 报告日期: 电子信息学院目录 TOC \o ...

绝密文档公开！首次揭秘数栈导航设计思路

绝密文档公开！首次揭秘数栈导航设计思路相关推荐

最新文章

热门文章