教你設(shè)計(jì)一個(gè)頂尖的“聯(lián)系我們”頁面

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

簡化聯(lián)系表格

Yummygum

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

大號的文字顯得簡練易讀，方便瀏覽者快速校對信息，從而有更大的滿足感。

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

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

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

Princeink

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

記住，不是每個(gè)框都要填寫。只有帶星號是必填的。大部分情況下，游客能夠識(shí)別星號，但是部分游客可能發(fā)現(xiàn)不了。如果是設(shè)計(jì)更大的聯(lián)系表格，要突出必填的項(xiàng)目。這樣將簡化提交過程，優(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)系頁面很獨(dú)特。顯而易見，這個(gè)聯(lián)系表格用了CSS樣式表和JavaScript。輸入界面看起來像一般正式文件的表格形式。設(shè)計(jì)獨(dú)特整潔，讓人覺得發(fā)送電子郵件也成了一種樂趣！

Dangerousrobot

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

添加地圖標(biāo)注

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

Bkwld

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

Fortyonetwenty

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

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

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

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

Tone

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

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

Positiveadvertising

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

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

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

Blueskyresumes

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

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

Etsy

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

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

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

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

、摘要

（OF作品展示）

OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁，以后我們就可以自己開發(fā)網(wǎng)頁/網(wǎng)站放到互聯(lián)網(wǎng)上。

主要內(nèi)容：網(wǎng)頁前端布局

適用人群：Python初學(xué)者，前端初學(xué)者

準(zhǔn)備軟件：pycharm

二、pycharm操作說明

1. 創(chuàng)建項(xiàng)目

1) 下載完成pycharm, 點(diǎn)擊file-New Project...

2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來做完整的系統(tǒng)

2. 創(chuàng)建HTML文件

1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File

2）輸入英文的網(wǎng)頁名字，盡量不要輸入中文/特殊字符

3. HTML格式說明

當(dāng)雙擊打開我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面

三、網(wǎng)頁設(shè)計(jì)

1. 草圖繪制

在開始開發(fā)網(wǎng)頁前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁面樣式，可以手繪，也可以在PPT上畫。

2. css名字定義

我們先學(xué)習(xí)一個(gè)比較簡單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下

四、網(wǎng)頁開發(fā)

1. body部分

根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網(wǎng)頁測試

1）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行

2）目前看到的網(wǎng)頁內(nèi)容從上到下顯示

3. head部分

首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：

(注：style中的#main對應(yīng)body中的id=main, .main對應(yīng)class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運(yùn)行結(jié)果：

2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運(yùn)行結(jié)果：

3）圖片之間靠太近，圖片大小不一致，文字沒居中，我們在<style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運(yùn)行結(jié)果：

五、總結(jié)

今天我們學(xué)會(huì)了flex布局，今后所有的網(wǎng)頁排版都可以實(shí)現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對網(wǎng)頁上的實(shí)現(xiàn)有什么不懂的，盡請留言，OF一定會(huì)一一解答的。

們在寫一個(gè)網(wǎng)站或者一個(gè)網(wǎng)頁界面的時(shí)候，需要學(xué)習(xí)很多東西，對小白來說很困難！比如我要做一個(gè)簡單的網(wǎng)頁交互：

要懂后端，比如Python里面的Django或者Flask，或者是Java里面的SpringBoot

要懂前端，現(xiàn)在都叫大前端了(因?yàn)楹軓?fù)雜)，比如前端的框架Vue/React, 然后頁面的美化框架Bootstrap ，還有html ,csss 和Javascript 三駕馬車.

天啊，聽聽頭都大呢！其實(shí)我就給老板做一個(gè)簡單的交互的頁面，而且我只會(huì)Python ,有沒有很簡單的辦法可以做到呢。

今天小編在Github上逛的時(shí)候，找到一個(gè)非常酷的神器，名字叫remi ,目前收獲了2300個(gè)贊。

star并不是很多，但是這個(gè)庫可是選入2018年的十大明星庫，號稱是一個(gè)獨(dú)立的GUI庫，而且最牛逼的就是這個(gè)庫竟然小于 100K ，是否很神奇呢，我們一起來體驗(yàn)一下特性：

跟其他GUI庫區(qū)別？ Kivy，PyQT和PyGObject都需要主機(jī)操作系統(tǒng)的本機(jī)代碼，這意味著安裝或編譯大型依賴項(xiàng)。Remi只需要一個(gè)Web瀏覽器即可顯示您的GUI。

我需要懂HTML嗎？不，只需要使用Python進(jìn)行編碼。

它是開源的嗎？當(dāng)然！Remi是根據(jù)Apache許可發(fā)布的。開源，免費(fèi)！

我需要某種網(wǎng)絡(luò)服務(wù)器嗎？不，自帶網(wǎng)絡(luò)服務(wù)器。

1、安裝

如何安裝呢，因?yàn)槭荘ython 庫，直接用pip 即可

pip install remi

如果是沒有網(wǎng)絡(luò)的，或者服務(wù)器跟外網(wǎng)不通的，可以離線安裝。下載這個(gè)包，然后用install 安裝

python setup.py install

2、快速體驗(yàn)

我們來快速看一下，這個(gè)簡單的Hello world網(wǎng)頁。

這里面包含了一個(gè) 2個(gè)元素：

文本Hello world ；
一個(gè)Press me的按鈕；

點(diǎn)擊這個(gè)按鈕還會(huì)改變Hello world的文本內(nèi)容，看點(diǎn)一下就變成了Button pressed.

上面這個(gè)簡單的效果，其實(shí)只用了20來行Python代碼，都是原生的Python代碼，沒有用一行HTML .

我們來看一下源碼：

整個(gè)代碼的結(jié)構(gòu)層次還很清晰的：

首先聲明一個(gè)MyApp類，這個(gè)類會(huì)繼承母框架App里面的功能，可以認(rèn)為是一個(gè)網(wǎng)頁畫布；
然后在這個(gè)畫布里面有3個(gè)函數(shù)：

init主要是做類的初始化工作；

main主要對這個(gè)畫布布局進(jìn)行設(shè)計(jì)，包含一個(gè)文本和一個(gè)按鈕。

on_button_pressed主要是控件的相應(yīng)，點(diǎn)擊觸發(fā)函數(shù)

最后是start來啟動(dòng)這個(gè)類，就會(huì)生成一個(gè)本地的網(wǎng)站鏈接

3、更多復(fù)雜的網(wǎng)頁元素

看完上面的設(shè)計(jì)是不是就覺得跟Python里面大名鼎鼎的tk庫很相似啊，上面的只是開胃菜，這個(gè)remi還能提供更復(fù)雜的gui界面元素。

上面的是一個(gè)完整的demo頁面,基本上常見的控件元素的都包含了，比如有菜單欄，文本，按鈕，單選框，進(jìn)度欄，下拉框，表格，彈出框，按鈕選取文件路徑，文件樹形結(jié)構(gòu)，日期等幾十種控件。

有了這個(gè)神器，是不是可以告別Python里面的tk庫，也可以省去學(xué)習(xí)HTML的時(shí)間，還等啥，趕緊下載嘗鮮一下吧。

對Python感興趣或者是正在學(xué)習(xí)的小伙伴，可以點(diǎn)贊關(guān)注收藏支持一波哦，持續(xù)更新中

原文鏈接：https://blog.csdn.net/NNNJ9355/article/details/107319582

在線咨詢

上一篇：HTML網(wǎng)頁編程之按鈕詳解
下一篇：HTML之a(chǎn)標(biāo)簽的使用

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

教你設(shè)計(jì)一個(gè)頂尖的“聯(lián)系我們”頁面

簡化聯(lián)系表格

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

添加地圖標(biāo)注

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

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

、摘 要

二、pycharm操作說明

1. 創(chuàng)建項(xiàng)目

2. 創(chuàng)建HTML文件

3. HTML格式說明

三、網(wǎng)頁設(shè)計(jì)

1. 草圖繪制

2. css名字定義

四、網(wǎng)頁開發(fā)

1. body部分

2. 網(wǎng)頁測試

3. head部分

五、總 結(jié)

您的項(xiàng)目需求

、摘要

五、總結(jié)