用户界面 - 颜色和布局

时间:2008-08-07 20:01:14

标签: user-interface usability

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

是否有任何指南或经验法则适用于配色方案,布局,格式等?我想确保访问者的可读性和清晰度,但不要同时保持平淡和沉闷。

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

8 个答案:

答案 0 :(得分:5)

通常,每个操作系统都有用户界面指南。对于Windows,请look here。 (编辑:该帖子中的链接已损坏。但在MSDN上搜索“User Interface Guidelines”有关于所有内容的文章。

Apple也拥有自己的产品。此外,您可能需要牢记accessibility

答案 1 :(得分:3)

检查颜色是否具有良好对比度的一个提示是拍摄快照并转换为灰度。如果你看不懂东西,颜色肯定是选择不好。

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

答案 2 :(得分:2)

Jenifer Tidwell撰写的书Designing Interfaces有一整章关于这个主题(第9章,摘录在线)。 整本书值得推荐。

答案 3 :(得分:2)

对于网络用户界面,我将在这里走出去,说网页设计中最重要的颜色是白色或“浅色”。这是您放置密集内容的颜色。

深色文字,浅色背景,总是,当涉及到主要内容区域时。

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

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

顺便说一句,MS用户界面指南(大体上)可怕。阅读雅各布尼尔森,看看苹果设计美学,但远离MS“中性灰/蓝色crunchbox”12步精灵10pt文本哲学UI。

(我说这是一个长期的MS GUI程序员)

答案 4 :(得分:1)

我很难找到一起看起来很好的颜色,所以我欺骗并使用大自然的图片,这些图片大多是我想要的颜色(例如绿色),然后我用this website拉出主色方案。一般来说,大自然可以很好地设置自己漂亮的配色方案。

答案 5 :(得分:1)

使用高对比度彩色组合;白色背景上的黑色文字是高对比度组合的最佳例子。

坏组合是红色背景上的绿色文字。这对色盲人士(比如我自己)来说太可怕了。

查看您的网站对色盲人员的看法:colorfilter.wickline.org

答案 6 :(得分:0)

对于桌面应用程序:无论您做什么,都不要使用手工挑选的颜色。坚持使用命名的系统颜色,如“窗口背景”,“菜单文本”等。否则,依赖于OS辅助功能的人将被锁定您的颜色选择(例如,无法选择高对比度主题)和喜欢自定义桌面主题的人会觉得你的应用程序很难看。

答案 7 :(得分:0)

以下是排版中可用性的一些简单指示。这些事情主要涉及可读性和可访问性问题。

DOS:

  • 使用相对字体大小调整(em)
  • 使用LANG属性
  • 识别文档中的语言更改
  • 白色背景上的黑色文字
  • 对于标题,使用H1,H2等并适当地嵌套
  • 整理内容并整理符合用户所需内容的标题
  • 写清楚简单的副本
  • 左对齐,衣衫褴褛
  • 文字到背景颜色必须是高对比度

DONTs:

  • 使用“点击此处”或“更多”作为链接文字
  • 使用下划线强调
  • 超过2个字体类型家庭
  • 斜体
  • 使用全部大写的文本块
  • 在白色背景上使用真正的红色或真蓝色文字(色差)