一、404页面是什么
404页面,即在互联网上访问不存在的页面时,服务器无法提供访问的页面,会返回一个状态码为404的页面。
通常情况下,404页面呈现的是一个空白页面,或者只是简单的文字提示。但随着互联网的发展,越来越多的网站开始注重404页面的设计,使得这些页面不只是提供错误信息,而成为网站设计中重要的一环。
二、好看的404页面有何特点
一份好看的404页面,至少应该具备以下特点:
1、与网站整体设计风格保持一致,形成统一的品牌形象。
2、提供友好且有趣的提示语,让用户感受到温暖和乐趣。
3、提供可操作的页面元素,例如返回首页、搜索框等,方便用户快速找到需要的页面。
三、好看的404页面的设计案例
1、Lost in Space
这是一个来自Broken Links网站的404页面设计案例。背景是外太空环境,一只太空龙虎和太空人在寻找着遗失的404页面。提示语也很有趣,“继续飞向新的页面!”,并提供返回首页的链接。
<div class="container"> <div class="error"> <div class="spaceship"> <img src="http://www.example.com/images/spaceship.png" alt="Spaceship"> <img src="http://www.example.com/images/shadow.png" alt="Shadow"> </div> <div class="planet"> <img src="http://www.example.com/images/planet.png" alt="Planet"> </div> <div class="astronaut"> <img src="http://www.example.com/images/astronaut.png" alt="Astronaut"> </div> <div class="dragon"> <img src="http://www.example.com/images/dragon.png" alt="Dragon"> </div> <p class="title">404—Lost in Space</p> <p class="sub-title">We're sorry, but the page you're looking for can't be found. Keep searching for a new one!</p> <a href="/" class="button">Take Me Home</a> </div> </div>
2、Figma
这是一份来自Figma网站的404设计案例。404页面的背景采用了动态的波浪线,以及有趣的文案提示——"页面不见了",并提供了两个可操作的功能,分别为重新搜索和返回到上一页。
<div class="container"> <div class="wave"> <img src="http://www.example.com/images/wave.gif" alt="Wave"> </div> <div class="text"> <p class="title">页面不见了</p> <p class="sub-title">我们发现您似乎迷路了,请重新搜索或返回您之前的页面。</p> <div class="buttons"> <a href="/" class="button">重新搜索</a> <a class="button goBack" onclick="goBack()">返回上一页</a> </div> </div> </div>
3、GitHub
Github的404页面借鉴了火星探险器背面上印刻着人类艺术品的设计, 显示了一个图形化的太空场景,形象生动,给用户带来了趣味感和科技感。
<div class="container"> <svg> <defs> <pattern id="pattern" x="0" y="0" width="70" height="70" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="70" stroke="#4E5F7B"></line> <line x1="0" y1="0" x2="70" y2="0" stroke="#4E5F7B"></line> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="#0DC9F7"></rect> <rect x="40" y="40" width="260" height="80" fill="url(#pattern)" transform="rotate(45)"></rect> <rect x="140" y="140" width="160" height="320" fill="url(#pattern)" transform="rotate(45)"></rect> <text x="180" y="240" font-size="30" font-weight="bold" fill="#f2f2f2">404</text> </svg> <h1>Oops, This Page Could Not Be Found!</h1> <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p> <a href="/" class="button">Take Me Home</a> </div>
四、结语
好看的404页面虽然在用户体验中只占了一小部分,但却是建立品牌形象,让用户感到趣味与惊喜的重要一环。希望以上设计案例能够给各位开发者带来一些启发。