【问题标题】:User Interfaces - Colors and Layout用户界面 - 颜色和布局
【发布时间】:2010-09-05 12:52:22
【问题描述】:

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

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

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

【问题讨论】:

    标签: user-interface usability


    【解决方案1】:

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

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

    【讨论】:

      【解决方案2】:

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

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

      【讨论】:

        【解决方案3】:

        Jenifer Tidwell 所著的《Designing Interfaces》一书有一整章关于这个主题(第 9 章,摘录可在线访问)。 整本书值得推荐。

        【讨论】:

          【解决方案4】:

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

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

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

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

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

          (我是说作为一名长期的 MS GUI 程序员)

          【讨论】:

            【解决方案5】:

            我很难找到搭配起来很好看的颜色,所以我作弊并使用来自大自然的图片,这些图片主要是我想要的颜色(比如绿色),然后我使用this website 来提取主要配色方案。一般来说,大自然在设置自己漂亮的配色方案方面做得很好。

            【讨论】:

              【解决方案6】:

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

              一个糟糕的组合是红色背景上的绿色文本。这对色盲的人(比如我自己)来说太可怕了。

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

              【讨论】:

                【解决方案7】:

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

                【讨论】:

                  【解决方案8】:

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

                  做:

                  • 使用相对字体大小 (em)
                  • 使用 LANG 属性识别文档中的语言更改
                  • 白底黑字
                  • 对于标题,使用 H1、H2 等并适当嵌套它们
                  • 将内容分块并使用符合用户所需内容的标题进行组织
                  • 写出简洁明了的文案
                  • 左对齐,右对齐
                  • 文本到背景的颜色必须是高对比度的

                  不要:

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

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2011-05-29
                    • 1970-01-01
                    • 2023-02-12
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多