样机:编码与绘图?

平面设计 网站设计 界面设计 设计过程
2022-01-20 18:13:34

这不是关于网页设计,而是关于一般的界面设计。更好地编写界面模型或在图形程序(如 GIMP、Photoshop 等)中“绘制”它们?

4个回答

问自己这些问题:

  • 通过编码,您可以在 30 分钟内探索多少个 UI 布局/选项?你可以通过素描探索多少?

  • 在第一次尝试时,您多久获得一次完全正确的 UI 设计?如果不是经常,更改草图与编码模型相比有多快/容易?

  • 您能否仅通过查看其 hex/rgb 代码(不仅仅是大致猜测,而是确切的阴影/颜色)来立即识别颜色?当您在脑海中想象一种颜色时,您能立即将其转换为十六进制吗?通过输入十六进制代码与使用真正的颜色选择器相比,您能多快选择颜色方案?

您提出这个问题的事实告诉我,您很可能是受过培训的程序员,而不是设计师。如果你是一名设计师,那么这就像在没有规划类结构、数据库设计、应用程序架构等的情况下开发一个应用程序并直接开始编码一样荒谬——如果你是一名经验丰富的开发人员,那么你就会知道这种自下而上的开发会带来什么样的问题。

类似地,如果你在没有实际设计UI 的情况下直接开始编写代码,那么结果不会很漂亮,因为盲目地编写代码来完善一个好的设计是不切实际的。

我会先投票给“绘画”。在 GUI 中,正确的布局/呈现是关键,它需要设计视觉手段。直观地设计 GUI 让您可以快速更改您的设计,而无需“想象”每个更改、“将其转换为代码”并最终对其进行测试。另一种方法也是可能的,但很少有更好的方法(例如,项目非常小,就像只有几个按钮,并且您熟悉并习惯于在“代码”级别工作;在设计过程中可能会出现一些模式,这可能只是稍作修改即可重复使用)。

如果您正在为特定的小部件工具包进行设计,您还可以使用一些“GUI 设计器”应用程序(如果可用)。它将加快更多的 GUI 设计过程,因为它既能准确地显示设计的 GUI 在运行程序中的样子,又可以在演示级别导出准备使用的 GUI 描述。

对于 UI 设计,我有三个不同目标的阶段:

  1. 素描。首先,您想要了解将有哪些元素以及它们如何组合在一起的基本概念。在这个阶段任何精细的细节或审美完美主义都会分散注意力。我使用白板和可擦笔,这样就不会因为太多细节而分心,而且很容易涂鸦大量不同的想法并随时重新开始。我听说有人只在小便利贴上素描或只使用他们的副手(例如,如果你是右手,则用左手)强迫自己完全不注意美学并专注于 100%关于理念和功能。(图片不是我的,来自弗兰克·普伦德加斯特

白板线框照片

  1. (2!)模拟。其次,您想低头并获得反馈,在开始耗时的实施工作之前,尽可能多地了解人们的直觉和自发的反应是什么。这应该是你工作效率最高的事情,因为如果你做对了,你应该经常“回到绘图板上”,寻求批评并尽早发现尽可能多的意外问题。如果你是一个疯狂的编码机器,并且它是你最舒服的工作,那么编码是好的,但大多数人会在像 Fireworks、Photoshop、专用线框图软件,或者像 Flash Catalyst 这样的 UI 驱动的界面构建器中工作得更快(如果最终产品不是 Flash,那么目标是在开始实施之前获得良好的反馈)。

  2. (3!)实施。最后,您实施该事物并旨在以一种允许您及早并经常获得更多反馈的方式这样做。

项目周期的这三个部分有不同的目标,所以如果它是一个大项目,那么在每个阶段使用最适合工作的工具是有意义的。

这个问题有点模糊,因此,答案也是如此。

最重要的是,项目会千差万别,团队也会如此。

也就是说,没有“最好”。这是关于在对您和您的团队最有意义的工作流程中使用所有工具。

一般来说,我会说这是您应该针对的工作流程类型:

  1. 草图。铅笔+纸。白板。迭代。与尽可能多的团队成员一起工作。
  2. 低保真模型。可以是PSD,也可以是visio。可以是纸。用户测试这些。
  3. 开始构建原型。这是您希望在工作代码中尽可能多地开始做的地方。根据需要跳入 Photoshop,并尽可能快地将其中的内容转换为代码。继续用户测试/迭代。