进入2020年，网路扮演的角色不再只是资讯传达的媒体，新的5G技术将于2020年登场，而智慧手机再度成为科技界的关键平台。正当所有的一切服务都走向行动化，网页设计的行动化、高品质化、实用化的势必不可挡。

行动网页设计的主流技术以「响应式网页设计」(RWD)为主流，自2014年陆续就有相关的应用技术，至今已经有大量的网页採取RWD技术，但不少RWD只是针对显示解析度加以调整网页版型布局，其实还有许多行动网页设计的需求将大爆发。

以下我们整理了各国对于2020年，网页设计在版面、技术、行动化的方向观察。许多设计的趋势与马路科技目前的设计理念不谋而合，有些趋势我们需要迎头赶上，因此我们藉由这个园地，与各位读者一起分享网页设计2020年的新趋势。

响应式网页设计：不只要有还要可用

响应式的网站设计想必不少人已经耳熟能详：当一个网站取得用户使用的装置时，可以判断最佳的显示方式，进而达到理想的网页浏览效果，一般的网站是如此解释响应式网页设计。

如今，响应式网页设计已经十分的普及，网站看起来似乎是可以满足手机用户的使用需求，但实际上使用的问题仍然很多：图片显示比例不完全、文字过为拥挤、画面过于空白、选单的图示不知所云，网站跳出视窗阻挡了主要画面…这一些问题看似不大，但可以轻易破坏一个精心设计的网站。

Google的站长工具Search Console，可以找到更细节的问题例如字体与排版，但机器检测毕竟是机器人检测，不是真人检测，光靠机器无法找到的问题，例如页面的资讯饱和度、选单的操作性、界面的友善度等，仍有很多需要人工介入使用后，找到潜在的问题。

Search Console可以找出部分RWD网页的设计缺失

文字应用：发挥文字之美

文字在网页设计扮演了很重要的角色，在英文网页设计上，字体的变换可说是家常便饭，但受限于中文的字体库庞大，网页使用不同字体的风气并不盛行。毕竟中文受到了一些字体应用上的限制，若要使用非细明体的字体于网页内容也行，但就得使用网路字体等，但使用网路字体如Google Font与Adobe Typekit，势必得从云端取得字体档案后才能显示字体，多少会影响读取速度，在网页设计上必须有所取捨。

换个角度来说，设计的表现若想要添加字体之美，可以考虑使用文字结合图片的设计概念，，图片与文字的结合在世界设计潮流上，是十分常见的。字体结合几何、插画、图片的设计风格不论在日本、韩国、中国都有许多网站採用。

若以内容为主的网站，细明体其实十分适合阅读，不见得须要改变字体，但若网页的内容十分重视情境，例如：文化艺术类的网站，就可以考虑使用楷体或是黑体让人觉得耳目一新。

马路科技製作的天空创意节活动网页设计中，可以看见文字设计的重要性(图片为客户所有)

版面布局：新兴的非对称性设计风

标準的网页设计版面布局，对称是很主流的设计策略。对称风格的界面可以让人容易找到资讯，归纳出网站的重点讯息。对称的网页设计有很多种类型，一种是绝对的水平对称比较少见，也有透过颜色呈现的对称，有些是格局上的对称…

每个网站都有不同的目的，若是帮助用户长时间的使用网站，对称是不错的选择，但如果希望是让用户来到网站，就留下强烈的印象，那么可以考虑看看非对称性的设计风格。

不对称的网页设计的视觉焦点会产生一些变化，对称的视觉注意会类似一般我们使用电脑的”Z”字形状，不对称的设计可以产生出”N”字形状的注意焦点，用户或许会感到不太习惯，但对于网站设计所留下印象却会更为深刻。

对称的网站布局井然有序，条理分明，适合内容型的网站 (来源:毒品防治中心)

不对称的设计视觉活泼，能够留下强烈的印象 (来源: 中华木质构造建筑协会)

网页特效：善用影片优势

如何让你的网站看起来，更有特色、更能让客户留下深刻印象，影片绝对是一个大绝招。过去最爱使用影片于网页设计上的产业，以高单价的汽车、房地产、专业设备为主，今日许多消费性的产品，服务业，也注意到影片能够让网站的表现更好，纷纷採用了这种设计。

影片添加入网站内，要注意的细节比图片更多，例如影片的档案格式必须能被浏览器正确开启，开启后的速度表现如何？在手机上是否也可以正确观看？这一些问题可由专业的网页设计者协助解决，并不困难。大部分的问题在于拍摄影片的题材与构想，如何找到一个代表网站的影片的素材，才是许多网站运用影片时的问题。

一般来说，预算充足的企业多可以找到专业的团队，製作网站专属的影片，提供给网页设计公司使用。若你并没有足够的预算，你我口袋内的智慧手机，都已经具备了相当强大的录影功能。不仅如此，越来越多APP能够后製出专业品质的短片，许多工具的问世已经能够让你打造一个很酷的影片，我们介绍了很多工具与免费影片软体，例如Flex Clip、Adobe Spark Post、Gopro Quik，透过这些工具，先求有再求好，让网站有更多可以运用的素材，是较为务实的做法。

马路科技客户清河国际官网，运用了影片打造出顶级健身器材的视觉效果(影片内容为客户所有)

文章形式：大纲摘要是阅读新趋势

人们使用网路时间越来越久，在逛网站的时间却是越来越短，停留在网站的时间越短，搜寻引擎对于网站的评价表现就会降低，网页搜寻引擎(SEO)的排名当然就很难会有起色。因此，经营网站者时时刻刻都在思考，什么样的内容才能让满足用户，让用户愿意花更多时间在网站上。

一个很重要的趋势，出现在网路媒体、传媒与新闻网站，就是大纲摘要(Summary)的趋势。一篇文章完整阅读或许需要五至十分钟，但是有了大纲摘要的文章，用户可以用几秒的时间大致理解网页内的内容。这点对于智慧手机用户帮助最大，摘要不需要太多画面，正好符合行动使用者的习惯。

用户看过了内容大纲之后，可以决定是否继续读下去。乍听之下，大纲摘要(Summary)的内容把全文内容都先告诉了读者，让辛苦经营的内容「破梗」，但事实上，不感到兴趣的用户确实会立即离去，但是感到兴趣的用户会愿意花更多时间在网站上找寻他需要的资料，愿意留下来的用户，可以带来更多价值，正是网站经营者需要的核心用户。

媒体网站讯息量大，透过摘要的方式，用户可以吸收概略内容，或花更多时间深入研究(来源:每日邮报、business.com)

网路行销：跟上语音搜寻潮流

你一定听过Siri、Google的语音助理对话，他们可以帮你省去输入指令的过程，完成搜寻或是多种功能设定。以往你必须透过手机下达指令给智能助理，现在就连蓝芽耳机、智能喇叭都能接收语音指令、帮你查天气、交通、食谱、热门新闻…语音搜寻前景一片光明。

2020年SEO的重点，其中专家口径一致同意「语音搜寻」成为了重点。过去人们觉得跟手机讲话是一件很蠢的事情，但是语音辨识的準确性逐渐提昇，越来越多人捨弃指尖输入文字，改用文字询问Google各种问题。

因此，传统的文字搜寻如「新北美食」、「水电维修」外，还得思考一下用户如果使用手机，会如何询问Google呢？口语与关键字有所不同，人们比较不会对表格述说问题，但会用嘴巴述说问题，例如「好吃的新北美食推荐」、「专修热水器的公司」，若用户如此搜寻，你会如何经营调整你的关键字策略呢？

语音搜寻已经不是未来科技，而是已经十分成熟的技术，网站能够越早对应语音搜寻的需求，越能提昇网站的能见度，曝光的机会也会比传统网站更优。

语音助理在2020地位日渐重要，是不能忽视的趋势 (来源: Google Assistance)

网站速度：重要但层面十分複杂

你希望网站与众不同，但又希望网站速度快如闪电，这两者经常无法同时满足(可参考：製作一个超酷炫的网站是个好主意吗)，是今日网站设计者要面临的问题。唯有妥善的规划每个环节，才能取得效能与品质的平衡点。

事实上网站速度的快慢，有许多环节，网页主机、网页程式、网站图片、网路品质、网站浏览器、用户电脑…要找出真正的问题点需要一点时间，许多工具可以协助你诊断网站，找出网站速度的癥结所在。

技术导向的诊断工具如Google Lighthouse会是网站开发者的好朋友，对于一般网站专案管理者来说，Google Mobile Friendly Test或PageSpeed Insights就已经有足够的资讯可以改善网站的速度表现。

根据统计，大部分网站缓慢的问题，一半以上原因在于未经过优化的图片，今日图形压缩技术突飞猛进，可以将高画质的照片压缩节省空间却保留高品质，所以千万要记得，使用新的压缩技术维护你的网站。

Google Lighthouse 的检测报告非常详细，但要作到完善却很不容易 (来源:Google Developer)