PC端系统首页的设计手册

2 评论 15477 浏览 93 收藏 7 分钟

大多数产品经理在画一个从0-1的产品原型或者要优化原有产品的时候,会遇到系统首页如何设计的问题,有哪些需要注意的问题呢?

系统首页很重要,系统首页相当于这个产品的脸面,用户登录系统后,首先看到的是系统的首页,才会看到其他的系统功能。

无论是人还是系统,都看颜值。

一个排版布局漂亮的首页让人眼前一亮,可以提升产品的level,一个设计简陋和丑陋的首页,会降低用户对这个产品的心理预期。

我从事产品几年来,看过及参与设计过很多系统的首页,今天对于系统首页设计做一个小结。

一、系统首页设计有哪些?

  • 文字型
  • 表格型
  • 文字和表格结合
  • 纯图形
  • 表格和图形结合
  • 综合以上

二、首页给谁看?

了解了系统首页的类型后,我们再来思考一下首页主要是给谁看的。

对于业务型系统,首页一般会给两大类角色看,分别是领导和普通员工,领导纵览公司、部门、业务等整体情况,员工主要看本部门的工作、业务情况。

在设计首页时,领导和普通员工的展示界面,会有一些差别。

并不是所有系统会区分领导和员工的首页,像OA、财务报销系统、舆情预警系统,首页不会区分领导和普通员工,大家看到的首页都一样。

三、首页看什么?

首页展示的内容可以分为三类:重要内容、待办内容、消息通知。

第一,重要内容是整个系统抽取出重要和关键的内容,并经过统计分析得出的内容,让用户登录系统后能快速了解的内容。

比如一个物流系统的客户端,重要内容会有账户余额、预报包裹的数量、异常包裹的数量等等。

重要内容需要产品经理结合实际业务去提取。

第二,待办内容是指需要待办的事项,用户登录系统除了看一些信息,可能还会要做一些处理工作,首页提供一个待办入口,很方便用户去做处理。

一般系统中涉及到流程,会产生待办内容。

第三,消息通知指一些通知、公告或其他文字性提醒的内容,如果有一些重大的消息,用户在首页可以马上了解。

四、首页有什么?

在设计首页的时候,需要把各种展示内容以合理的方式呈现,考验的是一个人从不同角度去分析、组合信息内容的能力。

这些角度大致上有以下几种:

1. 总体分析

总体分析主要是对某事物总体情况进行统计,比如电商卖家管理平台,待收付款金额、待发货数量、退款/售后数量、物流异常数量。

用户看总体分析能非常快速便捷的了解自己的业务整体。

总体分析的展现形式一般有数字综述、仪表盘、柱状图进行展示。

2. 对比统计不同类型、不同时间、不同区域的数量表现

用户看完整体,会去详细看部分情况,对于部分,通常可以从类型、时间、区域等去分析展示。

不同类型之间的数量/占比、不同时间段内的数量/占比、不同区域之间的数量/占比等等。

展现形式一般有饼图、环形图、柱状图、条形图等。

3. 趋势

用户除了关注当前业务的情况,还关注一段时间内某事物的变化情况,即趋势。

比如近30日内成交金额的趋势、近30日人均浏览量趋势。

趋势的展现形式一般有折线图、面积图。

4. 任务进度

任务进度一般是通过进度条的形式展现不同对象之间的数量对比。

比如领导在首页可以查看下属之间任务完成情况的对比。

5. 分布

除了同对象不同类型、时间、区域的比较,以及不同对象之间的比较,还有区域、行业等分布概况。

区域分布图展现形式以地图方式展现,行业分布图展现形式可以以柱状图方式展现。

6. 排行榜

排行榜展示前X的对象,比如TOP10商品销量、TOP5舆情新闻。

排行榜展现形式一般是表格。

7. 变化量/变化率

首页上告诉用户当前是什么很必要,有时候告诉用户某事物跟前一次比发生了变化,这个变化是多少,变化是什么也很重要。

五、首页的展现形式

当我们已经想好首页要放哪些内容,哪些维度,这时就要去想如何去展现更为直观。

文字?表格?图形?什么图形?

展现形式有很多,下面罗列了一些。

  • 柱状图
  • 条形图
  • 饼图
  • 玫瑰饼图
  • 环形图
  • 折线图
  • 面积图
  • 雷达图
  • 仪表盘
  • 散点图
  • 漏斗图
  • 词云图
  • 表格
  • 数字综述
  • 中国地图

Echarts上面有很多图形展现方式,在设计首页的时候可以参考。

我认为设计首页最重要的是去分析、提取首页展示的内容,分析用户在首页要看什么,想看什么,什么信息对用户有用,什么信息是最有价值。其次,是从哪些维度去展示,最后才是画图,前面的东西思考清楚了,画图就很简单。

#专栏作家#

Vi-Vi-Fu,微信公众号:vivifu12,人人都是产品经理专栏作家。杭州某不知名公司需求分析师。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 如果针对每种类型,有比较,更实用

    回复
  2. 如果可以放一些截图的话,会更加生动

    来自湖南 回复