網(wǎng)頁表單是訪問者與網(wǎng)站擁有者主要的溝通途徑。返饋總是重要的，這就是我們?yōu)槭裁创_保網(wǎng)頁表單容易理解和使用起來比較直觀的原因，盡管如此，甚至在形式設(shè)計中它也擔當創(chuàng)意中的有效部分。

網(wǎng)頁表單并非都是乏味的，使用css或flash,你能確保它們具有吸引力且有效。要注意，你需要提出一些獨特且有趣東西-表單的符號、圖標、顏色、位置或者尺寸是被經(jīng)常用來獲得有趣設(shè)計解決方案。我們已經(jīng)尋找了一些例子，并且已經(jīng)找到了他們。有創(chuàng)意的、原創(chuàng)的且不尋常的網(wǎng)頁表單。

下面我腳本之家介紹40多個漂亮的網(wǎng)頁表單例子以及現(xiàn)代的解決方案和與網(wǎng)頁表單設(shè)計有關(guān)的創(chuàng)造性思維.其中有一些是flash的；盡管如此，在大多數(shù)情況下，你能很容易的使用簡單的css和(x)html來創(chuàng)建相同的設(shè)計.

1.干凈、簡單和漂亮的解決方案

由于網(wǎng)頁表單或許是網(wǎng)站中最重要部分之一，你作為一個設(shè)計者必需確保訪問者容易理解在表單區(qū)域他們需要填寫什么樣的信息。復(fù)雜而且長的表單增加了使用者的認識負荷-他們只是更難處理。在上下文中，選擇簡單且干凈的解決方案似乎是一個良好的方法。然而，如果表單要注重細節(jié)的設(shè)計并且看上去不錯，那么使用一些具有吸引力的圖標也是很合理的。

softmail's 的通訊盒來自巴西，在表單設(shè)計中它展示一個相當不錯的與表單融入一體的郵件圖標。提交按鈕是干凈且有效的。這是一個創(chuàng)意的設(shè)計。

swfir也用了一個信封一暗示。

在katrin wegmann的網(wǎng)站使用了手寫。引人注意、吸引人眼球和好玩的設(shè)計使它的功能完美的傳達給了用戶。

TheWatchMakerProject 的設(shè)計給人深刻的印象。這個表單放置在最新評論的右手邊。

Frexy.com用了一個好而干凈的解決方案

Flingmedia用了一個變化的聯(lián)系表單，依賴于訪問者的意圖（一般評論，新項目的請求），用戶可以選擇他/她感興趣的網(wǎng)頁表單。

Envero.org-網(wǎng)頁表單是大且填充整個布局的寬度。因此選擇了相應(yīng)的字體大小和輸入框的大小。

2。創(chuàng)造的解決方案

雖然網(wǎng)頁表單被認為足夠可以讓用戶和網(wǎng)站擁有者保持聯(lián)系,但是一些設(shè)計者還是常常冒著創(chuàng)造性設(shè)計的風(fēng)險，為了使訪問者不會感覺布局的乏味，盡管標準的網(wǎng)頁表單他們使用了好幾年。許多不同的暗示被使用，下面概括了一些有趣的例子。

CRreated 201.com 看看這個非常不同的透視效果的聯(lián)系表單。這個效果是用flash創(chuàng)建的。

好吧，這個確實與眾不同。如果您想聯(lián)系Edward Pistachio，您首先需要解決一個難題。這種做法是不適用的博客或商務(wù)網(wǎng)站。然而，它完全符合這個概念性的網(wǎng)站。訪問者都感到驚訝。

Chemistry Recruitments 用了一個文件夾，幾張便函條和幾張紙

Alexandru Cohaniuc 使用一張草紙和一張郵票展示了一個巨大的網(wǎng)頁表單。

Tony Yoo的聯(lián)系表單的左手邊有一個詳細聯(lián)系信息。

Qwert City 用戶可以發(fā)送給設(shè)計師一個明信片。

wildvuur.com-這個網(wǎng)頁表單與網(wǎng)站布局完全融為一體

BubblesSoc有一個帶頂?shù)拇蟮姆浅４蟮木W(wǎng)頁表單。

3。使用插畫來提亮表單

當一個用戶點擊指向網(wǎng)頁表音的鏈接的時候，他/她與網(wǎng)站擁有者取得聯(lián)系只差一步。一些設(shè)計者為了確保訪問者確實能夠填寫表單，他們使用有吸引力的文字和插畫，讓用戶對表單感覺更加的舒適。

Intuitive Designs試圖通過一個忙碌的郵遞員來給訪問者深刻的印象。難道他能應(yīng)付得過來嗎？

X-Grafik.sk使用一張來自斯洛華客的郵票。

Kqoule.com有一個可愛的伙計，他邀請訪問都去參加評論。

Dressfordialogue.com在表單右側(cè)的上部用了一個微小的插畫,盡管如此，有時它也能起到足夠的效果。

4。集成更多的功能

尋找一些創(chuàng)意性的網(wǎng)頁表單，我們注意到一些新的功能被使用，這在過去是不多見的，它們是被用來為用戶的文字格式提供富文本編輯的wysiwig-editors和sliders.Editors,不同的標題等級和圖片?；瑮U被用來定義一個給定項目的預(yù)算限制。

InfectedFx有一個相當復(fù)雜的網(wǎng)頁表單，里面有提示、選擇項和按鈕，表單還融入了一個WYSIWIG-editor的文本框區(qū)域。

Sidebarcreative.com給潛在客戶提供了一個限制項目預(yù)算的滑桿。

5。用圖標來傳達必填信息。

從可用性的角度來看，沒有什么東西比一個長的純文本標簽和沒有視覺指示圖標的網(wǎng)頁表單更讓人頭痛。這樣的表單是乏味的。不吸引人，也不使用戶感覺舒適。你能更好的設(shè)計表單，事實上，沒許多必填項。通常圖標用來指示用戶哪些是必填項。

DesignDisease Wordpress Theme 用簡單的標志去指示哪些是必填項。

Bouctoubou.com有很簡單且基本的標志，然而，他們設(shè)法讓表單更有趣。

6。手寫和邋遢風(fēng)格的使用

我曾經(jīng)寫過在現(xiàn)代網(wǎng)頁設(shè)計中手寫和邋遢風(fēng)格的使用。這樣的設(shè)計元素在網(wǎng)頁表單中也已經(jīng)在使用，它是獨特的且作為傳達設(shè)計設(shè)計者個性的。特別是 以flash為基礎(chǔ)的網(wǎng)頁設(shè)計更喜歡這種方式。

Redblu 提供了一張報紙。要得到表單，你需要相應(yīng)的拖動報紙。

Fivecentstand提供了一個以flash為基礎(chǔ)的解決方案，它意味著與整個站點融為一體。對于新用戶來說它可能相當?shù)睦щy。

Pointofe.com使用一個便條作為網(wǎng)頁表單。字體大小或許應(yīng)當增大。

Swiths.com用了一個老式設(shè)計。同時提供了懸停效果。

7。實驗性的解決方案

下面你將找到一些不尋常使用的解決方案，它能為你的設(shè)計提供一個起點。并非它們中所有的都好看，但是他們有一些東西可能能進一步的提高你的設(shè)計思維。

adorama.com提供了一看上去不錯的和緊湊的解決方案：側(cè)邊欄里的一個通訊盒

不同的語言-不同的風(fēng)格，在Booloob.com提交按鈕被放置在表單的左手邊。

Paregonta.com:立體且極簡單。色彩多樣且特別緊湊的表單。

Sunmatecushions.com有一個真正不同的風(fēng)格，在這里它不知怎么的就適合。

嗯，為什么不呢？在GeekAndHype.com上壁紙作為背景

Revota.com是黑色的且陰暗的，但是在顯示當前區(qū)域時用了一個高亮的懸停效果。

catydesign 也很暗淡。這個表單給人印象深刻的是建議信息放置在一個合適的地方。

MyMileMarker:表單沒有寬度的限制。有時橫向表單比豎向表單更好用。

Jaroslav Cerny 展示了怎樣去將一個網(wǎng)頁表單和電子郵件混合在一塊。這個表單不再在線，但它絕對值得一提。

Xyarea.be 不一般且原創(chuàng)。它可能是世界上最單薄的通訊盒。

最新評論