web前端技巧解说

本文格式为Word版，下载可任意编辑——web前端技巧解说web前端技巧阐明

一些网页优于其他网页，不仅仅是由于它们的内容、可用程度、设计或是特色等等。现代网页间根本的识别在于它们交互及动画细节。我们将共享一些从各种模型中获得的阅历，同时分析为何这些简朴的样式能够如此好用。

当我们设计数码产品时，我们往往使用诸如Photoshop及Sketch这样的设计软件。大多数从事此行业多年的人鲜明知道设计不仅仅是视觉呈现。然而，好多人照旧持续创造静止的设计。SteveJobs曾说了这样关于设计的话：“设计不仅是形状和感觉，设计关乎如何运作。”

我们对一个产品的体验印象是由一系列因素综合作用的结果，其中交互发挥了根基性的作用。我们再也不能认为用户界面只是是静态的设计，交互效果是之后才施加的。相反，我们应当从一开头就信奉网页的交互特性，将其作为网页的自然组成片面来考虑。

让我们来看看一些生动交互形式的例子，以高明的动画，优雅的提升用户体验。

一、滚动条动画

人们对于网页超链接总是褒贬不一。当你点击一个链接时，它有可能带你到任何地方，譬如从一个产品页面到一个令人毛骨悚然的街边古老木偶商店网站，结果欠缺上下关联性。

书籍用户体验的一大好处在于它的线性关系。书中的每一章都是为结果做铺垫的。读一本经济学入门书籍时，你务必阅读第一章以扶助理解其次章的内容。当跳过一个章节，你会察觉自己可能错过了一些东西，因而使自己对之后的内容缺少确定理解。在网页上，更加是那些较长的网页，这种处境不经意间就发生了。增加一个滚动动画效果能够弥补这种处境：

比较下面的例子：

比较上面“名称”锚点链接的预设行为和下面的动画行为。跳过内容不再是一种无意识的行为。它是一种确定操作。事实上，HopeLiesat24FramesPerSecond这个网页为其移动显示设置了一个菜单按钮，能够带你去到页面顶部，但没有任何动画。这让我花费更多时间去弄领会实际发生了什么。

小贴士：界面中突兀的变化会让用户难以处理。不要让他们迷失，要时刻让用户知道发生了什么。

二、状态的切换

如我们上面看到的，过渡能够扶助用户了解界面的操作步骤和整套流程。没有什么比突然变化更显不自然的了，由于这种突然的变化在真实世界中是不存在的。让我们看看另一个例子：切换菜单。用户将“+”与增加内容或是开展一个元素的动作联系起来。将“+”翻转45°，“+”变成了被公认为“关闭”的界面元素——“x”。

这种简朴的过渡完全变更了图标的意义。这样一个小小的细节意味着两种不同的体验感受，一种是用户务必推测下一步将会发生什么，另一种是用户明确了解icon两种状态下表示的意思。假设你问我倾向于哪种，我会觉得状态切换那个体验要好得多。同时值得留神的是，加号反转方向总是与内容呈现动作保持一致，强化了信息的连贯性。

小贴士：让你的网页元素在每一状态下都能易懂。

三、折叠表单及评论

好多博客和新闻网站上的.评论表单看上去都不是令人愉悦的元素。为什么呢?由于它们绝大多数都不够友好，不是吗?当你打定发表一条评论，你只是单纯梦想输入评论而已。相反的，一种典型的表单会问你各种其他无关的东西，分外烦人。

为了促使用户发表更多评论，我们可以折叠表单，仅仅呈现最为关键的元素：评论框。当用户点击输入框，你可以相应的开展表单。我们可以在纽约时报测试版网站上找到这种进阶开展的实际例子。

你可以更进一步，在开展表单时光标聚焦评论框。然而这一方法有一个问题：一个关键的交互设计原那么是这样说的，行为应发生在离交互产生最近的地方焦点邻近。因此我们还可以再进一步，为评论框增加动画来引导用户留神到评论框上：

你甚至可以将评论框固定至顶部，根据用户的操作开展，呈现它下面更多的内容。

正如你看到的，这裁减了杂乱同时令评论表单更具吸引力。那么假设将全体以往评论也折叠起来呢?

将评论折叠，并用滚动条表示正文的长度，而不是整个页面的长度。一个常见的做法就是当用户到达页面底部的时候自动加载评论。我们理应制止强制用户点击，除非有更好的理由这样做。

小贴士：逐步显示来裁减视觉模块，只留存其本身的精华片面。在用户需要的时候呈现。

四、下拉刷新

最为令人兴奋的交互之一便是在iPhone发布后短时间展现的由LorenBrichter开创“下拉刷新”。它允许用户更新滚动显示的最新内容。你可以在的app上看到这个设想的效果。一旦你滚动到的顶部，再滚动一小段便可以刷新真个信息流。

为什么它效果如此好呢?在下拉刷新展现前，用户需要点击欣赏器的刷新按钮来加载更多内容。将用户察觉更多内容的期望和刷新动作联系起来，这个明显的刷新动作就可以舍弃掉了。

小贴士：将意图与行为联系起来，体验将变得更加连续无缝。

五、标签贴靠

标签贴靠是另一种用户界面组件中精妙且有用的集合同时也是分外有意义的过渡动画。看下Edenspiekermann工作室的网站在自己的作品表示上怎样利用这项技术的。

工程的标签跟随内容滚动，从而为右侧的图片供给上下文指示，直到下一项展现。这个动画跟iOS的联系人界面很像，他们对于长列表界面的上下文指示更加有用。这个过渡动画不仅可以扶助快速定位而且流畅的表示了上下文关系。

小贴士：标签贴靠适用于那种内容无法很好的适配视窗，而描述或标题会给内容增加有价值信息的长列表中。

六、可供性动画

可供性这个概念来自于认知心理学，它指的是物体可以指示查看者操作的特殊属性。

从用户界面设计角度，EU的在线pdf《可用性词汇表》对“可供性”定义如下：

可供性是用户界面的梦想属性——如此软件才能自然的引导人们举行正确的步骤来完成他们的操作目标。

视觉上的突起常被用来巩固可供性。突起的按钮示意按钮能操作。这个用户体验的手法被广泛应用与iOS的拍照软件中。

IOS6的锁屏界面上，照相机icon上下设计了几条棱线，示意这里可以拖拽。由于用户习惯了这种快速开启照相机的方法，苹果公司在iOS7里去掉了棱线的设计，将相机的icon做得更像是一个独立的按钮。它的相关操作还是一样的：拖拽按钮的时候，锁屏界面向上弹起，表示下面的照相机界面。这是一个向用户说明界面中产品特征的分外棒的方法。

小贴士：将元素的可供性设计得更强能引导用户界面中的操作。

七、情境暗藏

iOS上的chrome从最初版本就有这种情境暗藏的例子，它是这样处理的：

根本理念是当用户自然的向下滑动页面开头欣赏时，chrome的导航工具栏会自动暗藏。当用户回滚页面时，导航工具栏会再次展现。这样做既使体验更加情景化聚焦在内容本身也增加了屏幕的显示区域。而后者在移动终端上显得尤其重要。

潜在的设想是用户会顺势滑动欣赏他们专注的内容。一旦用户中断滑动页面，可能就需要变化用户的操作场景了;因此，导航工具栏再次展现。既然这种技术节省了屏幕空间，你可以试一下在你的操作场景里是否适用。

iOS在这方面更进一步。当你滑动到页面底部的时候，工具栏也会再次展现。这是一个分外好的动态结合用户在界面操作需求的例子。

小贴士：情境暗藏能强化用户的操作焦点，节省屏幕空间。

八、焦点转换

约莫一周之前，一位多伦多的UI设计师NikitaVasilyev，有了一个更加高明的想法。他开发了一套页面焦点跳转的