所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

线框图、原型、模型有什么区别?

几年前,我意识到我许多IT行业中非设计师的朋友认为我的设计交付物都属于一种东西,他们无法分辨线框图、原型图和模型这三者的概念,认为只是一种代表创意的线稿展现形式。简化视图的问题在于:他们从来不知道对用户体验设计师的工作应该有什么样的期望,并为此常常感到困惑。例如在UX设计项目中常常会出现以下几个问题:“为什么这是不可点击的?” ,“嗯,我不知道我应该点击这里…” 等等将线框与原型相混淆,就像假设建筑蓝图(拟建建筑物的详细计划)和展示房一样。

把线框图和原型图的概念混淆,就好比把建筑中的设计蓝图(拟定的建筑计划)和建筑的样板间混为一谈一样。尽管用户可以尝试居住在“样板间”来感受未来可能拥有的舒适居住环境,但你不能指望用户能通过建筑设计蓝图感受到舒适的居住环境。

建筑设计蓝图和样板间是建筑中不同的表达方式:

  • 蓝图:用作建筑计划,并应指定应如何建造建筑;
  • 样板间:是为未来的居民提供居住体验。

建筑设计蓝图和设计图它们的共同点就是都代表最终产品 – 实际的建筑房屋。同理线框图、原型图和高保真原型也都是最终产品的表现形式,但三者之间的表现形式、沟通方式、使用目的各有目的。

线框图、原型图和高保真原型始终是我教给用户体验团队成员的第一件事,这对团队而言十分重要。

接下来我们会详细的讨论线框图、原型图和高保真原型的定义和使用场景,以便你能在工作中根据不同的使用场景熟练的运用。

目录
1.线框图
2.原型
3.模型
4.总结

 

1.线框图

1.1.线框图的定义

线框图是设计的低保真表示形态,它应该清楚的表示以下3点:

  • a.核心内容是什么(告诉用户这是什么)
  • b.清晰的信息结构(告诉用户自己在哪里)
  • c.描述界面的基本交互操作和可视化的内容(告诉用户如何操作)

线框图是设计的基础,虽然在形式上看起来都是一样的灰色的几何图形,但却代表着最终产品的每个重要部分的表示。


 
“表示
(代表性)“在这里是一个关键术语,它能够帮你找到一个合适的保真度。在绘制线框图的时候你不能添加过多的细节,并且不能忽视线框图中任何重要的部分。你正在为整个项目的以及与你合作的人
(其中包括开发人员、设计师、文案、项目经理等……)设置行为路径,他们的工作需要你精心打造的线框图。这就好比你在创建一座城市,虽然每条街道都会出现在地图上,但却被大大简化了,你能清晰的感受城市中每一座建筑,但你却无法感知它的美丽。线框图的创建应该是快速的,把节省的时间更多的花在产品思考和团队沟通上。线框图的绘制美观大方的即可,尽量使用黑、白、灰三色,制定链接可以使用蓝色。为了节省时间我们可以简化页面中各模块的表达形式,例如使用占位符。我们倾向于把线框图作为低保真的交付成果。切记 – 精心设计的线框图以清晰的方式表达信息,为整个团队制定方向。
  

1.2.何时使用线框图

线框图作为我们常用项目文档,通常是静态的,所以需要通过书面文档来解释在特定时间点与各个接口的交互。(文档包括:从简短的交互注释到复杂的技术文档)

当然也不用每次都需要撰写需求文档那么正式。线框图形式简单、创建快速,在内部沟通的时候可以通过清晰的草图来沟通需求。例如开发人员项目中某部分存在疑问,你可以通过线框图快速提供答案。

PS:UXPin是一家具有非常快速的开发周期的初创公司(每两天发布一次)。我们使用线框快速可视化任务(甚至很小的任务!)。它消除了误会,而且确实很便宜。

线框图很难用作测试材料,它在项目中能够灵活、快速的收集研究反馈,但无法去做详细的研究分析。

放置在整个设计故事背景下的线框图非常有效,尽管还存在一些缺点,但作为复杂项目的初期阶段,它们有着不可或缺的作用。

 

2.原型

2.1.什么是原型

原型图通常与线框混淆,是最终产品的中高保真表示形式,它模拟用户界面交互。它应允许用户:

  • a.能够体验与界面内容之间的交互
  • b.接近于最终产品的样式来测试页面内主要交互流程

原型可以模拟用户与界面的最终急交互,在页面精细程度上远超线框图,接近于设计稿。在建立交互模型的时候要谨慎处理,保证原型与最终上线产品在交互上的一致性。此时可以省去技术(接口和后端)开发成本,降低原型制作的时间成本。

 

2.2.何时使用原型


  
原型在用户测试中发挥了巨大的作用,在开发之前可以检查接口的可用性。原型需要用户付出一定的“成本”去理解页面,其次原型与界面在形式有极高的相似性。值得一提的是原型设计相对于线框图成本更高,我建议可以开发一些常用的组件
(这意味着你需要编写一些 HTML、CSS,可能还有您自己的代码),它们在一些相对简单的项目能够快速复用。正确的将原型设计与用户测试相结合,产品最终的收益将会与投入成正比。 
  
 

3.模型

3.1.什么是模型

模型是高保真、静态的设计,模型可以是草图也可以实际完成的设计。模型符合特点:

  • a.明确的表示信息结构;可视化的内容;能够以静态的方式演示基本功能
  • b.鼓励人们查看实际项目的视觉

由于某些软件公司的产品名称,往往导致用户把模型与线框图的概念混淆。

 

3.2.何时使用模型


如果你的产品正处于寻找投资的阶段,模型可以帮你更快的获得投资者青睐。由于自身的视觉特性,比低保真模型更具说服力,并且比创建原型更加便捷,并且能够灵活的收集反馈。如果在提案中放入模型设计,让你的提案看起来更加专业。
 
 


 
 
原文地址:
designmodo

译文地址:
海盐社(公众号)
作者:Marcin Treder
译者:姜正


 

本页地址:https://www.uime.cn/29219.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?