设计一个好网站？遵守设计原则

网站看起来就觉得哪里不对，版型也不算差，图片也很美，文字也写得不错，到底是哪里出了问题？很可能是没有依照基本设计原则，素材没有好好配置而造成的，让人看不清楚网站设计的重点在哪，不够简约有力，内容变得很不起眼，让人无法继续看下去，我们整理了网站制作的几个基本设计原则，让网站设计师可以不用再埋头苦干而毫无成果，快速突破设计盲点。

网页设计前的准备工作

网站设计师最容易犯的错误？

网站最容易犯的错误就是，因为时间很赶，接到专案就开始动手做，在不知道网站目标、对象、产业特性、属性的情况下就开始设计网站，你可以回想看看这些案子是不是大量的反覆修改？制作网站的时间特别久？因为没有跟客户建立共同的价值观，以致于彼此的想法像是处在平行时空，沟通越来越不顺，恶性循环下把双方的信任感消磨殆尽。

如何定义网站目标？

「达成目标才是网站建设的真正意义」，网页设计前我们得先定义网站目标，假设网站是机械产业的官方网站，我们定义网站是「被搜索后得到客户咨询」，要达成客户咨询这个目标，在网站上必须提供于「有利于客户研究或审阅的各种资讯」，突显企业的专业形象，所以网站需要的栏目有：公司介绍、工厂规模、专业技术、客户案例、常见问题…，如果还要让网站具备排名能力，须加入SEO文章知识系统，还有全网站的SEO优化架构与策略。

网站设计前如何搜集资料？

搜集资料的第一个对象是「客户」，没有一个人的意见会比客户的意见更重要，这也是双方价值观校正的重要过程，可以从客户手中得到各式各样的网站资料，包含企业识别(CI)、产品照片、公司简介、各种型录、网站受众、产业型态…，可以理解产业程度越多越能设计出适合的网站，再来就是搜集各式各样类似产业的网站资料，汇整网站资料后才正式开始设计。

不能依照自己的喜好做设计吗？

设计师喜欢的东西不等于是好、适合的，每一次的设计都必须将自己归零，设计是为了解决问题，不是为了做自己开心的，如果设计的网站无法被接受就是一个失败的设计。很多设计公司限制了修改次数，不接受批评，不接受案主意见，坚持自己的设计理念，这些都是让设计走向极端的错误方式，最棒的设计像水，可以在不同的需求容器中，将设计填满到各种需求中，让客户满意与设计品质取得最大的平衡。

网站基本设计原则

搜集资料之后就正式开始网页设计，网站设计有几个基本原则，能依照这些原则去设计，网站基本就不会太差，像知道你设计的网站出了什么问题，就要用以下几个原则不断检视你的网站，是不是犯了这些错误？设计师不清楚自己的问题在哪，就是没有「设计感」，会觉得「那是别人主观的喜好问题」，不会觉得是自己的设计有问题，Design(设计)这个字源自于拉丁文，有「完成计划」的意思，如果无法完成计划就是失败的设计，设计基本原则已哪些呢？请继续看下去。

传达单一且明确的主题

我知道你有很多资讯想呈现，但过多的资讯只会让人却步，如果主题只有一个，那么这个网页就只需要一张示意图、一个标题、一段说明，单一的视觉设计有助于浏览者把目光专注放在这个主题上，如果网页采用了多个设计元素，建议你要做取舍，选一个主题留下来，其他就割舍吧，把想讲其他内容放到其他网页并串连。

一开始就设定网站氛围

网站要营造什么气氛是非常重要的事情，也是设计公司常常说的「设计风格」，风格设定取决于很多条件，最主要的就是企业识别(CI)、产业特性、喜好，如果是购物网站就适合丰富色彩以吸引目光，如果是传统制造业就适合沉稳专业氛围，如果是家具网站就需要营造温馨气氛。网站氛围是网页设计中最难以定义的事情，对氛围的感受是主观的。科技风、简约风、禅风、立体风、欢乐风…，营造风格的设计元素有，版型配置、形状、色彩、图案、字体、平衡感、质感…，有经验的设计师可以快速解构客户想法，解构方法有很多，其中最常见的就是提出各种设计案例理清需求，但也不能客户说什么就做什么，这样网站会像拼装车，失去原本打动人心的设计初衷。

精心编排网站内容顺序

网站为了因应行动装置，发展了RWD网站设计，浏览网站都是由上而下，于是上面的第一张图就变得非常重要，这是引起兴趣的第一个视觉设计，为什么是用图不是用字？因为大脑处理图片速度比文字快，可快速提高吸引力。经过编排的网站流程，可以让浏览者引发兴趣一路往下看完，就是一个成功的设计。

善用留白的技巧

于《留白的设计美学》一书提到，好设计的90%取决于「留白」。留白不是真的留下空白一片，留白是指留下空间，不要把每个位置布满资讯，让主题的图文可以更突显、更容易阅读，很多网站设计师看到画面有空位就想塞满资讯，不但无法呈现质感更让阅读产生障碍，留白应用设计的地方非常多，包含：图文间距、表格、行距、字距、图片配置、区块间…，适时的留白设计让浏览者得以喘息、眼睛放松、更专注，让主题可以聚焦。留白应该空下多少？如何配置留白空间？是属较高难度的设计技巧，即使很难也不要怕留白，勇于留白才能设计更具水准的网站。

配色是网站的第一印象

为什么台湾商店招牌凌乱无章，而日本、欧美的商店招牌就是有一种美感呢？问题之一就是配色，杂乱无逻辑的招牌配色就是扼杀设计的第一个杀手。网站也一样，配色是网站第一眼感受的东西，配色不协调马上产生违和感。网站配色通常会延续企业识别(CI)的配色策略，如果没有识别设计，就很需要网页设计师的配色辅助，色彩学是设计师必须养成的能力，模仿配色是无法做出独特配色的，色彩不是只有版面、字体、表格、线条…，还有照片、插图、影片的选用也有配色要考虑，颜色影响网站气氛甚巨，能掌握配色与用图的设计师就已经成功一半，如果对配色不擅长，建立多利用配色工具或是色票去练习配色。

维持一致的网站设计风格

网站设定了主题、风格、内容顺序、页首、页尾之后，后面的设计必须沿用这些定义，包含色彩、形状、质感、图片…等素材都必须维持一致性，让每个设计页都像是一家人，这跟企业识别系统(CIS)的逻辑是一样的，需要有系统的呈现整体感，整体感的并不是要你把相似的东西全部放在一起，错误方法：设计家具网站，整个网站放满家具照片，看到都疲乏了，这时候是适合放上几张有趣的插画，放上几张优惠小图，文章宣传图文，就能缓和类似内容带来的烦腻感。

不要小看网站的字体选择

网站字体用得好不好将会影响网站的「质感」，强调重点与易读性的网站，要避免使用有边线、阴影、装饰、逗趣、花俏、可爱、过度装饰的字体，如果不是直接跟图片合成的字体，要特别注意CSS字体的设定顺序，英文字体要放前面中文字体放后面，因为中文常常已经内含英文字体。繁体中文网站常用的是微软正黑体，简体网站则常用微软雅黑体。为了让网站速度与效能最佳化，还是会建议使用网站内建字体，虽然不同的作业系统与浏览器会有不一样的呈现，无法统一体验，但是只要擅用字体顺序、文字间距与留白，一样可以做到网站所需要的质感。最后，网站字体不要不断换来换去，这会让阅读整体感变得很差，让字体有整体感也是很重要的事情，善用字体变化也可以让原本需要编排的区块不需要多余的设计就能看出区域。

插图让网站视觉进化

有时候文字无法精确表达的时候，需要将资讯视觉化，这时候可以设计插图将资讯图像化，好的插图让网站更有看头。文章段落间插入照片或图表，可以提高阅读者的想像与理解，也会让文章更活泼有趣，但千万不要放一堆不知所云的照片或插图，使用毫无逻辑的素材是设计的大忌。至于是放图片比较好还是放插画呢？要视网站内容而定。有时候也可以用手绘图营造网站氛围，使用的照片、图片、插画的目的都是为了让网页更容易阅读与理解。

拍摄网站的重要照片

设计原则要善用照片与插图，但如果没有照片呢？除了购买图库图片外，为了呈现更好的视觉效果，建议要拍摄专属的照片，整个网站用了过多图库照片，除了缺乏整体感还会有不真实的感觉。照片(图片)是网站素材中最重要的元素，网站在怎样糟糕，有好的照片就能直接堪用，如果没有好照片，再好的版型、配色、文案、留白、内容顺序… ，因为品质低落的照片或图片，直接让网站变成不及格，尤其是首页形象图。好照片可以快速营造气氛，可以突显主题，有企划拍摄的照片，内容完整、光线充足、构图平衡、视角精确，简单后制就能应用到网站，照片品质不良就需要更多的后制去调整，包含校正色彩、调整色调、消除杂点、加强对比、增加曝光…，「照片是网站设计的最大关键」一点都没有错。

将影片应用在网站上

有时候文字、照片、插图、表格都无法完整表现要说明的内容，就很适合拍一段影片去呈现，例如：机械运作流程、食谱料理、家具安装方法…。网站可以写一套影音管理系统，也可以直接用Youtube、Vimeo崁入影音。如何拍摄影片与剪辑？如何在影片片中加入动画？就又是另一个专业领域了，有机会再写关于影音拍摄的技巧文章，善用影片是网站设计基本原则之一。