5

我是一名软件开发人员，我现在要进行一个项目，该项目涉及使用 ASP.NET（3.5 / 2008，使用 Web 客户端软件工厂）实现网站。我的任务是为该项目创建一个 UI / UX 设计文档，但是我真的不知道从哪里开始。

我在 3 年内参与了一个项目，其中有一份正式的 UI 设计文档，其中包括布局和样式指南/规则（例如，应用程序有标题、导航等，链接必须是颜色 A，用于积极操作的按钮必须在右边等）。事后看来，这非常有用，我很感激有人也付出了那么多努力——甚至在文档中定义了 CSS 类。但是，该文档是基于现有应用程序的，并且符合企业的整体企业形象。

当前项目是一个新项目，目前没有明确定义的需求（是的，我知道......当没有很多要求时你如何设计......我跑题了）。很难知道究竟需要什么功能。有两种不同的用户类型/角色，但本文档不会对它们进行正式研究。另外，我不确定公司的身份，除了企业有一些关于使用他们的标志的规则，我只会在几天后得到进一步的澄清。

所以我有点茫然，在画布上涂颜料，希望最后能得到一张漂亮的照片（要是我是杰克逊·波洛克就好了）。

您会在本文档中包含哪些内容？它针对业务（客户）以及开发人员。我只能想到以下几点：

  1. 布局 - 页眉、页脚、内容、导航
  2. 样式 - 不同预期组件的调色板和样式
  3. 用户交互 - 当用户执行操作并且必须等待他们收到模式对话框的通知时，使用 AJAX 完成验证，导航应该是上下文的，任务应该通过最少的点击/导航等来执行，等等。

有没有人有过创建这样一个文档的经验，或者任何已知的、经过尝试和测试的 UI 设计过程？

谢谢，

詹姆士

4

3 回答 3

2

在这样一组文档中可以包含各种元素：

  • 视觉风格指南（颜色、字体、大小、图标等）
  • 品牌指南（企业标志、颜色、信息等）
  • 版权风格指南（术语、适当的消息传递、适当的声音等）
  • 角色/人口定位
  • 页面布局指南
  • CSS 指南/标准
  • JS 指南/标准
  • 用例
  • 可访问性问题
  • 可用性问题
  • 示例实现
  • IA 路径流
  • 线框组件
  • 等等

如果可以的话，我会拿起这本书让你开始思考这个问题：

http://www.amazon.com/Web-Anatomy-Interaction-Frameworks-ebook/dp/B002ZY5FCW/ref=sr_1_2?ie=UTF8&s=books&qid=1262983955&sr=8-2

于 2010-01-08T20:52:48.867 回答
1

连同规划文档中所有其他明显的组件一起，绘制 UI 的部分草图以及附带说明的特定用例的叙述将是一个好主意。

我过去在尝试传达 UI 想法时遇到过问题。绘制对话框和动作序列的草图通常很有用。如果这些草图看起来太“真实”，那么它们就有成为最终产品规格的趋势。

为了缓解这种情况，我一直在玩Balsamiq Mockups。它有一个很好的特性，它是一个可编辑的餐巾纸背面，并故意以手绘的感觉渲染所有对象和屏幕布局。我喜欢我在小型内部项目中使用它所取得的成果。我还没有（还）有机会将它用于具有许多外部利益相关者的大型项目。

于 2010-01-15T00:16:41.627 回答
0

人机界面指南的 Wikipedia 文章有一些很棒的链接，我将建议这些链接。其中一些可能比您需要的信息多得多，但它们应该让您很好地了解您应该添加哪些类型的东西。

我一直觉得 Apple 的指南非常完整和有用，但它们绝对是非常完整的，需要大量阅读。

于 2010-01-08T20:50:55.063 回答