当你构建你的用户界面和网站的时候，有各种各样的关于界面设计方法和模式的信息你可以使用， 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面， 但是究竟什么才是一个良好的界面？ 一个有价值的用户界面应该具有那些特性？以下八个特性是一个良好的用户界面所必须的：

清楚、简明、熟悉、易响应、一致、吸引力、高效、宽容

There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. Following guidelines from experts will likely lead you towards creating a good user interface — but what exactly is a good interface? What are the characteristics of an effective user interface?

1.  Clear / 清楚的
清晰度是用户界面设计最重要的元素。事实上，用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里，他们会困惑和沮丧。

这是什么呢？鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise / 简明
清晰的用户界面是很好的，但是，您应该谨慎，不要陷入过度明晰。定义和解释很容易被添加，但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释，您的用户将不得不花费过多的时间去读它们。
不仅要保持清晰，而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项，就不要用两个。 保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易，需要足够的时间和努力来实现，但其回报是值得的。  

在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar / 熟悉
许多设计师努力使自己的界面，直观。但到底直观的真正意思是什么？直观也就是就是说可以自然地，本能地理解和领会。但是你怎么能做到直观一些？你可通过是它变的熟悉来实现。熟悉就是， 跟你以前遇到过的东西相似。当你熟悉的东西，你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。

GoPlan的标签页式界面。标签很熟悉，因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive / 易响应
易响应意味着两件事。首先，易响应意味着快速。如果没有软件在后台，界面应该响应很快。等待加载和缓慢的界面是令人沮丧。看起来加载的很快，反正就是界面快速载入（即使内容尚未赶上）改善了用户体验。
易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户，告知他们现在怎么了。你成功地按下那个按钮吗？你将如何知道？按钮应显示一个被按了的状态反馈，或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。是软件挂了还是内容载入中？用转动的轮子或显示进度栏的方式来保持用户在进程中。

Gmail会显示一个进度栏当您第一次进入您的收件箱。 而不是逐步载入网页时，一旦一切准备就绪整个页面即时显示。

5.  Consistent / 一致
之前我谈过关于上下文的重要性，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。
一致的界面，使用户能够开发惯用模式-他们会了解不同的按钮，标签，图示和其他界面元素的外观，并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作，能够从过去的经验中更快的总结知道如何操作新功能。

在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive / 吸引力
这可能有一点争议，但我相信一个良好的界面应该有吸引力。吸引力在某种意义上，是与界面交互变得是愉快。是的，你可以让你的用户界面简单，易于使用，有效率和易反应，它将尽其出色-但如果你可以做额外的一步，使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的，你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站，所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。这就是说，你应该为了你的用户来包装你的界面的的外观和风格。此外，美感设计应适度使用，并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。

谷歌是众所周知的极简洁的界面，他们关注功能重于形式，但他们显然的花费时间美化了Chrome用户界面元素，如按钮和图标，使它们看起来正好体现了微妙的梯度和像素超薄突出。

7.  Efficient / 高效率
用户界面像是车辆，带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。一个良好的界面可让您在执行这些功能更快。现在， ‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上，当然界面到头来还是需要高效？差不多，但不完全。
你真正需要做的是使界面能高效的找出用户努力想要实现的，然后让他们可以有条不紊的做到。您必须确定您的应用程序应该如何工作’ -什么功能它需要有，什么样的目标是你努力努力争取实现？实现一个界面，可以让人们轻松地完成他们想要做的，而不只是简单的实现对各个功能的访问。

苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情，并在照片控制中提供按钮来分别完成他们。

8.  Forgiving / 宽容
没有人是完美的，当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面，纠正问题。
一个宽容的界面可以使你的用户远离代价高昂的错误。例如，如果有人删除了重要的信息，他们可以轻松地重新检索或撤消这一行动？ 当有人浏览到损坏或不存在的网页，他们会看到什么？他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地？

错误的删除了电子邮件？Gmail可让您迅速取消上一次的操作。

To conclude…结束…
实现这些特性实际上可能同实现另外一些特性产生冲突。例如，试图使一个界面清晰，您可能会增加太多的描述和解释，即最终使整个界面变得大而笨重。缩减容量，努力使事情简洁可能产生相反的效果，使东西模糊不清。实现一个完美的平衡需要的技能和时间，解决方案根据不同的案例也并不一样。

png透明针对IE6一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用IE的滤镜来解决的。

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有一下几种：

1、css方法

css：

.pngs {
height: 90px;width: 90px;
background-image:url(icon_home.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’);  /* IE6 */
_ background-image: none; /* IE6 */
}

xhtml：

<div class=”pngs”></div>

这种方法的优点就是使用简单方便，但是不能作为背景，且只能用作单个png图片的使用。如果要作为背景，需要新增加一个div层，并设置其position:relative;

Read the rest of this entry »