资源描述
用户体验产品规范V1.0
目录
1、概述 2
1.1规范目的 2
1.2规范人群 2
1.3规范范围 2
2、web架构 2
2.1 web社会化框架 3
2.1.1 AFO方法 3
首要活动 3
识别社会化交互对象 4
Feature（功能）- 选择核心功能集。 5
2.2 web信息架构 6
2.2.1 web架构 6
2.2.2 信息页面 7
2.2.2.1 *用户视觉习惯 7
2.2.2.2 *页面宽度 10
2.2.2.3 *一致性 11
2.2.2.4 *简洁性 12
2.2.2.5 *清晰 12
2.2.2.6 *当前状态 12
2.2.2.7 导航 12
2.2.2.8 平面版式 13
2.2.2.9 栏目布局 18
2.2.2.10 栏目 18
2.2.2.11 分页 19
2.2.2.12 搜索 19
2.2.2.13 文字 20
2.2.2.14 图片 21
2.2.2.15 页脚信息 23
2.2.3 界面内部交互 24
2.2.3.1 *用户的操作习惯 24
2.2.3.2 *用户行为自由可控 24
2.2.3.3 *容错性 25
2.2.3.4 *操作的灵活高效性 25
2.2.3.5 *操作提示 26
2.2.3.6 *各类弹框 27
2.2.4 页面间交互 28
2.2.5 任务交互（工具类） 29
2.3 web业务架构 29
2.4 web结构seo 29
2.4.1 逻辑结构 30
2.4.1.1 逻辑结构的意义 30
2.4.1.2 逻辑结构规范 30
2.4.1.3 逻辑结构两个要点 31
2.4.1.4 逻辑结构图 32
2.4.2 物理结构 33
2.4.2.1 物理结构的意义 33
2.4.2.2物理结构的规范-扁平式 34
2.4.2.3 物理结构的规范-树形结构 34
1、概述
1.1规范目标
· 在产品计划时，给部门内部组员提供统一规范和指导，有利于确保产品；
· 处理企业产品可用性问题，即使操作愈加人性化，减轻用户认知负担，改善产品用户体验，提升产品市场竞争力；
· 使产品在表现层面上达成界面外观和操作行为一致。
1.2规范人群
参与产品计划产品部组员。
1.3规范范围
全部互联网产品。
2、web架构
假如把一个网站比方成一座建筑，那么这个建筑结构就是这个网站架构。建筑结构决定了大家对它第一印象，也决定了它最凸出个性。建筑结构能够从美角度、实用角度、个性角度等方面分析。
web架构关键能够从四方面分析：社会化框架、信息架构、业务架构、结构SEO。考察这四个方面全部有各自意义：网站社会化框架，以提升用户粘度为中心；信息架构，以满足用户需求为中心；业务架构，以用户盈利为中心；为web架构seo，以服务搜索引擎为中心。
其中社会化框架和信息架构二者能够相互促进；web架构seo相对独立，但它也跟信息架构页面链接有很大关系；信息架构和业务架构有时候会有冲突，这时取决于我们优先满足一般用户还是用户，或是目前产品正处于阶段决定它们优先级。
2.1 web社会化框架
什么是社会化框架？社会化设计是对支持社会交往网站或应用构思、计划和构建过程。社会化框架即是社会化网站设计时形成框架。考察网站社会化框架，关键是以提升用户粘度为中心。
2.1.1 AFO方法
Activity（活动）-专注首要活动。
Object（对象） -辨识交互对象
Feature（功效）- 选择关键功效集。
首要活动
我们首先要处理（并伴随整个设计过程）问题是——你用户要用你产品做什么？
首要活动只有一个
最能吸引人应用，就是让人出色完成某个特定活动应用
总结：
当我们在开发一个新产品时，我们要处理最关键问题不是“谁要用我产品”，而是“用户要用我产品来做什么”！
我们平台首要活动呢？
识别首要活动
用户什么行为是网站取得成功关键？
亚马逊回复是付款、淘宝呢？ 微薄
目标：用户期望达成最终目标
购置日用具 娱乐 盈利 享受美食 和家人保持联络……..
活动：实现目标一系列任务组合
往往会专注于具体任务，而忽略更宽泛活动。我们不能盯着付款这个具体操作，忽略购置这个活动
任务：具体某个功效
识别社会化交互对象
每一个活动全部和特定对象相关,确定首要活动后下一步是，用户进行这些活动时交互对象。
模拟实物：
Facebook——在哈佛大学，facebook是一个真正本子
亚马逊礼品愿望单——原型是大家用纸写下并相互分享礼品愿望单
Web应用中社交对象不一定要表现真实物品（视频、音乐、电子狗），她们有时候也是能够抽象
社交对象设计成功案例
照片 书签 博客 商品 职位 电影 视频 新鲜事 消息
演示文档…..
为社会化对象分配URL地址：
对象有了URL地址就能够被分享出去
对象有了URL地址就更轻易被查找和寻回
URL让人能够直接链接对象
搜索引擎能利用URL愈加好工作
Feature（功效）- 选择关键功效集
我们能够从首要活动及交互对象推导出关键功效集。
为此我们要处理这些问题：
1 用户会对交互对象做哪些操作？
2 有哪些功效足够关键，是web应用必需支持？
寻求动词
留心任何对象集合，它们通常会成为有价值功效。其中关键集合方法是列表
下面是搜索对象多个常见起源：
礼品愿望单 我…（照片、评论、书签）
购物车 好友…
收藏夹 项目
分享条目
AFO方法指导来搜索亚马逊提供社会化功效
商品评分 加入礼品愿望单
分享个人商品图片 新婚/新生儿礼品单
买了该产品用户还买了… 告诉好友
…
2.2 web信息架构
信息架构 ,通常认为是依据用户需求分析结果，正确定位网站目标群体，设定网站整体架构，计划、设计网站栏目及其内容，制订网站页面操作步骤及页面交互，以最大程度地符适用户需求。
2.2.1 web架构
架构层级
架构层级很大程度上决定了，用户经过首页需关键点击多少次才能够抵达自己想看内容。单纯考虑层级，层级越少越好，最好情况是层级不超出三层。假如能确保层级不超出三层，就差不多能够确保用户点击三次以内就能够看到自己想看内容。
架构宽度
用户能够见第一层架构宽度关键是导航链接数。用户短时间记忆力通常情况是7±2，所以每个层级下架构宽度全部不应该太宽，不然会考验用户记忆力。
架构平衡度
因为现在大型网站，尤其是门户网站，它们信息量很庞大，经过首页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.满版型
页面以图像充满整版。关键以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方感觉。伴随宽带普及，这种版式在网页设计中利用越来越多。
优点：舒展、大方。
缺点：网速加载会比较慢。
网页例子：
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片部分感性而具活力，文案部分则理性而平静。能够调整图片和文案所占面积，来调整对比强弱。比如：假如图片所占百分比过大，文案使用字体过于纤细，字距、行距、段落安排又很疏落，则造成视觉心理不平衡，显得生硬。倘若经过文字或图片将分割线虚化处理，就会产生自然友好效果
优点：精巧、简练、明了
网页实例：
4.中轴型
沿浏览器窗口中轴将图片或文字作水平或垂直方向排列。水平排列页面给人稳定、平静、含蓄感觉。垂直排列页面给人以舒畅感觉。
优点：稳定、平静、含蓄
网站实例：
5.曲线型
图片、文字在页面上作曲线分割或编排组成，产生韵律和节奏。
优点：平滑、柔和
网页实例：
6、倾斜型
特点：页面专题形象或是多幅图片，文本内容倾斜编排，形成不稳定感或是强烈动感，引人注目。
优点：视觉冲击力强、个性突出
网页实例：
7、对称型
特点：对称型页面给人以稳定、严谨、理性、庄重感觉。
对称分为绝对对称和相对对称，通常采取相对对称，能够避免呆板。
优点：稳定、严谨、理性、庄重
网站实例：
8、焦点型：
特点：焦点型网页版式经过对视线诱导，使页面含有强烈视觉效果。
焦点型又分为三种类型：
①中心 以对比强烈图片或是文字置于页面中心。
②向心 视觉元素引导浏览者向页面中心聚拢，形成一个向心版式。
③离心 视觉元素引导浏览者视线向外辐射，形成一个离心网页版式。
网站实例：
9、三角形
特点：网页个视觉元素呈三角形，正三角最具稳定性，倒三角则产生动感，侧三角组成一个均衡版式，既安定又含有动感。
优点：稳定而不是动感
网站实例：
10、自由型
特点：自由型页面含有轻松活泼、轻快风格。
优点：自由、舒展
网站实例：
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时代很关键产品之一，利用标签，把各类内容组织在一起，更有利于内容庞大大型网站进行内容组织和导航。
3、“上一篇，下一篇"导航
这么就把你网站里文章全部组织在一起了。就以下图通常，文章就如同锁链组织在了一起。
4、网站地图
提议你网站地图，让搜索引擎愈加快抓取你页面,针对 谷歌可进行专门谷歌xml格式站点地图，然后登陆谷歌管理职员具进行地图提交。
5、文当地图
因为网站其它页面URL，页面干扰代码全部比较多，所以建立了这个文当地图，让搜索引擎有一个快捷抓取页面入口。
要保护好关键页面
关键页面，通常来讲，一是新页面，二是有排名，又关注度页面。新页面因为刚刚产生，所以我们必需确保这项新页面曝光度，让她们立即被搜索引擎收录，并取得排名。比如以下我们很常见最新文章，比如每篇文章页面右侧全部出现这个，那么代表，全部文章向搜索引擎推荐了这些新页面。部分有权重页面，比如类似以上最新文章，会有一个推荐文章，热门文章之类。
对于大型网站来说，内链很关键，组织不好内链，SEO事倍功半
2.4.1.4 逻辑结构图
网站内部链接图（1）
网站内部链接图（2）
2.4.2 物理结构
物理结构，网站物理结构就是网站实际目录结构，就是你网站文件和文件夹组成目录。
2.4.2.1 物理结构意义
对seo来说目录深度越浅越好，应为你目录太深了会加大url长度， url太长baidu不喜爱。物理结构类型分为平铺型和树型两种，做seo推荐使用平铺型物理结构。平铺型物理结构生成url短，不过假如网站文件太多话后期不好维护，只适合小型网站。树型物理结构生成url长，后期好维护，通常大型网站全部是树型结构。
目录命名必需站在用户角度命名，不应该站在产品开发角度，不然出来url地址用户会看不懂。比如频道页 √，而我们现在很多资讯频道目录有写是资讯模版 ×
2.4.2.2物理结构规范-扁平式
扁平式（适合小型网站），也就是全部网页全部存在网站根目录下，没有任何层级关系
…….
2.4.2.3 物理结构规范-树形结构
树状结构（适合大型网站），也就是根目录下分成多个频道，或叫类别，目录等，然后在每一个频道下面再放上属于这个频道网页。不管名称是什么，同一层级目录全部是在网站中是相同等级，比如这个目录要不全放一级频道要不全放二级频道。
根目录下放频道网页
……
在频道下再放入具体内容网页:
……
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
