近几年网页设计的技术发展真的变化万千，就连网页设计的趋势也都年年有所成长，尤其是2018年网页设计又到了另外一个里程碑，如果说你还不知道现在网页设计最新的趋势，那建议你赶快仔细阅读恶补一下！

1. 纯色的扁平化区块设计已经退烧

近年来RWD设计从扁平化设计(flat design)到google 的material design，都是采用单一色彩设计较多，而且区块设计也开始让人觉得无趣，所以早期常看到的拟真设计、阴影、渐层等设计手法又开始回归，但是跟早期用法相比还是有不同的地方，以icon来说，单一色彩的icon开始会出现两、三种颜色做搭配，以按钮来说以往采用单一色彩的表现，现在也开始使用渐层色彩与淡淡的阴影凸显按钮立体感，如此一来可以解决单一色彩的按钮在某些布局下容易被忽略或是误认的情况。

范例网站：airbnb 、uber

搜索框拥有浅浅的阴影效果

icon再也不是单一色彩，而是会透过色彩突出重要部分

2. 大胆的用色更容易加深印象

以往我们总是会用品牌色来当作整体网站的主轴，但是一但跳脱网站的主轴用色反而会让网友有大吃一惊的效果，通常都可以留下不错的印象，对于新品牌来说这样的手法可能还不敢使用，但是对于已经耳熟能详的品牌，这要的手法反而会带来意想不到的效果。

范例网站：Dropbox

大众对Dropbox的印象都是水蓝色，但是现在却可以很百变。

3. 破格设计打破无聊的布局

在RWD网页设计布局中，因为常用的12栏格线系统，导致所有区块都方方正正，排列虽然非常整齐，但久而久之也会觉得无趣，所以越来越多网站的内容开始会呈现破格排列，以添增内容排版上的趣味性，提供网友意外的惊喜，可以增加网友在网站上的浏览时间。

利用产品原有的造型创造出圆角的效果，并且透过错位的排版增加吸引力

 范例网站：Bose

4. 微互动大升级，跟着卷轴一起动吃动

随着卷轴追踪技术的提升，以往只能在滑鼠移动或点击时产生互动，但现在随着你滑鼠卷动就可以安排内容区块的进场、退场，以往的视差滚动只是图片上的错位效果，现在不但有错位效果，还可以安排在页面上制作有趣的动画，例如火箭升空或九大行星环绕等这样的效果，让网友目不转睛。

华丽的视觉滚动效果可以让网友目不转睛。

范例网站：invision

5. 影片背景运用

这里说的影片背景通常影片长度都不会太长，而且也会垫一张大图在影片下方，以免影片loading过慢时背景只有单一色彩的尴尬，许多用javascript或css3无法做出的视觉特效，可以透过影片的影音结合补强这点的不足。以前只能稍微满足五感中部分视觉与听觉，在网站与影片3D特效结合下，强烈视觉感官中又可以即时搭配配乐、音效，这样的视觉与听觉感官足以颠覆以往的设计。

将影片衬底，透过canvas制作数字遮罩，创造出不一样的影片衬底效果

范例网站：Audi Q2、Microsoft Surface

6. 字型运用多变性

文字再也不是单纯只是出现在画面上，它也可以是遮罩或是有不同的错位效果，甚至是一个很好做破格设计的元素，不再是单纯呈现内容而已，也可以有互动的可能性。

将文字裸空、描边，营造出不同的文字效果，加上垫底图与破格设计可以将死板的网页排版变成吸睛的动态海报

范例网站：benmingo

7. 手机载具荧幕加大

由于硬体零件成本降低，再加上触控装置学习曲线较低，所以上网年龄层开始上升，再者长时间上网使用荧幕造成视力容易受损，所以装置的介面越来越大，以手机来说iphone最后一只小荧幕手机目前是iphone SE，同iphone5系列，荧幕尺寸是4寸（320*528points，解析度1136*640），但根据statcounter的统计，目前手机最流行的解析度是360*640points，约有45.45%，目前iphone 8 的解析度已经到了414*736points（解析度1242*2208），因此在设计上开始可以添加更多有互动性的内容，而不该继续局限在小荧幕只能很刻板无聊的设计，而且移动端上网比例远高于桌机，所以在网站规划上，思考的出发点就绝对要以移动端为主，而不是传统桌机电脑。

8. 有趣的粒子效果风格

早期只要遇到动画几乎都适用flash （或现在叫animate）来制作，当然在现在已经不适合这样制作动画，除了直接把动画做成影片以外，我们也可以考虑使用css来做逐格动画，或是使用javascript撰写动画程式，例如可以使用javascript制作粒子效果来与滑鼠互动，你可以发现这样效果通常都可以带来很吸睛的互动效果。

bacter

MASAYUKI DAIJIMA

范例网站：MASAYUKI DAIJIMA、bacter

9. 向量插画风格动画

由于向量格式的图片开始可以直接用在网站上，所以网站上插画的运用也开始变多了，也因为是向量格式，所以可以符合RWD的运用，因此向量格式的动画也开始为之流行。但这样的动态通常都不会太长，而且考量档案大小，其实不一定会直接用svg格式来制作动画内容，他有可能是jpg或png搭配css sprite，或直接使用gif制作，但整体插画风格会是比较偏向量风格。

范例网站：inturn、baunfire、awesomemotive

以上九点就是2018年主要的网页设计趋势，如果你前几年都没跟上，你会发现现在的网页设计跟两三年前相比已经有点不一样，但是跟五年前相比，改变程度的差距已经开始变大了，任何一个网站我觉得使用3~5年不等就要考虑重新设计，原因是数位世界改变其实非常快，每年网页相关技术还在不断发展中，五年的时间其实已经可以造成开发技术的严重落差，就连视觉设计风格上也会有产生落差，所以如果你的网站已经用超过五年的朋友，尤其是还没有跟上RWD响应式设计风潮的朋友，建议您考虑一下，重新设计一个全新符合现代的网站吧！抢救回你无形中失去了行动市场！

摘自草監網路