样机：编码还是绘图？

9

这与网页设计无关，而是与界面设计有关。更好地编写接口模型或在图形程序（例如GIMP，Photoshop等）中“绘制”它们吗？

website-design  interface-design  design-process 
— 克里斯托弗
source
3
我总是被告知“素描您的界面，如果您在photoshop或任何其他人认为您比实际情况更遥远的地方。让您的模型看起来像个粗略的草图，只需要简单地掌握基础知识，这样您的客户就知道期望什么然后扩展稍后在您的用户界面上。”
— 汉娜
1
这完全取决于项目。没有普遍的“最佳”答案。
— 2012年

Answers:

14

问自己以下问题：

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

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

  • 您能仅通过查看其十六进制/ RGB代码立即识别出一种颜色（不仅是猜测，而是确切的阴影/颜色）吗？当您在脑海中描绘出一种颜色时，可以立即将其转换为十六进制吗？通过输入十六进制代码与使用真正的颜色选择器相比，您能多快地选择一种配色方案？

您问这个问题的事实告诉我，通过培训，您很可能是程序员，而不是设计师。如果您是设计师，那将像开发应用程序而不计划类结构，数据库设计，应用程序体系结构等，而直接跳入编码一样荒谬—如果您是经验丰富的开发人员，那么您知道这种自下而上的开发会导致哪些问题。

同样，如果您直接跳到代码而没有先实际设计 UI的话，结果将不会很漂亮，仅仅是因为盲目地编写代码来完善一个好的设计是不切实际的。

— 莱斯特·马耶斯特
source
OP可能不适合使用WYSIWYG代码编辑器，通过它您可以选择颜色甚至“绘制”对象...
— jackJoe 2011年
2
实际上，无需先设计UI即可进行编码是相当有效的技术。也就是说，当然，如果“编码”不表示UI或UX部分:)。实际上，大多数API和库在设计时都没有考虑UI，这是不切实际的。
— thebodzio 2011年
1
@lese，您正在介绍一种瀑布方法。可以的，但是如今的趋势是变得敏捷，在这种情况下，很可能从第一天开始就使用代码。
— DA01 2011年
@ DA01：从第一天开始您就在编写代码，但是您仍在使用自顶向下的方法。敏捷中没有什么表示不能在编码之前规划数据架构或先定义UI（我认为大多数敏捷公司都比UML，类图等更喜欢）。
— 冒犯君主
2
@thebodzio：是的，当然，这就是关注点分离的目的。但是我并不是指对后端进行编码。当我说关于问题的设计部分的编码（不是我用来说明问题的编程类比–我知道，有点混乱）时，我的意思是对模型进行编码（CSS + HTML或您的UI语言可能是）。
— 冒犯君主
5

我会首先投票赞成“绘画”。在GUI中，正确的布局/表示形式是关键，它要求设计视觉手段。可视化设计GUI使您可以快速更改设计，而不必“想象”每个更改，“将其转换为代码”并最终进行测试。另一种方法也是可行的，但它却很少好（例如，项目非常小，就像几个按钮一样，您很熟悉并且习惯于在“代码”级别工作；在设计过程中可能会出现一些模式，这可能仅仅是稍加修改即可重用）。

如果要为特定的窗口小部件工具包设计，则也可以使用一些“ GUI设计器”应用程序（如果有）。这将加快甚至更多的GUI设计过程，因为它既可以准确显示所设计的GUI在运行程序中的外观，又可以在演示级别导出准备使用的GUI描述。

— Thebodzio
source
2
“而且您很熟悉，并且习惯于在“代码”级别工作”-> UI / UX团队可以在代码级别工作很重要。每个设计师不必一定是编码员，但是团队需要能够构建他们设计的所有内容，并且除了视觉设计外，还要对工程学有所了解。
— DA01 2011年
我可以同意，只要您是指整个团队即可。我认为，当您仅设计UI / UX而不是对其进行编码时，对代码内部工作原理的了解实际上会使您退缩，因为您倾向于避免某些潜在的解决方案，仅是因为您认为它们“太难于使用了”。实行”。这意味着您的设计可以摆脱一些出色的想法，因为“工具箱思维”将锁定您的部分想象力。再说一次……这只是刀片的一侧：)此外，问题仅是关于“模型”的。
— thebodzio 2011年
1
我听到过很多“阻止您”的争论，但是发现它只是来自视觉设计师，他们固执地反对学习表示层代码。这些人也倾向于转向在Flash中执行所有操作。:)我想建议它与印刷设计没有什么不同。知道印刷的工作方式并不会“阻碍”您成为印刷设计师。而是，它阻止您创建会阻塞RIP的文件，或导致打印机为您尖叫300％的墨水覆盖率。它只是关于了解媒体及其相关约束的内容。
— DA01 2011年
1
所见即所得不是为了促进“视觉思考”。这是为了让不想学习的人li行。;）至于约束，它们定义了媒介。可以绘制精美图片但不了解载荷和跨度基本原理的建筑师在很大程度上受到阻碍……因为他们绘制的任何东西实际上都无法建造。
— 2011年
1
（我的很多观点是与不知道如何构建自己想出的东西的UX团队一起工作或与他们一起工作的。他们不是在大多数时候进行创新...而是只设计了一半的想法在实现，时间表，用户或预算方面不切实际的解决方案[所有这些都是其他约束，而不是成为障碍，这有助于定义设计解决方案]）PS：好的讨论！
— 2011年
3

对于UI设计，我分三个阶段实现不同的目标：

  1. 素描。首先，您想了解将要包含哪些元素以及它们如何组合在一起的基本思想。在此阶段，任何精细的细节或美学上的完美主义都是一种干扰。我使用白板和可擦除的脂肪笔，这样就不会因过多的细节而分心，也不容易随意编写各种不同的想法并随时重新开始。我听说有人只在小纸条上画草图，或者只用副手（例如，如果您用右手，则用左手）强迫自己完全不注意美学，而将注意力集中在100％在思想和功能上。（图片不是我的，来自Frank Prendegast）

白板线框照片

  1. （2！）模拟。其次，您要放慢脚步并获得反馈，在开始耗时的实施工作之前，尽可能多地了解人们的直觉和无提示的响应。这应该是您最有效率的工作，因为如果做得正确，您应该经常“回到制图板”，寻求批评，并尽早发现许多意外问题。如果您是一个疯狂的编码机器，并且它是最舒适的工作方式，那么编码就可以了，但是大多数人可以在Fireworks，Photoshop，专用线框图软件或UI驱动的界面生成器（如Flash Catalyst）中更快地工作（如果最终产品不是Flash，则很好，目标是在开始实施之前获得良好的反馈）。

  2. （3！）实施。最终，您实现了目标，并以一种可以让您及早且经常获得更多反馈的方式实现目标。

项目周期的这三个部分具有不同的目标，因此，如果这是一个大型项目，则在每个阶段使用最合适的工具进行工作是有意义的。

— user56reinstatemonica8
source
2

这个问题有点含糊，因此，答案也是如此。

最重要的是，项目和团队也会千差万别。

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

一般来说，我想这就是您应该针对的工作流类型：

  1. 草图。铅笔+纸。白板。重复。与尽可能多的团队成员一起工作。
  2. 低保真模型。可能是PSD，可能是visio。可能是纸。用户测试这些。
  3. 开始构建原型。在这里，您要开始在工作代码中尽力而为。根据需要跳入Photoshop，并尽可能快地将其中的内容放入代码中。继续用户测试/迭代。
— DA01
source
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.