从网页设计的简史，见证当今网页设计技术的主流趋势

从上世纪90年代至今，网页设计技术不断进步。过去网页的本质仅用於存放资讯，而现代网站早已不满足单纯在网页上放置资讯，而是着重於品牌形象的加深，从网站的UX/UI设计，拉近品牌与顾客的距离。

上期小编和大家一起探讨《2010~2021年网页设计流行风格分析》，今期将从网页设计的简史，延伸到如今的主流趋势，和大家一起见证网页设计技术的演变过程：

【网页设计简史】

1989 — 网页设计的兴起

网页设计趋势

网页设计技术刚兴起时，整体介面就像打开Windows命令提示字元的介面，只有单色像素风格的纯文字图像。

1995 — 表格式网页设计

网页设计趋势

那年网页设计技术迈出关键的一大步：图像显示。

这个时期设计师普遍使用HTML表格方式设置网页布局，同时网页架设人员将设计稿切片辅助表格设计，逐步完成页面的每个部分。

同年 — JavaScript技术出现

网页设计趋势

JavaScript技术的出现，打破了HTML表格的局限，同时让背景图像、GIF动画等成为网页设计的主流，让网页可以根据使用者的动作，作出不同反应，譬如弹出视窗就是从此时期常被用於网页设计中。

1996 — Flash技术的诞生

网页设计趋势

Flash是一种支援多媒体创作和播放的技术，虽然早於2020年时已经确认停止更新，但在当时确实是很前卫的网页设计技术，并且设计师亦重度依赖Flash制作网页、广告、软体、游戏等产品。

1998 — CSS技术逐渐普及

网页设计趋势

虽然CSS是和JavaScript技术一同出现，但因为浏览器兼容性问题，一直过了好几年才逐渐普及。CSS是一种用来表现HTML或XML等文件样式的计算机语言，不仅可静态修饰网页，还可配合各种脚本语言动态地对网页个元素进行格式化。

2007 — 网格系统

网页设计趋势

这年不仅是第一代iPhone发布的年代，也是各大厂商相机推出低价智慧型手机常见市场的时期。五花八门的荧屏尺寸，让网页浏览舒适度大大减低，因此改进切片设计的使用成为首要任务，使得各类网格系统如雨後春笋般相继出现。经过市场机制的淘汰过後，最後留下960网格系统。

2010 — 响应式网页

网页设计趋势

此前网页设计风格多从极简主义延伸，2010年後使用智慧型手机的用户愈来愈多，网页设计的开发重点也从技术转逐步转移到设计、创意、视觉、互动等方面。

【分析近十年的网页设计趋势】

响应式网页开始广泛应用後，各类网页风格层出不穷，下面我们一起看看近十年的网页设计趋势都有哪些变化?

变化一：极简主义

在网页设计应用层面上，极简主义通常会在网站基本结构上，剔除多余元素，并放大必要视觉元素，使网页设计的视觉效果更加吸引，从而给使用者留下深刻的印象：

① 文字放大

网页设计趋势

网站的Slogan设计以大文字为主凸显想传递的资讯，让使用在进入网站的第一瞬间便了解品牌所提供的产品及服务，并冲中感受品牌的独特性。

② 元素放大

网页设计趋势

突出首页的产品情景细节图，让人一眼便看懂网页设计贩售的产品，而精致的图片、细节的展现往往能激发使用者的购物慾。

③ 极端主义

网页设计趋势

与极简网页风格不同，极端主义透过颜色的交替设计，试图挑战使用者的感知，夸张的设计让画面更富有张力。

变化二：不对称布局

所谓不对称，是指设计师利用不对称的“元素缺乏相等及均分”特性，创造出视觉的和谐与平衡。

① 消除行距的限制

网页设计趋势

透出消除网格边界与间距的限制，将介面中的不平衡化变为不同的平衡美感，让画面产生延伸感，令使用者不自觉地滚动网站直到页面底部。

② 单色块阵列

网页设计趋势

利用大小不同且色彩鲜艳的色块吸引使用者的注意力，让使用者能透过文字与图像了解品牌所传递的资讯。值得注意的是，色块如果没有大小或色彩对比之分，便不能发挥其效果;同时文字亦要经过顺序设计，而不是随便将内容置入其中。

③ 强调视觉动线

网页设计趋势

为介面增加强调视觉的动线设计，让画面形成张力，产生动感与活力，让使用者主动将网址分享给他人，达成另类的宣传和推广效果。

④ 多重曝光

网页设计趋势

多重曝光是指融合两张不同照片形成视觉上的冲击。如今这种设计时常被运用到网页设计上，为网站带来更强烈的对比，吸引使用者的眼球。

⑤ 留白设计

网页设计趋势

有时大量文字的填充，未必能将所有信息都呈现出来;相反，适当的留白更能突显想表达的内容，并有效提升网页设计的质感，而这样的质感亦会反映在品牌调性，使品牌形象获得更好的提升。

变化三：插画艺术

在网页设计上，与其使用一段长篇大论的文字来说明，不如使用一张插画要来得更清晰易懂，也赋予使用者温暖且证明的能量。

① 扁平色块

网页设计趋势

用纯色块表现画面的轮廓，能弱化视觉透视的同时，也减低光影与材质纹理对设计的影响，给使用者带来乾净利落的感受。

② 等距视角

网页设计趋势

等距视角的插画效果能使2D绘图增加立体感，让画面变得更活泼，也更有动态感。这类网页设计的通常会使用较为强烈且饱和的色彩方案，丰富的色彩调性能更好地拉近品牌与使用者之间的距离。

③ 色彩轮廓

网页设计趋势

不同於扁平色块风格，这类插画的色调较为单一，同时也不会展现出过於活泼的特性，但能提升插画的层次感。此风格非常适合较为沉稳的品牌使用，搭配文字以漫画或动画形式展示品牌资讯。

变化四：滚动视觉差

网页设计趋势

滚动时差设计能让网页元素在滚动中差生位置变化，形成层次错落的视觉效果，带来非常不错的视觉体验。而自2011年滚动视觉差出现後，加上网页设计技术不断强大，这种技术的表现方式也变得愈来愈丰富。

变化五：深色模式

网页设计趋势

2019年IOS和Android系统都推出深色模式的更新後，市面上众多APP设计也纷纷推出深色模式的主题配色。事实上，深色模式之所以风靡的原因，除了它能大大提升内容可读性外，部分系统还要求对不支持深色模式的APP采取强制下架的措施。

同时，深色模式的出现，确保了网站的吸引力能足够让使用者停下来探索，也赋予使用者部分的控制权，好让网站可以产生独特性，逐步开放网页或APP的“个性化设置”自由度。

变化六：融入新的科技技术

网页设计趋势

随着AI技术的成熟，很多企业都采用多通路行销方式，整合线上线下资源，帮助使用者进一步了解产品与服务，提升销售的营业额。

虽然目前全通路体验对大部分企业来说成本十分庞大，但在资源有限的情况下，我们可以将新科技技术，如AI、AR、机器人学习等技术逐步融入到网页设计中，通过追踪使用者的搜索习惯，找出创造最大效益的路径，并一部份一部份进行整合，逐渐打造全通路体验。

总的来说，以上所提出的内容，都应该围绕品牌调性、品牌定位以及使用者体验来设计，并且经过重重测试，不断优化改善，直到网站的操作变得更加简单方便，想表达的讯息也可以一目了然，这样才能让网页在网络庞大的资讯中脱颖而出。