高质量设计网站（网页设计的未来规划）

高质感网站设计大趋势

今年全球受到新冠肺炎的高质影(ying)响，人类(lei)的量设生活受到了重大影响：旅行禁令、封城、计(ji)网计停校停课...深远影响了所有人，站网人(ren)们利用科技抗疫，页设网页自然也没(mei)有缺席，未规因此今年许多网页设计的高质趋势都围绕在防疫上。

举例来说：为了维持业绩，量设企业大(da)多投注了更(geng)多(duo)预算于线上(shang)商城上；美食外送成为主流，计网计许多食品公司也(ye)顺势推出线上订购料理(li)包的站网服务，甚至是页设教(jiao)育机构将课程搬上网络，让学生(sheng)减少外出的未规机会避免染疫...这些变(bian)化势必仍会延续到2021年。人们对于网页设计的高质期(qi)盼更高，也希望透过网页能够得到更好的量设服务，更多的计网计资讯，当然也要赏心悦目，这些都是对于2021年网页设计产业的挑战。

有「阅读感」的网页设计风

杂志风格的(de)网页设计风潮，也(ye)吹向了网页设计。网站能否呈现出(chu)类似阅读的方式呢？

这一点是十(shi)分肯定的，很巧合(he)的是，许多客户与我们的想法不谋而合，已经将故事的概念应用在网页的产品说(shuo)明，也十分乐见网页设计公司将叙说故事的概念设计在网页上。例如美兆集团的Interior室内设计杂志，采用了杂志设计风格的版型，让网页浏览的过程更具故事性。

另外一个例子：大(da)家健康杂志，是以纸本杂志为(wei)出版事(shi)业主体，后打造官方入口网站。从纸本的杂志延伸的官网，在首页的呈现使用了显著的区块做出内容区隔，类似报章杂志的专栏设计风格，可以更容易与纸本的媒体有视觉上的连结。

杂志风格的网页设计呈现方式不只出现在设计相关的产业，连科技产业也非常喜爱。例如科技人(ren)文杂志WIRED的首页呈现，就(jiu)呈现出(chu)报章杂志的区块式阅读风格，让人一眼就像(xiang)是回到了熟悉的纸本媒体。但(dan)可惜的是无法(fa)避免的广告干扰了阅读的广告，而且很(hen)多...毕竟杂志(zhi)媒体已经萎缩了很多，不得不透过广(guang)告获利。

放下冷冰冰的产品说明，想想故事吧

以(yi)美(mei)琪生技为(wei)例，是知名的个人清洁用品品牌。网站内除了(le)产品介绍外，透过部落格的专栏，将清洁防疫相关的知(zhi)识(shi)以影片、文字等故事方式叙说给访客，接着(zhe)进(jin)入产品的讯息分享，以故事(shi)取代广告，增加(jia)访客对于(yu)品牌的信任(ren)感。

网页也应该要有说故事(shi)的概念，幸运的是网页设计没有页数、时间(jian)与篇幅的限制(zhi)，可以尽情挥洒各种巧思，但(dan)网页设计却相对更(geng)为(wei)困难，举例来说：要设计出滚动网页视觉特效，就(jiu)需要Javascript与CSS的技术(shu)，加上视觉设计、文(wen)字设计等工作，团队合作上要有一定的默契。

2021年网页更需互动

越来越多人透过网络找寻服务，网站提供的即时通讯工具，有助于解决信件与表单无法解决的问(wen)题。

网页上即时(shi)通讯平台首推微信和QQ，原因十(shi)分单纯：在国内的通用(yong)性最(zui)高，且基本功能免费，只要将程式码交(jiao)给网页设计人员，就能让你的(de)网站摇身一变(bian)成为与客户沟通的平台。功能对中小企业来说也已经够用，由于微信与QQ已经是全球数以亿计的即时通讯平(ping)台，越来越多客户管理系统(CRM)都有(you)串联的功能，让客户联系的(de)过程得以记录在一个整合的资料库内(nei)。

除了(le)即时通(tong)讯工具以外，线上研讨会也是维系客户的一个好办法。在疫情散播之前(qian)，许多线(xian)上会议的软体以企业为对主要用户，价格并不便宜，疫情爆发之(zhi)后(hou)，多数的线上会议工具暂停收费或推出免费版，全球掀起了一股线(xian)上研讨会的热潮。

满版留白、网页设计新主流

用户来到网站，一开(kai)始会(hui)观察网页设计的视觉效果，所以如何留下一个好印象，版型是一个关键指标。以往将网页填满资(zi)讯，与大量按钮的(de)旧式设计逐渐退场，这几(ji)年的网页版型(xing)技巧上，满版+留白设计受到不少客户青睐，有几个主要(yao)的原因：

首先(xian)，满版网页设计(ji)非常适合呈现照片式的内容，当(dang)你的(de)主题以(yi)照片呈现时，满版可以让用户的专(zhuan)注力聚焦在图片上。以Allboard English这个网站来说，一张照片就能呈现出上课时的环境、师资与学生的活力，没有(you)什么比这样的(de)照片更具说服力了。

接(jie)着，满版网页设计更符合RWD响应式的设计，这一次(ci)的案例来说，满版的网页设计结合了区块式的内(nei)容呈现，带来了更鲜明的内容呈现，恰好与智慧手机经常使用的卡片式内容呈现(xian)模式相似。此外，大量的(de)按钮整合在汉堡选单也是一个显著的趋势，使用汉堡选单于网页设计是一个很重要的趋势，尤其是对于智慧手机网页设计来说。

另外一个满版的案例是圣光(guang)雕刻，满版网页设计(ji)的视觉搭配了大量的(de)留白，网页没(mei)有被满满的图文挤满，而是图文内容以和谐的方式(shi)呈现，与文物的质感相互呼应，虽然用户得多花一点时间卷动网页，才能看到完整(zheng)的内容，但访客会更乐于停在网站上阅读内容(rong)，对于网站的客户停留时间指标来说，会带来一定的帮助。

形象区块：强而有力的循环影(ying)片

利用影片于网页设计的情境很多，最常见的情境之一就是将影片放在(zai)首页上方，给访客视觉上的惊喜。不过，我们注意到大多数的首页影片，因为影(ying)片档案过大，用户画面还没呈现之前(qian)，就已经离开了(le)网页。

网页设计者要考虑到影片档案远(yuan)比文字、图片来得大数(shu)十倍，甚至(zhi)百倍，使用不当会使得网页开启得缓慢，我(wo)们建议使用(yong)影片务必优化(hua)影片，让影片更适合在网页上呈现。

先从影音(yin)服务开始说起，除了免费的视频平台以(yi)外，有许多付费的影音平(ping)台提供了无广告，也更稳定的影音服务，这是(shi)一个提升网页影音品质的策略。另外，将影片的长度缩短是缩小影片档案大小最立竿见影的方式，例如(ru)我们最近看到了罗技滑鼠的新产品网页，使用了循环影片播放的方(fang)式，档案格视为MP4，且大小(xiao)控制(zhi)在3MB，既能表现产品的高质感又能快速于网页上显示，相当值(zhi)得学习。

网页品质三要素：响应(ying)式设计、速度、内容

2020年Google Search Console(原站长工具)出现了很(hen)大的新元素：网站核心使用体验。这个新的标准有三个新的指标，LCP (最大内容绘制(zhi))、FID (首次(ci)输入延迟时间)和CLS(累计版面配置转移)，这三个新的指标要(yao)达到Google的(de)标准并不容易，考验着网站开发(fa)人员。这三个标准预计在2021年纳入(ru)指标(biao)，势必(bi)影(ying)响网站排名，相信未来类似百度的国内搜索引擎也会采用此标准。

纵观上述的几个趋势，不难察觉网站的设计品质决定了一个网站的排名，遵守搜索引擎的网页设计规范，并且优化网页的(de)读取效率，加强网站的内容品质(zhi)，做到这三点的网站必可取得较佳的自然排名(ming)。

让网页具(ju)备基(ji)本电商功能

疫情下的经济大量仰赖电子商务，但要短时间内成立(li)一个电子商城，并不是一件容易的事情，因此(ci)有客户使用(yong)简易的表单功能，做到基础电子商务的服务。虽然表单的(de)功能并不强大，便利性也比不(bu)上线上金流(liu)支付，优点是可以与客户做进一步的确认订单，也(ye)能减少网络诈骗的问题，仍有不(bu)少厂商运用表单的方式，达到电子商务的目的。

例如上图的案例中所推出的汤品调理包大受市场欢迎，透过表单的功能，能够让客户自己下订组合(he)不同的组(zu)合，并且选择付款的方式后，就能够完成(cheng)线上订购。

使用表单替代电子商务(wu)，我们认为最好的方式是与网页设计结合，将表单与网站融合在一起，因(yin)为网站内的产品介绍，联络资讯等内容，都可以(yi)提升用户的信任感，填写表单也(ye)比较(jiao)不会担心(xin)遇到诈骗。

2022年网页设计趋势

今天，我们将揭开2022年网页设计趋势的面纱，以更加活力、迷幻的美学给新的一年(nian)增加不少(shao)色彩。此外，我们还将为(wei)趋势附上网页的示(shi)例，以供参考。

2022年网页设计趋势：

1. 3D插画

下一个趋势是(shi)创建强大的交互式网站，以保证客户参与度。事实上，CGI在动态网页设计中起到了很好的效果，它们的高质(zhi)量效果对于一些大品牌来说是(shi)一个巨大(da)的(de)优势。

3. 80 年代合成波美学(xue)

这种趋势已经在音乐、电影、电视节目中无处(chu)不在，并且也在影(ying)响网页设计领(ling)域。1980年代的复古未来主义霓虹灯风格被(bei)称为Synthwave或Outrun，您可以通(tong)过dak模式、发光的霓虹灯颜色和网格轻松识别它。也会带来过去的十年的怀旧氛围。

4.视差

视差parallax效果在经典视频游戏中已经存在多年了，并最终成为网页设计领(ling)域(yu)的一种趋势。现(xian)在，这种炫酷效果通常被视为网页滚动(dong)功能的一部分。它使用多种背景，以不(bu)同的速度移动，从而(er)产生深度感（创建仿3D效果），从而带来有(you)趣的浏览体验。

5.2D卡通插图

除了与3D混合之外，2D插图作为卡通风格的一种趋势走自己的路。我们在网站上注意到了这种趋势的三种方法(fa)。第一个是包含2D卡通人物或物品的简单动画作为点缀，以使整体(ti)简单的网站方式更具吸引力(li)。第二种是将整个界面卡通化。在这种情况下，不需(xu)要特定的(de)卡通人物，因为每个按钮、菜单和元素看起来都很卡通。最后一种方法与3D环境中用到2D的插图，两种一起子重(zhong)叠使用。让我们欣赏一下这样的案例！

6. 实物作为元素

拥有一个美丽的(de)包装，用网站这个机会来展示它(ta)，使其成为其网页设计的一部分。这些网站只不是简单地包含了产口图片，而是将产品照片用作为(wei)一个元素，它们可以(yi)通过视差效果制作(zuo)动画或强调这些(xie)元素。这种趋势以产品为中心，使其成(cheng)为体验的一部分。

7. 野蛮主义

实际上(shang)，这个趋势更像是一种反趋势，它正在影响着互联网，摧毁既定的网页设计，剥夺它们的轻松和(he)乐观，并故意使它们变得大胆、坦率和丑陋。

简单来说(shuo)，这意味着将设计走向(xiang)最基本的原始外(wai)观，Brutalist网页设计使用基本的网页颜色、原始交互、大(da)而(er)重(zhong)的字体、缺乏层次结构。所以没有规则感。

在下面的例子中，你可以在感(gan)受到一些原始、粗野的设计，也许会在其混乱中找到美。

8. 科幻高科技

科幻肯定可以让网站以更具未来感的外观(guan)和时尚的交互方式脱颖而出(chu)。此外，这种趋势可以与CGI图形、3D插图，甚至与80年代复古未来派合成波风格的一些元素重(zhong)叠，尤其是发光的网格和霓虹色。

9. 故障效应

一切都融合在一起(qi)：视差、未来主义、野蛮主义。有了这个，很容易预测故障和迷幻效果也即将到来。

10.迷幻色彩组合

从之前分(fen)享的2022年平(ping)面设计领域的迷幻趋势证明了这(zhe)种趋势。鲜艳色彩、图案和(he)动画将(jiang)在网站体(ti)验变成一次迷幻之旅。为观众创造(zao)难忘的体(ti)验(yan)。

最后的话

总之(zhi)，我们看到2022年网页设计趋势之间的逻辑联(lian)系更加紧密，所有趋势都可以重叠并以不同的组合协同工作。事(shi)实上，我们看到大多数例子都是这样做的：拥抱不(bu)止一种趋势，即将到来的一年绝对值得期待。

那么，您对2022年平面设计趋势有何观察和预测？在评论(lun)中与(yu)我们分享。