页面原型设计

因为现在的大型网站，尤其是门户网站，它们的信息量非常的庞大，通过首页3次点击都能到达所有的内容已经完全无法实现。一定的信息量，架构的层级和架构宽度是相互对立的，如果层级少则要求架构宽度增加，反之毅然。架构可以给信息进行分类、组织，让用户更清晰地找到自己要找的内容，但是分类过多或是层级过深会增加用户的学习成本。在信息量大的时候一定要综合考虑架构的层级和宽度平衡

2.2.2 信息页面

页面是承载信息的载体。

2.2.2.1 *用户视觉习惯

1、顺应用户基本的阅读习惯：从左到右、从上到下

2、F型布局

. 尼尔森眼动发现，大多数用户浏览页面时的视觉热点是”F”布局

他们记录了232位用户浏览上千个网页的方式，发现对于不同的站点和任务，用户的主要阅读行为是相当一致的。这种F型的阅读模式有三个组成部分：

首先，用户横向运动阅读，通常是网页内容区域的上半部分；

接着，用户视线下移一点，开始第二次横向阅读，通常这一次涵盖的区域会比前一次短；

最后，用户会纵向滴浏览网页内容的左边部分

对产品设计的启发:

. 用户不会从头到尾看完页面

. 首页首屏的前面位置应该传达网站的重要的信息（同理其他页面的头两段应该传达重要的信息，尤其是第一段）

. 用户从上到下浏览左侧的信息时，他们会注意标题、段落和要点信息，这些区块的头两个词要包含重要信息，因为用户可能很少看第三个词。

3、区块

人们天然就有将信息分类的认知需求。

网站信息以方块呈现的效率最高：用户可以通过区块来分辨这个区域的信息是否是自己需要的，可以迅速缩缩小范围、进行仔细寻找或是浏览下一个区块

4、水平注意力

来自Nielson的报告：

. 网络用户花69%的时间看左半部分，花30%的时间看右半部分，看左半部分的时间大概是右半部分时间的两倍。剩下的时间花在需要水平滚动才能看到的页面部分，因此，绝对要避免水平滚动

5、垂直注意力

来自Nielson的报告：

垂直注意力大部分集中于一眼可见的页面内容：

. 用户通常花80%的时间看页面上直接可见的内容，只花20%的时间去看需要滚动才能看到的部分

. “page fold”概念，将最有价值的信息放在首屏

在网页设计最早的年代，用户根本不会滚动页面，他根据第一眼可以可见的信息判断是去还是留，但是很快，网络用户就适应了滚动，可用性原则也随之变化，但是，通常用户还是会依据自己可见的信息判断是滚动还是离开。

. 不要设计太长的页面，用户的注意范围是有限的。用户喜欢那些他们能迅速找到信息的网站，减少需要输入字数，减少滚动

. 但是，滚动优于翻页，如果长篇幅的文字，还是设计成一个滚动页面更合适些

. 首页的内容仍然很重要，因为用户依据在首页页面上看到的信息来判断页面下滚的信息是否有价值

. 倒数第一行信息获得的注意力优于倒数第二行信息，近因效应

2.2.2.2 *页面宽度

最新显示器分辨率比率调查结果：

目前主流分辨率 1366*768 在此状态下默认使用960的页面宽度，与腾讯网首页统一尺寸。

特殊情况：

1. 信息量或是图片量过大的事情，可以考虑加宽承载，给出来年改革尺寸

985（paipai，Qbar）

1175(Qqshow 游戏产品等)

2. 搜索类信息页面，采用自适应屏幕方式（比如soso 搜索产品）

不同浏览器，不同分辨率下网页第一屏最大可视区域：

说明：

比如1024*768下IE的可视面积是（1024-21）*（768-148）

1336*768在各个类浏览器

2.2.2.3 *一致性

一致性的意义：

良好的一致性，可以减少用户学习成本，可以更快培养用户习惯，也可体现产品设计的严谨。如果有不同，应作相应的区别处理，特别是视觉表现上要予以区分。

什么是一致性？

在相似的情景下，应在几个方面保持一致性：视觉表现、交互行为、操作结果。

即同一元素在不同页面应尽量是一样的（换句话说用户在不同页面看到都知道这个元素代表同一种含义），如果因为其他因素导致很难一样，也应该最大程度保持它们的相似度。同时也要求同一元素应该是代表一种或是一类含义，不可随意变更元素用途。

相同属性的元素保持统一，并且它们在不同页面都保持统一。

1. 标识

同一种标识在不同页面必须保持完全一致（但尺寸可以放大或是缩小）

2. 按钮

到达相同页面或是同一状态的按钮文字完全一样，如果因为视觉层次需要，形式可以不一样。

一个平台上的按钮依据重要程度，可以分出几个层级来，同一层级的按钮尺寸、形状一样。

4. 文字

同一平台上的同一层级的信息的字体应尽量保持一致，如标题的字体大小、显示字数的长短都一定的规范，最好不要超过3种规格。

5. 图片

同一类型的图片在不同的位置应保持长宽比率的一致，这样可以保持图片的美观性。图片的上的alt标签的格式一致，来源一致。

6.提示信息

提示信息在摆放的大体方位（如：都放在输入框的右侧、或是下方等）；信息提示的形式：如：主体形式都是主题加关键字，以及提示信息的字体等都应该保持一致。

2.2.2.4 *简洁性

少即是多，尽可能精简界面上的元素。当设计出原型，先将元素减半，然后再看能否再简化。保证主要任务流程顺利完成，消减其余不相关元素的干扰。

简洁体现在四个方面：减轻视觉干扰、精简文字表述、简化操作步骤。

2.2.2.5 *清晰

2.2.2.6 *当前状态

2.2.2.7 导航

1．字体一般用黑体或微软雅黑。要斟酌全体用户不同情形都适应的字体，而不是只雅观。
2．对于主导航，要设置a标签，并且不同的属性要有不同的值，这样很明白能否点击。
3．从导航都必须是有效链接，链接后的页面一定要有基本的功能。主导航一定不能有生链接（生链接指失效的链接）
4．主导不要用JS链接，因为搜索引擎是不读取的。
5．有些网站从用户体验角度考虑，用图片做导航链接，这样最好在图片的下方设放上文字链接，同时在图片上加上正文。否则搜索引擎无法抓取。

2.2.2.8 平面版式

版式的基本类型
　网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。

1.骨骼型
　　网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。

优点：理性、条理、规范

2.满版型
　　页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。

优点：舒展、大方。

缺点：网速加载会比较的慢。

网页例子：http://www.thepixel.com/blog/

3.分割型
　　把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果

优点：精致、简洁、明了

网页实例：http://stripes-design.pl/

4.中轴型
　　沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

优点：稳定、平静、含蓄

网站实例：http://2d-arts.com/

5.曲线型
　　图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。

优点：平滑、柔和

网页实例：http://www.novita.co.kr/

6、倾斜型

特点：页面主题形象或是多幅图片，文本内容倾斜编排，形成不稳定感或是强烈的动感，引人注目。

优点：视觉冲击力强、个性突出

网页实例：http://idea.lenovo.com.cn/y460/

7、对称型

特点：对称型的页面给人以稳定、严谨、理性、庄重的感觉。

对称分为绝对对称和相对对称，一般采用相对对称，可以避免呆板。

优点：稳定、严谨、理性、庄重

网站实例：http://www.cwnj.cn/

8、焦点型：

特点：焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。

焦点型又分为三种类型：

①中心以对比强烈的图片或是文字置于页面的中心。

②向心视觉元素引导浏览者向页面中心聚拢，形成一个向心的版式。

③离心视觉元素引导浏览者视线向外辐射，形成一个离心的网页版式。

网站实例：http://www.floridaflourish.com/

9、三角形

特点：网页个视觉元素呈三角形，正三角最具稳定性，倒三角则产生动感，侧三角构成一种均衡的版式，既安定又具有动感。

优点：稳定而不是动感

网站实例：

10、自由型

特点：自由型的页面具有轻松活泼、轻快的风格。

优点：自由、舒展

网站实例：http://www.ktgardens.cz/

2.2.2.9 栏目布局

. 人们天然就有将信息分类的认知需求

. 网页设计中的“方块“

. 网站信息以方块呈现的效率最高，用户可以通过区块来分辨这个区域的信息是否是自己需要的，这样可以迅速缩小范围、进行细致寻找或是浏览下一个区域。

用户可以分辨出明显的4大区域，每个区域里又有小的区块

划分版式区块的原则：

2.2.2.10 栏目

栏目的主要作用一般分两类：1.推荐可见的内容或是功能；2.通过推荐可见的信息，引导用户点击更多>>浏览与推荐内容相关的信息。通常一个栏目的推荐应是属于某一频道或是某一列表的内容，因此呈现在栏目的信息最好是最新、最吸引用户的内容。

2.2.2.11 分页

. 长文章分页呈现吗？一般来说不要

简单地将一篇长文章分成1、2、3……页并不好，如果仅仅通过“继续”或“下一页”那么还不如用一页显示，用滚动来代替翻页。

. 向导式的交互除外，比如电子商务的支付环节，分页是最好的呈现方式，因为每个步骤一个工作流程，必须完成上一步才能进入下一步

. 分页后各个页面的内容从某个角度应该是属于同一类的

2.2.2.12 搜索

1. 基础规范

.文本框

a. 搜索框文本框的长度应适中，至少应提供显示10个汉字字符的宽度；

b. 搜索框组件中适应文本框必须为单行文本框；

c. 文本框的长度不得少于130个像素高度不得低于18个像素；

. 分类选择

分类标签提示一般放在搜索框的上方，或是搜索按钮的前面

. 帮助信息

a.帮助信息一般包括三块内容：分类标签提示、提示性文字、热门关键词提示等；

b.”提示性文字”可设置灰色（#cccccc）显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等用户有真正帮助的提示。“请输入关键字”这样的提示不应出现。

c. “热门关键词提示”一般放在搜索框下面

. 搜索按钮

a. 搜索按钮一般包含图标形式或者文字形式两种

b. 使用图标形式时只能使用放大镜的图标，采用其他元素时需谨慎。

c. 搜索按钮上的文字最好为搜索，避免其他描述。

d. 图标形式（放大镜）和文字形式搭配使用，会出现如下三种情况：

2. 应用场景

强表现方式：

. 加大搜索框的显示，输入框内采用大字体（14号）

. 突出搜索button的表现形式，更直观，更有点击欲

. 位置放在页头的中间或是右侧比较好

2.2.2.13 文字

总体原则：提高文字的辨识性和页面的易读性

1. 字体大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流

. 需突出的内容部分、新闻标题、栏目标题等多使用14号字体

. 广告内容、辅助信息或是介绍性文字等多使用12号字体

. 不要用太大的字。因为版面是宝贵，有限的，粗陋的大字体不能带给访问者更多信息。

. 避免大面积使用加粗字体

. 不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。
. 原则上标题的字体较正文大，颜色也应有所区别。

2. 中、英文标准字体：

中文标准字体为宋体，英文标准字体为arial或 Verdana。不要使用超过3种以上的字体。字体太多则显得杂乱，没有主题。

3. 文字语言：

除设计修饰、或是文章标题，其他地方均采用中文。

4. 对齐和间距：

字距小于行距，行距小于段距，段距小于块距。

检查的方法：将网站的背景图片，线条全部去掉，看是否还能保持层级和区块的感

5. 文字的可读性：

呈现用户熟悉的简易、通俗的文字。避免使用生僻或是拗口的文字。

另外：可以因为用户的特殊打破这个常规，如老年用户、儿童用户、残障用户等

2.2.2.14 图片

同一类型的图片保持一样的尺寸规格，页面上图片的像素依据显示区域的大小来定，像素太低影响视觉效果，太高视觉效果也不会提高，并且影响页面的加载速度。同一图片在不同页面应保持宽/高的比例一致。

图片的信息都要带alt属性，并规定alt值，取自那里，以及他们的格式。title属性为设置该属性的元素提供建议性的信息，非必需。

Alt属性为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。包含文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。

Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。我把它理解为“尽可能短，尽需要长”。

title属性为设置该属性的元素提供建议性的信息。
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。

使用title属性提供非本质的额外信息。title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。

title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

title属性值可以比alt属性值设置的更长。不过要注意的是，有些浏览器会截断过长的文字（比如工具提示或其他）。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug，这是要注意的。

title属性的优先级高于alt。但由于错误的引导，很多设计就在img标签内只加了alt属性。

1. alt和title对访问者都很重要（alt对搜索引擎会更重要一些），所以在定义img对象时，最好将alt和title属性都写全，保证在各种浏览器中都能正常使用。
　2. 在alt和title中包含关键字，并且二者内容最好不一样。
　3. 不要在alt和title中堆积关键字，否则可能会导致搜索引擎惩罚

举例：

I、<img src="nt12343.jpg" alt="低平板半挂车仓栏半挂车轻型特种半挂车厢式半挂车"/>

II、<img src="nt12343.jpg" alt="低平板半挂车"/>

III、<img src="nt12343.jpg" alt="17.5米低平板半挂车在鹅颈和车桥处进行双层加固"/>

从这三个例子来看，III的描述是最好的。I只是单纯的堆积关键词，而且会被搜索引擎认为是blackhat作弊，II只是一个关键词，对与型号、结构等未做描述，用户体验方面来说稍差一些。通过正确的进行图片ALT代替属性的书写，可以帮助网站获得一个好的关键词排名，所以SEOer一定要重视这一点

2.2.2.15 页脚信息

·页脚信息按照从上到下的排列次序为：

1. 内部导航

2. 外部导航

3. 各类许可证、授权声明

4. 英文版权信息“copyright”

5. 中文版权信息

6. 各类网络安全/工商证明/技术支持 LOGO

·各链接间隔统一使用“|”：

·建议采用12号字，禁止使用加粗字体

2.2.3 界面内部交互

界面内部的交互：添加交互后还应保持页面的区块性，并且还要能体现主次关系。即小区块的交互不能比它所属的大区块的交互还凸显。

2.2.3.1 *用户的操作习惯

2.2.3.2 *用户行为自由可控

用户的行为是可以按照自己的意愿控制的。系统不得强迫用户执行任何操作。

1.如亮色按钮点击一定有响应，所有文字链接和图片链接都可用

2.任何一个页面都有清晰离开本页的按钮
3.不要欺骗用户，如：明明是关闭按钮，点击后却是进入另一个页面
4.用户可以取消绝大部分操作：如用户可以注销他的账号，删除上传的照片，编辑回复等等。在设计功能的时候一定要考虑用户的删除功能。

2.2.3.3 *容错性

用户在使用产品过程也是一个探索过程，产品应该允许用户犯错，而且必须给用户重新尝试的机会，让用户处于放松的心态。

设计过程中，首先要帮助用户避免出错，比如采用合适的控件（相同情况下选择控件比输入控件出错机会更小），给予输入帮助或启示。用户出错后，需要提供撤销或返回功能，使用户返回到上一步操作重新探索。出错反馈要亲和，避免责备用户或鲁莽的打断或推出产品，要礼貌的指出错误所在并提供有用的补救建议。

把用户经常容易犯的错都考虑到常规操作流程里，把可以确定的误操作，给其正确的操作结果。让用户犯错不知不觉。

2.2.3.4 *操作的灵活高效性

. 优化操作流程：依用户习惯的流程去设计操作流程，把相关的操作放在一起，不断优化操作流程，以主要任务为中心，围绕完成这个任务设置相应的操作，去掉多余或是无关操作

. 减少误操作：容易误操作的按钮尽量不要放在一起

. 批量操作：重复的操作可以考虑做成批量操作

. 键盘操作：如Enter，Esc等

. 快捷按钮：如返回顶部，返回底部，团购的浮动分类等

. 简单的判断：用户操作尽可能是不需要思考的，如果点击一个按钮需要思考3秒以上才确定则肯定不合格

. 响应时间：点击首页响应的时间不要超过5秒，其他页面的响应时间应短些。有研究表明超过10秒绝大部分大部分用户会闪人的。

2.2.3.5 *操作提示

1.预先信息提示

所有交互进行前需要提供给用户预先应该知道的提示信息。

a.表单提交类

表单提交的步骤，每个表单项的要求需要给出提示信息。（如密码要多少多少位。实时提示密码的强度等）

b.谨慎类操作

如果一个操作导致的结果会涉及到用户利益的，如扣除金币等。都需要预先特别提示。（如：扣除金币的操作需要预先提示扣除金币数目，以及当前金币是否足够。等等。）

c.差异化规则

当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示。或者给出帮助链接。

2.所有交互进行中需要提供操作相关的提示。

a.操作确认提示

一个操作涉及数据删除，等需要谨慎操作的操作需要给出删除确认提示框。

b.操作错误提示

当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入内容时提交）

3、结果信息提示

交互进行后给出结果反馈。

a.查询类结果

任何信息列表、查询结果，当对应信息无结果的时候需要给出有无结果状态提示。

b.保存类结果

一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。

c.附加类结果

一个表单是对其他数据进行附加的，如评论等。提交成功后应直接跳转到操作产生的结果展示部分。（如提交评论后应该直接展示给用户他提交的评论）

2.2.3.6 *各类弹框

弹框以不遮盖与弹框信息相关原页面用户可能需要核对信息为基本原则，弹框与原信息放在相近的位置，并保真用户可见且易操作。

确认框：常用于删除或批量操作，再次确认使用。交互规则：直接显示对话框，点击按钮后直接消失。

标题：操作+目标，例如删除日志，删除照片专辑，解除好友关系……

按钮：确定+取消把取消放在更容易点击的位置

操作框：常用于进一步操作，入口较小，但操作步骤较多时，比如加好友，设隐私等。交互规则：直接显示对话框，确认完毕后，变为通知框。

标题：操作+目标，一般为入口的名字，例如新建照片专辑，修改真心话，添加选项……

按钮：保存(行为)+取消，行为例如加为好友，添加，分享……

把保存放在更容易点击的位置

通知框：常用于确认框和操作框的确认后，通知用户结果，一般只有一个按钮。交互规则：点击按钮立即消失，如果不点击按钮，1秒后渐隐消失。

标题：沿用之前操作框的标题并加上结果

按钮：关闭把按钮放在最容易点击的位置

提示框：常用于表单提交后的验证，通知用户哪些信息不完整或者操作步骤不对。多条信息提示使用1、2、3……的序号排列

标题：提示

按钮：确定（或知道了）把按钮放在最容易点击的位置

未保存提示框：常用于表单未保存就跳转的提示，提示用户未保存信息是否需要保存。

标题：未保存+目标，例如未保存日志，未保存个人档案，未保存隐私设置……

按钮：保存+不保存+取消把保存放在最容易点击的位置

操作框快捷键：支持键盘的enter操作框上的主操作，一般为”确定”"保存”等，支持键盘的esc操作框上的取消/关闭操作，一般为”取消”"关闭XX”等。

2.2.4 页面间交互

1、用于规定页面链接是采用新窗口打开还是本窗口打开的规则。首页所有链接的页面一般情况都是新页面打开，除非首页的重要功能在其他页面都也有，这时候可以是在当前页面打开。通常情况往一下级页面都是新页面打开，往上级页面当前页面打开。

2、不常规的链接，点击时应给出提示信息。如:其他页面中的logo, 鼠标移入时应提示“返回首页”

3、在没有导航的页面需要放上面包屑导航。

4、页面链接规则：

主页链接所有的频道主页

主页一般不直接链接内容页，除非是推荐的内容

所有频道主页都链向其他频道主页

频道主页都链回网站主页

频道主页也链向属于自己本身频道的内容页

频道主页一般不链向属于其他频道的内容页

所有内容页都链向网站主页

2.2.5 任务交互（工具类）

. 完成任务的流程: 采用用户通常的思考先后顺序作为参考流程，并辅助其他要素形成最终的流程。如：现实生活中完成这个任务的先后顺序、时间顺序、从主要到次要、从简单到复杂、从必须步骤到可选步骤等。

. 任务的分解：以为相对有区隔的子任务划分步骤，并且这个步骤是在一个页面可以操作完成的。每个步骤用户完成的操作方式最好一致，这样操作更通畅，效率更高。

. 可返回操作：当前步骤应有返回上一步的按钮，上一步后可以对上一步骤重新编辑。

. 实时保存信息：当页面中用户编辑的信息量较大时，应考虑撤销和保存功能，这样用户万一操作被中断时，仍可以找回之前填写的信息。

2.3 web业务架构

业务架构 , 以客户赚钱为中心。网站的架构服务用户的同时也需要加进去商务信息，预留推商务信息的位置。每一块推的商务信息是针对哪些心理的用户群，以及哪种方式他们才更容易接受所推的商务信息。

2.4 web结构seo

web结构seo , 以服务搜索引擎为中心

2.4.1 逻辑结构

逻辑结构，网页内部链接所形成的逻辑或链接的网络图。它本身由网页链接决定，通过链接的网络图可以更直观的检查网站的链接是否合理。

2.4.1.1 逻辑结构的意义

逻辑结构有两方面的意义：一方面是用户在浏览页面时，方便用户通过链接跳转到相关页面；另一方面是方便搜索引擎的蜘蛛爬虫抓取信息。

搜索引擎抓取的是一张张的网页，链接就等同于投票，别人的网页链接了你的网页，就等于那个网页告诉搜索引擎它支持这个网页，不同的外部链接权重也是不一样的!做个简单的比喻，现在参加老毕的《星光大道》，里有很多的观众(比喻为内部链接)，还有评委老师(外部链接)，你要首先获得观众的支持，虽然每个观众投的一票只等于一份，但是观众人数很多，加起来，票数就很多了，评委老师都是权威人士，他们的投票权重自然比观众更有用，但是一共只有三位评委，他们的一票可以抵得上观众十票。所以这下大家就应该明白大型网站的内部链接为何如此重要了，一张网页如果自己站内的兄弟网页都不支持，你让搜索引擎怎么相信这是一张好网页?所以网站里一定要组织好内部链接。

2.4.1.2 逻辑结构规范

链接的构成部分：

导航结构、网站地图、相关性链接

页面链接走向：

主页链接所有的频道主页

主页一般不直接链接内容页，除非是你非常想推的几个特殊的页

所有频道主页都链向其他频道主页

频道主页都链回网站主页

频道主页也链向属于自己本身频道的内容页

频道主页一般不链向属于其他频道的内容页

所有内容页都链向网站主页

所有内容页都链向自己的上一级频道主页

内容页可以链向同一个频道的其他内容页

内容页一般不链向其他频道的内容页

内容页在某些情况下，可以用适当的关键词链向其他频道的内容页

频道形成分主题

2.4.1.3 逻辑结构两个要点

内部链接保障的两个要点：一是链接的广泛度，保障每一个页面曝光度，二是保护重点页面，网站里有一些页面需要重点保护，比如新出来的页面，一些关键字排名高，关注度高的页面。

页面的曝光度

就是蜘蛛进入你的网站可以最大面积的抓取页面，这样所有页面都不会被冷落!具体哪些做法呢：

1、网站全站导航

针对网站，尤其是门户，全站性的导航一定是必不可少的，让蜘蛛接入后，首先必须接触的就是各个栏目

2、TAG标签

这也是web2.0时代非常重要的产品之一，利用标签，把各类内容组织在一起，更有利于内容庞大的大型网站进行内容的组织和导航。

这样就把你网站里的文章全部组织在一起了。就如下图一般，文章就如同锁链组织在了一起。

4、网站地图

建议你的网站地图，让搜索引擎更快的抓取你的页面,针对 google可进行专门的google的xml格式的站点地图，然后登陆google管理员工具进行地图提交。

5、文本地图

因为网站的其他页面的URL，页面的干扰代码都比较多，所以建立了这个文本地图，让搜索引擎有一个快捷的抓取页面的入口。

要保护好重点页面

重点页面，一般来讲，一是新页面，二是有排名的，又关注度的的页面。新页面由于刚刚产生，所以我们必须确保这项新页面的曝光度，让他们尽快被搜索引擎收录，并获得排名。比如以下我们非常常见的最新文章，比如每篇文章页面的右侧都出现这个，那么代表，所有文章向搜索引擎推荐了这些新页面。一些有权重的页面，比如类似以上的最新文章，会有一个推荐文章，热门文章之类的。

对于大型网站来说，内链非常重要，组织不好内链，SEO事倍功半

2.4.1.4 逻辑结构图

网站内部链接图（1）

网站内部链接图（2）

2.4.2 物理结构

物理结构，网站的物理结构就是网站的实际目录结构，就是你网站的文件和文件夹组成的目录。

2.4.2.1 物理结构的意义

对seo来说目录的深度越浅越好，应为你的目录太深了会加大url的长度， url太长百度不喜欢。物理结构类型分为平铺型和树型两种，做seo推荐使用平铺型的物理结构。平铺型的物理结构生成的url短，但是如果网站的文件太多的话后期不好维护，只适合小型网站。树型物理结构生成的url长，后期好维护，一般大型网站都是树型结构。

目录的命名必须站在用户的角度命名的，不应该站在产品开发的角度，否则出来的url地址用户会看不懂。比如频道页 √，而我们现在许多的资讯频道目录有的写的是资讯模版 ×