個性宣言！40個優秀的關于我們頁面網頁設計案例(下)

溝通是一件重要的事情，這也使得聯系我們頁面的設計是整個項目中無法忽視，也無法含糊的部分。因為它不僅是要給用戶一個交代，而且作為網站的自留地，對于團隊自己而言，也必須給出一個“足夠漂亮”的交代。設計手法，展現方式，風格走向，這些東西都是頁面設計需要注意的地方，但是尤其重要的是，關于我們頁面中“我們”是最重要的元素。有的團隊喜歡“官方”一點，有的喜歡個性一點，也有的團隊喜歡幽默的呈現手法，也不乏一些手藝高超的設計團隊在這個頁面當中再炫一下技術和設計手法。但是無論如何，關于我們頁面設計是一件重要的事情，有時候讓自己高興，甚至會重過讓客戶高興。

扯遠了，來看看接下來的20個案例吧。

21、介紹一下業務

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

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 的聯系我們頁面其實談不上一個完整的頁面，而用一個下拉框代替，當你點擊導航了中的鏈接，會出現這個醒目的橙色下拉框。

【優設人氣超高的PS教程排行榜】

Top 1：效果超棒的極簡風格海報！
《AI+PS新手教程！手把手教你打造簡約現代的極簡海報》

Top 2：給心愛的妹子畫一個Q版頭像！
《萌系PS教程！手把手教你打造Q版的個人頭像》

Top 3：上帝說，要有光！
《PS高手教程！教你輕松打造效果美到爆的光照效果》

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

「子木說」

對于非業內的朋友而言，設計師的工作可能只是鼠標挪幾個元素按幾個按鈕就搞得定的事情吧？“搞搞不就出來了么？”當然我們知道并不是這么一回事。這樣的職業還有很多。法庭上法官問快播CEO：“代碼是你寫的么？念一下吧。”這種近乎荒誕的問題幾乎已經成了今年流傳最廣泛的段子之一。

今天借由馮老師的微博看到了浙江衛視跨年晚會上導播們工作的細節，發現他們的工作和設計師們的日常是如此的相似。看似不經意的過場里是對近20個機位的完全掌握，是對環境、時間、空間、節奏、表演者甚至音樂情緒的精準把控。

感慨一下，接著改圖去。

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

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量108萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com