# ideas-web-operation **Repository Path**: ZhuDilun/ideas-web-operation ## Basic Information - **Project Name**: ideas-web-operation - **Description**: 网站运营与管理｜期末项目：IDEAS - **Primary Language**: 其他 - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-17 - **Last Updated**: 2022-05-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # IDEAS—运营报告 网站名称 | IDEAS ---|--- 网址 | [https://dilun.design](https://dilun.design) 站长 | 朱迪伦 1910130018 运营报告撰写人 | 朱迪伦 1910130018 # 1. 策划 ### 1.1 策划文档与网站地图 - 网站建设目标：通过本网站，用户可以获取国内外前沿的设计资讯与分析，以及与设计相关的理论、历史、技术知识。帮助设计师和设计爱好者们提升自己的设计能力。 - 目标用户画像： ![用户画像](images/1-user.png) - 网站规划： - 对应网站用户需求，在网站的导航栏设置五个栏目，分别对应灵感资讯、设计理论、艺术历史、创意分析、设计技术，并在其下放置对应的文章。 - 完善网站所需的排版设计、功能组件，并将网站连接到微信小程序中进一步推广。 - 其后展开对各栏目的文章内容定期更新。 - 在网站获得一定用户群体后，考虑引入付费墙模式，对特定高质量文章、教程进行付费阅读，促进网站的良性发展。 - 根据用户调研的结果进行目标的调整：通过文章页面中的社交媒体分享、点赞文章、评论文章三个区块，满足用户渴望分享与评价设计作品的需求，促进网站用户的良好互动与相互学习。提供反馈渠道以便日后针对用户痛点来对网站进行优化升级。并做好文章、图片版权保护的工作，向用户彰显设计网站对版权的重视。 - DVF模型： ![DVF模型](images/2-DVF.png) - 网站地图： ![网站地图](images/3-sitemap.png) - 文章偏向于动态，而页面偏向于静态。一般不经常改动页面。 - 页面与分类标签可以承载文章，为文章提供集中展示的地方。而文章仅展示文章自身对应的内容。 ### 1.2 平面设计插件运用 #### Animate it! 由于网站的主题已经附带了较多的动画效果，在此基础上再增加动画效果只会让网站变得繁杂。故以下动画效果均为为增加用户粘性而设的。在保持网站界面动效合理的同时，为用户提供“发现彩蛋”般的乐趣。 1. 在页面底部搜索框上方添加了```animated zoomInRight duration2 eds-on-scroll```。一句随用户滚动到底部而出现的至理名言“Think different.”为网站增加了趣味性，同时也符合网站主题。[效果链接](https://dilun.design) ![动画1](images/4-animate-1.png) 2. 在关于我们页面的网站Logo中添加了```animated jello duration2 eds-on-click```。用户点击后可以看到Logo跳动一次的效果。[效果链接](https://dilun.design/about/) ![动画2](images/5-animate-2.png) #### SiteOrigin - 在5个页面（灵感资讯、设计理论、艺术历史、创意分析、设计技术）中添加了文本框与SiteOrigin Post Carousel。向用户介绍每个栏目的设立意义；同时利用Post Carousel展示最新文章。[效果链接1](https://dilun.design/design-news/) [效果链接2](https://dilun.design/design-theory/) [效果链接3](https://dilun.design/art-history/) [效果链接4](https://dilun.design/idea-analysis/) [效果链接5](https://dilun.design/design-technology/) ![site1](images/6-SiteOrigin-1.png) - 在关于我们页面中添加了SiteOrigin Editor与文本框，用作网站Logo与版权展示，以及站点介绍。[效果链接](https://dilun.design/about/) ![site2](images/7-SiteOrigin-2.png) - 以上**共计6个页面**正确使用SiteOrigin。 ### 1.3 平面设计 - 网站 - 配色：网站的主色调使用了黑、白、蓝三色。蓝色作为高亮强调色出现。使整体风格呈现出具有设计感、简洁感与专业感的视觉体验。 - 对比度：在纯白背景下，文字颜色使用黑色；在灰黑背景下，文字颜色使用白色。主内容字体大小为16号。黑色和白色的鲜明对比使文章内容更加突出，易于用户阅读。 - 可读性：本网站文章均有配图、适和长度的副标题、内外链等，且段落数及文字数量均在合理范围内，可读性较强。 - 图片 - 图库版权：每篇文章中原创的图片通过Wordpress媒体库上传；每篇文章中非原创的每张图片均通过原网站**URL引入**。 - 图片风格：本网站内每一篇的文章的图片均与各文章主要内容相符。添加的图片均为具有较高美感与设计感的照片，与本网站的目标用户相符，赏心悦目。 --- # 2. 管理 ### 2.1 云端架站 正常可用的云端网站，使用域名：[IDEAS - 设计创意资讯平台（https://dilun.design）](https://dilun.design) ### 2.2 网站安全：Wordfence - 通过拦截攻击折线图可知，互联网上的网站时时刻刻都在受到攻击，要做好网站安全措施。 ![网络攻击](images/8-wordfence-1.png) - 通过扫描结果得知，本网站安全系数较高，各项内容均没发生异常，安全问题不大。 ![搜索结果](images/9-wordfence-2.jpeg) ### 2.3 网站性能：Site24x7 - 添加8个各大洲的主要城市为监控点进行网站性能的监控，并重点关注东亚文化圈（因为本网站语言为中文），以此了解网站的整体性能。 - 通过数据可知本网站的平均响应速度为0.725秒，处于可以接受的范围。 - 本网站的可用性为100%，停机时间为0，各监控点均能正常访问本网站。 ![site24x7](images/11-site.png) ### 2.4 网站备份 - 宝塔定期备份网站计划 ![备份](images/12-backup-baota-1.png) ![备份](images/13-backup-baota-2.png) - 将wp-config.php备份本地 ![备份](images/14-backup-php.png) - 备份数据库（sql文件） ![备份](images/15-backup-sql.png) - 提供通过wordpress后台导出工具导到本地 ![备份](images/16-backup-Wordpress.png) - 备份文件夹 ![备份](images/17-backup-folder.png) --- # 3. 运营 ### 3.1 站长工具 - 百度 Baidu ![Baidu](images/18-baidu.png) - 必应 Bing ![Bing](images/19-bing.png) - 谷歌 Google ![Google](images/20-google.png) **百度收录速度较慢。** 在提交网站地图后4日才完成URL捉取，15日后才能检索到本网站。 **Bing 与 Google的收录速度较快。** Bing 在申请站长认证与提交网站地图当天就可以检索到本网站了。而谷歌在未认证站长前已经可以检索到本网站，在认证站长后次日可以开始看到相关流量数据。 ### 3.2 内链与外链 在网站与文章中添加了一系列的内链与外链 - 内链示例 ![内链](images/32-internal-link.PNG) - 外链示例 ![外链](images/33-external-link.PNG) ### 3.3 SEO优化 #### 3.3.1 SEO优化方法 ##### 方法一 为图片添加Alt文本（替换文本），让搜索引擎了解到图片的内容，使图片更加容易被搜索引擎加入索引。 效果：对文章的阅读量增加效果不太明显。但作为图片无法显示出来时的补救措施，为图片添加Alt文本很好地确保了用户在特殊状况下的阅读体验。 ![替代文本](images/21-seo-1.png) ##### 方法二 增加面包屑导航，通过该导航可以建立起完善的复杂的网站内部链接结构，方便搜索引擎通过一个页面，访问其他任何一个页面。 效果：对网站的访问量有一定的增加作用，访客量不断增加。同时，面包屑导航对于用户体验（UEO）来说是非常好的，能帮助用户快速定位和跳转。 ![面包屑导航](images/22-seo-2.png) ##### 方法三 优化文章URL。简明扼要的URL方便搜索引擎抓取网站。 ##### 方法四 利用Yoast SEO，为文章添加文关键词和元描述，同时为增加文章内链与外链，增加搜索引擎的收录机会。 效果：因为网站尚属起步阶段，暂时对文章的阅读量增加效果不太明显。但简洁易记的URL方便了用户的记忆和对文章内容的大致了解。描述也方便了用户在站外搜索引擎中快速了解文章的内容。 ![优化URL](images/23-seo-3.png) ![Yoast](images/24-seo-4.png) ##### 方法五 提交网站的Sitemap、链接提交到Google、Bing和Baidu的站长工具中。 效果：增加了网站页面在搜索引擎中的收录数量，让网站有更多的曝光度。 ![站长工具](images/25-seo-5.png) #### 3.3.2 SEO方法成果分析 ##### 总体成果 网站的浏览量在完成SEO优化后获得了一定程度的上升。 ##### SEO优化前后数据对比 ![jetpack数据](images/26-jetpack.png) * 20年12月26日开始发布文章，但由于刚开始未被百度、Bing、Google收录，流量数据并不乐观。 * 20年12月31日开始，对网站的SEO做了相应优化，并向朋友们推荐本网站，浏览量与访客量开始有上升。 * 21年1月3日，网站流量达高峰，甚至还有一位用户为文章进行了评论。 * 此后一直保持文章的更新，浏览量趋于平稳。 ##### 分析原因 1. 网页浏览量增加有一部分是 Site 24x7 的定时监控带来的，但排除这部分浏览量，还是可以看到在监控范围外地区的用户对网页的浏览。网页的浏览量和文章的浏览量都有部分提升。 2. 向朋友推荐本站点和把网站连接到小程序中，对网站起到宣传作用，增加了浏览量。 3. 主动提交了Sitemap、链接，网站更容易被搜索引擎收录。 4. 完成SEO优化并定期更新网站的文章，确保了网站的活跃度。 ### 3.4 用户研究 #### 方法一：用户访谈 受访者信息：5名中国大学生，来自于不同年级、专业。 访谈目的：通过用户访谈，得到用户需求与反馈，以此对网站进行改进，做定制化的设计。 访谈流程：受访者浏览网站后，针对网站的各方面说出个人想法，并给出相关建议。 产品|内容|用户|目标 ---|---|---|--- 设计创意资讯网站|分享前沿设计资讯与分析，及设计相关的理论、历史、技术知识。|设计爱好者、初级设计师|了解网站运营效果与用户需求，改善网站质量与不足之处，提升文章阅读量与网站浏览量。 问题|您在浏览本网站时有没有遇到什么障碍？|本网站是设计类网站，您希望从这个网站得到什么内容？|网站的文章是否满足您上述的需求？|网站整体的平面设计是否赏心悦目？|本网站您最喜欢和不喜欢的地方是？ ---|---|---|---|---|--- 访谈总结|受访者均没有遇到障碍，认为网站指引清晰。|受访者期望得到的内容与网站的五个栏目相符，同时希望有更多其他设计领域的优秀作品。|受访者均认为网站文章内容基本满足其需求，但可以更加丰富。|受访者均对网站设计赋予好评。|受访者均对文章内容丰富程度表示满意。一位受访者认为，文章页白色背景较单调。一位受访者认为，可以丰富网站的互动功能。 📎 附：部分用户访谈截图 ![部分访谈截图](images/27-screenshot.PNG) #### 方法二：用户旅程地图 ![用户路程地图](images/28-user-journey.png) ### 3.5 定制化 #### 方案一：防盗版需求 安装WP Content Copy Protection & No Right Click插件，让用户无法复制文章的文字与图片内容，保护文章作者权益，提高版权意识。 ![防盗工具](images/29-copyright.png) #### 方案二：用户互动需求 添加“赞”按钮、共享按钮以及评论区，满足用户渴望分享与评价设计作品的需求，促进网站用户的良好互动与相互学习。相关文章推荐栏，方便用户在不用看完一篇文章后可以继续深度阅读与此相关的其他文章。 ![点赞分享](images/30-share.png) --- # 4. 网站连通小程序与HTTPS #### 4.1 网站连通小程序 [录屏展示](https://gitee.com/ZhuDilun/ideas-web-operation/blob/master/mini_app.mp4) 成功将Wordpress网站连接到微信小程序上，并针对小程序功能、界面与网站主题做出相应调整。使Wordpress网站与微信小程序二者相得益彰。 ![小程序](images/30-mini.PNG) ![小程序](images/34-mini-2.png) #### 4.2 使用HTTPS：https://dilun.design ![https](images/31-https.png) # 5. 微信小商店小程序 ![小商店](mini-shop.PNG)