個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

和網(wǎng)站訪客進(jìn)行溝通的方式有很多,但是最典型、最直接的還是通過關(guān)于我們頁(yè)面來獲取溝通方式。在網(wǎng)站設(shè)計(jì)越來越多樣的今天,設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)對(duì)于關(guān)于我們頁(yè)面的設(shè)計(jì)也越來越重視,頁(yè)面的每一個(gè)細(xì)節(jié)似乎都成了展示設(shè)計(jì)師個(gè)性和品牌特色的重要介質(zhì)。

關(guān)于我們的頁(yè)面設(shè)計(jì)并不難,但是要設(shè)計(jì)一個(gè)完美的版本并不容易。它通常取決于你的出發(fā)點(diǎn),是要個(gè)性化的設(shè)計(jì),還是品牌化的運(yùn)作?是提供自己聯(lián)系方式,還是獲取用戶的聯(lián)系方式?下面的優(yōu)秀案例會(huì)告訴你,優(yōu)秀的關(guān)于我們頁(yè)面要如何設(shè)計(jì)。

1、友好的界面

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

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

2、展示全球各地辦公室

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

Tool 的關(guān)于我們頁(yè)面中,設(shè)計(jì)師用醒目的字體標(biāo)注出團(tuán)隊(duì)在洛杉磯、紐約和法國(guó)的辦公室的地址和聯(lián)系方式,點(diǎn)開關(guān)于我們頁(yè)面的用戶不就是想知道這些信息么?正確的聯(lián)系方式,簡(jiǎn)單直接的設(shè)計(jì),就是這么做的。

3、簡(jiǎn)化溝通流程

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

Productiong Location的聯(lián)系我們頁(yè)面同樣采用了大膽而視覺化的頁(yè)面設(shè)計(jì),但是和其他的同類頁(yè)面不同的是,它簡(jiǎn)化了溝通流程,把用戶可能會(huì)關(guān)注的內(nèi)容和需要溝通的具體部分都劃分了一下,讓不同需求的用戶直接被引導(dǎo)到特定的頁(yè)面和部分,從而達(dá)成簡(jiǎn)化和分流的目的。

4、頭像和個(gè)性化的信息

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

放上設(shè)計(jì)師和團(tuán)隊(duì)成員的圖片,讓用戶認(rèn)識(shí)你。最關(guān)鍵的并不是你的頭像夠不夠漂亮,而是要讓用戶知道這個(gè)漂亮的網(wǎng)站背后是一位和你我一樣真實(shí)而平凡的設(shè)計(jì)師,是他或者她努力設(shè)計(jì)之后的成果。頭像可以讓頁(yè)面更加個(gè)性化,也能讓它更加真實(shí)而親近。

5、鼓勵(lì)用戶溝通

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

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

6、用圖片來傳遞隱喻

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

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

7、創(chuàng)造令人難忘的設(shè)計(jì)

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

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

8、表現(xiàn)品牌的性格

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

對(duì)于網(wǎng)站而言,在關(guān)于我們頁(yè)面中將自家的品牌性格呈現(xiàn)出來自然是合理合適的。Boone Selections 就是這樣優(yōu)雅又專業(yè)地將品牌配色和相關(guān)設(shè)計(jì)元素融入關(guān)于我們頁(yè)面的。作為一個(gè)專業(yè)的葡萄酒進(jìn)口公司,Boone Selections 的關(guān)于我們頁(yè)面用獨(dú)特的排版和滾動(dòng)式的頁(yè)面設(shè)計(jì),營(yíng)造出獨(dú)有的品牌氣息。

9、展示聯(lián)絡(luò)方式

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

This Also 的關(guān)于我們頁(yè)面設(shè)計(jì)可謂是可靠而到位了,頁(yè)面地圖標(biāo)注出了公司地點(diǎn)也就算了,當(dāng)你向下滾動(dòng)頁(yè)面的時(shí)候,還能看到詳細(xì)地址的說明、沿線地鐵的乘坐方式、溝通的電子郵件地址、電話,等等等等,不一而足。

10、給個(gè)提示

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

網(wǎng)站 Deux Huit Huit 的關(guān)于我們頁(yè)面并沒有提供傳統(tǒng)意義上的溝通方式,而是設(shè)計(jì)成了一個(gè)直觀而簡(jiǎn)單的對(duì)話框。頂上“Say hello ?”的對(duì)話框非常直接地提示用戶,只要輸入內(nèi)容,網(wǎng)站的開發(fā)者就能看到了。

11、標(biāo)明開門/工作時(shí)間

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

對(duì)于諸如餐廳、博物館、商店等有具體營(yíng)業(yè)時(shí)間的機(jī)構(gòu)的官方網(wǎng)站,在關(guān)于我們頁(yè)面當(dāng)中標(biāo)注店鋪開門的時(shí)間、接受電話咨詢的時(shí)間,可以讓用戶更加有效地接受服務(wù)。

12、使用醒目的字體

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

Panache 的關(guān)于我們頁(yè)面中標(biāo)題字體采用了非常醒目的“Travaillons Ensemble”,這種字體更為輕巧,雖然獨(dú)特但是具有極高的識(shí)別度。

13、使用大膽的配色方案

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

經(jīng)典的黑白黃的配色方案被運(yùn)用到Sponge 的關(guān)于我們頁(yè)面當(dāng)中,這種強(qiáng)對(duì)比的配色結(jié)合細(xì)致的細(xì)節(jié)刻畫,讓整個(gè)頁(yè)面看起來銳利又富有質(zhì)感。設(shè)計(jì)師將明亮的色彩運(yùn)用到最關(guān)鍵的信息上,讓用戶更容易注意到它們。

14、采用形象化的插畫

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

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

15、使用簡(jiǎn)約的圖形

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

Giampiero Bodini 的關(guān)于我們頁(yè)面并沒有使用復(fù)雜的設(shè)計(jì)技巧,而是在素描的繁復(fù)背景上,放上一個(gè)簡(jiǎn)單的矩形,將聯(lián)系方式與相關(guān)信息置于其中。繁復(fù)和簡(jiǎn)單,手繪和圖形,形成了鮮明的對(duì)比。

16、借助表單來溝通

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

溝通是相互,你可以發(fā)信息給網(wǎng)站,也可以留下聯(lián)系方式,讓網(wǎng)站的運(yùn)營(yíng)者給你發(fā)信息。QED Group 直接在聯(lián)系我們頁(yè)面中留下一個(gè)表單,你可以通過這個(gè)表單留下聯(lián)系方式。

17、使用單色配色

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

簡(jiǎn)單優(yōu)雅和易讀是 Joseph A Avoue 的網(wǎng)站聯(lián)系我們頁(yè)面的設(shè)計(jì)風(fēng)格,沒有華麗的設(shè)計(jì),也沒有花哨的功能,一個(gè)纖細(xì)的環(huán),中間是最基本的聯(lián)系信息,就是這么直接。

18、幽默

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

幽默的設(shè)計(jì)師不會(huì)放過任何一個(gè)搞怪的機(jī)會(huì),Bio-Bak 的設(shè)計(jì)師即使是在聯(lián)系我們頁(yè)面當(dāng)中也會(huì)嘩眾取寵一把。涂鴉字體和俏皮的文案讓人忍俊不禁,你能夠從每一個(gè)細(xì)節(jié)感受到這個(gè)設(shè)計(jì)師的幽默細(xì)胞。

19、填寫表單

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

Anakin 的關(guān)于我們頁(yè)面同樣是讓用戶填寫聯(lián)系信息,不過在表單的設(shè)計(jì)上更加獨(dú)特,并沒有專門的表單,而是使用占位符提示用戶各個(gè)位置需要填寫的內(nèi)容,貼心、直覺,也非常走心。

20、個(gè)性化的辦公地點(diǎn)展示

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

和第二個(gè)案例類似,CPB集團(tuán)在全球各地都有辦公室,但是在設(shè)計(jì)的樣式上也更加獨(dú)特,各地辦公室的內(nèi)容和個(gè)性化的背景融為一體,信息得到了整合,展現(xiàn)方式也個(gè)性十足。

【優(yōu)設(shè)人氣超高的PS教程排行榜】

Top 1:效果超棒的極簡(jiǎn)風(fēng)格海報(bào)!
《AI+PS新手教程!手把手教你打造簡(jiǎn)約現(xiàn)代的極簡(jiǎn)海報(bào)》

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

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

原文地址:designschool
優(yōu)設(shè)譯文:@陳子木

「子木說」

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

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

個(gè)性宣言!40個(gè)優(yōu)秀的關(guān)于我們頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)案例(上)

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯,請(qǐng)尊重版權(quán)和譯者成果,轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接,違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái),專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書:史上最全的設(shè)計(jì)師圖書導(dǎo)航:http://hao.uisdc.com/book/
設(shè)計(jì)微博:擁有粉絲量108萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com

收藏 11
點(diǎn)贊 4

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。