山西公司网站建设:创建有目的动画用户界面

2019.05.27 山西公司网站建设

96

直接动画和运动是用户体验的一个重要部分。并不是每个网站都会包含动态动画,但这些都会吸引一群感兴趣的用户。令人惊叹的视觉效果也可以跨越一条线,变成烦人的干扰你的内容。构建有目的网站就是要在布局中的动态元素和静态元素之间找到一个平衡,以及这些元素最终是如何影响用户体验的。

在本文中,我想深入探讨与Web设计中的动画用户界面相关的一些更常见的趋势。我想分享一些想法,为一般用户提供聪明、直观的设计技巧和烦恼。视角是一切,你必须迎合每一个项目,为最大的人口。

构建动画也不需要大量复杂的代码或后端脚本。许多开源JavaScript和甚至CSS库就因为这个原因。作为开发者,你可以在互联网上搜索,看看你能找到什么。山西公司网站建设将介绍几个实例和策略,你可能会遵循,以取得非凡的结果。

有天赋的菜单

导航菜单设计要与动画搭配要复杂一些。但如果操作得当,这些导航菜单在网站界面上提供了非常详细的信息。你会想要确保速度足够快,以保持你的访客的注意力,但不要那么快,使人分心。链接也应该容易访问,并为点击提供足够的空间。所有这些对细节的关注让开发人员更多地关注基本UI而不是运动效果。

山西公司网站建设

然而,我将指出一个很好的例子设计感官它使用顶级菜单和子菜单链接。当您在每个顶部链接上悬停时,新的子菜单选项将出现在下面。这允许快速访问所有菜单链接,并且有足够的空间单击。唯一的问题可能是视力不佳的用户,他们必须努力阅读较小的字体。但是这个功能显然可以适应其他更大排版的布局。

cabedge design studio website layout dropdown animation

这个舱缘网页设计工作室有一个下拉动画效果,非常适合布局风格。在顶部带状,你可以悬停在任何一个链接,并产生一个良好的背景悬停效果。如果您停留在链接1-2秒,那么一个子菜单将开始动画和下降。这是一个令人惊讶的效果,当你没有预料到它!既令人赏心悦目,又有助于向游客展示额外的内容。

视差背景滚动

视差运动是非常流行的,与其他风格的网页设计有很大不同。视差网站往往有不断变化的背景图像,以提供三维运动的外观.同时,静态页面元素很少改变,甚至可以保持不变,以便在滚动页面时跟随用户向下移动。

atlantis world fair parallax website scrolling preview screenshot

一个臭名昭著的例子是亚特兰蒂斯世界博览会网站设计。当你沿着屏幕移动时,你会注意到主电梯的轴和你一起继续。然后,内容似乎在各个页面段中摇摆不定。这是一个很好的利用人造运动,因为布局是如何安排。并不是每个网页都是为这种视差滚动构建的,但它确实增加了一个非常巧妙的设计功能。

ios ipad app website layout landing page billiardapps fingerbilliards

山西公司网站建设另一个很好的例子可以在ipad应用网站上找到。弹球。背景的设计使它看起来像是一些球被固定在屏幕上。然后,当您上下滚动页面时,元素会像静态布局一样进入视图。我特别喜欢他们的设计,因为运动效果是模仿游戏本身!这对市场营销很有帮助,因为找到这个页面的用户也会连接,并且可能会为移动应用程序购买。

在动态效果和有用的接口功能之间找到平衡是至关重要的。设计一个有目的网站是为了给你的动画增加更多的可信度。视差滚动只是定义如何围绕运动创建整个网站布局的一个例子。

网页过渡

动画转换效果之间的内容在您的页面是另一个有目的使用动态运动。这些效果可能跟随内容块或滑动面板,但也有工具提示或突出显示在元素之间切换的效果。这种设计趋势经常用于网站旅游,在不同的页面元素之间引导用户。

mustache portfolio website layout custom animation motion designs

此类型的示例可以在胡须在内容之间移动时使用类似的页面转换。这是一个不错的Ajax样式的效果,不需要刷新整个网页。当然,没有JavaScript的用户会倒霉,但是任何基本的回退方法都应该起作用。

think motto website studio layout animated page transition

页面转换的另一种类型可以在莫托这是一家德国数字设计公司。在菜单中的链接之间单击将整个页面从视图中滑出,集中在一组新的数据上。这一点很重要,因为当您滚动时,导航将保持不变。这允许用户在整个页面设计之间移动,而不会失去对菜单中其他链接的访问。

动态输入形式

运动设计的另一个流行方面可以在网页形式中找到。更具体地说,注册表单和联系人页面通常使用动作来表示高级的jQueryAjax调用。这允许开发人员在不刷新页面的情况下将前端信息传递到后端代码中。将MediaFire注册页面作为一个简单的示例。

MediaFire plans signup form motion interface

但是动画效果也可以用于表单元素本身。较新的CSS 3属性,如框、阴影和转换,允许开发人员在浏览器中创建前端动画效果。这也允许隐藏通知徽章或基本表单验证,例如电子邮件地址或匹配密码。其目标是在不中断用户注册过程的情况下,提供一个光滑的、有帮助的用户界面。

另一个非常酷的输入动画效果可以在WordPress 21.11主题演示。在右上角,您会注意到搜索栏比平常小得多。但是,一旦单击,菜单将展开,打开,并将背景颜色更新为更深的灰色阴影。非常有目的地节省空间时,不需要,但也允许用户与搜索栏动态交互。

最后思想

山西公司网站建设不想鼓励网页设计师在每个项目中推动运动效果。有一些设计利基根本不需要大量的动画。但这并不是说,你不应该尝试新的想法,测试水,看看你的用户如何反应。网页设计的美妙之处在于从常见的错误中吸取教训,或从中找到快乐的巧合。

我希望本文能为开发者和用户体验设计师提供一些对网站运动感兴趣的想法。动画元素可以快速地吸引用户的注意力,并且经常会在布局中提供某种类型的功能。我们已经报道了许多伟大的想法,这应该会让你走上正确的轨道。但是,如果我们错过了任何主题或资源,请在讨论后与我们分享。


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP