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

正文

请到「今天看啥」查看全文

构思产品结构

移动端产品有着随时随地使用，使用周期短、迅速获取的特性，所以在结构的设计上，需要避繁就简，直击最重点的内容。

▍层级设计原则

将数据分层，将界面分层，利用层级设计的原则，有几样好处：

• 可以让数据内容有层次感，符合于用户的浏览思路，由浅入深，由总至细，让用户快速获取重要数据指标。

• 便于用户的交互体验。

• 便于开发和维护。

• 便于权限分配时，不至于大面积留白。

APP设计中运用的层次关系：

例如股票APP中，大盘行情都是在第一层级上展示的，并且利用了数字的展示方式，可以在一屏中一览当日的所有市场行情。点击某一个板块，进入到本板块的内容，相当于进入了下一层级，然后点击具体的某一只股票，这样一层层，浏览逻辑清晰。

股票APP中的层次关系：

（图片来源雪球APP）

按照由汇总到细节的方式去做逻辑层，引导用户按照这种思路去寻找自己的数据需求。

注意：有利就有弊。多层次的设计，意味着操作次数的增加，去回的路径会很长。有些数据会埋藏的很深，如果层次设计的不到位，大多数用户可能都找不到想要的数据。我们需要在产品的整体框架与局部功能的设计上来优化。多层次设计实际上是一个思想，层次的设计实现不见得按照切换页面方式来实现，可以加入创新，结合开发方案，最终目的是简化用户操作。

▍整体框架设计（主结构）

基本元素与导航框架，构成了数据产品的实体与结构。

01 基本元素=数字与图形

数字和图形是产品的主要组成元素，刨除一些功能键，导航栏，设置框，剩下的界面基本被数字和图形占据，它们是产品的实体。

1）数字

数字的表达，直观、简洁，且占用空间少，是很不错的展示方式。缺点在于如果想更深入的了解数字的背后深层次的含义，例如趋势、占比、分布等，便无法直观的体现。

利用数字的展现方式，主要应用于能够一览所有的重点数据的场景。例如股票中的沪深大盘，一眼就能看到几个市场的指数。我们可以针对数据的内容与用户群体，来选择不同的展现方式。在例如首屏的位置放入诸多重点数字可以快速的一览业务的全貌。

① 应用于健康产品中的数字展示：

（图片来源IPHONE自带健康）

② 应用于股票产品中的数字展示：

（图片来源Wind资讯）

2）图形

图形是数据产品中必不可少的元素，它在数据内容的表达上表现的更丰富，不像数字一样表达的过于单一。折线图可以表达趋势，饼图可以看占比，丰富的图对数据内容的解释既直接也更深入，还会在视觉上达到更好的效果。

但是，图在APP中占用的屏幕空间实在是太多了，拿IPHONE6 4.7寸的屏幕来说，竖屏放3个图形已经占据全屏了，想再放入其他内容，必须要从交互设计上入手。所以，图的存在也会影响着APP的整体设计结构模式。

图形在APP中的表现形式样例：

（图片来源网络）

02 主框架与页面导航

主框架就是产品中的页面间导航，以及页面内导航，我把它拆成两部分陈述。

请到「今天看啥」查看全文