it-swarm.cn

PSD样机与HTML样机的优缺点

我最近读了一些文章( (thisthis one )),这些文章使我对HTML样机望而却步,而与通常的PSD样机相反。

他们在文章中引用了某些优点:

  • 更改快得多(包括更改颜色,并在一定程度上更改了字体)。
  • 当您以HTML格式布置页面时,就是向客户展示了与最终产品看起来更接近的东西。
  • 他们可以通过更改窗口的大小来查看液体布局的效果。

缺点:

  • 并非所有的视觉设计师都可以用HTML创建模型。这将是一个两个人的任务。 HTML人员和Photoshop人员。

你们认为这两种方法的利弊是什么?

24
milesmeow

如果您要构建网站或应用程序,则HTML样机要优越得多,因为您要以尽可能接近最终产品的格式设计样机。这使您可以更轻松地设定期望,将您限制在最终产品中所能提供的范围内,并提供更大的灵活性。

这种约定逐渐被称为“浏览器中的设计”。浏览器中的设计本质上规避了瀑布方法。 Photoshop样机在视觉设计师和交互/ UX设计师之间引入了障碍:可以在Photoshop中工作的人位于遥远的地方,完全按照视觉保真度进行思考,而无需考虑最终产品和浏览器的附带约束。一旦Photoshop样机准备就绪,它将“扔给” UX团队以进入下一阶段。这不会促进迭代的,面向反馈的过程。

几个月前,我写了 一篇博客文章 关于这种哲学,我们一直在构建原型工具时使用它。以下是我在其中引用的一些有用文章(包括您链接到的梅根·费舍尔的文章):

其他设计师和开发人员也同意他的观点:

  • 37signals的 为什么要跳过Photoshop 解释了它们的过程:Photoshop原型不是交互式的;他们不会让您对应用程序的流程有任何感觉;他们鼓励您过早地关注细节。
  • 梅根·费舍尔(Meagan Fisher)在24ways.org上发表的文章 在标记中制作模型 详细讨论了克拉克的原理,并解释了从HTML结构开始如何使设计人员快速迭代多个页面布局。
  • Design Shack的这些 在浏览器中进行设计的12条技巧 也提供了一些很好的见解。
18
Rahul

这是一个保真问题。

问题在于,根据您所关注的内容,两个文档的保真度都高于另一个。

HTML原型确实是真正模拟甚至中等复杂度的任何交互的唯一方法。根本没有办法完全记录PSD文件中的交互设计。

相反,如果您处于不断调整/改进/迭代视觉设计的环境中,则PSD可能是处理视觉设计元素的更好的“记录文档”。

最后,我不认为这取决于PSD与HTML。在项目和团队成员的基础上,根据需求的具体情况,您都需要不同的用量。

13
DA01

使用HTML模型的潜在缺陷是,客户端可能会认为您已经完成了应用程序-即使您已经告诉他们它是什么。

认真地说,我认识的人-客户和经理-看到使用通常用于构建实际产品的工具制作的样机时,都认为您已经完成了大部分工作,并惊讶地指出要再花6个小时才能完成。个星期(或长短)才能真正完成工作。

将样机删除一个步骤可能有助于消除这种误解。

但是,尽管如此,动态样机将使您和客户端对系统如何工作以及如何浏览应用程序有更好的了解。

7
ChrisF

准备交互式模型不是可视设计器的工作,而是I/UX设计器的工作。没错-他们通常是一模一样的,主要是由于预算原因,但是他们的工作却大不相同。

您的问题实际上可以改写为静态与动态实体模型。

在我看来,动态模型总是几乎优于静态模型:

我认为主要原因是可以将它们用于准确的可用性测试-想象您正在做的事情与实际进行的事情大不相同,意识到所花费的时间,点击量,移动量等。因此,它提供了系统中流动的真实感觉。

但是,没有什么是没有代价的-创建动态模型通常需要大量时间。此外,它为客户带来了更高的期望-如果您按下一个按钮并且在系统中执行了某些操作,则您希望所有按钮都执行相同的操作(某些按钮可能与主要情况不太相关)。

使用静态模型,通过用例来指导客户和开发人员也可能会更容易-您只需按照“正确”的顺序逐一显示屏幕,确保覆盖了所有用例如您所愿。使用动态的可能会给用户“太多”的自由,使他们错过关键的用例等。

顺便说一句-您不必成为程序员即可创建html模型。有很多工具(例如Axure,Balsamic,Flair Builder和许多其他工具)允许非程序员创建此类模型。

5
Dan Barak

随着响应式设计的日益普及,使用动态模型(可能是HTML)甚至变得more。在设计初始粗略布局时,我发现自己不断调整浏览器的大小,以查看布局在多种宽度下如何工作。

试图用静态图像指定响应式设计是不可能的,而用多个静态图像来表示它既费时又过于复杂。

2
obelia

传闻答案

我最近在一个网站上工作,该网站的主要模板是在Photoshop中设计的(我将其称为“ PS”),但是仍然需要设计网站的各个部分。我正在处理一些具有一些非标准UI要求的部分,我必须决定是要在Photoshop中模拟它们还是仅使用HTML/CSS进行模拟。我选择了后者,并且[〜#〜]非常[〜#〜]对此表示感谢。

我实际上是从标记HTML中的页面内容和导航元素开始的。掌握了这些内容之后,我就开始使用CSS并了解有效的方法。我能够很快创建几个完全不同的布局,并立即在浏览器中对其进行测试。我知道有几种选择几乎无法立即生效,因此能够迅速放弃(我通常会在PS中完成设计)。我也能够添加交互式(显示/隐藏/等)元素,而这在Photoshop中是不可能实现的。

在HTML和PS中,例如表,有些事情就快了way。在单元格和标题中具有可变文本内容的可视化设计PS中的表格需要花费一些实际的精力。它在HTML中非常快,您实际上会看到它的真正外观。

当然,这只能让您受益匪浅,因为您无法使用CSS进行所有操作。我偶尔会回到Photoshop并为特定部分创建这样的图像,但是在大多数情况下,我惊讶地发现仅用CSS可以做多少。

我拿

我仍将逐案考虑。但是我肯定将来会倾向于HTML样机。

2
jessegavin

如果我是对的,我相信VB最初是作为快速删除一些模型的一种方式编写的。。。)考虑到这一点,我想说“正确”的答案很可能是走HTML样机之路。

但是,我正在输入新产品时正在为新产品创建模型,坦率地说,我不认为创建看起来像PSD格式的html模型所涉及的工作是值得的。使用复杂的布局设计,使一点文本或图像等准确地显示在您想要的位置,这将使Web开发人员比具有类似技能水平的photoshop艺术家花费的时间更长。

另外,如果您要做的不仅仅是文字和基本设计,您可能将要使用Photoshop(或类似的图形包)来进行设计工作-为什么要麻烦此事呢?

当然,如果有使用交互式模型的真实理由(例如,一个庞大的用户组来演示您认为某些特定的交互式显示将如何工作),那么付出额外的努力是值得的。

但是,如果您只是向客户展示您如何看待应用程序的多个窗口,我认为没有必要为此付出额外努力吗?

1
Sk93