40個網頁設計靈感解析

設計一個完美的版本並不容易。它通常取決於你的出發點，是要個性化的設計，還是品牌化的運作？是提供自己聯繫方式，還是獲取用戶的聯繫方式？下面的優秀案例會告訴你，優秀的頁面要如何設計。

1、友好的界面

友好的聯繫人界面總會讓人感到親切的，如果它還具備一些功能性，並且易於閱讀，用戶會感覺更加舒適的。

2、展示全球各地辦公室

Tool 的關於我們頁面中，設計師用醒目的字體標註出團隊在洛杉磯、紐約和法國的辦公室的地址和聯繫方式，點開關於我們頁面的用戶不就是想知道這些信息么？正確的聯繫方式，簡單直接的設計，就是這麼做的。

3、簡化溝通流程

Productiong Location的聯繫我們頁面同樣採用了大膽而視覺化的頁面設計，但是和其他的同類頁面不同的是，它簡化了溝通流程，把用戶可能會關注的內容和需要溝通的具體部分都劃分了一下，讓不同需求的用戶直接被引導到特定的頁面和部分，從而達成簡化和分流的目的。

4、頭像和個性化的信息

放上設計師和團隊成員的圖片，讓用戶認識你。最關鍵的並不是你的頭像夠不夠漂亮，而是要讓用戶知道這個漂亮的網站背後是一位和你我一樣真實而平凡的設計師，是他或者她努力設計之後的成果。頭像可以讓頁面更加個性化，也能讓它更加真實而親近。

5、鼓勵用戶溝通

關於我們頁面的核心設計目的通常是溝通，而Hello Innovation 的頁面設計則充分貫徹這一思路：試圖鼓勵用戶主動同網站進行溝通。用親切而富有親和力的設計，留下聯繫方式，從文案到留下郵箱的地址都在鼓勵用戶。聊一句，能有多難呢？

6、用圖片來傳遞隱喻

設計博物館中收藏了許多設計相關的藏品，而關於我們頁面中的這個電話不僅是網站的藏品，而且作為一個重要的隱喻來向用戶傳遞「溝通」的意象，這也算得上是一種設計上的「雙關」了。

7、創造令人難忘的設計

古怪的設計和有趣的文案總能讓人難忘，每天海量的信息攝入讓人們只會記住最突出的那些。不過，古怪的設計不一定適合任何品牌任何網站，但是對於那些古靈精怪的網站而言，那些獨樹一幟的腦洞總能起到作用。

8、表現品牌的性格

對於網站而言，在關於我們頁面中將自家的品牌性格呈現出來自然是合理合適的。Boone Selections 就是這樣優雅又專業地將品牌配色和相關設計元素融入關於我們頁面的。作為一個專業的葡萄酒進口公司，Boone Selections 的關於我們頁面用獨特的排版和滾動式的頁面設計，營造出獨有的品牌氣息。

9、展示聯絡方式

This Also 的關於我們頁面設計可謂是可靠而到位了，頁面地圖標註出了公司地點也就算了，當你向下滾動頁面的時候，還能看到詳細地址的說明、沿線地鐵的乘坐方式、溝通的電子郵件地址、電話，等等等等，不一而足。

10、給個提示

網站 Deux Huit Huit 的關於我們頁面並沒有提供傳統意義上的溝通方式，而是設計成了一個直觀而簡單的對話框。頂上「Say hello 」的對話框非常直接地提示用戶，只要輸入內容，網站的開發者就能看到了。

11、標明開門/工作時間

對於諸如餐廳、博物館、商店等有具體營業時間的機構的官方網站，在關於我們頁面當中標註店鋪開門的時間、接受電話諮詢的時間，可以讓用戶更加有效地接受服務。

12、使用醒目的字體

Panache 的關於我們頁面中標題字體採用了非常醒目的「Travaillons Ensemble」，這種字體更為輕巧，雖然獨特但是具有極高的識別度。

13、使用大膽的配色方案

經典的黑白黃的配色方案被運用到Sponge 的關於我們頁面當中，這種強對比的配色結合細緻的細節刻畫，讓整個頁面看起來銳利又富有質感。設計師將明亮的色彩運用到最關鍵的信息上，讓用戶更容易注意到它們。

14、採用形象化的插畫

插畫總能以更加視覺化的方式來吸引用戶的注意力，尤其是當插畫足夠風格化、個性化的時候。Legwork Studio 的關於我們頁面中，加入了狼頭人插畫，配合手寫字體，營造出了一種個性化的氛圍。

15、使用簡約的圖形

Giampiero Bodini 的關於我們頁面並沒有使用複雜的設計技巧，而是在素描的繁複背景上，放上一個簡單的矩形，將聯繫方式與相關信息置於其中。繁複和簡單，手繪和圖形，形成了鮮明的對比。

16、藉助表單來溝通

溝通是相互，你可以發信息給網站，也可以留下聯繫方式，讓網站的運營者給你發信息。QED Group 直接在聯繫我們頁面中留下一個表單，你可以通過這個表單留下聯繫方式。

17、使用單色配色

簡單優雅和易讀是 Joseph A Avoue 的網站聯繫我們頁面的設計風格，沒有華麗的設計，也沒有花哨的功能，一個纖細的環，中間是最基本的聯繫信息，就是這麼直接。

18、幽默

幽默的設計師不會放過任何一個搞怪的機會，Bio-Bak 的設計師即使是在聯繫我們頁面當中也會嘩眾取寵一把。塗鴉字體和俏皮的文案讓人忍俊不禁，你能夠從每一個細節感受到這個設計師的幽默細胞。

19、填寫表單

Anakin 的關於我們頁面同樣是讓用戶填寫聯繫信息，不過在表單的設計上更加獨特，並沒有專門的表單，而是使用佔位符提示用戶各個位置需要填寫的內容，貼心、直覺，也非常走心。

20、個性化的辦公地點展示

和第二個案例類似，CPB集團在全球各地都有辦公室，但是在設計的樣式上也更加獨特，各地辦公室的內容和個性化的背景融為一體，信息得到了整合，展現方式也個性十足。

21、介紹一下業務

在關於我們頁面當中介紹自己並不稀奇，不過除此之外可以做的還有很多，比如介紹一下自家的業務，展示一下自家的品牌，吸引用戶來聊聊也是很不錯的手段。

22、視頻背景

在網站裡面添加視頻背景已經是一種非常流行的手段了，而作為電影製作工作室而存在的Moodboard 在關於我們頁面中使用視頻背景不僅符合他們團隊的工作性質，而且讓整個關於我們頁面更加鮮活了。

23、使用柵格布局

要設計結構化的頁面，柵格總是你最好的朋友。Urban Influence 的關於我們頁面使用柵格來組織整個頁面的信息，需要展示的內容，讓用戶輸入的部分，裝飾性的部分和展示用的地圖，都界限分明地分布在頁面上。

24、讓界面更加友好

如果讓界面更加友好，設計師要做的工作並不少。清晰而易讀的界面設計是最基本的，信息要能夠清晰的傳遞出來，沒有侵略性的配色，讓人感到熟悉、親切的呈現方式，易於操作的交互方式，這都是設計師要做好的地方。

25、分步引導

取得聯繫包含著一系列的操作，如果將整個交互過程分割成為若干步驟，一步一步引導用戶來操作，加入動效和微交互，這絕對是一種不一樣的體驗。

26、增加聯繫人快捷方式

團隊中負責不同部分的負責人通常不一樣，用戶打開聯繫我們頁面通常有著明確的目標，如何將FAQ部分加入其中，並且添加特定的聯繫人的聯繫方式，讓用戶可以更加直接地同不同的負責人進行溝通。

27、同網站其他部分整合到一起

Robby Leonardi 的網站似乎被設計成一個扁平風的電腦遊戲，當你瀏覽頁面的時候，會隨著主角去不同的頁面，做不同的事情，而去關於我們頁面也是其中的一個「場景」。這是一種整合頁面的方式，值得學習。

28、團隊合影

許多網站背後都是一整個開發和設計團隊在運作，用團隊成員合影作為關於我們頁面的背景圖也是非常合理且有個性的做法。

29、使用留白

通常留白能強化整個頁面的空間感和結構感，而Beta Tataki 在關於我們頁面就放置了一個設計感十足了電話，通過留白強化了聯繫方式等內容的存在感。

30、活用字體排版

精心設計的字體排版不僅具有裝飾性，還可以承載一定的內容。Pauline Osmont 的聯繫我們頁面使用了黑色、銀色和金色來構建吸引人的字體排版主視覺設計。當你向下滾動頁面的時候，能看到易於閱讀排版到位的表單。

31、親手展示

這也是近幾年比較常見的一種內容展現方式，設計師親手舉起展板來展示設計作品。如果用在聯繫我們頁面中，這種設計師手法也是相當的應景呢。就像Mark Jaworkski 的這個頁面，設計師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。

32、列舉社交媒體聯繫方式

現在哪個網站沒幾個社交媒體帳號呢？在關於我們的頁面當中將自家網站的各個社交媒體的鏈接都貼出來，對於許多用戶來說反而更加便於聯繫。

33、借用傳統的溝通方式

復古的樣式是不錯的選擇，但是使用傳統的聯繫方式來設計，似乎更加走心也更有意思。Lionway 的聯繫我們頁面就設計成了明信片的形式，還有一些固定的信息乾脆就列舉在一個列印賬單上。

34、俏皮的文案

文案的設計也是聯繫我們頁面中重要的部分，親切、幽默的文案設計會讓用戶感到親近，但是同樣的，俏皮的、機智的文案也一樣會讓用戶難忘。

35、展現個性

設計工作室 Resn 的聯繫我們頁面設計絕對是這組案例中最有個性的頁面之一，充滿80年代風情的設計元素，和帶著動物頭套的團隊成員圖片組成了頁面的主體。

36、運用信息圖

信息圖是近幾年一直處於上升階段的設計手法，如果有合適的展示內容，在關於我們頁面中使用信息圖也是相當不錯的選擇。Quicksprout 的關於我們頁面就使用了信息圖來呈現內容，清晰易讀，而且準確到位。

37、動畫和卡通

在聯繫我們頁面中使用卡通和動漫式的形象來呈現設計師和設計團隊是相當常見也相當有效的手段，Melonfree 的關於我們頁面就將設計師和開發者的卡通形象擺了出來。

38、使用半透明的圖形

人的眼睛總會有意識地去識別想要石碑的內容，所以即使的半透明的元素載入在一起，也不會特別嚴重地影響閱讀體驗。Indofolio 的頁面設就充分運用半透明的元素，將核心的聯繫方式放在半透明的矩形上，透過圖形用戶依然能看到背景的細節，但是又不會看不清關鍵的聯繫方式。

39、手繪效果

手繪的聯繫我們頁面，尤其是那些畫的還相當養眼的頁面，總能讓用戶感受到設計者的貼心。Mario Petrone 的這個頁面設計就相當的俏皮有趣。

40、僅用一個下拉框

Spokes Pedicabs 的聯繫我們頁面其實談不上一個完整的頁面，而用一個下拉框代替，當你點擊導航了中的鏈接，會出現這個醒目的橙色下拉框。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 設計工坊 的精彩文章: