用户界面 - 颜色和布局
虽然我对 Web 应用程序信息特别感兴趣，但我对桌面应用程序开发也有些好奇。 这个问题是由我在个人网站上的工作以及我的工作所驱动的，我在工作中开发了一些功能，但将其留给其他人来集成到网站的外观和感觉中。
对于配色方案、布局、格式等，是否有任何指南或经验法则？ 我希望确保访问者的可读性和清晰度，但同时又不能显得平淡无奇。
至于我在这方面的知识 - 如果你给我一张图片，我有足够的知识在屏幕上重现它，但如果你让我设计一个新的界面或重新设计现有的界面，我不知道从哪里开始。
Although I'm specifically interested in web application information, I would also be somewhat curious about desktop application development as well. This question is driven by my work on my personal website as well as my job, where I have developed a few features, but left it to others to integrate into the look and feel of the site.
Are there any guides or rules of thumb for things like color schemes, layouts, formatting, etc? I want to ensure readability and clarity for visitors, but not be bland and dull at the same time.
As for my knowledge in this area - If you hand me a picture, I have enough knowledge to reproduce it on the screen, but if you ask me to design a new interface or redesign an existing one, I wouldn't know where to begin.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
对于网页用户界面，我要大胆地说网页设计中最重要的颜色是白色，或“浅色”。 这是您可以在其上放置密集内容的颜色。
当涉及到您的主要内容区域时，始终是深色文本、浅色背景。
布局中最重要的规则是空白。 让内容呼吸。
遵循这两个简单的规则比大多数“用户界面可用性”指南更有价值。
顺便说一句，微软的用户界面指南（总的来说）很糟糕。 阅读 Jakob Nielsen，看看 Apple 的设计美学，但远离 MS“中性灰/蓝色 crunchbox”12 步向导 10pt 文本 UI 哲学。
（我是作为一名长期的 MS GUI 程序员这么说的）
For web UI, I'm going to go out on a limb here and say that the most important color in web design is white, or "light". This is the color on top of which you place dense tracts of content.
Dark text, light background, always, when it comes to your primary content areas.
And the most important rule in layouting is whitespace. Let the content breathe.
Following these two simple rules is worth more than most "user interface usability" guidelines.
And by the way, the MS user interface guidelines are (by and large) horrible. Read Jakob Nielsen, look at Apple design aesthetics, but stay away from the MS "neutral gray/blue crunchbox" 12-step Wizard 10pt text philosophy of UI.
(And I say that as a long-time MS GUI programmer)
检查颜色是否具有良好对比度的一个技巧是拍摄它的快照并转换为灰度。 如果你看不懂某些东西，那么颜色肯定选错了。
另外，虽然它与用户界面无关，但 Before & After Magazine 可以给你一些关于颜色、设计和相关主题的很好的提示。 它甚至还有一些免费的 pdf 可供下载。
One tip to check if your colors have good contrast is taking a snapshot of it and converting to grayscale. If you can't read something, colors were surely bad choosen.
Plus, although it's not about user interfaces, Before & After Magazine can give you some pretty good hints about color, design and related topics. It even has got some free pdf's to download.
通常，每个操作系统都有用户界面指南。 对于 Windows，请查看此处。 （编辑：该帖子中的链接已损坏。但是搜索“用户界面指南" MSDN 上有关于所有内容的文章）
Apple 也有自己的。 另外，您可能希望保持可访问性 记住。
Usually, each operating System has user Interface Guidelines. For Windows, have a look here. (Edit: The links in that post are broken. But a Search for "User Interface Guidelines" on MSDN has articles about everything)
Apple has it's own as well. Also, you may want to keep accessibility in mind.
Jenifer Tidwell 所著的设计界面一书有一整章讨论该主题（第 9 章，摘录可在线访问）。
整本书都值得推荐。
The book Designing Interfaces, by Jenifer Tidwell has a entire chapter on the subject (Chapter 9, excerpts accesible online).
The entire book is worth recommending.
我很难找到搭配在一起的颜色，所以我作弊并使用来自大自然的图片，这些图片主要是我想要的颜色（比如绿色），然后我使用 此网站 拉出主要配色方案。 一般来说，大自然在设定自己漂亮的配色方案方面做得非常好。
I'm horrible at finding colors that look good together, so I cheat and use pictures from nature that are mostly the color I want (say, green) and then I use this website to pull out the main color scheme. Generally nature does a pretty good job of setting its own nice color schemes.
使用高对比度的颜色组合； 白底黑字是高对比度组合的最佳示例。
不好的组合是红色背景上的绿色文本。 这对于色盲人士（比如我自己）来说太可怕了。
查看您的网站对于色盲人士来说是什么样子：colorfilter.wickline.org
Use high contrast color combos; Black text on white background is the best example of a high contrast combo.
A bad combo is green text on red background. It's horrible for color blind people (like myself).
See what your site looks like to a color blind person: colorfilter.wickline.org
至于桌面应用程序：无论您做什么，都不要使用手工挑选的颜色。 坚持使用指定的系统颜色，例如“窗口背景”、“菜单文本”等。否则，依赖操作系统辅助功能的人将被您的颜色选择锁定（例如，无法选择高对比度主题）并无法使用喜欢自定义桌面主题的人会认为您的应用程序很丑陋。
As for desktop applications: Whatever you do, do not use hand-picked colors. Stick with the named system colors such as "Window Background", "Menu Text", etc. Otherwise, people relying on OS accessibility features will be locked with your color choices (unable to choose a high-contrast theme, for instance) and to people who like to customize their desktop themes will think your application is fugly.
以下是一些关于排版可用性的简单提示。 这些东西主要解决可读性和可访问性问题。
应做的事情：
请勿：
Here are some simple pointers for usability in your typography. These things mainly address readability and accessibility concerns.
DOs:
DONTs: