经验总结｜一个移动端数据产品的设计思路.docx

《经验总结｜一个移动端数据产品的设计思路.docx》由会员分享，可在线阅读，更多相关《经验总结｜一个移动端数据产品的设计思路.docx（27页珍藏版）》请在优知文库上搜索。

1、经验总结I一个移动端数据产品的设计思路在企业内部或者入驻电商平台的商家、业务方,每天有大量的人在查看大量的指标，用于监控、分析业务的发展。同时，又有着能够随时随地,方便快捷的查看分析数据的诉求。本文想简单介绍下可以随时随地查看数据、分析数据的移动端产品界面的设计思路。移动端Bl产品，需要在有限的空间内把大量的数据、图表组织起来。任何产品设计，其实都离不开产品定位、用户主体是谁、交互设计、开发维护、运营策略几个方面，我们本次主要介绍产品前端设计方法。设计一个移动端数据产品可从以下思路入手:产品定位看什么数据？（数据内容）产品结构，布局是什么？整体导航框架（主结构）页面布局？数值？图表？（局部）功

2、能细节一、明确产品定位本文要说的移动端Bl产品，一般有如下几种：用于数据监控、分析平台型数据产品集中了以上两点以上几类产品在界面展示设计上并无区别，区别在于框架的设计、前后台的配置、运营、与用户群体的不同。例如平台型数据产品，产品的定位是平台，用户可以在平台上通过配置等方式得到自己想要的数据。同时保证数据的私有性，模式类似于维基与知乎，运营与管理只要确保平台的稳定性与扩展性即可。二、数据内容关于数据内容写在前面是因为：数据内容决定了产品如何架构，决定了用户用什么样的思路去使用产品，决定了开发维护，以及运营。但不是本文重点，这里只说几个重点：时间时间决定了数据的计算方式，更决定了你要如何设计产品

3、能在不同时间维度中切换，你需要计算到什么时间粒度的数据，以及为什么这么做。指标以及指标数量数据产品的核心是指标，指标数量随着公司业务的发展会不断的增加和改变。指标数量影响产品的维护与开发成本。如果所有指标都由你的团队来开发和维护，成本随指标数量成正比。这种情况尤其要着重考虑后台的使用便捷性设计,充分考虑运营团队的运营模式。好处是可控性高，数据质量较容易把控，展示形态会比较丰富。如果是平台式产品，指标的多少对维护的成本影响较小，但需要考虑平台的性能、扩展性、以及数据质量等问题。计算方式按计算方式分为实时计算与离线计算。好的数据产品会做到用户无感知计算方式的存在。例如当日时点数据时,使用的是实时计

4、算。当周、月粒度的数据，则使用的是离线计算。在产品生命周期初期，如果中间层不能处理的很好，可以考虑将实时计算与离线计算独立开，让用户感知到，但是在技术条件与产品的演进后，一定要做到用户无感知，不要让用户在这一层面多费脑子。三、构思产品结构移动端产品有着随时随地使用，使用周期短、迅速获取的特性，所以在结构的设计上，需要避繁就简，直击最重点的内容。1、层级设计原则将数据分层，将界面分层，利用层级设计的原则，有几样好处：可以让数据内容有层次感,符合于用户的浏览思路，由浅入深,由总至细，让用户快速获取重要数据指标。便于用户的交互体验。便于开发和维护。便于权限分配时，不至于大面积留白。APP设计中运用的

5、层次关系：第二层高汇总，重要数据中度汇总数据低粒度，明细例如股票APP中，大盘行情都是在第一层级上展示的，并且利用了数字的展示方式，可以在一屏中一览当日的所有市场行情。点击某一个板块，进入到本板块的内容，相当于进入了下一层级，然后点击具体的某一只股票，这样一层层,浏览逻辑清晰。股票APP中的层次关系：（图片来源雪球APP）4正程公3119.2910131231930.14Mwtt*eF/子-0.01.a-o.88C-.34、I力行Jr-TW11Iii3出环加N22a12.20%13.7243.07%美*金22.7212.07.112tt7.81K胃23.511.38%1M1N7%华安NLft1

6、96-LarJ坪a”15.740.77%1511.7BMRH囹6石克1A.7510.4fi%口含R究-z.o三z希澄个球按照由汇总到细节的方式去做逻辑层，引导用户按照这种思路去寻找自己的数据需求。注意：有利就有弊。多层次的设计，意味着操作次数的增加，去回的路径会很长。有些数据会埋藏的很深，如果层次设计的不到位，大多数用户可能都找不到想要的数据。我们需要在产品的整体框架与局部功能的设计上来优化。多层次设计实际上是一个思想，层次的设计实现不见得按照切换页面方式来实现，可以加入创新，结合开发方案，最终目的是简化用户操作。2、整体框架设计（主结构）基本元素与导航框架，构成了数据产品的实体与结构。(1)

7、基本元素=数字与图形数字和图形是产品的主要组成元素，刨除一些功能键，导航栏，设置框，剩下的界面基本被数字和图形占据，它们是产品的实体。1)数字数字的表达，直观、简洁，且占用空间少，是很不错的展示方式。缺点在于如果想更深入的了解数字的背后深层次的含义，例如趋势，占比，分布等，便无法直观的体现。利用数字的展现方式，主要应用于能够一览所有的重点数据的场景。例如股票中的沪深大盘，一眼就能看到几个市场的指数。我们可以针对数据的内容与用户群体，来选择不同的展现方式。在例如首屏的位置放入诸多重点数字可以快速的一览业务的全貌。应用于健康产品中的数字展示：2,830步：19步行+跑步距离12英里已爬楼层7层F午

8、12：46（图片来源IPHONE自带健康）应用于股票产品中的数字展示:图形是数据产品中必不可少的元素，它在数据内容的表达上表现的更丰富，不像数字一样表达的过于单一。折线图可以表达趋势，饼图可以看占比，丰富的图对数据内容的解释既直接也更深入，还会在视觉上达到更好的效果。但是，图在APP中占用的屏幕空间实在是太多了，拿IPH0NE64.7寸的屏幕来说，竖屏放3个图形已经占据全屏了，想再放入其他内容，必须要从交互设计上入手。所以，图的存在也会影响着APP的整体设计结构模式。图形在APP中的表现形式样例：（图片来源网络）（2）主框架与页面导航主框架就是产品中的页面间导航，以及页面内导航,我把它拆成两部

9、分陈述。设计移动产品，导航菜单的设计是重中之重，因为它决定了：用户操作逻辑以及内容逻辑开发方案的确定以及维护成本开发、内容的扩展性运营方式在确定了产品定位、数据内容后，设计导航框架时，需要结合以上4点来考虑。曾有前辈总结过大致8种导航方式，数据产品常用且比较适合的，总结为下图所示6种。也是大家熟知的几种方案，不管什么APP,都离不开这些导航方案。我们可以结合数据内容，尤其是数字的展示方式，融合到这些导航中，简化产品学习成本。利用APP的常用的几种导航来确定产品的基本框架：:懒獐I侧边抽屉式TAB页式轮播加列表式口 口 口口P 以上几种导航模式，可以混合使用，可以根据产品的不同生命周期，来决定导

10、航方案。这些模式决定了产品的整体结构。如果产品需要用户频繁的在不同分页切换与产品内容的扩展性，最优的导航方式是底栏标签的方式（上图左上），扩展性很强，在产品生命成熟期时可以使用这种方式。每个页签定位不同场景的内容，在每一个页面场景中可以又融入其他的导航，例如：底部标签导航+列表:底部标签切换页面轮播图可放入重点内容入口当作推送内容，数据产品也I工可以有这样的方式上证指数300195-2%深成指300195-2%创业板3001.95-2%列表导航，融入数据，且有导航的功能底部标签导航栏+TAB页:底部标签配合抽屉导航TAB页十分适合胆边一射置不用放 二而娜性以劭等常的级部签于内的分两氐乐不付容X

11、一TAB页的加入，丰富了层级可以按照内容，分页显示不同内容底部标签导航栏+抽屉：上述三种方案，底部标签导航确定了APP的主结构，其他的导航方式都是在这主结构下的子导航，市面上的应用很大一部分是利用这种主结构。主结构的确定主要是为产品的使用、开发的方案，运营、以及扩展做好基础以及方向，此步十分重要。总的原则是,利用导航之间的各种组合,来达到交互上的最优。同时也需要考虑的是运维和开发的成本。产品交互框架设计是一个不断调优的过程，我在设计移动端数据产品时，经历了列表式、做抽屉式、平铺式最后到导航组合的过程。这本身和产品的生命周期息息相关。因为在最一开始，需求收集是片面且信息量很少的，另外你需要确定好

12、数据内容，以及内容的展示方式，还有后台的设计以及开发方案、技术团队的配合，这些都是在需求不断变更、数据内容不断丰富的过程中演进的。3、局部页面布局页面内大块展示区主要是内容承载，实体是数字和图形以及部分功能。在确定好主体框架之后，就是页面内的导航如何搭配了。页面内的导航、功能如何布局，可以当做在主框架之后的分支设计，每一个场景设计都可以独具创新，根据需求设计页面。我们可以把数据融入到各种导航中，本着分层设计的要素，合理布局，让数据在各种导航中体现层次感。我整理了几个常见的方案：瀑布流平铺XXXXW，234,345,35650%fXXXX2X345,35650%f-XXXXW234,345,35

13、650%fxxxxl234,345 356 50% fXXXXW234.345.35650%fXXXXW234,345,35650%fXXXX薪号234,345.35650%fXXXX指标234,345,35650%f内容平铺的方式，开发简单、维护方便，能够快速一览数据内容。能够确保指标不多，数据内容为高粒度汇总的情况下使用此类方式。一般用在产品初期阶段。但数据内容没有做任何分层。平铺式如果没有其他导航方式进行辅助，例如底栏标签的导航，抽屉导航做辅助，那么能承载的内容与体验成反比。也就是说，内容越多，体验越差。因为用户要不断下拉保证内容信息的获取，另外，如果想瞬间定位到某一块内容的时候，需要增

14、加搜索功能以便实现。（2）名片+导航XXXXikA今日本月X234,456 占比234,456 累计36.75%234,456xxxxik 劳今日本月234,456 占比234,456 累计36.75%234,456KXXX业劳今曰本月、234,456 占比234,456 累计36.75%234,456xxxxik 劳今日本月、234,456 占比234,456 累计36.75%234,456krrXXXX产品今日 234,456 占比 36.75%本月234,456 累计234,456rXXXX产品今日234,456 占比36.75%本月234/456累计234/456rXXXX产品今日234,456 占比36.75%本月234,456 累计234,456XXXX产品今日234,456 占比36.75%本月234,456累计23