[转] 成功的用户界面的8个特性

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

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

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 / 清楚的
清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。
2009111011382570
这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

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

3.  Familiar / 熟悉
许多设计师努力使自己的界面,直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。熟悉就是, 跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。
2009111011384270
GoPlan的标签页式界面。标签很熟悉,因为他们模仿文件夹上的标签。你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

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

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

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

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。这就是说,你应该为了你的用户来包装你的界面的的外观和风格。此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。
2009111011385924
谷歌是众所周知的极简洁的界面,他们关注功能重于形式,但他们显然的花费时间美化了Chrome用户界面元素,如按钮和图标,使它们看起来正好体现了微妙的梯度和像素超薄突出。

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

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

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

dongGwo Posted on 二月 3rd, 2010 in 好文好文 | No Comments »

As I Moved On

dongGwo Posted on 一月 29th, 2010 in 音乐的美丽 | 1 Comment »

i 家园 – icon

最近在做i家园(社区)的页面上的修改,越做越茫然…本身对于社区没有多少研究,也不知道本次修改想要达到什么目的,只是外观上的改变那已经是毫无意义了,还是个空壳子。目前很多网站还停留在使用内容、奖励、广告等方式拉用户,当然i家园也是…但是对于用户注册后,如何留住用户却似乎没有想过,也可以说想过但是没有去做,等于没有想过- -!还是作为一个美工想的太多了…

iHome_icon

dongGwo Posted on 一月 22nd, 2010 in 一些东西 | 1 Comment »

PNG透明的几种方法

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 »

dongGwo Posted on 一月 15th, 2010 in 好文好文 | No Comments »

“机械迷城”

最近在玩个游戏,冒险解密的,挺有意思,慢慢玩~

thumb

游戏简介:
由捷克独立开发小组Amanita Design设计制作的最新作品《Machinarium》PC版发售日定于09年10月16日。此作堪称以独特的水墨风格展现给玩家的是一款冒险解谜游 戏,值得期待。 游戏将采用传统点击式界面,和Samorost游戏相似,2D背景和人物,没有对白.不过,Machinarium游戏时间将更长更复杂,这次画面将由手 画,而玩家有个小物品栏。 Machinarium中每个人都是机器人,包括我们的小英雄,他将对从 “Black Cap Brotherhood”来的坏人。 本游戏在2009年独立游戏节上斩获了视觉艺术奖。

专题地址:http://pc.pcgames.com.cn/pczq/jxmc/

BT下载:http://img.pconline.com.cn/images/upload/upc/tx/gamesbbs6/0910/21/c0/1821106_1256120871830.rar

dongGwo Posted on 一月 8th, 2010 in 不明分类 | 2 Comments »

闭上眼睛,安静聆听…

有些清淡,有些舒缓,有些悲伤,有些遥远,有些迫近,首首无法忘怀!
这里的音乐适合阳光落进房间,安静的下午,及睡前聆听……
这里的音乐不是酒,可以一饮而尽,
这里的音乐是一杯茶,需要你细细品味……

集合了我很长时间听过的、搜集到的美妙音乐,包括动漫、游戏、电影、电视等配乐、流行、独立、古典、NEWAGE、FLOK、凯尔特等等的舒缓安宁的音乐,都罗列其中,欢迎品尝…………

dongGwo Posted on 一月 6th, 2010 in 音乐的美丽 | No Comments »

boy a

boya

记得看过boy a这部电影,是时候听听彼此的…

dongGwo Posted on 一月 4th, 2010 in 我的生活 | No Comments »

唠叨一下

SDC10026

新的一年了,回头看了看正在进行的项目,稍抱怨一下。已经做了快大半年的样子了,没什么进展,一直在摸索的过程中…过程是很痛苦的,项目开始时候的计划完全被打乱了。资源、人力、时间等问题…我们没有PM,很多人都不知道自己应该扮演一个什么样的角色,当项目出了问题的时候没有得到一个真正的解决,只顾着完成任务或者更琐碎的问题。我经历过家长式的管理,周围的人也认命于此,现在也会听到BOSS喜欢什么样的、喜欢什么样的风格之类的话。管理层最能干涉的就是他们所能看到的东西,就是页面!看上不好不好看,添加自己的想法,而没有去想过页面为什么会这个样子,到底出现了什么问题,难道真的是我这样的美工问题吗?…还没开始做就给我画了个圈,我设计做出来的东西都没有那个好,另一种情况就是我的实力确实不怎么样…经常听到这么一句话“抄过来;照着抄” 最的他妈的鄙视这种人!现在差不多摆脱了这种情况,要为我们争取更多发挥空间。

我们没有一个PRD,我们的工作方式更像一个工作室,凭着我们自己的意识去做,没有什么规范,忽略了很多细节…我们在路上,团队也在慢慢扩大,寻找规范、我们一直在成长,^^

dongGwo Posted on 一月 3rd, 2010 in 我的生活 | 4 Comments »