线框和模型之间有什么区别?


44

我想知道线框和样机之间的区别。我希望对区别有一个简单的了解,或者明确地知道两者是相同的。

我用谷歌搜索,但是我不明白到底有什么区别,如果有人可以向我简要解释一下,我将不胜感激。

Answers:


51

一个线框是关于功能。它可以是一个非常简单的草图,可以演示您可以在设计中执行哪些操作。例如,网站的线框将显示导航,主按钮,列,不同元素的位置。您可以将其视为网站的蓝图。

一个样机是该产品将是什么样子,在这种情况下,真实的表现:一个网站。最终结果可能看起来完全像样机,或者是版本修订后的变体。有些人喜欢使用图形软件来绘制模型,而另一些人则直接在HTML / CSS中完成。

我将Balsamiq用于线框,将Photoshop / Illustrator或HTML + CSS(取决于复杂性)用于模型。

线框示例:

线框示例


3
为了进行比较,这是该站点设计的早期样机示例,例如,经过讨论,此处的大多数内容保持不变,但徽标和绿色阴影保持不变。
user56reinstatemonica8

有趣。在偶然发现这个问题之前,我从未听说过线框。我坚信,一个实体模型就是您对线框的描述。我的教授错在哪里,或者这是一个本地化问题(我来自德国)。
安德烈Stannek

17

线框是基本形状或线,仅用于指定位置和/或尺寸。任何线框的目标都是将元素“适合”到布局中,而不是指示元素在最终设计中实际上如何出现,仅显示元素将位于的位置。

样机建立在线框的顶部,并进一步显示了设计的整体外观方面,包括类型选择,颜色选择等。模拟的目的是尽可能接近地显示所有最终外观的呈现方式。


11

我支持@Yisela的详细回复,并补充在以下演示文稿中暴露的这一愿景 产品设计阶段


6
我喜欢视觉答案,但是球的大小代表什么吗?我认为原型的范围比线框和模型的范围更大
sivi

8

这是Marcin Treder文章的简短摘要:

线框

线框是设计的低保真度表示。它应该清楚地显示:

  1. •主要内容组(什么?)
  2. •信息的结构(在哪里?)

  3. •用户的描述和基本可视化–界面交互(如何?)

  4. 将它们视为设计的主干,并记住线框应该包含最终产品的每个重要部分的表示。

小样

  1. 样机是中高保真的静态设计表示。样机通常是视觉设计草图
  2. 表示信息的结构,可视化内容并以静态方式演示基本功能
  3. 鼓励人们实际审查项目的视觉效果

4

线框用于定义框架,信息层次结构,演示工作流程,提供有关屏幕上内容的详细信息以及有关组件工作方式的说明(注释)。根据应用程序或站点的复杂性,线框应建立在另一个可交付的需求之上;过程模型。线框可用于从客户那里得出需求,并最终与客户确认需求。线框是站点或应用程序结构的可视模型。它们没有定义将要使用的字体,填充,颜色,样式等。它们没有缩放比例,并且没有色调或渐变。所有这些都需要与客户沟通,以便他们了解线框可交付成果以及其他需求可交付成果的过程和上下文。

典型的模型是在Photoshop中创建的,虽然它是基于已确认线框可交付成果的结构或框架的,但它是具有不同的计划和批准流程的不同的交付品。模拟或装饰,定义界面的视觉样式或色调。一旦被接受,模型将转化为许多其他要求或工作产品,例如CSS代码,样式指南,图形资产等。

线框永远都不是模型。实物模型可以被用来为线框但这有可能需要和显著影响您的预算的任何修订的影响。

资料来源:在开发网站和应用程序的企业环境中担任通讯设计师,UX主管,业务分析师15年。还有心爱的BABOK


您好,欢迎来到GD.SE!如果您对网站的运作方式有任何疑问,请访问帮助中心,或者在您的信誉达到20岁之后随时通过“ 平面设计聊天”对我们中的一个进行ping操作。
Vicki

3

我尚未对Dave Kaye的回应发表评论,所以我不得不直接回应。与Rachuru出色的回答相比,他的回答非常值得一提。

在解释现代用语时,外行人的解释应该是/应该是;

  1. 线框是“设计”
  2. 样机是“渲染的演示”

实际的术语起源于80年代。那时,您没有产生实时图像的计算能力,但可以实时观察屏幕上漂浮的图形“线框”。适当的“演示”需要通宵渲染等。

在这种情况下,“线框”代表骨架的“设计”,并且通过良好的迭代设计过程,人们应该从线框生成模型,获取反馈并将其传递回去以改进线框设计。

不幸的是,如今,有许多可供客户使用的软件,使他们能够设计出不使用程序员可以直接使用的东西的模型。通常,他们的设计是由其他人建立的,因此,模型可以私下进行扩充,而不是被带回程序员以考虑大型设计。

我认为这实际上是Dave关于提及的礼貌一点:-)

基思


2

简单地说:

线框:骨架/结构

样机:皮肤/视觉方面

正如某些人指出的那样,如今,线框变得越来越重要,而实体模型却融合到了原型中。


1

必须要补充一点人们尚未提出的要点...这些答案都给出了不错的技术描述,但是在工作环境中,差异并不总是那么明显。一些公司可能会向模型中添加功能,而另一些公司可能会对线框提出高级设计要求。我要谨慎地回答“应该”是什么的答案,因为您去的第一家公司可能会做的事情都不是其中之一!


1

根据我的知识,样机屏幕是UI外观的最终代表。什么是正常流量,什么是替代流量。我认为这可以是大多数以HTML和CSS创建的Web原型。然后,我们主要在HLD阶段进行展示并获得客户的认可。

作为比较的线框更像流程图,那里有一个概述。如果不代表一些详细说明,例如单击事件,更改事件和类似事件会发生什么。它们主要由SA / BA完成,而模型则由设计师/开发人员完成。越来越多的人将技术规范附加到该特定UI所涉及的线框(如DB)上。

但这又取决于项目。在我们的案例中,线框是真理的源头。

我认为这是他们之间的差异


1

线框可以是模型。样机可以视为线框。尽管它们有时是分开的事物(如其他人所说的),但它们常常不是分开的事物。

一次,人们可能会考虑Visio将创建的线框。样机将是PhotoShop所创建的。

但是今天,有了我们拥有的一系列工具,它们通常是相同的实际文档。最初,它们可能以线框(纯粹是布局和功能)开始,但是随着时间的流逝,它们变得越来越详细,以至于可以将它们视为一个模型。而且,如果使用交互式工具(例如Axure),则在某个时候可以将其视为原型。

因此,这是一个重叠很多的频谱。


0

线框

当您打算设计移动应用程序或Web应用程序时,首先需要草绘每个页面的外观。仅基于业务概念,设计人员才能定义应用程序流程和设计初稿,该草图具有其外观,草图,按钮,字段等的草图。这就是线框意味着。

样机

样机更生动。它们在视觉上更具吸引力,具有颜色,字体,主题,按钮,徽标等。在此阶段,在设计中指定字段,注释,字体类型,导航菜单等的标签。它精确地表示了移动应用程序或网页的外观。

您可以在这篇内容丰富的文章中找到线框和模型之间的详细比较:线框,模型和原型之间的区别

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.