2008.12 17

10个改善UI设计的技术(2)

标签: ,
资源共享

继续昨天没有介绍完的文章，10个改善UI设计的技术(1)总算是写完了，译介，一边译，一边介绍，并掺入自己在这方面的经验，当然，自己也学到了更多的的态度。等结语再说吧，现在，我们先来看看接下来的5个技术：

6. 字距

大家都知道用行距来控制段内文字的显示，特别是中文排版，行距显得非常重要。不过，很多人忽略了字距。可能是因为这个英文与中文有点不同，英文在标题中运用字距能显示更好的效果，不过，在中文标题中个人建议按默认排法，因为默认排法一般是最优的显示方式。字距对于中文排版相对来说并不是很重要，而相比行距则是你知道的。英文的一般用在标题上，并不建议在一般文本中运用，原因是一般情况下，默认的可读性比较强，让我们来看看下面的例子吧：

letter_spacing.png

如果你想控制一下标题，看看下面的CSS代码:

h1 {
font-family: Helvetica;
font-size: 27px;
}
h2 {
font-family: Helvetica;
font-size: 27px;
letter-spacing: -1px;
}
h3 {
font-family: Georgia;
font-size: 24px;
letter-spacing: 3px;
font-variant: small-caps;
font-weight: normal;
}

像你知道的，某些东西可能不需要改变，但改变即使是1px大小，也会让整个设计的整体感觉非常不同。而你能做到的就是，多做细节的调整。你会发现更多意料外的惊喜。

7. 自动把焦点落在INPUT（输入框）上

有没有发现，有很多网站，你一进去，不用点鼠标，光标就会定在输入框中，特别是在某些需要登陆后操作的网站?就像维基百科，就是这样，如下：

wikipedia_auto_focus.png

为了让焦点显示在INPUT上，你可能需要一些Javascript来实现，而你可以用到的最简洁的代码如下所示

<body onLoad="document.forms.form_name.form_field.focus()">

而你的html代码需要是这样的：

<form method="get" name="form_name" action="#">
<input type="text" name="form_field" size="20" />
<input type="submit" value="Go" />
</form>

这样的话，每次进入这个页面的时候，name="form_field" 的INPUT将会被自动选中，作为第一个输入的焦点。

不这，这个最简单的JS还是有点小问题。如果你的读者习惯用退格键来返回前一个页面，这里，在你的页面将不起作用。因为焦点在INPUT上，这时退格键只是删除文本内容，而不会回到上一个页面。不过，所幸的是，如果你特别在意这个问题，请访问 这里， Harmen’s的脚本可以让用户在INPUT中没有本文的状态下回到前一页。

8. 自定义INPUT的样式

默认未必不好，不过，最好的是自定义一个与整体一样的样式，让你的设计更让用户赏心悦目，而你需要做的是，给INPUT加个ID或者CLASS，然后在CSS中定义它，比如我是这样定义的：

styled_input_field.png

CSS代码如下：

input {
border: 2px solid #888;
padding: 4px;
font-size: 1em;
background-color: #F8F8F8;
}

而更有趣的是":focus"值（这东西不会在IE6下显示）看看这个是怎么定义的：

input_focused.png

CSS代码如下：

input:focus {
border-color: #000;
background-color: #FFFE9D;
}

这里有一个问题，当你使用INPUT背景的时候，在OSX（APPLE）会有一个默认的效果，自动给你加个INPUT:FOCUS的样式，如下显示：

blueglow.png

为了更进一步优化，我们来解决它，方法如下，你只要把它定义为outline:none就行了，事情总是如此简单^,^…，代码如下：

input:focus {
outline: none;
}

这时，这个我们不希望有的蓝框就会消失掉:

noglow.png

9. 光标移过

是不是不想让某些东西重复，让版面看起来更舒服? 但这些东西都是必须的，怎么办? 来吧，看看下面的例子，你就会明白如何做了:

twitter_hover_controls.png

上面是Twitter的效果，当鼠标上放的时候，会显示收藏和回复两个图标。如果让每一行都显示这个的话，版面似乎会很杂乱，那么来吧，这还能成为一个吸引人的功能呢。而你需要做的是把代码这样写：

.message .controls { display: none; }
.message:hover .controls { display: block;

当鼠标经过".message"的 <div>时，".controls" 的<div>将会显示出来。不过，这在IE6下显示（万恶的IE6），你需要做的是，在<head>标签内加上如下代码：

<!--[if lt IE 7]>
<style type="text/css" media="screen">
.message .controls { display: block; }
</style>
<![endif]-->

让我们来看看Jinwen是怎么运用到博客上去的：让回复留言的按钮动态点

10. 把动词用在便条上

一般情况下，当有某些提示的时候，我们选择弹出一个提示便条，写着"Yes," "No" 或者 "Cancel,"让用户来选择。看起来好像理所当然这样做没错。来吧，让我们来比较一下WINXP和OSX的做法：

save_dialogs.png

很明显，在看WIN的时候，我们很有可能需要看提示语，然后再点击。OSX上面，因为有"SAVE"让我们知道是要保存某些东西，所以，基本上都不用去看提示语说的是什么，从而保证效率提升。更好的UI设计?

总结一下：

作者写了一大堆，自己看完之后也觉得学习到不少。虽然自己也会用，但在看的过程和介绍的过程中自己也会去思考作者为什么会这么写，为什么要用这个，这个过程更加深了自己在UI设计方面的理解。而你呢? 如果用一句话来表达的话，我会对你说，"做自己的用户，并时刻为自己着想"。

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » 资源共享 »

32

  1. 2008.12.17 4:08 pm
    雀巢(visit): [回复]

    沙发

  2. 2008.12.17 4:20 pm
    ZH CEXO(visit): [回复]

    @雀巢:两次沙发都是你的吧~

  3. 2008.12.17 4:20 pm
    ZH CEXO(visit): [回复]

    这些东西挺有用的~

  4. 2008.12.17 4:34 pm
    雪深(visit): [回复]

    ui 不懂 菜鸟

  5. 2008.12.17 5:10 pm
    雀巢(visit): [回复]

    @ZH CEXO:是啊，抢个沙发不容易，都来不及看内容了

  6. 2008.12.17 5:14 pm
    Betty(visit): [回复]

    第九条很不错啊，然而ie6又不支持，微软怎么就不急着逼用户升级ie6呢……

  7. 2008.12.17 5:52 pm
    iColor(visit): [回复]

    第二部分更实用一些,
    不过其实有些东西可能那些研究 UI 的人认为这样或那样是最科学的最人性化的,但实际是大家可能已经习惯了某种情况,即使它不人性化,但大家已经习惯了,所以没必要和习惯做对…

  8. 2008.12.17 5:54 pm
    iColor(visit): [回复]

    第 8 个说到 Mac 下的那个解决方法,不错,我有注意到这个情况… 多谢了

  9. 2008.12.17 5:57 pm
    leehow(visit): [回复]

    还是继续学习，刚好可以派上用场。

  10. 2008.12.17 6:16 pm
    Shawn不是(visit): [回复]

    第九条好，第九条我也用上了。

  11. 2008.12.17 7:16 pm
    yibie(visit): [回复]

    師兄
    我想知道 應該 在哪里添加 增加字距的代碼?
    我現在在用你的 MiniWP 這個模板
    雖然我有在里面添加 代碼 但是沒有效果…
    不知道是不是我放錯地方了…

  12. 2008.12.17 7:47 pm
    火星人(visit): [回复]

    感觉好不错。

  13. 2008.12.17 7:59 pm
    Yacca(visit): [回复]

    no.9…华丽丽的…我研究下,今天难得这么早就吃好了回到小窝.

  14. 2008.12.17 8:09 pm
    大头仔(visit): [回复]

    看完之后很迷糊！

  15. 2008.12.17 8:13 pm
    autodesker(visit): [回复]

    学习ing~~

  16. 2008.12.17 9:36 pm
    Poshi(visit): [回复]

    这些，平常用不着，一到设计的时候就很重要，应该说，是不知不觉中影响用户的一些因素吧

  17. 2008.12.17 9:50 pm
    herb(visit): [回复]

    设计、内核与数据分离以及剃刀原则盛行的时代，这些看起来都变成了细节问题，简单实用，就如同朴素的G.cn

  18. 2008.12.17 10:43 pm
    soz(visit): [回复]

    Fish,现在可是越来越专业了！

  19. 2008.12.17 11:42 pm
    睡到自然醒blog(visit): [回复]

    设计学问这么多啊。还好我不搞UI。哈。

  20. 2008.12.18 1:14 am
    sofish(visit): [回复]

    @雀巢: 再次恭喜，沙发。

    @ZH CEXO: 你现在还做主题不？

    @Betty: Hack，或者用JS，还是可以实现的吧，哈哈。

    @iColor: 嗯，用户习惯，有时候，可以尝试一下改变，就你改变一个时代一样。

    @leehow: 孩子，你好像可以做老师，感觉什么事都做得很有条理。

    @Shawn不是: 我去看了，好像不是很明显。

    @yibie: 你直接在body中加上letter-spacing:Npx…或者在entry-title上加。

    @Yacca:我看了，你的效果明显比shawn的好。

    @大头仔: 这么神奇。

    @Poshi: 嗯，说出来，就多了吧，有时候只是我们自己的习惯。

    @herb: 还有firefox？

    @soz: 哈哈，我最近在练习英语。

    @睡到自然醒blog: 还好我想搞UI，而没有搞。囧。

  21. 2008.12.18 8:22 am
    leehow(visit): [回复]

    怎么扯到做事有条理？你做事才应该是比较有条理吧。

  22. 2008.12.18 12:20 pm
    NetPuter(visit): [回复]

    嗯哈,关于间距我喜欢用 line-height 控制~

  23. 2008.12.18 2:51 pm
    sofish(visit): [回复]

    @leehow: 假装有条理…

    @NetPuter: 这个很好，哈哈。

  24. 2008.12.18 2:51 pm
    Shawn不是(visit): [回复]

    @sofish:你一句话，我改进了。

  25. 2008.12.18 2:54 pm
    sofish(visit): [回复]

    @Shawn不是: 我看了你的回复，确实很不错，哈哈。

  26. 2008.12.18 3:14 pm
    天下有雪(visit): [回复]

    以后多向你请教，呵呵。

  27. 2008.12.20 10:30 am
    木木木木木(visit): [回复]

    好孩子 学习学习！

  28. 2008.12.22 3:34 am
    Zoll(visit): [回复]

    第九条我也用上去了，的确是Twitter的启发，不过我用的是visibility:hidden这在IE6下是不是就不会有问题了？

  29. 2008.12.26 1:51 am
    Sutra(visit): [回复]

    这个代码好像是IE Only的语法吧？

  30. 2008.12.27 5:43 pm
    林网博客(visit): [回复]

    也想把字体给搞大一些，增强体验。

  31. 2009.01.31 8:14 pm
    痞子C半40(visit): [回复]

    一切为读者考虑~~

  32. 2009.12.31 1:32 pm
    沙漠(visit): [回复]

    谢谢分离!@

Additional comments powered by BackType