溝通是一件重要的事情，這也使得聯(lián)系我們頁(yè)面的設(shè)計(jì)是整個(gè)項(xiàng)目中無(wú)法忽視，也無(wú)法含糊的部分。因?yàn)樗粌H是要給用戶(hù)一個(gè)交代，而且作為網(wǎng)站的自留地，對(duì)于團(tuán)隊(duì)自己而言，也必須給出一個(gè)“足夠漂亮”的交代。設(shè)計(jì)手法，展現(xiàn)方式，風(fēng)格走向，這些東西都是頁(yè)面設(shè)計(jì)需要注意的地方，但是尤其重要的是，關(guān)于我們頁(yè)面中“我們”是最重要的元素。有的團(tuán)隊(duì)喜歡“官方”一點(diǎn)，有的喜歡個(gè)性一點(diǎn)，也有的團(tuán)隊(duì)喜歡幽默的呈現(xiàn)手法，也不乏一些手藝高超的設(shè)計(jì)團(tuán)隊(duì)在這個(gè)頁(yè)面當(dāng)中再炫一下技術(shù)和設(shè)計(jì)手法。但是無(wú)論如何，關(guān)于我們頁(yè)面設(shè)計(jì)是一件重要的事情，有時(shí)候讓自己高興，甚至?xí)剡^(guò)讓客戶(hù)高興。

扯遠(yuǎn)了，來(lái)看看接下來(lái)的20個(gè)案例吧。

21、介紹一下業(yè)務(wù)

在關(guān)于我們頁(yè)面當(dāng)中介紹自己并不稀奇，不過(guò)除此之外可以做的還有很多，比如介紹一下自家的業(yè)務(wù)，展示一下自家的品牌，吸引用戶(hù)來(lái)聊聊也是很不錯(cuò)的手段。Hello Monday 的關(guān)于我們頁(yè)面就是這么做的。

22、視頻背景

在網(wǎng)站里面添加視頻背景已經(jīng)是一種非常流行的手段了，而作為電影制作工作室而存在的Moodboard 在關(guān)于我們頁(yè)面中使用視頻背景不僅符合他們團(tuán)隊(duì)的工作性質(zhì)，而且讓整個(gè)關(guān)于我們頁(yè)面更加鮮活了。

23、使用柵格布局

要設(shè)計(jì)結(jié)構(gòu)化的頁(yè)面，柵格總是你最好的朋友。Urban Influence 的關(guān)于我們頁(yè)面使用柵格來(lái)組織整個(gè)頁(yè)面的信息，需要展示的內(nèi)容，讓用戶(hù)輸入的部分，裝飾性的部分和展示用的地圖，都界限分明地分布在頁(yè)面上。

24、讓界面更加友好

如果讓界面更加友好，設(shè)計(jì)師要做的工作并不少。清晰而易讀的界面設(shè)計(jì)是最基本的，信息要能夠清晰的傳遞出來(lái)，沒(méi)有侵略性的配色，讓人感到熟悉、親切的呈現(xiàn)方式，易于操作的交互方式，這都是設(shè)計(jì)師要做好的地方。

25、分步引導(dǎo)

取得聯(lián)系包含著一系列的操作，如果將整個(gè)交互過(guò)程分割成為若干步驟，一步一步引導(dǎo)用戶(hù)來(lái)操作，加入動(dòng)效和微交互，這絕對(duì)是一種不一樣的體驗(yàn)。

26、增加聯(lián)系人快捷方式

團(tuán)隊(duì)中負(fù)責(zé)不同部分的負(fù)責(zé)人通常不一樣，用戶(hù)打開(kāi)聯(lián)系我們頁(yè)面通常有著明確的目標(biāo)，如何將FAQ部分加入其中，并且添加特定的聯(lián)系人的聯(lián)系方式，讓用戶(hù)可以更加直接地同不同的負(fù)責(zé)人進(jìn)行溝通。

27、同網(wǎng)站其他部分整合到一起

Robby Leonardi 的網(wǎng)站似乎被設(shè)計(jì)成一個(gè)扁平風(fēng)的電腦游戲，當(dāng)你瀏覽頁(yè)面的時(shí)候，會(huì)隨著主角去不同的頁(yè)面，做不同的事情，而去關(guān)于我們頁(yè)面也是其中的一個(gè)“場(chǎng)景”。這是一種整合頁(yè)面的方式，值得學(xué)習(xí)。

28、團(tuán)隊(duì)合影

許多網(wǎng)站背后都是一整個(gè)開(kāi)發(fā)和設(shè)計(jì)團(tuán)隊(duì)在運(yùn)作，用團(tuán)隊(duì)成員合影作為關(guān)于我們頁(yè)面的背景圖也是非常合理且有個(gè)性的做法。

29、使用留白

通常留白能強(qiáng)化整個(gè)頁(yè)面的空間感和結(jié)構(gòu)感，而B(niǎo)eta Tataki 在關(guān)于我們頁(yè)面就放置了一個(gè)設(shè)計(jì)感十足了電話，通過(guò)留白強(qiáng)化了聯(lián)系方式等內(nèi)容的存在感。

30、活用字體排版

精心設(shè)計(jì)的字體排版不僅具有裝飾性，還可以承載一定的內(nèi)容。Pauline Osmont 的聯(lián)系我們頁(yè)面使用了黑色、銀色和金色來(lái)構(gòu)建吸引人的字體排版主視覺(jué)設(shè)計(jì)。當(dāng)你向下滾動(dòng)頁(yè)面的時(shí)候，能看到易于閱讀排版到位的表單。

31、親手展示

這也是近幾年比較常見(jiàn)的一種內(nèi)容展現(xiàn)方式，設(shè)計(jì)師親手舉起展板來(lái)展示設(shè)計(jì)作品。如果用在聯(lián)系我們頁(yè)面中，這種設(shè)計(jì)師手法也是相當(dāng)?shù)膽?yīng)景呢。就像Mark Jaworkski 的這個(gè)頁(yè)面，設(shè)計(jì)師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。

32、列舉社交媒體聯(lián)系方式

現(xiàn)在哪個(gè)網(wǎng)站沒(méi)幾個(gè)社交媒體帳號(hào)呢？在關(guān)于我們的頁(yè)面當(dāng)中將自家網(wǎng)站的各個(gè)社交媒體的鏈接都貼出來(lái)，對(duì)于許多用戶(hù)來(lái)說(shuō)反而更加便于聯(lián)系。

33、借用傳統(tǒng)的溝通方式

復(fù)古的樣式是不錯(cuò)的選擇，但是使用傳統(tǒng)的聯(lián)系方式來(lái)設(shè)計(jì)，似乎更加走心也更有意思。Lionway 的聯(lián)系我們頁(yè)面就設(shè)計(jì)成了明信片的形式，還有一些固定的信息干脆就列舉在一個(gè)打印賬單上。

34、俏皮的文案

文案的設(shè)計(jì)也是聯(lián)系我們頁(yè)面中重要的部分，親切、幽默的文案設(shè)計(jì)會(huì)讓用戶(hù)感到親近，但是同樣的，俏皮的、機(jī)智的文案也一樣會(huì)讓用戶(hù)難忘。

35、展現(xiàn)個(gè)性

設(shè)計(jì)工作室 Resn 的聯(lián)系我們頁(yè)面設(shè)計(jì)絕對(duì)是這組案例中最有個(gè)性的頁(yè)面之一，充滿80年代風(fēng)情的設(shè)計(jì)元素，和帶著動(dòng)物頭套的團(tuán)隊(duì)成員圖片組成了頁(yè)面的主體。

36、運(yùn)用信息圖

信息圖是近幾年一直處于上升階段的設(shè)計(jì)手法，如果有合適的展示內(nèi)容，在關(guān)于我們頁(yè)面中使用信息圖也是相當(dāng)不錯(cuò)的選擇。Quicksprout 的關(guān)于我們頁(yè)面就使用了信息圖來(lái)呈現(xiàn)內(nèi)容，清晰易讀，而且準(zhǔn)確到位。

37、動(dòng)畫(huà)和卡通

在聯(lián)系我們頁(yè)面中使用卡通和動(dòng)漫式的形象來(lái)呈現(xiàn)設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)是相當(dāng)常見(jiàn)也相當(dāng)有效的手段，Melonfree 的關(guān)于我們頁(yè)面就將設(shè)計(jì)師和開(kāi)發(fā)者的卡通形象擺了出來(lái)。

38、使用半透明的圖形

人的眼睛總會(huì)有意識(shí)地去識(shí)別想要石碑的內(nèi)容，所以即使的半透明的元素加載在一起，也不會(huì)特別嚴(yán)重地影響閱讀體驗(yàn)。Indofolio 的頁(yè)面設(shè)就充分運(yùn)用半透明的元素，將核心的聯(lián)系方式放在半透明的矩形上，透過(guò)圖形用戶(hù)依然能看到背景的細(xì)節(jié)，但是又不會(huì)看不清關(guān)鍵的聯(lián)系方式。

39、手繪效果

手繪的聯(lián)系我們頁(yè)面，尤其是那些畫(huà)的還相當(dāng)養(yǎng)眼的頁(yè)面，總能讓用戶(hù)感受到設(shè)計(jì)者的貼心。Mario Petrone 的這個(gè)頁(yè)面設(shè)計(jì)就相當(dāng)?shù)那纹び腥ぁ?/p>

40、僅用一個(gè)下拉框

Spokes Pedicabs 的聯(lián)系我們頁(yè)面其實(shí)談不上一個(gè)完整的頁(yè)面，而用一個(gè)下拉框代替，當(dāng)你點(diǎn)擊導(dǎo)航了中的鏈接，會(huì)出現(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：給心愛(ài)的妹子畫(huà)一個(gè)Q版頭像！
《萌系PS教程！手把手教你打造Q版的個(gè)人頭像》

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

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

「子木說(shuō)」

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

今天借由馮老師的微博看到了浙江衛(wèi)視跨年晚會(huì)上導(dǎo)播們工作的細(xì)節(jié)，發(fā)現(xiàn)他們的工作和設(shè)計(jì)師們的日常是如此的相似。看似不經(jīng)意的過(guò)場(chǎng)里是對(duì)近20個(gè)機(jī)位的完全掌握，是對(duì)環(huán)境、時(shí)間、空間、節(jié)奏、表演者甚至音樂(lè)情緒的精準(zhǔn)把控。

感慨一下，接著改圖去。

本文由優(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)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(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