原型设计规范、网页规范、用户体验规范、交互规范标准

TOC\o"1-5"\h\z用户体验产品规 V1.0目录\o"CurrentDocument"、概述 3\o"CurrentDocument"规目的 3\o"CurrentDocument"规人群 3\o"CurrentDocument"规围 3\o"CurrentDocument"、web架构 3\o"CurrentDocument"web社会化框架 4\o"CurrentDocument"2.1.1AFO方法 4\o"CurrentDocument"首要活动 4\o"CurrentDocument"识别社会化交互对象 5\o"CurrentDocument"Feature（功能）-选择核心功能集。 6\o"CurrentDocument"web信息架构 7\o"CurrentDocument"web架构 7\o"CurrentDocument"信息页面 7\o"CurrentDocument"*用户视觉习惯 7\o"CurrentDocument"*页面宽度 10\o"CurrentDocument"*一致性 11\o"CurrentDocument"*简洁性 13\o"CurrentDocument"*清晰 13*当前状态 13导航 13\o"CurrentDocument"平面版式 13\o"CurrentDocument"栏目布局 18\o"CurrentDocument"栏目 19\o"CurrentDocument"分页 19\o"CurrentDocument"搜索 19\o"CurrentDocument"文字 20\o"CurrentDocument"图片 22\o"CurrentDocument"页脚信息 23\o"CurrentDocument"界面部交互 24\o"CurrentDocument"*用户的操作习惯 24\o"CurrentDocument"*用户行为自由可控 25\o"CurrentDocument"*容错性 25\o"CurrentDocument"*操作的灵活高效性 25\o"CurrentDocument"*操作提示 26\o"CurrentDocument"*各类弹框 27\o"CurrentDocument"页面间交互 28\o"CurrentDocument"任务交互（工具类） 29\o"CurrentDocument"web业务架构 29\o"CurrentDocument"web结构seo 30\o"CurrentDocument"逻辑结构 30\o"CurrentDocument"逻辑结构的意义 30\o"CurrentDocument"逻辑结构规 30\o"CurrentDocument"逻辑结构两个要点 31\o"CurrentDocument"逻辑结构图 32\o"CurrentDocument"物理结构 34\o"CurrentDocument"物理结构的意义 34\o"CurrentDocument"物理结构的规-扁平式 34\o"CurrentDocument"物理结构的规-树形Z^构 341、概述规目的在产品规划时，给部门部的成员提供统一的规和指导，有利于保证产品；解决公司产品的可用性问题，即使操作更加人性化，减轻用户认知负担，改善产品的用户体验，提升产品的市场竞争力；使产品在表现层面上达成界面外观与操作行为的一致。规人群参与产品规划的产品部成员。规围所有互联网产品2、web架构如果把一个比喻成一座建筑，那么这个建筑的结构就是这个的架构。建筑的结构决定了人们对它的第一印象，也决定了它最凸出的个性。建筑的结构可以从美的角度、实用的角度、个性的角度等方面分析。web架构主要可以从四方面分析：社会化框架、信息架构、业务架构、结构 SEQ考察这四个方面的都有各自的意义：社会化框架，以提高用户粘度为中心；信息架构，以满足用户需求为中心；业务架构，以客户赚钱为中心；为 web架*Sseo,以服务搜索引擎为中心。其中社会化框架和信息架构二者可以相互促进；web架构seo相对独立，但它也跟信息架构的页面有很大的关系；信息架构和业务架构有时候会有冲突，这时取决于我们优先满足普通用户还是客户，或是当前产品的正处在的阶段决定它们的优先级。

web社会化框架什么是社会化框架？社会化设计是对支持社会交往的或应用的构思、 规划和构建的过程。社会化框架即是社会化设计时形成的框架。 考察社会化框架，主要是以提高用户粘度为中心。AFO方法Activity（活动）-专注首要活动。Object（对象）-辨识交互对象Feature（功能）-选择核心功能集。首要活动我们首先要解决（并伴随整个设计过程）的问题是 一一你的用户要用你的产品做什么？首要活动只有一个最能吸引人的应用，就是让人出色完成某个特定活动的应用总结：当我们在开发一个新产品时，我们要解决的最重要的问题不是“谁要用我的产品”，而是“用户要用我的产品来做什么”！识别首要活动用户的什么行为是获得成功的关键?识别首要活动用户的什么行为是获得成功的关键?亚马逊回答是付款、淘宝呢？ 微薄目标：用户希望达到的最终目标购买日用品娱乐赚钱享受美食与家人保持联系活动：实现目标的一系列任务的组合往往会专注于具体的任务，而忽略更宽泛的活动。我们不能盯着付款这个具体操作，忽略购买这个活动任务：具体的某个功能识别社会化交互对象每一个活动都与特定对象相关 ,确定首要活动后的下一步是，用户进行这些活动时的交互对象。模拟实物：Facebook 在哈佛大学，facebook是一个真正的本子亚马逊的礼物愿望单 ——原型是人们用纸写下并相互分享的礼物愿望单Web应用中社交对象不一定要表现真实物品（视频、音乐、电子狗），他们有时候也是可以抽象的社交对象设计成功的案例照片书签博客商品职位电影 视频新鲜事 消息演示文档•••..为社会化对象分配 URL地址：对象有了URL地址就可以被分享出去对象有了URL地址就更容易被查找和寻回URL让人可以直接对象搜索引擎能利用URL更好工作

Feature（功能）-选择核心功能集我们可以从首要活动及交互对象推导出核心功能集。为此我们要解决这些问题：1用户会对交互对象做哪些操作？2有哪些功能足够重要，是web应用必须支持的?寻找动词名词《对象） 动词［撵作）权领 播放，停止.ifi辐.存储.上传.分享.特施.在博客中戢入文琼 阑堂.智存1日后阅•引用.情招.疗毕.评论.注稗照片 有时.叠青.加人收羸，裁理«璃.悌接,加水分享，Hit在博客中嵌入”打标签书福 加入购衿车,付款，加入礼物反望单'分享.加入骊靖儿时.婵论.打分.打标签.净协留意任何的对象集合，它们通常会成为有价值的功能。其中重要的集合方式是列表下面是搜索对象的几种常见的来源：礼物愿望单 我的…（照片、评论、书签）购物车 好友的…收藏夹 项目分享条目AFO的方法指引来搜索亚马逊提供的社会化功能商品评分 加入礼物愿望单分享个人商品图片 新婚/新生儿礼物单买了该产品的用户还买了••・买了该产品的用户还买了••・告诉朋友web信息架构信息架构,一般认为是根据 客户需求分析的结果，准确定位目标群体，设定整体架构，规划、设计栏目及其容，制定页面操作流程及页面交互，以最大限度地符合用户的需求。web架构架构的层级架构的层级很大程度上决定了，用户通过首页需要点击多少次才可以到达自己想看的容。单纯考虑层级，层级越少越好，最佳状况是层级不超过三层。如果能保证层级不超过三层，就差不多可以保证用户点击三次以就可以看到自己想看的容。架构的宽度用户可以见的第一层架构宽度主要是导航的数。用户短时间的记忆力一般情况是 7±2，因此每个层级下架构的宽度都不应该太宽，否则会考验用户的记忆力。架构的平衡度因为现在的大型，尤其是门户，它们的信息量非常的庞大，通过首页3次点击都能到达所有的容已经完全无法实现。一定的信息量，架构的层级和架构宽度是相互对立的，如果层级少则要求架构宽度增加，反之毅然。架构可以给信息进行分类、组织，让用户更清晰地找到自己要找的容，但是分类过多或是层级过深会增加用户的学习成本。在信息量大的时候一定要综合考虑架构的层级和宽度平衡信息页面页面是承载信息的载体。*用户视觉习惯1、顺应用户基本的阅读习惯：从左到右、从上到下

2、F型布局.尼尔森眼动发现，大多数用户浏览页面时的视觉热点是 “F”布局他们记录了232位用户浏览上千个网页的方式， 发现对于不同的站点和任务， 用户的主要阅读行为是相当一致的。这种F型的阅读模式有三个组成部分：首先，用户横向运动阅读，通常是网页容区域的上半部分；接着，用户视线下移一点，开始第二次横向阅读，通常这一次涵盖的区域会 比前一次短；最后，用户会纵向滴浏览网页容的左边部分对产品设计的启发.用户不会从头到尾看完页面.首页首屏的前面位置应该传达的重要的信息 （同理其他页面的头两段应该传达重要的信息,尤其是第一段）.用户从上到下浏览左侧的信息时，他们会注意标题、段落和要点信息，这些区块的头两个词要包含重要信息，因为用户可能很少看第三个词。3、区块人们天然就有将信息分类的认知需求。信息以方块呈现的效率最高：用户可以通过区块来分辨这个区域的信息是否是自己需要的,可以迅速缩缩小围、进行仔细寻找或是浏览下一个区块4、水平注意力来自Nielson的报告:网络用户花69%的时间看左半部分，花30%的时间看右半部分，看左半部分的时间大概是右半部分时间的两倍。剩下的时间花在需要水平滚动才能看到的页面部分， 因此，绝对要避免水平滚动PixelsfromtheLehEdge如版惯例格咚把号航位用放出7边,:人九建常去左边寻找选项列表把上PixelsfromtheLehEdge如版惯例格咚把号航位用放出7边,:人九建常去左边寻找选项列表把上要内存放也尚显左边稍微订馒距离的地行把最重要的内容放在页由横向"3到1/2上间的地力；国力这里是罚户收入最去挣怠力的区域把次要的内容放在彳边立子一个页面，用户箫T艮看到的总主力内容岫第一行.而不会行无士关”6航diEpv妙UQVUJsid5、垂直注意力来自Nielson的报告:

S0.3%♦ELLMcw!，+O芒3J•&Ab^etheFoldFeld19.7%PiwIcFromth*Top4I-UWR■旦二S0.3%♦ELLMcw!，+O芒3J•&Ab^etheFoldFeld19.7%PiwIcFromth*Top4I-UWR■旦二»5--■艮二■009二BrOK」x-J用户目6兆公天在员田忸的内容应像放在一眼可见的页面内善内容很多,那么将更面谀计去战衲鼓动枷言的徉式.首页内容的阶值将使用户决定是话向卜箫动:KL最正工放上希坐用户却道的信息垂直注意力大部分集中于一眼可见的页面容：.用户通常花80%的时间看页面上直接可见的容， 只花20%的时间去看需要滚动才能看到的部分."pagefold”概念，将最有价值的信息放在首屏在网页设计最早的年代，用户根本不会滚动页面，他根据第一眼可以可见的信息判断是去还是留，但是很快，网络用户就适应了滚动，可用性原则也随之变化，但是，通常用户还是会依据自己可见的信息判断是滚动还是离开。.不要设计太长的页面，用户的注意围是有限的。用户喜欢那些他们能迅速找到信息的，减少需要输入字数，减少滚动.但是，滚动优于翻页，如果长篇幅的文字，还是设计成一个滚动页面更合适些.首页的容仍然很重要，因为用户依据在首页页面上看到的信息来判断页面下滚的信息是否有价值.倒数第一行信息获得的注意力优于倒数第二行信息，近因效应*页面宽度最新显示器分辨率比率调查结果:目前主流分辨率 1366*768在此状态下,默认使用960的页面宽度，与腾讯网首页统一尺寸。特殊情况：.信息量或是图片量过大的事情，可以考虑加宽承载，给出来年改革尺寸985（paipai,Qbar）1175（Qqshow游戏产品等）.搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品）不同浏览器，不同分辨率下网页第一屏最大可视区域：靛可视区域（地Px）府幕1-HOT(001024顺138010241陈Q779(*2b43217蜘1蜥（咽r颜1-1Wf1259(+31)&那一用j7；9［凹J452⑴回I0D3(+21>侬1413>1醐(+21)S76CM?it'd1-12.0如日力41?廿星”丽㈣I2631+J7)841(+183)L网物肥外*网1361M9)B851+1391说明：比如1024*768下IE的可视面积是（1024-21）*（768-148）1336*768在各个类浏览器 *一致性一致性的意义：良好的一致性，可以减少用户学习成本，可以更快培养用户习惯，也可体现产品设计的严谨。如果有不同，应作相应的区别处理，特别是视觉表现上要予以区分什么是一致性？在相似的情景下，应在几个方面保持一致性：视觉表现、交互行为、操作结果。同一元素在不同页面应尽量是一样的（换句话说用户在不同页面看到都知道这个元素代表同一种含义），如果因为其他因素导致很难一样，也应该最大程度保持它们的相似度。同时也要求同一元素应该是代表一种或是一类含义，不可随意变更元素用途。相同属性的元素保持统一，并且它们在不同页面都保持统一。标识同一种标识在不同页面必须保持完全一致（但尺寸可以放大或是缩小）按钮到达相同页面或是同一状态的按钮文字完全一样，如果因为视觉层次需要，形式可以不一样。一个平台上的按钮依据重要程度，可以分出几个层级来，同一层级的按钮尺寸、形状一样。文字同一平台上的同一层级的信息的字体应尽量保持一致，如标题的字体大小、显示字数的长短都一定的规，最好不要超过 3种规格。图片同一类型的图片在不同的位置应保持长宽比率的一致，这样可以保持图片的美观性。图片的上的alt标签的格式一致，来源一致。提示信息提示信息在摆放的大体方位（如：都放在输入框的右侧、或是下方等）；信息提示的形式：如：主体形式都是主题加关键字，以及提示信息的字体等都应该保持一致。*简洁性少即是多，尽可能精简界面上的元素。当设计出原型，先将元素减半， 然后再看能否再简化。保证主要任务流程顺利完成，消减其余不相关元素的干扰。简洁体现在四个方面：减轻视觉干扰、精简文字表述、简化操作步骤。*清晰*当前状态导航.字体一般用黑体或微软雅黑。要斟酌全体用户不同情形都适应的字体，而不是只雅观。.对于主导航，要设置a标签，并且不同的属性要有不同的值，这样很明白能否点击。.从导航都必须是有效，后的页面一定要有基本的功能。主导航一定不能有生 （生指失效的）.主导不要用JS,因为搜索引擎是不读取的。.有些从用户体验角度考虑，用图片做导航，这样最好在图片的下方设放上文字，同时在图片上加上正文。否则搜索引擎无法抓取。平面版式版式的基本类型网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。.骨骼型网页版式的骨骼型是一种规的、 理性的分割方法，类似于报刊的版式。常见的骨骼有竖

竖向分栏为多。这向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。Ldu匚，Hoc—ServfccManaqwm^entill（；的步脾n|KoupGileeBedWebHankeB••一,Cur^uskdltMfedleirSululiuritAcccuntrn防ta«rLDmm.nncda'ji^j-oductrECT-MPfiultarrtv就ciTeateeladdIOiptegrato-rMgrLdu匚，Hoc—ServfccManaqwm^entill（；的步脾n|KoupGileeBedWebHankeB••一,Cur^uskdltMfedleirSululiuritAcccuntrn防ta«rLDmm.nncda'ji^j-oductrECT-MPfiultarrtv就ciTeateeladdIOiptegrato-rMgr-tiYueriag^geftruiken七箕plcwtad廿电vanmodernetechnologicmeteenhoogwaardilgaanbodvand4«rkstenenwodwwi"Sy«to-m□LlteeL^nceertnLeuweInternetsite】di・kirfchrs""Kat以呼台“看5/s4三5工F&wf各，vemitu^de##b4：rt«Cke«liw#Ot!ftonornifj.deitenunl•ni^f1Qp? LgVtmitvwdt VMCite*ivege;aa-Devemie-jvideEltteinlisal，e±n:ednjfip&rtaai：ingericl^..Achtsr二。二0v二。rd。or^ifsekGit&a^ech^strwksnformistieuitm*ths*r-lantBFl.穗fi：电11kHitS3hfecimbrwfRlikhX产白：rurn«crW*vetencvcrdeCrteeN>aUfflcba>q^优点：理性、条理、规.满版型页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。 视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。

优点：舒展、大方。缺点：网速加载会比较的慢。网页例子：.thepixel./blog/.分割型把整个页面分成上下或左右两部分， 分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积， 来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果优点：精致、简洁、明了网页实例：stripes-优点：精致、简洁、明了网页实例：stripes-design.pl/4.中轴型沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。水平排列的页面给人稳定、66、倾斜型s々zFocruting.s々zFocruting.helloZE回回5l*Bdhag .&JCMJnT^TtaT,kiMnn'ATjHnur..uv.■ffw-Fw4iv4»・|lAwu.EdMilAQur*.JTMOOfT'irijbuRptL£|MM涧■/“'!■■■«4B*ib*-rivijwidiawwlHr餐;科hfL*w*iQ0IS优点：稳定、平静、含蓄实例：2d-arts./5.曲线型图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。优点：平滑、柔和网页实例：.novita.co.kr/特点：页面主题形象或是多幅图片，文本容倾斜编排，形成不稳定感或是强烈的动感,引人注目。优点：视觉冲击力强、个性突出网页实例：/y460/7、对称型特点：对称型的页面给人以稳定、严谨、理性、庄重的感觉。对称分为绝对对称和相对对称，一般采用相对对称，可以避免呆板。优点：稳定、严谨、理性、庄重实例：./8、焦点型：特点：焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型又分为三种类型：①中心以对比强烈的图片或是文字置于页面的中心。②向心视觉元素引导浏览者向页面中心聚拢，形成一个向心的版式。③离心视觉元素引导浏览者视线向外辐射，形成一个离心的网页版式。实例：.floridaflourish./9、三角形特点：网页个视觉元素呈三角形，正三角最具稳定性，倒三角则产生动感，侧三角构成一种均衡的版式，既安定又具有动感。优点：稳定而不是动感实例：10、自由型特点：自由型的页面具有轻松活泼、轻快的风格。优点：自由、舒展实例：.ktgardens.cz/

栏目布局.人们天然就有将信息分类的认知需求.网页设计中的“方块“.信息以方块呈现的效率最高，用户可以通过区块来分辨这个区域的信息是否是自己需要的,这样可以迅速缩小围、进行细致寻找或是浏览下一个区域。用户可以分辨出明显的4大区域，每个区域里又有小的区块划分版式区块的原则：同类合并原则确定中心原则临近原则要点方块感越强能给用户方向感方块越少越好尽量用留白做视觉区分检查方法：将的背景图片，线条全部去掉，看是否还能保持层级和区块感0栏目栏目的主要作用一般分两类： 1.推荐可见的容或是功能； 2.通过推荐可见的信息，引导用户点击更多 >>浏览与推荐容相关的信息。通常一个栏目的推荐应是属于某一频道或是某一列表的容，因此呈现在栏目的信息最好是最新、最吸引用户的容。分页.长文章分页呈现吗？一般来说不要简单地将一篇长文章分成 1、2、3•…贞并不好，如果仅仅通过“继续”或“下一页”那么还不如用一页显示，用滚动来代替翻页。.向导式的交互除外，比如电子商务的支付环节，分页是最好的呈现方式，因为每个步骤一个工作流程，必须完成上一步才能进入下一步.分页后各个页面的容从某个角度应该是属于同一类的搜索.基础规.文本框搜索框文本框的长度应适中，至少应提供显示 10个汉字字符的宽度；搜索框组件中适应文本框必须为单行文本框；文本框的长度不得少于130个像素高度不得低于18个像素；.分类选择分类标签提示一般放在搜索框的上方，或是搜索按钮的前面.帮助信息a.帮助信息一般包括三块容：分类标签提示、提示性文字、热门关键词提示等；b.”提示性文字”可设置灰色（#cccccc）显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于容、用途、搜索围等用户有 真正帮助的提示 。“请输入关键字”这样的提示不应出现。

c.“热门关键词提示”c.“热门关键词提示”般放在搜索框下面a.搜索按钮一般包含图标形式或者文字形式两种b.使用图标形式时只能使用放大镜的图标，采用其他元素时需谨慎。c.搜索按钮上的文字最好为搜索，避免其他描述。d.图标形式（放大镜）和文字形式搭配使用，会出现如下三种情况:.应用场景强表现方式:.加大搜索框的显示，输入框采用大字体（ 14号）.突出搜索button的表现形式，更直观，更有点击欲.位置放在页头的中间或是右侧比较好3文字总体原则：提高文字的辨识性和页面的易读性1.字体大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流中申中申中申Ld号 1汨 1端.需突出的容部分、新闻标题、栏目标题等多使用14号字体.广告容、辅助信息或是介绍性文字等多使用 12号字体.不要用太大的字。因为版面是宝贵，有限的，粗陋的大字体不能带给访问者更多信息。

.避免大面积使用加粗字体.不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。匕二12城翻#m灯1.星jEt-例宙诸喇力随件市遍1的都肝胭.做物-1H匕二12城翻#m灯1.星jEt-例宙诸喇力随件市遍1的都肝胭.做物-1H瞅小上菰同屋醐日就北悌单独为由年期域幽#盛市胸牌价群底下防现行五库7款推3F再］匹＞耀.刁民.斗”号露Q落鼻珅尚点第・购翼硒都自蝴取潸哑翻展现帼自信赛始迎!谢中里早吗公平硕才士摩一翻厚翻人空嬖者埠城F廨虫戍*43号” 而雎隹:然用日至甫好A撮Ma会'印医一孥箭由厘下竞剧B宅所.［2号竽忆-awf-.r

行品注睛■〕锐鸿期谓号郦!艇小仁•也2塞亚的岫小耳的加罚MfB的也后和瞪左方XK十口顶目保颜M£ 1南"派群;W，短：IL喊］伯身J日«^,'_'i之一KS528E『性・：且&占%txtm圭施；•制之雪耳茕通弓后机U正嬴工翻加爆片=1,患儿英hlfl^'51U”-in=--甲f/if乜姆I①跋*m「艇搐心睁u・巴卜旦IPjk^M甯力更手唱U..一.原则上标题的字体较正文大，颜色也应有所区别。.中、英文标准字体：中文标准字体为宋体，英文标准字体为arial或Verdana。不要使用超过3种以上的字体。字体太多则显得杂乱，没有主题。.文字语百：除设计修饰、或是文章标题，其他地方均采用中文。.对齐和间距：字距小于行距，行距小于段距，段距小于块距。检查的方法：将的背景图片，线条全部去掉，看是否还能保持层级和区块的感.文字的可读性：呈现用户熟悉的简易、通俗的文字。避免使用生僻或是拗口的文字。另外：可以因为用户的特殊打破这个常规，如老年用户、儿童用户、残障用户等4图片同一类型的图片保持一样的尺寸规格，页面上图片的像素依据显示区域的大小来定，像素太低影响视觉效果，太高视觉效果也不会提高，并且影响页面的加载速度。同一图片在不同页面应保持宽/高的比例一致。图片的信息都要带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个字符。这被认为是一个Mozillabug,这是要注意的。title属性的优先级高于 alt。但由于错误的引导，很多设计就在 img标签只加了alt属性。alt和title对访问者都很重要（alt对搜索引擎会更重要一些），所以在定义img对象时，最好将alt和title属性都写全，保证在各种浏览器中都能正常使用。在alt和title中包含关键字，并且二者容最好不一样。不要在alt和title中堆积关键字，否则可能会导致搜索引擎惩罚举例：I、<imgsrc="nt12343.jpg"alt="低平板半挂车 仓栏半挂车 轻型特种半挂车厢式半挂车 "/>、<imgsrc="nt12343.jpg"alt="低平板半挂车 "/>、<imgsrc="nt12343.jpg"alt="17.5米低平板半挂车在鹅颈和车桥处进行双层加固"/>从这三个例子来看，III的描述是最好的。I只是单纯的堆积关键词，而且会被搜索引擎认为是 blackhat作弊，II只是一个关键词，对与型号、结构等 未做描述，用户体验方面来说稍差一些。通过正确的进行图片 ALT代替属性的书写，可以帮助获得一个好的关键词排名，所以 SEOer一定要重视这一点5页脚信息•页脚信息按照从上到下的排列次序为：部导航外部导航各类许可证、授权声明英文信息“copyright”中文信息各类网络安全/工商证明/技术支持LOGO

•各间隔统一使用“|”：•建议采用12号字，禁止使用加粗字体I刊HIIAboutTmurtllMUrIFtl«I触圄11班例■泅造国肿心I哑神I橘树箱 --幅聊有烹JI信且举谓I阳1・it色同咯工堡I瞄触澈而it引I厚I；和Mil御睢iI I赭箴EH的午可怔|二『同t：折:府王-—植用期［粤府布区口UB泻女做［2DC4］0m崛酶曲卸m二型W错用值第止持我量函由2-20D4O331药辐息JE黜品< 球加疝t叩湖iK0朔白・却施TantentInc.NlRig旭以的相d< 而EJ揖信息段I网辞就答辛方,闻星受段I网辞就答辛方,闻星受=诽二舲.第11AboutTsncBMlIftM1-【郡.I的苜I崎劭聊胞*——除播

CocTqht11,为［ Texe-iheAitightsRe时加 ——,黑遵封簿电稻i=_•-：与三⑻口 . 中文黄积福育舒爵lawTm5rtlM铝谶irtei#茜血强|菩协心用玷号断驯F师网f附前,I通」赭'曰£国「门7号u博部轲2.2.3界面部交互并且还要能体现主次关系。即小区块的界面部的交互：添加交互后还应保持页面的区块性,交互不能比它所属的大区块的交互还凸显。并且还要能体现主次关系。即小区块的*用户的操作习惯

*用户行为自由可控用户的行为是可以按照自己的意愿控制的。系统不得强迫用户执行任何操作。.如亮色按钮点击一定有响应，所有文字和图片都可用.任何一个页面都有清晰离开本页的按钮.不要欺骗用户，如：明明是关闭按钮，点击后却是进入另一个页面.用户可以取消绝大部分操作：如用户可以注销他的账号，删除上传的照片，编辑回复等等。在设计功能的时候一定要考虑用户的删除功能。*容错性用户在使用产品过程也是一个探索过程， 产品应该允许用户犯错，而且必须给用户重新尝试的机会，让用户处于放松的心态。设计过程中，首先要帮助用户避免出错，比如采用合适的控件（相同情况下选择控件比输入控件出错机会更小），给予输入帮助或启示。用户出错后，需要提供撤销或返回功能，使用户返回到上一步操作重新探索。 出错反馈要亲和，避免责备用户或鲁莽的打断或推出产品，要礼貌的指出错误所在并提供有用的补救建议。把用户经常容易犯的错都考虑到常规操作流程里，把可以确定的误操作，给其正确的操作结果。让用户犯错不知不觉。*操作的灵活高效性.优化操作流程：依用户习惯的流程去设计操作流程，把相关的操作放在一起，不断优化操作流程，以主要任务为中心，围绕完成这个任务设置相应的操作，去掉多余或是无关操作.减少误操作：容易误操作的按钮尽量不要放在一起.批量操作：重复的操作可以考虑做成批量操作.键盘操彳如Enter,Esc等

.快捷按钮：如返回顶部，返回底部，团购的浮动分类等.简单的判断：用户操作尽可能是不需要思考的，如果点击一个按钮需要思考3秒以上才确定则肯定不合格.响应时间：点击首页响应的时间不要超过 5秒，其他页面的响应时间应短些。有研究表明超过10秒绝大部分大部分用户会闪人的。*操作提示.预先信息提示所有交互进行前需要提供给用户预先应该知道的提示信息。表单提交类表单提交的步骤，每个表单项的要求需要给出提示信息。（如密码要多少多少位。实时提示密码的强度等）谨慎类操作如果一个操作导致的结果会涉及到用户利益的，如扣除金币等。都需要预先特别提示。（如：扣除金币的操作需要预先提示扣除金币数目，以及当前金币是否足够。等等。）差异化规则当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示。或者给出帮助。.所有交互进行中需要提供操作相关的提示。操作确认提示一个操作涉及数据删除，等需要谨慎操作的操作需要给出删除确认提示框。操作错误提示当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入容时提交）3、结果信息提示交互进行后给出结果反馈。查询类结果任何信息列表、查询结果，当对应信息无结果的时候需要给出有无结果状态提示。保存类结果一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。附加类结果一个表单是对其他数据进行附加的，如评论等。提交成功后应直接跳转到操作产生的结果展示部分。（如提交评论后应该直接展示给用户他提交的评论）*各类弹框弹框以不遮盖与弹框信息相关原页面 用户可能需要核对信息为基本原则，弹框与原信息放在相近的位置，并保真用户可见且易操作。确认框：常用于删除或批量操作，再次确认使用。交互规则：直接显示对话框，点击按钮后直接消失。标题：操作+目标，例如删除日志，删除照片专辑，解除好友关系……按钮：确定 +取消 把取消放在更容易点击的位置操作框：常用于进一步操作，入口较小，但操作步骤较多时，比如加好友，设隐私等。交互规则：直接显示对话框，确认完毕后，变为通知框。标题：操作 +目标，一般为入口的名字，例如新建照片专辑，修改真心话，添加选项 按钮：保存（行为）+取消，行为例如加为好友，添加，分享……把保存放在更容易点击的位置通知框：常用于确认框和操作框的确认后，通知用户结果，一般只有一个按钮。交互规则：点击按钮立即消失，如果不点击按钮，1秒后渐隐消失。标题：沿用之前操作框的标题并加上结果按钮：关闭把按钮放在最容易点击的位置提示框：常用于表单提交后的验证，通知用户哪些信息不完整或者操作步骤不对。多条信息提示使用1、2、3……的序号排列标题：提示按钮：确定（或知道了）把按钮放在最容易点击的位置未保存提示框：常用于表单未保存就跳转的提示，提示用户未保存信息是否需要保存。标题：未保存+目标，例如未保存日志，未保存个人档案，未保存隐私设置……按钮：保存 +不保存 +取消 把保存放在最容易点击的位置操作框快捷键：支持键盘的enter操作框上的主操作，一般为”确定”"保存”等，支持键盘的esc操作框上的取消/关闭操作，一般为“取消""关闭XX'等。2.2.4页面间交互、用于规定页面是采用新窗口打开还是本窗口打开的规则。首页所有的页面一般情况都是新页面打开，除非首页的重要功能在其他页面都也有，这时候可以是在当前页面打开。通常情况往一下级页面都是新页面打开，往上级页面当前页面打开。、不常规的，点击时应给出提示信息。如 :其他页面中的 logo,鼠标移入时应提示“返回首页”3、在没有导航的页面需要放上面包屑导航。4、页面规则：主页所有的频道主页主页一般不直接容页，除非是推荐的容所有频道主页都链向其他频道主页频道主页都链回主页频道主页也链向属于自己本身频道的容页频道主页一般不链向属于其他频道的容页所有容页都链向主页2.2.5任务交互（工具类）.完成任务的流程 :采用用户通常的思考先后顺序作为参考流程，并辅助其他要素形成最终的流程。如：现实生活中完成这个任务的先后顺序、时间顺序、从主要到次要、从简单到复杂、从必须步骤到可选步骤等。.任务的分解：以为相对有区隔的子任务划分步骤，并且这个步骤是在一个页面可以操作完成的。每个步骤用户完成的操作方式最好一致，这样操作更通畅，效率更高。.可返回操作：当前步骤应有返回上一步的按钮，上一步后可以对上一步骤重新编辑。.实时保存信息：当页面中用户编辑的信息量较大时，应考虑撤销和保存功能，这样用户万一操作被中断时，仍可以找回之前填写的信息。web业务架构业务架构,以客户赚钱为中心。的架构服务用户的同时也需要加进去商务信息，预留推商务信息的位置。每一块推的商务信息是针对哪些心理的用户群，以及哪种方式他们才更容易接受所推的商务信息。web结构seoweb结构seo,以服务搜索引擎为中心逻辑结构逻辑结构，网页部所形成的逻辑或的网络图。它本身由网页决定，通过的网络图可以更直观的检查的是否合理。逻辑结构的意义逻辑结构有两方面的意义：一方面是用户在浏览页面时，方便用户通过跳转到相关页面；另一方面是方便搜索引擎的蜘蛛爬虫抓取信息。搜索引擎抓取的是一的网页，就等同于投票，别