福州网页培训：创意404.html页面设计教程

404 (404 error) 是WWW网站访问时出现的错误页面, 表示链接指向的页面不存在。404是HTTP的一种标准回应代码, 即HTTP状态码, 表示网页服务器的响应状态。HTTP状态码大致被分成5类。“4”开头的数字表示请求出错, 影响了服务器处理, 即客户端错误。“0”表示网址错误。末尾的“4”表示在以“4”开头的错误代码中的顺序。

404页面在网站架构中起着非常重要的作用。它体现着一个网站的完整性, 当用户在页面访问错误的时候没有404页面, 那么操作就没法继续进行, 造成网页的死链接, 用户只能关闭窗口离开。反之, 可以跳转到其它页面。404页面的设计不仅是用户访问网站的反馈 , 也是网页设计中优化用户体验的重要工具。

404页面的表现形式多种多样, 最基本的功能是体现网页对用户的导示性。在操作方式上可以将404页面分为3类:直接显示错误页面、自动跳转到指定页面、引导用户选择其它页面。404页面设计有两种形式:默认的404页面和自定义404页面。默认的页面只是简单表述错误信息, 没有涉及设计内容, 而自定义页面则需要设计元素的填充并提供选择。从情感化表现形式可以将404页面类型分为文字引导型、色彩引导型、图形引导型等。

文字在网页设计中是最不可或缺的元素之一。从功能性角度来说, 文字是最直接、最准确的视觉沟通及认知方式, 是最能充分表达思想的媒介^[2]。它在网站中的主要作用是传递网站的内容, 使用户能够通过阅读来获得信息, 其次是传递文字本身的情感意义。文字的版式设计不仅体现了视觉传达的效果, 同时文字的编排设计也是一种创意思维体现的过程。在404页面中, 简单的文字引导是早期网站最常采用的方式, 见图1。“404 Not Found”这一文字信息, 不涉及设计内容, 单纯告知页面错误, 用户无选择, 只能关闭页面离开, 造成用户无措感。这种“冷冰冰”的交互形式已被设计师所摈弃。

在传播一个信息的过程中, 文字的内容往往需要合适的文字外观来表达^[3], 选用合适的字体、字号、颜色等元素进行设计更能满足用户的审美需求, 设计的层次性也更强。另外一种常见的纯文字引导页面, 见图2, 有文字层级的设计, 通过文字大小和直线区分层次, 使用了大量文字堆积来引导用户如何进行下一步操作。但在此过程中, 过多的技术术语是不应该出现在404错误页面上的, 因为很多用户可能无法理解这些术语, 反而会让用户感到困惑。

色彩是网页给人的第一印象, 给予网站以活力。色彩在网页中除了传达信息外, 在一定程度上还可以帮助用户阅读信息。不同的色彩所代表的性格不同, 给人的感受也不同。色彩本身并没有情感, 之所以会产生不一样的情感体验, 主要是各种色相、明度、纯度组合在一起所产生的不同效果^[4]。高饱和度的暖色更能够吸引用户的注意, 见图3。设计师用白色作为底色, 红、橙、黄组成交集饼图, 掺加了数学原理, 可以轻易将用户的视线引导到橙色表现的“404 page”上来, 巧妙地进行了视觉区分;再匹配文字的引导, 整体页面干净整洁, 条理清晰、主题突出, 通过色彩表现出的视觉层次效果, 引导用户在页面信息中找到有用信息。

图形在网站信息传达中可以辅助文字、引导阅读、增强网页的可读性, 利于人们的理解^[5]。图形相对于文字和色彩更加有生命力和活力。图形是404页面中最能表现创意的载体, 是设计师的创意思维表达和情感表达所在。在404页面中, 可以将图形分为3类:404图形创意类、矢量插画类和摄影图片类。

404图形创意类是以“404”文字为创意点所作的抽象或具象的设计。这一类型页面往往主题突出, 能够让用户快速了解图片所传达的信息, 信息更容易获取, 见图4。设计师用“404”所作的图形为主体, 白色为底色, 用饱和度较高的暖色填充色彩, “0”巧妙地转化设计为融化了的甜甜圈, 并在图形下配以诙谐的文字, 表示页面的错误, 再加上冷色块表示的返回按钮, 有冷暖对比, 使得设计主次分明、更加完整, 用户马上就能理解页面表达的内容, 视觉流程比较流畅。

图形图像最能表达设计师的创意, 表现形式更加多元。通常色彩使用较丰富, 对比强烈, 装饰性比较强, 比较有风格性和层次性。太空主题是这一类的页面最常用的表现形式, 见图5。设计师选用深蓝色作为背景色, 用明度较弱的蓝色表示404的状态, 是属于“面”的元素;页面上方有搜索、菜单栏等元素, 左上方还使用了点装饰页面, 达到视觉平衡;页面下方有返回主页等操作按钮, 并用线条进行页面分割;页面中央是设计师最想表现的内容, 宇航员和小火箭之间用线连接, 画面不会松散, 并在左侧用文字表示页面丢失在太空中。通过点、线、面的设计组合表达设计主题, 让页面更加完整, 版式也更加平衡, 同时有效地传达信息, 提升了用户体验。

摄影类的图片直接取材于生活, 能够更加直观地表现网页主题, 能够真实、细腻、生动地传递需要表达的信息。构思新颖独特的摄影图像, 能成功吸引用户的注意力^[6]。一些幽默的摄影图片通常会被应用在404错误页面中。而一种更值得关注的公益类题材的设计内容在近几年经常出现在404页面中。这类页面往往能够更加引起用户的情感共鸣, 直击用户内心, 并且在一定程度上有效利用了互联网资源, 见图6。腾讯、网易、搜狗等公司都使用了这种公益推广型的404页面, 或许相较于那些富有创意、幽默、有趣的错误页面, 这类的404页面表达方式更能引起用户的关注, 使得404页面发挥更多的作用。

情感化设计是设计师表达创意思维和设计表现的创意工具, 是让用户获得更好使用体验的表达方式。唐纳德·诺曼在《情感化设计》一书中指出, 情感化设计的3种水平:本能水平、行为水平和反思水平。本能水平的设计从产品的外形出发, 用户接受其传递的感情信号, 体现最直接真实的想法。行为水平的设计更加注重产品的使用效率和产品功能的提升, 旨在完善用户体验的方方面面。反思水平的设计在前两者的基础上对产品要求尽善尽美, 提高用户的愉悦感、满足感等情感体验, 培养用户对产品的忠诚度, 让产品的存在更加有意义。这三者密不可分, 相辅相成, 其设计的最终目标是在传递情感的过程中, 打动用户, 让用户对产品具有正确的认知, 快速获取所需信息。

本能水平的设计反映了用户对产品的第一印象, 就是即刻的情感效果^[7], 这是发自用户的本能感受, 是体现良好用户体验的第一步, 也是本能水平设计的基本原理, 遵循这些原理, 简单或复杂的设计, 都是很吸引人的, 并且这种情感体验也会让用户产生情感记忆。本能水平的设计体现在404页面中是网页中的文字、色彩、图形等视觉元素。文字的多少大小、色彩的对比形式、图片的大小位置等元素在版式设计中的关系都是需要设计师用情感去设计的, 根据特定的内容和主题, 按照主次顺序和形式美法则进行排版布局^[8], 从而向用户传达网页信息。

文字图形具有很好的指示性, 但是同时也会缺少趣味感^[9]。在404页面设计中要充分展示页面设计的独特性, 抓住创意点去设计, 快速有效地吸引用户是设计关键, 必须考虑到网页界面拥有足够的视觉冲击力以及美感, 才能激发用户的内在情感^[10]。醒目的标题或文字向用户说明出现当前页面的原因是本能水平设计的关键点所在, 或许适当的情绪化体现在设计中更能呼应用户面对错误页面时的无措感或恼怒感, 见图7。一个小孩因为哭泣冒出的鼻涕泡, 将“0”这个数字图形化为鼻涕泡, 显得页面很有趣, 将用户的视觉焦点牵引到“404”这一错误状态上来, 并用简单的文字说明了页面的错误, 在一定程度上弱化了用户面对错误页面的不悦感。

行为水平的设计中最重要的是体现产品的功能, 强调产品的可用性和性能^[11], 也是实现产品价值的首要任务。然而, 怎样实现产品功能, 满足用户需求, 或许并不容易。产品的个性是情感化体现的平台, 产品的个性影响感知^[12], 诺曼在书中提到产品开发有改进和创新两种形式。因此, 抓住404错误页面这一让用户感到困惑的痛点, 通过改进和创新设计, 从而使产品本身的功能性得到最大化体现。

为了保证404页面的有效性和引导性, 从本质上来说设计内容应当简单, 保持视觉上的简约, 应当说明用户当前遇到了错误以及如何离开此页面。在错误页面中, 视觉符号的合理配置是优化用户体验的基础。可以简化页面信息, 删减掉不必要的功能, 只提供几个简单能够导向的选项, 并在设计流程中充分考虑这些选项的功能, 让页面既好看又有用, 见图8。404作为标题, 在深色底色中, 是比较显眼的视觉元素, 并在其下方说明页面错误, 用带有箭头的色块表示不同的选择, 引导用户离开, 视觉流程简单明了, 直接将404页面设计的关键点体现出来。

反思水平的设计是对本能水平和行为水平设计的进一步完善, 需要考虑到产品本身及其周边环境的关系, 更加注重产品的自身情感性。优秀的404错误页面应当首要思考和所属网站的联系, 保持设计氛围的一致, 快速有效引导用户完成操作, 不需要过多的噱头, 它的传递方式应该恰当, 它的风格和结构应该恰当, 最重要的是内容应该恰当^[13], 设计的内容应当是适合用户的, 符合它存在的情境, 也许“少就是多”的设计反而能使用户体验更加良好。有时不恰当的或过度的设计反而会引起用户对产品的不满, 见图9。页面总体设计比较完整, 设计风格统一, 标题简明扼要告知用户页面的错误信息, 为了增加页面的趣味性添加了吃豆人的小游戏。但是, 在404页面中, 最重要的功能就是快速引导用户离开此页面, 消除用户的无措感, 而不是让用户浪费更多的时间在当前页面, 添加游戏的设计行为是否是一种过度的设计也有待商榷。

404页面是网页设计中的功能性页面, 它使用的频率高、指令性强, 容易影响人们在网页交互中的用户体验。当前的网页设计越来越人性化, 网页设计符号的表现形式过于冰冷会影响用户的良好交互;同时, 在网页设计中过度设计会造成视觉系统的混乱, 而引起信息的误读。因此, 建立良好交互的同时, 增加页面设计的情感化体验需要遵循适度设计的法则。从用户的本能水平、行为水平、反思水平3个方面切入404页面设计, 形成情感化设计的交互框架, 能够避免设计感官层面和经验式反馈的局限, 从而进行有序分类研究和针对性设计, 达到提高404图形识别度, 快速有效确认信息的目的, 同时增进交互体验和审美趣味, 提高户体验水平, 促进良好交互的形成。文字、色彩与图形等设计元素的编排直接影响着404错误页面功能的实现, 将情感化设计理论应用于404错误页面的设计不仅满足功能性的需求, 也减缓错误链接所导致用户情感上的负面情绪。404页面的情感化设计, 能够最大限度地吸引用户的目光, 提升网页的实用性, 使用户获得良好的交互体验。