10博十博中文网站:如何快速搭建系统原型（二）：内容区（首页）设计

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

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

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

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

　　个性化表格：在基础表格的基础上将数据图表、操作功能等内容相互结合做成个性化表格。

　　大部分有系统数据统计的网站会在首页将一部分重要数据信息以图表的形式进行展示。分为：数据综述、数据图表、个性化。

　　向导表单：多步骤的处理表单，常用于注册、办件等复杂流程中，提升交互的效率。

　　以上就是首页（控制面板）的介绍，此处只是提供一些常规面板的设计方案，你可以使用这些面板，调整面板大小、信息、位置自由组成你所需要的首页。当然本文只是介绍了总结了我自己在设计设计时的基本思路对系统首页元素的解构，可以给你们作为参考，真正设计系统首页的时候还需要设计师根据实际业务需求来进行分析和个性化设计。

　　当遇到系统模块较少或者系统已某个功能为主的需求时，首页可以不以控制面板的样式展现，可以直接对应功能模块的详情页，这也就是我们下一节要介绍的内容区（详情页）设计。

　　作者：Tom王，菜鸟交互设计师一枚，2年未满的产品交互设计经验，2年电商APP运营经验。

　　daniu，您的分享就是我要的，我找2个多星期终于找到了，感谢您，非常感谢，今后我就OK了；

　　会对之前讲的模块各个区块做一个简单的介绍，包括案例、交互等，因为篇幅有限，没有做很详细的分析，设计千变万化，还需要靠自己的理解。

　　听到很多言论说在中国程序员是吃青春饭的，那么产品经理呢，也吃青春饭吗？

　　人人都是产品经理（）是以产品经理、运营为核心的学习、交流、分享平台，集媒体、培训、社群为一体，全方位服务产品人和运营人，成立11年举办在线+期，线+场，产品经理大会、运营大会50+场，覆盖北上广深杭成都等20个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里与你一起成长。