設計類網站的「聯繫我們」頁面設計盤點

21 人贊了文章

誠然，能點到「聯繫我們」頁面的多為有需求或有合作意向的用戶，那麼「聯繫我們」頁面設計就要做到簡潔、方便。下面小編就帶領大家圍觀一下設計類網站的頁面設計，來看看他們的「聯繫我們」頁面設計，希望能為大家提供一些思路或者靈感。

1、設計達人

原型預覽鏈接：http://run.mockplus.com/mIXHzPUF8SKcTJSE/index.html

設計達人的「關於我們」頁面，包含三小段關於設計達人的團隊介紹。聯繫我們頁面頂部有各種常用的分析按鈕和加關注按鈕。右側是詳細的分類目錄、頁面、推薦書籍、推薦文章和一些設計交流群，方便大家溝通。

聯繫我們簡單幹凈，有Email和QQ兩種方式。用戶點擊"QQ交談」就可以及時、方便、快速地在線聯繫對方，這是我比較喜歡的地方，不會出現留了各種個人信息仍無任何回復或者回復周期太長的情況。不過，可以把Email和QQ的聯繫方式換成字體（原為圖片樣式），這樣方便用戶複製，避免發送至錯誤郵箱或添加錯誤的QQ。

2、簡書

原型預覽鏈接：https://run.mockplus.cn/3FEG10cQiTm1VdQ5/index.html

簡書的「聯繫我們」頁面設計相當簡潔，但內容並不簡單，同時也利用大量留白增加了內容的重要性。簡書分開展示了不同業務負責人的聯繫方式，讓用戶一目了然，可以直接找到對應的聯繫人信息。

簡書的「聯繫我們」分類很詳細，分開展示的業務有：廣告投放合作、市場推廣/品牌合作、技術類合作、讚賞/提現業務諮詢、人事溝通、封號和鎖文章諮詢、其他事物。

同樣，簡書也在「聯繫我們」頁面設計中加入了「關於我們」的介紹，有簡單的3小段的介紹。

3、花瓣

原型預覽鏈接：https://run.mockplus.cn/ruRZ5uja1Jk4lIGd/index.html

花瓣的「聯繫我們」頁面設計也比較簡潔，分開展示了：商務及流量合作、品牌廣告投放、其他網內一般事物、聯繫客服四種聯繫方式。

亮點是，提供了公司地址和增值電信業務經營許可證，能增強企業的真實感和權威性，在線客服支持也方便緊急事務的聯繫。

4、UI中國

原型預覽鏈接：https://run.mockplus.cn/12gB7T3ijUMEpTQd/index.html

UI中國「聯繫我們」頁面上方是大段大段文字，分別是「關於我們」、「版權聲明」、「隱私保護」。聯繫方式分3類，「網站問題&舉報投訴&建議意見」，「商務合作」，「招聘信息刊登」，聯繫方式有QQ群和Email。

亮點是右下角有置頂按鈕、在線QQ客服、反饋按鈕，底部導航附有二維碼，可惜反饋按鈕和二維碼有重合，如下圖。

5、產品壹佰

原型預覽鏈接：https://run.mockplus.cn/eq8DR74t0KrxLYH6/index.html

產品壹佰的「聯繫我們」頁面設計使用了柵格布局，來組織頁面的信息和需要展示的內容。分別展示了：申請講師、加入我們、客戶服務、媒體與商務接待、教學與產品交流、開課吧。

6、站酷

原型預覽鏈接：https://run.mockplus.cn/Qo1JhLBnzHhtaeN8/index.htm...

站酷的「聯繫我們」頁面設計簡單幹凈，利用線條劃分頁面板塊和布局。聯繫頁面提供了用戶服務和企業服務的聯繫郵箱，聯繫方式相對單一，沒有提供可以在線的及時溝通的聯繫方式。

7、Ui製造者

Ui製造者的「聯繫我們」頁面原型預覽鏈接：https://run.mockplus.cn/wtNkJGSAjy6SZjNl/index.html

Ui製造者的「聯繫我們」頁面設計也是以簡潔為主，提供的聯繫方式有三種，網址居然也算一種聯繫方式。在聯繫我們頁面，但左側菜單欄卻顯示幫助中心，此處為bug，而且友情鏈接打開是空白頁。

小結

綜上國內設計類網站的「聯繫我們」頁面設計，可供參考的有如下特點：

1、整體以簡潔為主，使用大量留白強化頁面的空間感和結構感；

2、提供多種聯繫渠道，可以讓訪客快迅地聯繫我們，將顧客對我們的興趣轉化為實際溝通的行為。

3、提供不同業務的聯繫方式，分開展示讓訪客一目了然，直接找到相應的聯繫方式進行溝通。

成功的聯繫我們頁面設計，有利於提高訪客的轉化率，促進產品和服務的銷售，更好的服務於網站，服務於公司。

聯繫我們頁面設計，就是要讓目的簡單、明確的客戶，方便快速的找到自己需要的聯繫方式，切勿設計的太過花哨。如果覺得本篇文章對你有幫助，歡迎分享給你認為用得上它的朋友。

相關文章推薦：

2018網頁UI設計：輕鬆搞定視覺層次感

關於用戶體驗你應該知道的8件事

APP可訪問性設計：拒絕體驗「障礙」