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

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

　　一、响应式设计
　　近几年，因为移动装置普及，网站响应式设计显得格外重要，同时也相当受到欢迎(Responsive web design，RWD)。

　　以企业的角度而言，建构一个功能齐全且对于移动端友善的网站，Responsive design 是一个相对简单且省钱的方式，但若是应用错误的方法，可能会影响效能。借此，Guy’s Pod 向设计师提出了一些建议：

　　图片显示避免使用 display: none 的写法。虽然使用者没有看见图片，但其实仍然是有被 load 进来的，因此在网页的效能上产生了不必要的负担。

　　图片大小使用百分比来定义。

　　有条件式的引用 JavaScript，因为许多 js 元件在小尺寸的装置上(手机)是无法被使用的。特别需要注意的是第三方 script(如社群分享按钮)对于网站而言，常常会有负面的影响与降低效能。

　　使用 RESS – Responsive and Server Side

　　为了有效的量测与优化每个网站，应将效能测试这项目加入到流程中。

　　效能不单单只是使用者判断体验好坏的关键，同时也会影响 Google 的检索排名。此外，由于最近流行的极简风格让网页排除了不必要的元素而减少页面的复杂性，非常适合响应式的设计。同时，我们也可以看到许多具响应式设计的网站使用卡片式的排列，可在不同萤幕尺寸下，轻易的重新调整排列。

　　响应式设计已慢慢由趋势转变为最佳的实践方式。然而设计师们也必须想出一些聪明的方式解决任何速度的问题。无疑地，响应式设计是十分有用且通用的，但它也应该是高效能的，才可以提供出色的使用者体验(UX)。

　　二、扁平化设计会退烧吗?

　　扁平化设计风格其实已经流行一阵子了，目前它也与其他相似风格与设计语言融合得很好，如极简主义、响应式网站设计与 Google 的 Material Design。

　　未来，我们推测有更多扁平化设计的元素会流行：

　　长阴影(Long shadow)：长阴影可以带给扁平元素视觉上的深度。

　　鲜明色调： 一些受欢迎的 UI 模板都开始使用越来越鲜明的色系。

　　简单的文字排版：简单的文字排版，可以确保文字在扁平化设计下，保持清晰与可读性。

　　幽灵按钮(Ghost button)： 幽灵按钮的意思就是，让按钮仅留下外框线与说明文字，当使用者透过滑鼠 hover 时，才呈现变化。这样可以让使用者更专注于按钮的功能性，避免上方的颜色、形状或视觉表现而分心。

　　极简主义： 省略不必要的元素，让画面看起来清新不拥挤。

　　三、丰富的动态效果

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

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

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

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

　　载入时的动画

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

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

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

　　hover 动画

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

　　Photo credit: Humaan

　　图片集与幻灯片的动画

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

　　动态的物件

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

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

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

　　背景动画或影片

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

　　四、 微互动

　　人们几乎每天都与微互动(microinteraction)接触，例如关闭手机闹铃的过程或在 FB 的照片上按赞。每一个互动时刻都相当短暂快速，也不需要多想。就如同你关闭闹铃，很自然地就透过介面完成了这项事情。而也有越来越多的 app 开始思考它，并设计微互动的介面、操作方式与流程。

　　基本上，微互动可以帮助使用者完成三项事情：

　　告知现在处于何种状态或回馈资讯

　　了解这个动作后的结果

　　帮助使用者操作一些功能

　　微互动的设计是每个 app 开发中十分关键的部分之一。因此，我们根据此篇文章( Web Design Trends 2015 and 2016)给与开发团队一些建议：微互动在设计时，必须尽量不打扰使用者，千万别过度设计，并保持简单;仔细思考每个细节，同时让过程如同 “人类" 之间的互动;文字内容的撰写多点人性，不要如机器人一般。此外，每一个互动的途径都要以使用者为中心思考，让产品更人性化，并提升可用性。当然，这会加重开发团队的工作量，但这些确实是使用者真正或想要互动的部分。

　　五、Material Design: 后扁平化设计时代的创新者

　　去年，Google 发布了它的设计风格语言： Material Design。它利用阴影来表现各个状态，而阴影的深度又能带给使用者操作扁平化物件的真实感受(例如物件前后关系)。

　　Material Design 目的是希望创造出简洁、现代的设计风格，并专注于使用者体验(UX)。然而，过去 Google 与设计美学谈不上关系，而这次 Material Design 发表后，反而造成流行并受到各界赞扬。虽然 Material Design 的简约设计元素，与扁平化设计相似。不过相较于扁平化，Material Design 使用了深度表现与阴影，更可表现元件的前后关系。

　　尽管 Google提出这个设计语言，想要打造可供跨装置使用的漂亮 UI 与良好体验。但至今，应用 Material Design 的产品大多是 app。Google 也发现了这个现象，因此在七月时发布了网站可用的套件 – Material Design Lite(MDL)。这个套件结合 vanilla CSS、HTML 和 JavaScript，并希望它够轻量并易于开发人员使用，同时保有 Material Design 的视觉元素。此外，MDL 并不是依赖在特定框架上，所以设计师可以用各种前端方法来设计网站，同时它的程式也非常轻量化。

　　北京网站建设关于网页设趋势的小建议

　　虽然这些设计趋势是因为带来某些效益而受到欢迎，但千万别盲目地追求流行，一定要以使用者为中心思考，确保应用这些设计趋势对他们是好的。例如，电商网站就不适合完全的无限滚动页面。所以，这些趋势仅是设计师脑袋中的资料库，必须深思熟虑的选择其中最佳方案。

如没特殊注明，文章均为酷站科技原创,转载请注明来自http://www.bjkuzhan.com/wangzhanyouhua/1309.html