user-interface - 用户界面 - 颜色和布局

Question

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

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

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

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

检查您的颜色是否具有良好对比度的一个技巧是对其进行快照并转换为灰度。如果你看不懂，颜色肯定选错了。

另外，虽然它与用户界面无关，但Before & After 杂志可以为您提供一些关于颜色、设计和相关主题的非常好的提示。它甚至有一些免费的 pdf 文件可供下载。

score 2 · Accepted Answer

Jenifer Tidwell所著的Designing Interfaces一书有一整章关于这个主题（第 9 章，摘录可在线访问）。整本书都值得推荐。

score 2 · Accepted Answer

对于 Web UI，我要在这里冒个泡，说网页设计中最重要的颜色是白色，或“浅色”。这是您在其上放置密集内容的颜色。

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

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

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

使用高对比度的颜色组合；白色背景上的黑色文本是高对比度组合的最佳示例。

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

做：

不要：

8 回答 8