<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:gd='http://schemas.google.com/g/2005' xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-7184239</id><updated>2011-12-14T19:09:48.580-08:00</updated><title type='text'>用户界面设计 - Lu Heli</title><subtitle type='html'>UI相关文章</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>10</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-7184239.post-114676301369577448</id><published>2006-05-04T10:11:00.000-07:00</published><updated>2006-05-04T10:18:28.350-07:00</updated><title type='text'>Double Your AdSense Income</title><content type='html'>Contextual advertising has become very popular among webmasters since its development. Many webmasters are able to make thousands of dollars a month from Google AdSense ads, while others are only making pennies a month. Although website traffic obviously has a part in the amount of money that one makes from AdSense, there are many other ways to increase the amount of money you can potentially earn.&lt;br /&gt;&lt;br /&gt;In this article I want to give you a few simple ways to dramatically increase your AdSense income.&lt;br /&gt;&lt;br /&gt;To increase AdSense income all you must do is increase the number of click thrus you receive.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;&lt;span style="font-size:130%;"&gt;Match your AdSense to your website&lt;/span&gt;&lt;/strong&gt;&lt;br /&gt;&lt;strong&gt;&lt;/strong&gt;&lt;br /&gt;The color scheme of your ads greatly affects your click-thru rates. Some people say that alternating colors should be used to draw more attention to the ads. Others suggest blending the ads with your site's content. The later has been proven to be the best option because the ads look more natural; like they belong, encouraging visitors to click on the ads.&lt;br /&gt;&lt;br /&gt;In other words you want your AdSense ads to appear as seamless as possible. Your goal is to match every aspect of your AdSense ads to the theme of your website. What you want to do is remove the borders from your AdSense ads and match the background color of the ad to your website. Additionally, you want to match the color of the AdSense links to the rest of the links on your website plus choose an ad format that makes the ads look seamless.&lt;br /&gt;&lt;br /&gt;For example, if your web site has a white background and the default color of your hypertext links is blue you will want to remove the border from your AdSense, make the background white, choose either a square or a rectangle as your ad format instead of a skyscraper or banner, and yep you guessed it… make the links blue.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;&lt;span style="font-size:130%;"&gt;Placement Matters&lt;/span&gt;&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;Where you place your AdSense ads is just as important as how they look. Luckily, there are only a few concepts that you need to worry about in order to increase your click through rate.&lt;br /&gt;&lt;br /&gt;The more white space around your ads the better&lt;br /&gt;The closer to the top of the page the better&lt;br /&gt;The closer the left of the page the better&lt;br /&gt;&lt;br /&gt;Follow these concepts and I can assure you that you will see an increase in your AdSense click thru rate. (It really is that simple!)&lt;br /&gt;&lt;br /&gt;For more tips and information on optimizing your Google AdSense income, visit &lt;a href="http://www.createonlinebusiness.com/" target="_blank"&gt;http://www.createonlinebusiness.com&lt;/a&gt;.&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-114676301369577448?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/114676301369577448/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=114676301369577448' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/114676301369577448'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/114676301369577448'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2006/05/double-your-adsense-income.html' title='Double Your AdSense Income'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241583265493454</id><published>2005-11-19T07:55:00.000-08:00</published><updated>2005-11-19T08:00:49.510-08:00</updated><title type='text'>图标(Icon)和注释(Label)的关系及运用</title><content type='html'>在&lt;a href="http://luheli.blogspot.com/2005/11/ui_19.html"&gt;UI中的文字用词&lt;/a&gt;我已经说明文字的正确运用对有效的UI是非常重要的, 我们来看一下图标(Icon)和注释(Label)的之间的关系及它们的运用。大家都很喜欢在及时聊天中用Icon，那些是表情图标(Emoticon)。UI中的图标是大家经常用大的，比如Microsoft Word的打开，保存等图标，图标可以是文字的替代者，但图标不一定可以让使用者了解这个图标的真正含义，或者这个图标要起什么作用，这是因为图标本身很复杂，所以正确的注释还是非常重要的，我们现在使用的Word默认是只显示图标，而没有注释，但是有tip，当你把鼠标在图标上停留1秒，会有注释显示，这好比是HTML中ALT标记，在新版本的&lt;a href="http://www.sunflowerhead.com/msimages/DifferentLayouts-9-14-2005.png"&gt;Office 12&lt;/a&gt;中已经把图标和注释放在一起了，那样的UI会使用户的效率更高，用户不需要再刻意去明白那些复杂的图标的意思，他们可以一目了然，这好比是一个是Pull,一个是Push。用户可以选择是否需要显示注释。&lt;br /&gt;现在还是有纯文字的UI比如Unix shell，不同的用户会有不同的选择，这又是另外一个话题了。&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241583265493454?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241583265493454/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241583265493454' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241583265493454'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241583265493454'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/iconlabel.html' title='图标(Icon)和注释(Label)的关系及运用'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241573155280863</id><published>2005-11-19T07:54:00.000-08:00</published><updated>2005-11-19T07:55:31.560-08:00</updated><title type='text'>一本关于UI书的一个章节</title><content type='html'>书名是Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points 这一章是关于表单的一些容易犯的错误,有兴趣可以看看,这本书很有参考价值,也很实用.你可以&lt;a href="http://www.informit.com/articles/article.asp?p=169675&amp;rl=1"&gt;在线阅读&lt;/a&gt;或者&lt;a href="http://www.informit.com/content/images/073571410X/samplechapter/073571410xc.pdf"&gt;下载PDF文件&lt;/a&gt; (570kb)&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241573155280863?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241573155280863/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241573155280863' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241573155280863'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241573155280863'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/ui_113241573155280863.html' title='一本关于UI书的一个章节'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241551887711909</id><published>2005-11-19T07:50:00.000-08:00</published><updated>2005-11-19T07:51:58.876-08:00</updated><title type='text'>UI中的文字用词</title><content type='html'>UI中的文字用词(wording)是很重要的，不要简单地认为一张图片值千字(a picture is worth a thousand words)，文字就不重要了。事实是恰恰相反，文字的正确应用可以使用户快速和高效地完成工作任务。UI上的文字多为解释性的。解释性的文字多出现在表单，这些文字解释了用户需要输入什么信息，比如填写一个输入框，或者从下拉菜单里选择。解释性的文字要言简意赅，正确。以下是个下拉框的例子&lt;br /&gt;&lt;a href="http://photos1.blogger.com/blogger/7420/429/1600/Wording_Selection_Sample.gif"&gt;&lt;img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://photos1.blogger.com/blogger/7420/429/320/Wording_Selection_Sample.jpg" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;这个UI中的文字有什么问题吗？你一定注意到了“GS”是什么意思？GS在这里是个缩略词，如果这个UI是给熟悉这个缩略词的用户比如一个公司的内部人员使用，那没什么问题。但是如果给那些不熟悉的用户比如外部人员，肯定是有问题的，所以这就需要培训了，或者写上全称。这个UI中还有一个问题，“Select GS User”中的"Select"是不是多余的？假设用户看到"GS User"，然后他看到右边是个下拉框，自然会意识到需要从下拉框选择(Select)，所以"Select"这个词可以省略，如果你认为"Select"这个字的使用可以让用户更清楚地明白他们要干什么，那我也不否认。但是如果需要用户输入信息，是不是也要"Input Description"，还是直接写"Description"来更简洁呢？根据文字周围的语境(context)比如文字输入框，用户能清楚地明白他们需要做什么。另外用户的帮助文档中的文字多为一步步的操作叙述，以教会用户一个具体功能为目的，更配已图示，真正达到图文并茂。&lt;br /&gt;UI中的用词得当可以决定用户的工作完成效果和效率，要避免错误的用词，以及缩略语的恰当使用。&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241551887711909?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241551887711909/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241551887711909' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241551887711909'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241551887711909'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/ui_19.html' title='UI中的文字用词'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241539036764194</id><published>2005-11-19T07:48:00.000-08:00</published><updated>2005-11-19T07:49:50.366-08:00</updated><title type='text'>Wireframe</title><content type='html'>下面的原形被称为Wireframe，因为只有线组成的结构。&lt;br /&gt;&lt;a href="http://photos1.blogger.com/blogger/7420/429/1600/Sorting_Prototype.1.gif"&gt;&lt;img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://photos1.blogger.com/blogger/7420/429/320/Sorting_Prototype.0.jpg" border="0" /&gt;&lt;/a&gt;&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241539036764194?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241539036764194/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241539036764194' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241539036764194'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241539036764194'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/wireframe.html' title='Wireframe'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241528087829202</id><published>2005-11-19T07:40:00.001-08:00</published><updated>2005-11-19T07:48:00.880-08:00</updated><title type='text'>UI Prototype (原形)设计</title><content type='html'>UI Prototype (原形) 是设计中非常重要的一部分, 和其它行业中的原形设计一样,UI中的原形也是软件或信息系统的视觉化, 从原形中可以看出最后的系统会是怎样的,原形可以分成Low Fidelity(低程度)和High Fideltiy(高程度)。低程度的原形是用一写简单的日常工具实现的比如铅笔，纸，尺，象皮，Post-it等。低程度的原形视觉化了系统的基本功能，而不注重修饰的元素比如图片等。低程度的原形可以有交互性，可以在纸上进行一些基本的流程演示。在纸上画的原形被称为Paper Prototype，Paper Prototype的好处是可以随时修改。Post-it（便贴）可以用于下拉菜单。使交互性跟突出。高程度的原形可以是电子化的显示在屏幕上的原形，比如可以用Microsoft Word，Microsoft Powerpoint，HTML, Visual Basic等实现。高程度的原形往往是最终系统的预览，它的交互性是最强的，可以使用高程度原形实现一个完整的工作流程，同时得到了与最终系统类似的交互体验(User Experience)。以下是原形的一些示例，包括低程度和高程度的原形。&lt;br /&gt;&lt;a href="http://photos1.blogger.com/blogger/7420/429/1600/Paper_Prototype.gif"&gt;&lt;img style="WIDTH: 335px; CURSOR: hand; HEIGHT: 143px" height="209" alt="" src="http://photos1.blogger.com/blogger/7420/429/320/Paper_Prototype.jpg" width="530" border="0" /&gt;&lt;/a&gt; &lt;a href="http://photos1.blogger.com/blogger/7420/429/1600/CRM_Prototype.gif"&gt;&lt;img style="CURSOR: hand" alt="" src="http://photos1.blogger.com/blogger/7420/429/400/CRM_Prototype.jpg" border="0" /&gt;&lt;/a&gt;&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241528087829202?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241528087829202/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241528087829202' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241528087829202'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241528087829202'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/ui-prototype.html' title='UI Prototype (原形)设计'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241482454176602</id><published>2005-11-19T07:40:00.000-08:00</published><updated>2005-11-19T07:40:24.543-08:00</updated><title type='text'>100个Gmail邀请发放</title><content type='html'>如有需要请回复&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241482454176602?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241482454176602/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241482454176602' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241482454176602'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241482454176602'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/100gmail.html' title='100个Gmail邀请发放'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241478671085295</id><published>2005-11-19T07:39:00.000-08:00</published><updated>2005-11-19T07:39:46.710-08:00</updated><title type='text'>好网站?烂网站?</title><content type='html'>什么是好网站?就UI角度来说,好的网站应该是结构清晰,容易查找信息.当然美观也是一个重要因素，但这些网站并不一定能带来多少收益，所以它们又不算是好网站。什么是烂网站？就UI角度来说，烂网站就是那些混乱不堪，没有结构，或结构不清，以至于不堪如目，但是这些网站有些却能带来很多收益，从这点来看，它们有不能算是烂网站，反而会是宝。比如&lt;a href="http://www.hao123.com"&gt;www.hao123.com&lt;/a&gt;，这个网站不算很烂的网站，但从页面来看并不很好，结构也不太清晰，对比性也有问题，但却是访问量很大的一个网站，随之而来的是丰厚的广告收入。但是我想国人还是喜欢哪些看起来比较有点本土味道的，看起来不会眼睛一亮的，但是如果hao123.com能改善一下页面的质量，那会怎样呢？&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241478671085295?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241478671085295/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241478671085295' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241478671085295'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241478671085295'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/blog-post.html' title='好网站?烂网站?'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113241468643551231</id><published>2005-11-19T07:36:00.000-08:00</published><updated>2005-11-19T07:38:06.436-08:00</updated><title type='text'>以用户为中心的UI设计概念</title><content type='html'>任何设计要以用户为中心, UI(用户界面)设计也不例外。如何要做到以用户为中心的设计呢？就是要了解用户的需求，要知道用户真正需要的是什么。UI设计中的需求信息采集的方法有很多种，比如Site Visit(现场访问)，Questionnaire(调查问卷)，Survey(调查研究)等等。其中，Site Visit(现场访问)是最为有效的用户需求信息的采集方法。设计人员来到最终用户的工作地点（办公市）现场对最终用户进行提问和任务观察。主要的过程是先询问最终用户一些基本问题，比如最终用户的工作任务，责任，和其他人员的关系等。之后是任务观察部分，UI设计人员让最终用户完成一个具体的任务，设计人员在一边观察，并在必要时记录重要的注释信息。采用Site Visit采集用户信息的方法时，也可以用一些辅助设备比如摄像机来记录最终用户的任务完成过程，但要避免最终用户紧张。任何产品的成功都离不开用户的需求满足，因此设计要避免华而不实，而要创造出真正有用的和易用的产品。&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113241468643551231?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113241468643551231/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113241468643551231' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241468643551231'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113241468643551231'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/ui.html' title='以用户为中心的UI设计概念'/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7184239.post-113189510836238871</id><published>2005-11-13T07:14:00.000-08:00</published><updated>2005-11-19T07:33:43.556-08:00</updated><title type='text'></title><content type='html'>&lt;a href="http://home.wangjianshuo.com/"&gt;&lt;span style="font-family:arial;"&gt;王建硕&lt;/span&gt;&lt;/a&gt;&lt;span style="font-family:arial;"&gt;的blog, 我常常去, 这两天发现了一个易用性方面的小问题, 也是之前没有意识到的。这个问题是关于表单(form)中的Post按钮的, 请看以下来自&lt;/span&gt;&lt;a href="http://home.wangjianshuo.com/"&gt;&lt;span style="font-family:arial;"&gt;王建硕&lt;/span&gt;&lt;/a&gt;&lt;span style="font-family:arial;"&gt;的blog的截图&lt;br /&gt;&lt;/span&gt;&lt;span style="font-family:arial;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style="font-family:arial;"&gt;&lt;a href="http://photos1.blogger.com/blogger/7420/429/1600/WangJianShuoBlog_minorFlaw.gif"&gt;&lt;img style="CURSOR: hand" alt="" src="http://photos1.blogger.com/blogger/7420/429/320/WangJianShuoBlog_minorFlaw.0.jpg" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;图中的POST按钮其实是做Submission用的, POST按钮旁边是“&lt;-- Please click POST only once”，只按POST一次，箭头指向了POST，这当然是提醒提交信息的用户只按POST一次，防止多次提交，这里存在的问题是什么呢？虽然POST按钮旁边有提示，用户也会意识到，但用户仍然可以多次提交。是否有更好的方法来避免用户的多次提交呢？我们可以这样做，当用户点了POST按钮的时候，POST按钮可以变为disabled状态，这样可以避免用户多次提交，“&lt;-- Please click POST only once”这句也可以舍去了。&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;div class="blogger-post-footer"&gt;Lu Heli All Rights Reserved.&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7184239-113189510836238871?l=luheli.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://luheli.blogspot.com/feeds/113189510836238871/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=7184239&amp;postID=113189510836238871' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113189510836238871'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7184239/posts/default/113189510836238871'/><link rel='alternate' type='text/html' href='http://luheli.blogspot.com/2005/11/blog-formpost-blog-postsubmission-post.html' title=''/><author><name>Lu Heli</name><uri>http://www.blogger.com/profile/00276683196624640720</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>
