订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 设计文章 > 不懂代码,如何制作漂亮的404页面【新手简易教程】

不懂代码,如何制作漂亮的404页面【新手简易教程】

Anne
2018-07-23
148216

404是用户在访问页面时,搜索引擎常返回的状态码,常见的还有200,301,302,500等。搜索引擎通过http状态码识别网页状态,404状态码,常指所访问的页面不存在或已被删除。

404页面,是用户访问不存在内容或者已删除网页时,呈现给用户的界面,又称404错误页面/404-Not Found。

携程的404页面

404页面常见误区

①网站没有设置404页面

404错误页面对用户而言:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开,消除用户的挫败感。

对SEO而言,没有404页面,会增加搜索引擎蜘蛛的丢失率,也会增加网站的跳出率,造成糟糕的用户体验。

②404页面没有返回网站的链接

404页面没有链接

比如某多多的404页面,只有404 Not Found,没有任何返回网站的链接。

搜索引擎蜘蛛是顺着超级链接爬取的,无论是横向爬取还是纵向爬取,没有返回链接,用户回不去,蜘蛛也回不去。只能进不能出,有来无回,蜘蛛就是这样被坑死的。

对搜索引擎友好的页面,需要有返回网站的链接,可以是首页、栏目页、活动页,也可以网站的导航栏。

③404页面使用了强制跳转

某品会的404页面使用了强制跳转,跳转到首页。实现跳转功能的方式有多种,meta标签、301、js等,但无论你用什么方式实现跳转,都对搜索引擎不友好。

404页面也是一个页面,搜索引擎蜘蛛在爬取页面的过程中,还没有爬完就被强制拽回到其他页面。就像你在吃饭,才吃两口,就被人强行拽走,是不是超级不爽。

优秀的404页面

综上所述,优秀的404页面应该具备如下条件

①必须有返回链接;

②不建议使用跳转代码,尤其是强制跳转;

③符合目标群体的趣味性。

优秀的404页面

王者荣耀网站的404页面设置很暖心,看到后,想重新回归了。

王者荣耀的404页面

如果比较幸运,有程序员支持,就可以省过调代码的过程。画好404页面的原型后,把404图片和原型效果图交由程序员处理。这里推荐款好用的原型设计软件Mockplus

原型设计工具Mockplus

原型预览链接:https://run.mockplus.cn/4xBue9UmTpFLvaUy/index.html


如果没有程序员的支持,你是新手小白不懂代码,也没关系,下面【新手简易教程】正式开始,教你如何制作漂亮的404页面。


第一步:选取你喜欢的404页面,右键查看源代码,全选复制。

这里以某个小型博客的404页面为例,地址:http://www.luokuangtui.com/404。你可以任意选取自己喜欢的404页面,步骤都是一样的。

404页面制作步骤1

第二步:新建文本文件(txt文件),命名404.html,扩展名改成.html。然后以记事本方式打开,粘贴刚才复制的代码。

404页面制作步骤2

第三步:制作404图片,保存到桌面。

或者把刚选取的404页面的图片,右键图片另存为,保存到桌面;也可以百度搜索404图片,选取一个自己喜欢的,保存到桌面。

第四步:在保存的代码中,Ctrl+F搜索,404页面中出现的汉字,找到需要修改的文本。

404页面制作步骤4

更改对应的跳转链接,文字,以及页面的标题,404图片的地址,不需要的也可以删掉。

第五步:修改完以后,文件-另存为,选择弹窗下方的编码方式,选择UTF-8,点击保存,替换原文件。

404页面制作步骤5

如果没有更改编码方式,则打开是乱码。网页编码常用的两种方式为:UTF-8国际通用版、GBK中文简体版。一般来讲UTF-8用的最多,出现乱码时,在UTF-8和ANSI总来回切换就行。

第六步:把html和404图片放在一个文件夹中,双击打开html查看效果,不满意的地方继续调整。

404页面制作步骤6

我在源代码基础上,调整了图片的尺寸大小,就是h1标签中的内容,如下。在改代码的过程中,零基础的朋友,可以多多百度。比如觉得文字和图片太紧,想加个空行,就可以搜索html加空行。

404图片参数设置

第七步:效果调整满意后,把html文件和404图片上传到网站的根目录下。

第八步:在主机管理后台-基础环境设置-404页面设置-选择404文件(/404.html),点击设置404错误页面。

成功后,等待几秒(后台反应时间),网站的404页面就设置成功了。如果操作过程中有任何疑问,欢迎留言哦。

好文推荐:

2018最佳网页设计:就是要你灵感爆棚!!!

创意进度条设计-12个优秀作品分享【附实例分析】

史上最全的Android开发学习教程集锦【初学者】

【附教程】2018九款最佳下拉菜单设计实例



【来啦!彩蛋君】Mockplus个人版免费赠送福利!限时限量!

Mockplus对接iDoc了,将原型接入产品工作流,增加了原型标注、评论、对比设计稿、全貌呈现等功能,诚邀体验!赠送Mockplus个人版!数量有限,先到先得!

专属激活码:Mock2019;

激活数量:限量150个;

有效期:2019年9月30日

激活地址:https://www.mockplus.cn/user/upgrade (登录/注册后输入激活码即可)

Plus,发布Mockplus原型到iDoc,还有更多大礼等你拿!

上一篇
导航栏设计:教你如何构建出色的用户体验

Naranja   07/24

今夏一起High,6000元大奖等你拿!

Jongde   07/20

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com