基于艺术处理加工的网页设计研究

桂一铭 赵熙

摘要：近年来随着互联网络的迅速发展，网页设计的发展也更加倾向于信息量多、更新快和易于宣传推广。网页设计包含了各种功能，为了满足企业的需求，传统的网页创作者可能只考虑到网页的实用性，用户在交互的时候访客体验不是很理想。而通过艺术加工与处理下的网页设计，可以更便利使用者，大大提高用户浏览体验。本文从排版功能设计与视觉设计两个方面，分析网页设计关键的设计要素有哪些，探讨在哪些细节方面能做的更好，从而更好地满足市场客户的需求。想要设计出理想优质的网页，网页建站人员和网页艺术设计师之间协作完成任务，也是密不可分的。

关键词：网页设计;排版设计;设计心理学

一、当今时代下的网页设计

在网络飞速进步的今天，互联网围绕着我们的生活，它所衍生的产物：网页已成为服务、寻求产品和营销业务的最终目的地，由于无处不在使用智能手机的用户群体访问互联网，网页在我们身边全面普及。据数据分析报告显示，大把的的网站都是功能简单的展示网站，多是采用模板建站制作而成。而这种简单的企业网站，已经远远不能适应电商市场的发展，所以很大一部分中小企业对更高层次的网站有很大需求。因此在设计领域最近发生了翻天覆地的变化，设计师在考虑移动终端兼容性优化的同时，还要在有限的视角里把网页中想表达的信息介绍清楚，并且如今人们审美也在不知不觉中改变着，对艺术与美的眼光也在水涨船高，访问网站都有着各自的需求，上述这些走向客观且大势所趋，对网页设计师提出了新的要求。

二、网页设计内的的排版设计

（一）不同服务功能的网页排版

排版设计是一种能展示信息艺术化的形式，一个优秀的排版在能够更好的展示信息的同时，又能够体现出设计的美感，使客户快速获得信息的同时感受到设计的美。排版在UI设计中至关重要，一个出色的排版设计能够让用户专注于接受信息内容，而不是排版本身上。

1、电子商务平台的排版

電子商务网站是大多主流网站的一种，电子商务的网站定位基于产品销售，电子商务网站的用户们最关心的就是产品的相关情况（功能情况、质量情况、价格对比情况），有效专业的组织产品信息、合理呈现的产品分类目录是电子商务的脊梁骨，基于电子商务网站的定位，电子商务网站首页必须要有脊梁骨之外，还要向用户传递一些其他产品的延展性信息，刺激用户产生更多购买行为，如：新品上市通知、热销产品榜单、促销打折信息和活动起始日期、个性推荐等等。

2.企业网站的网页排版

企业网站作为企业进行网络营销的“大本营”，跟电子商务网站有相似的地方但也不完全是，它的作用不仅仅在于产品的展示和推广，更重要的是要使客户建立起对企业和产品的信心，所以说企业网站首页要尽可能的体现在所处行业中的专业性和可信度，首页的主要功能就是要让用户在短时间内对企业大致了解和建立产品信任，最好在显眼位置要有企业信息介绍、资质证明、员工能力水平、产品的产地、制作工艺信息等的入口，一个企业网站的细节相当重要，还要注意企业地址是否完整、是否有联系方式、用智能客服或人工客服、网站是否正规且备案……，企业网站的关键是建立用户联系信任，一个从无到有和从有到多的作用。

（二）文字排版扮演着重要角色

在绝大多数时候，排版这项工作这通常是靠文本字体来完成，优化排版可以提升排版布局的可读性，提升访客人数，但是它最低的标准和最核心的要素，依然是要保证排版本身的「可用性」。降低用户使用时的障碍和摩擦，减少认知负荷。对于网页而言，视觉信息的传达至关重要。用户通过页面获取信息，网页设计包括文本、背景、图标、图像与表格、色彩、导航工具、动态影像等视觉元素[1]。现在，排版在网页设计中，已经是一件越来越重要的事情了。糟糕的排版令人分心，内容无法清晰地传达。相反优秀的排版会做的更加润物细无声，让内容清晰直观地传达。

1、控制字体种类数量

充满个性的字体层出不穷，而在网页这空间并不多的地方承载不了过多的字体种类，当网页文本内容中使用超过3 种完全不同的字体的时候，会让网站显得结构紊乱且不专业，太多字体和复杂的样式都会对网页整体布局产生不可逆的恶性影响，用户会出现烦躁的心情，对用户的阅读体验极具下降。

为了阻止这种影响访客观看体验的的情况的发生，尽量控制字体类型的数量是非常有必要的。通常情况下最简单也是最容易出效果的的方法，限制字体数量是一种非常有用的解决方案，通常一个或至多两个字体能够满足绝大多数的排版需求，如果试着在整个网站设计中坚持只使用一种字体，会惊奇地发现能够给人带来一种整齐严谨又统一的体验。相同系列的字体进行组合，即使用一种字体，也可以利用不同的大小、样式，制造他们之间的层次感，凸显出对比，简单的改变能让设计创造出无限的可能。如果实在需要使用两种，甚至更多的字体，那么保证这字体与字体之间形式能够相互补充、相互搭配，达成画面字符统一。

2、控制每行内容的长度

不管在网页首页还是在网页中众多的分支网页，其中每行文本的字符数，其实直接影响着文本内容的可读性。文本太长或者太短都会影响着阅读体验，查找阅读文献到底多少。假如文本太短，用户的内容扫视频率会过高，经常会打正常阅读的节奏，而如果太长了，用户会很难持续的保持较高的专注度去阅读，网站制作人想要表达的内容肯定会大打折扣。很显然，这两者都不是我们想要的。

在移动端上，手机的尺寸是一年比一年大，但是出于它的便携性，尺寸无法与电脑屏幕相比，在有限的空间里每行文字应该控制在30～40个字符之间，这也符合目前的用户使用习惯和阅读体验。参考下面的对比图，可以看出，40～60个字符数通常能够取得最佳的阅读体验。在网页设计中，通常使用em和px来控制文本块的宽度，借此来控制每行的字符数量。

三、网页设计内的视觉设计

（一）具有代表性的网站标志

一个响亮且深刻的标志必不可少，标志最显著的特征是有着独具一帜的形态，易于辨识，同时显现所代表机构企业的自身特性。点击该标志，就可访问与企业相关的网站。标志广告既有利于提高企业标志和企业品牌的识别记忆，又实现了网络连接。[2]在商场街道看到一些标志，你会立刻想到所属品牌，毋庸置疑大多数人脑海里下意识会出现相应的企业品牌，如此可见这些公司的知名推广程度之大、营销之成功或者运营时间之久，也绝对和这家公司的logo图标脱不开干系，这就是设计标志的作用。设计是人类社会具有识别和传达信息作用的象征性视觉符号，把理念和图案结合，使人们留下深刻的印象和记忆。标志设计在构思上应把握定位准确、形象典型这两大要点，能让人一望而知、迅速精确地领悟。标志设计自身价值不可低估，它相比较于文字，其快速识别性、易于理解性更加显示出其存在的巨大价值。作为形象识别的统领因素，备受企业家和设计师的高度重视。

（二）网页中色彩的表达与应用

Web设计使用关键的视觉元素，例如布局，图形和内容等。布局是在网站中排列图形，链接和文本变换视觉引导的一种方式。颜色的选择范围相当广泛，设计从黑白的简单到多色的丰富，具体取决于用户人群喜好和品牌的个性。一个好的网页设计还包括特殊时日可以随时替换的网页的配色方案、版式、布局和图片，以便满足于不同的场合。这些视觉元素根据网页的颜色，内容和用途进行适当放置。色彩视觉内容是网站的主要组成部分，给人们带来第一直观印象。

1、确保合理的色彩对比度

文本颜色和背景颜色叠加使用应该有足够的对比度，文本越明显，用户就越能快速清晰地获取其中的信息。按照W3C（万维网联盟）的标准制定，文本和背景的对比是有一定规则可循的：

图中对比度不足的时候，图中的字似乎“溶”到背景中去了，几乎无法正常进行阅读。这些符合对比度的规范，可是过高的对比度有利有弊，连续对比度过高会导致视觉压力，一个合理的对比度相当重要。易读性正常前提下确定了配色，还需要在尽可能多的设备上进行测试，让不同的用户来体验浏览效果，因为设备的显示模式和尺寸不同，做好对比度就可以尽量避免出现可读性障碍的问题。

2、网站运用的色彩心理学

通过色彩喜好选择可以了解人的一部分性格，由此可知浏览网页的色彩基调也可以分析出设计师以下两种想法，告诉企业的文化特征或是想让访客保持怎样的情绪浏览网站，因为调整独特的色彩有助于创建想法，传达信息，调用感情和提升用户兴趣的领域。人们对色彩会进行联想，从而引起心理上的共鸣。当色彩的联想达到共性反应，并通过文化传承而形成固定观念时，就具备了象征意义。[3]颜色在很大程度上影响观看者的当下情绪，并且在一定程度上帮助他们提升浏览网站的内容后的做出决策过程快慢或是否做出决定。譬如说，上网购票是一件需要耐心反复确认的事情，那么以下这些网站的配色：蓝色，蓝色是最为镇静的颜色，从生理和心理方面来说，蓝色能让人心跳减慢、体温降低，给人的感觉平静、理性，可以使人的情绪得到舒缓，象征平静、理智、纯净，蓝色具有镇定安神，缓解焦虑的效果[4]。以下旅游出行网站把蓝色为主基调就给访客在仔细确认购票信息的时候起到了很好的冷静作用，再加上丰富色彩的景点目的地选择也让顾客在旅游前就对景地心驰向往。

（三）富有强大吸引力的动态效果

动态网页相比于传统静态网页，它事实上并不是独立存在于服务器上的网页文件，只有当用户请求服务器时才返回一个完整的网页，动态網页以数据库技术为基础，可以实现更多的功能，可以大大降低网站维护的工作量。平面视觉和不断发展的新技术将会有更加深入的结合。

Catch Fish And Chip网站包含了这样的一个动态效果，当用户停留在网页顶端时，会有长长的导航菜单，快速进行访客的分流，而如果想继续向下看下去把网页往下拉的话，一大排信息会动态过度成一条扁平的菜单，给下页的内容腾出了不少屏幕空间。苹果官网上能找到很多很典型的动态加载、视差滚动、视频和键鼠结合等各种新技术。

只要我们稍加观察，就会注意到新技术新审美对于现代网页设计的影响，这些正在发生的新事物会给你留下深刻的印象。网页设计师在尽量保持网页设计持有足够功能性的同时，还会注入更多新鲜的元素创意。

四、发展前景

（一）搜索引擎优化（SEO）

搜索引擎优化（SEO）是当今网络营销领域的流行关键词。更多的企业有着希望用户更快地找到自己的网站的需求，访问量在很大程度上决定着公司的业绩。多数网民在检索自己感兴趣的内容时，只点击搜索首页的前几位网站，搜索结果两页以后的内容更加可想而知无人问津。所以出现了SEO，SEO是指对网站的优化，让其在行业内占据领先地位，获得品牌收益，以确保在搜索引擎中具有更高的排名，更高的排名也就意味着有着更大范围的推广和更大的大众知晓度。寻找服务的客户会在搜索引擎中打入特定的关键字，并且通常会把关注点聚焦在生成的前4-5个列表中，做过SEO的企业也相应会收益其中。

（二）Web2.0网站

因抖音、哔哩哔哩、facebook脸书各大软件网页的兴起，出现了Web2.0，这一新鲜的网络交互性更加注重用户与用户，用户与平台之间三者交互，主要特点是鼓励用户创造和分享，这就要求发挥用户的主动性，加强用户间的互动，web2.0的主旋律即是“用户既是网站内容的访客，也是网站内容的制造者。”所以网站的首页既要突出主题同时也增添很多元素的音讯视频信息，足以挑起用户的好奇心，积极注册参与和探索，许多自媒体就好像是雨后春笋般纷纷成立。Web2.0像是一扇交给你钥匙的大门需要用户自己开锁进去，可以看到目前多数web2.0网站首页确实秉承了这样的理念，如：Twitter首页设计的比较简洁，不用上下左右滑动就能显示完成，里面设置了注册登录后才能使用相关的服务，注册后网站能了解用户的使用偏好，能保留用户发表的内容信息，更能给用户推荐他所感兴趣的内容，这一设定看上去提高了访客浏览内容的门槛，但是为双方精准长久的合作发展起着良好方向引导。

参考文献：

[1]   蔡玉硕，朱瑜珠.文字设计与版式编排[V].北京;中国建筑工业出版社，2018（5）：130-130.

[2]   罗萍.广告视觉设计基础[M].厦门：厦门大学出版社，2005（9）：240-240.

[3]   刘畅，潘荣.设计色彩：感知、表达与应用[M].北京：中国建筑工业出版社，2019（5）：52-53.

[4]   张磊.视觉传达中的创意标志设计[M].太原;山西经济出版社，2019（11）：77-78.

作者简介：

桂一铭（1996-），男，浙江人，浙江树人大学。

二作：赵熙（1982-），女，江苏人，浙江树人大学讲师，硕士，主要从事数字媒体交互设计、动画理论研究。