用户界面 - 颜色和布局

Question

虽然我对 Web 应用程序信息特别感兴趣，但我也对桌面应用程序开发有些好奇。 这个问题是由我在我的个人网站上的工作以及我的工作驱动的，我在那里开发了一些功能，但留给其他人来整合到网站的外观和感觉中。

是否有关于配色方案、布局、格式等方面的指南或经验法则？ 我想确保访问者的可读性和清晰度，但同时又不乏味乏味。

至于我在这方面的知识——如果你给我一张图片，我有足够的知识在屏幕上重现它，但如果你让我设计一个新的界面或重新设计一个现有的界面，我不知道从哪里开始.

Answer 1

通常，每个操作系统都有用户界面指南。 对于 Windows，请查看此处。 （编辑：该帖子中的链接已损坏。但在 MSDN 上搜索“ 用户界面指南”有关于所有内容的文章）

苹果也有自己的。 此外，您可能需要牢记可访问性。

Answer 2

检查您的颜色是否具有良好对比度的一个技巧是拍摄它的快照并转换为灰度。 如果您无法阅读某些内容，那么颜色肯定是错误的选择。

另外，虽然它不是关于用户界面，但Before & After Magazine可以给你一些关于颜色、设计和相关主题的很好的提示。 它甚至有一些免费的 pdf 可供下载。

Answer 3

Jenifer Tidwell 所著的《设计接口》一书有一整章关于该主题（第 9 章，可在线访问的摘录）。 整本书值得推荐。

Answer 4

对于 Web UI，我将在这里大胆地说，Web 设计中最重要的颜色是白色或“浅色”。 这是您在其上放置大量内容的颜色。

当涉及到您的主要内容区域时，始终采用深色文本、浅色背景。

布局中最重要的规则是空格。 让内容呼吸。

遵循这两个简单的规则比大多数“用户界面可用性”指南更有价值。

顺便说一句，MS 用户界面指南（总的来说）很糟糕。 阅读 Jakob Nielsen，看看 Apple 的设计美学，但远离 MS“中性灰色/蓝色 crunchbox”12 步向导 10pt 文本 UI 哲学。

（我这么说是作为一个长期的 MS GUI 程序员）

Answer 5

我很难找到搭配在一起看起来很好的颜色，所以我欺骗并使用来自大自然的图片，这些图片主要是我想要的颜色（比如绿色），然后我使用这个网站来提取主要的配色方案。 一般来说，大自然在设置自己漂亮的配色方案方面做得很好。

Answer 6

使用高对比度颜色组合； 白底黑字是高对比度组合的最佳例子。

一个不好的组合是红色背景上的绿色文本。 对于色盲（比如我）来说，这太可怕了。

看看您的网站在色盲人士眼中的样子： colorfilter.wickline.org

Answer 7

这里有一些简单的关于你的排版可用性的指示。 这些东西主要解决可读性和可访问性问题。

做：

• 使用相对字体大小 (em)
• 使用 LANG 属性识别文档中的语言更改
• 白色背景上的黑色文本
• 对于标题，使用 H1、H2 等并适当嵌套
• 将内容分块并使用适合您的用户正在寻找的标题进行组织
• 写清楚和简单的副本
• 左对齐，右对齐
• 文本到背景颜色必须是高对比度

不要：

• 使用“单击此处”或“更多”作为链接文本
• 使用下划线强调
• 超过 2 种字体类型系列
• 斜体
• 使用全部大写的文本块
• 在白色背景上使用真红色或真蓝色文本（色差）

Answer 8

至于桌面应用程序：无论您做什么，都不要使用精心挑选的颜色。 坚持使用命名的系统颜色，例如“窗口背景”、“菜单文本”等。否则，依赖操作系统辅助功能的人将被您的颜色选择锁定（例如，无法选择高对比度主题）并且喜欢自定义桌面主题的人会认为您的应用程序很丑。