四時(shí)充美：騰訊游戲404頁(yè)面小結(jié)

Suxi："四時(shí)充美：—年四季都很富足美好。"

項(xiàng)目背景

404頁(yè)面：客戶(hù)端在瀏覽網(wǎng)頁(yè)時(shí)，服務(wù)器無(wú)法正常提供信息，或是服務(wù)器無(wú)法回應(yīng)，且不知道原因。404錯(cuò)誤信息通常是在目標(biāo)頁(yè)面被更改或移除，或客戶(hù)端輸入頁(yè)面地址錯(cuò)誤后顯示的頁(yè)面。拿游戲來(lái)比喻的話(huà)，就像游戲內(nèi)的隱藏劇情一樣需要特定的觸發(fā)動(dòng)作（輸入站點(diǎn)下的無(wú)效網(wǎng)址）才能展開(kāi)。

相關(guān)文章推薦：好玩的404頁(yè)面
30個(gè)創(chuàng)意十足的404頁(yè)面設(shè)計(jì)

作為一個(gè)完整的站點(diǎn)，404頁(yè)面是不可或缺的，很多大型站點(diǎn)都只是將其設(shè)計(jì)為簡(jiǎn)單的功能頁(yè)面，只是作為一個(gè)簡(jiǎn)單的出錯(cuò)"驛站"。隨著新的騰訊游戲平臺(tái)站上線，大量的品牌包裝延續(xù)接踵而至。雖然出錯(cuò)頁(yè)面并不是常規(guī)的內(nèi)容頁(yè)，也不會(huì)有人主動(dòng)去訪問(wèn)，但這種站點(diǎn)的細(xì)節(jié)之處同時(shí)也體現(xiàn)了品牌包裝的品質(zhì)感與完整度。雖然"出錯(cuò)"字面上來(lái)看是"消極"的，但我們希望能做一些小小的努力使它轉(zhuǎn)換成為一個(gè)"美好的意外"。

進(jìn)入這樣一個(gè)頁(yè)面想必不是用戶(hù)的目的，以希望獲取信息的意圖卻帶來(lái)一個(gè)錯(cuò)誤的結(jié)果，必然會(huì)造成用戶(hù)心理的落差。許多站點(diǎn)的404只是簡(jiǎn)單的展示一個(gè)出錯(cuò)提示，提醒玩家返回的頁(yè)面，我們希望能給失落的訪客們一些撫慰，雖然出錯(cuò)了，但也不失一次愉悅的體驗(yàn)，保證基本的功能之外，更添一些人情味。

創(chuàng)作思路

既然這個(gè)項(xiàng)目的目的是強(qiáng)化品牌包裝，那么將品牌的符號(hào)在頁(yè)面中重復(fù)體現(xiàn)是一個(gè)比較直接有效的方式。如果是單頁(yè)面的設(shè)計(jì)，可能會(huì)造成用戶(hù)長(zhǎng)期瀏覽后的視覺(jué)倦怠感，所以我們決定以系列的方式來(lái)出設(shè)計(jì)稿。

在思考了多種不同邏輯關(guān)系后，我們決定以"美好的四季"為主題，隨著時(shí)節(jié)變換更替對(duì)應(yīng)的頁(yè)面。

創(chuàng)作過(guò)程

1、首先確定了始終不變的元素——"404"這組數(shù)字。這組字型擔(dān)當(dāng)?shù)氖琼?yè)面的"白模"，隨著季節(jié)場(chǎng)景的更替以不同的面貌呈現(xiàn)出來(lái)。

2、從騰訊游戲的logo中提煉了三角形和四個(gè)主色的元素結(jié)合四季的概念，聯(lián)想到了四個(gè)關(guān)鍵元素——花朵（春）太陽(yáng)（夏）、風(fēng)箏（秋）、冬（圍巾）。

3、采用規(guī)則幾何圖形拼合出各種圖形，體現(xiàn)出設(shè)計(jì)感現(xiàn)代感。

4、對(duì)于插畫(huà)來(lái)說(shuō)，其元素的挑選與表現(xiàn)形式同等重要，既要選擇富有季節(jié)代表性的主元素，同時(shí)還要避免這個(gè)元素被過(guò)于濫用。

就拿冬季來(lái)說(shuō)，大家都會(huì)聯(lián)想到雪人這個(gè)元素，同樣有冬天代表性的北極熊相比雪人更為少用。并且作為主元素，和其他季節(jié)主形象為動(dòng)物也能保持一致。

5、去掉繁瑣的質(zhì)感疊加，以簡(jiǎn)單的色塊與輕薄的質(zhì)感來(lái)細(xì)化，整體風(fēng)格與game.qq.com的扁平設(shè)計(jì)感保持一致。

6、最后加上出錯(cuò)信息與功能按鈕。騰訊404系列頁(yè)面就此誕生。

項(xiàng)目總結(jié)

項(xiàng)目完成后視覺(jué)效果得到了大家的好評(píng)，但還有一些需要改進(jìn)的方面，例如作為游戲品牌頁(yè)面，缺乏一些游戲感的結(jié)合。希望在下一次改版嘗試能有多一些這方面的糅合。
最后感謝大家看完這篇磨磨唧唧的小文,下面送給大家花絮一幅。希望下次在瀏覽騰訊游戲的頁(yè)面時(shí)出錯(cuò)了，也會(huì)有好的心情。

原文地址：tgideas.qq.com
作者：suxi
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：156982）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量49萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：