網(wǎng)站的每一個(gè)部分都很重要，你是否忽略了“聯(lián)系我們”頁(yè)面？來(lái)看看有什么設(shè)計(jì)這個(gè)頁(yè)面的技巧吧。

簡(jiǎn)化聯(lián)系表格

Yummygum

Yummygum的聯(lián)系頁(yè)面很干凈很簡(jiǎn)單，只有3個(gè)框和一個(gè)提交按鈕。簡(jiǎn)單的好處是不會(huì)讓游客望而卻步。

大號(hào)的文字顯得簡(jiǎn)練易讀，方便瀏覽者快速校對(duì)信息，從而有更大的滿足感。

以現(xiàn)在的網(wǎng)頁(yè)技術(shù)很容易創(chuàng)建一個(gè)動(dòng)態(tài)的聯(lián)系表格。通常留有3-6個(gè)框供瀏覽者填寫(xiě)姓名，郵件和個(gè)人信息。

大多數(shù)網(wǎng)站游客偏愛(ài)這種聯(lián)系表，因?yàn)楸容^節(jié)省時(shí)間——不需要打開(kāi)自己的郵件客戶端、拷貝郵箱地址。目前網(wǎng)站聯(lián)系表格通常包含網(wǎng)絡(luò)安全技術(shù)比如CAPTCHA，所以安全性是很強(qiáng)的。

這種表格的所有元素看起來(lái)很統(tǒng)一，給人感覺(jué)很完整。另外建議使用JavaScript顯示提示和幫助，確保用戶知道他們的消息已發(fā)送成功。

Princeink

復(fù)雜一點(diǎn)表格看Prince Ink quote form網(wǎng)站，頁(yè)面分為4部分。

記住，不是每個(gè)框都要填寫(xiě)。只有帶星號(hào)是必填的。大部分情況下，游客能夠識(shí)別星號(hào)，但是部分游客可能發(fā)現(xiàn)不了。如果是設(shè)計(jì)更大的聯(lián)系表格，要突出必填的項(xiàng)目。這樣將簡(jiǎn)化提交過(guò)程，優(yōu)化用戶體驗(yàn)。

統(tǒng)一中表現(xiàn)審美

表格既要講統(tǒng)一性，也要講審美。畢竟表格是網(wǎng)站外觀的一個(gè)重要部分。

Underbelly

Underbelly是一個(gè)設(shè)計(jì)創(chuàng)意機(jī)構(gòu)網(wǎng)站，聯(lián)系頁(yè)面很獨(dú)特。顯而易見(jiàn)，這個(gè)聯(lián)系表格用了CSS樣式表和JavaScript。輸入界面看起來(lái)像一般正式文件的表格形式。設(shè)計(jì)獨(dú)特整潔，讓人覺(jué)得發(fā)送電子郵件也成了一種樂(lè)趣！

Dangerousrobot

Dangerous Robot 網(wǎng)站的設(shè)計(jì)跟上一個(gè)不同，聯(lián)系表格與其他元素通過(guò)明亮的暖色和矢量圖案很好的融合在一起。聯(lián)系表格基本采取居中模式，每個(gè)框里加上圖標(biāo)，使得辨識(shí)度和閱讀速度得到提高。

添加地圖標(biāo)注

一個(gè)公司的地理位置在商務(wù)交往中往往扮演著重要的角色。加入嵌入式地圖則把企業(yè)地址可視化。谷歌地圖有一個(gè)自定義的嵌入功能，允許開(kāi)發(fā)者添加全功能的谷歌地圖到聯(lián)系頁(yè)面。

Bkwld

BKWLD的聯(lián)系頁(yè)，除了一些基本的郵件/電話信息，添加了MAPbox動(dòng)態(tài)地圖，調(diào)高了交互性。

Fortyonetwenty

也可以考慮使用一個(gè)定制的照片，不用JavaScript地圖。在FortyOneTwenty網(wǎng)站聯(lián)系頁(yè)面，使用一個(gè)世界地圖，上面的藍(lán)點(diǎn)標(biāo)注了全球分公司和員工分布情況。

由于這張照片是作為背景圖像，所以融合更自然。地圖讓位于內(nèi)容，顯得不喧賓奪主。

添加社交網(wǎng)站鏈接

在聯(lián)系頁(yè)面添加社交網(wǎng)站鏈接，可賦予企業(yè)可觸摸的人格。這些鏈接可供瀏覽者在無(wú)法或者不宜使用電話、郵件的情況下聯(lián)系企業(yè)，并且可以瀏覽企業(yè)更多動(dòng)態(tài)信息。最好能在同一頁(yè)上提供不同的社交賬號(hào)鏈接，讓瀏覽者決定選擇哪一個(gè)。

Tone

我最喜歡的英國(guó)創(chuàng)意機(jī)構(gòu)非Tone莫屬，無(wú)論是它的作品或者是作品集網(wǎng)站。它的聯(lián)系頁(yè)使用定位他們辦公室的完整地圖和動(dòng)態(tài)聯(lián)系表格。

往下滾動(dòng)鼠標(biāo)，你會(huì)發(fā)現(xiàn)一個(gè)長(zhǎng)長(zhǎng)的的社交媒體圖標(biāo)水平列表。這些鏈接包括該公司的各種社交賬號(hào)包括Twitter,LinkedIn,Instagram。按鈕大而醒目，但是并沒(méi)有放在頁(yè)面頂部，因?yàn)猷]件，電話和地址才是最重要的。

Positiveadvertising

Positive Advertising網(wǎng)站的社交賬號(hào)圖標(biāo)設(shè)置的比較小。這個(gè)網(wǎng)站是單網(wǎng)頁(yè)網(wǎng)站。社交賬號(hào)圖標(biāo)位于電話號(hào)碼，電子郵件地址和郵寄地址的下面。圖標(biāo)采取了統(tǒng)一的單色處理。

展示團(tuán)隊(duì)成員

這個(gè)方法使用較少，但是可以增加網(wǎng)頁(yè)的個(gè)性。個(gè)人網(wǎng)站可以在聯(lián)系頁(yè)面加上本人照片。大一點(diǎn)的公司往往把照片轉(zhuǎn)移到“公司團(tuán)隊(duì)”頁(yè)面，每個(gè)重要人物有單獨(dú)的照片和介紹。

Blueskyresumes

Blue Sky Resumes網(wǎng)站的“關(guān)于我們”頁(yè)面包含一段團(tuán)隊(duì)的介紹。每個(gè)雇員都有自己?jiǎn)为?dú)的網(wǎng)頁(yè)鏈接。

“聯(lián)系我們”頁(yè)面的頂部，注意到沿左邊一個(gè)固定的滾動(dòng)塊沒(méi)有，滾動(dòng)塊小按鈕鏈接到電子郵件，手機(jī)信息，還可以發(fā)送一個(gè)請(qǐng)求報(bào)價(jià)。這個(gè)網(wǎng)站聯(lián)系頁(yè)面非常生動(dòng)，讓人耳目一新。

Etsy

Etsy的“團(tuán)隊(duì)”頁(yè)面。每個(gè)團(tuán)隊(duì)成員照片鏈接到各人簡(jiǎn)介頁(yè)面。這種個(gè)性化的設(shè)計(jì)無(wú)論是對(duì)于客戶還是公司的第三方供應(yīng)商來(lái)講是都很棒的。

這個(gè)團(tuán)隊(duì)網(wǎng)頁(yè)不直接鏈接到他們的聯(lián)系頁(yè)面。這是一種有目的的設(shè)計(jì)選擇，因?yàn)楣居心敲炊嗦殕T，足夠撐起一個(gè)網(wǎng)頁(yè)。不過(guò)該網(wǎng)頁(yè)可以鏈接到“關(guān)于”網(wǎng)頁(yè)，“新聞”網(wǎng)頁(yè)，其中包含一些電子郵件聯(lián)系信息。

團(tuán)隊(duì)成員列表不是必須有的，但在合適的時(shí)機(jī)可以作為良好的補(bǔ)充。

任何網(wǎng)頁(yè)的最重要的是可用性，只要你學(xué)會(huì)迎合用戶體驗(yàn)，那么設(shè)計(jì)精良的聯(lián)系頁(yè)面就不在話下了。

來(lái)源：blog.enqoo