随着网页设计师对人们如何在线浏览和做决定有了更多的了解,许多流量最高的网站开始分享许多相同的现代网站设计原则就不足为奇了。极简,平面和材料设计,优雅的颜色和格式驱动转换通过简化用户在网站上的体验,鼓励他们完成表单,下载资产和参与你的品牌。

有很多用户体验以及用户界面网站小部件,营销人员可以将其整合到他们的网站,这将有助于产生新的线索,并引导用户通过他们的营销漏斗。这些现代的页面元素——从按钮到可伸缩的图像到社交图标——可以通过为用户建立导航动力,并允许他们轻松地参与到网站中来,鼓励点击和转换。

有效的网站是动态的,直观的,通常在视觉上令人惊叹的。为了让你的网站进入2016年甚至更远的未来,利用这六个交互式的页面元素来现代化你的网站,并提高你的转化率和参与度。

1.尝试幽灵按钮而不是“塑料”按钮

Ghost按钮是登陆页面上的空心或透明按钮,通常作为cta链接到数字营销资产。它们很容易创建,给出一个优雅的外观和加载速度,因为它们的文件大小小。它们的透明设计也让网站的品牌光芒四射,如下面的例子所示。根据《顶级设计杂志》,鬼按钮拥有较高的CTA响应率因为他们令人愉快,鼓舞人心和干净的审美。Slack的登录选项是一个幽灵按钮,可以让网站的纹理图形背景显示出来。

2.使用卡与材料,半平面设计

遵循与幽灵按钮相似的视觉原则,现代在线“卡片”从谷歌的美学和瑞士设计中汲取灵感。卡片在网站上的流行使用遵循所谓的材料设计——扁平和简单,但直观地暗示着秩序、层次和流动性。他们可以通过呈现小而易消化的信息块来跟上浏览器和扫描仪的步伐。像Pinterest, Hotels.com和Etsy(如下图)这样的网站利用这些卡片来提高他们网站的易用性。

Etsy使用现场卡片来推广产品和商店。

3.通过微互动吸引用户

在线微互动是一种快速、几乎无需动脑的动作,包括清除Facebook上的通知、移动滑块、向下滑动移动页面来刷新。微交互有助于让你的页面更有触感,更有吸引力,更有人情味。这有助于让用户在整个旅程的几个阶段都参与其中,并促进他们与机器之间的连接。

微交互是保持用户使用站点的粘合剂。Next Web解释说,用户学会爱上一个基于与它互动的感觉如何——这是“让用户喜欢或讨厌一个应用程序或网站的细节。”

4.让你的页面可伸缩

使用可缩放向量来确保你的图像和视频在不同平台上看起来是一致的。当一个页面看起来很漂亮,加载效率高时,用户将更容易与你的内容进行交互,他们的转换路径也会更容易。大而粗犷的图片在网站上看起来很棒,但没有一种神奇的图片大小可以满足所有电脑屏幕、手机和平板电脑的尺寸。

在宽屏屏幕上运行良好的内容可能在手机上被裁剪,或在手表上难以辨认。你要努力确保你的图像和视频看起来恰到好处,所以要让它们具有可扩展性,这样它们就能接触到所有用户,加载速度快,无论屏幕大小,都能给用户带来相同的效果。

5.激活你的网站

现代和丰富的导航动画可以使您的网站更有效地引导用户采取行动。无论是简单的页面加载设计,还是鼠标悬停在按钮上时的轻微移动,动画都会在用户导航到销售或转换时给他们一些动力。只要它们不损害网站的性能,一些较大的动作动画也可以通过吸引用户的眼球,分配视觉层次,甚至展示产品来帮助推动转换。

6.使用非侵入性的、微妙的图标进行社交

Facebook社交图标 Twitter社交图标 Instagram社会图标

尽量在正确的页面上使用干净、简单的图标,使你的社交媒体营销工作现代化。分享图标应该包含在你想让人们参与的博客和创意内容中。Follow按钮应该出现在大多数页面上,位于页面顶部或底部的空白处。为了更有品牌凝聚力,开发自定义的社交图标来映射您的网站风格。

无论一个社交媒体图标是为了让你的读者分享你的内容或关注你,没有人喜欢一个绝望的或侵入性的社交互动请求。在某些情况下,如果你的社交图标在你网站的深层漏斗部分过于突出,它们甚至会影响你的转换,因为它们会分散(甚至激怒)用户的注意力,导致他们离开网站。此外,如果你的分享数字很低,并且是公开显示的,这可能会消极地加强你的用户转换的意愿。

曾经有过这样的按钮:还记得这些90年代的动图吗?不要使用它们。还记得这些90年代的动图吗?不要使用它们。这是以前的事了。

现代网站元素引导用户实现转换目标应该响应,大胆,艺术,最小和简单。当它们的目的是消除客户在转换过程中的阻力时,页面上的动态内容应该使转换过程尽可能简单和自然。

想要深入挖掘改善UX的“隐形”元素吗?今天就下载我们的“用户体验营销者指南”

本·西尔弗曼是Brafton的营销撰稿人。他的写作经历可以追溯到他在UMass Amherst为The UMass Daily Collegian写音乐的时候。Ben加入Brafton的时候有古典和爵士行业的营销背景。当他不写作的时候,他会打鼓、弹吉他或打篮球。