40多個(gè)漂亮的網(wǎng)頁(yè)表單設(shè)計(jì)實(shí)例

發(fā)布時(shí)間：2009-08-14 01:44:10 作者：佚名

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

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

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

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

1.干凈、簡(jiǎn)單和漂亮的解決方案

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

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

swfir也用了一個(gè)信封一暗示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3。使用插畫(huà)來(lái)提亮表單

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

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

X-Grafik.sk使用一張來(lái)自斯洛華客的郵票。

Kqoule.com有一個(gè)可愛(ài)的伙計(jì)，他邀請(qǐng)?jiān)L問(wèn)都去參加評(píng)論。

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

4。集成更多的功能

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

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

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

5。用圖標(biāo)來(lái)傳達(dá)必填信息。

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

DesignDisease Wordpress Theme 用簡(jiǎn)單的標(biāo)志去指示哪些是必填項(xiàng)。

Bouctoubou.com有很簡(jiǎn)單且基本的標(biāo)志，然而，他們?cè)O(shè)法讓表單更有趣。

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

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

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