跳到主要内容

2015年定义的10个网站趋势

是什么让网站看起来更现代,是什么让它看起来过时了?每年,适者生存选择哪种趋势有效,哪些趋势无效。随着2015年即将结束,我们现在可以确定2015年最成功的趋势,这些趋势定义了今年的风格,并显示出足够的力量推进新的一年。以下是我们在2015年表达的十大设计趋势。

01.长滚动

Shadow homepage

Shadow(http://shadow.is/)突出了长滚动的趋势

移动浏览现在超过桌面,2015年,网页设计更多地适应较小的屏幕。与此列表中的许多趋势一样,长滚动因其在响应式设计中的实用性而变得流行:较小的屏幕意味着更长的卷轴。

在过去,设计师担心将内容放在首位,但是新研究证明用户不介意滚动。今天,设计师和用户都认识到长滚动的价值:更多的创作自由,改进的故事叙述,更强的互动和简化的导航(如果网站足够小)。

但是,这些好处需要付出代价;负面的SEO效应和更长的加载时间,最差的。长时间滚动最适合拥有大量移动流量或频繁更新内容的网站,对于拥有大量媒体(如视频)的网站效果较差。

最佳做法

  • 用一个粘性导航菜单或跳转到部分选项以改善导航。长卷轴和单页网站容易导致用户迷失方向,因此应采取安全措施。
  • 利用视差和滚动触发动画等效果,绘制长滚动的俏皮方面
  • 遵循此建议,避免负面的SEO效果Moz文章

02.卡片布局

Behance homepage

Behance(www.behance.net)是干净卡片布局的一个很好的例子

移动机芯普及的另一个实用趋势是,卡片布局以干净,有组织的方式显示丰富的内容。这使得它们最适合浏览各种不同的内容,尤其是链接到外部网站:用户直观地知道点击卡片会将其带到相关帖子。

如指南中所述网页设计趋势2015和2016年通过UXPin,卡片最适合将内容分成可消化的剂量,每个卡片只包含用户需要知道的数据:

  • 标题
  • 诱人的形象
  • 说明(或相关标签)
  • 控制面板包含收藏,评论等选项

通过响应式设计,卡片可以非常好地工作,因为它们的行和列可以自动重新排列以适应不同的屏幕尺寸。

最佳做法

使整张卡片可以点击,而不是只有图片或文字链接。 Fitts定律指出,这使得交互变得更容易。

将卡片与动画相结合,尤其是悬停触发效果。小额外 - 颜色变化或卡片的整个面部,甚至旋转或旋转效果 - 为结构严谨的格式增加了生命,但新的和创造性的应用程序可以使您的网站与其他许多人使用卡片区分开来。

卡片之间的负空间,称为“排水沟”,应该明确定义。不要让用户猜测界限。

03.平面设计重新构想

Toyota homepage

丰田网站(www.toyota-insidedreams.com/dreamcar-collection/)以不同的方式使用平面设计

多年前的时候Skeuomorphism(具有讽刺意味的)是一种现代潮流,平面设计出现了一种对抗性的选择。

然而,今天的平面设计远不是它的起源。新的,更细微的平面设计迭代 - 瑞安艾伦称之为'平面设计2.0' - 提供更多细节和繁荣的机会。 2015年占主导地位的新平面设计具有以下特点:

  • 照明眩光和亮点
  • 渐变和/或阴影
  • 细节值更高

但总而言之,平面设计依然平平。

一般的简洁性和最小的装饰并没有消失。它几乎卡通的图形,易读性第一印刷和俏皮的颜色保持不变,并保持风格为一个易于理解。

最佳做法

  • 鬼按钮具有仅由轮廓构成的透明背景,成为趋势中的趋势。幸运的是,幽灵按钮可以在平面设计之外使用:这些功能控制不会减损突出的背景图像,使它们成为英雄图像的流行添加。
  • 平面设计的简洁图形之美在于装载轻而易举。这非常适合响应式设计。
  • 平面设计搭配得很好极简主义的趋势(见10)。两者都努力通过简单性来增加理解力,并且都坚持“少即是多”。

04.强大的动画

Bugaboo homepage

Bugaboo(http://bit.ly/1HjLPyY)提供了一些很酷的动画

动画在2015年承担了更多的职责和责任,超越了审美价值,以提供更多实际的角色。

因为动作吸引了注意力,动画可以影响首先看到的视觉层次结构。动画效果可以将某些元素宣传给其他元素,并且有可能与更大的传统方面(如大小或颜色)相抗衡。

动画也有表达关系的能力。想象一下围绕最小化窗口的动画效果,它缩小然后飞到菜单中 - 这个动画首先确认动作的成功,但也向用户显示他们可以在菜单上看到窗口的位置。

在UXPin下面使用无代码动画编辑器进行原型的飞入菜单完美地演示了这个原理。

至少,动画会突出显示其他动作。悬停动画显示链接可单击而不是简单的颜色更改。

最佳做法

  • 网络和应用动画仍然可以利用迪士尼的经典12动画规则
  • 长滚动格式严重依赖动画来创建平滑滚动的外观。如果做得好,滚动触发的动画会创建一个更加身临其境且有趣的网站。
  • 加载屏幕动画是有充分理由的主要内容:它们为用户提供时间估计,并在等待时娱乐它们。
  • 背景图像中的微妙动画可以激活页面并防止其变钝...只要它们不过度。太多的背景移动会分散用户对主要内容的注意力,更不用说增加加载时间了。

05.迷人的摄影

Mario Frigerio homepage

婚礼摄影师Mario Frigerio的网站(http://www.fotofrigerio.it/en)充分利用了令人惊叹的图像

随着2015年高清屏幕的普及,设计师开始更加关注照片的艺术品质。更多的网站依靠令人惊叹的摄影来进行视觉呈现而不是数字图形。

在今年的摄影趋势中,英雄形象占据了至高无上的地位。通过使用单个图像填充整个背景,网站创建高度沉浸式体验,可以更快地吸引用户,使其成为登陆和登录页面的理想选择。

英雄形象也有很多灵活性。只要照片与目标相符,就可以为任何网站更改语气和消息。

最佳做法

  • 虽然定制摄影通常更个性化,但对于试图节省时间或金钱的设计师来说,库存摄影是一种可行的选择。为了两全其美,将它们组合起来使自定义照片使照片看起来也是自定义的 - 例如,通过自定义和库存的一致主题。对于免费的照片,请尝试UnsplashPixabayPexels
  • 颜色叠加允许设计人员根据颜色的属性操纵图像的感知方式。给一张黄色或橙色覆盖的其他令人沮丧的照片将使它看起来更乐观和友好。
  • 电子商务网站已经开始用自然环境中的产品照片取代传统产品图像。提供实际拥有产品的背景证明可以增加销量

06.高清背景

R/m Design School homepage

R / m Design School的网站(http://school.readymag.com/)拥有壮观的高清背景

与摄影趋势相结合,高清背景的使用今年也越来越受欢迎。同越来越多的人拥有高清设备,这只是时间问题。

我们看到视频的高清质量,以及上面描述的英雄形象。浏览器和互联网速度现在可以处理更多视频,电影背景往往在大气和情感联系上比停滞的照片更有效。

HD是另一个大于200 ppi(dpi)的分辨率,而标准清晰度是72 ppi。这使得设计为SD的图像在HD设备上显得模糊或模糊,但HD图像在SD上看起来很好。这意味着使用SD显示器的用户将不会注意到差异 - 但是具有高清显示器的用户将会看到。

最佳做法

标量矢量图形(SVG)使用线条和点来转换图像,而不是像素格式(.jpg,.png,.gif)那样转换像素。在可以使用新图形时使用它们,并为实际图像和视频保存光栅格式,因为它们从一开始就具有固定数量的像素 - 这就是从一开始就以高清方式捕获媒体的重要性。

大多数设备的背景都不符合相机通常的1:1.5宽高比,因此在裁剪中扮演积极的角色。否则,你将无法控制切割的内容和看到的内容。

不要让背景的优越视觉效果掩盖了页面中更重要的元素。

07.大胆的排版

Google Ideas homepage

Google Ideas(www.google.com/ideas/)使用大胆的排版来表明它对改变世界的态度非常重要

随着字体渲染不再受到关注以及新的免费字体的可用性,排版已开始在网页设计中扮演更多角色。

大胆的排版是指引起人们注意的文本,但不一定是狂野的或复杂的。事实上,简单的排版有时是最大胆的。除了扁平和极简主义趋势外,目前的排版也有利于简洁。采用厚实造型设计的无衬线字体可以提高视觉效果,同时提高可读性。

无论字体如何,今年排版的最常见用途之一是极端尺寸。这可能是大或小 - 趋势只是将字体带到极端。

最佳做法

为了简单起见,每个站点只使用两种字体。对于多样性,尝试更多的字体,但坚持在同一个字体家庭

记住排版的主要目标是易读性和可读性。如果不理解你的字体是多么令人印象深刻并不重要。

在充分强调视觉效果的同时,大胆的排版可以接管页面上图像的角色。文本也可以是眼睛糖果,并且通常看到以漂亮文本为中心焦点的页面。

08.涉及互动

Beatbox Academy homepage

Beatbox Academy(www.beatboxacademy.ca/)非常具有互动性

HTML5,CSS,Javascript和jQuery的进步现在允许更深入的交互,a所有企业的强大工具。用户现在更加投入,具有更多的视觉刺激,更强大的内容和更具吸引力的控件。今年增加了:

  • 可点击/可滑动的元素
  • 个性化(尤其是地理定位)
  • 控制揭示内容
  • 视频和动画
  • 基于滚动的导航
  • 转换和循环函数
  • 推送通知

相互作用的增加也意味着微交互的增加。

如中所述2015年和2016年网页设计趋势通过UXPin微交互是交互性的细节:当你发送电子邮件时发出叮当声,或者引起对新通知的注意的动画。交互设计只会变得更复杂,这使得这种趋势肯定会持续一段时间。

最佳做法

众所周知的能指 - 例如标有“MENU”的汉堡包图标来传达拉出式菜单或代表可点击视频的播放按钮 - 绕过解释功能,从而使交互更容易。

牢记用户的目标。应该调整设计过程的每一步,以帮助用户更快地完成目标。中提到的角色,用户场景和体验地图UX设计流程最佳实践最有助于了解您的用户及其目标。

产品的交互性是其与用户对话中的角色。为了更好地理解用户流,请尝试用户和界面之间的角色扮演,其中一个人实际上为未来的网站说话。

09.鲜艳的色彩

Spotify: Found them First homepage

Spotify:首先发现它们(https://spotify-foundthemfirst.com/en-US)突出显示当前更明亮颜色的趋势

正如我们所看到的平面设计的普及,视觉效果的总体趋势是快乐和乐观。

明亮,“快乐”的色彩与轻松,友好的魅力相匹配,今天更容易接近。在过去,设计师仅限于此216种网页安全色,但现在有数百万,随着高清屏幕的兴起,进步很快。

鲜艳的色彩不仅仅是一种更乐观的美感。注意力集中的颜色减少了网站出现沉闷的可能性 - 极简主义的自然弱点。当积极地使用排版时,颜色可以引起对某些单词或短语的注意。此外,颜色为建议可用性提供了有价值的功能:考虑在悬停时改变颜色的卡片,这是交互性的明显指标。

最佳做法

  • 每种颜色都会引发不同的情绪,因此请选择合适的颜色以符合您产品的个性。
  • 更多颜色并不总是更好。单色方案使用相同颜色的不同色调来创建更统一的界面,并在与粗体排版配对时形成强烈的视觉效果。
  • 3种主要配色方案可以在您的网站上创造完美的对比度。

10.极简主义

OMEGA Watches homepage

OMEGA Watches的网站(www.omegawatches.com/)极简主义

我将结束另一个增加移动流量的结果:极简主义,一种仅使用裸基本元素或最小元素定义的样式。

在上面的例子中,OMEGA仅包括必要的内容:语言设置,可扩展菜单以及返回主页的徽标。这几乎完全引起了产品的英雄形象的关注。

从视觉上看,极简主义为网站增添了一丝精致,无论是什么类型。但是在更实际的层面上,修剪脂肪可以减少加载时间,增强可读性,并且创建界面非常简单,一目了然。更少的元素使响应式设计更容易。

最佳做法

  • 通过隐藏滑出或下拉菜单中的导航菜单来节省空间。
  • 应用不同程度的对称性使得剩余的少数元素更有效。如果您希望单个元素脱颖而出,则考虑不对称,例如通过一小块文本偏移的大型产品图像。
  • 鉴于对内容的重视,极简主义网站与英雄图像和视频背景配合得很好:与图形竞争的UI元素更少。

结论

如果您想了解更多,免费指南2015年和2016年网页设计趋势详细阐述了融合所有这些趋势的技术,以及更多最佳实践和100个在线资源。

您可以阅读有关它们的工作原理以及如何应用它们的信息,还可以查看来自Google,Apple,Dropbox,Spotify,BMW,Versace,Reebok,Adidas等家庭网站的160多个精心挑选的示例中的趋势。

喜欢这个?阅读这些!



翻译字数超限