如何使用jQuery UI库开发Web界面
一．jQuery UI
jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库。包
含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很
好交互性的web 应用程序。
jQuery UI 的官网网站为：/
jquery-ui-x.xx.x.custom.zip
。里面目录结构如下：
1.css，包含与jQuery UI 相关的CSS 文件；
2.js，包含jQuery UI 相关的JavaScript 文件；
3.Development-bundle，包含多个不同的子目录：demos(jQuery UI 示例文件)、docs(jQuery
UI 的文档文件)、themes(CSS 主题文件)和ui(jQuery ui 的JavaScript 文件)。
4.Index.html，可以查看jQuery UI 功能的索引页。
二．CSS 主题
CSS 主题就是jQuery UI 的皮肤，有各种色调的模版提供使用。对于程序员，可以使用
最和网站符合的模版；对于美工，也提供了没有任何样式的模版基于设计。
可以在这里：/themeroller/ 查看已有模版样式。
三. 简单引入
由于jQuery UI 不同组件的引入都有类似的特点和语法，所以这里只介绍两种组件
的引入方式，这样可以以此类推其他组件的引入方式。
button 按钮
//将button 按钮设置成UI
$('#button').button();
dialog 对话框
//将div 设置成dialog 对话框
$('#dialog ').click(function () {
&$(&#dialog &).dialog();
这样的形式，可以得知，jQuery UI的引入都是这样的 组件名() 方法的形式引入。
【声明】:黑吧安全网()登载此文出于传递更多信息之目的，并不代表本站赞同其观点和对其真实性负责，仅适于网络安全技术爱好者学习研究使用，学习中请遵循国家相关法律法规。如有问题请联系我们，联系邮箱，我们会在最短的时间内进行处理。
上一篇：【】【】不会 A/B 测试的 Web 设计师不是好程序员
设计一个网站无论对设计者还是业主都是一个浩大的工程。但是，不管你是创建一个新的网站，还是对已有网站做重新设计，有一个至关重要的点，你的决定要基于数据而不是基于感觉。对客户和设计来说，在设计过程中做出的决定，可以决定创意，可以决定商业的成败。
为了避免你下一个作品中潜在的缺陷，你应该将 A/B 测试做为你设计工具的标准配置。对客户网站做简单的 A/B 测试可以让你交付之前避免设计，导航，功能上的任何缺陷。这样可以让你交出最终产品，不仅视觉效果极佳，还有优化的交互 -- 他们会爱上你的。
听起来很有趣？继续阅读，看看 A/B 测试如果让你成为更好的 web 设计师。
A/B 测试 101
A/B 测试（又称分割测试），允许你在一个网站测试两个不同的测试元素，测试目的是判断哪种设计对完成特定目标是最有效的。
做 A/B 测试时，进入网站的用户会被随机分配到两个组：一半在&A 组&，另外一半在&B 组&。随后每组显示你选定的不同设计元素&&&例如，登录页面，商铺主题，响应按钮，或者结帐流程。
通过对真实用户实时测试两组不同的设计元素，你可以收集成有意义的数据用来确定每个组的设计元素对访客行为的影响。这会给你更来设计洞察力，帮助你为客户创建最佳在线商业方案。
从本质上讲，A/B 测试帮助你在每一个项目上设计出最好的网站。&
其它翻译版本(1) 为什么 Web 设计者应该做 A/B 测试
创建最好的网站应该就是你开始在设计项目中把 A/B 测试作为标准服务来提供的充分理由。不过如果你还不服气的话，下面也是你可以预见到的其它好处：
1. 增加收入&& 通过将 A/B 测试当做一项服务涵盖到你的自由职业项目中，就能为你带来更多的项目收益。你既可以将其作为标准化服务包含到你的 web 设计包中，也可以利用其在网站优化方面的好处将其作为加钱项。你的客户会花费一个体面的金额以让他们的网站建设专业起来 & 把 A/B 测试作为一项后续服务来做出明智的设计修改，这样做将帮助他们获得收入的最大爆发(而你自己也能赚更多一点)。
2. 减少客户纠纷&& 当扯到要为一个网站做出设计决定的时候，看起来房间里的每个人都对于网站应该怎么怎么样持有各自的观点 & 特别是为此花了钱的客户。幸运的是，A/B 测试为你提供了具体的数据来指导设计决定，并且无需得罪客户就能化解掉不必要的纠纷。
3. 心满意足的客户&& 将所有精力集中到网站的视觉设计上而忽略其功能性目标这种事情是很容易发生的。然而大多数客户确实想要一个好看的最终产品，每个客户其实更关心那个网站的转化。运行 A/B 测试能向你的客户说明你是真正在关心他们业务的在线目标的，并且也希望尽力帮他们完成预期。
如何设计一个简单 A/B 测试
如果之前从来没有运作过一次 web 优化实验，第一次的 A/B 测试看起来就会相当令人为难。但是不要担心，创造一个简单的 A/B 测试其实还是相当简单的。下面我会概述一种你可以开始尝试运作你的首次 A/B 测试的策略性方法。
定义你的目标
在你开始测试一些东西的时候，你需要去理解网站的目的。理解了网站的目的就能让你确定在量化的指标方面成功对于你的客户意味着什么。这些指标，也叫做转换，代表了你所期望的访问者将会在网站上进行的动作。通过及早定义目标和成功指标，你就为 A/B 测试将要执行的操作划定了一个框框。
你的转换指标将根据你所设计的网站的类型而有所不同。下面的表格概述了不同网站类型的常见转换指标：
为了让你的测试得到最好的结果，你需要识别过程通道中用户失去访问兴趣或者脱离通向转换路程的区域。这些障碍被称为瓶颈。就是这些瓶颈对你的网站的表现产生了消极的影响，也就是你想要运作 A/B 测试的地方。
如果你在客户的商店中设置了 Google Analytics，其内置的转换跟踪可以提供相对简单的方式来识别用户体验中潜在的瓶颈，可以在分析管理界面中设定你的转换目标，通过定义一些用户走向转换的过程中的事件和页面就可以简单地创建一个转换通道。
电子商务网站上常见的一个简单转换通道示例应该是这样的: &放到购物车& 到 &查看购物车&到&下单& 到 &选择支付方式& 到最后 &订单确认&。这里有一个&很棒的指南&能帮助你开始在 Analytics 上进行转换跟踪，另外还有一个能帮助你进行更多&高级的通道转换跟踪&的设置。
一旦你设置好了转换目标和通道，你就能够使用&Google Analytics 的&Goals&找到的&Goal Flow&报告来识别瓶颈了。通过对造成最多门槛和用户退出的事件和页面进行高亮显示，这份报告能够帮助你着力于对测试最有益的区域。
创建一个假设
一旦你确认了目标并识别除了瓶颈，你就应该创建一个你确信的假设，有关于对站点的设计修改会改变访问者行为的。这会使得你的测试更具价值，因为它想过程中加入了一层目的，确保你仍在保持对于整个测试目标实现过程的跟踪。
例如，假设你的客户的最终目标是降低网站的购物车放弃率。你已经完成了调查并识别出影响现有比率的瓶颈在于出现在&结算信息&页面之后而在&确认&页面之前的&传递信息&页面。在这种情况下，你的假设可以像下面这样：
&如果我们通过将计费和传递信息页面整合成一个页面来缩短结账流程，那么整体的购物车放弃率将会降低。&
如果你在没有创建一个假设的情况下去尝试运作一次测试，你还是会收集到关于访问者有价值的数据。不过不幸的是，你会错过对于诸如为什么结果是他们这样做了这种问题的更深层次的分析和验证。即使你的测试失败了，你还是能够从实验中得出一些结论。实验的妙处在于，在整个站点上的实现之前放弃那些不起作用的想法。
设计一些修改版本
在你可以去实践你的实验之前，你需要针对你所测试的特定的设计元素创建修改版本。元素原来的版本是控制版本，而新的版本都是这个控制版本的变化版本。
为了开发出最准确和公正的 A/B 测试，要确保新的版本中只有控制变量其中之一被修改了。例如，你可以测试一个号召性按钮(如前所述)的颜色，或者其在页面上的位置，但不能同时测试。将你的测试限制于单一变量确保了你可以放心地将行为所发生的变化归因于做出了设计修改的变量。
瓶颈确认而且构建了设计变量，你几乎就已经准备好运作你的A/B测试了。为了确保你的测试能提供最精确的结果，你会想要确保下面两件事情发生在实现期：
1. 向一组随机选择的站点访问者分组同时展示你的变量和控制版本的元素.
2. 将你的测试运行足够长的时间，那样它就能展示尽可能最大数量的样本.
遵循这两项准则将有助于确保实验提供了统计上最显著的可能结果。那样，你就可以对你所使用的数据放心了，因为你所做出的最终设计决定的基础是可靠和精确的。
对于初学者要在他们的站点&&不管它是不是在 Shopify 上&&&上开始实现一次 A/B 测试最容易的方法就是使用 A/B 实验工具，有各种工具可以供你用来在网站上进行 A/B 测试, 而我建议你先从&,&, 或者&&开始。
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章stack overflow问答：程序员如何学习web设计？
招聘信息：
翻译自stack overflow，只取最高票的回答。问题：我工作的大部分时间是作为一个后端的应用开发者。我从事于企业web项目开发，但从未接触过UI和设计。那些好看的网站和UI经常给我留下深刻印象。现在，我尝试着开发一个面向大众的网站，我能使用CSS、HTML，但被困在web设计、UI问题上。我不想使用模板或者盗用别人的web设计。那么问题来了，一个程序员应该如何学习设计好看的网站/UI，我应该学习和使用什么工具，对于设计的感觉是天赋吗？回答：作为一个web/美术设计师，我认为提升你的设计能力最好的方法是去看，看大量的优秀设计，并且主动的去寻找它们。就像pixeline（比利时web设计师）说的，设计没有许多客观知识能够学习（不过还是有一些的）。更重要的是提升你的“审美眼”。如果你总是处在各种高质量的设计包围当中，你的品位会自然的改善，你的web设计也会自然的跟上你的审美水平。举个例子，我在一个独立的金属摇滚品牌下面工作，所以我经常被叫去设计乐队网站、专辑、杂志广告，甚至贴纸、文化衫、其他商品等等。因此我经常翻阅摇滚杂志并且观察别人设计的广告，或者钦佩于别的乐队设计的小商品，或者检察别的品牌的网站设计。这些不仅仅是当我碰到瓶颈时的灵感来源，以及定位自己的水平或者找出需要改进的地方的辅助，还帮我跟踪业界千变万化的趋势和时尚，以便用于个人的设
计当中。就像我们知道的，时尚是反复无常的，人们的品位也一直在变化，好的设计师知道如何保持停留在潮流的最前端。这意味着你的设计不能太偏离一般性的审
美眼光（否则会被观众拒绝），但你也不会想要采用那些被过度使用或者已经过时的设计元素。如果你认为自己足够创新，但不知道观众是否接受你的设计，你需要掌握web设计的艺术。一个好的设计师能够察觉新兴的趋势并且利用它们，给它们进行调整让它们成为自己的。如果你刚刚开始学习web/美术设计，不要害怕模仿他人或者使用好的创意。你不应该剽窃，把荣誉归功于那些应该拥有它的人，但就像临摹名画是锻炼绘画技术的基本方法，模仿高质量的设计也是一个有效的学习美术设计的方法。像和Screenalicious（译者注：这个网站过于久远已经失效了，若说如今的web设计网站，舍其谁？）这样的网站是让人沉浸于高质量设计布局的绝好的地方。我强烈推荐在你空余的时间里浏览这些站点，让好的审美榜样在你的脑海中流淌。追加：我还想强调，天赋起的作用并不如人们想象的那么大。或者说，人机经常将“兴趣”和“天赋”搞混，如果你对
某事真正感兴趣，你将自我驱动的投入到它里面不断的尝试和练习。这样下来你在这方面的能力自然水涨船高，而如果你在少年时就开始投入并且建立起自信，它会
拉开你和其他人的距离，这又将带来更强的自信和兴趣，形成一个正向循环。我对自己的评价是相当不错的美术设计师以及还过的去的艺术家，人们经常评价我多么有天赋，但他们并没有意识到我在设计上花费的数千小时以打磨我的手
艺。当其他孩子和朋友一起玩的时候，我在房间里画画，这是我擅长画画的唯一原因。而当我第一次创建网站时，它们和大多数青少年的Myspace空间一样糟糕。所以当你看到那些“有天赋”的设计师们的作品时不要沮丧，他们开始时的设计和其他人并没有什么不同。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量9470点击量6606点击量6134点击量3802点击量3566点击量3552点击量2917点击量2621点击量2377
&2016 Chukong Technologies,Inc.
京公网安备89您所在的位置： &
Web app界面设计的8个实用技巧
Web app界面设计的8个实用技巧
HTML5技术的强势发展，为互联网带来的最大改变就是： web从“已死”的预言中回过头来给Native app一记沉重的回马枪，web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。
HTML5技术的强势发展，为互联网带来的最大改变就是： web从&已死&的预言中回过头来给Native app一记沉重的回马枪，web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗，并试图建立以自己为中心的&云&服务平台，企图在web app时代到来的时候充当霸主。
本文将围绕web app的设计，与大家讨论几点设计技巧。
什么是web app?
Web app是一种通过网络(如互联网或内联网)访问的应用程序;也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并 依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。
Web app的优点
◆通过兼容性浏览器实现配置而不需要任何复杂的&转出&步骤;
◆浏览器应用程序几乎不需要客户端上的磁盘空间;
◆新功能从服务器自动传递给用户，用户自己不必升级程序;
◆可以轻松整合进入其他服务类web程序;
◆跨平台的兼容性
现阶段web app还很难有一个设计原则
HTML5技术仍在发展中且发展尚不完善， web app作为该技术的产物自然也是在不断试验中进步;此外，web app还要依赖兼容性浏览器更强大的渲染能力，俗话说&皮之不存毛将焉附&，在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。在这种行业背景下，web app还难以有一个所谓的设计原则，起码现在还不构成总结一个合理设计原则的条件。
其实，所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。比如，解构主义设计风格的提出不是之前就有的，是理论家在分析总结了建筑设计师 盖里、埃森曼、特斯楚米等大师的典型设计作品，结合这几位大师的设计理念后定义的一个流派名称。所谓的解构主义设计原则也是从权威大师典型作品中归纳总结 的; 设计原则出现后继而可以对之后的设计起一定的指导作用。
因此本文不谈所谓的web app设计原则，现从已经上线的优秀产品中选择典型设计元素与大家讨论分享，寻找可以借鉴的地方，并借此增进对web app产品设计的认识。
Web app界面设计的8个实用技巧
Web app用户界面设计，核心是web设计;不过与一般意义上的web设计相比较，web app更加注重功能。为了在与桌面应用程序的竞争中展现其优势，web app需要提供简洁、直观、快速响应的用户界面，以便于用户在任务操作中节省精力和时间。
1.界面元素随需而变
力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多，用户需要寻找和思考的时间也就越多。同样，界面中存在的选项越少，可用功能就越明显、越容易浏览。不过简化界面并非轻而易举，尤其是你不想减少应用程序功能的情况下。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 346 height: 247px" alt="" src="/files/uploadimg/3340.png" width="480" height="490" />
以Kontain搜索模块为例，在搜索框中有一个下拉菜单，帮助用户细化搜索范围。用户可以通过菜单选择自己想要寻找的内容。该网站通过这些选项简化了搜索框。
将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能，然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例 如，搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。决定哪些功能保留展示哪些需要隐藏起 来，并不是一个简单的工作，需要取决于功能控件的重要程度和被使用的频繁程度。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 404 height: 160px" alt="" src="/files/uploadimg/3341.png" width="480" height="366" />
擅长如此处理的还有CollabFinder， 如上图。用户点击搜索链接后并没有被马上带到其他页面;搜索框控件下拉下来，允许用户在当前页面内直接进行搜索操作。这样的设计方式，既保持了用户视觉焦点的稳定，又使得整个页面在不使用某个特定功能的情况下简洁清爽。
2.为模态窗口增加边缘阴影
弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸，有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。
这个技巧根植于传统桌面程序，帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来，阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上，于是拉近了模态窗口与用户的距离。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 401 height: 239px" alt="" src="/files/uploadimg/3342.png" width="480" height="245" />
如上图，Digg的登录窗口边缘拥有厚厚的阴影，对下面内容的视觉噪音起到了有效的屏蔽作用。
为实现这样的效果，设计师往往将透明的PNG背景图片作为容器，再把内容填充到容器中，同时等距离填充弹出框各边缘。或者使用具有透明边框的背景图 片，并将内容框绝对定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但需要注意浏览器是否支持。
3.空白状态时告诉用户可以做什么
当设计web app的时候，不仅需要关心一般情况下的信息展示，还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候，可以在空白区域放 置一条帮助信息告诉用户如何开始。例如，一个项目管理的应用程序主页会列出用户的项目，假如还没有什么项目信息，可以为用户提供一个项目创建页面的链接。 即使这个页面上已经存在了这样一个功能按钮，一个额外的帮助并不会有什么妨碍。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 390 height: 174px" alt="" src="/files/uploadimg/3343.gif" width="571" height="234" />
如上图，Campaign Monitor在右边方向提供了一个建立新信息的快速入口。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 392 height: 157px" alt="" src="/files/uploadimg/3344.png" width="480" height="168" />
Wufoo的表单页面有醒目的、友好的信息鼓励用户去创建新的表单。
这个技巧可以有效地鼓励用户试用该服务，并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。
此外，只为用户展示最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并没有什么实际意义。需要牢记的是，用户通常想从应用中获得或多或少的信息，但却不想跳进细节中，用户没有时间也没有兴趣。
在空白状态中激励用户，可以显著地降低用户的流失率，并帮助潜在的用户更好的理解程序系统是如何工作的。
4.Button状态积极反馈
许多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景，文字链接有时候看起来又太含蓄。需要注意的是，把链接做成Button样式的时候，它们 就应该有button的表现形式。比如，在点击button的时候它们应该会出现被&压&过的样子。这不仅仅是纯粹的视觉变化。及时反馈给用户，可以使 web app感觉起来更灵敏，与桌面应用程序的用户体验更接近。
可以使用CSS添加按钮的&pressed&等状态，实现在不同状态下显示不同背景图片的功能。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 364 height: 136px" alt="" src="/files/uploadimg/3345.png" width="410" height="142" />
例如Highrise中的按钮，在鼠标指针点击的时候会呈现 &pressed&状态效果，为用户提供了灵敏的反馈感受。
5.使用上下文情境导航
在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。
上下文情境导航最好的一个例子就是Office 2007中，原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能，如编辑图形、校对或者简单书写。
Web app可以从这种上下文情境导航中获益，仅展示用户需要的、而不是所有可用的功能，从而保持用户界面的整洁清爽。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' alt="" src="/files/uploadimg/3346.png" width="480" height="89" />
例如上图中，Lighthouse 有非常典型的tab导航菜单;然而，在tab导航栏的下方它还有二级导航，在这个二级导航中只显示网站活跃部分的相关条目。
6.更加重视关键功能
并不是所有的控件都拥有相同的重要性。例如创建一个新的条目，页面中会有&创建&&取消&两个button. 这里的&创建&就要更加重要些，因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置，但是不要给予相同的 重视程度。
为了将注意力引导到&创建&上，我们可以尝试使用不用的风格或样式。一种方式是将&创建&设计成button样式，&取消&设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色，并使button略有凸起的效果。这样便于抓住用户的目光。
例如在Google+创建新圈子的弹窗中，创建按钮在视觉上具备了更加醒目的效果，拥有该页面中更高的重视等级。
7.嵌入视频
虽然图片和文字是向用户介绍应用程序功能的很好的方式，但如果资源允许的话，视频将是一个更优方案。近年来视频在网络上的使用越来越频繁。Web app的截屏视频经常被使用在营销网站中来展示产品的功能;然而这并不是视频使用的唯一方式。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 437 height: 201px" alt="" src="/files/uploadimg/3347.png" width="480" height="323" />
GoodBarry 在其首页中使用截屏视频来展示产品。同时它还在应用中嵌入了视频来指导用户如何去开始。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 412 height: 242px" alt="" src="/files/uploadimg/3348.png" width="480" height="401" />
MailChimp在管理面板中使用教程视频以帮助新用户。
一些web app使用内部嵌入的视频帮助用户了解产品的特定功能。视频是快速演示产品如何使用的绝佳方法，因为与文字相比视频更容易被用户所接受，而且视频可以使用户准确地看到需要做什么，更加清晰。
8.让升级或降级的提示简洁、不扰民
在很多互联网产品中都会有不同权限的用户账户存在，比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后，他们可以对账户进行升级或降 级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢?设计师肯定不愿意在应用程序之外完成这件事情，这样的提示应该是和app是无缝连接 的，而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。
通过几个例子我们了解一下升级账户的处理方式。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 410 height: 275px" alt="" src="/files/uploadimg/3349.jpg" width="550" height="509" />
FreshBooks 的升级提示是一直存在的，被放置在了web app的底部。如上图。由于提示是在界面的工作区以外的位置，并不会对用户的工作流程造成影响。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 484 height: 201px" alt="" src="/files/uploadimg/33410.png" width="550" height="405" />
在Basecamp的升级提示中，用户可以很清晰地得知升级后将会有哪些变化。请看上图。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="width: 499 height: 251px" alt="" src="/files/uploadimg/33411.png" width="550" height="424" />
在CompVersions中,各种升级后的变化情况很直观 ，整个页面简洁清晰。请见上图。
Web app的设计细节远不止上文中提到的这些，本文只算作抱砖引玉，希望大家可以在已有的优秀产品中发现更多思考的触发点。当我们习惯了走马观花地浏览其他公 司产品的时候，我们已经对太多的东西习以为常;当我们开始设计用户界面，开始处理细节的时候，却时常会有拿捏不准的感觉。如果平时多总结一下其他产品(不一定拘泥于自己的产品圈子)的细节亮点，相信很多东西在实际工作中可以为我所用）。
原文：/archives/2103.html
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
Web设计师的路是充满挑战性的路。有很多技术需要学习，而且有很
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
又到了一周的末尾，闷热过后，这周的温度算是降下来了
掌握一门技术，首要的是掌握其基础。笔者从事.NET相关
再过十几天很多同学又要爬楼梯睡觉，早上七点起床，晚
本书详细介绍脚本语言Groovy，首先介绍Groovy语言的基本特性，包括讨论Groovy方法、程序闭包、列表、映射以及对类和继承的支持，
51CTO旗下网站}