咨询电话:400-999-0300
适当的页面转换可以增强用户体验设计建设吗?

适当的页面转换可以增强用户体验设计建设吗?


“摘要:在用户背景下,页面可以增强用户体验设计建设,保持用户能够享受到完整的用户体验,同时,页面转换也可以美观和乐趣,可以加强品牌做得很好。”

  任何时候打断“用户体验设计”,他们离开的机会增加。改变从一个页面到另一个通常会导致该中断,显示一个白色闪光的内容,通过采取对负载或太长,否则用户的上下文之前他们在新页面打开。

  页面可以增强“用户体验”通过保留之间的转换(甚至改善)用户的背景下,保持他们的注意力,并提供视觉连续性和积极的反馈。同时,页面转换也可以美观和乐趣,可以加强品牌做得很好。

  在本文中,我们将创建,一步一步,页面之间的过渡。我们还将讨论这种技术的利弊以及如何推动它的限制。

  一、例子

适当的页面转换可以增强用户体验设计建设吗?

  许多移动应用程序充分利用视图之间的转换。在下面的示例中,此前谷歌的材料设计指南,我们看到动画表达层次和空间页面之间的关系。

  为什么我们不使用相同的方法与我们的网站吗?为什么我们好与用户感觉他们被传送每次页面变化?

  二、网页链接之间如何转换

  1、水疗中心的框架

  之前我们的手脏,我应该说一些关于单页面应用程序(SPA)框架。如果您正在使用一个水疗框架(如AngularJS、骨干。js或灰烬),然后创建页面之间的转换将更加容易,因为所有的路由已经由JavaScript处理。请参考相关文档,了解如何过渡页使用你选择的框架,因为可能有一些很好的例子和教程。

  2、错误的方式

  我第一次尝试创建一个页面之间的过渡看起来或多或少是这样的:

  这个概念很简单:使用一个动画当用户离开页面,新页面加载时,另一个动画。

  然而,我很快发现,这个解决方案有一些限制:

  我们不知道下一个页面需要多长时间来加载,所以动画可能看起来不流畅。

  我们不能从前面创建的转换,结合内容和下一个页面。

  事实上,实现流体和平稳过渡的唯一方法是完全控制page-changing过程,因此,不改变页面。因此,我们必须改变我们的解决问题的方法。

  3、正确的方式

  让我们看看所涉及的步骤创建一个简单的页面之间交叉渐变过渡的正确方法。它涉及所谓pushState AJAX(或PJAX)导航,这实际上会将我们的网站变成一种单页的网站。

这种技术不仅实现顺利和愉快的转换,但我们将受益于其他优势,我们将在本文后面详细讨论。

适当的页面转换可以增强用户体验设计建设吗?

  4、防止默认链接的行为

  第一步是创建一个单击事件监听器对所有链接使用,防止浏览器执行其违约行为和定制的方式处理页面更改。

  我第一次尝试创建一个页面之间的过渡看起来或多或少是这样的:

  5、警告和限制

  我们刚刚创建的小例子远非完美。事实上,我们还没有考虑几件事情:

  三、确保我们正确的影响

  广州用户体验设计改变链接的行为之前,我们应该添加一个检查,以确保它应该改变了。例如,我们应该忽略所有  与目标=“平等”(在新标签页打开页面),所有链接到外部域,和其他一些特殊情况,比如控制/命令+点击(也在新标签页打开页面)。

  1、更新主要内容以外的容器元素。

  目前,当页面发生变化时,所有元素之外的cc容器保持不变。然而,其中一些元素将需要更改(可能现在只能手动完成),包括文档的标题、菜单元素活跃类,根据网站和潜在的其他许多人。

  2、JavaScript的生命周期管理。

  我们的页面现在像一个水疗,浏览器不会改变页面本身。所以,我们需要手动照顾JavaScript生命周期——例如,绑定和释放某些事件,重新评估插件,包括polyfills和第三方代码。

  3、浏览器支持

  唯一要求我们实现这种模式的导航是pushState API,这是所有现代浏览器中可用。这种技术完全作为一个渐进增强工作。页面仍然和平常的方式访问,网站将继续正常工作当      JavaScript被禁用。

  如果上海用户体验设计正在使用一个水疗中心框架,考虑使用PJAX导航相反,只是为了保持快速导航。这样做,您将获得遗产的支持和创建一个更seo友好的网站。

  4、要进一步

  我们可以继续推动这项技术的极限通过优化它的某些方面。接下来的几个技巧将加快导航,大大提高用户的体验。

  5、使用缓存

  通过稍微改变我们loadPage函数,我们可以添加一个简单的缓存,确保页面已经访问了不重新加载。

以上作品由深圳品创设计公司整理发布 版权所有
品创设计专注于用户体验的提升,服务涵盖市场研究、品牌创建、交互体验设计、技术环境开发等范畴,是以用户体验为先的专业服务机构。 八年来积累了大量的行业资源与实践经验,尤其在汽车、金融、医疗、智能等领域表现卓越,拥有极佳口碑。先后服务逾500家客户企业,为其实现产品的飞跃。