# report **Repository Path**: hosouyi/report ## Basic Information - **Project Name**: report - **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-23 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 南苑用户研究站 - 站长：何淑怡 - 网站url：http://shuyi-ho.me/ - 网站由中山大学南方学院 文学与传媒学院 网络与新媒体专业 何淑怡 制作 - 内容由中山大学南方学院 文学与传媒学院 吴雪老师提供 - 培养方案核心课程学期作品，由廖汉腾副教授，吴雪老师指导 - 网站搭建和模拟来自于wordpress - 项目甲方：吴雪老师提供的网站可用性&用户研究资料 ## 策划文档与网站地图 1. 网站建设目标：用户研究站是一个面向中山大学南方学院全体学生分享网站可用性和用户研究资料的分享平台，网站目标是收集互联网的业界精英所写的文章和想法用于分享、帮助中山大学南方学院的学生普及和了解互联网知识。 2. 目标用户画像： - 人群：在校修与互联网相关专业的大学生 - 年龄：18-22岁 - 性格/行为特点：好奇活泼，对新知识有极强的求知欲，每天网上在线时长至少3小时，习惯在互联网搜索学习资料 - 网站使用场景：在设计互联网产品时不知道需要考虑什么因素，于是上网查找关于网站建设的文章作为参考；在课堂中老师讲解了关于用户研究等理论知识后还没有参透，于是上网搜索相关文章作为课后补充 - 使用原因：网上的文章良莠不齐，很多网站的文章与搜索的关键词无关，多次点击到无用链接，感觉十分烦躁 - 对网站的希望：能够分享给身边的同学阅读；有很好的分类目录能供他快速搜索到她想找的内容；能看到网民对此网站文章的评价；能够快速了解网站的功能和结构；高质量的网站文章 3. 网站规划： - 前期规划：持续转载高质量的文章，根据用户建议持续改进网站的平面设计、交互设计和文章排版，提高网站的易用性。 - 中期规划：为网站做更多的seo，提高网站的点击量，做好网站的的安全防护工作，多产出原创文章，提高更新速度 - 后期规划：开设新的功能或分类，是网站的内容更丰富多样，持续与用户互动，与其他网站合作增加网站曝光率 4. DVF模型： - 用户需求：设有搜索功能；设有导航栏；设有分享功能；网站文章可读性高； - 可持续性：持续更新更多高质量的文章；提供分享功能，让用户将网站传播到更多地方，增加网站传播范围；站长会及时回复用户的评论和建议，增强网站的互动性和用户粘度，保持网站活力。 - 可行性：使用site origin等插件对页面和文章进行排版布局的优化；在首页页面添加侧边栏小工具实现搜索和评论功能；根据用户需求可以页脚增加分享到社交平台的功能实现用户情感化需求；在主题外观设置中实现导航栏功能。 5. 网站地图：![网站地图](https://images.gitee.com/uploads/images/2019/0626/004947_c2d5ba22_2188375.jpeg "网站地图.jpg") - **根据用户需求网站增加了分享小工具，满足用户的对网站功能的需求** ## 图片的使用 1. 图片版权：本网站的所有图片下方均有说明，并且点击图片能跳转至原文的链接（如下图所示） 可点击此链接进入原文查看：http://shuyi-ho.me/2019/06/09/mobileuser-experience-elements1/ ![输入图片说明](https://images.gitee.com/uploads/images/2019/0626/015520_5bce9477_2188375.jpeg "图片版权.jpg") 2. 图库风格及配色：图库风格属于学术风，图片会选取平实、理性的图片（如数据图，分析表格，思维导图等）。 - 理由：因为本网站的功能是用户研究的资料分享，单纯的文字说明不足以论述作者的理论或不足以梳理复杂的观点，所以使用这些配图能突出本网站的学术风格，使文章看起来严谨，有权威，更容易让用户信服和理解。 ## 3篇云端架站踩坑图文文章 1. http://shuyi-ho.me/2019/05/10/ipaddress/ 2. http://shuyi-ho.me/2019/05/20/github-education-pack/ 3. http://shuyi-ho.me/2019/06/21/putty/ ## 平面设计 ### 1. 首先，网站采用的配色方案是 【重点强调-偏金色的棕色：“#843000” 、顶部标题-深酒红色：“#38001c” 、正文-偏灰的黑色：“#111111” 、背景-白色：“#ffffff”】。 这四种颜色很好地配合了网站的背景头图，而且明度都较低符合网站主题的稳重、理智风格。其次，我还对重要的文字做了加粗和分段处理，在文字较多的地方提供了配图，以此提高网站的可读性，降低用户的疲劳感。（如下图所示） ![输入图片说明](https://images.gitee.com/uploads/images/2019/0626/213407_4a875957_2188375.jpeg "配色.jpg") ### 2. 3处页面/文章的site origin排版 ![site-origin1](https://images.gitee.com/uploads/images/2019/0626/021243_cd358e13_2188375.jpeg "siteorigi1.jpg") ![site-origin2](https://images.gitee.com/uploads/images/2019/0626/021316_6da96d3c_2188375.jpeg "siteorigi2.jpg") ![site-origin3](https://images.gitee.com/uploads/images/2019/0626/024513_b09a7860_2188375.jpeg "siteorigi3_看图王.jpg") - #### 效果显示图 ![效果图1](https://images.gitee.com/uploads/images/2019/0626/024349_55eafa68_2188375.jpeg "siteorigi1-show_看图王.jpg") ![效果图2](https://images.gitee.com/uploads/images/2019/0626/024417_7c41d2b6_2188375.jpeg "siteorigi2-show_看图王.jpg") ![效果图3](https://images.gitee.com/uploads/images/2019/0626/024441_d7a44eb5_2188375.jpeg "siteorigi3-show_看图王.jpg") ### 3. 2处AnimateIt动画 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0626/133622_76120765_2188375.png "animateit.png") - 效果展示（打开链接后请点击侧边栏的“搜索”和“近期评论”，动画则会显示）：http://shuyi-ho.me/ ## 云端网站管理 ### 1. 云端架站：网站域名shuyi-ho.me；网址：http://shuyi-ho.me/ ### 2. 网站安全：**Wordfence**监控截图 ![wordfence仪表板](https://images.gitee.com/uploads/images/2019/0626/024717_1b9c057b_2188375.jpeg "wordfence.jpg") ![防火墙](https://images.gitee.com/uploads/images/2019/0626/015742_f7c82b96_2188375.jpeg "wordfence-firewall.jpg") - 通过wordfence的监控我了解到我的网站的安全性能还不高，只达60%。一天内就平均被攻击了7000000多次，但是这也都被wordfence阻止了。其次从防火墙提供的数据中，我可以看出我网站防复杂攻击的性能弱，只达55%，如果是黑客有意攻击我的网站绝对不保。其他的普通攻击我的网站应该能共对付，因为其现在处于“蛮力保护”状态，在此模式下，Wordfence防火墙会主动阻止与已知攻击模式匹配的请求，并主动保护我的站点免受攻击者攻击。 ### 3. 网站性能：使用**site24x7**监控截图 ![site24*7-监视器](https://images.gitee.com/uploads/images/2019/0626/214818_6501d379_2188375.jpeg "site24x7-new2.jpg") ![八个地址监视](https://images.gitee.com/uploads/images/2019/0626/214847_d9c5d358_2188375.jpeg "site24x7-new.jpg") - 我在site24X7中添加了一个监视器，八个监视位置为：西雅图，纽约，东京，旧金山，广州，上海，北京，吉隆坡。在site24X7中，首先我可以了解到我的网站在这八个地方的响应时间和速度，其中上海地区的访问速度最慢，纽约的访问速度最快；其次，我能发现上海地区在上午5：46分时曾停机19分钟，所以在那19分钟里上海网民是无法点开我的网站，我以后可以多注意这个问题。其他地区每五分钟检测一次，均可访问，可用性较强，没有问题。 ### 4. 网站备份： - winSCP的截图 ![winscp登陆图](https://images.gitee.com/uploads/images/2019/0626/020020_ed86787d_2188375.jpeg "winscp2.jpg") - wp-config.php备份本地的截图；插件（Wordpress Database Backup/WordPress Backup Plugin）备份“数据库文件”截图；wordpress后台导出工具导到本地的文件截图 ![3份数据库备份](https://images.gitee.com/uploads/images/2019/0629/225611_5943bdfb_2188375.png "文件备份截图.png") ## 站长工具 ### 1. 站长工具 - #### A：使用了百度站长工具，以前不能在百度搜索引擎搜到我的网站，现在可以了。并且后台的抓取频次、索引量、移动搜索的数量有了变化，证明我的网站在百度已经有人点击进入了。（以下为前后对比图） ![前](https://images.gitee.com/uploads/images/2019/0627/001755_571347be_2188375.png "百度site1.png") ![后](https://images.gitee.com/uploads/images/2019/0627/001811_72eb34ac_2188375.png "百度site2.png") ![索引量](https://images.gitee.com/uploads/images/2019/0627/001836_af1c0c36_2188375.jpeg "百度站长索引量.jpg") ![移动搜索](https://images.gitee.com/uploads/images/2019/0627/001902_6b63c1a5_2188375.jpeg "百度站长移动搜索.jpg") ![抓取频率](https://images.gitee.com/uploads/images/2019/0627/001920_182cc2a7_2188375.jpeg "百度站长抓取频次.jpg") - #### B：使用了bing站长工具，未使用以前的仪表盘是没有数据显示的，使用后网站的点击率、抓取率大大提高，bing的用户能够在搜索引擎内能浏览到我的文章了。（以下为前后对比图） ![前](https://images.gitee.com/uploads/images/2019/0627/001942_869032e8_2188375.png "bing-仪表板1.png") ![后](https://images.gitee.com/uploads/images/2019/0627/002000_e2eb601c_2188375.png "bing-仪表板2.png") ![site](https://images.gitee.com/uploads/images/2019/0627/002015_d47576fb_2188375.png "bing-site.png") ### 2. SEO优化： - #### 方法一：**提交链接**在bing的网站管理中添加本人网站里的所有有意义的url **方法展示** ![方法](https://images.gitee.com/uploads/images/2019/0627/155654_552fed9c_2188375.png "bing提交url.png") **成效** 原来只能搜到两条现在能搜到网站里的全部文章 ![方法一成效](https://images.gitee.com/uploads/images/2019/0627/155735_6640140e_2188375.jpeg "seo1提交前后对比图.jpg") - #### 方法二：**关键词优化** 因为我网站的主题是关于网站、用户的资料分享。所以我梳理出我网站的关键词就是：**网站、可用性、以人为本、用户、用户研究、移动、互联网、优化**等。综上，本人对网站首页的seo title、slug、meta description进行了关键词优化以及对文章做了可读性编辑 **方法展示** ![方法2](https://images.gitee.com/uploads/images/2019/0627/155844_b479eea2_2188375.jpeg "seo3优化前后对比图.jpg") **成效**：原来输入关键词在bing首页是找不到我的网站的，而且能搜索到我网站的关键词较少；现在我的网站在首页中排名第二，能搜索到我网站的关键词也增多了（即用户输入不同的关键词也能找到我的网站）。 ![方法2成效](https://images.gitee.com/uploads/images/2019/0627/164139_f44a374b_2188375.jpeg "关键词前后对比.jpg") - #### 方法三：**添加外链**：将网站的页面/文章链接放到其他平台作为友情链接。①我与南苑学子优秀诗经作品展网站站长合作，在她的网站中添加了我的网站的友情链接；②我在知乎的热门文章的评论中添加了我的网站文章url。③我在简书的软文中添加了我网站的url。 **方法展示** ![友情链接](https://images.gitee.com/uploads/images/2019/0629/223910_536fc3ce_2188375.png "fa6f52e78ad287db83471257c36bdf0.png") ![知乎](https://images.gitee.com/uploads/images/2019/0627/183529_eb583845_2188375.jpeg "知乎.jpg") ![简书](https://images.gitee.com/uploads/images/2019/0627/183558_242a4557_2188375.jpeg "简书.jpg") **成效** jetpack网站数据统计表中可以看出我网站的浏览量提高了，证明添加外链有利于增加网站的曝光率，提高网站流量。 ![方法3成效](https://images.gitee.com/uploads/images/2019/0627/173037_3da0aca4_2188375.png "jetpack外链添加.png") - #### 方法四：**添加内链**：我的文章分上下篇，我在上篇的文末添加了下篇的链接，下篇文首添加了上篇的链接。通过内链提醒用户还有上/下篇，减少用户的动作，增加这系列文章的点击率。 **方法展示** ![方法4](https://images.gitee.com/uploads/images/2019/0627/170424_985b10cf_2188375.jpeg "内链.jpg") **成效** 有内链的页面的点击率分别在一个星期内均有提高 ![方法4成效](https://images.gitee.com/uploads/images/2019/0628/002528_6e446f5f_2188375.jpeg "seo4整合.jpg") ## 用户研究 ### 1. 用户访谈： 本人一共对6位用户做了用户访谈。访谈的内容为：网站速度、页面排版、文章排版、侧边栏功能。 根据用户访谈，总结得出：用户认为我网站的页面排版欠妥，文字过多会带给他们疲劳感且范围不明朗；文章内的图片尺寸过小且靠左排列的布局不美观；其他功能尚可。 - #### 修改一：根据用户建议我对我的页面排版做出修改，添加了特色图片，让所有文章的的占位范围清晰易识别，使整个页面的元素更加丰富，提高了用户点击的兴趣。（下图为修改前后对比图） ![页面前后对比图](https://images.gitee.com/uploads/images/2019/0627/153956_ac5a74b9_2188375.jpeg "页面修改对比图.jpg") - #### 修改二：根据用户建议我对文章的排版做出了修改，将文章内的图片放大并居中，并对需要区分的区块添加了浅灰色的背景，提高文章可读性，使用户更容易找到其想浏览的信息，降低了阅读门槛。 ![文章前后对比图](https://images.gitee.com/uploads/images/2019/0627/155138_5c057b89_2188375.jpeg "文章修改前后对比图.jpg") ### 2. A/B testing： **首页布局方案测试** - **A方案总结**：共访问了3位用户，3位用户均认为A方案页面元素丰富，整体尚可，但是标题字号过大，“照片墙”的名字和其主打功能不突出，网站取名名不恰当。 ![原首页a](https://images.gitee.com/uploads/images/2019/0627/155203_032f1688_2188375.jpeg "原a首页_看图王.jpg") - **B方案总结**：共访问了3位用户，3位用户均认为B方案的首页排版布局过于单调，纯文字的布局在视觉上显得过于密集，会引起视觉疲劳，加上图片会让首页内容更加丰富。 ![原首页b](https://images.gitee.com/uploads/images/2019/0627/155233_72f6014a_2188375.jpeg "原b首页_看图王.jpg") **综合用户的意见和方案的可行性，我选择了A方案，因为A方案的视觉元素较为丰富，能突显网站特色，做到网站可视化，并且我对A方案的“照片墙”和网站主题名作出了修改，原来的“照片墙”改为“热门推荐”点击图片就能链接到热门文章；原来标题为“网站可用性&用户研究资料”，现改为“南苑用户研究站”。（效果如下图所示）** ![abtesting修改效果](https://images.gitee.com/uploads/images/2019/0628/005536_ce8e744e_2188375.png "abtesting修改效果.png") - **用户访谈和ABtesting录音文件在仓库的【用户访谈+ABtesting录音文件】文件夹中** ### 3. 定制化： - #### 改Css。 根据用户访谈信息，6名受访用户一致认为我网站的标题字号过大和网站标题取名不当。因此我使用css讲原来150px的字号，修改定制为66px的字号，并根据网站调性定制了一个独特的名字。 **css修改图** ![css修改图](https://images.gitee.com/uploads/images/2019/0627/155305_f6060c20_2188375.jpeg "css修改前后图.jpg") **效果对比图** ![定制化效果](https://images.gitee.com/uploads/images/2019/0628/000336_93b2971e_2188375.jpeg "定植前后对比图.jpg") - #### 安装加速插件 根据用户访谈信息，6名受访用户中有5名认为我的网站加载速度一般，1名认为较慢。考虑到我的网站图片较多，加载速度对网站的访问量有很大的影响，因此我添加了WP Super Cache这个插件，让网站加载速度更流畅，用户使用更舒畅。 **首先安装插件** ![添加插件](https://images.gitee.com/uploads/images/2019/0627/012533_493205c4_2188375.png "加速器1.png") **其次勾选需要的选项** ![第一步](https://images.gitee.com/uploads/images/2019/0627/012714_dc72e555_2188375.png "加速器2.png") ![第二步](https://images.gitee.com/uploads/images/2019/0627/012734_e6b10487_2188375.png "加速器3.png") 未装插件前：电脑端首页加载用时6秒，文章加载需4秒；手机端用时10秒，文章加载需4秒。 安装插件后：电脑端首页加载用时3秒，文章加载需2秒；手机端用时7秒，文章加载需3秒。 - #### 添加预加载动画 因为用户在进入我网站的时候，有可能遇到网速慢、信号不好的情况。如果没有预加载动画，手机或者电脑屏幕很可能一片空白。用户可能会产生“我的网站“不能进去”或者“手机坏了”等一系列不安的想法。因此增添了预加载动画能够让用户知道我的网站是有在行动的，给予用户反应，能降低用户的疑虑，符合以人为本的设计。 **方法** 选择安装一个有“预加载动画功能”的主题，勾选开启预加载动画即可。开启后我的网站在跳转页面的时候下图三个蓝色的小矩形就会动起来了。 ![预加载方法](https://images.gitee.com/uploads/images/2019/0629/232209_22e49b68_2188375.png "预加载1.png") **效果图** ![预加载效果图](https://images.gitee.com/uploads/images/2019/0629/232226_b0c71368_2188375.png "预加载2.png")