很抱歉，你訪問的界面不存在……
頂尖營銷案例ID:kandddd
專註互聯網商業新趨勢，直擊廣告營銷最前沿。
關於「404 錯誤」的起源
互聯網上一直流傳著一個傳說
在歐洲核研究組織的 404 號房間內
存放著互聯網第一台伺服器
萬維網的發明者 Berners-Lee 就在這裡辦公
如果你要訪問網頁
必須向這個房間提交申請
如果找不到這個網頁就會提示你
「404 not found 」
當人們讓 Berners-Lee
就 「 404 錯誤」發表意見時
Berners-Lee 以這是無關緊要的瑣事為由
拒絕置評
讓這段傳說更加撲朔迷離
而開創了超文本結構的
另一位互聯網發明者 Robert Cailliau
在接受《連線》雜誌採訪時
再次否認了這則傳說的真實性
並解釋了 「 404 錯誤」的真正來源
404 錯誤
就是程序員為了讓用戶在網路連接錯誤時
可以知道自己錯在哪而設置的
相信各位老鐵對這個頁面也不陌生
這樣的說法
讓「 404 錯誤」的傳奇色彩蕩然無存
可能會讓很多人失望吧
不過自從互聯網誕生以來
設計師們為了讓你不會因為錯誤訪問
而對網站失望
在 404 頁面上花了不少功夫
今天就推薦20個創意爆棚的404頁面
每個頁面配以相應的技巧說明
希望能給老鐵
一些設計和文案上的啟發
01. 有趣的設計
這是一個有趣的404頁面
用隕石坑來表現404代碼
身處太空暗示你來錯了地方
如果你訪問這個設計
所處的Behance頁面
會發現更多有趣的地方
02. 圖形化
圖標可以發揮各種各樣的作用
指示作用，裝飾
甚至作為紋理都可以
這個案例中
設計師用小圖標來搭建問號
告知用戶他們所尋找的內容並不在此
03. 使用動效
這是一個好玩兒又可愛的404頁面
從文案到動畫都非常之有趣
如果你正好也很無聊的話
可以盯著這個動畫玩一整天……
04. 簡約設計
這個404頁面超級簡單
但是非常有效
簡約清爽的設計
放大鏡和404的組合足夠說明問題
05. 情感化設計
情感化的設計總能讓人印象深刻
這個頁面的設計能讓人情緒有所觸動
傷感的動漫角色拿著404的小旗子
扁平插畫風令人賞心悅目
最下方綠色按鈕
可以帶你回首頁
繼續尋找你需要的內容
關鍵文案還很貼心
06. 插畫說明
插畫在網頁中的運用非常廣泛
功能也多種多樣
這個網頁中的插畫
不僅靈活地傳達出
頁面跳轉錯誤的情況
而且為你作出了正確的引導
07. 不要想複雜了
想打造獨特的404頁面
並不需要非得找到
某種獨一無二的創意和徹底的創新
有時候掌握流行趨勢
就夠你脫穎而出了
在這個404頁面中
設計師使用了網路流行的塗鴉插畫角色
此刻的文案也非常應景
整個頁面的氣質非常有趣
也很獨特
08. 重疊效果
使用重疊的形狀、字母
及色彩來創造有趣的404頁面效果
這個404頁面的設計也很簡單
黑白模式
無襯線字體、圖形
和字體重疊
大小對比強化404的概念
簡單而不單調
09. 使用相關的圖像
有時候在頁面中
使用毫無關聯的圖片是很有意思的
而使用有關聯的圖
則顯得更加有用
這個案例中
設計師加入了紅燈警示
也是在暗示用戶
你們來錯了地方
10. 有限度地使用色彩
挑選那些能夠和諧搭配的色彩
即使要變幻色彩
也是基於其中的一種或者幾種來進行調整
並堅持如此
創建一套主題
這樣可以簡化一系列的設計過程
這個404網站也正是這樣來設定它的色調
11. 使用負空間
學會讓頁面呼吸
可以讓你的頁面更大氣
這個404頁面使用了藍綠色和白色
並且通過適當的留白
使得整個頁面足夠簡單大氣
12. 雙關
404本質上是告訴用戶
他要的東西沒有找到
那麼我們要怎麼樣展現這個事實？
有的時候
用一些內容和視覺上的「雙關」
來展現這一點
而這個404頁面就是這樣處理的
通過荒島這個意象來向用戶傳遞
「你走錯了」這個概念
13. 大膽表現
如果你有更加有趣的方式
來展現404的代碼
不妨盡量讓兩者之間產生關聯
然後再表現
這個案例當中
設計師使用了「氧氣含量不夠」
來同404代碼之間產生關聯
有趣詼諧
意境也接近
14. 充分利用影像
漂亮的照片總是特別吸引人
用鏡頭下的照片來呈現設計
總有著不同凡響的魅力
在這個案例中
美味的食物
在鏡頭下表現出無與倫比的魅力
在404這樣一個愉快的局面下
用漂亮的圖片注入不同凡響的活力
15. 表現動態
表現動態並不意味著
讓頁面上的東西真的動起來
讓元素看起來彷彿動起來
就能創造不俗的效果
在這個404頁面中
404三個數字雖然是靜止的
但是呈現出動態的感覺
16. 結合流行文化
在404頁面中
使用標誌化的流行元素或者偶像
也能對相當一部分用戶
產生足夠好的效用
在這個案例中
設計師將Lionel Richie 的一張老照片
用作404頁面的背景
搭配一首老歌的歌詞
應景也極具喜感
17. 象徵手法
使用象徵性的手法
來藉助一些視覺元素
來傳達404的概念也是不錯的選擇
在這個404頁面中
用斷掉的鉛筆來隱喻斷掉鏈接
就是很典型的象徵手法
18. 控制好間隔
插畫和圖像以及其他的視覺元素
並不需要填滿整個頁面
控制好間隔能讓整個頁面看起來更自然
在案例中
設計師將插畫作為核心來表現404
其他的網頁元素
並沒有擁擠地圍繞著插畫
給人感覺很不錯
19. 不要害怕擁擠
這一條和上一條並不衝突
如果是高度相關的內容
能夠緊密的聯繫並放置在一起
就不要隔開了
讓相關的內容靠近
適當留白
也是不錯的設計方式
實際上
這個案例也正是這麼做的
20. 剪切缺口
通過剪切的方式
讓單純的文本具備更多的含義
和形制其實是一個非常有趣
且有意義的表現形式
在這個案例中
404中間的0的空洞用問號來表現
實際效果看起來非常不錯
如果你要為迷路的用戶提供許多選項
那麼你需要為信息劃分不同的層級
以防過多的信息令用戶感到壓迫
這個404頁面在解決這個問題上做的非常不錯
頂尖營銷案例
專註互聯網商業新趨勢，直擊廣告營銷最前沿。
TAG:睡前看點啥 |