PC端系统首页的设计手册

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

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

一个排版布局俊秀的首页让人面前一亮，可以提升产品的level，一个设计简陋和丑陋的首页，会降落用户对这个产品的生理预期。

我从事产品几年来，看过及参与设计过很多系统的首页，本日对付系统首页设计做一个小结。

一、系统首页设计有哪些？笔墨型表格型笔墨和表格结合纯图形表格和图形结合综合以上

理解了系统首页的类型后，我们再来思考一下首页紧张是给谁看的。

对付业务型系统，首页一样平常会给两大类角色看，分别是领导和普通员工，领导纵览公司、部门、业务等整体情形，员工紧张看本部门的事情、业务情形。

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

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

三、首页看什么？

首页展示的内容可以分为三类：主要内容、待办内容、关照。

第一，主要内容是全体系统抽取出主要和关键的内容，并经由统计剖析得出的内容，让用户登录系统后能快速理解的内容。

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

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

第二，待办内容是指须要待办的事变，用户登录系统除了看一些信息，可能还会要做一些处理事情，首页供应一个待办入口，很方便用户去做处理。

一样平常系统中涉及到流程，会产生待办内容。

第三，关照指一些关照、公告或其他笔墨性提醒的内容，如果有一些重大的，用户在首页可以立时理解。

四、首页有什么？

在设计首页的时候，须要把各种展示内容以合理的办法呈现，磨练的是一个人从不同角度去剖析、组合信息内容的能力。

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

1. 总体剖析

总体剖析紧张是对某事物总体情形进行统计，比如电商卖家管理平台，待收付款金额、待发货数量、退款/售后数量、物流非常数量。

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

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

2. 比拟统计不同类型、不同韶光、不同区域的数量表现

用户看完全部，会去详细看部分情形，对付部分，常日可以从类型、韶光、区域等去剖析展示。

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

展现形式一样平常有饼图、环形图、柱状图、条形图等。

3. 趋势

用户除了关注当前业务的情形，还关注一段韶光内某事物的变革情形，即趋势。

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

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

4. 任务进度

任务进度一样平常是通过进度条的形式展现不同工具之间的数量比拟。

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

5. 分布

除了同工具不同类型、韶光、区域的比较，以及不同工具之间的比较，还有区域、行业等分布概况。

区域分布图展现形式以舆图办法展现，行业分布图展现形式可以以柱状图办法展现。

6. 排行榜

排行榜展示前X的工具，比如TOP10商品销量、TOP5舆情新闻。

排行榜展现形式一样平常是表格。

7. 变革量/变革率

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

五、首页的展现形式

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

笔墨？表格？图形？什么图形？

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

Echarts上面有很多图形展现办法，在设计首页的时候可以参考。

我认为设计首页最主要的是去剖析、提取首页展示的内容，剖析用户在首页要看什么，想看什么，什么信息对用户有用，什么信息是最有代价。
其次，是从哪些维度去展示，末了才是画图，前面的东西思考清楚了，画图就很大略。

#专栏作家#

Vi-Vi-Fu，微信"大众年夜众号：vivifu12，大家都是产品经理专栏作家。
杭州某不有名公司需求剖析师。

本文原创发布于大家都是产品经理。
未经容许，禁止转载。

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