2020网页设计趋势-用响应式设计。

<img alt=020网页设计趋势-用响应式设计，打造高可用性的网站 。\" src=\"//www.cwhello.com/website/wp-content/uploads/2022/04/20220425164850-6266d0f2ba9bc.jpg\" style=\"width:80%\" //p
p进入2020年，网路扮演的角色不再只是资讯传达的媒体，新的5G技术将於2020年登场，而智慧手机再度成为科技界的关键平台。正当所有的一切服务都走向行动化，网页设计的行动化、高品质化、实用化的势必不可挡。/p
p行动网页设计的主流技术以u「响应式网页设计」(RWD)为主流/u，自2014年陆续就有相关的应用技术，至今已经有大量的网页采取RWD技术，但不少RWD只是针对显示解析度加以调整网页版型布局，其实还有许多行动网页设计的需求将大爆发。/p
p以下我们整理了各国对於2020年，网页设计在版面、技术、行动化的方向观察。许多设计的趋势与马路科技目前的设计理念不谋而合，有些趋势我们需要迎头赶上，因此我们藉由这个园地，与各位读者一起分享网页设计2020年的新趋势。/p
p

/p
h2 id=\"rwd\"响应式网页设计：不只要有还要可用/h2
p响应式的网站设计想必不少人已经耳熟能详：当一个网站取得用户使用的装置时，可以判断最佳的显示方式，进而达到理想的网页浏览效果，一般的网站是如此解释响应式网页设计。/p
p如今，响应式网页设计已经十分的普及，u网站看起来似乎是可以满足手机用户的使用需求，但实际上使用的问题仍然很多/u：图片显示比例不完全、文字过为拥挤、画面过於空白、选单的图示不知所云，网站跳出视窗阻挡了主要画面…这一些问题看似不大，但可以轻易破坏一个精心设计的网站。/p
pGoogle的站长工具Search Console，可以找到更细节的问题例如字体与排版，但机器检测毕竟是机器人检测，不是真人检测，光靠机器无法找到的问题，例如页面的资讯饱和度、选单的操作性、界面的友善度等，仍有很多需要人工介入使用後，找到潜在的问题。/p
pimg alt=020网页设计趋势-用响应式设计，打造高可用性的网站 。\" src=\"//www.cwhello.com/website/wp-content/uploads/2022/04/20220425164851-6266d0f32d74d.jpg\" style=\"width:80%\" />

搜索控制台可以找出一些RWD网页的设计缺陷。

/p
h2 id=\"layout\"版面布局：新兴的非对称性设计风/h2
p标准的网页设计版面布局，对称是很主流的设计策略。对称风格的界面可以让人容易找到资讯，归纳出网站的重点讯息。对称的网页设计有很多种类型，一种是绝对的水平对称比较少见，也有透过颜色呈现的对称，有些是格局上的对称…/p
p每个网站都有不同的目的，若是帮助用户长时间的使用网站，对称是不错的选择，但如果希望是让用户来到网站，就留下强烈的印象，那麽可以考虑看看非对称性的设计风格。/p
p不对称的网页设计的视觉焦点会产生一些变化，对称的视觉注意会类似一般我们使用电脑的”Z”字形状，不对称的设计可以产生出”N”字形状的注意焦点，用户或许会感到不太习惯，但对於网站设计所留下印象却会更为深刻。/p
pimg alt=020网页设计趋势-用响应式设计，打造高可用性的网站 。\" src=\"//www.cwhello.com/website/wp-content/uploads/2022/04/20220425164851-6266d0f37d453.jpg\" />
对称的网站布局井然有序，条理分明，适合内容型的网站 (来源:毒品防治中心)
对称网站布局有序，条理清晰，适合内容型网站(来源:药品控制中心)

/p
h2 id=\"effect\"网页特效：善用视频优势/h2
pu如何让你的网站看起来，更有特色、更能让客户留下深刻印象，视频绝对是一个大绝招/u。过去最爱使用视频於网页设计上的产业，以高单价的汽车、房地产、专业设备为主，今日许多消费性的产品，服务业，也注意到视频能够让网站的表现更好，纷纷采用了这种设计。/p
p视频添加入网站内，要注意的细节比图片更多，例如视频的档案格式必须能被浏览器正确开启，开启後的速度表现如何？在手机上是否也可以正确观看？这一些问题可由专业的网页设计者协助解决，并不困难。大部分的问题在於拍摄视频的题材与构想，如何找到一个代表网站的视频的素材，才是许多网站运用视频时的问题。/p
p一般来说，预算充足的企业多可以找到专业的团队，制作网站专属的视频，提供给网页设计公司使用。若你并没有足够的预算，你我口袋内的智慧手机，都已经具备了相当强大的录影功能。不仅如此，越来越多APP能够後制出专业品质的短片，许多工具的问世已经能够让你打造一个很酷的视频，让网站有更多可以运用的素材，是较为务实的做法。/p
pimg alt=020网页设计趋势-用响应式设计，打造高可用性的网站 。\" src=\"//www.cwhello.com/website/wp-content/uploads/2022/04/20220425164851-6266d0f3d672c.gif\" />

马陆某科技客户清和国际官网，利用视频打造顶级健身器材的视觉效果(视频内容归客户所有)。

/p
h2 id=\"voice\"网路营销：跟上语音搜寻潮流/h2
p你一定听过Siri、Google的语音助理对话，他们可以帮你省去输入指令的过程，完成搜寻或是多种功能设定。以往你必须透过手机下达指令给智能助理，现在就连蓝芽耳机、智能喇叭都能接收语音指令、帮你查天气、交通、食谱、热门新闻…语音搜寻前景一片光明。/p
pu2020年SEO的重点，其中专家口径一致同意「语音搜寻」成为了重点/u。过去人们觉得跟手机讲话是一件很蠢的事情，但是语音辨识的准确性逐渐提昇，越来越多人舍弃指尖输入文字，改用文字询问Google各种问题。/p
p因此，传统的文字搜寻如「新北美食」、「水电维修」外，还得思考一下用户如果使用手机，会如何询问Google呢？口语与关键字有所不同，人们比较不会对表格述说问题，但会用嘴巴述说问题，例如「好吃的新北美食推荐」、「专修热水器的公司」，若用户如此搜寻，你会如何经营调整你的关键字策略呢？/p
p语音搜寻已经不是未来科技，而是已经十分成熟的技术，网站能够越早对应语音搜寻的需求，越能提昇网站的能见度，曝光的机会也会比传统网站更优。/p
pimg alt=020网页设计趋势-用响应式设计，打造高可用性的网站 。\" src=\"//www.cwhello.com/website/wp-content/uploads/2022/04/20220425164852-6266d0f41839e.jpg\" />

语音助手在2020年发挥着越来越重要的作用，这是一个不容忽视的趋势

(来源:谷歌辅助)

[div][div]

网站速度:重要但复杂。

你希望你的网站与众不同，但你希望它快如闪电。这两样东西不能同时满足，这是当今网站设计者不得不面对的问题。只有合理规划每个环节，才能达到效率和质量的平衡。

其实一个网站的速度有很多环节，比如说网页主机、网页程序、网页图片、网页质量、网页浏览器、用户电脑& # 8230；找出真正的问题需要一点时间，很多工具可以帮你诊断网站，找出网站速度的症结所在。

Google Lighthouse等面向技术的诊断工具将是网站开发者的好朋友。对于一般的网站项目经理来说，Google Mobile Friendly Test或者PageSpeed Insights已经有足够的信息来提高网站的速度性能。

据统计，大部分网站速度慢的问题，有一半以上是因为图片没有优化。如今，图形压缩技术突飞猛进，可以压缩高质量的照片，节省空间但保留高质量。所以，记得使用新的压缩技术来维护你的网站。