网页设计几乎与网际网路的历史一样悠久,早年即便是电脑工程师也会自己设计网页,将自己的所学所知分享给网友。今日的网页技术越来越複杂,光靠初阶的HTML语法与技术,做出来的网站一定很简陋,别说是当作形象官网,恐怕连小学生都不想看。

今日的网页设计是一门专业的行业,透过网页设计师之手,才做出一个舒适、美观、又能吸引用户目光的优质网站。也因为各行各业都需要网页设计的专业人员,因此网页设计在求职市场上的需求一直都存在。

不论你想要成为网页设计师,或是身任网站站长,也不论是从零开始或是略有基础,网页设计一直有新的技术,必须不断学习网页设计的新技术。以下五点是我们分享网页设计给新人时,最常给予的五点建议:

  • 版型:网页的外观布局
  • 色彩:赋予网站性格
  • 视觉:技术日新月异
  • 字体:视觉设计的延伸
  • 内容:图文并茂的艺术

 

版型:网页的外观布局

网页设计报估价与报价的问题,长远影响了网站的品质

一般人看到网站,首先注意到的是色彩、图像和各种内容。如果没有这一些元素,网站还剩下什么?您会看到网站的骨架,这个骨架就是我们提到的版型,也有人称之为网页布局。网页版型或网页布局,是定义网站呈现的视觉结构。用户能够从这个结构中,找到网页的内容,并且根据网站的导览找到所需资讯。

对于设计师来说,网站成功或失败,跟版型有很大的关係,因为网站的元素若有瑕疵,只需稍加修改即可,但网站的版型一旦出现问题,往往需要整个重新翻修,是庞大的工程。一般来说,把网站的最重要元素放在网页的正中央是最佳的起手式。但网站的呈现方式千变万化,设计师需要不断学习新的版型设计趋势,才能满足不同用途网页的设计所需。

网页版型设计最常使用的技术为HTML与CSS语法,这两个语言技术虽然不难理解,却很难精通,对于初学者来说是一个易懂难精的门槛。幸运的是网路上有成千上万的资源,例如免费的版型可供下载,设计师会找到热门的网页版型加以分析,并且学习成为日后的成长养分。

日系网页设计风格检索网站 
全球最酷网页设计灵感-欧美日本系网站设计风格 

 

色彩:赋予网站性格

从小时候的美术课程,到现在每日生活所见的色彩,人们对于色彩并不陌生,大部分的人都可以很快的学会如何在网页上,使用不同的色彩点缀网页的内容,让网站看起来具有个性与特色,但是专业的网页颜色与日常的颜色有一些不同。

今日的网页有两个主要的目的:资讯的传递与人的沟通,因此颜色的使用上与艺术设计、视觉娱乐之目的是完全不同的。网页需要呈现资讯,资讯如何清楚的呈现是网页设计的基础,因此颜色的使用上也应该以此为基础。

不用担心,目前全球最标準的网页设计色彩,多以灰色为基底,因为通过灰色与其他色彩的组合,几乎可以保证访客可以轻易阅读内容,也能从网站上轻易分辨出文字、图片、影片之差异。接着,你可以挑选一两种颜色与灰色加以搭配,端看你的喜爱。

越来越多色彩工具可以辅助你找出适当的色彩,例如:颜色的对比是否过于强烈或是过弱,更有丰富的工具可以自动帮你找出最佳的颜色搭配。事实上,一个网页设计师能够在单一网页使用的颜色相当有限,初学者可以先从灰色与蓝色等安全的色调,学习如何将颜色与版型应用自如。

色彩学:为何科幻片的电脑画面总是蓝色的 
网页设计趋势:留白效果带来的效益 

 

视觉:技术日新月异

回顾早年网页仅能呈现非常单调的图片,如今,千万像素照片、HD高画质影片、高帧数2D动画、3D立体物件都能在网页上呈现。视觉技术总是令人目眩神迷,但每种技术都有他的优势与劣势,新手设计师需要学习每种视觉技术的优点与缺点,并用于自己的设计作品上。

图片是最常用的网页视觉元素,因为他的使用规则简单,取得也很容易。简单来说有JPG与PNG两种主流格式,初学者必须要学着如何运用这两种图档元素于网页上,并且留心图片的尺寸与压缩,因为这关係到网页的执行效率。另外也有新世代的SVG向量型图片格是,以及压缩表现更佳的webp格式,目前虽不普及但后势值得观察。

网页2D动画的部分早期是以Flash为主流,曾经辉煌一段时间的Flash自2021年正式结束被HTML 5替代。HTML 5动画有更好的跨平台特性与互动特性,但设计上来说比较複杂。视讯影片相较之下製作2D动画容易上手得多,只要手机就能拍出一段品质不错的影片,而且影片的平台使用也非常的成熟便利,各有各的长处与缺点。

次世代的网页技术势必会有3D的身影,随着2020年疫情的蔓延,线上展会、线上导览成为网页设计的新主流,像是360环景导览、虚拟导览、AR虚拟扩张、VR线上展览,都能透过网页的方式呈现在网站上。

HTML5动画-如何挑选一间好的网页设计公司  
动画网页设计时代的句点-Flash于2020终止更新 

 

字体:视觉设计的延伸

字体是让访客留下印象至关重要的元素,访客可以根据网站的设计,观察到网站是否适合他们继续使用。不同的字体样式会向人们传达不同的信息,更有助于建立品牌形象。一般来说网页使用字体的情况有两种:一种是以图片的方式呈现在网页上,另一种是内容上的字体呈现。

特定的字体样式可以向人们传达不同的讯息,例如信赖感,永续感,优雅感、精緻感、创造感等触及内心的感受。举例来说,休闲娱乐产业使用的字体,就可以採用比较特殊、大胆、活泼、突破传统的字体来呈现,而传统的工商业界就可以使用稳重、古典、传统、安定的字体表达诉求。

在网页上使用不同的字体,需要一些CSS的技巧,以Google Font为例,可以上W3C的教学网站学习如何套用Google的免费字体资源于网页中。由于Google Font的中文字体选择不多,另外有专业的中文字体供应商如:花康与文鼎字体,皆已提供字体服务给网页设计者购买使用。

/css/css_font_google.asp

另外,网路上有许多字体相关的实用服务,例如:字体产生器,可以帮助你无须下载字体,就能产生出简单的字体图片,可以用于网页内容或是社群经营。另外也有一些字体的服务,可以帮助你规划网站的文字大小、行距、字距等布局,有助于网页呈现文字内容时表达出正确的讯息。

【创意】字体不但能够卖钱,还能够製作成文创商品! 

新版Google Fonts,多种字体免费使用
 

内容:图文并茂的艺术

身为一个网页设计者,可能会认为网站的内容与设计者没有关係,实务上,许多网页设计上的问题,都需要将内容放上网页上,才会发现出真正的问题。

举例来说:当网站介绍产品时,是否需要有文字的说明,文字的说明该如何呈现,是要呈现出产品的标题、产品的摘要,还是另外输入文字说明?这些版面的呈现,若没有内容输入在网页内,是很难看出问题的端倪。

如果设计者本身就是创作网站内容的人,可以做的事情更多,例如:一个迷你的导引网站,活动入口网站,这些网站可能与主要网站的设计风格相差甚远,主要的目的是透过生动的内容与丰富的设计,吸引人到主要的网页一探究竟。

用网站来陈述一个故事,也是一个很重要的潮流。近年常见的滚动视差网页设计:当使用者透过滑鼠滚动,可以逐渐看到产品或服务内容,而且呈现的方式是十分生动,就是一个很好的例子。当网页能够完整讲述一个故事时,用户也会沉浸在其中,让网站得到更好的效果。