請(qǐng)聯(lián)系我！15個(gè)體驗(yàn)舒適的聯(lián)系人頁(yè)面設(shè)計(jì)欣賞

到了設(shè)計(jì)聯(lián)系人頁(yè)面的時(shí)候，做好用戶(hù)體驗(yàn)設(shè)計(jì)同樣重要。聯(lián)系人頁(yè)面是用戶(hù)與網(wǎng)站進(jìn)行溝通的另外一個(gè)重要入口，如果頁(yè)面沒(méi)有信息，也沒(méi)有主動(dòng)溝通用戶(hù)，那么將很難吸引潛在用戶(hù)來(lái)與網(wǎng)站進(jìn)行聯(lián)絡(luò)。對(duì)于網(wǎng)站而言，這是極大的浪費(fèi)。

接下來(lái)，通過(guò)以下的15個(gè)案例來(lái)幫你開(kāi)拓設(shè)計(jì)思路。千萬(wàn)不要忽略聯(lián)系人頁(yè)面設(shè)計(jì)，它們也很重要！

Cleverbirds

Cleverbird的聯(lián)系人頁(yè)面配色非常漂亮，底部使用了明黃色的地圖背景，輸入框與上半部分的內(nèi)容相互對(duì)應(yīng)，吸引用戶(hù)與網(wǎng)站保持聯(lián)系。

GCM

這家?jiàn)W地利的公司在網(wǎng)頁(yè)設(shè)計(jì)上不遺余力，對(duì)于聯(lián)系人頁(yè)面的設(shè)計(jì)也極為用心。當(dāng)你個(gè)滾動(dòng)頁(yè)面不同地方的時(shí)候，會(huì)有不同的動(dòng)畫(huà)效果，個(gè)性十足，體驗(yàn)很棒。這種體驗(yàn)可能會(huì)吸引那些好奇的用戶(hù)關(guān)注網(wǎng)站，因?yàn)榻^大多數(shù)的網(wǎng)站并不具備這樣的體驗(yàn)設(shè)計(jì)。

Kinhr

Kinhr公司網(wǎng)站的聯(lián)系人頁(yè)面設(shè)計(jì)的非常大氣，頂部Banner使用的員工照片充滿(mǎn)了精英的感覺(jué)，配合整個(gè)網(wǎng)站的設(shè)計(jì)，給人一種專(zhuān)業(yè)和充滿(mǎn)力量的感覺(jué)。最重要的是網(wǎng)站設(shè)計(jì)干凈且目標(biāo)明確。

Humaan

作為一個(gè)創(chuàng)意機(jī)構(gòu)，網(wǎng)站設(shè)計(jì)設(shè)計(jì)清爽而時(shí)尚，排版漂亮。有意思的是，網(wǎng)站在色彩設(shè)計(jì)上好象不拒絕混搭，說(shuō)明他們很明確自己在做什么。

Multifarious

這個(gè)網(wǎng)站最有意思的地方在于它并沒(méi)有如同其他網(wǎng)站一樣簡(jiǎn)單粗暴地設(shè)計(jì)輸入框，相反，他們使用了一個(gè)綠色的按鈕，并以請(qǐng)求的語(yǔ)氣在按鈕上寫(xiě)上“Pass us your details”，委婉而紳士。

Bkwld

網(wǎng)站設(shè)計(jì)素雅，視覺(jué)上不會(huì)對(duì)用戶(hù)產(chǎn)生沖擊，和之前的網(wǎng)站一樣，使用了更為婉轉(zhuǎn)的請(qǐng)求語(yǔ)句“Hello! Drop us a line.”，意思同樣是“請(qǐng)聯(lián)絡(luò)我們”，簡(jiǎn)單而清晰。當(dāng)你向下滾動(dòng)的時(shí)候，會(huì)有動(dòng)畫(huà)效果出現(xiàn)，并且伴隨著一句話(huà)“Call us if you get lost”和一個(gè)笑臉的表情，也就是“如果迷路了請(qǐng)聯(lián)絡(luò)我們”，給人感覺(jué)非常親切。

Modoluce

深色的背景和淺色的文字形成鮮明的對(duì)比，文字排版頗具張力，個(gè)人以?xún)?yōu)雅的感覺(jué)。

Invisionapp

這個(gè)聯(lián)系人頁(yè)面并不是特別出彩，但是簡(jiǎn)約清爽的設(shè)計(jì)給人感覺(jué)不錯(cuò)。周?chē)c(diǎn)綴的涂鴉沖淡了網(wǎng)站的規(guī)則的布局給人帶來(lái)的輕微壓力，非常微妙。

Landerapp

這個(gè)頁(yè)面的獨(dú)特之處在于在底部的聯(lián)系人信息的部分有客服人員的頭像和電話(huà)，你真的可以打給他咨詢(xún)相關(guān)的事宜。坦率的講，這是可以完美展現(xiàn)公司人性化的一面。

Purplerockscissors

這一個(gè)別具一格的聯(lián)系人頁(yè)面，設(shè)計(jì)師使用了非正式語(yǔ)氣的文案，他們問(wèn)的是“你在想什么？”并且給予了三中可能的選項(xiàng)供你選擇，用戶(hù)不用費(fèi)神思考。

Fiordilattegelato

公司網(wǎng)站與社交媒體的聯(lián)系越來(lái)越緊密。所以這個(gè)聯(lián)系人頁(yè)面干脆就將公司的Facebook和Twitter鏈接以最大字號(hào)醒目地展示給來(lái)訪者。有點(diǎn)投機(jī)取巧，但是非常有效。

Builtbybuffalo

頁(yè)面設(shè)計(jì)非常干凈簡(jiǎn)約，各種聯(lián)系方式一應(yīng)俱全，直接有效，從圖標(biāo)設(shè)計(jì)到布局都顯得極為素雅。

Cafeevoke

網(wǎng)站的設(shè)計(jì)風(fēng)格非常討喜，大量的色塊和線條交疊在一起讓原本普通的網(wǎng)頁(yè)給人以一種愉悅的視覺(jué)享受。

Nedd

這又是一個(gè)簡(jiǎn)約的聯(lián)系人頁(yè)面，網(wǎng)頁(yè)被分割成4個(gè)不同的區(qū)塊，有的是地圖有的是聯(lián)系方式，直觀而實(shí)用，把握到了極簡(jiǎn)主義風(fēng)格的精髓。

Onlinedepartment

這個(gè)聯(lián)系人頁(yè)面也非常獨(dú)特，通過(guò)講故事的方式來(lái)吸引用戶(hù)。當(dāng)你滾動(dòng)頁(yè)面的時(shí)候，就如同在翻看一本故事書(shū)，每一頁(yè)都有一個(gè)不一樣的故事。這種設(shè)計(jì)很獨(dú)特，但是很有用。

結(jié)語(yǔ)

這些案例中的頁(yè)面，有的時(shí)尚有的簡(jiǎn)約，有的設(shè)計(jì)巧妙，有的直觀有效，但是他們的目的是一樣的：用優(yōu)質(zhì)的體驗(yàn)吸引并溝通用戶(hù)。

網(wǎng)頁(yè)設(shè)計(jì)師們，網(wǎng)頁(yè)的邊邊角角都是你們的戰(zhàn)場(chǎng)！

先看聯(lián)系人頁(yè)面姊妹篇！
《想讓用戶(hù)心甘情愿留下郵箱？來(lái)向這組網(wǎng)站取經(jīng)！》

就是導(dǎo)航欄也不簡(jiǎn)單！
《導(dǎo)航還能這么玩！15個(gè)別出心裁的全屏導(dǎo)航網(wǎng)站設(shè)計(jì)欣賞》

哪怕用戶(hù)迷路了也需要你！
《超實(shí)用！不容錯(cuò)過(guò)的優(yōu)秀404頁(yè)面設(shè)計(jì)指南》

原文地址：designmodo
優(yōu)設(shè)網(wǎng)翻譯：@陳子木

本文由優(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"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量76萬(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
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：