糟糕界面集锦设计界面考虑要点Word格式文档下载.docx
《糟糕界面集锦设计界面考虑要点Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《糟糕界面集锦设计界面考虑要点Word格式文档下载.docx（15页珍藏版）》请在冰豆网上搜索。
理论上这似乎是一个很好的特征，因为它能很快让人找到出错的程序。
但实际上由于被选择的项目背景是蓝色的（就不说用户可能会改变系统颜色设置了），这种蓝底红字实在是难以阅读。
另外一个问题与对比度相关的便是用户界面中的关键元素是否显目。
就以QuickTime4，5及6各自的电影播放控制按钮来说吧。
灰色的，低对比度的QuickTime4按钮对于有些人是非常难以辨认的（特别是眼睛没有年轻人亮行动没有年轻人快的那些中老年人来说）而这些在QuickTime5，6中“Aqua”化的按钮则变得对比度更强从而好用多了。
2．考虑文化差异
许多文化中，红色都表示一种否定色彩的回答或命令，而绿色则表示一种积极色彩的回答或命令。
即红代表“否”而绿代表“是”。
如果忽略这点则可能造成问题。
这个糟糕的以是否回答的Windows风格的对话框竟然在Mac操作系统X中也出现了。
其错误不仅仅在于它非动词性质的按钮而且更重要的是其使用的颜色也有问题。
“否“用红叉表示，似乎表明了它是一个否定的，不应被选择的按钮－但实际上，当你一看提问便知选择“否”并不会使数据丢失而看起来似乎安全的绿色标志则实际上是具有破坏性的选择。
使用颜色的失误正反两种情况都有：
一些应用程序本来是安全的选择却做了危险的显示寓意。
比如说一个提示性质的对话框使用红色符号来无谓的吓人；
相反的，上面截图中的白色提示图标理应改为黄色的警告图标。
我们一定要根据上下文使用正确的颜色设置。
硬性使用红－绿颜色对来表示这些与是/否选择无关的问题回答大体说来是有害的。
比如说，一个计划程序用绿色表示人员是合适的而红色表示人员不太合适这样的方案绝对是有问题的，因为这种颜色的寓意与具体使用的情形关系并不是太明显。
而在这种情况下，用一个亮色/有阴影的灰色的配色方案会更好一些。
因为灰色通常表示一种无效状态。
3．不要硬性规定颜色
你的程序如果使用自定义控件或自定义高亮颜色（比如文字的颜色），不要硬性规定这些元素的颜色。
如果你规定了颜色，如果用户使用的可视化主题和窗口管理器所设定的缺省颜色不一样时，你程序就有可能完蛋：
要么因为难看，要么因为不能阅读，要么因为即难看又不能阅读。
不要硬性使用颜色而要使用系统提供的颜色设定。
如Mac操作系统的字符颜色（accentcolors）和控件颜色就是由显示管理器来设置的。
如果使用系统颜色不可行时（比如说你程序所运行的平台并没有设置颜色的功能），那么就应该将配色方案写成用户自定义的。
如可以通过程序中的参数设定窗口中的颜色拣取器来让用户改变文本颜色。
总是要保证测试你的程序：
使用不同的窗口管理主题来确保在不同的颜色配置条件之下你的程序都是易于使用的。
4．不要过度使用
就像界面中的声音一样，如果使用得当，颜色也是非常有效的。
但是太多的颜色也会让你的界面主题分散而且华而不实。
当一个界面中太多的元素都是以亮色显示时，这些颜色效果就会相互抵消从而造成每一个元素都不会突出，从而看起来个个都好像是沉闷的灰色元素一样。
这一点对于图标的设计尤为重要：
大片的，明亮的颜色区域会让图标的其它部分黯然无光。
用颜色就要用得有意义。
声音的使用
如果使用得当，声音就像颜色一样会是一个具有潜力的强大的和高信息量的界面元素。
但还是应该少而精的使用声音元素。
1．不要过度使用
声音或许会造成非常吵闹的效果，所以一定要在真正需要的地方使用它。
在作为可视的提示或作为视力不佳的通用性访问特征时，声音使用最为有效。
当然，在一个程序中的各种操作都有声音提示将会造成听觉过载甚至于困扰以及惹恼用户。
所以要避免在相当短的时间内产生过多的声音信号，从而让用户将声音和一个错误消息或者操作完成相联系。
2．不要单独使用声音
相比需要用户干预的对话框来说，声音是一种过而不留痕的信号。
所以不要将声音作为传递信息的唯一形式，因为用户有可能没有听到声音；
用户可能会听力不佳；
可能会在程序播放声音时不在现场；
也可能就因为你过度使用声音嫌烦而直接关掉音响！
图标的使用
在一个图形界面环境中，图标是文档、目录等信息的载体而且用户主要通过图标来对这些对象进行操作。
请记住：
对于大多数用户来说，图标并不是在文件系统中某个位置存放的文件的一个指针――用户认为图标本身即是文件。
注意：
现在只有Mac操作系统图标设计指南。
而对于Windows以及KDE窗口界面系统的图标设计指南将在以后发布。
不过，现在这个指南的某些章节是与平台无关的（platform-agnostic）。
您可以访问
1．桌面的革命
Mac操作系统X（Mac10）的发布带来了全新的桌面图标设计方案。
Mac7已经给大家提供了易于设定的256色图标；
Mac8.5给我们提供了8位通道的真彩图标；
但是MacX的128x128大小的缩略图式图标则是一个更大的飞跃。
在某些方面，这个改变又是不太让人容易接受的。
因为使用ResEdit软件来一个一个象素绘制图标的年代已经过去，而变成了使用诸如Illustrator或Photoshop这类的大型工具来绘制它们；
有些人也可能说那些友好的，让人感到温暖的百分之百的手绘图标的年代已经逝去。
但是另一方面，Aqua方案又使得图标变得水晶般透亮而且在大显示器上显示得足够大。
谢谢苹果在Aqua人机界面设计方案上所做的努力。
相比Mac7或Mac8/9所创建的图标，在软件中使用Aqua图标总的来说会与整个Mac10协调和一致。
这最终达到视觉统一的效果。
相比昔日系统中的32x32象素图标的设计来说，创建一个Mac10图标会更难一些。
首先图标的面积比以前大了很多，其次表现的细节也比以前要求更高，而且还要确保在低分辨率情况下（甚至到16x16大小条件下）依然显示良好。
从而因这些要求使得图标设计更有难度。
由于Aqua图标提供了从16x16到128x128范围之间的任意大小的图标，图标设计师所以不能只设计一款128x128，或16x16，或在这范围之内的一个尺寸的图标；
图标设计师必须为这个范围内的任意一个大小的方形设计一个图标。
为了设计出一款干净、醒目而且易懂的MacX的Aqua图标，我们将会在这篇文章里介绍设计师必须要了解的设计哲学和设计概念。
2．基础知识
图1应用程序图标（左）和文档图标
任意Aqua图标的基础是形状，这是首当其冲的特征。
而颜色及图案的差异则是紧随其后的。
应用程序图标（图1左）通常是稍微反时针旋转的矩形图片。
它们经常含有一些具有标志意义的元素（通常是一个工具，如一支笔或是一把刷子）使得用户知道这个程序大致是干什么的。
应用程序图标应该具备一种传递当它们被打开时会发生特定事件的含义。
而把产品标题作为图标则是一种不好的选择。
文档图标（图1右）通常与其相关的应用程序（hostapplication）图标在色彩和图案保持类似，但是这些内容应该被一个右上卷边的纸状图案所包围。
如果相关的应用程序包含一个工具或标志（如TextEdit的笔或预览用的放大镜），那么文档图标中就应该略去这个工具或标志，以免用户将这两类图标混淆。
如果一个文档图标包含有一个徽标例如文件类型的标志符，那么这个徽标就应该完全包含在这个文档图标纸型图案中（如图1是一个好的例子而图3.A是一个不好的例子）。
图2.A一组设计良好的图标
图2.B设计较差的图标
工具条图标设计图案甚至应该更与原始形状接近。
如果一行工具图标大体相似则会造成用户使用时混淆。
这就是在浏览器工具条中做一个圆形停止浏览图标并且还有一个圆形的刷新箭头图标不好的原因了。
就是这个原因，苹果在Mac10中重新设计了一组浏览器工具条图标，它们形状各自相异：
计算机图标是矩形的；
应用程序图标是三角形的；
删除图标是圆形的等等。
即是这些图标的颜色属于同一个颜色系列，它们仍然容易区别――相反，在Mac10中的浏览器Chimera中的工具条（图2.B）则缺乏与上述工具条相匹敌的设计。
3.风格
图3.AMac9风格，不要这样做
保持Aqua图标的统一风格也是非常重要的。
Finder图标（findericons）应该是具有真实照片感的，但不完全是。
在任何情况下图标也不应该是一副照片的缩小版。
而且，尽管Aqua图标是3D的，但也不完全是3D的，毕竟我们还要保留图标的基本形状通透（shinethrough）。
Aqua图标中的3D效果应该以我们面对前方稍上的角度来渲染，就像观察者在看一个放置在他（她）前面桌子上的物体一样。
另一方面，工具条图标应该是较简单而且较平面的东西。
设计工具条图标时应该较少使用阴影，3D效果。
所有工具条图标都应该是正（面直对）视图（或如果可行的话，俯（首向下的）视图）。
应用程序图标（如终端或网络工具）也应该是正视图。
值得注意的是Mac10的图标阴影风格也和以往的版本大不一样。
与Mac9图标阴影是由光源以左上角度打过来不同的是，Mac10采用正上方光源（即垂直90度）产生的阴影。
阴影应该在物体的下方而非侧面（如图3.A就是错误的阴影）。
图3.B无可救药。
不要这样做。
通常，模仿Aqua窗体控件和按钮等做一个类似风格的图标是错误的想法。
不仅此种风格无可救药，而且由于这种样式的窗体控件充斥了系统的每个角落。
使用与Aqua界面元素类似的图样也会让用户不能分清楚哪是图标哪是控件。
当我们使用得当的时候，这些珠宝般晶亮的控件会将这些图标衬托得华丽多彩而且过目不忘。
不过，如果使用不当，你的图标将被迷失在早已存在的这些Aqua珠宝的汪洋大海之中。
特别的，除非是要使用透明和光泽特性表达一种特殊的意义，否则这两个特性总会被排除在图标的设计之外（举例来说如图1.A中预览程序图标中的放大镜）。
4.优雅的减少细节
图4.A细节逐渐消失
创建Mac10其中一个关键概念便是当创建文件浏览器中使用的图标要让这个图标随着它尺寸的变小让细节逐步消失。
说着容易做着难，因为你不知道图标变小后是什么样子，也不知道某些细节在变小后是什么样子，因为图标缩小时某些细节就会被其它细节淹没。
在这种情况下，图标总体的形状和颜色就被那些在128x128图标中的局部细节来的更为重要了。
创建这种效果的时候，有时也把这个过程叫做“退化细节（recedingdetail）”，也需要很多尝试，但这最终还是值得的，因为这保证了你的图标在尺寸很小的时候依然可以“容颜依旧”。
典型的举例来自程序TextEdit的图标，这个图标包含有一段文字。
尽管少量细节丢失了，这个图标的文字块依然在48x48大小的图标中依然存在。
不过，图标上页面上的横格细线看不见了。
即使在16x16大小（图4.A最右的图标）图标尺寸最小的情况下这个文字块还是有一个墨色的轮廓依然保留，而最基本的元素信纸及笔依然可以辨认。
5.采用小图标资源隐藏技术（TakeAHint）
每一个Mac10Finder图标重要的一点便是除了128x128资源之外还隐藏有一些其它尺寸的图标资源。
隐藏图标尺寸有3种：
16x16，32x32及48x48。
如
升级会员 