目录
1.干净、简单和漂亮的解决方案
2。创造的解决方案
3。使用插画来提亮表单
4。集成更多的功能
5。用图标来传达必填信息。
6。手写和邋遢风格的使用
7。实验性的解决方案
首页 web前端 html教程 40多个漂亮的网页表单设计实例_HTML/Xhtml_网页制作

40多个漂亮的网页表单设计实例_HTML/Xhtml_网页制作

May 16, 2016 pm 04:42 PM
设计

下面我们介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的;尽管如此,在大多数情况下,你能很容易的使用简单的css和(x)html来创建相同的设计.

网页表单是访问者与网站拥有者主要的沟通途径。返馈总是重要的,这就是我们为什么确保网页表单容易理解和使用起来比较直观的原因,尽管如此,甚至在形式设计中它也担当创意中的有效部分。

网页表单并非都是乏味的,使用css或flash,你能确保它们具有吸引力且有效。要注意,你需要提出一些独特且有趣东西-表单的符号、图标、颜色、位置或者尺寸是被经常用来获得有趣设计解决方案。我们已经寻找了一些例子,并且已经找到了他们。有创意的、原创的且不寻常的网页表单。

下面我脚本之家介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的;尽管如此,在大多数情况下,你能很容易的使用简单的css和(x)html来创建相同的设计.

1.干净、简单和漂亮的解决方案

由于网页表单或许是网站中最重要部分之一,你作为一个设计者必需确保访问者容易理解在表单区域他们需要填写什么样的信息。复杂而且长的表单增加了使用者的认识负荷-他们只是更难处理。在上下文中,选择简单且干净的解决方案似乎是一个良好的方法。然而,如果表单要注重细节的设计并且看上去不错,那么使用一些具有吸引力的图标也是很合理的。

softmail's 的通讯盒来自巴西,在表单设计中它展示一个相当不错的与表单融入一体的邮件图标。提交按钮是干净且有效的。这是一个创意的设计。

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

在katrin wegmann的网站使用了手写。引人注意、吸引人眼球和好玩的设计使它的功能完美的传达给了用户。

TheWatchMakerProject 的设计给人深刻的印象。这个表单放置在最新评论的右手边。

Frexy.com用了一个好而干净的解决方案

Flingmedia用了一个变化的联系表单,依赖于访问者的意图(一般评论,新项目的请求),用户可以选择他/她感兴趣的网页表单。

Envero.org-网页表单是大且填充整个布局的宽度。因此选择了相应的字体大小和输入框的大小。


2。创造的解决方案

虽然网页表单被认为足够可以让用户和网站拥有者保持联系,但是一些设计者还是常常冒着创造性设计的风险,为了使访问者不会感觉布局的乏味,尽管标准的网页表单他们使用了好几年。许多不同的暗示被使用,下面概括了一些有趣的例子。

CRreated 201.com 看看这个非常不同的透视效果的联系表单。这个效果是用flash创建的。

好吧,这个确实与众不同。如果您想联系Edward Pistachio,您首先需要解决一个难题。这种做法是不适用的博客或商务网站。然而,它完全符合这个概念性的网站。访问者都感到惊讶。

Chemistry Recruitments 用了一个文件夹,几张便函条和几张纸

Alexandru Cohaniuc 使用一张草纸和一张邮票展示了一个巨大的网页表单。

Tony Yoo的联系表单的左手边有一个详细联系信息。

Qwert City 用户可以发送给设计师一个明信片。

wildvuur.com-这个网页表单与网站布局完全融为一体

BubblesSoc有一个带顶的大的非常大的网页表单。


3。使用插画来提亮表单

当一个用户点击指向网页表音的链接的时候,他/她与网站拥有者取得联系只差一步。一些设计者为了确保访问者确实能够填写表单,他们使用有吸引力的文字和插画,让用户对表单感觉更加的舒适。

Intuitive Designs试图通过一个忙碌的邮递员来给访问者深刻的印象。难道他能应付得过来吗?

X-Grafik.sk使用一张来自斯洛华客的邮票。

Kqoule.com有一个可爱的伙计,他邀请访问都去参加评论。

Dressfordialogue.com在表单右侧的上部用了一个微小的插画,尽管如此,有时它也能起到足够的效果。


4。集成更多的功能

寻找一些创意性的网页表单,我们注意到一些新的功能被使用,这在过去是不多见的,它们是被用来为用户的文字格式提供富文本编辑的wysiwig-editors和sliders.Editors,不同的标题等级和图片。滑杆被用来定义一个给定项目的预算限制。

InfectedFx有一个相当复杂的网页表单,里面有提示、选择项和按钮,表单还融入了一个WYSIWIG-editor的文本框区域。

Sidebarcreative.com给潜在客户提供了一个限制项目预算的滑杆。


5。用图标来传达必填信息。

从可用性的角度来看,没有什么东西比一个长的纯文本标签和没有视觉指示图标的网页表单更让人头痛。这样的表单是乏味的。不吸引人,也不使用户感觉舒适。你能更好的设计表单,事实上,没许多必填项。通常图标用来指示用户哪些是必填项。

DesignDisease Wordpress Theme 用简单的标志去指示哪些是必填项。

Bouctoubou.com有很简单且基本的标志,然而,他们设法让表单更有趣。


6。手写和邋遢风格的使用

我曾经写过在现代网页设计中手写和邋遢风格的使用。这样的设计元素在网页表单中也已经在使用,它是独特的且作为传达设计设计者个性的。特别是 以flash为基础的网页设计更喜欢这种方式。

Redblu 提供了一张报纸。要得到表单,你需要相应的拖动报纸。

Fivecentstand提供了一个以flash为基础的解决方案,它意味着与整个站点融为一体。对于新用户来说它可能相当的困难。

Pointofe.com使用一个便条作为网页表单。字体大小或许应当增大。

Swiths.com用了一个老式设计。同时提供了悬停效果。


7。实验性的解决方案

下面你将找到一些不寻常使用的解决方案,它能为你的设计提供一个起点。并非它们中所有的都好看,但是他们有一些东西可能能进一步的提高你的设计思维。

adorama.com提供了一看上去不错的和紧凑的解决方案:侧边栏里的一个通讯盒

不同的语言-不同的风格,在Booloob.com提交按钮被放置在表单的左手边。

Paregonta.com:立体且极简单。色彩多样且特别紧凑的表单。

Sunmatecushions.com有一个真正不同的风格,在这里它不知怎么的就适合。

嗯,为什么不呢?在GeekAndHype.com上壁纸作为背景

Revota.com是黑色的且阴暗的,但是在显示当前区域时用了一个高亮的悬停效果。

catydesign 也很暗淡。这个表单给人印象深刻的是建议信息放置在一个合适的地方。

MyMileMarker:表单没有宽度的限制。有时横向表单比竖向表单更好用。

Jaroslav Cerny 展示了怎样去将一个网页表单和电子邮件混合在一块。这个表单不再在线,但它绝对值得一提。

Xyarea.be 不一般且原创。它可能是世界上最单薄的通讯盒。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
首发649元 酷比魔方小酷平板2 Lite来了:11寸护眼大屏+8000mAh大电量 首发649元 酷比魔方小酷平板2 Lite来了:11寸护眼大屏+8000mAh大电量 Mar 05, 2024 pm 05:34 PM

3月4日消息,酷比魔方将于3月5日推出“小酷平板2Lite”平板电脑,首发价649元。据悉,新款平板搭载紫光展锐T606处理器,采用12nm工艺,由两颗1.6GHz的ArmCortex-A75CPU和六颗ArmCortex-A55处理器组成。屏幕采用的是10.95英寸IPS护眼屏,分辨率为1280x800,亮度高至350尼特。影像方面,小酷平板2Lite后置1300万像素主摄,前置500万像素自拍镜头,另支持4G上网/通话、蓝牙5.0、Wi-Fi5。此外,官方宣称,这款平板电脑&l

首发899元 中兴5G随身Wi-Fi U50S开售:最高网速500Mbps 首发899元 中兴5G随身Wi-Fi U50S开售:最高网速500Mbps Apr 26, 2024 pm 03:46 PM

4月26日消息,中兴5G随身Wi-FiU50S目前已经正式开售,首发899元。外观设计上,中兴U50S随身Wi-Fi简约时尚,易于手持和包装。其尺寸为159/73/18mm,携带方便,让您随时随地畅享5G高速网络,实现畅行无阻的移动办公与娱乐体验。中兴5G随身Wi-FiU50S该设备支持先进的Wi-Fi6协议,峰值速率高达1800Mbps,依托骁龙X55高性能5G平台,为用户提供极速的网络体验。不仅支持5G双模SA+NSA网络环境和Sub-6GHz频段,实测网速更可达惊人的500Mbps,轻松满

复古潮流!HMD与喜力联合推出翻盖手机:透明外壳设计 复古潮流!HMD与喜力联合推出翻盖手机:透明外壳设计 Apr 17, 2024 pm 06:50 PM

4月17日消息,HMD携手知名啤酒品牌喜力以及创意公司Bodega,联袂推出了一款别具一格的翻盖手机——无聊手机(TheBoringPhone)。这款手机不仅在设计上充满新意,更在功能上返璞归真,旨在引领人们回归真实的人际交往,享受与朋友畅饮的纯粹时光。无聊手机采用了独特的透明翻盖设计,展现出一种简约而不失优雅的美感。其内部配备了2.8英寸QVGA显示屏,外部则是一块1.77英寸的显示屏,为用户提供了基本的视觉交互体验。在摄影方面,虽然仅搭载了30万像素的摄像头,但足以应对日常的简

台电M50 Mini小平板来了:8.7寸IPS屏、5000mAh电池 台电M50 Mini小平板来了:8.7寸IPS屏、5000mAh电池 Apr 04, 2024 am 08:31 AM

4月3日消息,台电即将推出的M50Mini平板电脑是一款功能丰富、性能强大的设备。这款8英寸小平板新品搭载了8.7英寸的IPS屏幕,为用户提供了出色的视觉体验。其金属机身设计不仅美观,还增强了设备的耐用性。在性能方面,M50Mini搭载了紫光展锐T606八核处理器,拥有两个A75核心和六个A55核心,确保了流畅且高效的运行体验。同时,该平板还配备了6GB+128GB的存储方案,并支持8GB内存扩展,满足了用户对于存储和多任务处理的需求。在续航上,M50Mini配备了5000mAh的电池,支持Ty

荣耀Magic V3首发AI离焦护眼技术:有效缓解近视发展 荣耀Magic V3首发AI离焦护眼技术:有效缓解近视发展 Jul 18, 2024 am 09:27 AM

7月12日消息,荣耀MagicV3系列今日正式发布,搭载全新荣耀视力舒缓绿洲护眼屏,在屏幕本身具备高规格和高素质的同时,还开创性的引入AI主动式护眼技术。据悉,传统的缓解近视的方式是“近视镜”,近视眼镜度数均匀分布,保证了视线中心区域成像在视网膜之上,但周边区域成像在视网膜后,视网膜感应到成像在后,促进眼轴向后生长,从而使度数加深。目前主要的缓解近视发展的方式之一是“离焦镜”,其中心区域度数正常,周边区域通过光学设计分区调整,从而使周边区域成像落在视网膜前,

vivo信号最强手机!vivo X100s搭载寰宇信号放大系统:21天线、360°环绕设计 vivo信号最强手机!vivo X100s搭载寰宇信号放大系统:21天线、360°环绕设计 Jun 03, 2024 pm 08:41 PM

5月13日消息,vivoX100s今晚正式发布,除了出色的影像,新机在信号方面表现也十分强悍。据vivo官方介绍,vivoX100s采用了创新的寰宇信号放大系统,该系统配备了高达21根天线。这一设计基于直屏进行了重新优化,以平衡5G、4G、Wi-Fi、GPS以及NFC等众多信号需求。这使得vivoX100s成为了vivo有史以来信号接收能力最强的手机。新款手机还采用了独特的360°环绕设计,天线分布在机身周围。这一设计不仅增强了信号的强度,还针对日常各种握持姿势进行了优化,避免了因握持方式不当导

ppt结束页如何设计才足够吸引人 ppt结束页如何设计才足够吸引人 Mar 20, 2024 pm 12:30 PM

在工作中,ppt是职场人士常常使用的办公软件。一个完整的ppt必须有一个好的结束页。不同的职业要求赋予不同的ppt制作特点。关于结束页的制作,如何才能设计的比较吸引人呢?下边我们一起看一看,如何设计ppt结束页吧!ppt结束页的设计可以在文字和动画方面进行一些调整,根据需要选择简洁或炫目的风格。接下来,我们将重点关注如何通过创新的表达方式来打造出符合要求的ppt结束页。那我们开始今天的教程吧。1、对于结束页的制作上,使用图片中的任何文字都可以,结束页重要的是表示我的演示结束了。2、除了这些文字,

1399元起 荣耀X60i手机开售:视觉四等边OLED直屏 1399元起 荣耀X60i手机开售:视觉四等边OLED直屏 Jul 29, 2024 pm 08:25 PM

7月29日消息,荣耀X60i手机今日正式开售,首发1399元。设计上,荣耀X60i手机采用居中挖孔直屏设计,四边近乎无界的超窄边框,极大地拓宽了视野边界。荣耀X60i参数显示屏:6.7英寸高清显示屏电池:5000mAh大容量电池处理器:天玑6080处理器(台积电6nm,2x2.4G的A76+6×2G的A55)系统:MagicOS8.0系统其他功能:5G信号增强灵动胶囊屏下指纹双MIC降噪知识问答摄影能力:后置双摄系统:5000万像素主摄200万像素辅助镜头前置自拍镜头:800万像素价格:8GB

See all articles