Archive

Posts Tagged ‘experience’

漂亮的用户界面未必是一个好的用户界面

November 13th, 2008
No comments

原文链接：Experience vs. Function — a Beautiful UI is Not Always the Best
如果你想让你的产品具有更好的可用性，一个好的用户界面(UI)是必要的，但是要小心陷入了把大部分的焦点放在界面上的陷阱。

A good UI should fade away(这句一直不知道怎么翻译),把内容放在首位 - 它必须显示清楚。很多时候设计师会过度设计UI - 把精力放在控件和按钮这些效果上面，而忽略内容的体现。

要记住你的访问者或者说用户来你网站是要做什么 - 他们可能不会赏识你的按钮或者惊叹你的导行栏风格。 如果你把UI设计过度，没有清晰体现，那么它(UI效果)将会在使用的时候抢去用户的注意力。

让我们看看一个例子。这里有个网站叫做 newspond。 它是一个用一些流行的算法从其他网站聚合新闻的网站。。

它是一个非常漂亮的界面的系统，但是问题就在这里。它的界面太“ 过”漂亮了 - 它会让你分心，因为你不容易把视觉焦点放在内容上面。设计美丽（适当是可以的）的UI打败了你强大的服务。设计师陷入了把太多焦点放在界面上，而没有足够的关心内容的陷阱。

哪么应该怎么做呢？让我们来看看下面这个类似网站的做法。这是一个来YCombinator 黑客新闻，一个典型的应对企业和开发人员新闻网站：

它的非常简单，几乎只有内容。在 newspond 上一屏我们只能看到两条新闻内容。而在 Hacker News上面，我可以看到大概20个。我需要得到的是什么：内容。我能够看到它们没有被UI阻碍。它非它简单，但完成了很漂亮的功能。

它的非常简单，几乎只有内容。在 newspond 上一屏我们只能看到两条新闻内容。而在 Hacker News上面，我可以看到大概20个。我需要得到的是什么：内容。我能够看到它们没有被UI阻碍。它非它简单，但完成了很漂亮的功能。

想像一下，如果 Google 做得像 newspond 一 样 - 你会继续用它吗？我知道我肯定不会的。有的好的用户体验能让我们很快速度得到信息 - 非常快速。如果你不得不在挡视觉的UI(这句不知道有没有对 If you have to block out UI in your mind to read the headlines)上面看新闻标题，哪么这个UI是失败的。这在“UI”很少在在 Google 里面出现，Google 只是列出连接。而它刚好展示出它主要的东西：内容。

 

体验与功能

减弱UI风格并不一定是个正确的做法，它总是依赖于你网站上的功能。

如果你的是一个购物网站，宣传你的产品或公司，那么漂亮的UI可以为你效力。你是要展示经验，并不只是内容。

如果是另一方面，你网站的核心功能是做内容的，那么界面应当放在其次。让界面清晰并且不在使用的使用让用户分心。记住内容才是你网站最主要的焦点。把内容放在更前面才会是一个好的用户界面。

看完后，你怎么想？如果 Google 像 newspond 一样，你会用它吗？请在下面发表你的想法。

Diary

links errorImg experience

August 27th, 2008
1 comment

早上在”开心网”，加了rokey和robin，都是大师级的人物！这里的重点不是介绍他们。而是点到一个设计师的博客链接。于是就进去看下，界面灰常的简洁清爽，如图：

细心的朋友可能已经看见了，有3个链接是相同的。因为他们的网站由于某种原因可能打不开。所以logo自然也打不开了！但是这位朋友就解决得很好!用了一个js来判断！所以就避免了红叉叉。

打开看了下，是这样实现的！

code：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>
<script language=”javascript”>
var rImg = “images/404.gif”;
function errorImg(X, Y) {
if (Y == null) {
X.src = rImg;
}
else {
X.src = Y;
}
}
</script>
<img src=”http://6key.net/logo1.gif” width=”88″ height=”31″ onerror=”errorImg(this)”>
</body>
</html>

猛击这里可以查看演示！

Works