网站首页的设计和布局怎么做

1让开始的页面变得有趣

2选择视差滚动

3使用游戏化

4使用动画

5保持导航的特殊性

（在出奇网络上扒的，可以说言简意赅了！）⒈主次分明，中心突出在网页界面设计中，设计者必然要考虑视觉的中心，也就是“最佳视域”，它一般位于电脑屏幕的中央，或者在屏幕中间偏上的部位。因此，一些重要的信息和一般可以安排在这个部位，在视觉中心以外的地方可以安排稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。另外，人们的阅读视线通常都是从左至右、由上往下地阅读，因此设计者也要把握好这种视觉流程。在网页中有一个7秒钟定律，即当用户进入网页之后，如果在7秒之内没有看到特定内容，那么这项内容的设计及位置安排注定会失败。由此可见，突出重点是非常重要的。

⒉明确的导航，彰显有价值的信息网站中的栏目导航对网站内容起到提纲挈领的作用，引导着用户浏览网站的相关信息。清晰、明确的导航，可以帮助网站用户更方便快捷地浏览和找到他们所需要的信息，并给以一定的网站服务和在线帮助，从而避免在浏览网页过程中找不到方向。好的导航能够让用户在打开页面的第一时间找到，或者是让用户瞬间反应出此为网站的导航。导航的用语选择应该精炼易读，色彩搭配明确，布局妥当，设计独特，使用户通过导航能够快速了解整个网站的主要内容。

⒊图文并茂，相辅相成文字和具有一种相互补充的视觉关系。文字和都是传递信息的手段，但各自的特点不同:文字所表达的信息量大，但显得沉闷枯燥，缺乏生气;所传递的信息量小，但比较生动活泼。文字与两者的比例不能过大，否则，页面就会显得单调而过于混乱。因此，最理想的效果是文字与密切配合，互为衬托，既能活跃页面，又丰富了网页内容。

⒋图形与字体、色彩等因素协调统一一般而言，在所有的网页动画设计中，图形设计部分处于主要地位。字体和色彩诸视觉因素与图形因素互相配合、互为补充地构成了一个整体性的图形设计。图形、字体与色彩诸因素彼此相互作用、相互影响，共同表达出设计的中心思想内涵。只有如此，设计所要阐发的主题思想才能更准确和集中，视觉传达才能更强烈和有力度。反之，则会给观者造成一定的视觉混乱，偏离设计主题，从而达不到应有的设计意图。

⒌注意空白的设置和运用空白在构图上有着不可忽视的作用，它是进行艺术表现的重要手段。设计中把强调、突出、给人强烈印象的构成要素周围留下空白，能扩大和提高视觉效果，同时利于视线流动，破除沉闷感。着意处理的空白，能留下艺术想象的天地，增强画面的灵性与气韵。有些网页设计者总想把界面“充分利用”，把文字、图像安排得满满的，认为设计画面留有空间是一种浪费。殊不知，这种庞杂堵塞的构图往往使人望而生畏，留不下一点印象，失去了设计的意义。一般情况下首页设计要分类清楚，简单明了，让用户更容易找到自己想要的或者让用户更容易看到你想呈现的主体部分。

头部：LOGO+导航栏（菜单栏）+登录注册（如果有这部分功能的话）+搜索栏（如果有的话）

主体：这是你主要想呈现的主体部分。一般分为产品封面及简介--->各类资讯（行业，公司等文本类信息）--->主体特色（指你网站主体的优势，特点等）

尾部主要以超链接为主：网站协议--->备案信息--->--->网站介绍--->各大类平台链接（微博，微信等）很多人常常询问某个页面该如何布局这样的问题，其实网页布局要做到两点我认为起码可以做到临阵不慌，一是对常见的布局方式心中有数，二是根据信息内容及设计素材的特点进行摆积木式的多次尝试。

当然在设计之前我们要了解客户的需求、网站的定位、受众群等很多方面的事情，也就是说需要了解策划方案。如果我们连这些问题都还不清楚的话，请先不要去想着设计，因为在不了解客户需求的情况下，盲目的去把页面设计达到某种视觉效果是很难的、也会很容易被客户推翻的，即使客户不懂，过关了，但是如果没有真正为客户带来价值，它还是失败的。

当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去（用笔和纸或者软件都可以，根据自己的习惯而定），这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。

网站结构与优化很重要，页面布局也是非常重要的，让客户第一眼看到网站的感觉是怎么样，如果第一感觉不好，相信下一次就不一定来了，所以网页的内容除了用户的需求之外，还要注重用户体验。下面的内容，就以两个方面来讲，一个是搜索引擎的识别，一个是用户体验：

工具：电脑、网站

步骤：

一、搜索引擎的识别1、网站具有清晰的导航

根据网站的导航去制定需求。一个清晰明了的用户导航可以让游客在网站中自由的访问，并且根据需要选择合适的内容，而网站导航的加入也可以加大网友的访问深度。

2、页面整洁，栏目之间合理布局

之前看过一个做服装的网站，一进入这个网站就感觉到了皇宫一样，很华丽也很唯美，但是就找不到一点文字介绍，全部都是， *** 作起来很不方便，由于偶然进入了一个较深的页面(该网站没有面包屑导航)，找不到回去的路就只好关掉了页面，无形中就会这个网站的跳出率做出了贡献。

3、设置用户评论板块，增加网站互动性

不可否认的是，现在很多网站都过于独立，和用户之间的互动性不够，其实网站互动性的上升能大大提升网站自身的可信程度，尤其对于一个新站来说，知名度不够，号召力不强，用户是无法相信的。而这时用户的参与无疑就让网站自身的可信力大大上升，而且一个网站最成功莫过于有众多用户的参与，而评论无疑会让网站生命力更强。

二、以用户体验为前提1、页面元素的丰富性。

什么叫做页面元素的丰富性呢，就是网站有、有视频、有评论、有加粗、有分段这样可以说是一个优质的页面。当然要在适当的情况下出现、视频、或者其它的元素。这样也会增加页面的价值。

2、页面的文字大小要符合一般用户的阅读习惯。

不要太大，也不要太小，一般13号的字体就可以了。字体的颜色，也要和网页的风格协调，一般都是黑色或者深灰色。文章排版要鲜明，段落得当，这样更容易让客户阅读。还有文章内尽量少用锚文本，文章内的锚文本一般都是以用户的需求性和相关性来增加锚文本。尽量不要影响用户阅读。

3、页面要合适。

过多或者过大，过多或者过大，很直接的就影响了网页的加载速度，导致用户长时间打不开网页，那就悲剧了，所以，网页的大小和尽量少用围标，如果不可避免，那就把压缩到最小再上传吧。

总结：其实网页的布局，重要的就是细心，包括各个方面都要细心对待，页面上存在的每一个东西，都要有实际意义。

一个网站的结构设计就是要讲究网站的内容划分，要清晰合理，层次分明。不仅仅是前台的栏目划分、页面的层次、链接的路径设置等，还包括了强大的后台支撑，保证前台结构布局的实现。

首先，网站结构设计的目标要清晰

1、理清楚栏目结构的脉络，如链接的结构。导航的线路、内容主题等等。

2、体现网站特征，注重特色的设计

3、方便用户使用

4、网页上的功能得以合理分配

5、可拓展性好

6、网页的关键词布局符合搜索引擎的优化喜好

那么，网站结构布局设计的时候需要注意的事项有哪些

1、用户体验和网站优化相结合

很多的企业在建设网站的时候只要求网站美观，大气，让用户赏心悦目。但是却忘了网站后期是需要做优化的。而美丽、大气的网站对于优化来说往往是不够的。因为在后期的优化中，需要涉及到网站的路径设置、网站mate标签的设置等。而且后期还可能需要网站升级、程序改版等等，这就需要在建设的前期都要考虑到的，要结合的。

2、网站地图

网站地图一般分为两种，一是直接提交给搜索引擎xml地图，另一种是提供给用户的同时也提交给搜索引擎抓取的html地图。地图的设置是方便搜索引擎去抓取网站的页面，清晰的网站结构、无论是搜索引擎还是网站访问者都有一个清晰的指明方向，协助迷失的访问者找到他们想要查看的内容页面。

3、面包屑的运用

面包屑的作用就是要让用户了解清楚，，目前是处于什么位置，以及当前页面是处于整个网站的什么位置。并且能提供返回各个层级的快速入口，方便用户 *** 作。

4、用户的浏览焦点

一般用户的浏览习惯都是从左到右，从上到下的，所以左上角的位置是离用户最近的位置，而用户的体验来说，用户浏览网站最想看到的是网站中有没有他们需要的产品和信。所以当用户进入网站看到分类，是否会有兴趣往下浏览呢？点击的按钮、顺序是否符合用户的浏览习惯？最想宣传推荐的产品和信息有没有放在离用户眼睛最近的地方呢

网站结构布局是网站设计的重要组成部分，最有效最有限度地进行资源分配和管理的布局设计，才能最有效地发挥网站的作用。

一、网站导航

客户或搜索引擎进入我们的网站时会看到网站导航，常见的网站导航有顶级主导航，左侧产品导航，底部导航等。在网站建设时这些导航设置得更加引人注目，例如突出显示一些背景和字体，这有利于引导客户浏览。页面内容要自然描述，使搜索引擎可以通过链接文本了解这些列的具体内容，不要过度堆积关键字。

倾巢网络

二、网站相关性

想象一下，假设用户通过搜索关键字找到您的网站，进入浏览状态，但找不到他们想要的内容，那么用户将非常失望并立即离开，很少有人会继续在网站上查找，因此，在网站建设时是有必要提高网站的相关性，可以从以下两点着手。

1网站标题：网站的标题是页面的焦点，搜索引擎从标题分析页面的相关性以识别页面的内容，用户浏览也是如此。

2网站产品：当您在建立网站时，产品的位置，无论您是否需要将主推产品放在首页上，只有您安排了这些产品，当客户进来时，他们才能一目了然地知道自己要找什么产品，引导客户，同样的搜索引擎是一样的。

---