有些网站胜过别人，无论其内容，可用性，设计，功能，交互设计和动画等来区分现代网站之间的根本性差别。我们将分享一些来自各种模式和体验，并以此来分析为什么这些简单的模式在网站中可以工作得这么好。
当我们设计的数码产品，我们经常使用的应用程序有Photoshop以及一些草图设计。大多数从事该行业的人已经很清楚的了解，设计不仅仅是为人们呈现视觉效果这么简单。尽管如此，许多人仍然继续创建静态设计。史蒂夫·乔布斯说过一句关于设计的话：
“设计的意义在于其本身是如何工作的，而不仅仅是看起来怎么样或者感觉怎么样”
我们对产品的经验和印象会被一些综合性的因素所影响，因此，我们不要再认为静态设计的用户界面能够继续扮演最基本的角色，相反，我们需要从一开始就要拥抱网页的互动性，并把它们认为是最自然的组成部分。
让我们来看看一些例子，其中智能互动以及定义的微妙动画，已经悄然生息的地改善了用户体验。
动画滚动
让我们又爱又恨的Web超链接。当你点击一个链接，它可以带你去任何地方，从一个网站的产品页面到一个令人毛骨悚然的老木偶店面。其结果就是丢失网页的上下文。
关于用户体验的书籍所做的伟大贡献就是线性。比如对于一本书而言，你必须阅读书籍的第一章，才能够了解第二章。如果你直接跳过第一章，你就会发现，
这种做法会错过一些知识点，在网络上，尤其对于内容很长的网站，这种情况往往就会下意识地就会发生。所以，通过添加一个滚动的动画，我们就可以解决这个问
题：
与之前的进行对比效果
通过默认的锚链接进行网页内容之间的跳跃，它已经不再是一种无意识的动作了，它是一种用户决定方式，如果没有添加一些滚动效果而直接跳跃也许并不是最好的选择，突兀的变化对于用户而言是一件糟糕的事情，所以不要再让他们不知所措了，而应该让他们知道目前正在发生的变化。
实用的切换效果
就像我们看到的最后一个例子，过渡效果可以帮助用户理解内容区域的转变过程，而不会是那种让人难以理解的不自然跳跃，让我们接下来看下另外一个例 子：切换菜单，当用户点击加号的时候就会触发事件，并添加额外的内容和元素，加号就会变成一个交叉的形状，因此用户就会很清楚的意识到菜单目前所处的状 态。
这个简单的过渡效果完全转变了图标的原有定义，尽管是一个微小的改变，但足以让我们大致猜测出内容目前所处的大致方位，所以适当的加入切换效果对用户的体验是非常友好的，不知道大家是否注意到加号旋转的方向永远是跟内容切换的方向一致，这无形中增强了信息内容的流动性。
目前大部分博客网站都含有留言表单，但有些表单看起来并不是十分友好，有时候是太复杂，有时候是显示多余的内容，当你决定为某篇文章发表评论的时候，有些表单会向你提供一些无关紧要的信息，有些时候可能会让你觉得烦躁和沮丧。
有些时候为了鼓励用户多留言，我们可以隐藏整个表单而仅留下一个留言输入框，当用户点击输入框的时候再展开一些必要的输入信息框即可。
对比效果
下拉刷新
如果你是智能手机的用户，那么你对下拉刷新一定不会陌生，在我们常用的新闻app中经常会用到下拉刷新这个功能，它为什么会如此流行？因为他能够让用户不
断的更新消息内容，你不需要在屏幕中寻找某个查看更多的按钮，你所要做的就是用手指在屏幕中轻轻的向上滑动即可。这种处理方式在Twitter’s
app中会经常看到，当然现在很多类似的app都已经把它作为一项基本的更新方式了。
当然这种刷新方式同样可以运用到网页刷新中，这也许会涉及到一些ajax的方法，但我们不妨可以作为参考，将手指向上的滑动换成鼠标滚轮向下滚动的方式，典型的例子有qq空间中的信息向下滚动刷新，以及百度图片等等。
粘性标签
粘性标签是又一个提升用户体验的方法，它结合了一些过渡以及切换的动画效果，让我们来看下以下的动画效果。
项目标签会一直跟随内容进行相应的滚动，这样可以对文章的上下文进行更加明确的提示和说明，也更有利于提升文章各部分内容的理解程度。
基于上下文的隐藏
在ios中的谷歌浏览器中的网址导航栏是基于上下文的隐藏典型的例子，让我们来看下效果。
当用户使用ios中的谷歌浏览器时，用户将网页向下滚动到一定位置时，网址导航栏就会被自动隐藏，当用户再次返回页面顶部时，网址导航栏才会重新出现。这样做更有利于用户专注于文章内容的浏览，而不会被多余的元素所影响，特别对于手机用户而言。
后语
这些仅仅是提升用户体验的一部分方式，其实最重要的还是不断的为用户着想,不断的实践和探索如何才能用户更容易理解和使用我们所开发的产品，简化步骤，提升界面好感度是我们不断改进产品源源不断的动力。
本实例由 数字生活 web前端资源 www.dglives.com 负责整理和收集!