[译文]非同一般的创意表单

给第一次访问的用户是创造“WOW体验”吧,想要理解其重要性的话,可以去看Kevin Hale (在线表单工具Wufoo的创始人)的一篇文章——Marrying Your Users: From First Date to Ever After。他的观点是,第一次用户体验就好比第一次约会。

在第一次约会时,如果你发现对方在餐桌上抠鼻子,那么你可能再也不想要第二次了。但是当你已经结婚很多年了,即使发现伴侣有一些不好的习惯,可能也不会立即离婚。所以在熟悉之前和之后是不一样的。

想必大部分人都能体会上面这段解释。既然已经知道了初体验对用户来至关重要,那么想想该如何去做。你可以通过一些小的界面变化来给第一次访问者制造持续的印象。

用户与你的互动方式主要是表单,例如登录和注册,可能他们会要用表单或简单的几个输入框填写信息,所以我们今天将要看看有什么酷炫的表单和输入框设计能够让你的初次访问者WOW~

创意表单

单一输入框表单界面

不同于传统将所有输入框平铺出来,这种迷你尺寸的表单一次只展示一个文字输入框,一点也不凌乱,没有注意力干扰。这种方式还附有进度条、已完成和待完成数量等视觉提示。这个范例的缺点是你没有办法返回到前面填完的输入框进行修改。点击标题链接,你可以在codrops里看到详细的介绍和教程。

[译文]非同一般的创意表单_第1张图片
单一输入框表单界面

自然语言表单界面

如果你的表单看起来不像表单,而是一段文字,上面的关键信息可以通过下拉框和文本框来修改替换,看起来是不是很酷?标题链接到的教程将给你制作这种表达的全部资料。

[译文]非同一般的创意表单_第2张图片
自然语言表单界面

全屏表单界面

这种全屏体验的表单能够给访问者一个完全无干扰的填写体验。

全屏表单界面

邮件注册表单设计

下面这些贴心的邮件注册动画将让你的客户心情愉快。

Studio Kit (域名已停用)

[译文]非同一般的创意表单_第3张图片
Studio Kit 注册表单

Bart Nederveen 的设计

[译文]非同一般的创意表单_第4张图片
Bart Nederveen 注册表单

Daniil Vnoutchkov 的设计

[译文]非同一般的创意表单_第5张图片
Daniil Vnoutchkov Sign Up Form

信封邮箱注册动画

[译文]非同一般的创意表单_第6张图片
Envelope Email Form Animation

Patrick Rogan 的邮件注册设计

[译文]非同一般的创意表单_第7张图片
https://dribbble.com/shots/997858-Formic-Co-GIF

Julia Khusainova 的邮件注册设计

[译文]非同一般的创意表单_第8张图片
Julia Khusainova Sign Up Form

从按钮展开订阅表单

[译文]非同一般的创意表单_第9张图片
Subscribe Button Form Animation

登录/注册表单设计

Snapwire注册表单设计

他们鼓励用户使用Instagrame申请早期接入。

Snapwire Signup Form Design

Farruh Tillaev 的登录表单设计

[译文]非同一般的创意表单_第10张图片
Farruh Tillaev 的登录表单设计

从按钮变成登录/注册表单

[译文]非同一般的创意表单_第11张图片
从按钮变成登录/注册表单

Glenn Hitchcock 的登录表单设计

Glenn Hitchcock 的登录表单设计


Alexey Golovanov

[译文]非同一般的创意表单_第12张图片


Colin Garven 的登录表单设计

[译文]非同一般的创意表单_第13张图片
Colin Garven 的登录表单设计

信用卡注册表单设计

Alexey Golovanov 的信用卡表单设计

这个信用卡表单使用视觉表述来告诉用户该填什么。

[译文]非同一般的创意表单_第14张图片
Alexey Golovanov 的信用卡表单设计

单框信用卡表单设计

[译文]非同一般的创意表单_第15张图片
单框信用卡表单设计

支付表单设计

支付表单设计

支付卡设计

[译文]非同一般的创意表单_第16张图片
Skeuocard CC 表单设计

Jesse Pollak 卡

Jesse Pollak 卡



原文地址:

Epic Form & Input Field Design Trends


原文作者的网站:CodeMyUI.com

你可能感兴趣的:([译文]非同一般的创意表单)