关于一个数据概览的复盘｜北京蓝蓝UI设计公司

2023-10-9 分享达人

前言在B端的业务之中，数据概览页面属于常见的页面，对主管有快速查看/查询/决策的左右，对于执行也能查询到KPI是否完成的，防止遗漏的作用。今天就结合业务之中的一个案例，跟大家做一个分享，有不同的意见可以留言或者是私聊沟通（谢谢大家）。业务需求我们团队主要做的OA类型的项目，主要是服务于公司内部的开发团队。随着业务的逐步拓展、用户的角色需求的多样化、角色数量的多样化、团队内部开发团队难度、设计师人手有限等矛盾不断递增，8个数据概览模块面临着体验复杂以及设计开发难度大的问题。涉及到的元素

业务：涉及8个应用，40个页面。
角色分解：QA,IPM,SPM，TMDE,TES，模块owner。
使用场景：管理者汇总团队信息、向上汇报以及分析数据。

现有问题体验不一致，提高管理成本：

架构组件以及样式不同的模块完全不相同，缺少规范性

开发低效，沟通成本高:

组件重复开发，开发成本高
设计师与开发沟通成本高

解决问题解决流程分为：找高频框架通过收集40个页面的布局，结合对执行者与决策者的角色行为进行分析，将所有的页面分为：

数据概览
数据分析
详情查看

重复组件将可视化按照空间分成；

底层：背景
内容层：页头+筛选+图表+表格
顶层：动作按钮

高频样式现有的样式杂乱无章，因此针对现有的样式进行收集和整理分类为布局，色板，字体，将所有的页面所有的元素进行拆解，统计高频样式。分成：

布局：按照业务流程顺序区分
高度：统计导航栏的高度重新计算高度
走向：统计现有浏览器导航高度重新定高度
字体：现有字体尤其是在数字的展现方式区分度不够

组架构组合3个场景并且对页面进行分类，提取其中高频的进行整理继续布局：

数据概览：图表+页头
数据分析：页头+筛选+指标+图表
详情查看：页头+筛选+图表+详细表格

组件组合模块根据业务进行“总-分”形式的：

功能模块
子模块
子功能

上面是针对于常规的功能模块，针对非常规的模块「例如：结果页面」进行更加细化的区分“图表”“表格”“筛选”，再度细分成为主体和变体进行区分。样式组合

布局：将7个常规的布局手链成为2个：“字-左上，图表右下”，“图表左右，注释右边”
高度：以win为例，导航栏分为3栏，再去保证页面的报告率格急性型分组：1920对应的是440，1600对应的是360px，1366对应的是280px
走向：根据统计的数据来，3个模块会出现超过20字的注释或者是标签名，因此延伸出2套解决方案：“自上而下”，和“自下而上”，经过验证邀请几个同学发现自上而下阅读成本低，理解成本更低
字体：现有字体中，常规的默认字体区区分度不高，所以引入了Din作为支持数字呈现的

作者：一只鸡腿啊啊啊
链接：https://www.zcool.com.cn/article/ZMTU4NDQyOA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司