如何快速搭建系统原型

本文是我对现阶段学习和接触到的系统项目总结，将系统界面各部分模块化/组件化，编写了系统通用交互方案，旨在帮助交互设计师、项目经理经过通用方案能够根据项目需求快速搭建合适的系统界面。浏览器

背景

最近负责了多个系统的交互设计工做，在设计的过程当中遇到了一些问题：界面布局应该怎么设计，这个功能怎么放，首页要放什么内容、这边放这些功能合适吗、弹窗展现是否合适……设计好了又发现须要个性化，开发成本较高，标准版不支持。安全

因此，我想有没有一套方案，能够帮助我，帮助设计师、项目经理快速的搭建系统的原型方案；也能够后续运用到标准版的迭代中。咱们交互设计制做原型常常会使用Axure 中的组件（元件）经过组合成为各种产品原型，那么是否是我能够经过分析结构系统的界面设计，将系统各个功能模块分解出来，做为一个元件来呈现，而后用这些元件来搭建各种系统。只要改变元件大小、元件布局、交互细节就能够作出各类个性化同时适合客户需求的系统原型了。微信

界面结构

本文只是对常规系统做分析，一些很个性化程度很高的系统（例如视频监控、大数据展现系统等）不作具体的分析和介绍。微信公众平台

首先，以百度云盘为例，咱们能够看到一个系统页面根据不一样的功能做用分为如下模块：系统名称/logo、主导航、帐号信息、消息/工具、内容区等功能区域；框架

接下来，我会总结这些模块的主要功能做用和经常使用交互方式，并介绍一些设计案例，并整理成原型组件，后续经过这些组件就能够搭建你想要的系统界面了。编辑器

系统名称/logo

（1）说明模块化

通常位于界面左上角，标识系统的名称和logo，也有加上sloga或结合背景图片来凸显系统特性的。wordpress

（2）交互工具

点击logo区域返回到系统首页。组件化

（3）案例

主导航

（1）说明

主导航做为系统模块或者功能导航，从用户的浏览习惯视线从左往右和从上往下，因此主导航常放在左侧和顶部，因此根据导航位置我把系统经常使用框架分为两类：左侧导航布局、顶部导航布局（具体的样式介绍放到最后的框架综述）。

（2）交互

点击跳转到对应的导航模块，也能够点击展开多级栏目。

（3）案例

帐号信息

（1）说明

用户登陆帐号相关信息

（2）交互

点击跳转到用户中心
切换帐号
注销/退出帐号
移入展开我的中心相关操做（我的信息、设置、帐号密码……）

（3）案例

消息/工具

（1）说明

主要展现系统的经常使用工具，包括搜索、消息、注销/退出、帮助等等功能，常以图标或者文字的形式展示；这些功能放置的位置和和帐号信息结合穿插排布在顶部。

（2）交互

根据不一样的功能有对应不一样的交互方式，例如搜索可输入，点击查询搜索结果，注销点击后退出系统返回登陆页面……

（3）案例

内容区

（1）说明

主要分为首页和详情页面，首页或者叫控制面板（dashboard）主要是各种组件（数据、列表、表单等等）相互组合而成，就是将系统最主要的功能优先在首页有个快速展现也做为快捷入口；详情页对应的是各个模块的功能操做页面，具体须要根据不一样的栏目需求来设计。

（内容区的内容和系统需求相关，会在后续章节中对内容区进行总结分析）

（2）案例

OK，那简单介绍了系统界面的几个组成部分，那么咱们如今就是经过这个部分不一样的组合就能够组成各类各样个性化的系统框架样式了。由于主导航栏是最主要的功能模块，因此我又分为两类：左侧导航、顶部导航。

左侧导航：最多见，如今最流行的导航位置设计方案

（1）左侧导航（含标签栏，标签栏同浏览器标签页功能，方便用户打开多个栏目页面进行切换）

（2）左侧导航（主导航整合帐号信息）

（3）左侧导航（导航和内容区同步滚动）

（4）左侧导航（右侧所有是内容，适用于导航、工具较少的状况）

顶部导航

顶部导航经常使用于网站导航的设计，系统中若是主导航的模块较少也能够放在顶部，提升空间利用率。

（1）顶部导航

（2）顶部导航（单独导航栏）

以上是一些系统界面布局样式，可是界面布局不限于这些结构，你能够设计的时候能够模块组件自由搭配，组件间不必定要区分的很明显，组成适合你的项目的系统界面框架。

此次只是介绍了框架的构成和一些简单的案例，教导了你们如何来搭建一个简单的系统界面框架。详细的制做一个首页界面、详细的界面内容区域的功能模块设计还须要更多细节，因此在下一节会介绍各种组件，包括首页的面板和详情页的各种列表、弹窗、内容的各种样式等等，方便你们更好的了解系统原型搭建的方式。

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

内容区分类

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

首页（控制面板）

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

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

信息：展现信息，又能够分为列表信息、详细信息、人员信息、消息等

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

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

人员信息：经常使用于展现帐号信息。

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

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

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

基础表格：只作信息/数据展现

可操做表格，能够对表格进行编辑、删除、新增、排序等操做。

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

图表：数据统计信息的图形化展现，经常使用于对于系统或者模块整体信息的综述展现

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

数据综述：经常使用在界面首屏，展现系统/模块最终要的数据统计信息；

数据图表，以图表的形式展示展现；（图表可参考echart）

个性化，多个图表整合

表单表单：在网页中主要负责数据采集功能，由表单标签、表单域、表单按钮组成

本章介绍：基本表单、向导表单、编辑器。

基本表单，基本的数据输入等操做，经常使用于登陆、设置、信息输入等场景。

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

编辑器，图文编辑器，经常使用于信息发布、回复帖子等场景

总结

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

以前的两篇文章，咱们讲了总体的系统页面结构框架能够怎么搭建，讲了首页的设计思路，如今咱们来说讲详情页（详细的功能、内容页面）能够怎么设计，若是你准备好的话，那咱们能够新的旅程啦。

详情页概述

上一章节，咱们讲到正文内容区域若是是首页的时候该怎么设计，同时简单介绍了一下详情页：详情页通常是查看/操做页面，常以列表、表单、信息详情的形式展示。下面我来来详细的介绍内容详情页的设计思路，首先咱们先要了解下内容区的构成和基本展示形式。

首页（控制面板）详情页结构

内容区构成：

一个基础的详情页面基本上是以两类区域构成的，包括操做按钮区和内容展现区：

其中，内容展现区能够是表单（信息填写、修改……），也能够是图文详情或者数据图表。扩展到出来也能够根据业务需求、页面规划的不一样，扩充出菜单区、查询区等其余功能区域。

各个区域组合布局，根据实际业务需求和场景自由组合设计，常见的按钮区根据用户操做场景的先后顺序会放在顶部或底部，内容区占大部分位置放于正中，其余的区块（菜单区、查询区等）能够放置于内容区左右也能够结合到按钮区域。

展现样式：展现样式也是分红如下主要也是根据展现方式的不一样分为：嵌入式、弹窗式、嵌入式、抽屉式。

【嵌入式】系统最多见的展现方式，直接在右侧展现操做内容。

（1）嵌入式单列

参考案例：框框区域为内容区（详情页）

（2）嵌入式_双列，左右两列的比例可根据功能的须要在设计是进行调整

参考案例：红框区域分为左侧列表区、操做按钮区和右侧内容区；

【弹窗式】以弹窗口的形式展现，可带底部遮罩。

经常使用于单独的功能模块以应用/面板的形式展示，打开后只能够在当前窗口完成全部操做或者退出操做。

（1）弹窗式_有遮罩，弹窗通常不能够放大缩小和移动，引导用户要么在弹窗中完相应的操做，要么就关闭退出该功能对应的详情页弹窗。

参考案例：QQ空间查看图片。

（2）弹窗式_无遮罩：弹窗无底部遮罩，通常能够移动放大缩小，能够同时打开多个窗口，可在多个窗口中切换。(相似于win系统中的文件夹，或者浏览器的标签页、qq对话弹窗）

参考案例：360安全卫士，弹窗展现对应的功能，经常使用于的场景是相似于360将一个个功能模块做为应用进行分类、展现，用户点击后弹出改应用对应的操做页面；

【抽屉式】从右侧展开内容详情，能够算是一种变异的弹窗样式，能够方便用户快速切换须要展现的内容，经常使用于列表和内容的结合。

案例：点击左侧列表，选项对应的内容从系统右侧展开展现，用户能够在左侧列表快速切换右侧展现的内容。

【其余样式】介绍一些比较特殊/复杂的内容详情页，能够是内容区展现信息比较特殊，也能够是内容区包含的功能区块相互组合而成。

案例：微信公众平台编辑页面

基本上掌握上方三类基本样式就能够自由组合成其余复杂样式了。

上面讲了基本的内容结构和基本的几种展示形式，下面根据功能再对内容不一样在对内容样式进行分类介绍。

内容样式

详情页主要应用于次级模块页面、功能页面以及后续系统的全部子页面，如今我更准确的把详情页再分红如下几个大类：列表、表单、图文详情、数据图表。列表是最为常见的内容，包含的操做功能交互也会比较多；表单主要是信息填写/保存/修改操做的功能页；图文详情经常使用于文章（新闻）/文件详情页的展现；最后数据图表是以图表的形式展示系统数据，能够和上一节介绍的控制面板相似，以数据图面板组合成详情页。

【表单】经常使用户采集信息数据，适用于新增、修改、编辑、设置等功能应用场景

表单_信息编辑

表单_邮件编辑（参考网易、qq邮箱）

表单_新增，具体展现那些表单组件和这些组件的布局须要你根据实际的需求进行个性化设计；

【图文详情】主展现展现图文结合的信息内容（能够只有图或者只有文字内容）

图文详情_信息阅读

图文详情_内容+列表（邮件回复）

图文详情_弹窗（无遮罩）

【数据图表】数据图表是比较复杂的场景，由于不一样的业务数据不一样，对应适合的图表也不一样个性化程度较高，这边简单介绍一些参考示例。

（1）数据图表_数据综述+数据详情，比较常见的设计方式，先对总体数据进行综合展现，再展现对应的数据列表信息。

参考案例：微信公众平台用户分析

（2）数据图表_多图结合，多个图表整合，能够根据须要展现数据的优先级进行个性化设计；（相似首页_控制面板的图表多图结合的样式）

【列表】列表是最多见的内容区样式，将模块内容所包含的信息以列表的形式展示

方便用户浏览和操做，主要用户此模块是对数据的编辑操做或者是数据展现；

（1）列表_表格

（2）列表_办件列表，信息较多没法以表格的形式没法展现全部重要信息，因此须要整合信息内容，展现更多信息，操做便捷，但开发难度较大；（参考淘宝订单中心）

（3）列表_信息，展现图文信息列表；

（4）列表_图文列表（卡片式），图文为重要内容，须要突出展现，以卡片为展现样式；

小结

本章主要讲了内容区（详情页）相关的设计结构样式以及功能分类的设计案例，由于篇幅有限，因此没有很详细的针对每种类型的使用场景，功能交互进行详细的说明，请见谅。我所讲的内容也只是一些基础的设计案例，只是给你们作个参考，不少复杂的方案并无介绍，实际设计的时候仍是须要你们根据产品/业务需求个性化的设计。但愿这篇文章能够帮助你们快速入门，给你们一个设计时候能够参考的方式方法。

http://1q779b.axshare.com

经过前三篇内容，咱们了解了系统的结构框架和内容区域的设计思路，基本上已经能够搭建一个完整的网站原型了。那么接下来的这章就主要是介绍一些组件的设计，以便扩充咱们的武器库，让咱们搭建的系统细节上更加完善、展现效果上更加多样化。

弹窗窗口

弹窗是系统经常使用的一种展现内容的方式，在网页、软件、系统、APP都是很是常见的。我以为弹窗更多的是一种容器，用户来盛放内容，这和我上两章提到的内容的“弹窗式”展现样式是一致的。那这边单独将弹窗做为一种组件进行介绍，是由于弹窗做为一种最多见的展示方式，可是在结合到不一样的场景、针对不一样目的会有不少种不一样的弹窗形式，因此这边对弹窗进行了整理和说明。

【弹窗结构】弹窗主要分为弹窗控制区和内容区两个部分组成。

弹窗控制区：展现弹窗对应的内容名称，控制弹窗的变化（放大、缩小、关闭等）；
内容区：展现内容信息，常见为表单、列表、详情等形式，和上章介绍的内容区（详情页）样式基本一致；

弹窗交互

介绍系统中常见的弹窗交互：

（1）弹窗交互-打开方式

居中打开：常规的弹窗是在界面正中间展开；

底部展开：为了避免影响用户目前的操做，常见系统消息、新闻提示等弹窗会在界面右下方打开；

抽屉式：从侧边展开弹窗；

悬浮（位置不固定）：弹窗打开位置不固定，主要是表现了弹窗内容和用户操做内容的联系性；，通常弹窗内信息量较少；

（2）弹窗交互-控制动做

默认大小：窗口的默认尺寸大小，应贴合所要展现的内容进行调整，即宽度/高度不指定，通常有底部遮罩的弹
窗是不能进行移动放大和缩小操做的；

最大化：

最小化：点击作小到标签栏或者有一个最小化悬浮窗口；

拖动：鼠标左键长按窗口顶部控制区域进行拖动，通常能够拖动的弹窗是没有底部遮罩

其余：根据业务需求能够有刷新、上下翻页等功能；

弹窗分类

根据弹窗的不一样功能和使用场景，能够分红如下几种弹窗：

【引导弹窗】主要是用于介绍界面相关信息功能，引导用户操做；
【选择弹窗】主要是进行选择操做，包括人员、图片、项目等；
【任务弹窗】完成某项任务，包含新增/修改、注册、事项流程等；
【提示弹窗】用户提示用户，包括操做确认、信息提示/反馈等；
【内容弹窗】弹窗展现内容信息，主要用户内容查看；

（1）引导弹窗

【样式说明】：经常使用于首页进入系统或者某个功能模块，对当前界面的介绍以及操做引导帮助用户尽快熟悉使用方法。
【适用场景】：新手引导、操做引导、系统介绍…

（2）选择弹窗

【样式说明】：经常使用于进行选择的页面，由于只须要进行一次选择操做因此为保持先后页面的联系，用弹窗展现会更好；
【适用场景】：人员选择、图片选择、操做方式（支付方式）选择、分类（用户类型）选择等；

（3）任务弹窗

【样式说明】：用户完成某些任务，单独用弹窗展现会更高效；
【适用场景】：办事（流程）弹窗、编辑、设置、登陆/注册…

（4）提示弹窗

【样式说明】：此类弹出窗只用于告知用户某些须要强制确认、提示的信息（报错类提醒中，支持查看错误信息）,并须要用户作出相应的决定操做；

【适用场景】：

对页面中一些操做重要度较高的再确认，如是否删除？是否放弃保存？
【提示信息】提示一些说明性质的信息；
【警告信息】系统可预知的客户错误操做提示，错误级别低；
【错误信息】因不可预知的缘由引发的操做失败提示，通常在异常捕获后提示；
【成功信息】用户操做完成并成功后提示。

（5）内容弹窗

和上一章内容详情页设计保持一致，这里就再也不作过多介绍了。

其余组件

下面就介绍下其余经常使用的组件，根据不一样的功能和使用场景咱们能够分为：

【分页】主要用户页码切换，经常使用于列表页面；
【附件】用于上传附件操做；
【信息回复】对内容的评论和信息反馈，消息回复等组件；
【其余】各类数据图表、天气等个性化组件；

分页组件

附件管理

信息回复

其余组件

小结

这章主要是介绍了我本身整理一些系统中经常使用的组件设计案例，由于是我本身的整理和分类，因此其实这些组件还有更多的内容和更加专业的分类方式，并且组件的样式和交互方式其实还有不少不少，每个类型均可以扩展起来详细介绍。这里没有作过多的介绍，只是但愿整理的这些内容对你们的设计有一些启发和指导意义。

后记

基本上整个系统原型快速搭建的方案已经讲完了，这是我去年就编辑好的，后来由于工做缘由本身也忘记了继续更新分享。今年定的一个目标就是要更多的总结和整理本身工做中学习到的内容，才想起来本身原来还有这个分享没有完成。回头来看本身以前的整理仍是有不少欠缺的地方的，从系统框架上本身只整理了一些经常使用的布局方式，还有一些个性化的设计内容能够扩展，不少内容的整理分布布局都有些问题，也有更多更好的设计交互案例没有给你们整理分享，不少内容也是和同事一块儿整理的，没有什么专业性，还存在着不少问题。那今年还会对这篇内容从新进行整理迭代，但愿到时候有更好的内容分享给你们。