娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

好玩的地方在于,404頁面的設計思路其實可以拓展到許多其他的地方,UI設計、網頁設計甚至室內設計。設計的思路和原則原本就是相通的,這些獨樹一幟或者別具匠心的404頁面單獨看的時候并沒有什么,但是深入總結一番,你會發現它們的價值遠不止于它們看起來那么簡單。

閱讀這篇文章之前,不妨先看看上半部分:《娓娓道來!50個實用設計思路幫你設計創意404頁面(上)》

26. 不局限于文本

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

文本并不是網頁傳遞信息的唯一途徑,你應該發掘更多更有創意的表現形式。這個404頁面采用的是太空的主題,404中間的0用星系來呈現,應景又帥氣,你看,不用文本一樣不錯。

27. 建立情感紐帶

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

如果你能和訪客構建起情感紐帶,那么這個頁面一定能起到非常不錯的效果。情緒的感染,能讓訪客同你的品牌聯系到一起。在這個案例中,文案和圖片的搭配非常巧妙,圖片和文字給人以一種“在路上”的感覺,它不僅能被人輕松理解,而且很多人會有這樣的沖動,自然能讓許多用戶與之產生共鳴。

28. 充分利用影像

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

漂亮的照片總是特別吸引人。用鏡頭下的照片來呈現設計總有著不同凡響的魅力。在這個案例中,美味的食物在鏡頭下表現出無與倫比的魅力,在404這樣一個愉快的局面下,用漂亮的圖片注入不同凡響的活力。

29. 表現動態

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

表現動態并不意味著讓頁面上的東西真的動起來,讓元素看起來仿佛動起來,就能創造不俗的效果。在這個404頁面中,404三個數字雖然是靜止的,但是呈現出動態的感覺。

30. 結合流行文化

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

在404頁面中使用標志化的流行元素或者偶像,也能對相當一部分用戶產生足夠好的效用。在這個案例中,設計師將Lionel Richie 的一張老照片用作404頁面的背景,搭配一首老歌的歌詞,應景也極具喜感。

31. 象征手法

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

使用象征性的手法,來借助一些視覺元素來傳達404的概念也是不錯的選擇。在這個404頁面中,用斷掉的鉛筆來隱喻斷掉鏈接就是很典型的象征手法。

32. 使用對比

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

不想讓頁面顯得特別單調?用對比手法吧。對比能讓信息層級清晰起來。在這個404頁面中,設計師使用了色彩對比,深藍色的背景使得按鈕顯得更加富有活力。

33. 使用圖標

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

圖標能夠傳遞出不少的信息,使用圖標不僅能消除文字的單調性,還能使得頁面的可讀性和豐富度更高。這個404頁面中,指南針圖標不僅與404的意義暗合。由于網站所屬的品牌形象是鯨魚,藍綠色背景和指南針也與品牌形象暗暗呼應。

34. 使用主題

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

使用主題能夠讓整個設計貫穿始終。這個404頁面中,Logo的顏色很顯然是取自主題,從插畫到底部工具欄都統一使用了綠色,主題帶來的統一美感就體現在這里。

35. 創造關聯性

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

如果一張圖片能讓用戶產生與品牌相關的聯想,那么它就是成功的。在案例中,食物被吃完的空碟子和404頁面所代表的“找不到你要的東西”的概念很接近,這種來自圖片的關聯與暗示,非常有效。

36. 控制好間隔

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

插畫和圖像以及其他的視覺元素并不需要填滿整個頁面,控制好間隔能讓整個頁面看起來更自然。在案例中,設計師將插畫作為核心來表現404,其他的網頁元素并沒有擁擠地圍繞著插畫,給人感覺很不錯。

37. 不要害怕擁擠

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

這一條和上一條并不沖突。如果是高度相關的內容,能夠緊密的聯系并放置在一起,就不要隔開了,讓相關的內容靠近,適當留白,也是不錯的設計方式。實際上,這個案例也正是這么做的。

38. 剪切缺口

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

通過剪切的方式,讓單純的文本具備更多的含義和形制其實是一個非常有趣且有意義的表現形式。在這個案例中,404中間的0的空洞用問號來表現,實際效果看起來非常不錯。

39. 簡化概念

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

并不是所有人都清楚404的具體概念,你可以使用文字拼寫來說明,也可以使用簡單的圖片來表現。在這個案例中,背景圖片中拿著望遠鏡的人就非常明晰地說明了這一概念。

40. 展示場景

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

你還可以為404頁面創建一個場景,制造一個故事,為什么不呢?這個案例的場景就非??蓯郏翛]的船隱匿在水面之下,魚群環繞,遠山、深水和深綠的海床,這個沉靜漂亮的場景還不足以讓抓狂的用戶安靜下來么?

41. 大膽嘗試

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

不要害怕拿你的404頁面做嘗試。打破邊界和限制,發揮你的想象力,跟著感覺和靈感走試試。這個404頁面似乎正在完善中,許多實驗性的元素被放置進來,有待完成,但是它真的很不錯呢。

42. 明亮的色彩

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

用明亮的色彩來照亮誤入者的沮喪吧。橘黃色的頁面砸死不知不覺之間影響著用戶的情緒,你真得還感到那么沮喪么?

43. 打破自身的限制

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

雖然你的頁面是為桌面設計的,但是誰規定了它一定要顯示在桌面屏幕中呢?為什么不能是一臺相機呢?

44. 放到格子里

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

將數字放到格子里,那么它會是什么樣子呢?它可以以什么樣的形式來呈現呢?于是,設計師讓404變成了一個時鐘上顯示的時間,好玩兒又達成目標,何樂而不為呢。

45. 創意加持

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

自由地發揮想象力吧,你可以創造截然不同的404頁面!正如同這個頁面一樣,設計師將鉛筆、蜜蜂、發條的意象溶于一體,色彩活潑,意象好玩兒,這不就是創意么?

46. 接地氣

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

不要過于高冷,適當的接地氣一點,用更平和可愛的方式來展現也不錯呢。在這個404頁面中,設計師并沒有一味地追隨高大上,有趣好玩的人物形象令整個404頁面令人忍俊不禁。

47. 先鋒一點

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

先鋒和前衛往往被關聯在一起。展現個性,用獨特而先鋒的展現形式來創造屬于自己的時尚?;灞揪褪潜容^先鋒的玩物,設計師結合紅色濾光片使得和照片結合到一起,看起來非常有范兒。

48. 打破極限

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

找到大家能接受的極限,將邊界推動到更遙遠的邊際,特立獨行不也是一種個性么?好吧,這個案例確實特立獨行得口味有點過重了……漂亮,粗俗,好玩兒,并且令人過目不忘……

49. 使用圖案紋理

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

其實你可以用任何東西來構造獨特的紋理,然后平鋪在背景上,營造獨一無二的設計。這個案例中,設計師就是這么玩兒的,看起來倒是蠻時尚的。

50. 信息層級

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

如果你要為迷路的用戶提供許多選項,那么你需要為信息劃分不同的層級,以防過多的信息令用戶感到壓迫。這個404頁面在解決這個問題上做的非常不錯。

【優質404網頁養成手冊】

案例加持:
《柳暗花明!17個讓人想親自體驗的404頁面》

模板加持:
《良心資源!20個風格多樣的高質量404模板免費下載》

情懷加持:
《做有情懷的設計師!如何打造善意優雅的404頁面?》

原文地址:designschool
優設譯者:@陳子木

「子木說」

今年WWDC之后,新的MacOSX性能的極大提升,令我激動不已,這怎么看都是老Mac的救星?。∶總€冒險者都熱衷于嘗鮮,如果你有閑置的Mac不妨裝上試試~如果你也想試試,戳這里:微盤(內置10.11的壁紙哦)。

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量96萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

娓娓道來!50個實用設計思路幫你設計創意404頁面(下)

收藏 10
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。