Demo这个大家有听说过吧。蒙特微网站建设给大家分享一下微网站建设微网站Demo可视化工具。什么是Demo?Demo是Demonstration的缩写，表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含义更接近与维基百科中的这个定义：一种原型，主要用来展示想法、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记者甚至于潜在的用户展示其选择方法的可行性。在视觉、交互和内容的保真程度上有着高保真和低保真的区分，所以本文的Demo就是指在这三个纬度(视觉、交互、内容)保真程度都较高的原型。
而对于微网站建设Demo往往用在以下几个场合和对象：
新产品 / 功能的演示-投资者、老板、合伙人
用户研究/市场调研-研究员、潜在目标用户
可用性测试-真实用户
交互 / 设计走查-设计师、产品经理、专家
什么是“更好”的Demo：
核心功能完整，主要任务流足够深度
交互保真程度高，操作的体验感真实
根据场合与目的有适当的视觉细节
避免制作过程“过于费工”或“效率底下”
二、工具与步骤
设计师们特别是交互设计师往往需要承担制作Demo的工作，而这个过程从上涉及到产品想法和主要功能、信息架构和界面的组织，甚至向下涉及到视觉风格和互动反馈等各个环节;打交道的人可能包括了产品经理(提供原始的产品概念，用户需求分析或者是功能完整的产品文档)，视觉设计师(提供UI风格和设计稿)，用户研究员(提出测试用例或者研究需求)。
所以，完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多，涉及到工具也非常丰富。工具的意义正是帮助我们在工作中提高效率，提升表现效果，市面上一些较典型的工具根据其擅长的环节，可以做如下简单的分类和介绍：
思路整理
原型绘制
界面元素
互动与反馈
移动展示
其中前三部分是广大设计师熟知并且常用的一些工具，而随着移动互联网的大潮，越来越多的工作需要我们展示移动设备上的产品和功能。于是，本文更多笔墨将针对移动Demo的制作和展示上的有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。
2.1 思路整理
在制作Demo时，我们并不是要做一个高大全全的东西出来，一个是没必要，另一个理由是不划算。基本上只要满足在展示或者演示的过程中“不露破绽”即可，所以最开始并不必急着去搭建产品的架构或者界面，而是要围绕着展示目标和形式，并且充分考虑到谁将来用这个Demo，来规划整体的思路——Demo的“剧本”。
思维管理软件：MindManager、Mindjet。也叫思维导图或者心智图，既可以用在放射性思考的展开过程，也可以用在整理各级主题的相互关系，最快可以整理并可视化出一个抽象的概念或者过程，下图就是一个简单的Mindjet的输出物例子。利用思维管理软件，就能将Demo里要展示的产品主要功能抽丝剥茧列清楚层级关系，并且安排好主次关系。
Storyboard：故事板，也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作前期，下图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于“展示”而非“使用”，所以可以借助storyboard的方法将产品核心使用场景下的主要功能用任务的形式在时间线上做一个规划和梳理。在交互展示性的Demo中，storyboard的作用就更加强大了，通过对场景和情节的引入，往往会使整个产品或服务看起来更有说服力。
2.2 原型绘制
原型绘制算是基本功，根据不同的年代、不同的习惯和不同的机器，最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常为大家使用和熟知了。事实上本人和周围更流行的工具是Axure(Win、Mac系统)和OmniGraffle(Mac系统)，丰富强大的基础绘图功能，丰富的控件模版库，输出物简洁美观，都使得工作效率大大提高。下图是OmniGraffle的软件界面，有兴趣的可以下载试用版哦，Axure，OmniGraffle。
2.3 界面元素
这里的界面元素指的是两个方面，一个是要决定视觉风格上的各种元素在Demo体现的程度，颜色、质感、字体、图片等等，就是我们常常说的视觉设计(Visual Design);另一个方面就是界面上内容，比如一些用户提供内容的App，或者一些带有SNS特征的App，可能每个用户的界面呈现都会很不一样，这个时候更加要关注在Demo中要呈现那些内容和故事。
在Demo界面中呈现的内容都应该更加贴近于软件或服务最终呈现的效果。善用产品的Persona，结合各个功能的主要使用场景，在这些抽象出的“目标用户”的角度上来想象和模拟这些可能会个性化的界面内容(头像、签名、日志、聊天对话等等)。是不是很像导演呢，人物角色在场景中经历并演绎着使用产品或者服务的故事，企图让观众更加身临其境或者感同身受!
最常使用视觉软件就是Adobe家族的几兄弟了，Photoshop(风格材质制作，图层样式等效果的合成等)、Illustrator(图标等矢量图形绘制)、InDesign(页面排版)基本能满足绝大部分的需求。当然也有大量针对不同的视觉设计细节流程比如图标设计、字体设计、取色配色、切图、预览、图片格式转换等等开发的各种软件、网站和插件等工具。实际工作中需要各种软件中切换、各种流程上的合作，又着实是另一门大学问了!
2.4 互动与反馈
这基本上算是整个Demo制作的精髓部分了，有了这部分的工作，你的静态页面将有如注入生命一样动起来!本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具和技巧。
2.4.1 准备图片素材
在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo的话，需要Demo中涉及到的所有功能的视觉元素的图片：界面整体效果图、各控件切图、各层次的界面内容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步骤就是炒菜中的切菜备料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me(目前仅支持CS6)，Photoshop CC也有类似的功能。
2.4.2 添加跳转关系
根据展示的思路(Mindjet)或者脚本(Storyboard)的产出物，我们已经清晰的知道Demo的展示逻辑和任务流程，即已经定义好了用户/观众的交互路径，这时候只需要将页面元素拼装成Demo中会出现的页面，在这些用来交互的控件上面添加跳转关系就可以了。
身边最为常用的添加互动的软件是Axure，添加完并导出之后生成一个装着HTML文件的文件夹。Axure的好处就是内置了非常丰富的网站交互模式和鼠标事件。基本上网站上有的Click、Hover等操作都有，对应页面间的跳转、打开新页面等反馈也非常丰富。
2.5 移动展示
Demo的最终目的是秀出来，不知道你是否发现传统PC软件(Axure和网页三剑客Flash、Fireworks和Dreamware)制作的Demo在移动设备上的展示总是很奇怪或者蹩脚。原因很好理解，这些软件都是基于网页产品的原型Demo工具，生成的可交互文件格式为HTML或者是swf，很显然与App在手机上的运行机制和所受限制完全不同。
所以，如何展示基本上取决于你用哪个软件制作Demo，如果用Axure这类的软件做出的HTML文件夹，请参考2.4.2中的Step 2部分;如果用的是Briefs制作的Demo，则可以直接使用配套的iPhone App Briefscase来打开和使用这个Demo;如果你用了flinto来制作Demo，则在网站上分享这个链接到邮箱，然后在邮箱中就可以“安装”Demo到iPhone桌面上了;再则如果高端一点用的是Xcode做的Demo，连上手机或平板直接发布成一个测试App，就可以在各种iOS移动设备上使用了。
产品经理必知的微网站Demo可视化工具蒙特微网站建设分享的如何?如果您想了解更多微网站相关资讯，请继续关注蒙特官网。蒙特微网站建设15年的经验和技术，我们的努力您怎么能可以看不到呢?15158184365蒙特人等着您!
Demo这个大家有听说过吧。蒙特微网站建设给大家分享一下微网站建设微网站Demo可视化工具。什么是Demo?Demo是Demonstration的缩写，表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含义更接近与维基百科中的这个定义：一种原型，主要用来展示想法、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记者甚至于潜在的用户展示其选择方法的可行性。在视觉、交互和内容的保真程度上有着高保真和低保真的区分，所以本文的Demo就是指在这三个纬度(视觉、交互、内容)保真程度都较高的原型。
而对于微网站建设Demo往往用在以下几个场合和对象：
新产品 / 功能的演示-投资者、老板、合伙人
用户研究/市场调研-研究员、潜在目标用户
可用性测试-真实用户
交互 / 设计走查-设计师、产品经理、专家
什么是“更好”的Demo：
核心功能完整，主要任务流足够深度
交互保真程度高，操作的体验感真实
根据场合与目的有适当的视觉细节
避免制作过程“过于费工”或“效率底下”
二、工具与步骤
设计师们特别是交互设计师往往需要承担制作Demo的工作，而这个过程从上涉及到产品想法和主要功能、信息架构和界面的组织，甚至向下涉及到视觉风格和互动反馈等各个环节;打交道的人可能包括了产品经理(提供原始的产品概念，用户需求分析或者是功能完整的产品文档)，视觉设计师(提供UI风格和设计稿)，用户研究员(提出测试用例或者研究需求)。
所以，完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多，涉及到工具也非常丰富。工具的意义正是帮助我们在工作中提高效率，提升表现效果，市面上一些较典型的工具根据其擅长的环节，可以做如下简单的分类和介绍：
思路整理
原型绘制
界面元素
互动与反馈
移动展示
其中前三部分是广大设计师熟知并且常用的一些工具，而随着移动互联网的大潮，越来越多的工作需要我们展示移动设备上的产品和功能。于是，本文更多笔墨将针对移动Demo的制作和展示上的有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。
2.1 思路整理
在制作Demo时，我们并不是要做一个高大全全的东西出来，一个是没必要，另一个理由是不划算。基本上只要满足在展示或者演示的过程中“不露破绽”即可，所以最开始并不必急着去搭建产品的架构或者界面，而是要围绕着展示目标和形式，并且充分考虑到谁将来用这个Demo，来规划整体的思路——Demo的“剧本”。
思维管理软件：MindManager、Mindjet。也叫思维导图或者心智图，既可以用在放射性思考的展开过程，也可以用在整理各级主题的相互关系，最快可以整理并可视化出一个抽象的概念或者过程，下图就是一个简单的Mindjet的输出物例子。利用思维管理软件，就能将Demo里要展示的产品主要功能抽丝剥茧列清楚层级关系，并且安排好主次关系。
Storyboard：故事板，也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作前期，下图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于“展示”而非“使用”，所以可以借助storyboard的方法将产品核心使用场景下的主要功能用任务的形式在时间线上做一个规划和梳理。在交互展示性的Demo中，storyboard的作用就更加强大了，通过对场景和情节的引入，往往会使整个产品或服务看起来更有说服力。
2.2 原型绘制
原型绘制算是基本功，根据不同的年代、不同的习惯和不同的机器，最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常为大家使用和熟知了。事实上本人和周围更流行的工具是Axure(Win、Mac系统)和OmniGraffle(Mac系统)，丰富强大的基础绘图功能，丰富的控件模版库，输出物简洁美观，都使得工作效率大大提高。下图是OmniGraffle的软件界面，有兴趣的可以下载试用版哦，Axure，OmniGraffle。
2.3 界面元素
这里的界面元素指的是两个方面，一个是要决定视觉风格上的各种元素在Demo体现的程度，颜色、质感、字体、图片等等，就是我们常常说的视觉设计(Visual Design);另一个方面就是界面上内容，比如一些用户提供内容的App，或者一些带有SNS特征的App，可能每个用户的界面呈现都会很不一样，这个时候更加要关注在Demo中要呈现那些内容和故事。
在Demo界面中呈现的内容都应该更加贴近于软件或服务最终呈现的效果。善用产品的Persona，结合各个功能的主要使用场景，在这些抽象出的“目标用户”的角度上来想象和模拟这些可能会个性化的界面内容(头像、签名、日志、聊天对话等等)。是不是很像导演呢，人物角色在场景中经历并演绎着使用产品或者服务的故事，企图让观众更加身临其境或者感同身受!
最常使用视觉软件就是Adobe家族的几兄弟了，Photoshop(风格材质制作，图层样式等效果的合成等)、Illustrator(图标等矢量图形绘制)、InDesign(页面排版)基本能满足绝大部分的需求。当然也有大量针对不同的视觉设计细节流程比如图标设计、字体设计、取色配色、切图、预览、图片格式转换等等开发的各种软件、网站和插件等工具。实际工作中需要各种软件中切换、各种流程上的合作，又着实是另一门大学问了!
2.4 互动与反馈
这基本上算是整个Demo制作的精髓部分了，有了这部分的工作，你的静态页面将有如注入生命一样动起来!本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具和技巧。
2.4.1 准备图片素材
在高保真原型制作中，使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo的话，需要Demo中涉及到的所有功能的视觉元素的图片：界面整体效果图、各控件切图、各层次的界面内容的文本或图片等等。这时候需要我们自己在psd的源文件里面切出所有的图片素材，这个步骤就是炒菜中的切菜备料。这里介绍一个很好用便捷的免费Photoshop切图插件Cut&Slice me(目前仅支持CS6)，Photoshop CC也有类似的功能。
2.4.2 添加跳转关系
根据展示的思路(Mindjet)或者脚本(Storyboard)的产出物，我们已经清晰的知道Demo的展示逻辑和任务流程，即已经定义好了用户/观众的交互路径，这时候只需要将页面元素拼装成Demo中会出现的页面，在这些用来交互的控件上面添加跳转关系就可以了。
身边最为常用的添加互动的软件是Axure，添加完并导出之后生成一个装着HTML文件的文件夹。Axure的好处就是内置了非常丰富的网站交互模式和鼠标事件。基本上网站上有的Click、Hover等操作都有，对应页面间的跳转、打开新页面等反馈也非常丰富。
2.5 移动展示
Demo的最终目的是秀出来，不知道你是否发现传统PC软件(Axure和网页三剑客Flash、Fireworks和Dreamware)制作的Demo在移动设备上的展示总是很奇怪或者蹩脚。原因很好理解，这些软件都是基于网页产品的原型Demo工具，生成的可交互文件格式为HTML或者是swf，很显然与App在手机上的运行机制和所受限制完全不同。
所以，如何展示基本上取决于你用哪个软件制作Demo，如果用Axure这类的软件做出的HTML文件夹，请参考2.4.2中的Step 2部分;如果用的是Briefs制作的Demo，则可以直接使用配套的iPhone App Briefscase来打开和使用这个Demo;如果你用了flinto来制作Demo，则在网站上分享这个链接到邮箱，然后在邮箱中就可以“安装”Demo到iPhone桌面上了;再则如果高端一点用的是Xcode做的Demo，连上手机或平板直接发布成一个测试App，就可以在各种iOS移动设备上使用了。
产品经理必知的微网站Demo可视化工具蒙特微网站建设分享的如何?如果您想了解更多微网站相关资讯，请继续关注蒙特官网。蒙特微网站建设15年的经验和技术，我们的努力您怎么能可以看不到呢?15158184365蒙特人等着您!
