Category Archives: 产品交互
《Designing Web Interfaces》 – web界面设计.
《Designing Web Interfaces》 –Principles and Patterns for Rich Interacitons 读后摘录. 6个经典的设计原理 原理一：直截了当 [Make It Direct] 主要说的还是通过Ajax在页内实现数据输出与输入的交互。 更少的刷新与跳转。 不同情境下根据功能意图重点选择最适的交互方式。 关键词： 页内编辑，利用拖放，直接选择 原理二：简化交互[Keep It lightweight] 重点在于论述如何让交互功能更好理解，减少操作步骤，干扰等。 比如，根据功能的重要性来决定决定将上下文工具放在哪个位置，是始终显示还是触发显示。 关键词：上下文工具 原理三：足不出户[Stay on the Page] 重点讨论了 弹出层，嵌入层，虚拟页面流程处理等如何在更好让用户 “心流”更流畅的一些交互实践。 关键词：覆盖层，嵌入层，虚拟页面，流程处理 原理四：提供邀请[Provide an Invitation] 重点重点如何让用户发现交互功能。 通过各种的“邀请”提示。 关键词：静态邀请，动态邀请 … Continue reading
Microsoft ,Apple,Google用户体验设计原则
细致的Microsoft 减少概念……增强信心 你是不是引入了新的概念？为什么？真的必要吗？ 你能去掉这些不需要的概念吗？ 其中的区别有意义吗？ 用户体验会延续同样的概念吗？ 小的好或坏也很重要 哪些重要的“小事”是经常会碰到的？ 哪些小问题是你在着手解决的？ 少做一些更好。 不要把小事从你的体验中去除。 为深思熟虑的细节制订计划。 修正小的错误。 看起来和用起来都很棒 你的用户体验哪里最棒？它看起来有那么好吗？ 用户第一眼看到的东西能够让人觉得它用户体验很棒吗？ 用户体验符合期望吗？ 用户很清楚能做什么吗？ 是不是只提供了必要的步骤？ 要解决的是让人分心的事，而不是可发现性 减少令人分心的事情。 不要让功能自己之间进行竞争。 致力于新的功能。 下列方法不能解决糟糕的可发现问题： 在开始菜单上添加图标。 在桌面上放置图标。 在通知区域放置图标。 使用通知。 提供首次运行体验。 提供功能教程。 旋钮和问题前的 UX 调低问题的音量。 只问一次。 不要要求配置来获取数据。 这个问题是不是已经问过了？ 寻找合并统一的机会。 个性化，而非定制化 这个功能是否能让用户自己来表述元素？ 你是否能够区分个性化和定制化？ … Continue reading
Reset CSS研究
很强大… Reset CSS研究（八卦篇） 时间：2009-08-28 来源：淘宝UED 作者：玉伯 八卦是种优良品质，特别是用在技术上时。来看几个Reset CSS的八卦问题吧：u3bBeautyCss.org – 前端教程网 你知道世界上第一份reset.css在哪么？ * { margin: 0; padding: 0 }人品很坏吗？ Eric Meyer和YUI是情侣吗？ Google有用reset.css吗？ No CSS Reset的口号是谁最先提出来的？ 类似问题或者说困惑还能列举很多，reset.css极其简单又极其不简单。继续挖掘八 卦之前，请先关机遐思，或去如厕更衣透透气，想想后再读下文。u3bBeautyCss.org – 前端教程网 不是历史 2004 年，遥远又如近在眼前的昨天，Tantek被不同浏览器下默认样式的差异搞烦了，于 是琢磨中写了一个undohtml.css, 这就是第一个八卦问题的答案。u3bBeautyCss.org – 前端教程网 对 于基于Gecko引擎的Firefox等浏览器，请在地址栏中输入resource://gre/res/html.css，默认样式就这样裸体着呈现在 面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性：Really Undoing html.css. … Continue reading
2010年Web技术趋势
2010年Web技术趋势 2010 年的 Web 会是什么样，或者说，未来的 Internet 意味着什么，2010 会是值得关注的一年。本文从 5 个方面展望 2010 年的 Web，包括 HTML5，CSS3，字体服务技术；浏览器；社会媒体；JavaScript 框架；以及 SAAS。 1. CSS3, HTML5 以及 字体服务 CSS3，HTML5，以及 Typekit 一类的字体服务，将给 Web 设计师带来更多自由。 CSS3 的新功能会让 Web 内容的展示变得更容易，从多背景图，到更强大的选择器，到颜色渐变，到圆角，这一切都让原先复杂的工作变得简单。 HTML5 虽然进展缓慢，但必将改变我们描述页面的方式，成为通往语义 Web 的重要阶梯，为 Web 带来真正的本地多媒体支持，并改善我们同 Web 内容的沟通。 而 Typekit … Continue reading
为什么要使用JQ1.4
为庆祝jQuery的四周年生日，jQuery官方团队正式发布了jQuery 1.4版本。在这个版本中，jQuery官方团队做了大量的编码、测试和文档工作，相对之前版本自然改进不少，让我们一起来看看有那些新变化吧。 本文分上下两篇，上篇主要总体介绍jQuery 1.4版本的相关使用及更新，下篇通过一些代码示例来展示更新的方法及新添加的方法。 【下载及调用】 像以往一样，官方提供了jQuery的两份拷贝，一份是压缩版本（使用Google Closure Compiler压缩，之前使用的是YUI），另一份是未压缩版本（用来调试和阅读）。 jQuery压缩版本（23kb，gzip压缩后） jQuery未压缩版本（154kb） 之前曾提议过 通过google服务器加载jQuery，提高加载速度。现在，我们依然可以通过Google的服务器调用压缩后的jQuery 1.4版本文件，如下： <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js” type=”text/javascript”><!–mce:0–></script> 【新特性及变化】 在jQuery 1.4中，许多常用的jQuery方法被重写，这些改进不仅更易用，也带来了性能的显著提升。 注：以下为概述，不详之处参见下篇的代码解释。 1、为一些方法添加设置函数（Setter Functions） 在之前版本中，我们可以给attr()方法传入一个函数，将函数的返回值赋予某个属性。1.4中，这个功能被添加到了更多的方法中：.css()、 .attr()、 .val()、 .html()、 .text()、 .append()、.prepend()、 .before()、 .after()、.replaceWith(), .wrap()、 .wrapInner()、 .offset()、 .addClass()、 .removeClass()、 .toggleClass()。 此外，在下面方法中，还可以传入当前值作为设置函数的第二个参数，供设置函数使用：.css()、.attr()、.val()、.html()、.text()、.append()、.prepend()、.offset()、.addClass()、.removeClass()、和 .toggleClass()。例如： jQuery(‘<img src=”enter.png” alt=”enter … Continue reading
用CSS3将你的设计带入下个高度
原文：用CSS3将你的设计带入下个高度 译自：Take Your Design To The Next Level With CSS3 级联样式表在13年前被引入，而且被广泛使用的CSS 2.1 标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上，我们也无法想象。 为什么会这样呢，当提到CSS的时候，过去我们是如此的不情愿和害怕尝试？为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式？为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级？ 是时候在我们的项目中引入CSS3 特性了，不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做，特别是在它能够让网站更加灵活并减少开发和维护成本的时候。 在本文中，我们将研究CSS3的优势，并看一下一些网页设计师是如何使用它们的。最后，我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。 同时请参考我们之前的一篇相关文章： 使用CSS3将你的网站设计推向未来 使用浏览器专有属性 为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。而且不幸的是，一些属性甚至到最后都可能不被W3C推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。 当然，这种方法的劣势是，将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟，我们不想在我们的样式表中重拾私有浏览器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用，并在20世纪九十年代成为一个传奇；它们依然让现存的很多网站（在其他浏览器中）表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地，对吧？ 然而，网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。 最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀） 作为专业的设计师，我们不得不注意：使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下，比如试验或学习，我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。 扩展阅读 Vendor-specific extensions … Continue reading
