网页设计基础教程适时的留白设计让浏览者得以喘息、眼睛放松、专注

善用留白的方法

于《留白的设计哲学》一书写到，好设计的90%取决于「留白」。留白不是真的留下空白一片，留白是指留下空间，不要把每个位置布满资讯，让主题的图文可以更注重、更易于阅读，很多网站设计师发现场景有空位就想塞满资讯，不但能够展现细腻更让阅读造成障碍，留白应用设计的地方比较多，包含：图文间距、表格、行距、字距、图片配置、区块间…，适时的留白设计让浏览者得以喘息、眼睛放松、更致力，让主题可以聚焦。留白应该空下多少？怎么配置留白空间？是属较高难度的设计方法，即使很难也不要怕留白，勇于留白才能设计更具水平的网站。

配色是网站的第一印象

为什么台湾商店招牌凌乱无章，而中国、欧美的商店招牌就是有一种美感呢？问题之一就是配色，杂乱无逻辑的招牌配色就是扼杀设计的第一个杀手。网站也一样，配色是网站第一眼感受的东西，配色不协调马上造成违和感。网站配色通常会延续企业识别(CI)的配色策略，如果没有识别设计，就很应该网页设计师的色调辅助，色彩学是设计师需要养成的素养网页设计基础教程，模仿配色是能够做出精巧配色的，色彩不是唯有版面、字体、表格、线条…，还有图片、插图、影片的选取也有搭配要考量，颜色影响网站气氛甚巨，能掌握配色与用图的设计师就早已成功一半，如果对配色不擅长，建立多运用搭配工具或是色票去练习配色。

维持一致的网站设计风格

网站设置了主题、风格、内容顺序、页首、页尾期间，后面的设计需要采用这种定义，包含颜色、形状、质感、图片…等素材都需要保持一致性，让每个设计页都像是一家人，这跟企业识别系统(CIS)的逻辑是一样的，需要有平台的展现整体感，整体感的并不是要你把相同的东西全部放到一起，错误方式：设计家居网站，整个网站放满柜子照片，看到都疲乏了，这之后是合适放上几张有趣的插画，放上几张优惠小图，文章宣传图文，就能缓和类似内容增添的烦腻感。

不要小看网站的字体选择

网站字体用得好不好将会影响网站的「质感」，强调重点与易读性的网站，要防止使用有边线、阴影、装饰、逗趣、花俏、可爱、过度装饰的字体，如果不是直接跟照片合成的字体，要非常留意CSS字体的设置排序，英文字体要放上面中文字体放下面，因为日文通常已经内含英文字体。繁体中文网页常用的是谷歌正黑体，简体网站则常用微软雅黑体。为了让网站速度与效能最佳化，还是会建议使用网站内建字体，虽然不同的作业平台与浏览器会有不一样的展现，无法统一体验，但是即使擅用字体顺序、文字宽度与留白，一样可以做到网站所必须的格调。最后，网站字体不要不断换来换去，这会让阅读整体感变得很差，让字体有整体感也是很重要的事情，善用字体差异也可以让当时应该编排的区块不必须多余的设计能够看出区域。

插图让网站视觉进化

有之后文字难以准确表达的之后，需要将资讯视觉化，这之后可以设计插图将资讯图像化，好的插图让网站更有看头。文章句子间插入图片或图表，可以减少阅读者的想象与理解，也会让文章更可爱有趣，但千万不要放一堆不知所云的图片或插图，使用颇具逻辑的素材是设计的大忌。至于是放图片非常好而是放插画呢？要视网站内容而定。有之后也可以用手绘图营造网站氛围，使用的相片、图片、插画的目的都是为了让网页更易于阅读与理解。

拍摄网站的重要图片

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

将影片应用在网站上

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

网站设计的变化在细节

网站设计不仅上述提及的基本设计方法以外，再来就是非常乏味的设计细节介绍，要从普通设计师到高级设计师，你需要注重细节，有个日系汽车广告词「专注完美，近乎苛求」网页设计工作到了一个程度，设计细节好坏就是跟对方最大的变化。

专属的设计风格

专业的网站建设公司都会定位设计样式，选用的设计师也会根据这个方向去执行设计，像APPLE商品都有属于自己的设计样式，简单、易懂、好用、顺畅、简单搭配，商品相互之间都能找到一同的特点，网站也一样，无论是要打造什么氛围？设计什么素材？用哪个照片？开什么版型？还会有一个基本方法是不会颠覆的，而这个设计样式的定位将是影响整个网站的步入，所以选网站设计公司的之后必定要先看设计公司的设计样式，作品都不偏爱真的不要勉强设计委托，彼此都痛苦。

用RWD设计网站

平面设计师跨行网站设计常会遭遇问题，原因就是平面设计不应该按照RWD逻辑进行设计，但是网站设计需要根据RWD做各式排列组合，才可以面对电脑、平板、桌机时可以变换出绝佳的场景展现，RWD观念越好就能在设计细节上处理得更加强，就不会设计出照片不清楚要配哪一段文字错误编排。

空白的实际应用

后面有看到要留白，那留白实际应用是哪个呢？譬如：企业商标(LOGO)的背景与一定范围区域都是留白的，这是在保护LOGO的展现。文字句子之间会过于留几行空白列，制造一个无形的段落界线。还有购物网站的商品通常会去背景只留下商品以展现商品。以上三个是留白的常用案例，当然也有众多空白的意义，但几乎都不离这三个方法：创造空间感、舒适易读、提高关注力。

文字编排很重要

网站不是图就是文，图片就是一张图，但文字没这么简单，文字必须编排，需要留意的事项：文字字距、行距、字体大小、文字字数、标题样式、靠左靠右靠中、标点符号、换行字数、文字句子留白、编排一致性…，光是文字编排得好，就会有好的设计展现，文字多的网站更需要加强文字编排，可以多看一些有做文字编辑的网站，像是天下月刊、康健杂志、商业月刊…，这些网站针对文字编排都具有标准化与整体感，非常值得参考。文字编排很重要，举一个文字阅读不友善的事例，很多网站文章每一行的字数都很宽，中文字数都达到50个字以上，字数超过人类的可视角，看完一行要换到下一行会对不准，这就是符合人类阅读的设计，控制单行在45～55个英文换行是较容易阅读的换行字数。文章的行距太挤，会无法阅读，最好的行距是字高的30%~50%之间。字大小的使用也不是越大越好，字过大有粗糙感，文青风网站很爱用小字表现细腻，但也苦了老花眼的父母，文字大小必须要根据网站特性适时的调整通用的字体，像是康健网站字体有过于放大，因为网站有更多的中老年浏览者。

内容为主才有好设计

网站设计的意义是为了什么？为了展现动画？为了设计美图？为了作为网络艺术品？难道都不是，网站设计就是为了要将「有用的资讯」友善的展现在网路上，透过设计让网站更易于的被接受与喜爱，提高网站的公布效率，而这种逻辑恰巧跟搜索引擎的排名逻辑一致，明确的主题、良好的使用感受设计(UX)、口语化易读的文字、清楚明了的表格、符合主题的影片、良好的SEO架构、好用的内容管理平台(CMS)，以上都需要靠设计来达成，网站设计是科技融合的完美展现，是认真的功力而不是花拳绣腿。如果网站的本质是内容，那需要要仔细的反思网站可以帮助他们哪些？它的受众对象是谁？应当准备哪些资料来满足浏览者？回到内容与使用者需求期间，透过设计来缓解呈现的难题就不再是一个无法理解的事情。

结论

为什么这个设计可以？这个设计不行？绝对不是单凭感觉与主观做评价，对于专业的网站建设公司来说，绝对可以准确列出设计不妥的原因，设计似乎没有这样简单，但即使依照基本设计方法设计网站，网站绝对不会太差，本文提及的项目都是「设计的基本功」，如果这种你明白，恭喜你即便继续尽力绝对可以作为独当一面的设计师，如果你还不是很明白那些细节，可以试着感受一下很多基本方法，希望对你的网页设计路上有一些帮助。