较资深的用户或设计师应该都还记得，90年代大家特别喜欢使用繁複的 GIF 动态档来装饰网页吧？而现在最流行的网页风格反而是简约的扁平化设计。 网页设计趋势 可以反映当时的技术、使用者习惯、装置、美学与设计思维的不同，相当有趣并值得探讨。

 

举个最近流行的趋势吧！我们可以看到 响应式网页设计（RWD）越来越流行，许多网站皆改为此方式来设计，除了对移动装置用户更友善外，甚至也影响 Google 的搜寻排行。接著，就让我们透过 UXPin 针对今年度所见的趋势整理而成的文章，一起回顾今年的网页设计风潮与展望明年可能会流行的趋势萝～

 

 

1. UI 模板（patterns）激增

 

我们可以发现，在响应式设计的风潮下，似乎每个网站看起来都一样。不过，造成这样的现象，除了响应式设计外，还有其他原因，譬如市场上出现大量的套版网站与工具（如 WordPress 等）。不过，相似排版与视觉的模板并非不好，这只是市场上出现大量好用的 UI 模板后，我们考量它所带来的效益（省成本或可更专注于内容等）而产生的必然的现象而已。

 

 

 

另外，这些模板的发展都相当的成熟，要有极大的创新确实也相对困难。事实上，我们也不需要为了创新，而把一个通用成熟的东西重新发明。应该把精力放在如何用 UI 模板打造出流畅的使用者体验，以下是设计师不可不知的 UI 模板元素：

 

1. 汉堡图标（hamburger menu）：类似中文 “三" 的汉堡图标，虽然过去常被批评和讨论（使用者不易理解符号意思等），但现在使用者大多能理解它的意思了。此外，它可把众多的选项元素缩合（menu），相当方便，在许多产品上都可看见这个图标的应用。

 

2. 帐号注册的方法：我们可以发现，几乎所有网站的会员注册页面的排版方式都很接近，通常会在表格底下放置第三方登入的按钮（如 Fb 等）。若注册方式较複杂，也会将步骤拆解分散在多个页面，并提供提示让使用者知道如何进行，藉此减少注册流程中不良体验的产生。

 

3. 长滚动条页面（Long scroll）：这项设计的流行可以归因于行动装置用户的增长，因为行动装置适合不断的将页面往下滑动。除此之外，这项技术特别适合那些想要说故事的网站（不断的往下滚动，让使用者沉浸于功能介绍等内容），并且还可以做出如简报般，滚动一格就换到全新页面的效果。

 

 

 

4. 卡片式排版：Pinterest 是应用卡片式排版的先驱，因为卡片式易于让使用者以扫描的方式了解每块区域的内容，所以相当受到欢迎。每一块卡片区域都有独立的资讯，就如同内容的容器般。此外，因其方形的型态，在不同的萤幕大小下，网站也可以轻易地重新排配版面。

 

 

 

5. 高清晰度的大图（Hero image）：视觉是人们感受事物的主要方式之一，网站上若摆放高清晰度的大图，可很快的抓住使用者的注意力。这个趋势主要归因于网路的速度提升，使用者不必受苦于载入图片时的等待。其中，我们最常看到的排版方式莫过于在网站最上方放置一张高清晰度的大图，紧接著下方有由左至右并由上往下的系列内容排列（zig-zagging）或卡片式的布局。

 

 

 

 

 

 

2. 丰富的动态效果

 

动画可以加强网站想要告诉使用者的资讯，营造更多互动性与娱乐性。然而，设计师还是需要考量放置的位置，何处或何时出现才能达到动画想传递的效果；另外，也要思考如何带入产品的故事元素与品牌个性。基本上，动态效果可分为两种动画类型：

 

大尺寸的动画：通常使用大尺寸的动画，就是想让它成为与使用者互动的工具。其中有多种呈现方式，如滚动视差或弹跳通知视窗等方式。

小尺寸的动画：小尺寸的动画大多应用于资讯单向传达的情境，如等待中的旋转效果、滑鼠 hover 时的效果或载入进度条的效果等。

在此，我们整理了7种较受欢迎的动画技术：

 

载入时的动画

虽然传统的旋转或连续的圆点动画就能表示载入状态，但似乎满无趣的。因此有一些设计师开始设计载入时的动画（或页面），它们特别受到扁平化设计、 极简主义、 作品集与单页类型的网站欢迎。最后，我们也要提醒，设计要保持简单且避免加入音效，巧妙地融入网站特质与识别配色。

 

 

呼叫或隐藏导航列和选单的转场效果

将导航列或选单隐藏，是现在很多网站或 app 应用的方式，尤其可以省下许多页面空间。譬如说，应用 hamburger icon 来隐藏选单。但要特别注意别用太过度或过长的转场效果，造成使用者不悦。

 

hover 动画

使用者已经习以为惯地透过滑鼠 hover 的方式，来浏览更多的资讯。因此增加 hover 的动画，直接地给予使用者视觉回馈，会让这个行为更直觉。

 

 

 

图片集与幻灯片的动画

图片集（可切换图片或呈现多张）与幻灯片（单张切换）的呈现方式，很适合让使用者阅读图片，若增加更多互动性，可再提升使用者体验。这样的方式特别适合摄影、产品与作品集类型的网站。

 

动态的物件

人类很自然地会被动态的事物所吸引，因此设计师可以透过这个方法来抓住使用者的注意力，也可以让画面视觉更有层次感。甚至可以将其应用于表单、CTA 按钮或选单上，以达到商业的效益。

 

透过滚动滑鼠一步一步的呈现动画效果

流畅的滚动效果必须依赖动画的呈现与提供更进一步的控制权给予使用者。使用者可以自行决定触发下一段内容的步调。

 

 

 

背景动画或影片

在背景放置简单的动画或影片，可让网站更加吸引人，但必须保持简单与色调温和，不然容易造成使用者的分心。而製作的要领在于让动画或影片独立于一个区块或使用缓缓的动态效果来呈现大图。