注：本文是我对现阶段学习和接触到的系统项目总结，将系统界面各部分模块化/组件化，编写了系统通用交互方案，旨在帮助
最近负责了多个系统的交互设计工作，在设计的过程中遇到了一些问题：界面布局应该怎么设计，这个功能怎么放，首页要放什么内容、这边放这些功能合适吗、弹窗展示是否合适……设计好了又发现需要个性化，开发成本较高，标准版不支持。
所以，我想有没有一套方案，可以帮助我，帮助设计师、项目经理快速的搭建系统的原型方案；也可以后续运用到标准版的迭代中。我们交互设计制作原型经常会使用Axure 中的组件（元件）通过组合成为各类产品原型，那么是不是我可以通过分析结构系统的界面设计，将系统各个功能模块分解出来，作为一个元件来呈现，然后用这些元件来搭建各类系统。只要改变元件大小、元件布局、交互细节就可以做出各种个性化同时适合客户需求的系统原型了。
本文只是对常规系统作分析，一些很个性化程度很高的系统（例如视频监控、大数据展示系统等）不做具体的分析和介绍。
首先，以百度云盘为例，我们可以看到一个系统页面根据不同的功能作用分为以下模块：系统名称/logo、主导航、账号信息、消息/工具、内容区等功能区域；
接下来，我会总结这些模块的主要功能作用和常用交互方式，并介绍一些设计案例，并整理成原型组件，后续通过这些组件就可以搭建你想要的系统界面了。
一般位于界面左上角，标识系统的名称和logo，也有加上sloga或结合背景图片来凸显系统特性的。
主导航作为系统模块或者功能导航，从用户的浏览习惯视线从左往右和从上往下，所以主导航常放在左侧和顶部，所以根据导航位置我把系统常用框架分为两类：左侧导航布局、顶部导航布局（具体的样式介绍放到最后的框架综述）。
主要展示系统的常用工具，包括搜索、消息、注销/退出、帮助等等功能，常以图标或者文字的形式展现；这些功能放置的位置和和账号信息结合穿插排布在顶部。
根据不同的功能有对应不同的交互方式，例如搜索可输入，点击查询搜索结果，注销点击后退出系统返回登录页面……
主要分为首页和详情页面，首页或者叫控制面板（dashboard）主要是各类组件（数据、列表、表单等等）相互组合而成，就是将系统最主要的功能优先在首页有个快速展示也作为快捷入口；详情页对应的是各个模块的功能操作页面，具体需要根据不同的栏目需求来设计。
OK，那简单介绍了系统界面的几个组成部分，那么我们现在就是通过这个部分不同的组合就可以组成各种各样个性化的系统框架样式了。因为主导航栏是最主要的功能模块，所以我又分为两类：左侧导航、顶部导航。
以上是一些系统界面布局样式，但是界面布局不限于这些结构，你可以设计的时候可以模块组件自由搭配，组件间不一定要区分的很明显，组成适合你的项目的系统界面框架。
这次只是介绍了框架的构成和一些简单的案例，教导了大家如何来搭建一个简单的系统界面框架。详细的制作一个首页界面、详细的界面内容区域的功能模块设计还需要更多细节，所以在下一节会介绍各类组件，包括首页的面板和详情页的各类列表、弹窗、内容的各类样式等等，方便大家更好的了解系统原型搭建的方式。
作为一个正式作为交互设计师一年多的菜鸟来说，第一次编辑这种分享类的文档。没接受过系统的专业的学习，所有学到的知识都是来源于各种产品设计类相关的网站分享的文章。所以，第一次分享更多的还是报着学习的目的，逻辑话术上肯定还有很多问题，分析的也很片面，讲的也很啰嗦，所以如果本文有各种问题，请各位童鞋不吝指出，谢谢。
作者：Tom王，菜鸟交互设计师一枚， 2 年未满的产品交互设计经验， 2 年电商APP运营经验。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
上篇文章（《如何快速搭建系统原型（一）》）介绍了系统整体框架的结构，以及相关案例，主要是针对系统的外层框架布局，那么今天这篇文章就要介绍系统正文内容区怎么来分析和...