用户体验设计之道.docx

上传人:b****4 文档编号:1169482 上传时间:2022-10-18 格式:DOCX 页数:10 大小:115.13KB
下载 相关 举报
用户体验设计之道.docx_第1页
第1页 / 共10页
用户体验设计之道.docx_第2页
第2页 / 共10页
用户体验设计之道.docx_第3页
第3页 / 共10页
用户体验设计之道.docx_第4页
第4页 / 共10页
用户体验设计之道.docx_第5页
第5页 / 共10页
点击查看更多>>
下载资源
资源描述

用户体验设计之道.docx

《用户体验设计之道.docx》由会员分享,可在线阅读,更多相关《用户体验设计之道.docx(10页珍藏版)》请在冰豆网上搜索。

用户体验设计之道.docx

用户体验设计之道

用户体验设计之道

用户体验设计

写方案:

我们应该具备:

好奇心、热情、同理心、沟通

1、抬头页注明:

客户公司名称、客户公司标识、项目名称、文档内型、反感版本、提交时间、自己公司名称、方案作者、项目编号、预算、机密性

2、修订历史:

版本号、日期、作者、版本注释

3、项目总览

4、实施方法

5、工作范围

6、假想情况

7、交付物

8、权利和所有权:

(1)受雇工作:

你绝对无权享有作品

(2)授权工作:

允许你保有工作产出的版权

9、额外开支和费用

10、项目报价

11、支付时间表

12、协议和协议的签署

注意系统的“可见性”

1、收集产品和项目以及背景资料

2、挑选探视方向

3、通览网站的优先区域,挑选出符合试探原则和不符合的地方

确保大家用同一个词汇表,统一术语

用户研究步骤:

①定义你的主要用户群

②安排用户参与

③实施调查

④验证你对用户群的定义

⑤形成用户要求清单

大多数人是天生的信息分享者,愿意将喜欢的东西与别人分享

当你在叫还没回答问题的人发言时,一定要重复一遍问题,以防他们没有理解或之前没有在听

从定义到设计演进:

定义设计开发

(1)将和相关人员访谈或用户研究所得形成概念并视觉化

(2)划分项目要求的优先级

(3)安排你将在设计时会用到的行动和文档

(1)

(2)

(3)实施方法(准备-了解-实施-迭代-测试-通过/策划-定义-开发-延伸)

(4)工作范围(制定项目分工:

哪部分由你负责,哪部分由客户负责)

(5)假想情况(即有可能发生的)(最适合写明要成功完成项目客户应该提供哪些东西)

(6)交付物(你在工作中产生和需要提供给客户的产物。

可以详尽地告诉客户在项目进行过程中将会从你这里获得什么形式的工作产出)

(7)权利和所有权(限制客户在什么范围内使用你的工作产出。

分受雇工作(你绝对无权享有作品和所有你所产生的与项目有关的作品都属于用户)和授权工作(允许你保有工作产出的版权))

(8)额外开支和费用(项目报价和其他外部资源的费用)

(9)项目报价(将所需费用告知客户)

(10)支付时间表

(11)协议和协议的签署

SOW:

“工作陈述”

第四章复习:

SWIT分析法:

目标是列出公司的优点、弱点、机会和威胁。

流程:

定义-设计-开发-部署

第五章:

业务要求

特点:

(1)对必须解决的整体需求有深入了解;

(2)体现和明确有不同相关人员提出的需求;

(3)为设计提供方向,而不指导如何完成;

(4)以划分优先级和跟踪为目的,形成清晰的工作内容。

探试分析:

采用一套规则(探试原则)对产品的可用性设计进行检定。

系统状态的可见性:

系统应该及时地以恰当的方式告知用户正在发生的事情。

为什么要做试探分析?

答:

采用这种分析是一个相对快速和低成本的获得设计反馈的方法;可以对设计质量提供一个大致把握,并且帮助发现任何潜在的设计问题。

如何去做?

答:

(1)收集产品和项目的背景资料;

(2)挑选探试方向;

(3)通览网站的优先区域,找出符合探试原则和不符合探试原则地方;

(4)将你的发现拿给项目团队和主要相关人员看。

GIF(GraphicsInterchangeFormat)的原义是“图像互换格式,是CompuServe公司在1987年开发的图像文件格式。

GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。

其压缩率一般在50%左右,它不属于任何应用程序。

目前几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。

GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。

GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。

第六章用户研究

基本步骤:

1、定义你的主要用户

(1)将所有能帮助你定义网站用户群的用户特征记下来,整理成一个清单

(2)与平时会接触某类用户的同事讨论用户特征

(3)把最可能影响潜在用户为什么使用和如何使用网站或应用的特征按优先级排序

(4)找出你的研究和设计重点正对的用户群

2、安排用户参与

3、实施调查

4、验证你对用户群的定义

5、形成用户要求清单

(1)首先收集和吸收公司所有已有用户研究或其他文档

(2)找出公司内对现在或以后用户有深刻了解的人

用户常用研究方法:

用户访谈、实地拜访、问卷调查、焦点小组、卡片分类、可用性测试

用户访谈:

同你网站的当前或潜在用户进行结构化的交流。

可以通过电话、在中立场所面对面进行、或在理想状态下在用户很可能使用网站的地方进行。

最好是观察用户如何使用网站或者他们操作网站的什么任务。

实地拜访:

在访谈的基础上结合了对用户的观察。

第六章:

用户研究

亲和诊断法:

是一种发掘模式和趋势的方法,通过各种信息(用户的陈述、研究者的讨论)分组整理来得出结论。

问卷调查:

一般采用封闭式的问题(例如多选题)在进行对用户访谈时,不要问用户设想的问题。

多为是与否,对与错的选项。

焦点小组:

将目标受众群中的一些成员召集起来,并引导他们进行讨论。

封训第九天

第七章:

人物角色

什么是人物角色?

答:

人物角色是描述典型目标用户的文档。

类型:

(1)市场目标的人物角色,对购买驱动的建模;

(2)交互人物角色,对使用习惯的建模。

为什么要制作人物角色?

答:

在用户体验设计过程中,人物角色可以帮助你将重心放在具有代表性的用户上。

如何拓展人物角色取决于自己。

有用的人物角色一定准确地概括了使用你产品或网站的特定用户。

创造人物角色的最小内容要求:

(1)照片(选择时尽量确保照片看起来不会太刻意为之或者处理过,确保符合人物角色的生活方式)

(2)名字(大家用来称呼你的人物角色,并且要确保你的人物角色的名字是可信的)(注意:

尽量在同一个项目中给你点人物角色起名时发音不要太过相近)

(3)年龄(助于增加你写的传记的真实性)

(4)居住地(主要是由于文化和行为会因为地域不同而变化)

(5)职业(用于定义人物角色的行为)

(6)传记(需要有可信性)

内容包括:

受教育程度、薪酬或薪酬范围、个人语录、网上活动、线下活动、对客户品牌或者项目的关键切入点或触发点技术喜好程度、社会化网络喜好程度、移动设备喜好程度、使用客户品牌或项目的动机、用户目的。

回顾:

第一章:

用户体验设计之道

用户体验:

以影响企业的观念和行为为目的,创造影响用户体验的元素,并将之和企业目标同步。

第二章:

项目生态系统

微型网站是相对公司的品牌展示网更小更专注的一类网站。

品牌展示网站

营销活动网站

 

网站分类内容供给网站

任务应用网站

 

电子商务网站

在线教学网站

社会化网络应用网站

1、品牌展示网站

品牌展示网站是公司主推的.com或.org网站。

设计目标:

(1)传达品牌价值和品牌信息;

(2)让来访者更方便快捷地获取公司信息;

(3)展示或解释公司的商业模式和价值观;

(4)吸引一些主要用户群体,并将他们引导至相关的互动、功能或内容;

(5)帮助公司到达关键的业绩指标。

2、营销活动网站倾向于成为制造吸引力的引擎

营销活动网站和品牌展示网站类似,都是将重点放在放在创造影响用户对公司品牌认识体验上。

区别在于,营销活动网站是为了在一定范围内(例如既定的时间或针对特定的受众)达到某些具体目标。

设计目标:

(1)引起受众的兴趣和期待(通常通过清晰地展示产品和传达核心价值或某种程度地鼓动用户);

(2)吸引主要的用户群,一遍发起某种活动(如进入页面订购商品等);

(3)帮助公司达到既定目标(如独立访问人数)。

3、内容供给网站

内容供给网站以信息为主,可能包含多种类型的媒介(文章、文档、视频、照片、教程),意图为告知、吸引和供用户娱乐。

设计目标:

(1)以自身提供的内容吸引用户,并靠自身内容吸引用户再次访问网站;

(2)展示公司的管理理念;

(3)以用户为基础支持重大抉择;

(4)通过鼓励员工发表想法,增加公司的企业知识,避免好的想法被埋没于部门之中;

(5)以多种方式帮助正在查找信息的用户。

4、任务应用网站

如:

制作电子表格或印刷物的软件应用、公司内部用来处理大型工作流程的网页工具

或应用、可以管理和存取个人资料的网站等等。

任务型网站的主要目标是让用户完成符合自己需求的一系列任务,最终达到客户的商业目标。

设计目标:

(1)让用户完成某件事情,,而且这件事情在别处无法完成,或在这里完成得更好;

(2)让新手可以通过教学很快上手,并将主要任务可视化;

(3)让中级和高级用户可以有快捷方式,进入更深层的功能;

(4)减少用户负担,最大化利用系统资源;

(5)设计和退出网站时,要注意用户提出的改动意见的多寡。

5、电子商务网站

电子商务网站可以同时具备上述四种类型项目的元素。

设计目标:

(1)如果网站比较冷门,须对网站运作模式做出说明;

(2)提供有用的信息和功能,帮助用户从了解到考虑、从比较到购买的过程中做出抉择;

(3)利用积分可增加配套销售,向上销售的几率,并将这类信息放在容易看到的但是不会打扰到用户的地方;

(4)著作从购买到配送的沟通流程。

6、在线教学网站

在线教学网站是内容供给网站和任务应用网站的结合体。

设计目标:

(1)定下课程所需的基础知识和面对对象;

(2)为了容易理解,将内容以适当的节奏提供给学员;

(3)让学员在实践课上可以进行模拟操作;

(4)记录成绩和进度,如果可行,给出下一步该学什么的建议,如更高级的课程。

7、社会化网络应用网站

社会化网络应用网站主要是任务应用。

设计目标:

(1)让潜在用户的注意力集中在网络的目的和价值上;

(2)促进用户间有意义的互动,提供给相应的功能(如图片视频的分享和讨论)

(3)通过确保网络内的人明白如何控制自己的信息和正确回应不恰当的行为,来保护网站治理和现实社群的力量,职位活跃用户提供高级功能,如人气排行和评论。

信息架构师:

为信息的组成制定模型,并利用该模型来设定便于用户使用的导航和内容分类。

交互设计师:

制定网站或应用对用户操作的回馈行为。

用户研究员:

基于从用户处得来的、产生自用户的、或经由用户验证的、带用户作研究等途径得来的消息,提供对最终用户的需求的深入了解。

7/20

第八章用体验设计和搜索引擎优化

SEO:

搜索引擎优化

简单来说,搜索引擎优化是为获得和保持在公共搜索引擎上的某些目标关键词的顶级排名。

以开发和维护网站资产的过程。

目标关键词必须在网站分类中体现出来。

页面标题:

页面头部的真正的标签,包含了页面的真正标题,并且是页面中最重要的65个字。</p><p>网站的每一个页面一定要有一个独一无二的页面标题。</p><p>不要在标题中填充关键词。</p><p>一个只谈意见死的页面胜过一个页面上讲很多哦事情的页面。</p><p>任何网站都需要网站地图。</p><p>保持内容新鲜:</p><p>一个获得和保持在搜索结果中排名靠前的主要原因是持续地更新网站内容。</p><p>处理丰富的网站的用户体验问题的基本难点是防止内容的克隆和复制。</p><p> </p><p></p> </div> <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div> <script> function showmore() { $(".readmore").hide(); $(".detail-article").css({ "height":"auto", "overflow": "hidden" }); } $(document).ready(function() { var dh = $(".detail-article").height(); if(dh >100) { $(".detail-article").css({ "height":"100px", "overflow": "hidden" }); } else { $(".readmore").hide(); } }); </script> </div> <script> var defaultShowPage = parseInt("5"); var id = "1169482"; var total_page = "10"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bdocx.com/down/1169482.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <script> var pre = "https://file1.bdocx.com/fileroot1/2022-10/11/024fbe9a-5d70-4864-9d4b-097de418fbff/024fbe9a-5d70-4864-9d4b-097de418fbff"; var freepage = parseInt('10'); var total_c = parseInt('10'); var start = defaultShowPage; var adcount = 0; var adindex = 0; var adType_list = ";0;1;2;3;4;5;6;7;8;9;"; var end = start; function ShowSvg() { end = start + defaultShowPage; if (end > freepage) end = freepage; for (var i = start; i < end; i++) { var imgurl = pre + (i + 1) + '.gif'; var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"用户体验设计之道.docx_第" + (i + 1) + "页\" width='100%'/>"; $("#page").append("<div class='page'>" + html + "</div>"); $("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>"); if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1) { if(adindex > (adcount-1)) adindex = 0; $("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>"); document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML; adindex += 1; } } start = end; if (start > (freepage - 1)) { if (start < total_c) { $("#pageMore").removeClass("btnmore"); $("#pageMore").html("亲,该文档总共" + total_c + "页,到这儿已超出免费预览范围,如果喜欢就下载吧!"); } else { $("#pageMore").removeClass("btnmore"); $("#pageMore").html("亲,该文档总共" + total_c + "页全部预览完了,如果喜欢就下载吧!"); } } } //$(document).ready(function () { // ShowSvg(); //}); </script> <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861724.html" title="断裂控烃理论及其应用--江汉油田讲课(罗群).ppt">断裂控烃理论及其应用--江汉油田讲课(罗群).ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861723.html" title="天线基础知识(全).ppt">天线基础知识(全).ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861720.html" title="乳腺肿块的诊断与治疗ppt课件.ppt">乳腺肿块的诊断与治疗ppt课件.ppt</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861719.html" title="浅谈设备更新项目申报的注意事项.doc">浅谈设备更新项目申报的注意事项.doc</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861718.html" title="客车外摆式气动门操纵机构设计.doc">客车外摆式气动门操纵机构设计.doc</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861717.html" title="项目工地试验室管理手册专业.doc">项目工地试验室管理手册专业.doc</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861716.html" title="财务分析实验教程第四版课后习题答案.doc">财务分析实验教程第四版课后习题答案.doc</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861714.html" title="绿色生态农产品深加工项目立项申请书.doc">绿色生态农产品深加工项目立项申请书.doc</a> </li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861712.html" title="一、建设实验室的目的、意义(包括实验室建成后对国家和依托单位的作用_ (1).doc">一、建设实验室的目的、意义(包括实验室建成后对国家和依托单位的作用_ (1).doc</a> </li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30861711.html" title="合成氨的合成工段工艺设计论文(3)(1)(1).docx">合成氨的合成工段工艺设计论文(3)(1)(1).docx</a> </li> </ul> </div> </div> <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096959.html" target="_parent" title="行政服务中心党建工作总结3篇.docx">行政服务中心党建工作总结3篇.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096960.html" target="_parent" title="人教版五年级数学上册用字母表示数练习题精选 73.docx">人教版五年级数学上册用字母表示数练习题精选 73.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096961.html" target="_parent" title="课程教学大纲审阅意见表.docx">课程教学大纲审阅意见表.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096962.html" target="_parent" title="数值分析习题与答案.docx">数值分析习题与答案.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096963.html" target="_parent" title="连接线的制作.docx">连接线的制作.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096964.html" target="_parent" title="精品安全伴我行周记.docx">精品安全伴我行周记.docx</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096965.html" target="_parent" title="江苏省句容市丹阳市中考英语模拟考试试题.docx">江苏省句容市丹阳市中考英语模拟考试试题.docx</a></li> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/1096966.html" target="_parent" title="西班牙品牌ZARA的市场营销方式分析.doc">西班牙品牌ZARA的市场营销方式分析.doc</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/1096967.html" target="_parent" title="装饰公司5s管理办法.docx">装饰公司5s管理办法.docx</a></li> </ul> </div> </div> <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 相关搜索</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%94%a8%e6%88%b7">用户</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e4%bd%93%e9%aa%8c">体验</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%ae%be%e8%ae%a1">设计</a></li> </ul> </div> <br /> <div > 当前位置:<a target="_parent" href="https://m.bdocx.com/">首页</a> > <a href="https://m.bdocx.com/booklist-00006.html">人文社科</a><span> > </span><a href="https://m.bdocx.com/booklist-0000600001.html">法律资料</a> </div> <br /> <div class="cssnone"> <iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=kWKXIbuCMMw%3d&parto=sZ5ARJE%2favx8zuJruJJ0AdUeqhSUgvrYzA9v7Jdyk8qYyFHuGu0QDOLzKTQwZ2f%2f2tX4%2baYbFt0jZ%2f69PJIP%2f17wjOKxakek83xzOfwVR2hLs3cM4mNaYQPP5XbAxqIyQAjj1KVqAnLr3TvSyF1Fh%2ft6Fvc6FwaUrlNaA6vVD0RbEOYXM0u3Qsko%2fqIG8GtHauJ3RUanr3654EylTTr%2fG4Lerp6ng7Tk" frameborder="0" style="width: 0px; height: 0px"> </iframe> </div> <span id="LabelScript"></span> <script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script> </form> <div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;"> <div class="siteInner"> <p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script><script>(function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window)</script> </div> </div> <div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; "> <div class="trlogoside" id="navlogo" style="display: none;"> <a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a> <div class="trnavclose" id="navclose"> <span></span> </div> </div> <div class="navcontainer"> <div class="row"> <ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;"> <li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li> <li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li> <li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li> <li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li> <li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li> <li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li> </ul> </div> </div> </div> <script type="text/javascript"> function stopPropagation(e) { var ev = e || window.event; if (ev.stopPropagation) { ev.stopPropagation(); } else if (window.event) { window.event.cancelBubble = true;//兼容IE } } $("#navmore").click(function (e) { $("#navcontent").show(); $("#navlogo").show(); stopPropagation(e); var navcontentwidth = $("#navcontent").width(); $('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' }); $("#navcontent").show().animate({ "right": 0 }, 300); }); $(document).bind('click', function () { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); $("#navcontent").click(function (e) { stopPropagation(e); }); $("#navclose").click(function (e) { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); </script> <script> function BaseShare(title, desc, imgUrl) { var link = "https://m.bdocx.com/doc/1169482.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填,公众号的唯一标识 timestamp: '1719574113', // 必填,生成签名的时间戳 nonceStr: '1EFA39BCAEC6F3900149160693694536', // 必填,生成签名的随机串 signature: 'cea1b692cdec0a7999c445ca0cd99c557810156f',// 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } function BaseShare(title, desc, imgUrl, link) { if (link=="") link = "https://m.bdocx.com/doc/1169482.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填,公众号的唯一标识 timestamp: '1719574113', // 必填,生成签名的时间戳 nonceStr: '1EFA39BCAEC6F3900149160693694536', // 必填,生成签名的随机串 signature: 'cea1b692cdec0a7999c445ca0cd99c557810156f',// 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } </script> <script> $(document).ready(function () { var arr = $(".headercontent"); for (var i = 0; i < arr.length; i++) { (function (index) { var url = "https://m.bdocx.com/header.aspx"; $.get(url + "?t=" + (new Date()).valueOf(), function (d) { try { arr.eq(index).empty().html(d); } catch (e) { } try { arr.html(d); } catch (e) { } }); })(i); } }); </script> <script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script> <script charset="utf-8"> $("img.lazys").lazyload({ threshold: 200, effect: "fadeIn" }); </script> </body> </html>