Answers:
一个线框是关于功能。它可以是一个非常简单的草图,可以演示您可以在设计中执行哪些操作。例如,网站的线框将显示导航,主按钮,列,不同元素的位置。您可以将其视为网站的蓝图。
一个样机是该产品将是什么样子,在这种情况下,真实的表现:一个网站。最终结果可能看起来完全像样机,或者是版本修订后的变体。有些人喜欢使用图形软件来绘制模型,而另一些人则直接在HTML / CSS中完成。
我将Balsamiq用于线框,将Photoshop / Illustrator或HTML + CSS(取决于复杂性)用于模型。
线框示例:
这是Marcin Treder的文章的简短摘要:
线框
线框是设计的低保真度表示。它应该清楚地显示:
•信息的结构(在哪里?)
•用户的描述和基本可视化–界面交互(如何?)
小样
线框用于定义框架,信息层次结构,演示工作流程,提供有关屏幕上内容的详细信息以及有关组件工作方式的说明(注释)。根据应用程序或站点的复杂性,线框应建立在另一个可交付的需求之上;过程模型。线框可用于从客户那里得出需求,并最终与客户确认需求。线框是站点或应用程序结构的可视模型。它们没有定义将要使用的字体,填充,颜色,样式等。它们没有缩放比例,并且没有色调或渐变。所有这些都需要与客户沟通,以便他们了解线框可交付成果以及其他需求可交付成果的过程和上下文。
典型的模型是在Photoshop中创建的,虽然它是基于已确认线框可交付成果的结构或框架的,但它是具有不同的计划和批准流程的不同的交付品。模拟或装饰,定义界面的视觉样式或色调。一旦被接受,模型将转化为许多其他要求或工作产品,例如CSS代码,样式指南,图形资产等。
线框永远都不是模型。实物模型可以被用来为线框但这有可能需要和显著影响您的预算的任何修订的影响。
资料来源:在开发网站和应用程序的企业环境中担任通讯设计师,UX主管,业务分析师15年。还有心爱的BABOK
我尚未对Dave Kaye的回应发表评论,所以我不得不直接回应。与Rachuru出色的回答相比,他的回答非常值得一提。
在解释现代用语时,外行人的解释应该是/应该是;
实际的术语起源于80年代。那时,您没有产生实时图像的计算能力,但可以实时观察屏幕上漂浮的图形“线框”。适当的“演示”需要通宵渲染等。
在这种情况下,“线框”代表骨架的“设计”,并且通过良好的迭代设计过程,人们应该从线框生成模型,获取反馈并将其传递回去以改进线框设计。
不幸的是,如今,有许多可供客户使用的软件,使他们能够设计出不使用程序员可以直接使用的东西的模型。通常,他们的设计是由其他人建立的,因此,模型可以私下进行扩充,而不是被带回程序员以考虑大型设计。
我认为这实际上是Dave关于提及的礼貌一点:-)
基思
根据我的知识,样机屏幕是UI外观的最终代表。什么是正常流量,什么是替代流量。我认为这可以是大多数以HTML和CSS创建的Web原型。然后,我们主要在HLD阶段进行展示并获得客户的认可。
作为比较的线框更像流程图,那里有一个概述。如果不代表一些详细说明,例如单击事件,更改事件和类似事件会发生什么。它们主要由SA / BA完成,而模型则由设计师/开发人员完成。越来越多的人将技术规范附加到该特定UI所涉及的线框(如DB)上。
但这又取决于项目。在我们的案例中,线框是真理的源头。
我认为这是他们之间的差异
线框
当您打算设计移动应用程序或Web应用程序时,首先需要草绘每个页面的外观。仅基于业务概念,设计人员才能定义应用程序流程和设计初稿,该草图具有其外观,草图,按钮,字段等的草图。这就是线框意味着。
样机
样机更生动。它们在视觉上更具吸引力,具有颜色,字体,主题,按钮,徽标等。在此阶段,在设计中指定字段,注释,字体类型,导航菜单等的标签。它精确地表示了移动应用程序或网页的外观。
您可以在这篇内容丰富的文章中找到线框和模型之间的详细比较:线框,模型和原型之间的区别