1网页排版设计要点

字体的选择，字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。下面介绍网页排版设计要点，希望可以帮助到大家。

1.文字

虽然有时候可能一个页面的文字没有几个，但你可千万别小瞧文字的作用。字体的选择，字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。在同一个页面有限的文字区域内你所用到的字体样式绝对不止一种，甚至会有三四种，这是为了打破单一字体给用户带来的单调感。字体的搭配是将两种或更多字体通过合理的排版达到最佳效果的过程。对于很多初学者来说，他们觉得选择只用选择漂亮字体就够了，事实上，选择漂亮的字体并不难，如何让它们完美地搭配在一起，相得益彰，这才是应该好好下功夫的地方。

2.图片

图片可以说是一个网站的核心了，许多设计师都会把大量的精力放在图片设计上，因为很多用户在浏览网页的时候停留的时间不会太久，更不会花太多时间阅读你的内容。这个时候，一张好看的图片就能够快速有效地抓住用户的眼球。大家所熟知的苹果公司官网大部分都是这样的套路，直接将产品的图片呈现在大家面前，没有过多的赘述，反而会让用户觉得简洁明了。

3.交互

交互设计在网页设计中有着相当好的势头，那么在设计交互的时候，必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上，要考虑的情况也就多了许多。在做交互设计之前，你必须站在用户的角度考虑，菜单导航应该在哪个地方最清晰可见?组件应该通过什么样的方式展现用户才会觉得方便?组件和组件之间要怎样排布才会不影响用户的视觉效果?这就要求网页设计师有一个流畅的原型设计过程，通过借助一些原型设计工具(Axure，Mockplus, Justinmind等)来设计出合理、带来良好用户体验的交互设计。

4.视频和动画

如果一个网页只有文字和图片这样静态的元素，难免少了一些生气。现如今，视频和动画的制作成本很低，网络传播性强，与社交媒体网站的兼容性好，甚至在一定程度上，视频和动画传播的有效信息比文本还要多。于是，在网页设计排版中，视频和动画也会被设计师们加入其中。但要注意的是，视频或者和动画设计在同一个版面上不能出现太多，一到两处就可以，否则会让用户感到眼花缭乱，甚至它们会喧宾夺主，导致顾客找不到你产品的重点。

---

2网页设计的版面配置重点

在确认过网站的架构及主要视觉风格之后，接下来就是要开始思考网页设计的版面配置。网页设计的版面配置 (也可以说版型规划) 有几项重点如下：

1. 运用视觉，强调重点

每一个网站，最重要的都是首页;每一个首页，最重要的就是最上方的部分，我们称之为"Header" ，因为这个地方是每一位浏览者打开网页后，第一眼所看到的画面，所以它的设计及规划自然是整个网站的首要重点。

Header 中通常会有大篇幅的横幅，有的是图片，有的是动画，我们称之为 "Banner" ，也就是俗称的『网站主视觉』。随着HTML5 及 CSS3 的日益普及，传统的 Flash 动画已经渐渐被取代，愈来愈多的网站使用大篇幅精致图片来强调企业或品牌的重点。因为图片并不像 Flash 动画那样需要较长的等待读取时间。例如 Apple 的首页，一打开就立刻看到非常大面积的横幅，图片宽度达到 980px ，让浏览者一看就知道这是目前 Apple 正在主打的热门商品。

所以，把整个企业或品牌的重点，运用大篇幅的精美图片呈现在 Header 或 Banner 中，就是网页设计版型配置的第一个重点。

2. 掌握架构，落实配置

每个网站都会有不同的需求，有些公司需要线上购物来贩售商品，有些公司则需要电子相簿来呈现大量的商品照片，这就是为什么在网站开始设计之前，都要先做好网站架构规划。

因此，在开始进行版面配置之前，设计师一定要全盘掌握网站的基本架构，了解这个网站会有哪些功能项目，如此一来，才能知道主选单 (Menu) 该放哪些项目?网页主体 (Content) 该有左栏 (Left) 还是右栏 (Right) ?网页底部 (Footer) 要不要有版权宣告或联络资讯?最新消息要显示 5 则还是 10 则?首页要有主打商品还是人气商品?要放几笔?广告连结要放在左边还是下面?要放几则广告?

掌握这些版面配置的重点后，设计师可以先在草稿上勾勒出版型的初稿，以方便接下来的其他版型设计处理。

3. 统一色彩，营造整体

一家公司的形象，最重要的就是 企业识别系统 (CIS) ，一个网站也是，最重要的就是色彩是否达到协调性与一致性。

选择色彩，首要考量当然就是公司或品牌的主要颜色，例如 Facebook 的蓝色，法拉利的红色。除了主色系之外，也要谨慎选择配色，决定色彩之后，不论浏览者切换到哪一个页面，整个网站的风格都具有一致性，如此一来，网站除了能清楚的表达企业或品牌的精神之外，也能展现其独特性，提高企业的识别度。

---

3网页排版设计要点

4. 主次分明，简洁有力

同样是标题，重要性不同，文字大小就必须不同;同样是图片，重要性不同，图片尺寸也就不同。

例如本周主打商品，就要用比较多的篇幅来介绍，文字大一些，图片更精??美一些，其他的次要商品，就使用较小的文字及图片，干净整齐的排列即可。较重要的讯息，除了文字图片大小有差异之外，也可以使用颜色来区别，例如在十笔文章标题中，可以把较重要的标题用红色来表示，并且放在第一笔。除此之外，所有的文字及图片，都要有适当的间距及留白，才能使画面阅读起来轻松不费力。

把最重要的 (也是您最优先想让客户知道的) 讯息凸显出来，主次分明，排版整齐，就能达到成功的网页设计版型规划。

5. 善用图片，吸引目光

一般人阅读网页的习惯，通常是由上到下，由左到右，但是当遇到图片时，就会呈现跳跃式的阅读，也就是说，人们会先看图片，看到有兴趣的，才会继续看文字。所以，适当的在必要的地方放置图片，才能更吸引住阅读者的目光。

一张网页中，如果都是文字，那阅读起来肯定枯燥无味，但如果都是图片，那内容又太过空洞，因此在产品列表中，有至少一张的图片，搭配产品简介文字，让阅读者可以迅速的浏览图片，看到有兴趣的产品时，就能再看看它的文字介绍，进而点进去查看产品的详细内容。

因此，一个成功的网页设计版型规划，就是能够达到图文并茂、相互呼应的境界。

网页UI设计师要了解的WEB排版技巧

1、让页面文字尽量统一

在网页设计过程中个，首先文字部分尽量减少使用过多字体，重点部分可以标出或者展现出来，其他尽量统一。对弈文字的字体、颜色、大小、间距、行宽等要统一。重点部分可以做适当修改但是不建议太多，这样让页面看着更整洁。

2、突出焦点

页面中有重点部分，让重点部分突出。非焦点部分可以做成统一样式或者统一字体，这块和上面说过的重点文字可以适当标出，其他内容统一类似。但是注意一点焦点不是弹出的对话框或广告，是网页的重点内容。

3、结合内容设计

网页UI设计过程中一定要结合文章内容，让网页要展示的内容和网页设计风格相符合。要处理好文字和图像的关系让读者下意识地将图片和文字连接起来。例如选择一种与图片相匹配的字体，务必要保证这种字体与图片看起来相互融合而不是各自独立。

4、首屏突出重点

用户在打开网页后先让用户了解这是什么或者作出吸引内容，不要看了不清楚网页做的是什么。首屏相当于封面的作用，首屏的设计往往决定了用户是否需要、是否继续浏览。所以设计过程中要注意首屏的展示内容。

5、利用好对比

对比可以是颜色对比，可以是层次对比，可以是内容对比。对比可以让页面更突出重点，例如产品功能类对比、页面颜色差异对比等等。

4页面设计中的排版原则

四大原则：亲密性、对齐、重复、对比

设计页面最基本的就是排版布局了，如果你觉得自己设计的页面总是哪里不对劲，为什么别人的页面看起来那么舒服，也许这篇文章能解答你部分的疑惑。

UI设计中，除了我们强调的配色方案，字体，UI元素之外，还有一点是很重要的，那就是-设计布局的四大原则。(对齐，对比，亲密性，重复)

一、对齐

对齐(Alignment)：任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

二、对比

对比(Contrast)：对比的基本思想是，要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常食最重要的一个因素，正是它能使读者首先看这个页面。

三、亲密性

亲密性(Proximity):彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

四、重复

重复(Repetition):让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。