萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 40個優秀的關於我們頁面網頁設計案例(上)

40個優秀的關於我們頁面網頁設計案例(上)

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

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

  1、友好的界面

40個優秀的關於我們頁面網頁設計案例(上) 三聯

  友好的聯系人界面總會讓人感到親切的,如果它還具備一些功能性,並且易於閱讀,用戶會感覺更加舒適的。“What 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集團在全球各地都有辦公室,但是在設計的樣式上也更加獨特,各地辦公室的內容和個性化的背景融為一體,信息得到了整合,展現方式也個性十足。

copyright © 萬盛學電腦網 all rights reserved