开发者易于理解的UI技巧

20

有哪些关键的UI设计技巧是每个开发者都应该知道的呢?

虽然有很多面向开发者的UI资源(例如Joel Spolsky的《程序员的用户界面设计》),但我更感兴趣的是一份可以在1至2页内传达的清单。

我更关心实用的、日常使用的UI技巧,而非在UI设计会议上讨论的总体UI设计目标(假定至少有一个拥有良好UI感觉的人参加)。这样的技巧清单可能涵盖了日常程序员遇到的80%左右的情况。

19个回答

33
  • 使用标准菜单栏(业余的GUI设计师似乎喜欢自己制定规则)。确保第一个项目是文件,编辑和视图,最后一个是帮助
  • 不要担心颜色主题或皮肤;坚持使用与您的平台一致的标准外观
  • 使用默认系统字体
  • 使用与您的平台一致的菜单加速器
  • 坚持使用经过验证的布局,顶部有菜单栏,底部有状态栏,如果需要,在左侧可以有导航窗格
  • 永远不要进行系统范围的截取
  • 如果可以选择,请使所有窗口可调整大小。
  • 使用单选按钮组进行“精确选择”。始终确保其中一个默认选中。如果要求用户不选择任何选项,请添加另一个单选按钮“无选择”
  • 使用复选框组进行“选零个或多个”
  • 如有必要,请限制输入(例如:在数字输入字段中简单地忽略非数字),而不是等待用户输入数据,提交,然后弹出对话框说“嘿,字母不允许!”。如果不允许,请首先不接受它们。
  • 对于输入内容要宽容一点。如果他们在社会安全号码字段中省略了连字符或者在您不想要它们的时候加入了连字符,不要为此大惊小怪,计算机聪明点,让它自己判断 xxxxxxxxx、xxx xx xxxx 和 xxx-xx-xxxx 都是有效的社会保障号码。
  • 在长字段(例如序列号等)中始终允许空格。如果允许用户以三个或四个数字组成一组,则数据质量会大大提高。如果您的数据模型不能处理空格,则可以在保存数据之前删除它们。
  • 避免弹出对话框。除非绝对必要,否则永远不要显示弹出对话框。如果您决定必须使用,请停下来重新思考设计,然后再继续。有时它们是必要的,但这些情况比您想象的要少得多。
  • 注意键盘遍历。大多数工具包都尝试做到正确,但是一定要仔细检查。用户应该能够使用 tab 键以逻辑方式遍历小部件。
  • 当然,所有这些规则都可以打破。但只有在有正当理由的情况下才能打破它。

    记住,软件是为了帮助用户,它应该做用户想要的事情,而不是让他们做它想要的事情。


    1
    我想补充的是,注意如何在 GUI 中使用键盘通常是软件是否感到业余或专业的标志。有了良好的界面,用户可以以任何方式完全浏览它。这通常也意味着当然要仔细考虑基础数据模型。 - Donal Fellows

    11

    当你即将执行会改变或删除信息的操作时,不要询问“确定吗”-用户会学习在操作中点击该按钮。尝试在系统设计中允许“撤消”。


    LOL - “您确定要格式化硬盘吗?”与“撤消格式化硬盘” - Steven A. Lowe
    4
    如果真的能够“撤销格式化硬盘”,那么这个应用会不会更好呢?做完之后再能够撤销几乎总是比弹出提示框更好。显然,对于无法恢复的操作,需要对话框提醒。关键是要避免在最初就构建无法恢复的操作。 - Bryan Oakley

    8

    让默认选择成为大多数用户都会满意的选择。


    7

    始终为用户提供“退出方式”,而不需要使用返回按钮。

    最好的例子:

    如果出现错误,请给他们一个链接,让他们返回到之前的页面(或至少回到开始的页面)。


    2
    是的,但也要确保如果他们使用返回按钮,它不会死掉,因为“返回”按钮是人们确实倾向于使用的UI的批准部分。 - Kent Fredric
    +1,特别是考虑到 JSF 往往倾向于搞乱“后退”按钮的功能... - karlgrz

    6

    尽可能多地使用工具提示。这些小东西可以为最终用户提供大量帮助,而且对应用程序本身没有干扰。


    3
    不要创建一个带有成千上万个类似的任意图标的应用程序,需要工具提示才能知道它们的作用。;) - Kent Fredric

    5

    设计UI时,要尽可能简单,但不能过于简单。


    4
    1. 询问用户,而不是自己瞎想
    2. 简化 - 精简步骤,减少点击次数等
    3. 了解可用性原则

    不要问用户,要观察用户!就像Neilson所说的一样。http://www.useit.com/alertbox/20010805.html - pfctdayelise
    @pfctdayelise:非常正确,尽可能的时候 - Steven A. Lowe

    4

    4

    正确的制表位是必须的。


    我不明白这是什么意思?我使用的绝大多数应用程序都没有“制表位”的概念。我认为,为了使这个答案有价值,它需要更多的细节。 - Bryan Oakley
    我知道这已经很古老了,但是“制表位”是应用程序中按Tab键时焦点将切换到的位置。例如,在输入评论时,下一个制表位是“添加评论”按钮。如果应用程序不考虑制表位顺序,可能会导致完全随机的焦点切换,因此必须使用鼠标来切换焦点。 - Chris Pitman
    1
    据我所知,这被称为“选项卡顺序”或“字段顺序”。制表位是打字机或可能是文字处理器具有的功能。 - Jakob Borg

    3
    不要为了提高“可发现性”而牺牲基本的清晰度和可用性。

    你能描述一下你所说的“可发现性”是什么意思吗? - David Koelle
    发现性:“任何功能在需要的上下文中被找到的能力。”因此,在这种情况下,我建议您不要过度假设人们无法找到某个功能。相反,使用常见的约定,以便用户的第一(或第二)次猜测是正确的。 - Larsenal

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接