在 Web 应用程序中进行适当的 UI/交互/功能设计需要哪些技能？ [关闭]

Question

关闭。 这个问题是基于意见的。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，以便通过编辑这篇文章用事实和引文来回答问题。

2年前关闭。

改进这个问题

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

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

简而言之：什么技能使您从需求收集超越了 AmazingWebApp™？

最后：有什么推荐的书吗？

Answer 1

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

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

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

Answer 2

我认为最好的办法就是简单地使用该软件。

当我在开发应用程序时，我倾向于在周末（有时更早）通过电子邮件将它们带回家，远离“工作模式”，正常安装（即不从您的 IDE 运行），然后使用它。

很难摆脱“测试模式”并实际上“忘记”您了解该应用程序..但是一旦您开始使用它，它就会非常有用，并且非常令人大开眼界（是的，有时当您意识到“很酷的小功能”实际上是不完美的，需要重新实现！）。

Answer 3

这里的人提供了很好的建议。

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

现实是你需要技巧来制作好的界面。 这伴随着多年的实践。 我通常受聘为新应用程序设计整个 UI。 我很少看到具有这些技能的程序员或图形设计师（这是一个狭窄的市场）。 我在大学发现我对 HCI、UI 设计和可用性分析有着天生的敏锐度。 我通过大量阅读和积累经验，进一步发展了这些技能。 所以，我想说的是，如果你真的想成为擅长 UI 设计的人，那就准备好努力工作吧。 你可以做任何你想做的事情，但如果你花时间学习 ui 设计，那意味着你没有花时间学习 ruby​​ on rails 的敏捷，或者任何最流行的技术。

一些一般提示：

• 如果您正在构建 Web 软件应用程序（而不是小型企业网站），那么 lo-fi 原型设计非常出色。 把一群人聚集在一起，一堆屠夫纸和彩色标记，你会惊讶于几天内你可以勾勒出多少屏幕。

• 您的软件应该是不言自明的。 您的软件不应该需要用户手册。 我开发的 CMS 没有用户手册，我有几十个客户在使用它，但没有人向我索要手册。

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

我会推荐这本书：

• 不要让我思考可用性

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

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

Answer 4

我认为某种类型的可视化原型（即使它是用 HTML 和 CSS 完成的）是最好的。 我的诱惑是开始编码并稍后担心界面，这通常会导致一些非常糟糕的事情（至少对我而言）。 我开发了这个 © WONDERFUL FUNCTIONALITY ，我最终匆匆忙忙地创建了界面，这样我就可以快速拥有获取代码的工具。

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

Answer 5

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

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

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

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

Answer 6

我们做的一些事情：

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

Answer 7

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

Answer 8

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

Answer 9

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

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

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

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

避免特价当用户要求非常具体的东西时，要小心。 总是质疑偏见，看看这是否真的会让你的产品更好。

原型不要等到发布时才向用户展示你拥有的东西。 经常做原型（你甚至可以称它们为测试版）并在整个开发过程中获得持续的反馈。 执行此操作时，您可能会发现更多要求。