如何增强包含太多(必要)功能的丑陋窗户的美感？
我正在处理的软件的窗口对话框之一看起来有点像这样:(从这个编码恐怖帖子复制的原始屏幕截图,此SO问题上提供的其他示例)
替代文字http://www.codinghorror.com/blog/images/wgetgui-screenshot.png
问题是没有任何选项可以删除(那些已经可以使用的选项),并且它们必须一目了然(即不允许选项卡)编辑:我添加了一条注释,解释了为什么选项卡不是我的具体项目中的选项.
我尝试使用颜色,添加图标,但它只是增加了一个整体的感觉,有人在夏季实习期间使用Visual Studio表单设计器随机丢弃控件.
如何在不删除功能的情况下使这个对话框更加用户友好？
编辑:我采用的GUI示例有很多明显的设计缺陷(参见那些答案1 2),但即使修复了这些(我已经在我正在处理的软件上完成),对话框看起来仍然很难看.
以下是另一个例子(信用).控件(几乎)正确排列,使用适当的控件等,但总体结果仍然很糟糕:
Dan*_*ski 10
考虑到这些限制,我认为你没有太多选择.
一个好的起点是等于对齐和控制距离以增加整体对称性,最终目标是减少视觉混乱.
例子:
- 组合框"特殊"和"运行选项"应具有相同的高度.
- "保存设置"和"退出"四个按钮之间的距离应相等.
- 所有按钮应具有相同的高度,如果可能的话避免自动换行.
- 对所有单行编辑框使用相同的高度.
- 配额标签及其文本字段应位于相同的基线.
- 组框标题与其第一个控件之间的距离应相等(将"运行选项"与"检索选项"进行比较)
- 通常增加控件之间的距离,即使表单看起来不那么密集.
内容修复:
- 对相同的事物使用相同的标题/名称.例如,您使用"Append to l ogfile"但"Overwrite L ogfile"
- 使用相同的字符的情况下,有时是" Ø NLY第一个"," è非常S ^英格尔W¯¯ ORD",有时"这是Ç黄褐色的外装".决定一个方案并因此使用它(句子案例和标题案例是最常见的)
- 不要试图冷静,"Go 2 background"看起来不太专业.
- 避免使用不可读的快捷方式或根本没有内容的控件.如果用户必须停下来控制并思考:"这件事做了什么？"
一些更激进/争议的变化:
- 尝试使组框更加对称,可能重新定位它们并使用相同的高度.如有必要,使用两列复选框,这看起来仍然比不均匀的组框更好.
- 除非绝对必要,否则从两个多行编辑框中删除水平滚动条
- 摆脱"清除"按钮.对于buttom左侧的列表框,你必须提供一些其他方法来删除项目,也许也可以将它变成一个多文本框.
- 尝试使用可检查列表框或属性网格替换复选框集合.
经验法则:
想象一下,每个控件的边界框的线条都会延长,直到到达表格边界.到达边界的线越少越好.(因为正确对齐的控件会产生更多事件( - >不太可见的唯一可见)线)
关于颜色和图标的使用:
简单地添加图标和颜色并不能解决这种形式的基本问题.它们都受到控件过载的影响,添加更多只会使问题恶化,因为它们只会增加更多的视觉噪音,但不会提供更多的视觉提示.
- 对于经验法则+1,这是一种非常好的方式来"可视化"不均匀控件产生的混乱概念. (2认同)
你的例子的问题,以及它们看起来混乱的原因是元素之间没有足够的间距.你认为你通过缩小尺寸来节省空间,并将它们放在一起,但这是一种虚假的经济,因为你的眼睛必须更加努力地将元素与彼此区分开来.考虑编写一个必须对这些接口进行OCR的计算机视觉程序,以及您只需确定哪个元素是哪个元素的挑战,更不用说类型所说的内容了.
无论你的程序员效率本能可能会说什么......你可以在你的元素之间放置空间,而且,即使有大量完全"浪费"的空间也没关系.
看看这个
花与它的背景之间有明显的界限.摄影的浅景深给人一种清晰的对比,让您可以非常迅速地构建一个精神的sillouette.
丛林http://www.statravelbuzz.co.uk/wp-content/jungle-taranaki-new-zealand.jpg
这张照片里发生了什么？有太多的细节,而且它到处都是.
看看这里
http://www.papress.com/thinkingwithtype/text/line_spacing.htm
alt text http://www.papress.com/thinkingwithtype/text/text_images/text_images/leading.gif
考虑行间距对你区分单词的能力的影响.它对杂乱的视觉感觉有什么影响？
您可以从类型示例中看到,您不必在空间效率方面放弃太多,以便在视觉外观方面获得巨大收益.
