# 网站 **Repository Path**: NFUNM172015119/wangzhan ## Basic Information - **Project Name**: 网站 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-06-30 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营报告 ## 一、 网站基本信息 ### 建设目标 1. 搭建一个简约方便、为王者荣耀玩家提供基础帮助的网站。 2. 打造一个小型的王者玩家的经验交流场所。 ### 目标用户画像 1. 性别不限，年龄不限，有使用过或是对王者荣耀有兴趣的玩家。 2. 有一定手游经验，对媒体社交有一定的兴趣。 3. 愿意分享自己的经验，也愿意接受别人的推荐。 ### 网站规划 1. 根据王者荣耀官方网站上的一些相关内容，进行文章内容的编写。 2. 在官网、b站或公众号等一些优质平台上搬运相关内容，并标明出处，以优化自己的网站。 3. 进行优质内容的创作，吸引更多群体进行分享交流。 ### DVF模型 * 用户需求（Desirability）：用户需要了解王者荣耀相关基本信息，以提高游戏体验。 * 可持续性（Viability）：由于资源与时间等方面的限制，文章的更新持续时间得不到一定的保障。 * 可行性（Feasibility）：网站受众大部分为王者荣耀的玩家，在短时间内可得到一定的支持。 ### 网站地图 ![网站地图](https://images.gitee.com/uploads/images/2019/0906/220218_57c84066_1831468.png "网站地图+.png") ## 二、 图片使用 ### 图库版权 * 原创图片： 如首页图片，是我个人选取了较为喜爱的两个王者荣耀英雄人物制作的一张图片，图片中间的“王者荣耀”logo特别凸显了此网站主题，给人一目了然、一下子就清楚网站内容的感觉。 ![首页](https://images.gitee.com/uploads/images/2019/0811/112340_0b52e699_1831468.png "首页图片.png") * 非原创图片： 1. 大部分出自[王者荣耀官网](https://pvp.qq.com/web201605/wallpaper.shtml)，如介绍英雄的文章的特色图片、文章内容中英雄的皮肤图片等。 2. 架站文章的特色图片皆出自[堆糖网](https://www.duitang.com)，如： ![架站一](https://images.gitee.com/uploads/images/2019/0811/171511_7c113a2b_1831468.png "架站一.png") 出自：[堆糖清新壁纸](https://www.duitang.com/blog/?id=1050015314) ![架站二](https://images.gitee.com/uploads/images/2019/0811/173237_99d767db_1831468.png "架站二.png") 出自：[堆糖清新壁纸](https://www.duitang.com/blog/?id=1086935478) ![架站三](https://images.gitee.com/uploads/images/2019/0811/173418_4fe8be3e_1831468.png "架站三.png") 出自：[堆糖清新壁纸](https://www.duitang.com/blog/?id=1082833368) ### 图库风格及配色 网站目标群体为有过使用王者荣耀经验的玩家，因此在首页使用了一张由王者荣耀英雄制作而成的图片，凸显网站主题。 ![网站首页](https://images.gitee.com/uploads/images/2019/0811/174027_d90e4cb1_1831468.png "首页图片.png") 文章内容中使用的多为王者荣耀英雄的壁纸，及玩家所熟悉的英雄头像，在一定程度上给网站用户带来熟悉亲切感。 ## 三、 云端架站文章 [云端架站文章（一）](http://www.hackqw.cn/index.php/2019/06/30/%e4%ba%91%e7%ab%af%e6%9e%b6%e7%ab%99%e6%96%87%e7%ab%a0%ef%bc%88%e4%b8%80%ef%bc%89/) [云端架站文章（二）](http://www.hackqw.cn/index.php/2019/06/30/%e4%ba%91%e7%ab%af%e6%9e%b6%e7%ab%99%e6%96%87%e7%ab%a0%ef%bc%88%e4%ba%8c%ef%bc%89/) [云端架站文章（三）](http://www.hackqw.cn/index.php/2019/06/30/%e4%ba%91%e7%ab%af%e6%9e%b6%e7%ab%99%e6%96%87%e7%ab%a0%ef%bc%88%e4%b8%89%ef%bc%89/) ## 四、 平面设计 ### 网站配色及文档可读性 由于王者荣耀在手游体验中多采用的是冷色调作为环境建模，因此我在网站中使用了以黑色为基调的背景颜色，营造一种王者峡谷的神秘气氛，同时文字内容大部分以白色搭配，给人带来强烈的视觉对比，加强了文档的可读性。 如在“关于我们”的页面中，我使用了黑色作为文字背景，白色为字体颜色，同时搭配了无衬线字体，带给用户更干净简约的阅读体验。 ![普遍字体配色](https://images.gitee.com/uploads/images/2019/0906/221505_dd3c36a0_1831468.png "字体.png") 在“首页”关于新英雄马超的介绍中，我依旧使用了黑色作为背景，白色为普通文本颜色，但在超链接部分我使用了暗黄色，以突出此处有超链接，提示用户们可点击跳转详细页面。 ![首页字体配色](https://images.gitee.com/uploads/images/2019/0906/222004_cb968793_1831468.png "字体配色.png") ### 插件使用 * Animate it! （一）首页图片 ![插入使用1](https://images.gitee.com/uploads/images/2019/0828/171637_fe58fc1d_1831468.png "插入ani1.png") 在首页插入的图片位置，即下图中红色方框处，我插入了鼠标悬停在图片区域时图片弹出的效果，以此吸引用户的注意，让用户及时了解王者荣耀的最新动态和信息。 ![Animate1-1](https://images.gitee.com/uploads/images/2019/0828/171251_72f5ab51_1831468.png "ani1-1.png") ![Animate1-2](https://images.gitee.com/uploads/images/2019/0828/171313_ece597ee_1831468.png "ani1-2.png") （二）侧边栏 ![插入使用2](https://images.gitee.com/uploads/images/2019/0828/172709_87fb1048_1831468.png "插入ani2.png") 在页面右侧的侧边栏中，我使用了“rubberBand”这个效果，在鼠标滑过或悬停在侧边栏的时候，效果会被触发，更容易引起用户的好奇心，从而点击进去阅读我的相关文章。 * Siteorigin （一）首页 ![首页示例](https://images.gitee.com/uploads/images/2019/0917/221136_c2f3d98c_1831468.jpeg "site首页示例.jpg") 根据王者荣耀官网的布局和相关图片信息，在首页这个页面中，使用了SiteOrigin将新英雄马超的相关信息介绍给网站的用户。 ![首页](https://images.gitee.com/uploads/images/2019/0917/221158_510167ec_1831468.jpeg "site首页.jpg") （二）联系我们 ![联系示例](https://images.gitee.com/uploads/images/2019/0917/221216_37e53b95_1831468.jpeg "site联系示例.jpg") 在这个页面中，使用了SiteOrigin该插件将各种联系方式重新进行排版，获得更美观简约的效果。 ![联系](https://images.gitee.com/uploads/images/2019/0917/221235_ac36a35f_1831468.jpeg "site联系.jpg") （三）文章底部 ![文章示例](https://images.gitee.com/uploads/images/2019/0921/041207_64bd0423_1831468.png "site文章.png") 在文章底部，我通过SiteOrigin插件添加了一个图片画廊，丰富了文章的内容，增强了文章的可读性。 ![文章底部](https://images.gitee.com/uploads/images/2019/0921/041314_6dec5a5e_1831468.png "site文章示例.png") ## 五、 云端架站 ### IP及域名 * IP地址：182.254.189.111 * 域名：hackqw.cn * 域名使用：[王者荣耀间](http://www.hackqw.cn) ### 插件使用 * Wordfence ![wordfence](https://images.gitee.com/uploads/images/2019/0823/220248_f18ed8e9_1831468.png "wordfence.png") 根据Wodefence的数据显示，我的网站防火墙只有48%的分数，处于一个高危状态。 ![wordfence](https://images.gitee.com/uploads/images/2019/0823/220451_b75031ea_1831468.png "wordfence-2.png") 通过看相关的详细信息，我得知最影响我网站安全的因素是由于我网站的WordPress版本已经过期，因此我需要通过更新WordPress的版本来提高网站的安全性。其次，相关插件也需要及时升级。 * Site24x7 ![site24*7](https://images.gitee.com/uploads/images/2019/0823/220559_f15b0395_1831468.png "site24-1.png") 通过使用Site24x7对网站进行监控，可检测到我的服务器在晚上11点左右的时间有过停机的状态。 ![site24*7](https://images.gitee.com/uploads/images/2019/0823/220618_1630eb44_1831468.png "site24-2.png") 通过停机的相关信息，我得知停机的原因是因为我同时进行多个插件的升级，导致服务器过载，不能响应请求。 在监控的过程中，我成功打开了上海等8个站点，并通过此插件了解到我的个人网站平均响应时间为0.83秒，可用性还是极强的。 * 网站备份 1. wp-config.php备份 ![php](https://images.gitee.com/uploads/images/2019/0630/235108_14fcef9a_1831468.png "php.png") 2. 数据库 ![数据库](https://images.gitee.com/uploads/images/2019/0630/235121_12cf0521_1831468.png "数据库.png") 3. wordpress后台导出 ![后台](https://images.gitee.com/uploads/images/2019/0630/235140_689e89df_1831468.png "后台.png") 4. winSCP ![winSCP](https://images.gitee.com/uploads/images/2019/0630/235221_a92273e3_1831468.png "winSCP.png") ## 六、 站长工具 ### 必应 ![bing](https://images.gitee.com/uploads/images/2019/0917/221607_df1bdee4_1831468.png "必应.png") ![bing](https://images.gitee.com/uploads/images/2019/0917/222315_feb7d91d_1831468.png "bing.png") 使用了bing站长工具，对网站链接进行手动提交，进一步帮助bing抓取我的网站，提高网站搜索排名，使用户可以更容易的通过关键词搜索到并进入我的网站。 下面是搜索的结果： ![bing成果](https://images.gitee.com/uploads/images/2019/0917/223504_9fdcd938_1831468.png "bing结果.png") ![bing成果](https://images.gitee.com/uploads/images/2019/0917/223617_273e7f5b_1831468.png "bing成果.png") ### 谷歌 ![谷歌](https://images.gitee.com/uploads/images/2019/0630/233351_4a23ff1f_1831468.png "谷歌.png") 谷歌的站长认证一直未能成功，所出现的问题尝试了多种方法也无法解决。 ### 百度 ![百度](https://images.gitee.com/uploads/images/2019/0701/015210_9ceed7fa_1831468.png "百度.png") 成功验证了百度站长工具，但百度站长工具好像对于网站的相对要求较高，并未发现百度站长工具对网站的搜索结果有特别大的成效。 ![baidu](https://images.gitee.com/uploads/images/2019/0918/162537_d565a920_1831468.png "baidu.png") 一开始我是等待百度自动抓取，但发现并未有任何动静后我选择手动提交网站内链，帮助搜索引擎抓取我的网页。 ## 七、 搜索引擎优化 ### 优化方法 #### 方法一：确定核心流量词 网站在进行seo优化时的最基础步骤就是对核心关键词进行优化。首先通过搜索相关类型的网站确定了关键词的范围，再从所在范围中选取要重点优化的目标关键词（首页要优化的）和长尾关键词（首页以外的其他页面要优化的）。在网站中，我选择了"王者荣耀"“英雄”作为我的关键词，便于搜索引擎抓取我的网站，在用户搜索相关内容的时候可以搜索到我的网站。 #### 方法二：优化文章结构 根据seo分析结果，适当增加了站外链接跳转，添加了合适长度的关键词或介绍，添加了适当的seo标题，调整了文章的总体篇幅，并对图片进行添加替换文字和解释说明的处理。 ![seo-1](https://images.gitee.com/uploads/images/2019/0919/012440_ec52ca92_1831468.png "seo.png") #### 方法三：保持文章定期更新 在建站初期，我是一次性地把我的文章内容一股脑的po到网站上去，但在一开始的网站点击量暴增后，网站的浏览量逐渐减少直至没有。于是我尝试着保持平均两三天更新一篇文章的频率，去不断完善我的网站内容。在一定的时间的更新后，可以从jetpack的流量统计看出定期更新是有利于网站进行搜索引擎优化的。 ![更新频率](https://images.gitee.com/uploads/images/2019/0920/105104_33e5ea5d_1831468.png "更新.png") #### 方法四：保持文章内容原创 在保证了文章数量之后，就要开始注重文章质量的发展了。在现阶段，搜索引擎对文章内容质量要求是极高的，尤其是百度！！于是我坚持原创的原则，保持一定的原创文章数量。在jetpack流量统计可以看出在发布了原创文章后网站的点击数量是有一定的增加的。 #### 方法五：突显主要内容 如果想第一时间吸引住用户的注意力，则必须要把主要内容放在用户一眼就能看到的地方，确保用户在不拖动鼠标的情况下就看到网站所有的关键内容。只有当用户在第一眼看到内容就产生兴趣的时候交互的成功性是最大的。 #### 方法六：创建吸引用户的标题 虽然我们经常会吐槽许多文章都是“标题党”，但不得不承认的是，一个好的标题确实是吸引用户目光的最佳手段。有研究表明，一篇文章在最初吸引用户注意力的时间只有5秒，如果文章标题都不能吸引用户的眼球，就更别提用户对文章内容产生多大的兴趣了。如果标题足够新颖，可以勾起用户的好奇心，激发用户的阅读欲，这样才能更好的让用户停留。 #### 方法七：避免使用长段落 互联网发展至今，用户更愿意从图片或视频中获取信息，而非密密麻麻的一大堆文字。在创作内容时，应避免大量的文字堆叠，尽量控制文章段落在一个合理的范围，并注意排版整齐，给用户带来一个简约清爽的阅读体验。同时最好可以采用图文并茂的方式，用户不那么容易产生阅读疲劳。 以下是Jetpack流量截图： ![jetpack](https://images.gitee.com/uploads/images/2019/0921/004632_669f62f0_1831468.png "Jetpack.png") ## 八、 用户研究及成果 ### 方法A：用户访谈 此次访谈的内容主要针对的是网站主题、文章及页面的排版、页面配色等问题，对用户体验进行一个调查了解并进行改进。 用户反映的问题： 1. 打开速度慢 用户反映在打开网站的时候响应时间过长，容易产生放弃打开网站的想法，或是误以为网站没办法正常打开。 ![打开时](https://images.gitee.com/uploads/images/2019/0921/021735_aefbfeb1_1831468.png "问题4.png") 2. 顶部图像像素过低 用户反映在使用电脑端浏览网站的时候，首页顶部的图像像素过低，看着不清晰，给人一种很low的感觉。 ![顶部图像](https://images.gitee.com/uploads/images/2019/0921/020226_eff6c150_1831468.jpeg "问题1.jpg") 3.首页内容布局层级不恰当 有用户反映，首页介绍新英雄马超的部分，颜色效果凸显的层级给人一种混乱的感觉，不清楚什么与什么是同一部分的内容。 ![首页布局](https://images.gitee.com/uploads/images/2019/0921/021326_286f60a2_1831468.png "问题2.png") 4. 文字配色不合适 用户反馈说在这一页面中，感觉字体颜色搭配得很别扭，不清楚黄色字体部分到底是正文部分还是超链接部分。 ![文字颜色](https://images.gitee.com/uploads/images/2019/0921/021555_17e7a231_1831468.png "问题3.png") 5. 文章文字过多 用户反映更愿意接受图文并茂且突出重点的文章，而非密密麻麻一大堆文字的文章。 根据用户所提出的问题，我进行了以下改进： 1. 减少重定向。 2. 对页面的布局和排版进行检查，有问题的部分一一进行修正。 3. 对文字配色进行了一个重新选择，并有针对性的对文字进行颜色上的凸显。 4. 在文章内容中增添了图片，努力做到图文并茂的效果。 5. 进一步站在用户的角度考虑网站的使用体验，思考用户更希望看到一个什么类型的网站，从而完善我的网站。 ### 方法B：用户体验地图 ## 九、定制化 ### 方案一：使用AddToAny Share Buttons插件 ![插件效果](https://images.gitee.com/uploads/images/2019/0921/032456_db41377b_1831468.png "自定义1.png") 有用户反馈说，文章或页面的分享按钮只有Facebook和Twitter这两个，但我们国内环境无法使用这两个软件。于是我安装了AddToAny Share Buttons这个插件，添加了微信分享按钮和copy link按钮，增加分享的方式，为网站带来更多的流量。 ### 方案二：使用WP Editor.md插件 ![插件效果](https://images.gitee.com/uploads/images/2019/0921/032810_6c10a17d_1831468.png "自定义2.png") 在编辑文章内容时，我感觉Wordpress自带的文本编辑器无法满足我对文章布局效果的需求，于是我添加使用了WP Editor.md这个插件，通过Markdown语法增加更多样式效果。 ## 十、命名规范 ### 页面命名规范 ![页面命名](https://images.gitee.com/uploads/images/2019/0921/034442_0d6d0325_1831468.jpeg "页面 命名.jpg") 以上是部分页面例子，在网站内各个页面的链接命名皆使用英文或拼音去命名，且该命名中的英文或拼音与中文标题的意义相符。 ### 文章命名规范 ![文章命名](https://images.gitee.com/uploads/images/2019/0921/034558_db07ebad_1831468.jpeg "文章命名.jpg") 以上是部分文章例子，网站内的各篇文章的链接命名皆使用英文或拼音去命名，且该命名中的英文或拼音与中文标题的意义相符。 ### 总体命名 ![命名规范](https://images.gitee.com/uploads/images/2019/0921/035130_a707718b_1831468.png "命名.png") 在首页位置，可以从侧边栏简洁明了得知文章分类及文章主要内容，每篇标题都是易于理解且有意义的。 ## 十一、视觉可读性