临汾高端网站制作：探索当前Web设计的发展趋势

有趣的是，目前的网页设计趋势是，他们都是有益的和有害的。趋势为特定时代流行的设计元素和风格设定了标准，因此跟上当前的趋势意味着网页设计师和开发人员能够更好地为客户创造现代外观。而新的趋势通常伴随着设计风格和代码的进步，这可以真正提高你的技能范围，即使你不像其他人那样使用它。

但是趋势也可以创造一个在线世界，在这个世界里，每一个新的设计看起来都像最后一个的复制品。在他们的巅峰时期，趋势往往是最弱的，主要是因为每个人都过分强调这种风格。更糟糕的是，一些网页设计师似乎忽视了每一种趋势的缺点，可能会以“其他人都在这样做”的态度来证明这一点。设计师和开发人员，谁仍然意识到良好的设计原则，尽管，可以帮助引导趋势，以更平衡的使用。

因此，为了使今年的网页设计趋势与可用性和可读性等重要原则和谐一致，让我们来看看今年最流行的一些趋势。下面的讨论包括一些现实生活的例子，并分析了每一种趋势的优缺点。我的希望是帮助设计师在网页设计项目中对何时、何地以及如何使用一种趋势做出明智的决定，并最终保持网络世界的多样性和优雅的可用性。

视差滚动

尽管视差滚动在电子游戏中已经存在了很长一段时间，直到2011年它才出现在网络上。由于背景元素以与前景元素不同的速度移动，Web设计趋势产生了3D深度的错觉。一些设计师认为视差滚动正在消失，这在某种程度上是真实的。我们没有看到很多长的滚动网站，充斥着视差的这些天出现。然而，与任何趋势一样，这一趋势仍然存在，而且很好，但已不再过火。最近，像这样的设计平台WordPress和魏比多已经采取措施，以确保视差滚动在主题和无代码模板，这是一个良好的迹象，视差滚动将继续流行相当一段时间。

许多人把幻想滚动和视差混为一谈。真视差滚动，如RobPalmer所述，涉及初始参照点(内容覆盖)、静止背景图像和移动前景对象。当用户滚动时，背景会随着内容覆盖进入或移出视图而轻微移动，但前景顶部的对象也会以与背景和覆盖不同的速度移动。移动前景对象是使其视差的关键，而不仅仅是涉及HTML/CSS动画之类的滚动。

· 行家-互动的，因此是吸引人的；美观的；最适合以新颖的方式呈现信息或产品的。

· 反方-加载可能非常慢，特别是在慢速或移动设备上；SEO问题；太多会使用户恼火；不寻常的移动方向可能令人困惑。

上面的TerraDigitalis站点完美地展示了视差是如何以一种新颖的风格呈现信息或产品的最佳工作方式。如果您计划使用视差，一定要首先为您的网站提供一个故事，否则视差会干扰和分散您的信息。视差效应的目的是吸引和吸引足够多的游客，让他们继续滚动，看看还会发生什么。现在，如果唯一发生的事情是一堆不遵循类似故事的信息的交互元素，那么访问者可能只记得这种效果有多“酷”，却忘记了这个网站是用来做什么的。

有趣的是，这个网站还展示了一些设计师是如何解决视差滚动的一个主要问题的-移动设备不起作用的问题。访问TerraDigitalis在你的手机，你会看到视差效应仍然存在，但与较少的细节。而不是热气球“浮动”在页面上，就像它在桌面版本，它仍然在中间的屏幕时，通过电话观看。

LixPen网站使用视差滚动操作简单而有效。请注意，当您向下滚动页面时，手持LixPen的手是如何相对于背景稍微移动的。这个网站解决了一个以上的骗局，经常发生与这一趋势：过高的效果和SEO问题。因为视差效应只是在网站的故事部分(在顶部)，我们可以阅读其余的细节，而不会分心。此外，将视差限制在页面的第一部分允许SEO所需的元描述和标题标记。

这是视差的最后一个例子，它说明了视差的作用不一定局限于向上的运动。它可以向下移动(我最喜欢的例子是西雅图的SpaceNeedle站点下面)或侧面，如上面的HotDot网站所示。一个不寻常的运动方向可能会引起混乱的问题，因为我们希望屏幕向上移动，当我们向下滚动。然而，在HotDot的例子中，横向移动仍然是自然的，因为它向大多数语言所读的方向移动：从左到右。太空针网站的工作是因为它从地面上讲述了针刺的故事，就像在玻璃电梯里移动一样。

HotDot和Space Needle网站的另一个不利方面是，它们需要花一点时间来加载。现在，这两者都包含了一个很吸引人的加载图标，但是有些观众仍然不耐烦地等待页面加载。这就是你只需要了解你的观众的地方。这两个网站，特别是西雅图太空针，有一个观众寻找经验，所以较慢的加载时间可能值得等待目标市场。

无限/长滚动

无限滚动趋势被恰当地命名为一些包含它的网站似乎永远不会结束。如果我们想得到字面上的术语，无限滚动用于那些真正永远不会结束的站点，而长滚动站点实际上是有结束的。这一趋势在2013年是一个巨大的趋势，今年似乎仍然是一个非常受欢迎的设计。通常，具有视差的站点使用长滚动布局，仅仅是因为需要所有这些空间才能正确地实现视差。让我们来看看这个趋势的好与坏，以及一些解决办法。

· 行家-非常适合用户生成的内容(如twitter)、类似故事的设计或单页网站；可以很吸引人；滚动比点击更容易。

· 反方-没有终点可能意味着用户在没有封闭感的情况下感到沮丧；在用户感觉到永远不会到来的终点时会产生误导；可能存在导航问题。

一个Avicii粉丝网站Truetu.be允许粉丝用Avicii的歌曲制作YouTube视频的mashup千真万确专辑。这个网站的主页是一个真正的无限滚动网站，包括所有使用真管创建的视频。因此，当用户向下滚动页面时，会加载更多的视频。视频框是按全屏布局组织的，看起来很棒，但滚动是误导人的。如果用户滚动足够快，他们将到达页脚，但页脚很快消失，因为更多的视频被加载到页面上。另一个令人沮丧的地方是点击视频意味着它们在另一个页面打开。回到主页，刷新浏览，这样用户就失去了他们在列表中的位置，不得不再次从页面的顶端开始。

Yogev Ahuvia在“粉碎”杂志上指出Twitter是无限滚动的最好例子。这很管用。列表布局可以无限地实时增长，这样用户就可以轻松地快速浏览大量的tweet。当用户点击一条推特时，它会在屏幕上展开，这样用户就可以在完成交互后关闭推文，并从他们停止的地方重新开始滚动。

但是，不管你是使用无限大的滚动站点，还是只提供一个长的滚动站点，都要提供导航按钮。许多长滚动站点使用固定的标题和导航菜单，使用户在厌倦滚动(比如使用Twitter)时很容易访问其他部分。一些网站还提供了一个沿边的导航菜单，显示用户的进度，就像下面的“近海合作伙伴”网站一样，侧导航在滚动时进一步细分为子菜单。

一些无限滚动站点通过提供一个可选的结尾来解决用户耗尽的问题。例如，当页面加载指定数量的文章时，下面的KartelLiveNews页面提供了一个“显示更多”按钮。

另一个新的和有趣的布局，最近出现在长期滚动趋势显示在下面的投资组合网站。一旦用户到达网站的末尾，他们就会立即回到起点，在一个循环无限滚动技术中。这种体验是令人惊讶的、吸引人的、可用的，而且仍然提供了一种结束的感觉，以防止大量的用户使用。

平面设计

虽然平面设计已经出现了一段时间，但Windows 8和iOS 7却使平面设计成为了一种蓬勃发展的数字化趋势，取代了网络上在短短几个月内就出现的真实风格的扭曲形态。大多数人会同意，平面设计的特点(以及它与普通最小设计的区别)是缺乏3D的、非真实感的图标、有限的渐变、缺少阴影、粗体的色彩方案、漂亮但可读的字体，以及通常基于网格的布局-尽管并非每一种平面设计都包含所有这些设计元素。在一个信息过载严重的数字世界中，平面设计的趋势在出现的时候是非常迫切需要的。尽管这种趋势主要是积极的，但它实际上也有一些缺点：

· 行家 – 清洁设计使它易于浏览；整体外观和感觉是现代的，时尚的，诚实的；快速加载；优秀的响应设计；内容是重点。

· 反方-难以注入个性、独创性和魅力；有时难以区分哪些元素是可点击的。

现在平面设计已经极大地改变了大多数数字设计的外观，一些人怀疑这一趋势是否走得太远了，尽管这些讨论相当激烈。OliverMcGough在Usabilla问题上说平面设计往往有问题。极端简约主义，过于字面的移动优先设计重点，和许多设计师似乎有打破这一巨大流行趋势的恐惧。看看下面这篇文章的评论，你就会明白我所说的“相当激烈”的讨论是什么意思。

一个漂亮的平面设计的例子，登陆应用网站页面使用高光和文本提示，让用户很容易知道哪些图标是可点击的。

即使McGough在他提出的观点上有些过于极端(难道设计师不应该指责，而不是趋势，害怕打破常规？)，确保增加个性通常是一条很好的设计规则。而且，确保用户能够很容易地判断一个项目是否可点击是非常重要的，无论设计是否是平坦的。上面的LanderApp网站页面在解决这两方面的批评方面做得很好。像桌子顶部的零散图标在打开页面时立刻吸引住了人们的注意。向下滚动，用户可以找到高光和文本提示，让他们知道哪些元素是按钮。

其他设计混合了一些偏斜的形式，这将被认为是一个基本的平面设计，试图既增加创意，也提供视觉线索的网站访问者。一些网站，比如下面的“新鲜设计”网站，把平面设计规则稍微弯曲了一下，显得格外突出。这一个增加了一些标题字体的小阴影。

响应性设计

随着全球移动设备使用量的大幅增加，网站正争先恐后地向任何设备上的用户开放。响应性设计正迅速成为移动可访问性最受欢迎的选择之一，因为网站可以根据屏幕大小进行无缝调整。当我提到响应性设计时，我不得不指出的一点是，Google更喜欢移动优化设计的布局。尽管如此，布局并不适用于每个人(这就是为什么Google除了响应之外还有另外两种推荐布局)：

· 行家-易于维护，因为只有一个网站设计；受到谷歌的青睐；基于网格布局，如此干净和易于使用；为用户提供了类似的体验，无论该设备用于访问该网站。

· 反方-过渡的初始成本-一个已经建立的网站可能很高；不为每个设备提供定制的体验。

决定您是否需要响应性设计的最佳方法是查看您的听众以及他们为什么要从另一个设备访问您。响应设计是完美的，如果用户将主要访问您的网站的信息，虽然电子商务网站可以受益于响应设计，如果他们的库存不是太大，也不是太深。电子商务网站的着装反应，如下所示，从个人电脑到移动的过渡美丽。尽管该网站是一家在线商店，但它的加载速度也非常快。(如果您在响应性设计的加载速度方面遇到问题，可以尝试这些加快加载时间的技巧)

下面的CreativeKnight响应站点是一个非常好的例子，它是一个相当重的设计，它将一些慢加载元素丢弃在较小的设备上。例如，它保留标题的动画静态背景，但不需要移动视图中的可滚动效果。

对于那些正在考虑从非优化的移动设计到响应性设计的昂贵转变的人来说，还有一点需要考虑：考虑你的受众。如果大量的访问者在他们的移动设备上使用您的站点，那么这可能是值得的。在一篇关于电子咨询公司的文章中，克里斯·莱克讨论了从转换到响应性设计中受益的14个品牌。在他的分析中，他发现他们中的大多数人都经历了50%到100%的转化率增长！这些数字足以让任何吝啬的会计师为响应性的设计过渡开绿灯。

独特排版

在古代电脑和浏览器时代，只有少数字体是“安全”用于网页设计(如乔治亚和Verdana等无聊字体)，因为字体和样式完全由每个浏览器控制。设计人员试图通过将字体转换为图像、用Javascript和Flash替换字体(sifr方法)或其他黑客替换来解决这个问题。此外，HTML和CSS的进步允许使用显示唯一字体的方法，但前提是该字体已安装在用户的计算机上；否则，将显示回退字体。

然后，随着CSS 3的发布，出现了一个新的解决方案，在@font-face属性，该属性允许自定义字体下载。@字体面板可能出现的唯一问题是许可问题。由于大多数商业许可证不允许字体文件从一个用户转移到下一个用户，@字体-Face违反了这些使用条款。很长一段时间里，这一障碍阻止了@字体脸的广泛使用，直到出现了解决非法问题的字体网站。

Typekit例如，Adobe是一个Web字体提供程序，负责处理自定义字体和@字体外观属性可能出现的所有许可问题。有了一个计划，你可以下载字体，把一个可编辑的工具包放在一起，然后将它嵌入到你的代码或博客平台中。Good ole‘google也为@字体授权问题提供了帮助。完全免费的Web字体作为开源。自从Google第一次提供这个资源以来，这个列表变得相当庞大，因为来自世界各地的设计师都是这个项目的一部分。Google提供了一个免费的API服务来方便地使用这些字体。即使如此，网页字体也需要考虑以下几点：

· 行家-增加品牌外观和个性；可用于标题、标题，甚至体字体；开源提供商，如Google和Font Scaprel‘sWebFont生成器使独特的网页字体使用免费和容易。

· 反方-可读性问题有时被忽视；必须考虑违反许可证的情况。

使用有趣的字体很容易做到正确。如果你检查并反复检查以确保@字体的使用在使用条款中是允许的，那么你就不必担心违反法律(还有一点额外的时间来确保这是值得的，也是一个独特字体的令人叹为观止的因素)。进化论新鲜(上面)使用类似脚本的字体在整个网站，包括在正文文本。但是，此脚本字体的可读性足以使其工作。“进化清新”做出了一个明智的决定，将文本保留在较小的段落和简短的描述中，这样可以防止那些仍在为奇怪的字体设计而挣扎的读者筋疲力尽。

为什么去野生网站上面使用一些令人难以置信的独特的排版为其标题和标题。但是说到正文，设计者明智地选择了像Museo 700这样的字体，以保持字体的吸引力，但比标题字体更易读。

全屏图像背景

就我个人而言，我最喜欢的网页设计趋势之一是全屏背景，尤其是那些有照片或视频的。通常全屏插图提供了一个惊人的效果，尽管。而且，即使是彩色背景看起来相当惊人，与一些令人敬畏的图形或定制排版。在跳到全屏设计之前，有几个优点和缺点需要考虑，即使它的设计让人印象深刻：

· 行家-令人惊叹的效果；帮助观众感觉完全沉浸在网站中；互动元素感觉像电子游戏；视频感觉像电影；为投资组合、食品行业、时装业等提供极好的选择。

· 反方-高质量的照片通常意味着缓慢的加载时间，特别是对于移动设备；非主题背景可能会分散对网站信息的注意力。

哈里森·格里森(Harrison Grierson)的工程和设计咨询机构在其网站上展示了其项目的精彩全屏照片。这种印象是持久的，影响深远的，它传递出的信息是，这家公司知道自己的东西。该网站的加载速度也非常快，甚至在移动显示器上也是如此。虽然移动版本没有响应性，但它在保持桌面版本的整体外观和感觉方面做得很好。

这个漂亮的网页设计其实不是全屏的。一开始我被它愚弄了，在图像的两边只显示了一点点的背景。这是一个很好的例子，如何“伪造”全屏设计，但保持整个东西非常轻。事实上，这可能就是为什么设计是无缝响应的原因。快速加载时，图像将在访问页面时立即出现。作为一个葡萄园和葡萄酒生产商，Lightft和Wolfville呈现出了从桌面到移动几乎完全相同的非常有影响力的图像。它甚至在标题中使用了一点视差滚动，当我在手机上访问这个站点时，我注意到它被明智地删除了。叠加在一段图像上的脉冲按钮显示了对每一幅图片的描述，这些图片讲述了农场故事的更多细节。甚至来自PeterGamble的信息也给了用户听或读的选择。最重要的是，作为一个长长的单一页面设计，设计师明智地包括了一个弹出导航菜单(我喜欢它是弹出，这样它就不会干扰近全屏设计)。

上面的Be Visionare网站是一个美丽的全屏插图的极好的例子。当您向下滚动页面时，背景将保持全屏，并且每个部分都包含一个直接以页面为中心的图形和消息。与移动版本相比，桌面版上的站点要复杂得多，但即便如此，所有必要的信息仍然包含在移动设计中。他们只是明智地忽略了所有的HTML动画和许多额外的文本和插图，包括在介绍。

视频背景

在网站上放视频越来越受欢迎，因为现在录制高质量的视频要便宜得多，而且容易得多。YouTube使任何人都可以简单地添加嵌入代码并将视频放到他们的站点上。和股票图像网站，如盖蒂图像提供免费视频，与为定制视频聘请视频摄影师相比，成本较低。许多网站在首页中使用全屏视频背景，而其他网站则只是简单地放置一个吸引眼球的大视频。有些自动播放视频，而另一些则允许用户首先选择点击播放或滚动。

· 行家-将文本保持在最低限度；非常适合显示额外的细节；全屏视频就像看电影一样；比其他方法更容易吸引游客的情绪。

· 反方-可能导致加载问题；可能会分散对消息的注意力；一些访问者可能不会观看视频；文本覆盖可能会在视频背景下消失。

上面的肉桂烤面包网站使用了一个全屏视频背景，在标题中的快速循环上播放。该设计将文本保存在视频的顶部，这样，尽管视频非常繁忙，人们还是可以很容易地看到文本，而且一旦用户开始滚动，文本就会出现在彩色框中，以便于阅读。这个非常活跃的视频实际上适用于这个机构，因为它给人的印象是，它充满了辛勤工作的伙伴。现在，该网站确实加载缓慢，可能是由于网站上的其他一些动画。但是移动版本消除了视频，取而代之的只是视频的截图图像。

Chernoff Newman网站有一个有趣的视频实现。在加载(包括大量视频的加载速度相当快)时，背景视频会自动开始播放，这实际上是由他们为客户做的几个视频创建的视频。点击“播放”按钮显示他们工作的快照的视频卷轴。他们所有的视频，除了介绍全屏视频之外，实际上都嵌入了Vimeo，这是他们节省带宽的一种方式。另一个值得注意的有趣点是，主页上的文本和动画图像直到用户向下滚动页面时才会加载。

在来自“53”的纸质应用程序的网页上，一个Vimeo视频被嵌入，但有趣的是它被无缝地集成到全屏背景中。这种风格的视频嵌入正在变得更加普遍，尽管它仍然是一个相当新的设计风格内的视频趋势。向下滚动页面显示了大量的文本描述给那些不想看视频的人。

HTML/CSS/Javascript动画

Flash曾经是网站上动画的最佳选择，直到HTML 5问世。使用CSS和Javascript制作动画的HTML解决了Flash出现的几个问题：移动不兼容、用户需要在计算机上安装Flash以及加载速度慢。随着HTML 5动画，一个全新的世界的可能性打开了网页设计师。许多人认为CSS 3提供了比Javascript更快的动画，但是一些人发现Javascript要快得多。尤其是更复杂的动画。无论哪种方式，重点是设计师已经越来越多地使用动画在网站上，现在一个轻，多功能的选择已经到来。请记住以下优点和缺点：

· 行家-轻巧；在移动上工作；创建简单到复杂的动画；使站点交互和/或吸引人；给人留下深刻印象；为设计增加个性；与主要浏览器兼容。

· 反方过多的动画可能会使人无法承受或分散了对信息的注意力；过多的动画会导致加载时间缓慢。

CSS网站展示了完全由HTML 5和CSS 3制作的生物，展示了CSS动画的创造性。事实上，通过将你的生物的个性、颜色和其他细节(比如牙齿或胡子)发到@CSSCreatures，就可以创建自己的形象。

尽管有大量的动画交互正在进行，这个动画站点的加载速度相当快，但是开发人员很聪明，因为每个动画故事都是单独加载的，只有在点击时才会加载。这样，最初只加载页面的主要部分。该网站使用CSS和Javascript的组合，使部分插图故事可点击。一旦单击指定的对象，故事的其他章节就会展开。这个分阶段加载是一个很好的方式来保持这个实际上是一个动画网站的快速加载。

这个网站显示了太多的动画严重损害可用性。首先，装载时间太长了。不是从0%到60%到80%的正常跳跃，而是从20%到21%到22%，等等。太慢了，我不喜欢！此外，动画是动荡和破坏性的，可能是因为有太多的事情在一次发生，任何工作都不太正确。奇怪的线条移动，整个屏幕“浮动”，很难分辨什么是可点击的。随着一切进展，我花了一段时间才弄清楚公司到底在做什么：令人震惊的是，它是一个独立的创意机构，专门研究新媒体。

减去文本内容

以上提到的所有趋势(以及更多的趋势)都产生了另一种新趋势：减少文本内容。除了文字之外，还有许多其他的通知读者的选项，许多网站选择了有限的书面描述。相反，他们使用动画、视频或图标，然后填写简短的文本描述。

例如，这个运动服装系列主要使用令人叹为观止的照片，而不是一吨的内容，以吸引游客。甚至他们的博客也包含了有限的文字和大量美丽的照片，这对他们的观众来说是有意义的，因为他们是时尚女性运动服装和配饰的提供者。我想，这个网站经历了有限文本的利弊：

· 行家-打破文字与图形，框，动画，和更多创造了一个独特的体验，使用户感兴趣；易于浏览，如果组织良好；干净的外观和感觉。

· 反方-可能由于缺乏文本内容而产生SEO问题；没有足够的文本会使信息过于模糊。

如果主页限制文本，那么请确保在其他页面(如“关于”页)上放置更多文本。或者确保在网站上包含一个博客。别忘了，用适当的标题标签和其他重要的SEO元素优化页面，这样搜索机器人就可以更好地解密内容，即使你不包含太多的文本。

并始终确保你包含足够的文本，让用户确切知道网站提供和希望他们下一步做什么，就像上面的手册网站。主页包含大型照片，说明他们的产品和简短的描述链接，这导致产品页面充满了详细的文本描述。

顺便说一句，Brandaid设计公司(顺便说一句，这是一个精彩的公司名称文字设计)的网站设计非常小，主要包括图标、大照片和简短的文本描述。整个外观非常令人耳目一新，易于浏览。

你认为如何？

趋势始终是任何设计的一个重要组成部分，至少简单地给出一个开始的基础。你可以随时跟随潮流，但在你的设计和方法上仍然是独一无二的。不要损害观众的喜好，可用性，网站的信息，或其他重要的因素，无论你创造什么设计。这就是为什么了解当前Web设计趋势的优缺点是如此重要：您将能够在您的项目中做出更有教养的决策。

临汾高端网站制作同意上述趋势的利弊吗？我错过了什么重要的考虑吗？欢迎在下面的评论中分享你的想法！