用户界面-颜色和布局
尽管我对Web应用程序信息特别感兴趣,但我也对桌面应用程序开发有些好奇。这个问题是由我在个人网站上的工作以及我的工作所驱动的,在那里我开发了一些功能,但将其留给了其他人以整合到网站的外观和感觉中。
对于配色方案,布局,格式等,是否有任何指南或者经验法则?我想确保访问者的可读性和清晰度,但不要同时保持平淡乏味。
至于我在这方面的知识如果我们给我一张照片,我有足够的知识可以在屏幕上重现它,但是如果我们要我设计一个新的界面或者重新设计一个现有的界面,我将不知道从哪里开始。
解决方案
回答
通常,每个操作系统都有用户界面准则。对于Windows,请在此处查看。 (编辑:该文章中的链接已断开。但是在MSDN上的"用户界面指南"搜索中包含有关所有内容的文章)
苹果也有自己的。另外,我们可能要牢记可访问性。
回答
检查颜色是否具有良好对比度的一个技巧是对其进行快照并转换为灰度。如果我们看不懂任何内容,肯定会选择颜色。
另外,尽管与用户界面无关,《 Before&After Magazine》可以为我们提供有关颜色,设计和相关主题的一些很好的提示。它甚至有一些免费的pdf可供下载。
回答
詹妮弗·特德威尔(Jenifer Tidwell)撰写的《设计接口》一书中有关于该主题的整章内容(第9章,在线摘录)。
整本书值得推荐。
回答
我很难找到一种看起来很好的颜色,所以我作弊并使用了自然界的图片,这些图片大多是我想要的颜色(例如绿色),然后我使用此网站提取了主要的配色方案。通常,自然界在设置自己的漂亮配色方案方面做得很好。
回答
对于Web UI,我将在这里闲逛,说Web设计中最重要的颜色是白色或者"浅色"。这是在上面放置大量内容的颜色。
当涉及到主要内容区域时,始终是深色文本,浅色背景。
布局中最重要的规则是空格。让内容呼吸。
遵循这两个简单规则比大多数"用户界面可用性"准则更有价值。
顺便说一句,MS用户界面准则(大体上)是可怕的。阅读Jakob Nielsen,了解Apple的设计美学,但不要使用MS的"中性灰色/蓝色Crunchbox" UI的12步骤向导10pt文本哲学。
(我说,作为长期的MS GUI程序员)
回答
使用高对比度的彩色组合;白色背景上的黑色文本是高对比度组合的最佳示例。
一个坏的组合是红色背景上的绿色文本。对于色盲人(如我自己)来说,这太可怕了。
查看色盲人士的网站外观:colorfilter.wickline.org
回答
至于桌面应用程序:无论做什么,都不要使用手工挑选的颜色。坚持使用诸如"窗口背景","菜单文本"等命名的系统颜色。否则,依赖于操作系统辅助功能的人们将被锁定在颜色选择中(例如,无法选择高对比度主题),并且喜欢自定义桌面主题的人会认为应用程序很笨拙。
回答
以下是一些有关排版中可用性的简单指示。这些事情主要解决可读性和可访问性问题。
待办事项:
- 使用相对字体大小(em)
- 使用LANG属性识别文档中的语言更改
- 在白色背景上的黑色文本
- 对于标题,请使用H1,H2等并将其适当嵌套
- 整理内容并组织标题以适合用户的需求
- 撰写清晰简单的副本
- 左对齐,衣衫right
- 文字到背景的颜色必须具有高对比度
不要:
- 使用"单击此处"或者"更多"作为链接文本
- 使用下划线强调
- 超过2个字体类型系列
- 斜体字
- 使用大写字母的文本块
- 在白色背景上使用真实的红色或者真实的蓝色文本(色差)