在 Web 应用程序中进行正确的 UI/交互/功能设计需要哪些技能？

Question

当您从头开始开发 Web 应用程序时，需要哪些技能才能生成可用且交互丰富的产品？

• 你先做UI原型吗？
• 您使用用户故事吗？
• 您会推荐或积极倡导一些敏捷方法或最佳实践吗？

简而言之： 哪些技能可以让您从需求收集转向 AmazingWebApp™？

最后：有什么书可以推荐吗？

Answer 1

有良好的设计感。这对于程序员来说是一件很难掌握的事情。有时，程序员很清楚什么是有效的，但不知道如何创建实际上最有效或效果最好的东西。主要是它需要有能力接受所有东西，并愿意自由地移动它，直到某些东西可以工作为止。

我这样做的方法是找出某人在哪里做这件事最合乎逻辑和最常见的想法是如何在线或离线完成任务，然后看看如何复制它。思考简短、简洁、清晰、易于理解且符合逻辑。如果你可以在没有任何指示的情况下将其交给某人，并且他们可以做你希望他们做的所有事情，甚至更多，那么它就会起作用。如果他们需要指导在您的应用程序上执行日常操作，那么这是一个糟糕的设计。

我还想说，看看其他对您有吸引力的应用程序，您可能甚至没有意识到，但只是出于某种原因工作，并尝试复制它。

Answer 2

我认为您可以做的最好的事情就是简单地使用该软件..

当我开发应用程序时，我倾向于在周末（有时更快）给他们发电子邮件回家，摆脱“工作模式”，正常安装（即安装）不是从你的 IDE 运行）然后使用它..

很难离开“测试模式”并实际上“忘记”您了解该应用程序。但一旦你掌握了它，它就可以 真的 有用，而且非常令人大开眼界（是的，当你意识到“很酷的小功能”实际上很糟糕并且需要重新实现时，有时会令人心碎！）。

我的老板说我对可用性很“挑剔”。我喜欢 ：）

Answer 3

我认为某种类型的视觉原型（即使是使用 HTML 和 CSS 完成的）是最好的。我的诱惑是先开始编码，然后再担心界面，这通常会导致一些非常糟糕的事情（至少对我来说）。我开发了这个©精彩的功能 我最终急于界面，以便我可以快速拥有工具来获取我的代码。

我忘记了我在哪里听到的，但是，对于最终用户来说，你的界面就是你的应用程序。如果您想取悦用户，则应该从界面开始，并让它决定您将提供的功能。

Answer 4

最佳实践取决于团队成员的才能。

首先，始终编写用户故事（如果可能，将其作为团队活动），将它们加载到 LighthouseApp.com 或您最喜欢的票务系统中 - 只需前 10-20 个就可以开始滚动。

如果您有 UI 设计师，页面原型可能会很有用。但是，如果软件开发人员具有良好的 HTML/CSS 技能，我更愿意尽快获得具有干净 UI/HTML/CSS 的工作原型。该输出可以交给“现代网页设计师”，他可以重新设计/装饰 HTML/CSS。设计人员应通过源代码控制系统与开发人员使用相同的代码库。

一些“老派设计师”会因为他们“装饰网站”的建议而感到被冒犯，并坚持给程序员一份 Photoshop 文件。对于一个简单的营销网站来说这可能没问题，但我不喜欢构建 AmazingWebApp™ 的过程

Answer 5

这里的人给出了很好的建议。

“视觉上漂亮”和“功能性”（或易用性）之间是有区别的。实际上，您可以只拥有一个而无需另一个。这个论坛就是一个很好的例子，它具有非常高的可用性，但坦率地说是丑陋的 - 对不起，堆栈，但我仍然爱你:)

现实是你需要 技能 制作良好的界面。这需要多年的实践。我通常会签约为新应用程序设计整个用户界面。我很少看到程序员或图形设计师拥有这些技能（这是一个狭窄的市场）。我发现在大学我对人机交互、用户界面设计和可用性分析有着天生的敏锐度。我通过大量阅读和积累经验进一步发展了这些技能 做了很多用户界面设计。 所以，我想说的是，如果你真的想成为优秀的 UI 设计者，请做好付出艰苦努力的准备。你可以做任何你想做的事情，但如果你花时间学习 UI 设计，这意味着你没有花时间学习 Ruby on Rails 的敏捷性，或者任何最流行的技术。

一些一般提示：

• 如果您正在构建网络软件应用程序（而不是小型企业网站），那么低保真原型设计非常适合。让一群人聚集在一起，用一堆屠夫纸和彩色记号笔，你会惊讶地发现几天之内你可以画出多少屏幕。

• 你的软件应该是不言而喻的. 。您的软件不需要用户手册。我开发的CMS没有用户手册，我有几十个客户使用它，但他们都没有向我要过手册。

• 看看“大男孩们做什么”。如果 eBay 有这样的搜索框：'[......]（搜索）' 然后也这样做（而不是非标准的，但还可以：'搜索：[......] （去）'。）。这被称为 可供性. 。您正在利用人们对其他系统的熟悉程度来帮助他们了解您自己的系统如何工作。

我会推荐这本书：

• 别让我认为可用性

我还有一些博客文章应该有所帮助：

• 线框和模型
• 企业网站需求分析

Answer 6

我们所做的一些事情：

1. 很多原型，在纸上、Photoshop 中探索不同的概念，有时甚至在实际实现中
2. 修剪东西，迭代。不要尝试第一次就完成并完善整个应用程序（因为你心里知道这不会发生）
3. 清晰胜过聪明，这是我在做用户体验工作时经常问自己的最新问题之一，某些图标和旋转的东西可能看起来很棒，但它们是否清晰简洁
4. 关注用户目标，开发人员一次专注于一个屏幕、一次一项任务是一种很常见的趋势。请记住，这不是使用您的应用程序的人的想法，他们心中有一个目标，因此请尝试尽可能地让自己进入目标
5. 尽可能多地使用您正在构建的软件，没有比亲自体验更好的方法来发现它的错误、缺点和问题。

Answer 7

@Brian Warshaw - 我认为这是来自 aza raskin 的谈话， 我认为这个视频

Answer 8

对于大多数程序员来说，设计一个完全创新的 UI 是相当困难的（只有我这样吗？）。我发现为网络应用程序构建/设计用户界面有用的就是始终寻找在浏览互联网或使用任何其他桌面应用程序时找到的漂亮、易于使用且优雅的用户界面。如果您只是为手头的任务找到最有效的 UI（由其他人在其他地方设计），那么您可以很好地为您的应用程序实现和创建更好的用户体验。例如，当我输入这个答案时，我喜欢它显示答案的实时预览的方式，并带有“隐藏预览”选项 - 我肯定希望在构建用户论坛界面时使用类似类型的交互。

Answer 9

弄清楚您正在构建什么以及您的产品代表什么是构建成功应用程序的重要关键。我最近写了一篇关于需求收集的博客文章，其中谈到了这一点。你可以在这里阅读它：如何提高您的需求收集技能。

另外，我遵循以下一些高级原则，以确保我构建出具有愉快体验的正确产品：

了解用户和客户之间的区别。批准闪亮项目的企业主通常是客户。然而，一个毁灭性的错误是容易将他们作为用户混淆。客户通常是认识到您的产品需求的人，但用户是实际使用该解决方案的人（并且很可能稍后会抱怨您的产品未满足要求）。去多个人那里

因为我们都是人，我们往往不会记住每一个令人痛苦的细节。当您与更多的人交谈并交叉检查时，您发现遗漏需求的可能性就会增加。

避免特价当用户要求非常具体的内容时，请保持警惕。始终质疑偏见，看看这是否真的能让你的产品变得更好。

原型不要等到发布才向用户展示您拥有的内容。经常制作原型（您甚至可以将其称为测试版）并在整个开发过程中不断获得反馈。当您这样做时，您可能会发现更多要求。