如何快速搭建系统原型（二）：内容区（首页）设计

注：上篇文章（《如何快速搭建系统原型（一）》）介绍了系统整体框架的结构，以及相关案例，主要是针对系统的外层框架布局，那么今天这篇文章就要介绍系统正文内容区怎么来分析和设计的，对不同的内容分类，介绍参考案例以及各种类型的内容适用于何种场景。

内容区分类

内容区域指的是正文区域根据作用我分为了首页和详情页两大类。首页一般是指系统首页或者模块首页，常需要个性化设计；详情页一般是查看/操作页面，常以列表、表单、信息详情的形式展现。接下来首先介绍首页的设计思路。

首页（控制面板）

我再浏览系统交互案例的时候看了很多外国系统动效，发现他们都把首页都叫做“控制面板”（dashboard）。我理解作为一个控制面板，首页的作用就是控制整个系统，控制系统中所有的栏目/模块，那么首页就是由控制这些模块的“面板”组织而成。如下图：

那其实我们要设计首页，就是把系统各个子模块简化成一个个小面板，再按照模块的优先级等原则进行布局展示就行了。是不是感觉设计首页很简单，那么真正的难度在于不同的系统不同的功能模块我们怎么把这些模块简化成一个个面板。我将这些面板分为四种类型：信息、表格、图表、表单：

信息：展示信息，又可以分为列表信息、详细信息、人员信息、消息等

列表信息：展示多条列表信息，常用于新闻信息列表、排行、文章标题列表等。

详细信息：常用于文章详情或单独的图文详情信息。

人员信息：常用于展示账号信息。

消息：常用于展示短信消息或者人员留言等信息；

表格：以表格的形式组织整理信息/数据的展现方式

根据其样式功能的不同又可以细分为基础表格、可操作表格和个性化表格。