<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>悠悠咔嗖 YOYOCASO.com </title><link>http://www.yoyocaso.com/blog/</link><description> 关注前端\设计\动画\界面\交互\篮球\美剧....</description><generator>RainbowSoft Studio Z-Blog 1.8 Arwen Build 81206</generator><language>zh-CN</language><copyright>Powered by Z-blog and theme by yoyocaso©2007-2010 YOYOCASO.com | 冀ICP备06012790号 </copyright><pubDate>Sat, 14 Apr 2012 12:17:32 +0800</pubDate><item><title>那些超炫的APP们</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/385.html</link><pubDate>Thu, 22 Mar 2012 14:49:49 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/385.html</guid><description><![CDATA[   一直在做移动端，也在收集移动端的相关资源，今天给大家分享一下今天刚整理好的我个人经常去的一些移动端界面资源站点，相信有不少站也是大家都在默默关注de，像dribbble这样要设为首页的就不多说了，主要针对移动端的UI设计，下列这些站还是很好的灵感和学习资源，特此推荐给大家！<br/><br/><img onload="ResizeImage(this,550)" src="http://www.yoyocaso.com/blog/upload/201203221447505337.png" alt="" title=""/><br/><a href="http://pttrns.com/"  target="_blank">http://pttrns.com/</a><br/>最新最潮的APP界面，更新较快，但貌似展示有限，而且图片偏小，精度不高<br/>推荐指数★★★<br/><br/><img onload="ResizeImage(this,550)" src="http://www.yoyocaso.com/blog/upload/201203221454004700.png" alt="" title=""/><br/><a href="http://www.jqmgallery.com/"  target="_blank">http://www.jqmgallery.com/</a><br/>较为侧重页面形式的集合，虽然偏轻量级，但这也是一个方向<br/>推荐指数★★★<br/><br/><img src="http://www.yoyocaso.com/blog/upload/201203221456006158.png" alt="title" title="title" width="400" height="300"/><br/><a href="http://www.tappgala.com/"  target="_blank">http://www.tappgala.com/</a><br/>小巧轻量的APP界面资源站点，有不少好的范例推荐<br/>推荐指数★★★<br/><br/><img src="http://www.yoyocaso.com/blog/upload/201203221457160847.png" alt="title" title="title" width="400" height="300"/><br/><a href="http://www.mobileawesomeness.com/"  target="_blank">http://www.mobileawesomeness.com/</a><br/>比较老的一个手机端界面集合站点，页面虽然比较简单，但存货量灰常之巨大，故推荐之！<br/>推荐指数★★★<br/><br/><br/><br/><br/><br/><br/><br/>]]></description><category>设计</category><comments>http://www.yoyocaso.com/blog/post/385.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=385</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=385&amp;key=7a2faae5</trackback:ping></item><item><title>多线程的思考</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/384.html</link><pubDate>Thu, 07 Apr 2011 23:54:06 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/384.html</guid><description><![CDATA[<p>　　从三月初开始，平均每天睡眠时间总的不超过6个小时，倒也不觉疲乏，今早又6：30便爬起来，清晨整理整理思绪，完成一些滞后的任务。8：15出门去赶班车那刻开始，忙碌的一天便正式开始鸟。</p><p>　　如何一个忙法，恐怕还是头一回遭遇到，简直可以用多线程并发来类比，日常任务、独立项目、临时任务、还有课程培训，齐头并进，哪面也不好落下。很早就试想过如果自己是按照程序化设定执行的超理性人，那就好了，但那是不可能，是人都会累，但要学会调整。关键还是要制定好合理的GTD，有待继续加强呐！</p>]]></description><category>日志</category><comments>http://www.yoyocaso.com/blog/post/384.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=384</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=384&amp;key=bdcfd7c1</trackback:ping></item><item><title>假期结束了，开始每天记录</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/383.html</link><pubDate>Thu, 07 Apr 2011 00:12:57 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/383.html</guid><description><![CDATA[<p>　　清明假期结束了，三天很是远离了电脑一把：HK一天，爬南山一天，打球半天，逛街半天&hellip;&hellip;不知不觉到深圳已经31天了，满满的一个月整，真快！每天都有很多要忙的，今天又开始了忙碌的一天，任务也开始排期了，还有培训，总合计着能好好做个GTD，但还不够有成效，必须再加把劲。今晚赶着末班的地铁回来，看着空荡的车厢，一眼貌似望不到头，不过打个时间点，就此开始记录吧！</p>]]></description><category>日志</category><comments>http://www.yoyocaso.com/blog/post/383.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=383</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=383&amp;key=80633645</trackback:ping></item><item><title>有幸入选“2010年度十佳UI设计师”阵营</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/382.html</link><pubDate>Mon, 21 Mar 2011 23:54:32 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/382.html</guid><description><![CDATA[<p>&nbsp;只能说是有幸，并感谢所有给予过我帮助的朋友，其实自身仍还需要更多的努力，也迷茫过，但依然在追求自己所追求的吧，还在路上，继续努力！</p><p><a target="_blank" href="http://www.chinaui.com/News/20110320/201103201906300700.shtml"><img onload="ResizeImage(this,550)" alt="" src="http://www.yoyocaso.com/blog/upload/201103220002394783.jpg" /></a></p><p>&nbsp;</p>]]></description><category>日志</category><comments>http://www.yoyocaso.com/blog/post/382.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=382</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=382&amp;key=d8c2fc95</trackback:ping></item><item><title>职业生涯中的10个致命错误</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/381.html</link><pubDate>Sat, 01 Jan 2011 08:05:24 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/381.html</guid><description><![CDATA[<p>这篇文章不是量化的调查报告，而是本人在进行职业生涯规划咨询的过程中与客户一对一深入接触之后总结出来的、较为真实地反应了职场人士的内心想法，属于较为全面的质化总结。文中所列出的错误，可能超过90%的人正在面临。可能对于大多数人来说，这些问题看起来已经司空见惯、稀松平常，为大多数人所忽略。然而，经过大量职场真实案例的证实，我们发现，正是这些稀松平常的错误，日后极有可能成为影响你职业生涯发展、甚至改变你一生命运的致命错误。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误一：现在不着急，以后遇到问题再说吧</strong></span></h3>    </li></ul><p>很多人刚刚步入社会，没有真正意识到危机的存在；或者现在的工作相对稳定，虽然不知道未来是什么样子，但至少目前的工作能够养家糊口，至少可以保证生存没有问题。他们不知道五年后的自己应该是什么样子，也不会深入去想，因为这样很累。至少现在的工作能够让自己这一年过得很安稳，至于下一年怎么样，他们根本没有考虑过。他们总觉得年轻应该是享受的时光，这样才不会辜负大好年华。即使现在遇到问题，他们总是说：现在不着急，以后遇到问题再说吧。</p><p>我曾经遇到过这样一个案例：一个已经35岁的男人，工作12年，有老婆，有孩子，唯一没有的，就是稳定的工作。12年来，平均不到一年就换一份工作。现在年龄大了，家庭的责任也大了，想找份工作长期稳定下来，但发现很难。我问他，为什么不早点儿考虑这个问题？他说，那时候年轻，不懂事，现在意识到了，却发现困难重重，并深深后悔以前没有早点儿做打算。</p><p>你现在遇到问题了吗？你是否在困惑、迷茫中消耗自己的青春？相比一年前，你的这一年是进步了，还是在重复劳动？你现在的工作到底是否适合你？你是否知道自己的职业成长路径？你是否有一个至少可以为之奋斗5年的目标？你是否知道一年以后自己成长为什么样子，五年以后又成长为什么样子？你是否知道如何实现自己的目标？更致命的是，你是否还抱着&ldquo;以后再说&rdquo;的心态？看完这段文字，你是反应是立即行动，还是重复现在的状态？</p><p>如果所有的问题都等&ldquo;以后再说&rdquo;，那么，我敢肯定，最多5年以内，你会遇到再也解决不了的问题！要想解决，你必须要付出成几何级倍增的代价！</p><p>&nbsp;</p><ul>    <li>    <h3><span style="color: #ff6600"><span style="font-weight: bold">错误二：有些事情总要亲自经历了才会知道</span></span></h3>    </li></ul><p>有些人会虚心吸取别人的经验和教训，生怕自己走错了路；而有些人则说要亲自犯一些错误，亲自遭遇一些挫折，才会清醒。这些人表面上看起来很强大，愿意在困难中磨炼自己，成长自己，但其实他们却是潜意识里刻意回避自己正在经历和正在犯的错误，并且从骨子里不愿意承认和改变目前的现实。这种人刚愎自用，一意孤行，听不进别人的意见，往往会在前进的道路上栽很多跟头。</p><p>的确，经历困难和挫折，会让一个人得到成长。但并不是所有的困难和挫折你都要经历。能够提前合理规避的，你为什么又一定要亲自去尝试呢？不见棺材不掉泪。而当你见了棺材的时候，掉再多的泪恐怕也无济于事了。</p><p>对于年轻人来说，&ldquo;试错&rdquo;其实是最愚蠢的方法，即使你觉得你还年轻，你还有机会，但实际上时间并不是你想像得那么多。以在北京工作为例。假如你大学毕业23岁，打算30岁买房结婚。房子不要太好的，但在北京，起码也要100万。在房价疯涨的情况下，这已经是最保守的估计。首付20万，装修2万，家电2万，结婚3万，其他备用资金3万，这总计就得需要30万。假如你年薪10万，除去房租、生活费、电话费、应酬等等支出，一年存款7万，那么，你至少要需要4年的时间。但是对于职场新人来说，没有3年的经验积累，不可能拿到10万的月薪。这样算下来，就算你不走弯路，从毕业到结婚，你要像上紧了的发条一样高速运转，根本不允许你有时间去无所事事或者走弯路。而一旦不慎稍有偏差，走上1、2年的弯路（对于很多人来说，这是再正常不过），那么对你来说，一旦买房，就会陷入破产的边缘。</p><p>如果你还想着去尝试和经历一些本来应该可以规避的错误，那么，你的职业生涯定会付出更多的成本。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误三：当我遇到问题时，做个职业规划就行了</strong></span></h3>    </li></ul><p>很多人都是在实在看不到希望的情况下，才会想到做职业规划。就像在上文第一个错误中所列举的那个例子。但我要告诉你的是：职业规划并不是你走投无路时的救命稻草！</p><p>因为成功的职业规划，其核心是要帮助你找到你的职业方向定位，并围绕这个方向构建你的核心竞争力，以保证你能够在这个方向上顺利成长。这两点缺一不可。如果只是找一个方向，而没有考虑到该方向在现实工作中实现的可能性，那么，这样的规划没有任何意义。而要想保证职业方向实现的可能性，就必须要考虑外在客观因素的影响。家庭的压力、年龄的差距、因工作不顺而造成的心态的失衡&hellip;&hellip;等等，都会影响到职业规划的最佳实施效果。就像医生看病一样，如果你已经病入膏肓，那么，再高明的医生恐怕也无回天之力了。</p><p>对于在校的学生来说，大三之前确立方向，然后利用剩余的时间构建自己的知识体系，毕业后完全可以找到一份适合自己的工作；对于已经工作的人来说，在工作三年之内确立自己的方向，虽然要付出损失和代价，但仍然有转向成功的可能。如果三年之内甚至更长的时间工作不稳定的话，这个时候，职业规划的难度就大得多，不仅仅是因为你要承担更大的损失，付出更高的机会成本，同时，因工作不稳定而带来的严重心态失衡，才是你职业成长的最大障碍。以平均走两年弯路为例，两年之后转行，和别人在一个起跑线上，这就意味着你以前的工作基本上是浪费了。假如你月薪2500，你两年的直接物质损失就是6万，这个损失，至少是你职业规划投入的60－120倍（如果提早做职业规划，投入最多也就是你1－2个星期的工资）。你同时损失的，还有两年的成长机会，这个时间是永远无法弥补的。同时，你的心态也会变得很消极，无法积极去面对新的工作，这个损失也是无法估算的。更重要的是，一旦你习惯了迷茫，或者习惯了跳槽，那么，这个损失就会扩大到职业规划投入的200倍以上！</p><p>很多工作多年但仍然没有方向的人来找我们做咨询，在对他们的综合情况进行评估之后，假如我觉得实在无能为力，给予不了他们应有的帮助，我就会对他们说&ldquo;很抱歉，我们解决不了你的问题&rdquo;。虽然这样的棘手的问题不多，但大家最好还是引以为戒，一定要及早打算，千万不要等走投无路的时候再解决问题。那时候，你可能就真的是走投无路了。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误四：把性格测评当成职业规划</strong></span></h3>    </li></ul><p>有一次和一位大学生朋友聊天，我问他有没有做职业规划，他说做了。我又问你的职业目标是什么，怎么实现这个目标，他说不知道。我就很纳闷，我说你不是已经做了职业规划了吗？怎么这些问题你都不知道呢？接着他就发给我一堆资料，我一看，全是各种各样的测评报告。我问他这些报告在哪里做的，他说在学校的网站上。我说这些报告结果你能看得懂吗？他说看不懂。</p><p>在进行职业生涯规划咨询的过程中，这样的情况不止一次地出现，尤其是在大学生群体中。每当遇到这种情况，我的心里就很纠结。他们对于职业规划的认识仅仅停留在测评的层面上，根本就不知道这些测评对他们意味着什么，更不知道如何利用这些测评指导他们未来的职业发展。</p><p>有一次在北京某高校的职业生涯规划比赛上担任评委，也同样遇到了这样的情况。他们也知道根据测评结果把自己分析一遍，但到最后规划的职业方向，大多数依据的标准是&ldquo;专业对口&rdquo;，而与测评结果几乎没有任何关系。虽然高校已经开设了职业规划课程，但据本人所了解到的真实情况却是：这些课程平时几乎没有人去认真听，只是考试的时候突击一下，拿学分而已。我就问他们，这些课程对你们以后的就业和成长有非常大的帮助，为什么不去认真听呢？得到的回答是这样的：上这门课的老师完全是照本宣科，根本就不了解真实的职场是什么样子的，更别提把书中的理论在现实的职场上进行有效的指导和操作，这门课也完全成了摆设。于是，该困惑的依然困惑，该迷茫的依然迷茫。</p><p>由于在大学里大家所接触的职业规划只是各种各样的测评工具，于是也就想当然地把职业规划与性格测评等同起来。而从客观的角度来说，许多人由于职场经验、社会阅历、思维分析能力等方面的不足（对于大学生和初入职场的人来说，这方面的问题就更加明显），根本就看不懂测评结果。同时，这种测评式的规划也是理论化比较严重的，测评结果完全由电脑自动生成，所提供的结果都是某一类性格所具备的&ldquo;共性&rdquo;的东西，完全不知道如何结合职场真实情况对每个人的&ldquo;个性&rdquo;进行有针对性的分析。所以，这样仅仅停留在理论层面的规划，实战性比较差，也就不难理解了。</p><p>这里需要提醒大家的是：性格测评&ne;职业规划。很多人认为自己做了性格测评就等于做了职业规划，其实这是一个非常严重的认识误区。性格测评只是我们了解个人性格的一个手段。涉及到具体的规划时，还要根据个人事业愿景、优势特长、专业技能、成长经历、职业价值观、政治因素、经济因素、社会因素等各种情况进行综合考量，才能得出具体的结论。这需要咨询师深入了解你的情况之后才能做出判断，而不是单纯依赖测评工具所得出的结果。以第一职场论坛的教练式职业规划为例，除了基本的测评以外，仅咨询访谈这一项就需要3个小时的时间，最长的曾经达到6个小时，目的就是对咨询者进行全面、深入的了解，并对测评结果进行验证，以全面、客观地了解咨询者的真实情况。如果做不到这一点，那么，咨询的效果就会大打折扣。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误五：只定方向，不知道实施路径</strong></span></h3>    </li></ul><p>既然上文已经明确了性格测评并不等于职业规划，那么，一个完整的职业规划到底应该包括哪些内容呢？以本人在第一职场论坛进行的教练式职业规划为例，职业规划的完整内容应该是&ldquo;1+2+1&rdquo;模式，即一项核心内容，两项补充内容，一项强化内容。一项核心内容，指的是根据其自身综合情况，进行针对性分析，量身定制，确立最适合其发展的职业方向定位。两项补充内容，一是对其综合素质进行评估，为其制定职业成长路径，并进行相应的知识体系构建；二是针对其性格中的弱点和以往的工作经历中所存在的思想、行动等方面的错误进行纠正，避免其重蹈覆辙，从最大程度上规避因自身不足而带来的潜在职业风险。一项强化内容，指的是以职场晋升为导向的软实力系列培训（以第一职场独家开发的CCS10职场竞争10力模型为基础），通过具有实战性的技巧和方法的培训，全面提升个人综合竞争力，以更快的速度，获得职业发展的飞跃，拉开与普通人的距离。</p><p>很多人不乏明确的目标，但在实施的过程中会遇到很多问题得不到有效的解决，从而最终影响到职业目标的实施程度。从这个角度来说，只确定职业生涯方向定位，而不知道具体的实施路径，尤其是在执行的过程中，哪些问题需要直接面对，哪些问题需要绕道，同样会影响到你的职业发展。</p><p>确立目标，只是成功职业生涯规划的第一步，即&ldquo;一项核心内容&rdquo;要解决的问题；而这个目标到底能否实现，就要看实施和执行的效果，这也是&ldquo;两项补充内容&rdquo;和&ldquo;一项强化内容&rdquo;的意义所在。如果只是确立了目标，而没有确定相应的实施路径，那么，这样的规划只是成功了50%。尤其是强化部分的内容，也是考验一个咨询师水平的地方。光懂理论而无实战经验的人，做不到这一点。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误六：没有主见，严重依赖周围人的看法</strong></span></h3>    </li></ul><p>你为什么想考研？因为周围的人都在考研。你为什么想进国企？因为大家都说国企稳定待遇好。你为什么不愿意改变自己？因为周围的人和你一样，同样处于这种状态！</p><p>很多人也有自己的想法，但一旦自己的想法得到周围人的反对或质疑时，他的这种想法就会迅速打消。有一次有一个客户来问我，他说他家里人想让他当老师，但他问了身边的人，有的人说当老师好，而有的人则说当老师没有前途，不如进企业。他自己也困惑了，不知道到底是否当老师。</p><p>每个人的价值观是不一样的，因此，当你征求别人的意见时，他们只是基于自己的价值观去思考问题，并不是站在你的立场上。因此，别人的意见到底是否适合你，还取决于你自己内心的想法。同样是这个例子，喜欢安稳的人肯定会说当老师是个不错的选择，而喜欢挑战的人则肯定会说当老师没有前途。</p><p>每个人都有250位朋友，他们分别出现在两种场合，一个是你的婚礼，一个是丧礼，而这些朋友有80%是对你毫无帮助，他们通常不会给你正面、积极的影响，当你渴望有任何作为的时候，他们通常会浇你冷水，告诉你种种的坏处和各种失败的可能。有20% 的朋友，他们是属于较积极的，会给你正面的影响，而其中又只有5%的朋友则会帮助你，重大改变你的一生！所以，你对朋友们不该一视同仁，你应该花80%的时间跟那些会重大影响你一生的那5%的朋友在一起。</p><p>你的路到底怎么走，只有你自己负责。那些曾经给予你建议的人，即使若干年后证明他们的建议是错的，他们也不必为当初的建议负任何责任。你一定要明白，你的路只在你自己手中！</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误七：计划赶不上变化，与其如此，不如随遇而安</strong></span></h3>    </li></ul><p>很多人会说世事变化无常，与其刻意计划，不如随遇而安。貌似说这话的人都很&ldquo;潇洒&rdquo;，但一旦问题来到眼前时，恐怕你就&ldquo;安&rdquo;不了了。一是你没有&ldquo;根&rdquo;，就永远只能四处飘着，永远也无法活得很扎实；第二，正因为你没有&ldquo;根&rdquo;，所以无法构建你的成长之基，并在此基础上构建你的核心竞争力，所以职业永远无法得到成长；第三，正因为你随遇而安，根基不牢，哪怕遇到一点点&ldquo;风&rdquo;险，你就会无法立足，因为你没有任何抗击风险的能力！看看那些在金融危机中被裁掉的都是些什么人吧。如果你没有构建任何适应竞争、抗击风险的能力，那么，当下一次危机来临时（这种危机，或许是别人对你的威胁和竞争，或许是组织结构的调整，或许是并购，或许是倒闭，又或许是一次更猛烈的经济危机），你会不堪一击，第一个倒下的就是你！恐怕那个时候的境况，就不会像你今天说话的时候那样&ldquo;潇洒&rdquo;了吧？</p><p>随遇而安，是因为你的内心在逃避现实；积极行动，构建自己的核心竞争力，你同样可以做到以不变应万变！</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误八：高学历意味着更多的发展机会</strong></span></h3>    </li></ul><p>高学历的人就一定会有更好的发展空间吗？未必！在我所接触过的所有咨询客户中，最有活力的是本科生群体。而那些研究生则连最基本的竞争意识都没有。很多人属于迷迷糊糊地&ldquo;被&rdquo;考研，他们根本就不知道考研的真正目的是什么，甚至从来没有想过这个问题。又有一大批人考不上心仪的专业，被调剂到并不喜欢的方向。真正有明确考研目标的、属于职业生涯规划中的一部分的、并且积极付诸行动的，只占了24%。我最近在咨询的一个客户，如果不考研，他的发展会更好。而读研之后的迷茫，再加上目标不明确所走的两年弯路，其损失已是职业规划投入的180倍！</p><p>并不是所有的职位都需要高学历人才。那些所谓的高学历人才，其实能力并没有与学历相匹配。当越来越多的企业都在考虑务实的用人成本的时候，高学历未必会受到重视。</p><p>学历并不能保障你的成功，那只是一张纸而已。真正让你成功的，是你到底有没有真才实学。如果没有，对不起，所有的公司都不是慈善机构。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误九：国家单位比较稳定，发展有保障</strong></span></h3>    </li></ul><p>绝大多数的人都会有这样的认识。曾经遇到一个客户，XXX（此处省去3个字，不便明说，大家去意会吧）出身，工作十年，好不容易上司高升，遇到一个晋升的机会。凭借自己在单位的能力、表现，他信心满满地以为自己会得到这个机会，但可惜的是，他被一个能力并不强的人打败了。苦等十年得来的机会，就这样眼睁睁看着溜走，于是一气之下辞职，发誓再也不做XXX。提醒那些想进国家单位的人，在进入这些单位之前，你一定要明白&ldquo;编制&rdquo;意味着什么，&ldquo;体制内&rdquo;和&ldquo;体制外&rdquo;又有什么差别，&ldquo;李刚&rdquo;到底有什么不同。如果你贪图稳定，我会告诉你：你肯定会非常稳定，稳定到10年、20年甚至一辈子待在一个职位上，一个级别上，不会有任何改变。如果你渴望这样所谓的&ldquo;稳定&rdquo;，并且没有任何抱怨，那么，我完全支持你的决定。</p><ul>    <li>    <h3><span style="color: #ff6600"><strong>错误十：这个社会，要想成功太难了</strong></span></h3>    </li></ul><p>成功很难吗？完全错误！尤其是在当前的环境下，我甚至为之欢欣鼓舞，因为这是最容易成功的一个时代！现实的职场中，工作3年以内遇到职业问题的，占了77%，属于职业规划的&ldquo;重灾区&rdquo;。真正清楚自己的职业发展目标，并知道如何行动、全面提升和发展自己，没有职业生涯规划问题困扰的，只占了3%。也就是说，如果你有了完整的职业规划，并愿意朝着目标积极行动，97%的人都不是你的对手，你完全可以无视他们的存在。剩下的那3%，你也完全不必害怕，因为中国的企业有足够的空间和机会，完全能够让你与这3%的人共容。那么，既然成功这么容易，为什么还会有这么多的人失败呢？因为，最厉害的那个对手，其实就是你自己！如果你没有前瞻意识，只顾眼前，从来不考虑未来；或者只是停留在&ldquo;想一想&rdquo;的层面上，而从来没有真正行动过，那么，你将永远打法打败这个对手！你现在的失败状态，仍将持续！成功，将永远会与你无缘！</p><p>你是谁？你从哪里来？你要到哪里去？未来的路如何走？家庭的责任谁来承担？你是想靠自己的努力获得成功，还是想成为&ldquo;啃老&rdquo;或者&ldquo;蚁族&rdquo;中的一员？成功与失败，你到底如何抉择？你又凭什么保证成功？你是否做好了积极行动的准备？什么时候行动，是现在，立刻，马上；还是想活着潇洒、安逸一些，等着&ldquo;以后再说？&rdquo;</p><p>你现在的选择，决定了你未来的成长。如果你现在后悔，那么，你以前的走的路肯定是错的；如果你不想再后悔，那么，从现在开始，就要认真走好每一步，不要再稀里糊涂地过日子！否则，你肯定会成为最失败的那个人！</p>]]></description><category>杂项</category><comments>http://www.yoyocaso.com/blog/post/381.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=381</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=381&amp;key=707454ee</trackback:ping></item><item><title>愿大家_2K11_Happy_New_Year！</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/380.html</link><pubDate>Sat, 01 Jan 2011 07:41:44 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/380.html</guid><description><![CDATA[<p style="text-align: center"><img alt="" src="http://www.yoyocaso.com/blog/upload/201101010746391433.jpg" /></p><div style="text-align: center">文字，短信，邮件，电话，贺卡，线上消息&hellip;&hellip;</div><div style="text-align: center">传达的均是我们第一时间的祝福</div><div style="text-align: center">愿我的每一位朋友、长辈</div><div style="text-align: center">新年快乐！^_^</div>]]></description><category>日志</category><comments>http://www.yoyocaso.com/blog/post/380.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=380</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=380&amp;key=1d739167</trackback:ping></item><item><title>关于UI设计你需要自问的12个问题</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/379.html</link><pubDate>Tue, 31 Aug 2010 07:03:07 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/379.html</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: arial, 宋体, sans-serif; font-size: 14px; line-height: 28px; color: rgb(51, 51, 51); ">　　UI 设计的魅力在于，你不仅需要适当的技巧，更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都 需要完整一致。为了实现这个目标，你需要问自己 10 个最基本的问题。<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">1. 你的 UI 是否高度一致？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/0(3).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　用户来到你的站点，脑子里会保持着一种思维习惯，你的 UI 需要保持一致，以免用户的思维方向被打乱。比如，如果你的某个品目下的产品可以拖放到购物车，那你站点中所有产品都应该可以这样操作。将按钮放到不同页面 相似的位置，使用相契合的配色，使用一致的语法和书写习惯，同时，让你的页面拥有一致的结构。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">２．用户能自由掌控自己的操作吗？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/1(15).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; width: 585px; height: 297px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　你应当分析一下，自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为，确保他们能从某个地点跳出，能够毫无障碍地退出。那些在用户离开前 弹出窗口的行为是 UI 易用性的一个大问题。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">３．你知道谁是你的用户群吗？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/2(14).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　要设计有效的 UI，必须对你的用户群有所了解，不同的用户阶层对不同的设计元素有不同的理解，17~25 岁年龄段的人，和 40~55 年龄断的人有不同的喜好。你的 UI 设计必须针对你的用户群进行设计。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">４．你是否有足够的预防错误的措施？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/3(12).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; width: 585px; height: 280px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　应该尽可能检查程序中的错误和 BUG，虽然你可以弹出一个窗口告诉用户发生了什么，但为了更好的用户体验，最好减少这些东西。Beta 测试是消减错误的最好方法。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; page-break-after: always; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">５．你是否首先将最重要的东西展示给用户？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/4(13).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　将重点放在重要的内容上面，首先为用户展示最重要的内容，以便用户更好地理解你的内容。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">６．你的设计是否简约？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/5(11).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　很多站点的设计十分简约，简约设计可以增强 UI 的易用性，可以让用户不必关心那些无关的信息。你的 UI 应该是这样的，它的功能很强大，但设计很简约，拥挤的界面，不管功能多么强大，都会吓跑用户。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">７．你是否使用了视觉提示？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/6(5).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　如果你使用了 Ajax， Flash 一类的技术，当内容在加载的时候，应当提供视觉提示，应当始终让用户知道目前在做什么。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">８．你的 UI 是否有操作提示？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/7(4).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　你的用户是否靠自己研究或 FAQ 文档学习如何操作？你应当在 UI 现场提供简单的操作提示，比如，使用 jQuery 在你的各个 UI 元素上显示操作提示。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; page-break-after: always; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">９．你的内容是否清晰？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/8(7).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />确保你的文本准确，清晰，易懂。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">１０．你如何使用色彩？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/9(5).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　色彩是 UI 的重要元素，不同的颜色代表不同的情绪，你对色彩的使用应当和站点以及主题相契合。还应注意，有的用户是色盲，你应当考虑到他们的感受。色彩的使用应该一 致，一旦选定了某种配色，就应该在整个站点一致使用这种配色。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">１１．你的 UI 是否大象无形？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/10(8).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　UI Engineering 曾经说过，&rdquo;最好的设计不是用来看的，是用来体验的&quot;。这意味着，你的 UI 应该让用户去体验，而不是放一些花哨的东西给用户看。UI 设计越简单，用户体验越好，不要滥用设计元素，不要使用拥挤的界面。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">１２．你的 UI 是否有良好的结构？</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; text-align: center; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><img alt="" src="http://www.chinaui.com/UserFile/News/images/11(6).jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-style: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; " /></strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">　　你的 UI 中，各个元素应当放在他们应当放的位置，总体结构应当清晰，一致，相互关联，那些不相关的东西应当单独放置。</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; word-break: break-all; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div></div></div></span></p>]]></description><category>交互</category><comments>http://www.yoyocaso.com/blog/post/379.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=379</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=379&amp;key=ae4ac06b</trackback:ping></item><item><title>人机界面的最新趋势</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/378.html</link><pubDate>Sun, 29 Aug 2010 16:03:27 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/378.html</guid><description><![CDATA[<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 人机界面的最新趋势是什么？当你在市场上搜寻新的人机界面解决方案时，你应该注意些什么？本白皮书的目的就是概述在由软件推动的工业人机界面解决方案方面的最新的关键性趋势。人机界面解决方案从手机、MP3播放器等面向用户的产品的先进图形处理中获取灵感，从而创造了友好且直观的用户界面。<br /><br />&nbsp;</p><p>　　<strong>趋势1：人机界面成为用户体验的不可分割的一部分</strong></p><p>　　用户界面的重要性在过去的数年中已经越来越明显。以苹果公司的图形界面产品iPod或iPhone为例，它们揭示了直观诱人的用户界面是如何彻底改变人们对特殊产品种类的看法的。&nbsp;</p><p>　　苹果公司产品和其他面向用户的商品的成功展示了产品、图形和环境间相同的视觉和触觉效果是如何为品牌认知和一贯用户体验做出贡献的。&nbsp;</p><p>　　很多工业公司已做出了同样的结论，并开始密切注意它们产品的用户界面的质量。在很多方面人机界面是机器或流程的前沿。在人机界面里内置更高级的功能和互动，用户界面就能更好地反映对该机器或流程的真实体验。通过增加合适的视觉和触觉效果，明日成功的人机界面将把人机界面解决方案的概念从仅仅是一个功能性附件提升到是用户体验的不可分割的一部分。&nbsp;</p><p>　　设计特色将包括使用可以扩展到任何尺寸而不损坏图像品质的WPF物品，和使用从互联网上发现或购买的.Net物品。模板和对象样式的使用可以帮助以有效的方式确保持续且可重复使用的设计。将包括Windows媒体对象在内的所有功能对象内置在所需的屏幕设计中可以进一步增强用户的积极体验。&nbsp;</p><p>　　除了机器制造者可以获得相对优势，对于终端用户来说，投资于开发和精心设计直观用户界面也有着众多的益处。明日直观的人机界面解决方案的价值增益体现在使用方便、高效率、高生产率、完成任务的时间减少、用户满意度增加、系统性能更稳定和用户错误更少上面。<br /><br />　　<strong>趋势2：基于现代最佳软件技术的革新</strong>&nbsp;</p><p>　　人机界面的演变是由基于高质量高性能面板硬件的持续发展的软件推动的。在今天，面板硬件被视为是人机界面软件平台的载体，通过它，OEM设计工程师可以为公司产品增加一系列的功能和设计特征，从而使产品增值。软件平台因而是人机界面解决方案的重要元素。&nbsp;</p><p>　　人机界面软件的开发费用高昂且复杂，创新性人机界面制造商需要将他们的软件平台建立在例如.Net技术的现代化且使用广泛的技术上，从而可以接入范围广泛的工具和功能。</p><p>　　未来对人机界面解决方案的技术平台的维护和开发也是如此。.Net背后的资源是巨大的，这将体现在对人机界面软件的新功能的持续开发上。依赖于专有技术或是小型销售商的技术的确是一种方法，但却充满风险。&nbsp;</p><p>　　通过持续跟新和服务支持，基于微软公司.Net框架或相似技术的人机界面解决方案很可能可以确保其工具不落后于未来的发展，这是对其自身产品和外部供应商有着长期战略规划的原始设备制造商非常愿意看到的。<br />&nbsp;<br /><strong>　　趋势3：用于整体解决方案的开放式平台构架</strong>&nbsp;</p><p>　　人机界面一般将机器或流程的操作同出入操作者的反馈整合起来。一方面是图形用户界面的质量和相关的可用性。另一个重要方面是人机界面方案的开放度。与不同的系统或控制器交换重要信息是易还是难？为了定制功能或对象是否将应用代码锁住？运行时间软件能在不同的硬件平台上操作吗？设计工程师能在他们的项目中使用标准的.Net对象吗？这些是经常在用户和销售者的对话间出现的话题。&nbsp;</p><p>　　明日人机界面方案的开放式平台构架将为原始设备制造商提供一系列众多机会来加强应用程序的视觉效果、功能和连通性，从而促进有着极大完整性的独特产品的面世。&nbsp;</p><p>　　人机界面方案的专有性更低，能在选择运行时间平台方面提供更大的自由度；从紧凑的操作者面板到由不同制造商生产的工业电脑。&nbsp;</p><p>　　可以创建一个可扩展的主工程，它可以被应用于多种控制器品牌和面板分辨率，优势是只须维护一个工程。工程师们将要求使用脚本工具的机会，例如C#脚本，从而将对象的外观或功能用户化。设计工具为输入第三方对象和.net控制提供了可能。&nbsp;</p><p>　　连通性和交流的自由度是真正开放的人机界面方案的标志，其包含的选择有控制器间数据的简单实时交换，直至SQL和OPC与其他设备和IT系统的交流。&nbsp;</p><p>　　<strong>总结：</strong>人机界面方案一直处于变化中。工业用户界面从手机和MP3播放器等面向用户的产品的高端三维图形处理和基于图标的导航和控制功能中获得灵感，从而创造了友好且直观的用户界面。潮流制定者人机界面方案将支持该理念，充分内置最新的图形处理和功能，提供精心设计的直观用户界面，该界面基于被广泛使用的灵活的现代软件技术和真正开放式平台构架。&nbsp;图形用户界面不一定要使用高级图形解决方案。简洁和一致往往胜过复杂而过于艺术的解决方案。但是，设计流程常常获益于图形设计者和应用工程师的合作。</p>]]></description><category>交互</category><comments>http://www.yoyocaso.com/blog/post/378.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=378</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=378&amp;key=f9355edf</trackback:ping></item><item><title>知识越多，设计越有成效</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/377.html</link><pubDate>Sun, 29 Aug 2010 16:00:01 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/377.html</guid><description><![CDATA[<h3>设计师并不仅仅让设计看起来美观</h3><p>　　很显然，用户体验设计师设计用户体验，但是，我们所说到的&ldquo;用户体验&rdquo;到底是什么呢？在网络上，当用户使用一个网站或者网页应用的时候，用户的整体体验由很多方面构成：</p><blockquote><p>网页给人的视觉感受<br />用户是否能达到他的目的<br />网页响应用户的整体速度<br />预期是否发生，例如，如果用户认为网页会对自己的操作产生某种形式的响应，但是却并没有，他会感到很失望。</p></blockquote><p>　　以上只是举些简单的例子。那么什么才是良好用户体验的要素呢？可以这么说，所有的细节都是。您网站的用户体验并不仅仅是指您的网页看起来如何，或者是当用户点击一个按钮时会发生什么，也不仅仅是指用户完成预定目标的流程，而是包括了一切细节。从用户打开您的网站到离开的整个过程中，他所做的一切和经历的一切都是用户体验的组成部分。用户体验设计师的工作是非常重要的，多方面的知识能使他的工作发挥更大的效用。</p><h3>用户体验设计师需要知道什么</h3><p>　　用户体验设计与用户界面设计并不相同，涉及的方面要多得多。个人认为，用户体验设计师的工作应该包括用户界面设计，以及用户在达到目标过程中的任务流程设计，需要设计师了解可用性测试的知识，了解易用性和一些用户的特殊需求，还需要了解系统的基本功能是怎么在运作的。最优秀的用户体验设计师能结合多个学科的知识（如设计、开发，心理学）运用到工作中以最大限度地使用户受益。例如我在Twitter上和Lukas的会话中举过的一个例子，一个用户体验设计师需要知道Ajax如何工作才能更有效地使用它。如果你不知道Ajax如何工作或者服务器请求是如何工作，你又怎么能确定在某些特定的环境中，Ajax方式对于用户体验来说是最好的？Lukas在Twitter上的留言里这么回复：这恰恰是忽视代码实现而改善用户体验的一个完美的例子；页面刷新会使页面更容易和快速地执行。正如我在下一段留言里所指出的，Lukas所说的实际上并不正确&mdash;&mdash;在很多情况下，相比整页刷新页面，Ajax请求事实上执行得更快。刷新整页会向服务器发送更多的HTTP请求（例如请求CSS、JavaScript和图片文件），但在很多情况下，Ajax请求仅仅返回一段文本数据，所以它向服务器发送的请求要少得多。在绝大多数情况下，用Ajax请求来发送或者获取数据比整页刷新都要快。</p><p>　　我怎么知道这些的呢？因为作为一个网页用户体验设计师，我需要知道HTTP请求如何工作以及Apache（译注：一种服务器软件）如何响应浏览器端的请求，并且知道当我发送一个Ajax请求的时候服务器端在执行什么样的代码。只有知道这些，才能在使用Ajax或者刷新整页之间选择前者作为解决方案。很多时候我决定用Ajax，正是因为它更快速并且使应用程序更加灵敏地响应用户操作。用户体验的很大一部分来自于用户对应用程序的响应速度的感觉，所以，我使用Ajax是一个以用户为中心的决定，因为我知道这样做能提高用户体验。</p><p>如果有些人仅仅从表面上了解Ajax的运作（&ldquo;页面没有刷新但是执行了某些代码&rdquo;），那么，他在作出决定使用Ajax而不是整页刷新时候，其实并不完全知道Ajax的运作机制，有什么好处，有什么弊端，对应用程序的性能产生什么作用，以及如何影响应用程序缓存等等。这仅仅是一个在对关键知识没有全面了解的情况下靠拍拍脑门就做出的决定。</p><h3>设计大师熟悉自己的工具</h3><p>　　建筑设计师并不仅仅画蓝图，他们需要知道工程地区的地形地貌、气候特征，以及考虑这各种因素选择什么样的建筑材料才最合适。他们并不仅仅是画图，还需要了解建筑工艺和整体结构，需要对建筑材料和建筑过程有深入的了解，这样才能更有效地开展工作。厨师并不仅仅是把各种食材配料堆在一起然后祈祷上天就可以变出美味的大餐，他们需要对食物以及不同人群的口味有深入了解。陶艺师并不仅仅是雕刻出漂亮的泥坯，他们还要烧制泥坯成型。他们需要知道关于上釉、温度和烧制的科学工艺，才能像制作艺术品一样来完成他们的工作。正如建筑设计师、厨师和陶艺师一样，用户体验设计师也需要知道关于网络环境和媒介的知识。网页设计师设计网页，并且熟知可以将他们的设计图最终实现成用户界面的HTML和CSS。如果他们不懂得HTML和CSS，那么他们并不是真正地设计网页，因为他们的设计不会考虑网络环境的制约。当一个自诩为网页设计师的人对网络媒介并没有深入了解的时候会出现什么情况呢？在对自己的设计将如何影响用户体验缺乏足够了解的情况下做出的决定，无疑是很糟糕的。举个例子：设计师A传给HTML/CSS开发人员B一个用户界面的设计图稿。这是一个由多种元素组成的复杂的界面，每个框的每个角都是圆角，并且有3种不同的边框，还加上了阴影效果。设计稿上的字体都是设计师专用的字体，而没有任何用户电脑上默认的网页字体。</p><p>　　这个例子里，由于设计师对于网络环境的一些局限并不熟悉，他们选择了大量给用户体验带来负面影响的素材来做设计。为了实现那些框的圆角，并且考虑到框会随着里面内容而被撑大，你需要增加HTML标记，CSS和图片来实现。复杂的边框样式？意味着更多的代码标记和图片。阴影效果？那简直需要一摞的具有半透明特殊效果的PNG格式的图片。自定义的设计字体？你可能需要用到&ldquo;可伸缩Inman Flash替换&rdquo;技术来实现了（译注：即sIFR技术，可参考百度百科：<a href="http://baike.baidu.com/view/1311052.htm">http://baike.baidu.com/view/1311052.htm</a>）。使用大量额外的代码标记、图片、Flash文件和javascript仅仅为了实现一个对用户来说并没有多大益处的效果。用户在看到他们期望看到的网页之前需要下载许多字节的数据。加载页面额外的耗时仅仅因为对网络媒介缺乏了解的设计师在设计网页的时候脑袋中并没有考虑网络环境和网络媒介的局限性。这是否意味着你在网页上不能实现一些漂亮的界面效果呢？当然不是，看看网上有那么多看起来漂亮的网页，运行起来也很漂亮。但是那种绘画风格浓重的网页，体积难道不是都很庞大并且很慢？难道不是有很多对用户体验并无好处的视觉效果？事实上他们并不是那么漂亮，并且这也不应该是你设计网页的方式。</p><h3>你不需要是专家</h3><p>　　要理解Ajax请求如何工作，并不意味着你需要为实现Ajax请求去亲手编写JavaScript代码，或者研究Apache服务器的进程处理，但是你需要对它足够理解，才能对它的用途作出合理的判断。正如建筑师在选择各种建筑材料时，并不会因为某种材料看起来比较酷而选择它，他们在做出选择时会综合考虑各方面因素，例如材料的结构硬度、价格、以及缺陷等等。他们在对材料足够了解的基础上作出合理判断，合理选择材料以使物尽其用。网页用户体验设计师做出以用户为中心的高质量的决策也需要对网络环境和媒介有充分了解。如果一个用户体验设计师想要使用一个复杂的交互模型，例如拖放效果，他需要了解程序实现的这种效果应用在网页上的局限。网页上的拖放和桌面应用的拖放并不相同，因此你需要知道为什么不同，有哪些不同，以及如何正确有效地应用它。如果你时常被网页应用的速度问题所困扰，那么，了解一些关于页面加载执行JavaScript文件的字节数方面的知识就显得非常重要了。你还需要知道身体有残障的用户（译注：例如无法进行精确的鼠标操作的用户）如何来使用网页，以及如何让他们也能使用那些拖放功能。在用户禁用JavaScript的情况下，你知道如何去应对。做出一个关于设计的决策并不像看起来那么简单。这个决策的制定需要基于很多相关因素，如设计、开发、结构、可用性以及易用性。用户体验设计师的工作需要从整体上考量各种情景和环境因素，以尽可能地使自己的工作卓有成效。是否掌握足够的和自己的决策有关的知识，直接决定着用户体验朝好的或者负面的方向发展。</p><h3>这有助于你成为专家</h3><p>　　掌握足够的知识来做出一些以用户为中心的好的决策，当然非常好，但是如果能对知识有更加深入、高级的了解，则是最好不过的了。如果你作为一个用户体验设计师，希望在某个界面中使用拖放，如果你能实现整个交互的原型，真切感受一下拖放操作的整体体验，对你的工作将会是非常有帮助的。实践出真知，如果你没有动手去用过一个实际的界面，有些东西你很难真正了解。在设计工作之前能够制作出一个实际的界面原型，及时发现一些你所不了解的东西，这是对你的工作是非常有价值的。随着Apple操作系统的演化，他们的用户交互方式也在不断改进。在Apple公司最新操作系统Leopard以及Apple的许多最新应用中，动画效果和更高级的用户交互方案已作为用户体验的一部分得到运用。如果Apple公司的用户体验设计师完全不了解动画的核心实现，他们就不可能运用Keynote和Flash之类的应用技术来实现动画效果，那么，他们发布的某个用户界面版本很难有实质上的更新。实际上，Apple公司的视觉界面设计师应该知道Flash和Keynote并能用它们来实现用户界面。呃，用户界面设计师应该知道如何编写ActionScript代码才能开展工作？我想是的，如果你不会，那么你团队中会这些技术的那个同事工作上就会比你更加出色。看看那些那些创建Mac和iPhone应用程序的设计师，他们对于自己设计的界面是如何开发实现的都很精通。设计师们研究Cocoa（译注：Apple的面向对象开发环境，用来生成 Mac OS X 的应用程序），以期能够创建iPhone的界面，因为一个优秀的iPhone界面设计，关键部分并不仅仅是视觉效果，还包括交互行为。iPhone开发上最成功的设计师应该是这样的&mdash;&mdash;他们熟悉设计和开发的知识，并且深入地知道两者的局限制约。看看iPhone吧，他非常轻便，节能，并且没有键盘。整部机器其实就是一个最大的制约，你首先需要知道这些限制是什么，才能在这个平台上获得成功。</p><h3>用户体验设计师对你来说意味着什么？</h3><p>　　现在，对于各种从事网页工作的人有如此之多的头衔，这让我感到滑稽可笑。你可能被称作界面设计师、界面工程师，视觉设计师、用户界面工程师，信息架构师或者用户体验设计师。甚至，你还会被叫做可用性工程师、可用性测试工程师、网页设计师，或者网页工程师。有着这么多的头衔，并且这么多的职业技能需要互相跨越，那么，我们怎么知道用户体验设计师和用户界面工程师的工作如何来进行划分和衔接呢？</p><p>　　我只能结合自己职业生涯中的成功之处来谈一谈自己的看法，那就是，尽可能地学习和自己的工作平台有关的知识。在网络上，我的工作是设计用户流程、交互方案、用户界面模型，所有的HTML/CSS/Javascript雏形，并且有时候还需要把这些原型放到后台与数据库连接。　　我从开始设计网页入手，学习了HTML和Javascript，然后学习了CSS、jQuery和Prototype框架，再到后来学习了PHP、MySQL和一些Ruby编程的知识。只要有机会我无处不在学习，因为，对于那些与你做出正确决策有关的知识，当然是越熟悉越好。如果你掌握的信息越多，能获得真实体验，并且很深入地了解相关知识，那么你作出的决策会更加正确，你的网站和应用程序对用户来说也更加地友好。当你需要作出一些重要的，以用户为中心的决策的时候，你掌握的知识永远不会嫌多。掌握越多的知识，你看待问题就会越全面。</p>]]></description><category>交互</category><comments>http://www.yoyocaso.com/blog/post/377.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=377</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=377&amp;key=188f8686</trackback:ping></item><item><title>常见UI设计模式</title><author>yoyocaso@163.com (yoyocaso)</author><link>http://www.yoyocaso.com/blog/post/376.html</link><pubDate>Wed, 25 Aug 2010 06:51:26 +0800</pubDate><guid>http://www.yoyocaso.com/blog/post/376.html</guid><description><![CDATA[<div class="entry"><p>　　交互设计师在设计线框图原型时，熟知常见的web设计模式很有帮助，做到&ldquo;心中有数&rdquo;才能创造出符合需求，用户易学易用的界面来。所谓&ldquo;没有必要重复发明轮子&rdquo;，模式往往容易解决常见问题，正确的模式能帮用户熟悉界面、提高效率。</p><blockquote><p><strong>常见的UI设计模式如下图：</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/1.png"><img class="aligncenter size-full wp-image-817" title="ui设计模式001" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/1.png" width="564" height="494" /></a></p><p>下面分别进行具体分析，遇到不同需求的时候就可以选择合适UI设计模式。</p><blockquote><p>01.<strong>主体/细节（Master/Detail）模式</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-20-11.png"><img class="aligncenter size-medium wp-image-750" title="ui设计模式4" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-20-11-300x109.png" width="300" height="109" /></a></p><p>　　主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下，引导他们在类目下高效地切换，这无疑是一种理想的方式。如果主体信息对于用户来说更重要，最好选择横向布局。或是主体部分不仅条目多而且包含信息也多，那也该选择这种横向布局。</p><p>　　举例来说：</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/88.jpg"><img class="aligncenter size-full wp-image-906" title="88" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/88.jpg" width="425" height="244" /></a></p><p style="text-align: center">Windows窗口属于纵向排布</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/md_ex61.png"><img class="aligncenter size-full wp-image-825" title="md_ex6" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/md_ex61.png" width="485" height="318" /></a></p><p style="text-align: center">Mac mail的横向排布</p><blockquote><p>0.2<strong>分栏浏览(Column Browse)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-21-29.png"><img class="aligncenter size-medium wp-image-751" title="设计模式5" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-21-29-300x108.png" width="300" height="108" /></a></p><p>　　分栏浏览也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并逐步引导用户找到需要的信息。</p><p>　　举例：</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/55.jpg"><img class="aligncenter size-full wp-image-907" title="55" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/55.jpg" width="425" height="307" /></a></p><p style="text-align: center">Outlook采用逐级分栏的界面，用户可以选择进入&ldquo;收件箱&rdquo;&mdash;&mdash;&gt;&ldquo;某封收件&rdquo;&mdash;&mdash;&gt;&ldquo;具体邮件内容&rdquo;</p><blockquote><p>0.3<strong>搜索/结果(Search/Result)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-23-25.png"><img class="aligncenter size-medium wp-image-752" title="设计模式6" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-23-25-300x107.png" width="300" height="107" /></a></p><p>　　搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/33.jpg"><img class="aligncenter size-full wp-image-903" title="33" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/33.jpg" width="425" height="237" /></a></p><p style="text-align: center">Gmail采用简单搜索</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/fgr.jpg"><img class="aligncenter size-full wp-image-910" title="fgr" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/fgr.jpg" width="425" height="110" /></a></p><p style="text-align: center">而对于google学术的用户，高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。</p><blockquote><p>0.4<strong>过滤数据组(Filter Dataset)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-24-35.png"><img class="aligncenter size-medium wp-image-753" title="ui设计模式7" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-13-24-35-300x108.png" width="300" height="108" /></a></p><p>　　分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结果进行再过滤。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/221.jpg"><img class="aligncenter size-full wp-image-902" title="22" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/221.jpg" width="425" height="250" /></a></p><p style="text-align: center">51job用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如&ldquo;发布时间、薪金&rdquo;等条件，进一步优化信息</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/11.jpg"><img class="aligncenter size-full wp-image-909" title="11" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/11.jpg" width="425" height="197" /></a></p><p style="text-align: center">以京东为例，多数电子商务网站在用户初步模糊搜索后，提供进一步优化的过滤条件。上图中，京东采用的是横向排列方式</p><blockquote><p>0.5<strong>表单(Forms)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-35-23.png"><img class="aligncenter size-medium wp-image-769" title="ui设计模式0" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-35-23-300x218.png" width="300" height="218" /></a></p><p>　　表单类型众多，也是最能体现用户体验是否良好的地方。其中包含很多内容，推荐专门介绍表单的书：《Web Form Design: Filling in the Blanks》。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/3.jpg"><img class="aligncenter size-full wp-image-894" title="3" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/3.jpg" width="425" height="256" /></a></p><p style="text-align: center">注册信息一般使用表单</p><blockquote><p>0.6<strong>调色盘/画布(Palette/Canvas)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-39-37.png"><img class="aligncenter size-medium wp-image-773" title="ui模式02" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-39-37-300x222.png" width="300" height="222" /></a></p><p>　　调色盘/画布虽然不算最常见模式，但它对于创造图形类文档有着不可替代的优势：比如设计线性或非线性图；流程图；页面布局；制定物理大小的设计/图表或控制布局。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/ggg.jpg"><img class="aligncenter size-full wp-image-904" title="ggg" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/ggg.jpg" width="425" height="321" /></a></p><p style="text-align: center">对于设计师来说调色盘/画布这种模式并不陌生，常用软件，例如：Axure、ps都是采用这种方式。</p><blockquote><p>0.7<strong>仪表盘(Dashboard)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-45-56.png"><img class="aligncenter size-medium wp-image-776" title="UI设计模式03" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-45-56-300x216.png" width="300" height="216" /></a></p><p>　　一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操作，清晰的入口和浏览。理论上讲，在一个屏幕下展示复杂的数据本身就很难。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/22.jpg"><img class="aligncenter size-full wp-image-893" title="22" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/22.jpg" width="425" height="319" /></a></p><p style="text-align: center">之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘</p><blockquote><p>0.8<strong>电子表格(Spreadsheet)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-59-10.png"><img class="aligncenter size-medium wp-image-778" title="ui设计模式04" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-14-59-10-300x220.png" width="300" height="220" /></a></p><p>　　方便用户快速浏览，编辑大板块信息的理想模式。电子表格需要提供下列功能：标准的表格（诸如分类，隐藏/显示 栏目，重列栏目，分组（如果可以）），全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/66.jpg"><img class="aligncenter size-full wp-image-901" title="66" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/66.jpg" width="425" height="168" /></a></p><p style="text-align: center">淘宝购物车选择使用电子表格，可以让用户对已选商品进行快速编辑（增加/减少数量，删除等）</p><blockquote><p>0.9<strong>向导(Wizard)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-21-27.png"><img class="aligncenter size-medium wp-image-781" title="ui设计模式06" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-21-27-300x215.png" width="300" height="215" /></a></p><p>　　对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-36-403.png"><img class="aligncenter size-full wp-image-900" title="2010-8-20-15-36-40" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-36-403.png" width="594" height="143" /></a></p><p style="text-align: center">京东上使用wizard快速引导不熟悉流程的顾客完成付款</p><blockquote><p>0.10.<strong>Q&amp;A(Question&amp;Answer)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-37-52.png"><img class="aligncenter size-medium wp-image-783" title="ui设计模式09" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-37-52-300x220.png" width="300" height="220" /></a></p><p>　　Q&amp;A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&amp;A不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清他们缺乏经验的在哪里（比如健康保险，抵押，计划，购买）有哪些可供的选择或建议。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/41.jpg"><img class="aligncenter size-full wp-image-888" title="4" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/41.jpg" width="425" height="268" /></a></p><p style="text-align: center">上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话费套餐</p><blockquote><p>0.11.<strong>平行面板(Parallel Panels)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-46-25.png"><img class="aligncenter size-medium wp-image-787" title="ui设计模式07" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-46-25-300x218.png" width="300" height="218" /></a></p><p>　　平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/Untitled-1.jpg"><img class="aligncenter size-full wp-image-937" title="Untitled-1" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/Untitled-1.jpg" width="564" height="349" /></a></p><p style="text-align: center">Google的calendar在日历上可以直接编辑提示内容</p><blockquote><p>0.12.<strong>交互模型(Interactive Model)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-52-35.png"><img class="aligncenter size-medium wp-image-789" title="ui设计模式008" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-15-52-35-300x221.png" width="300" height="221" /></a></p><p>　　交互模型屏幕模式应用在很多交互要素需要与关键项目（比如日历、地图、图标、画布等）进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果非常好。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/5.jpg"><img class="aligncenter size-full wp-image-887" title="5" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/5.jpg" width="425" height="223" /></a></p><p style="text-align: center">Google的calendar在日历上可以直接编辑提示内容</p><blockquote><p><strong>附加</strong>：13.<strong>空白状态(Bonus. Blank State)</strong></p></blockquote><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-16-41-28.png"><img class="aligncenter size-medium wp-image-794" title="ui设计模式008" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/2010-8-20-16-41-28-300x218.png" width="300" height="218" /></a></p><p>　　空白状态指在任何数据输入或进入系统前，应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括：视频，快速教程，帮助提示，安装后的截图。</p><p><a href="http://www.zhangyq.com/wp-content/uploads/2010/08/7.jpg"><img class="aligncenter size-full wp-image-890" title="7" alt="" src="http://www.zhangyq.com/wp-content/uploads/2010/08/7.jpg" width="425" height="190" /></a></p><p style="text-align: center">Wufoo是一个在线表单设计网站，初始后会引导用户建立表单</p><blockquote><p><strong>14.其他模式</strong></p></blockquote><p>　　还有两种广泛使用但在企业软件很少使用的模式。</p><p></p><p><strong>- 门户</strong>：如果你是市场调研专家，商业需求分析师和用户反馈调研员设计门户，可以参考控制面板的设计规范和案例。</p><p><strong>- Tabs</strong>：其实Tab是一种部件，不是一种模式。它为在多种同语境下的数据提供多选一选择。如果数据结构导致你的设计tab显得很多。有两个小建议：第一，重新考虑架构。通过使用卡片分类或请教一名专业的信息架构师；第二，可以参考平行面板的规范和案例。</p><p><br />参考文献：《Designing interfaces》and 《Designing web interfaces》<br /><br />出自：<a href="http://www.zhangyq.com/"><font color="#0fade5">http://www.zhangyq.com</font></a>谢谢。</p><div class="clear">&nbsp;</div></div><p>&nbsp;</p>]]></description><category>交互</category><comments>http://www.yoyocaso.com/blog/post/376.html#comment</comments><wfw:comment>http://www.yoyocaso.com/blog/</wfw:comment><wfw:commentRss>http://www.yoyocaso.com/blog/feed.asp?cmt=376</wfw:commentRss><trackback:ping>http://www.yoyocaso.com/blog/cmd.asp?act=tb&amp;id=376&amp;key=6ca427d1</trackback:ping></item></channel></rss>

