不容錯過的優秀404頁面設計指南

 

　　平生不見404，閱盡全網也惘然。對，如果你從未打開過404頁面，就可以說你幾乎未曾真正用過互聯網。

　　404頁面的出現的原因很簡單：當你輸入鏈接，浏覽器向服務器提出請求，但是服務器無法解析你提供的URL的時候，服務器就會返回給你一個“404為找到”的頁面，換句話就是“服務器是正常的，只是沒找到你要的頁面”。

　　的確，404頁面的出現就是這麼簡單。它誕生於互聯網和浏覽器剛剛興起的時代，但是經過近20年的演化之後，它早已進化出基於互聯網的亞文化——404頁面並不簡單。

　　所以，要創造出一個完美的404錯誤頁面，有一些規則可供遵循。

　　設計

　　首先，404頁面的設計不應該轉移用戶的注意力，令用戶偏移最初的目的。的確，絕大多數用戶認為404頁面非常惱人。所以，404頁面應該在網站設計之初就要考慮到，並令它能夠幫助用戶找到他們需要的東西，並且在此過程中避免用戶跳轉到其他的網站。

　　作為一個次要目標，404頁面的設計也可以提供一個建立並強化品牌的機會。如果404頁面設計得足夠積極，那麼它可以令用戶留下持久的印象。一般而言，用戶遭遇404頁面一般是因為“打開的方式不對”造成的，它是一種負面體驗，但是如果404頁面能夠幫助用戶達成目標(其實這形同危機公關)，那麼用戶可能會改變對你網站的看法。

　　為了避免用戶對404頁面產生逆反情緒，網頁的用色和圖片都應該控制好比例和視覺效果。優秀的網頁設計，才能強化品牌。

　　社交媒體

　　在404頁面上提供社交媒體鏈接是個好想法，一方面可以幫助誤入歧途的用戶解決問題，另一方面也可以通過社交媒體吸引更多用戶。將網站的Facebook、Twitter、Google+、Tumblr、微博、微信鏈接附加在404頁面上，可以讓用戶在無法解決問題的情況下通過社交媒體進行互動，尋求解決方案。通常，在官方無法即刻給出解決方案的是，其他的用戶或者粉絲也可能會給予用戶一定的幫助。

　　重要鏈接

　　每個網站都會有一些用戶經常訪問的頁面，這些核心的頁面會引領用戶尋求其他的重要信息。值得一提的是，在404頁面展現網站的整個網站地圖是不合適的，因為用戶可能會迷失於其間，本身用戶就沒找到他們想要的東西，再繼續從幾十個鏈接中找他們想要的東西的話，這個體驗可想而知有多糟糕。所以，在這個時候，最好設定至多6~7個重要的鏈接。通常情況下，它們應該包含以下幾個鏈接：

　　返回首頁

　　最近的帖子

　　搜索框

　　關於我們

　　聯系我們

　　當然，網站的搜索功能可以固化在頁面上，而以內容為主的網站或者博客類型的網站可以將近期熱門帖子添加到網站上，起到引流的作用。

　　提供在線聯系方式

　　作為一種溝通用戶的方式，在404頁面提供一個內嵌表格讓用戶留言是一種頗具誠意的解決方案。用戶可以通過表格留下聯系方式，碰到的問題，或者試圖尋找的信息和內容等。

　　如果網站本身是偏向銷售向的，那麼在線客服也是不錯的解決方法，直接與客服進行在線溝通能夠挽留住更多的訂單，不是麼?與客服進行直接溝通可以找到他們想要的東西。

　　當然，不論是在線表格提交系統還是在線客服系統都請保持簡約直接的形式，不要讓用戶迷失在復雜交互和鏈接中。

　　幽默與多媒體

　　當用戶進入404頁面的時候，可以在頁面上嵌入自動播放的音頻或者視頻，為用戶介紹網站或者引導用戶。在視頻或者動畫中注入適當的幽默和賣萌，可以緩解誤入此處用戶的抵觸情緒。

　　把控好展示的度，可能會為用戶帶來驚喜、愉悅的情緒，如果能引導用戶解決問題就更好了。

　　接下來，我會通過下面我所搜集的案例來向你展示，大家都是如何設計優秀的404頁面的。其中很多頁面頗為有趣，有些還有待提升，但是它們都在某些方面做的頗為突出，值得學習。

　　craigslist

　　Craigslist 的404頁面設計的頗為簡約有趣，並且提供了首頁鏈接來引導用戶。

　　Niki Brown

　　這個404頁面除了提供了一些重要的鏈接之外，還提供了幾個秘密鏈接，當用戶點開之後，會發現一些頗為不錯的音樂。這種方式會增加網站的黏度。

　　cubeecraft

　　作為一個紙模類的網站，它的404頁面突出了網站的特征：它不僅選取了一個與錯誤有關的人物角色，還提供了圖片下載鏈接——紙模用戶可以將其打印出來，做成這個角色的紙模，獨具匠心。

　　Project-euh

　　這是一個非常獨特的404頁面，當你進入這個404頁面的時候，系統會有機器音提醒你進入了一個404頁面，而頁面內提供的圖片其實是一個動畫的鏈接，它會引領你進入一個個好玩的隨機頁面。

　　Technorati

　　這是一個簡單的報錯頁面，它還提供了訂閱和最近的文章，這些內容可能會吸引一部分用戶。

　　Acme

　　這是一個獨特的404頁面，不過毫無疑問它還可以補充更多的內容。

　　Expansion Broadcast

　　如果你沒有找到你要的信息，可以通過這個頁面上的表格提交反饋信息。同時頁面中的Facebook和Twitter鏈接也可以幫助用戶了解更多信息。

　　Attrition

　　這個404頁面設計簡單，信息也很直觀。

　　Orange Coat

　　使用流程圖來引導用戶找到信息的404頁面還是非常令人耳目一新的。

　　Disney

　　迪士尼的404頁面匯總了常見的問題和解答，添加了下載鏈接等一些有用的信息。

　　Design Zillas

　　優秀的404頁面長啥樣?這就是個典型，視覺設計大氣，社交媒體鏈接完整，聯系方式清晰。

　　Twingly

　　通過“忍者”這種人物角色來傳遞信息，看起來不錯。

　　webo group

　　這也是一個簡約的404頁面。

　　Griffin Technology

　　這個404頁面也使用了討喜的插畫，添加了聯系方式和支持團隊的聯系方式。

　　nosh

　　這是一個獨特的404頁面，用視頻來吸引用戶留在網站。作為一個有客戶端的網站，Nosh 將網站的Android和iOS客戶端鏈接也添加到頁面上。Nosh甚至不忘在404頁面上留下注冊網站的入口。