详细解析线框图原型和视觉稿的区别
下面是个简单易学的详细解析线框图原型和视觉稿的区别教程，图老师小编详细图解介绍包你轻松学会，喜欢的朋友赶紧get起来吧！
两三年以前，我发现很多搞信息技术的朋友们(非设计师)交付设计时，用着上面列出的词汇。他们以为线框图 (Wireframe)、原型 (Prototype)和视觉稿(Mockup)是一个东西：表达自己创意的线框手绘设计稿。混淆概念便带来麻烦：他们分不清用户体验设计师的作品，常常感到困惑。「这按钮他妈的怎么点不了?」「我不知道这个地方可以按啊!」类似这样的问题在用户体验的项目中屡见不鲜。误把线框图当成原型，有点像建筑里分不清蓝图(指导如何建筑施工的方案)和演示厅。你完全可以试着在演示厅里小住一会(它的妙处就在于能直观传达房间之美)，但你没法舒服地躺在蓝图上;蓝图不过是一张纸罢了。在建筑学上，演示厅和蓝图服务于不同的交流对象：蓝图，即施工方案，详细描述该如何建造建筑演示厅，给未来的居民提供测试和体验的机会演示厅和蓝图的共同之处是，它们都代表着最终的产品，即建筑(房屋)。线框图、原型和视觉稿亦是如此，这些文档都是最终产品的不同展现方式。不管你信不信，我向用户体验设计团队授课的第一件事，就是告诉他们分清这三个概念。因为，这实在太重要了。接下来，让我们详细讨论三者的区别，以后你就懂得在什么样的场合下用什么词汇了。线框图1、什么是线框图?线框图 (Wireframe)是低保真的设计图，当明确表达：内容大纲(什么东西)信息结构(在哪)用户的交互行为描述(怎么操作)线框图不仅仅是无意义的线和框的集合;好吧，虽然看上去是的，囧。你可以把线框图理解为设计图的骨干与核心，它承载着最终产品所有重要的部分。线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员(开发工程师、视觉设计师、文案作者和项目经理)，开辟了一条辅助理解设计的通道。说得再明白点，你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无法一览城市的美感。绘制线框图，重点是「快」。大多数时间请和团队成员沟通，多做思考。审美上的视觉效果则应当尽可能简化。黑白灰是经典用色，你也可以用蓝色代表超链接。如果你在准备线框图时花了大把时间(比如，选择图标、上传图片)，请换个简单的方式(比如，使用占位符：一个画&的图片，再加上合适的描述文字)。我们习惯把线框图称为低保真设计图。切记，好的线框图能像水晶一样，清晰明了地表达设计创意，在成员中无缝传达其思想。2、何时使用线框图线框图常常用来作项目说明。鉴于其静态设计，一次只能通过一张界面演示交互，因此，务必附上说明。(只要有必要，简短描述或附在复杂的技术文档里，都成。)也因为绘制起来快速、简单，它也经常用于非正式场合，比如团队内部交流。要是开发问起一个东西怎么做，回复时不妨附上一张迅速绘制的线框图。线框图难以充当用户测试的材料;倒也能收集些反馈，如果你更关心用户意见，而非测试方法。虽然近些年遭人闲话，但线框图在整个设计过程中发挥着惊人的效果，在复杂项目的初始阶段必不可少。原型1、什么是原型原型(Prototype)，常常和线框图混淆，是中等保真的设计图，代表最终产品，模拟交互设计。原型当允许用户：从界面上，体验内容与交互像最终产品一样，测试主要交互原型应该尽可能模拟最终产品，就算长得不是一模一样(绝对不能是灰色线框设计)。交互则应该精心模块化，尽量在体验上和最终产品保持一致。原型背后的逻辑不要依赖交互形式。减少制作原型的成本，加快开发速度。2、何时使用原型原型常用于做潜在用户测试。在正式介入开发阶段前，以最接近最终产品的形式考量产品可用性。如你所想，原型一般难以成为上好的文档;因为它得让「读者」费一些力气来理解界面。但从另一个角度来看，作为界面，原型的直观和易懂倒使它成为最高效的设计文档。请注意，相对其它交流媒介，原型成本高、费时。我建议绘制原型后，能在接下来的开发阶段复用起来。(唔，你可能得亲自编写 HTML 和样式表代码)对于简单的项目来说，相当好用。(一旦考虑「复用」，必将增加绘制成本，偏离原型的初衷。并不建议复用。译者注)若设计得当，与用户测试相结合，原型是物超所值的。视觉稿1、什么是视觉稿视觉稿(Mockup)是高保真的静态设计图。通常来说，视觉稿就是视觉设计的草稿或终稿。优秀的视觉稿当：表达信息框架，静态演示内容和功能帮助团队成员以视觉的角度审阅项目人们常年分不清什么是视觉稿，什么是线框图，和某些软件公司的名字不无关系。噗~2、何时使用视觉稿如果你想从股东手里获得认可，视觉稿尤其管用;收集用户反馈也相当好使。把它添到设计文档里去吧，绝对是画龙点睛之笔。
来源:/n/5428.html
热门搜索：
标致Onyx混动四驱超跑概念车创意设计图集
高雄122平米工业简约风格公寓设计
开放式布局空间小公寓室内设计
前桥艺术导视系统设计
您可能会发现，经常看到在短视频有人在表演的时候说一些鼓励的话，然后就是双击666，听的您或许摸不清头脑，我就在这里为您解答一下，请给我点赞，让我解答更加有动力。
您是否熟悉我们生活的城市是怎么命名而来的呢？中国城市的命名可是有很深的文化底蕴和历史背景的,你都知道么?我从网上搜集了大量的城市名来源，让您好好的涨涨知识，您准备好了吗？
对于爱美人士来说，美白护肤是不分季节的，即使在冬季，依然需要做好皮肤护理工作。饮食调理是护肤的一项重要措施，那么冬天美白吃什么水果呢?接下来就和我一起来看看了解一下冬季美白吃什么水果好！
产妇顺产以后多久可以洗头发？有很多产妇为了防止自己受寒所以在产后不让自己洗头发，但是又特别难受，这篇文章讲述了产妇顺产以后多长时间可以洗头发，通过这篇文章了解产妇顺产以后多久可以洗头发吧。
每个人都希望自己有职场的道路上一帆风顺，升职加薪是每个工作的愿望。除了认真工作办公室的风水也对自己的职场运势有影响，只有避开那些办公室内水禁忌才能保证自己拥有好的运势，那办公室风水有哪些禁忌呢？
给自己一点时间接受自己，爱自己，趁着下午茶的时间来学习图老师推荐的漂亮的家居灯饰设计吧！过去的都会过去，迎接崭新的开始，释放更美好的自己~
下面图老师小编跟大家分享一个简单易学的浅谈网页设计中的构图教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！
京津冀及周边地区出现持续雾霾天气，很是让孕妈妈们担心。持续的雾霾天气对孕妇产生了很大的影响，那么雾霾天气对孕妇危害有多大？雾霾天气孕妇怎么办？下面的文章详细介绍 了雾霾天气对孕妇的危害，一起来看看吧。
我们知道宝宝刚刚出生的时候口腔里是没有牙齿的，一般孩子在四个月以后慢慢开始出牙，每个孩子的体质不一样，所以出牙的时间也是有所差异的，宝宝出牙的时候身体会出现一些症状，家长们要及时的护理好，下面一起来看看宝宝长牙的症状有哪些。
肚子上的赘肉看上去让人烦恼，尤其是对于想穿裙子的女生来说更是一件郁闷的事情。现在减肥的方法有很多，但是很多人并不知道专门瘦肚子的方法。那么，如何瘦肚子呢？下面就给大家介绍几种减肚子的方法吧。读后有感 - UI设计师必知：线框图、原型和视觉稿
草图，重点在交互的目标上，即业务如何交互完成，是不依赖于平台的，如同设计中的概念模型。这一部分应该是上一层次业务流的具体化，也仅是具体化而已。
针对效果图来说，它叫原型图，但针对草图来说，它是选择了特定平台的界面的，或可叫适配图或选型图，选择适当的组件来承载交互所要传递的数据。
又叫效果图，这是美工所要做的事情，在保证交互需求以及承载数据的组件的选择前提下，如何美观地布局、设计、美化，产生良好的美感用户体验。
以上有否与以下转载文章内容不同之处？
当然，我是通篇拜读过的，好几天过去了，有点忘记了，
以上内容也是结合留下的记忆结合实践总结出来的，
有不妥的话，这个欢迎交流，谢谢。
UI设计大师们常常画漂亮的线框图，原型，视觉稿，超赞，超令人感叹。
但是你分得清这3个概念，它们的用途吗？是否也常常傻傻分不清呐，今天就彻底的了解下它们吧。
前言：本文为译稿 1，对三个常见概念进行了剖析。有删节，部分段落重组。
背景：两三年以前，我发现很多搞信息技术的朋友们（非设计师）交付设计时，用着上面列出的词汇。他们以为线框图 (Wireframe)、原型 (Prototype) 和视觉稿 (Mockup) 是一个东西：表达自己创意的线框手绘设计稿。
混淆概念便带来麻烦：他们分不清用户体验设计师的作品，常常感到困惑。「这按钮他妈的怎么点不了？」「我不知道这个地方可以按啊！」类似这样的问题在用户体验的项目中屡见不鲜。误把线框图当成原型，有点像建筑里分不清蓝图（指导如何建筑施工的方案）和演示厅。你完全可以试着在演示厅里小住一会（它的妙处就在于能直观传达房间之美），但你没法舒服地躺在蓝图上；蓝图不过是一张纸罢了。
在建筑学上，演示厅和蓝图服务于不同的交流对象：
蓝图，即施工方案，详细描述该如何建造建筑演示厅，给未来的居民提供测试和体验的机会
演示厅和蓝图的共同之处是，它们都代表着最终的产品，即建筑（房屋）。线框图、原型和视觉稿亦是如此，这些文档都是最终产品的不同展现方式。
不管你信不信，我向用户体验设计团队授课的第一件事，就是告诉他们分清这三个概念。因为，这实在太重要了。
接下来，让我们详细讨论三者的区别，以后你就懂得在什么样的场合下用什么词汇了。
1、什么是线框图？
线框图 (Wireframe) 是低保真的设计图，当明确表达：
内容大纲（什么东西）信息结构（在哪）用户的交互行为描述（怎么操作）
线框图不仅仅是无意义的线和框的集合；好吧，虽然看上去是的，囧。你可以把线框图理解为设计图的骨干与核心，它承载着最终产品所有重要的部分。
线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员（开发工程师、视觉设计师、文案作者和项目经理），开辟了一条辅助理解设计的通道。说得再明白点，你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无法一览城市的美感。
绘制线框图，重点是「快」。大多数时间请和团队成员沟通，多做思考。审美上的视觉效果则应当尽可能简化。黑白灰是经典用色，你也可以用蓝色代表超链接。如果你在准备线框图时花了大把时间（比如，选择图标、上传图片），请换个简单的方式（比如，使用占位符：一个画&的图片，再加上合适的描述文字）。我们习惯把线框图称为低保真设计图。
切记，好的线框图能像水晶一样，清晰明了地表达设计创意，在成员中无缝传达其思想。
2、何时使用线框图
线框图常常用来作项目说明。鉴于其静态设计，一次只能通过一张界面演示交互，因此，务必附上说明。（只要有必要，简短描述或附在复杂的技术文档里，都成）
也因为绘制起来快速、简单，它也经常用于非正式场合，比如团队内部交流。要是开发问起一个东西怎么做，回复时不妨附上一张迅速绘制的线框图。线框图难以充当用户测试的材料；倒也能收集些反馈，如果你更关心用户意见，而非测试方法。
虽然近些年遭人闲话，但线框图在整个设计过程中发挥着惊人的效果，在复杂项目的初始阶段必不可少。
1、什么是原型
原型 (Prototype) ，常常和线框图混淆，是中等保真的设计图，代表最终产品，模拟交互设计。原型允许用户：
从界面上，体验内容与交互像最终产品一样，测试主要交互
原型应该尽可能模拟最终产品，就算长得不是一模一样（绝对不能是灰色线框设计）。交互则应该精心模块化，尽量在体验上和最终产品保持一致。
原型背后的逻辑不要依赖交互形式。减少制作原型的成本，加快开发速度。
2、何时使用原型
原型常用于做潜在用户测试。在正式介入开发阶段前，以最接近最终产品的形式考量产品可用性。
如你所想，原型一般难以成为上好的文档；因为它得让「读者」费一些力气来理解界面。但从另一个角度来看，作为界面，原型的直观和易懂倒使它成为最高效的设计文档。
请注意，相对其它交流媒介，原型成本高、费时。我建议绘制原型后，能在接下来的开发阶段复用起来。（唔，你可能得亲自编写 HTML 和样式表代码）对于简单的项目来说，相当好用。（一旦考虑「复用」，必将增加绘制成本，偏离原型的初衷。并不建议复用。&&译者注）
若设计得当，与用户测试相结合，原型是物超所值的。
1、什么是视觉稿
视觉稿 (Mockup) 是高保真的静态设计图。通常来说，视觉稿就是视觉设计的草稿或终稿。优秀的视觉稿：
表达信息框架，静态演示内容和功能帮助团队成员以视觉的角度审阅项目
人们常年分不清什么是视觉稿，什么是线框图，和某些软件公司的名字不无关系。噗~
2、何时使用视觉稿
如果你想从股东手里获得认可，视觉稿尤其管用；收集用户反馈也相当好使。
把它添到设计文档里去吧，绝对是画龙点睛之笔。
原文地址：/wireframing-prototyping-mockuping/
译文地址：/blog/2460我怎样做交互
交互设计师到底是需要做什么？
尽管很多谈及交互的书上都已经回答过了：
发现用户需要，建立明确需求
提出设计方案
制作设计原型
用户测试和评估
还是有很多对交互设计有兴趣的朋友会问我这个问题，并希望我能回答得详细，具体到我工作中的每个细节。
其实交互设计需要做什么，会随每个交互设计师的工作内容差异而不同，具体到每个项目也会有区别。
下面分享下我是怎样做交互，方式不一定是最合适，希望大家多指点，共同学习进步。
发现用户需要的方式有很多种，我们可以在用户反馈里收集到许多用户提出的想法，他们希望我们能提供帮助解决问题的产品；我们也可以主动去观察一些生活中的信息，为灵感的迸发做储备。
比如说日程管理项目，有不少用户跟我们的邮箱反应说，他们忙碌的时候会忘记一些重要的事情，比如一些会议或者约会，所以希望网易邮箱能提供一个专业的日程管理功能，能够帮助他们有效的管理和安排每天的日程。
确认了用户的这一需要，我们的产品同事就会组织立项，把用研和设计组的同事呼唤过来一起进行调研，确定我们的目标用户。
用研组会通过问卷调查等方式尽可能多的去收集信息，交互设计师也会参与分析调研，组织会议帮助用研组完善信息，我们会采取一些有趣的方式，比如一堆人在一起头脑风暴，大家回忆各种相关的生活场景，然后把一些关键词记录下来。
这一步我们的目的是要知道：用户想要什么？
通过这些步骤我们提炼出一些最重要的功能需求，接着产品组会整理出需求文档，设计师就位。
通过调研，我们得到了大量数据信息，并建立了明确的需求，下一步就是开始提设计方案。
这个阶段我会做一些概念设计，类似于做实物产品时设计一个水杯，我会描述它说：我要设计一个旅行用的水杯，它能叠成一个小圆盘，喝水的时候只需要把小圆盘的圆心部分往下按，就能变成一个杯子。
互联网产品也是这样，需要赋予它一个概念，例如日程管理：这是一个专业的日程管理功能，通过使用它，我们可以有效的管理自己每天的日程和时间，以提高工作效率，并且不会再错过每个重要的约会！
这些文字并不一定非是交互设计师所总结，但是交互设计师必须要做到对产品心里有数，明确我们要做什么。
同时需要进行的还有初稿设计，在这里我所谓的初稿，并不一定是严格要求中的交互原型，可以是用Axure把主要的页面流程做出来，也可以手绘草图，只要能清晰表达设计构思的，什么样的方式都可以。
制作设计原型，也就是常说的交互稿，区别于做设计方案时的初稿，这份交互稿我会尽可能细致的把流程和具体操作形式表达出来。
考虑到做交互是一个迭代过程，我会在设计稿的首页为设计的产品做一份交互更新日志，记录下交互更新时间、版本名称、更新类型、更新内容、参考需求文档与交互负责人。
这份更新日志的意义在于：
更新时间-便于全程跟踪记录项目，掌握每个时间点
版本名称-便于项目参与人员查找上一版本的交互稿
更新类型-了解每次更新需求的性质
更新内容-清晰呈现每一次更新的内容，并提供一个直接去到更新页面的链接，这样在进行迭代时我们的伙伴不用一页页去寻找更新点
参考需求文档-便于项目参与人员查找对应的需求文档
交互负责人-记录每次迭代的交互负责人，并能方便工作交接
交互稿的制作过程，一般是用Axure做原型，像邮箱这样视觉比较成熟且相对稳定的产品，我会偏向做高保真模型，我们会整理一个控件库，这样能提高制作效率；做一个全新项目时，黑白稿线稿都是可用的方式，如果交互设计师能对大概的视觉效果有把握，也能做得精致些。这些我想大家都很了解，所以不多说了。
之所以把这部分内容提出来单独写一段，是因为之前和很多做交互的朋友讨论过该怎样做好交互说明，大家各有看法，很难找到这部分工作的衡量标准。
交互说明书在整个设计过程中，也许只会占用小部分工作量，但是作用不小，它能帮助我们减少沟通成本，辅助交互稿描述设计理念，表达交互流程，更细致的展现我们的设计。
与做设计稿不同，个人认为，交互说明这部分工作，需要我们更多了解它作说明的对象，即产品经理、视觉设计师、开发人员的需求，从而达到真正的“辅助”效果，而不是盲目凭自己主观去长篇大论，否则我们要为此花费时间，而且这部分工作只能沉积为一堆我们自己欣赏毫无意义的文字。
为此我曾与合作过的各组同事进行沟通，提炼出一些他们对交互说明的需求，不求全面，但求能说明一些问题。
1.交互说明最好是图文并茂（all）
便于阅读和理解。
2.页面跳转的说明（产品&程序）
页面跳转是涉及多个页面关系的操作，产品人员在看交互稿时，会更多去关注多个目的性的任务操作流程，而对页面跳转的记忆是有限的，所以需要页面跳转说明。
3.交互说明能否考虑与产品需求文档结合（产品）
开发文档会涉及产品概念、技术方案、业务执行角色等内容，和交互设计稿有着紧密关联，所以交互说明书与开发文档是可以相互做补充，整理成一份文档，这样也能避免工作内容重复。
4.对交互稿中不明显的交互动作或隐藏的设置项作说明（产品&视觉&页面构架）
细节和动作需要描述清楚，比如说鼠标focus、click的动作，或click后是loading还是跳转，这些平时都是开会上讨论，但是参与项目的人员不一定都能记住，所以会需要在交互说明书里做说明，并需要考虑到页面构架组需要预留适应变化的结构。
5.产品风格定位（视觉）
商务风？休闲风？视觉需要一个准确的产品风格定位。这部分工作不一定是由交互人员来确定，但在产品孕育阶段中，设计稿讨论以及不定时更新的数据调查，会使得产品风格定位渐渐明确，视觉的同事更多是参与设计阶段的工作，这就需要交互人员将这些信息在交互说明中记录下来，以辅助视觉完成。
6.极限状态（前端）
比如一个列表最长和最短显示。
7.异常/出错情况说明（程序）
这一点在交互稿制作和与产品沟通过程中容易被忽略。
有的设计师会疑惑：为什么我做的设计说明书会没人看？我写的很详细了，但是他们还是会问我一堆设计的问题！甚至，问我为什么要做这个文档？
在这些情况面前，设计师应该做些思考，我们所制作的这份说明是否真正解决问题了呢？
一些基本的逻辑判断和文字内容，产品人员已在需求文档中列出且在交互稿中已清晰呈现，例如原型中完整呈现的设置内容，或一个单选复选关系，这些内容我们再花时间去大篇描述，并无太大意义。
所以我的理解是，交互说明并不一定是一份文本，它不该是设计师的舞文弄墨，更不该流于形式做交互设计原型的复制品。
我们可以在交互原型上注释，在图上写说明，或者是在和项目组发邮件时写为邮件内容，当然也可以是word文档，PPT….
总之，我们要做到的是真正解决问题，让交互说明书成为帮助项目中各组成员之间进行有效沟通、辅助理解设计内容从而达到提高项目效率的工具，并在需要的时候被制作。
产品基本功能实现后，我们会做用户测试，设计是很主观的，并且会受各种因素影响，所以我们的产品难免会存在一些意料之外的问题，通过招募用户来使用我们的产品，我们能收集到一些使用场景中发现问题的反馈，并把这些整理成优化点，完善我们的产品。
同时交互设计师也要多用自己的产品，保证上线内容与设计保持一致。
这就是我对自己交互工作的一个相对完整的描述，交互设计师这个头衔我领了不到一年，但是这一年学到了很多。我的感觉是，这是一份不难的工作，因为我自己也是一个用户，我会在使用产品的过程中发现这样那样的问题，所以我也自然而然的想去解决这些问题，并在寻求方法中得到一定的积累；然而，这确实是一份很需要花心思的工作，设计方式自由，但是设计内容需严谨，疏忽了一个问题，就有可能为产品带来极大的负面影响，甚至失去用户的青睐。
要让我们的产品保持良性发展，就要求设计师们不断探索优秀的设计方法。
最后，也希望大家能多分享各自的设计经验，相互学习，让我们的产品体验越来越好！
设计师有技术背景或能多了解设计是如何实现的是一件好事哦