# 网站报告 **Repository Path**: NFUNM024_admin/wangzhanbaogao ## 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-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站报告 [黄汉铭的网站——音乐推荐网站](http://huanghanming.me/) ## 策划档案和网站地图 #### 网站建设目标 1.收集音乐资讯提供给喜欢音乐的人或是观看 2.给歌荒的人提供音乐或是专辑的推荐 3.以及对歌手/乐队详细信息的整理让用户更加了解他们喜欢的歌手/乐队 #### 目标用户画像 + 目标用户：喜欢音乐希望得到更多流行音乐资讯和了解音乐内容的年轻人 + 用户画像 + A：大二，男。喜欢听歌每天大多数时间都戴着耳机，有自己喜欢的歌手和音乐类型，经常会花费很多的时间来找符合自己胃口的个，而且会经常在歌曲的评论区留言和分享心情。 + B：大二，女。喜欢听歌但只会听自己喜欢歌手的，而且很喜欢在网络上查找自己喜欢歌手的最新咨询和消息，一般是自己喜欢的歌手出什么歌自己就跟着听。 + C：大二，男。喜欢听歌但不会自己主动找歌多数听的歌都是网络推荐或是朋友安利的，不喜欢在歌曲评论里评论没有自己喜欢的歌手和风格属于什么觉得好听什么的人。 #### 网站规划等前期策划内容 1.先将网站架构搭好添加基础内容，再通过用户使用后的反馈添加一些新的内容或功能 2.设定网站主题为音乐推荐，但喜欢听歌的用户又不仅仅只需要单纯的音乐推荐有为此想要做一个涵盖较为全面的不仅仅局限于音乐推荐的网站 3.设置3个主要的分类项目（专辑、音乐资讯、歌手/乐队） ##### DVF模型定义需求 + 用户的需求性：用户想要一个能够给他们推荐音乐的网站，除此之外他们还希望找到喜欢相同类型音乐的群体能够在自己的群体内交流互动，同时还希望得到一些音乐相关的资讯类似演唱信息或是新专辑的发布 + 商业的延续性：前期可以用高质量的文章吸引用户使用网站，同时开放不同专区让用可以在网站上找到自己的群体。等到用户数量变多就可以实行会员推荐制会为会员精选或定制音乐推荐，同时还可以与卖票网站和周边网站合作开放优惠团购活动。 + 技术的可行性：添加详细的分类，完善登陆系统，使用合理的网站排版，开放评论系统和推荐系统。 ##### 网站地图 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/183958_0af84d83_1831506.png "主页 (1).png") ## 图片的使用 #### 非原创图片 非原创图片在图片的注释中会添加图片的来源 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/202640_260de990_1831506.png "微信图片_20190630202538.png") + [coldplay专辑封面](http://music.163.com/#/artist/album?id=89365&limit=12&offset=72) + [首页背景](http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=coldplay&step_word=&hs=0&pn=6&spn=0&di=6710&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3688411236%2C2106489139&os=891950467%2C2404464634&simid=3353548539%2C4154695404&adpicid=0&lpn=0&ln=1655&fr=&fmq=1561897819824_R&fm=result&ic=16&s=undefined&hd=&latest=©right=&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpapers.co%2Fwallpaper%2Fpapers.co-ab51-wallpaper-coldplay-concert-blue-36-3840x2400-4k-wallpaper.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Frwrj6f_z%26e3Bv5AzdH3Fwkc8-owssrwrj6-v5s1rswy-v5gvj6p-ks7jAzdH3F&gsm=b4&rpstart=0&rpnum=0&islist=&querylist=&force=undefined) + [文章背景](http://image.baidu.com/search/detail?ct=503316480&z=3&ipn=d&word=coldplay&step_word=&hs=0&pn=7&spn=0&di=9900&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=400881900%2C1152994396&os=4203022788%2C395794326&simid=0%2C0&adpicid=0&lpn=0&ln=1655&fr=&fmq=1561897819824_R&fm=result&ic=16&s=undefined&hd=&latest=©right=&se=&sme=&tab=0&width=0&height=0&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F01%2F20150301034123_XtQUR.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3D0mcm0ncdn&gsm=f0&rpstart=0&rpnum=0&islist=&querylist=&force=undefined) + [首页背景](http://image.baidu.com/search/detail?z=0&ipn=d&word=coldplay&step_word=&hs=0&pn=4&spn=0&di=0&pi=&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&cs=175989992%2C3950074393&os=30713394%2C2010011893&simid=&adpicid=0&lpn=0&fm=&sme=&cg=&bdtype=0&simics=534726046%2C164687162&oriquery=&objurl=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2Fa0930e05gw1es1wf2s9atj21kw148tqo.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bok1wv1g_z%26e3Bv54AzdH3F7fj6AzdH3F8lcalaml00AzdH3Ffpwp7f9al0m0nl8ablbdld_z%26e3Bip4s&gsm=0&islist=&querylist=&cardserver=1) + [fall out boy介绍](http://image.baidu.com/search/detail?ct=503316480&z=3&ipn=d&word=fall%20out%20boy&step_word=&hs=0&pn=4&spn=0&di=2200&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=227412805%2C1997420995&os=1027062085%2C3268980821&simid=0%2C0&adpicid=0&lpn=0&ln=261&fr=&fmq=1561898124687_R&fm=result&ic=0&s=undefined&hd=&latest=©right=&se=&sme=&tab=0&width=0&height=0&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Ffmqb.name%2Fwp-content%2Fuploads%2FFALL_OUT_BOY_2017-1280x640.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fu4qk_z%26e3Bgw4jAzdH3Fuwss-57p-k5y-ijw1stgtg2-27g-v5gp65s-kjgjutp-v5gvj6p-tg-1-vAzdH3F&gsm=78&rpstart=0&rpnum=0&islist=&querylist=&force=undefined) #### 图库风格及配色 图库风格主要偏简约，所选择的图片多为专辑封面或是歌手照片且整体的配色为蓝色、黑色和白色 + 主页 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/204444_5bb8ea31_1831506.jpeg "微信图片_20190630204136.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/204617_b0521a16_1831506.jpeg "微信图片_20190630204557.jpg") + 文章页 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/204634_77d1a28a_1831506.png "微信图片_20190630203729.png") ## 架站文章 [网站搭建](http://huanghanming.me/category/%e7%bd%91%e7%ab%99%e6%90%ad%e5%bb%ba/) ## 平面设计 #### 背景、字体使用、网站配色、对比度与可读性 + 背景及网站配色：网站站的背景主要使用的是演唱会照片以及音乐专辑封面。且主要颜色都为蓝黑色，使用蓝色为主色调主要是因为表现的是沉稳、安详和音乐的特性很相符 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/211453_cf959199_1831506.jpeg "微信图片_20190630211427.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/211705_8fd01d51_1831506.jpeg "微信图片_20190630211643.jpg") #### 字体使用： + 主要运用的字体是serif ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/212334_b2f26f2f_1831506.png "微信图片_20190630210823.png") #### 对比度与可读性 + 首页的颜色只要是暗蓝所以在字体颜色上选择的是白色和亮蓝以此来突出文字和背景的对比度使可读性更高 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/213225_15c64dc5_1831506.jpeg "微信图片_20190630213201.jpg") + 在文章页文章的背景为白色所以字体颜色选择了黑色以此来突出文字和背景的对比度使可读性更高 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/213350_65d7ad9b_1831506.png "微信图片_20190630213306.png") + 跳转链接使用的是紫蓝色以此来强调链接点击位置 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/213437_c9930c92_1831506.png "微信图片_20190630213325.png") #### 插件运用 + Animate it! 1.在首页显示上添加了渐出的效果，用户在下滑浏览页面的时候会有过渡效果 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/214000_46d1aa35_1831506.jpeg "微信图片_20190630204557.jpg") 2.在文章页内添加了箭头运动指示来提醒用户这是重要链接 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/214142_59f5d1b7_1831506.png "微信图片_20190630214125.png") + SiteOrigin 1.在首页添加了SiteOrigin Slider来展示专辑封面 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/214851_4e5a93de_1831506.png "微信图片_20190630213904.png") 2.添加了SiteOrigin Post Carousel来展示全部文章 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/214913_61033818_1831506.png "微信图片_20190630213834.png") 3.在文章页中添加了SiteOrigin Button来实现文章的跳转 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/215014_876b8912_1831506.png "微信图片_20190630214949.png") ## 云端网站管理 #### 1.云端架站 + 正常可用的云端网站，使用域名[Musique](http://huanghanming.me) ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/215259_66910c3c_1831506.jpeg "微信图片_20190630215218.jpg") #### 2.网站安全 + 使用Wordfence ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/215711_05fe0c3f_1831506.png "微信图片_20190630215543.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/215721_30bc1b57_1831506.png "微信图片_20190630215647.png") #### 3.网站性能 可用性：较差 期间出现过两次数据库断连导致网站打不开使得可用显示可用性的百分比很低 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220029_903aaae0_1831506.png "微信图片_20190630215823.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220039_ad2885a1_1831506.png "微信图片_20190630215827.png") #### 4.网站备份 使用wordpress备份 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220257_e10e827e_1831506.png "微信图片_20190630220117.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220308_616212f8_1831506.png "微信图片_20190630220224.png") ## 站长工具 #### 站长认证 + baidu站长认证（已被收录） ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220538_fb37169c_1831506.png "微信图片_20190630220528.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220656_9e46f141_1831506.png "微信图片_20190630220623.png") + bing站长认证（已被收录） ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/220906_4b5655aa_1831506.png "微信图片_20190630220827.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/221001_732e8dd2_1831506.png "微信图片_20190630220940.png") #### SEO优化 + 在百度和bing上提交了sitmap ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/221833_21ef2260_1831506.png "微信图片_20190630221826.png") + 在文章中添加了内链外链 1.文章上下篇链接 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/221900_6755f4c5_1831506.png "微信图片_20190630214949.png") 2.歌曲网址 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/221926_8deb48f5_1831506.png "微信图片_20190630213325.png") + 给文章添加了关键词 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/222024_9ae5824f_1831506.png "微信图片_20190630221626.png") + 在bing上提交了文章页的url ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/222110_265e476c_1831506.png "微信图片_20190630221536.png") #### 优化结果 在使用seo优化后网站的浏览量有明显的上升 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/222319_586a796c_1831506.png "微信图片_20190626224200.png") #### 原因分析 1.提交sitmap使得搜索网站收录同时可以从多个url抓取数据页面所以浏览量提高了 2.在文章中添加了内链外链 内链使得文章之间都有链接相互点击 外链是得外部网站可以直接通过链接点进网站 这两个都是通过增加网站内外曝光率来达到浏览量增加的效果 3.给文章添加了关键词可以使文章分类更加清晰使得使得你文章的搜索引擎排名相对上升，同时使得浏览量上升 4.在bing上提交了文章页的url，这样bing的搜索网站可以同时显示你网站的多个页面和文章以此来增加浏览量 ## 用户研究 #### 用户研究方法 ##### 用户访谈 根据用户访谈发现有以下问题： + 网站分类太过笼统不够详细 + 网站的文章和别的类似网站相比太少 + 首页图片有一些违和感不太美观 影响设计： + 重新分类了网站分类，将笼统的分类变成更加细化的分类（专辑、音乐资讯、歌手/乐队） + 更多添加网站文章是网站内容更加丰富且多元化 + 把首页的页头照片和背景照片的颜色都换成了以蓝色为主色调的照片（之前的页头照片和背景照片分别为紫色和黑白） ##### A/B测试 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/225245_9c847dff_1831506.jpeg "微信图片_20190630215218.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/225304_c7604e78_1831506.jpeg "微信图片_20190630204557.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/225318_ef41e326_1831506.png "微信图片_20190630213834.png") A组：将首页的片头大图片去掉，调换了专辑封面/专辑推荐和全部文章的位置 B组：网站原首页 + A组的问题： 1.网站没有了图片之后内容显示有些突兀 2.专辑封面/专辑推荐和全部文章的位置感觉有些奇怪 + B组的问题： 1.网站的首页图片过大影响内容的观看使用 2.网站的首页颜色偏暗 影响设计： 1.把网站首页的图片更改为以蓝色为主要颜色的图片来使首页亮度提高 2.把首页大小的图片进行裁剪，使其不影响使用 3.把调换了专辑封面/专辑推荐和全部文章的位置 ## 定制化 + 添加了音乐播放的功能的插件：满足了用户再看音乐推荐文章的同时也能够听到推荐的音乐方便了用户节省了用户时间，同时提高了推荐的效率 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/230306_419837da_1831506.png "微信图片_20190630230253.png") + 插件可以保护我们的链接、内容不被他人复制，防止网站文章被剽窃，同时加强了网站的防护使用户使用更加安全 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/231026_619f5a17_1831506.png "微信图片_20190630231015.png")