1、经验总结一个移动端数据产品的设计思路经验总结一个挪动端数据产品的设计思路在公司内部或许入驻电商平台的商家、业务方，每日有大批的人在查察大批的指标，用于监控、剖析业务的发展。同时，又有着能够随时随处，方便快捷的查察剖析数据的诉求。本文想简单介绍下能够随时随处查察数据、剖析数据的挪动端产品界面的设计思路。挪动端 BI 产品，需要在有限的空间内把大批的数据、图表组织起来。任何产品设计，其实都离不开产品定位、用户主体是谁、交互设计、开发保护、营运策略几个方面，我们本次主要介绍产品前端设计方法。设计一个挪动端数据产品可从以下思路下手：一、明确产品定位本文要说的挪动端 BI 产品，一般有以下几种：用于数据
2、监控、剖析平台型数据产品集中了以上两点 以上几类产品在界面显现设计上并没有差别，差别在于框架的设计、前后台的配置、营运、与用户集体的不一样。比如平台型数据产品，产品的定位是平台，用户能够在平台上经过配置等方式获得自己想要的数据。同时保证数据的私有性，模式近似于维基与知乎，营运与管理只需保证平台的稳固性与扩展性即可。二、数据内容对于数据内容写在前面是因为：数据内容决定了产品怎样架构，决定了用户用什么样的思路去使用产品，决定了开发保护，以及营运。但不是本文要点，这里只说几个要点：时间时间决定了数据的计算方式，更决定了你要怎样设计产品能在不一样时间维度中切换，你需要计算到什么时间粒度的数据，以及为何
3、这么做。指标以及指标数目数据产品的核心是指标，指标数目跟着公司业务的发展会不停的增添和改变。指标数目影响产品的保护与开发成本。假如全部指标都由你的团队来开发和保护，成本随指标数目成正比。这类状况特别要侧重考虑后台的使用便利性设计，充分考虑营运团队的营运模式。利处是可控性高，数据质量较简单把控， 显现形态会比较丰富。 假如是平台式产品，指标的多少对保护的成本影响较小，但需要考虑平台的性能、扩展性、以及数据质量等问题。计算方式按计算方式分为及时计算与离线计算。好的数据产品会做到用户无感知计算方式的存在。比如当天时点数据时，使用的是及时计算。当周、月粒度的数据，则使用的是离线计算。在产品生命周期早期
4、，假如中间层不可以办理的很好，能够考虑将及时计算与离线计算独立开，让用户感知到，可是在技术条件与产品的演进后，必定要做到用户无感知，不要让用户在这一层面多费脑子。三、构想产品构造挪动端产品有着随时随处使用，使用周期短、快速获得的特征，因此在构造的设计上，需要避繁就简，直击最要点的内容。1、层级设计原则将数据分层，将界面分层，利用层级设计的原则，有几样利处：能够让数据内容有层次感，切合于用户的阅读思路，由浅入深，由总至细，让用户快速获得重要数据指标。便于用户的交互体验。便于开发和保护。便于权限分派时，不至于大面积留白。 APP 设计中运用的层次关系：比如股票 APP 中，大盘行情都是在第一层级上
5、显现的，而且利用了数字的显现方式，能够在一屏中一览当天的全部市场行情。点击某一个板块，进入到本板块的内容，相当于进入了下一层级， 而后点击详细的某一只股票， 这样一层层，阅读逻辑清楚。股票 APP 中的层次关系： （图片根源雪球 APP ）依据由汇总到细节的方式去做逻辑层，指引用户依据这类思路去找寻自己的数据需求。注意：有益就有弊。多层次的设计，意味着操作次数的增添，去回的路径会很长。有些数据会埋藏的很深，假如层次设计的不到位，大部分用户可能都找不到想要的数据。我们需要在产品的整体框架与局部功能的设计上来优化。多层次设计其实是一个思想，层次的设计实现不见得依据切换页面方式来实现，能够加入创新，
6、联合开发方案，最后目的是简化用户操作。2、整体框架设计（主构造）基本元素与导航框架，构成了数据产品的实体与构造。（1）基本元素 =数字与图形数字和图形是产品的主要构成元素，刨除一些功能键，导航栏，设置框，剩下的界面基本被数字和图形占有，它们是产品的实体。1）数字数字的表达，直观、简短，且占用空间少，是很不错的显现方式。弊端在于假如想更深入的认识数字的背后深层次的含义，比如趋向，占比，散布等，便没法直观的表现。利用数字的显现方式，主要应用于能够一览全部的要点数据的场景。比如股票中的沪深大盘，一眼就能看到几个市场的指数。我们能够针对数据的内容与用户集体，来选择不同的显现方式。在比如首屏的地点放入诸
7、多要点数字能够快速的一览业务的全貌。 应用于健康产品中的数字显现：（图片根源 IPHONE 自带健康） 应用于股票产品中的数字显现：（图片根源 Wind 资讯）2）图形图形是数据产品中必不行少的元素，它在数据内容的表达上表现的更丰富，不像数字同样表达的过于单调。折线图能够表达趋向，饼图能够看占比，丰富的图对数据内容的解释既直接也更深入，还会在视觉上达到更好的成效。可是，图在 APP 中占用的屏幕空间实在是太多了，拿IPHONE6 4.7 寸的屏幕来说，竖屏放 3 个图形已经占有全屏了，想再放入其余内容，一定要从交互设计上下手。因此，图的存在也会影响着 APP 的整体设计构造模式。图形在 APP
8、 中的表现形式样例：（图片根源网络）（2）主框架与页面导航主框架就是产品中的页面间导航，以及页面内导航，我把它拆成两部分陈说。设计挪动产品，导航菜单的设计是重中之重，因为它决定了：用户操作逻辑以及内容逻辑开发方案确实定以及保护成本开发、内容的扩展性营运方式 在确立了产品定位、数据内容后，设计导航框架时，需要联合以上 4 点来考虑。曾有长辈总结过大概 8 种导航方式，数据产品常用且比较合适的， 总结为下列图所示 6 种。也是大家熟知的几种方案，不论什么 APP，都离不开这些导航方案。我们能够联合数据内容，特别是数字的显现方式，交融到这些导航中，简化产品学习成本。利用 APP 的常用的几种导航来确
9、立产品的基本框架：以上几种导航模式，能够混淆使用，能够依据产品的不同生命周期，来决定导航方案。这些模式决定了产品的整体构造。假如产品需要用户屡次的在不一样分页切换与产品内容的扩展性，最优的导航方式是底栏标签的方式（上图左上） ，扩展性很强，在产品生命成熟期时能够使用这类方式。每个页签订位不一样场景的内容，在每一个页面场景中能够又融入其余的导航，比如：底部标签导航 +列表：底部标签导航栏 +TAB 页：底部标签导航栏 +抽屉：上述三种方案， 底部标签导航确立了 APP 的主构造， 其他的导航方式都是在这主构造下的子导航，市道上的应用很大一部分是利用这类主构造。主构造确实定主假如为产品的使用、开发
10、的方案，营运、以及扩展做好基础以及方向，此步十分重要。总的原则是，利用导航之间的各样组合，来达到交互上的最优。同时也需要考虑的是运维和开发的成本。产品交互框架设计是一个不停调优的过程，我在设计挪动端数据产品时，经历了列表式、做抽屉式、平铺式最后到导航组合的过程。这自己和产品的生命周期息息有关。因为在最一开始，需求采集是片面且信息量极少的，此外你需要确立好数据内容，以及内容的显现方式，还有后台的设计以及开发方案、技术团队的配合，这些都是在需求不停更改、数据内容不停丰富的过程中演进的。3、局部页面布局页面内大块显现区主假如内容承载，实体是数字和图形以及部分功能。在确立好主体框架以后，就是页面内的导
11、航怎样搭配了。页面内的导航、功能怎样布局，能够当成在主框架以后的分支设计，每一个场景设计都能够独具创新，根据需求设计页面。我们能够把数据融入到各样导航中，本着分层设计的要素，合理布局，让数据在各样导航中表现层次感。我整理了几个常有的方案：（1）瀑布流平铺内容平铺的方式，开发简单、保护方便，能够快速一览数据内容。能够保证指标不多，数据内容为高粒度汇总的状况下使用此类方式。一般用在产品早期阶段。但数据内容没有做任何分层。平铺式假如没有其余导航方式进行协助，比如底栏标签的导航，抽屉导航做协助， 那么能承载的内容与体验成反比。也就是说，内容越多，体验越差。因为用户要不停下拉保证内容信息的获得，此外，假
12、如想瞬时定位到某一块内容的时候，需要增添搜寻功能以便实现。（2）名片 +导航名片导航方式，就好像名片，依据业务或许场景进行分类，每一个名片代表一个业务或场景，名片内表现高粒度汇总的数据（重要指标） ，这样能够一览全部业务以及场景的整体状况。如需要持续探究业务场景细节，依据导航进入下一页，下一级菜单仍旧能够依据名片的方式显现，也能够用其余方式如 TAB 页、列表、九宫格等。 依据层次由总到细的原则，依据数据内容的粒度层次挨次传达。（3）九宫格式九宫格的利用方式，和名片 +导航的方式近似，用这类方案设计，能够用于定位是平台化的产品，集成好多进口。每一个九宫格，都是一个进口，能够是一个专项，能够是一
13、个应用的进口。能够环绕产品主题做发挥，比如为其余剖析产品做进口，比如把用户剖析、流量剖析、财务剖析等当成主题，每个主题能够由不一样的人设计和负责， 嵌入到产品中，对于用户来说，集成在一个应用中，总比切换应用的感觉好的多。（4）轮播模式 +TAB 页轮播模式 +TAB 页的一个使用处景是，数据内容能够切分红两个部分，分层的逻辑是二元的。分层在同一级，而且每个部分还能够配合其余导航方式持续向下级延长。也就是说，有两个同级的起点。比如公司有两块主营业务，或许以两个部门为起点等等。总的来说，确立主体框架以后，页面内的导航能够千变万化，能够有创新，能够借鉴通用的导航方式，可是核心原则依旧是环绕着用户体验
14、、开发保护、营运、以及数据内容的扩展。4、局部细节数字怎样排版， 图形怎样摆放， 弹层、功能键怎样使用，这些细节决定产品的成败。上文所述，图占用空间但内容表达丰富，数字直观但缺少解说度，我们需要认真设计把它们联合到一同，经过各样功能让数据内容表达拥有关系性，操作简单，数据更易解读。（1）数字联动图形数字和图形的联动，需要考虑使用的便利性。一般用户的思路是，看到一个数值，还要想看更详尽的内容，比如趋势、占比、对照等，就需要图表联动的方式。数字与图形联动方式：上图举了两个例子， 一个是数在左， 图在右的联动模式，这类模式弊端是图较小，放多图不太简单。另一个是图置于屏幕最下方， 保持常态， 上方是各
15、样不一样的业务、 场景指标，点击后，图会显示为点击的业务数据内容，随之变化。IPHONE 自带的股票界面就是这样的设计：IPHONE 自带的股票软件：更多的状况下，一个数字（指标）会包括有多个图，可以看用折线图看趋向，饼图看占比。依据需要，搁置各样不同的图。 当多图时， 能够用左右滑动的轮播方式， 切换图表。不行设置自动轮播，需设置好默认，让用户自己去操作。（2）弹层弹层应用：运用弹层功能的目的有 2 种：节俭空间能够在同一页面下其余元素保持风格一致 为了防止过分打断用户思路，并指引用户思路，利用弹层，并将弹层置底， “撤消 ”按钮的地点也便于手指操作。同时这样设计也能够在同一数据层面下显现更
16、多的内容，也可显得界面整齐、内容更一致。往常会把图形等占用空间大的组件放入弹层内。弊端增添了用户的操作频率。（3）表格因为手机屏幕大小的问题，挪动端只好做一些字段较少的表格，竖屏状况下，最多显现 4 列，还要看每列的内容情况，何况假如数据内容好多，会显得很拥簇，视觉成效会大打折扣。此外，假如用待滑动条的图标，还会让使用以及开发头疼，操作起来极其不便。表格在挪动端的显现与操作， 十分不便， 原则是：善用，少用。（4）顶部导航栏顶部导航能够无穷扩展，对于业务、场景分层很细的情况，比如像新闻类应用，常常会使用这类导航。在独自的一个模块中，能够常用这类导航，将业务分类。弊端在于一旦分类太多，埋藏太深，
17、用户需要滑动好多次才能找到自己需要的分类。可是能够考虑像新闻应用同样，设置一些常看的业务分类。此导航最好用于导航层级的最基层，因为需要操作，不便于搁置到顶层导航之列，此外，也便于开发保护管理。（5）图形使用的一些细节图形带出的信息不可以太多太乱，比如柱形图，不可以把每个柱子都带上数字，当数据很大时数字叠加看不清楚。能够考虑点击后，显示数值。要擅长利用合适的图形表示相应的意思。比如，不要用柱形图表示趋向，如图：近 30 天趋向，折线图远比柱形图简短直观。单位数值很大， Y 抽起点是 0，振幅却很小时，图形表现就如同一根直线，很难看出变化。因此需要把起点值设置的更高，比率尺放大，就能够看出趋向了。
18、能够在使用过程中依据实质状况来优化。（6）其余需要注意功能数据刷新， 刷新功能十分重要， 数据能够设置自动刷新，但有时为了考虑用户流量的问题，也会设置非自动更新。所以见告用户刷新功能很有必需。好多用户在不知道刷新功能怎样使用时，只好退出应用再次启动才能达到数据刷新效果。数据解说，对数据的定义说明、解说是协助数据产品的很重要的一环。假如不可以在产品内合适的表现对数据的解说，产品使用成效会打折扣，用户或许会在大批的数据眼前迷惑，不知怎样下手。单位一致，同一个篇幅下，单位要一致。精缺到几位，关系着你的产品视觉程度。比如，小数点问题，不一样应用对小数点的设计不一样。一般建议数据取整，不保存小数点。四、
19、其余对于开发在产品生命周期过程中，开发是和产品息息有关的，开发方式也决定了上线时间、运维、可视化成效等。挪动端产品能够考虑 H5 与原生两个开发方式。开发方案确实定由好多要素构成：开发团队的构成开发时长产品生命周期扩展性 产品初期，联合快速上线，先交出一版的状况，能够考虑除主架构以外的内容用 H5 开发。因为以此刻的大部分互联网公司以及整个环境的发展态势，产品整个生命过程的需求把控是十分要点的，联合你团队的开发资源，选择相应的开发方案，对产品进度的把控是很要点的。对于需求用户对产品的需求点，在产品中必不行少的有：能够方便的做对照及时计算要求许多，能够随时调整活动策略能够多维度钻取便于查问能够有
20、珍藏或许自定义功能以上是我总结的一些经验，但不见得必定合用于其余产品，因此，见仁见智吧。对于挪动数据产品的界面设计就介绍完了，产品设计，设计思想是核心，本着各样基根源则，汲取优异产品的有点和设计思想， 联合需求点与用户特征， 使用处景来打造产品。自己就是个不停打磨的过程。希望本篇文章能够为做挪动数据产品的伙伴供给帮助，文章中措辞或许其实不考究，希望能够指正。内容总结（1）经验总结一个挪动端数据产品的设计思路在公司内部或许入驻电商平台的商家、业务方，每日有大批的人在查察大批的指标，用于监控、剖析业务的发展（2）经验总结一个挪动端数据产品的设计思路在公司内部或许入驻电商平台的商家、业务方，每日有大批的人在查察大批的指标，用于监控、剖析业务的发展（3）本文想简单介绍下能够随时随处查察数据、剖析数据的挪动端产品界面的设计思路
