contact-us-page-design-1-1

和網站訪客進行溝通的方式有很多,但是最典型、最直接的還是通過關于我們頁面來獲取溝通方式。在網站設計越來越多樣的今天,設計師和設計團隊對于關于我們頁面的設計也越來越重視,頁面的每一個細節似乎都成了展示設計師個性和品牌特色的重要介質。

關于我們的頁面設計并不難,但是要設計一個完美的版本并不容易。它通常取決于你的出發點,是要個性化的設計,還是品牌化的運作?是提供自己聯系方式,還是獲取用戶的聯系方式?下面的優秀案例會告訴你,優秀的關于我們頁面要如何設計。

1、友好的界面

01.-Infinum-662x345

友好的聯系人界面總會讓人感到親切的,如果它還具備一些功能性,并且易于閱讀,用戶會感覺更加舒適的?!癢hat can we help you with”則可以引導用戶去點擊“加入我們”“聘用我們”以及參與郵件訂閱。

2、展示全球各地辦公室

02.-Tool-662x315

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

3、簡化溝通流程

03.-Production-Locations-662x484

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

4、頭像和個性化的信息

04.-Bert-TImmermans-662x534

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

5、鼓勵用戶溝通

05.-Hello-Innovation-662x314

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

6、用圖片來傳遞隱喻

06.-Design-Museum-662x482

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

7、創造令人難忘的設計

07.-Molamil-662x311

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

8、表現品牌的性格

08.-Boone-Selections-662x333

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

9、展示聯絡方式

09.-This-Also-662x660

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

10、給個提示

10.-Deux-Huit-Huit-662x651

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

11、標明開門/工作時間

11.-Mugs-662x332

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

12、使用醒目的字體

12.-Panache-662x332

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

13、使用大膽的配色方案

13.-Sponge-662x331

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

14、采用形象化的插畫

14.-Legwork-Studio-662x332

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

15、使用簡約的圖形

15.-Giampiero-Bodini-662x332

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

16、借助表單來溝通

16.-Qed-Group-662x325

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

17、使用單色配色

17.-Joseph-A-Avoue-662x314

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

18、幽默

18.-Bio-Bak-662x626

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

19、填寫表單

19.-Anakin-662x515

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

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

20.-CPB-Group-662x319

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

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

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

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

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

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

「子木說」

這幾天最火的事情除開X播案,估計就是David Bowie的過世。這位在樂壇活躍了四十多年的英國音樂人,名字后面的音樂標簽多的讓人瞠目結舌,熱愛搖滾的你不會不認識他的名字和音樂。這是一個大師相繼離開的時代,但是即便要離開,寶爺也要先留下一張新專輯。97年的時候,林夕為他寫了一首中文歌《剎那天地》,是黃耀明一句一句親口教他唱的,值得你親耳聽一聽。此刻回看歌曲中的那句“我祝福你,天地不過一剎那;我祝福你,一生一剎那”是如此的應景,也是如此的令人唏噓。

有人說,也許是上帝他老人家最近換口味想聽聽華麗搖滾了,召喚寶爺去天堂繼續搖滾繼續燥。希望真的是如此。R.I.P.

uisdc-ad-wechat

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

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

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

點贊
收藏 1

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
相關推薦
1 收藏