上篇：BI移动端产品设计总结
在这个项目里，我不仅担任了PM，还有机会做了 UI 设计师，学习了 Sketch移动设计软件和 Flinto交互设计工具。这一部分，我从框架层和表现层的角度上做项目总结。
1、产品框架设计（框架层）
首先，面对 N 多角色，报表要做到个性化定制，角色之间关注的某一类型的数据中有重复的指标也有不通的，为了避免代码的重复，最好是对数据的分析进行单独管理，直接调用指定的指标组合成报表。
其次，为了更高效，在界面设计上，报表能够灵活组合、快速调整。我对比了业内几个比较先进的移动 BI APP
通过对比不难发现，Power BI 卡片式的设计最符合需求。利用这种设计，一方面，可以通过接口控制增减卡片、调整顺序，而不需要通过更新版本来实现；另一方面，可以通过将卡片类型抽象化、数据格式抽象化，缩短客户端开发时间，如果报表增加，卡片增加，几乎不会占用客户端的开发资源。反观其他界面，例如千牛和 Google Analytics等，分析报表的内容相对固定，如果需要调整，则需要更新版本来实现，每一个报表都需要大量的开发资源。当然，优点就是相比卡片设计，单屏承载的信息量更多，这里就需要根据情况做相应的取舍。
根据结构层功能的需求设计 APP 的框架，上一篇提到了关于报表分类的问题，在最早的 Demo 设计时考虑到某个经理可能会有多个角色（即使部门经理，又是品牌负责人，查看的报表就不一样），而事实上，很少有多重角色存在，在做产品设计时，就要充分考虑这个需求的必要性，不然会影响整个产品体验，实际Demo 1 设计结果，发现品牌切换设计不友好，于是做了重新设计。
所以在设计过程中，要充分考虑用户的交互习惯，要跳出自己思维，去审视设计。做出交互原型的时候，多体验，邀请团队的成员包括技术、测试，听一下他们的想法，最好的是要邀请真实的用户去体验。
接下来就是对于图表类型、数据类型进行抽象，把所有的指标进行分类，然后再去分析，这些数据指标展现需要的图表类型，以及数字格式。
- 图表类型：
| ·数字卡片（number） | ·进程图卡片（progress） |
| ·组合图卡片（combo） | ·面积图卡片（area） |
| ·堆积面积图（stacked_area） | ·折线图卡片（line） |
| ·饼图卡片（pie） | ·列表卡片（table） |
| ·排行榜卡片（ranking） | ·活动进度卡片（activity_guage） |
| ·条形图卡片（bar） | ·柱状图卡片（column） |
| ·多柱状图卡片（multi_column） | ·环形图卡片（donut） |
| ·Web引用卡片（web） | · 空白卡片（empty） |
| ·不支持卡片（error） |
- 数字格式
带单位的金额数字格式（amount_with_units）：保留千分符，万元以下为实际数字，小数点后四舍五入，例如：9,999元；万元以上，亿元以下，显示万位，例如：800万；亿元以上显示亿位及小数点后一位，例如：1.3亿。用于销售额、营收、库存指标
金额数字格式（amount）：保留千分符，万元为计量单位，万元以下显示小数点一位，例如：0.9；万元以上，显示万位，例如：800。用于销售额、营收、库存指标绘制的图表
基本数字格式（basic_number）：整数，例如：1、999
有限小数格式（finite_number）：四舍五入精确到小数点后一位，例如：1.5
百分比数字格式（percent）：四舍五入精确到小数点后一位，例如：2.8%
日期数字格式（date）：日的展形式为「1日、2日、3日…」月的展示形式为「1月、2月、3月…」年的展示形式为「2015年、2016年、2017年…」，此规范适用于日期图标的横纵坐标
2、界面设计（表现层）
分析对比上面提到的业内的几款 APP，像 GA 、Roambi、Tableau还是跟随了企业自身的品牌色调， 生意参谋和 PC 端色调一直，均为科技蓝，而我司主色调为红色，对于数据类 APP，我觉得红色过于鲜艳，我认为应该用一个冷色调做为主颜色，看了dribbble 和wrapbootstrap上的一些dashboard设计，决定参考INSPINIA IN+ – WebApp Admin Theme配色
- 关于图标设计：遵循简约至上的设计原则用了柱状图来诠释「数据分析」这个概念
- 卡片设计：在设计的过程中，需要充分考虑，正常情况和各种异常情况的处理，比如在「进度条」设计过程中，因为卡片内容需要包含实际值、计划值、进度百分比，一开始出了一套比较满意的原型，但是当考虑上进度为负值、超过100%等异常情况时，原型远远满足不了数据的展示需求。在开发过程中也会暴露出未考虑周全的点，比如：数据异常（例如有负值），数字 0和 Null 字段，无数据的处理，版本过低新卡片类型不支持的情况，数据系列排序等
（数据均为脱敏数据，无真实意义）
- 部分卡片展示
- 全套界面展示
因为我即扮演了 PM 也扮演了 UI/UX ，跳过了「原型设计」这一步，输出了设计文档，而真实的团队中是少不了 UI/UX 设计师的，PM 们不要过多的去干涉设计，提出自己对于 APP 设计的一些思路就好了，不要限制 UI 设计师的发挥，设计师们一般会给你超出预期的想象。
推荐阅读：