网站设计基本原则（网站设计的基本内容）

如何设计一个好网站？遵守设计原则很重要

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

网页设计前的准备工作

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

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

如何定义网站目标？

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

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

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

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

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

网站基本设计原则

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

传达单一且明确的主题

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

一开始就设定网站氛围

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

精心编排网站内容顺序

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

善用留白的技巧

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

配色是网站的第一印象

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

维持一致的网站设计风格

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

不要小看网站的字体选择

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

插图让网站视觉进化

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

拍摄网站的重要照片

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

将影片应用在网站上

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

网站设计的差异在细节

网站设计除了上述提到的基本设计原则以外，再来就是比较繁琐的设计细节介绍，要从普通设计师到高级设计师，你必须重视细节，有个日系汽车广告词「专注完美，近乎苛求」网页设计工作到了一个程度，设计细节好坏就是跟别人最大的差异。

专属的设计风格

专业的网站建设公司都会定位设计风格，选用的设计师也会依照这个方向去执行设计，像APPLE商品都有属于自己的设计风格，简单、易懂、好用、顺畅、简单配色，商品彼此之间都能找到共同的特质，网站也一样，无论是要营造什么氛围？设计什么素材？用什么照片？开什么版型？都会有一个基本原则是不会改变的，而这个设计风格的定位将是影响整个网站的走向，所以选网站设计公司的时候一定要先看设计公司的设计风格，作品都不喜欢真的不要勉强设计委托，彼此都痛苦。

用RWD设计网站

平面设计师跨行网站设计常会遇到问题，原因就是平面设计不需要依照RWD逻辑进行设计，但是网站设计必须依照RWD做各种排列组合，才可以面对手机、平板、桌机时可以变换出最佳的画面呈现，RWD观念越好就能在设计细节上处理得更完善，就不会设计出图片不知道要配哪一段文字错误编排。

空白的实际应用

前面有提到要留白，那留白实际应用是什么呢？例如：企业商标(LOGO)的背景与一定范围区域都是留白的，这是在保护LOGO的呈现。文字段落之间会刻意留几行空白列，制造一个无形的段落界线。还有购物网站的商品常常会去背景只留下商品以突显商品。以上三个是留白的常见案例，当然还有很多空白的意义，但几乎都不离这三个原则：创造空间感、舒适易读、提高关注力。

文字编排很重要

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

内容为主才有好设计

网站设计的意义是为了什么？为了呈现动画？为了设计美图？为了成为网路艺术品？其实都不是，网站设计就是为了要将「有用的资讯」友善的呈现在网路上，透过设计让网站更容易的被接受与喜爱，提高网站的曝光效率，而这些逻辑恰巧跟搜索引擎的排名逻辑一致，明确的主题、良好的使用体验设计(UX)、口语化易读的文字、清楚明了的表格、符合主题的影片、良好的SEO架构、好用的内容管理系统(CMS)，以上都必须靠设计来达成，网站设计是技术整合的完美呈现，是扎实的内功而不是花拳绣腿。如果网站的本质是内容，那应该要认真的思考网站可以帮助人们什么？它的受众对象是谁？应该准备什么资料来满足浏览者？回到内容与使用者需求之后，透过设计来解决呈现的问题就不再是一个难以理解的事情。

结论

为什么这个设计可以？这个设计不行？绝对不是单凭感觉与主观做评判，对于专业的网站建设公司来说，绝对可以具体列出设计不妥的理由，设计当然没有这么简单，但只要依循基本设计原则设计网站，网站绝对不会太差，本文提到的项目都是「设计的基本功」，如果这些你知道，恭喜你只要继续努力绝对可以成为独当一面的设计师，如果你还不是很清楚这些细节，可以试着体会一下这些基本原则，希望对你的网页设计路上有一些帮助。

优秀网站设计的 8 大基本原则

任何网站的成功完全取决于其网页设计的方式。设计师在开发过程中是否尽了最大的努力。包含可用性和实用性的精心设计的网站决定了成功，而不是视觉设计。由于你的网站是你业务的代表，大多数潜在客户会在了解你时访问它，因此谨慎设计你的网站是不可避免的。在任何方面缺乏都有可能最终会破坏你对客户的第一印象。

网页设计对转化的影响比你想象的更重要。事实上，网站设计并不一定意味着它的外观和感觉，而是它的工作方式。即使是一个外观简单、可用性卓越且结构良好的网站，通常在搜索引擎上的表现也令人惊叹。此类网站的用户浏览量也高于用户体验差的网站，性能完全取决于网站的有效性。

那么，如何设计一个好的网站呢？

优秀的网站设计需要在不同领域具有专业知识的广泛专业人士。当需要做出关键决定时，他们需要集体努力。在本文中，我将概述一个优秀网站设计的 8 个基本原则，在开发网站时我们必须考虑这些原则。这些设计原则肯定会帮助网页设计师开发出令人惊叹的设计并提高网站的可用性。

以下是 8 大设计原则的列表，它们将使你的网站美观、用户友好、有效且引人入胜：

1. 简单就是最好的

过度设计的网站可能无法正常工作。在页面上放置太多元素可能会导致访问者分散你网站的主要目的。简单性始终适用于有效的网页设计。你的网站干净清新的设计不仅使网站具有吸引力，而且还可以帮助用户无缝地从一个页面导航到另一个页面。加载具有不符合目的的设计功能的网站可能会令人困惑。使你的设计尽可能简单，以便访问者可以感觉到它易于使用并且可以轻松找到自己的方式。

2. 一致性

网站设计的一致性很重要。将注意力集中在每个页面中匹配的设计元素上。可以理解为，你的字体、大小、标题、子标题和按钮样式在整个网站上必须相同。提前计划好一切。为你的文本、按钮等确定字体和正确的颜色，并在整个开发过程中坚持使用它们。CSS（层叠样式表）将派上用场，以保留有关设计样式和元素的完整信息。

3. 排版和可读性

无论你的设计有多好，文本仍然会统治网站，因为它为用户提供所需的信息。由于搜索引擎爬虫非常熟悉这些数据，因此它成为 SEO 活动不可或缺的一部分。你应该保持你的排版在视觉上吸引访问者并且易于阅读，以及关键字、元数据和其他 SEO 敏感元素的巧妙使用。

考虑使用更易于阅读的字体。现代无衬线字体如 Arial、Helvetica 等可用于正文。为每个设计元素（如标题、正文、按钮等）正确组合字体。

4.响应式网页设计

考虑到智能手机、平板电脑的使用量不断增长，网页设计必须对各种屏幕都有效。如果你的网站设计不支持所有屏幕尺寸，那么你很可能会输掉与竞争对手的战斗。有许多网页设计工作室或服务点，你可以在其中将你的桌面设计转变为适用于所有屏幕尺寸的响应式和自适应设计。

5. 调色板和图像

完美的颜色组合会吸引用户，而糟糕的组合则会导致分心。这需要你为你的网站选择一个完美的调色板，它可以营造出令人愉悦的氛围，给访问者留下良好的影响。通过选择互补的调色板来增强用户体验，从而为你的网站设计提供平衡的外观。请记住使用空格，因为它们可以避免你的网站出现视觉混乱和混乱。另外，避免使用过多的颜色。整个网站的 3 或 4 种色调足以提供吸引人、清晰且简约的设计。图像也是如此。不要使用多个充满活力的图像。

6. 轻松加载

没有人喜欢加载时间过长的网站。因此，通过优化图像大小并将代码组合到一个主要 CSS 或 JavaScript 文件中来处理它，因为它减少了 HTTP 请求。此外，压缩 HTML、JavaScript 和 CSS 以提高加载速度。

7. 轻松导航

研究表明，访问者在易于导航的网站上停留的时间更长。为了有效导航，你可以考虑创建逻辑页面层次结构、使用面包屑并设计可点击按钮。你应该遵循“三击规则”，以便访问者可以在三击内获得所需的信息。

8. 沟通

访问者的最终目的是获取信息，如果你的网站能够有效地与访问者交流，他们很可能会在你的网站上花费更多时间。可以与访问者建立轻松沟通的技巧是——通过充分利用标题和副标题以及使用要点来组织信息，而不是长篇大论的句子。

结论

保持上述良好网站设计的原则，你可以轻松开发一个美观且实用的网站。只有干净、人性化的设计，你才能获得成功。

转载请注明来自专注SEO技术,教程,推广 - 8848SEO，本文标题：《网站设计基本原则（网站设计的基本内容）》

标签：网站设计