给第一次访问的用户是创造“WOW体验”吧,想要理解其重要性的话,可以去看Kevin Hale (在线表单工具Wufoo的创始人)的一篇文章——Marrying Your Users: From First Date to Ever After。他的观点是,第一次用户体验就好比第一次约会。
在第一次约会时,如果你发现对方在餐桌上抠鼻子,那么你可能再也不想要第二次了。但是当你已经结婚很多年了,即使发现伴侣有一些不好的习惯,可能也不会立即离婚。所以在熟悉之前和之后是不一样的。
想必大部分人都能体会上面这段解释。既然已经知道了初体验对用户来至关重要,那么想想该如何去做。你可以通过一些小的界面变化来给第一次访问者制造持续的印象。
用户与你的互动方式主要是表单,例如登录和注册,可能他们会要用表单或简单的几个输入框填写信息,所以我们今天将要看看有什么酷炫的表单和输入框设计能够让你的初次访问者WOW~
创意表单
单一输入框表单界面
不同于传统将所有输入框平铺出来,这种迷你尺寸的表单一次只展示一个文字输入框,一点也不凌乱,没有注意力干扰。这种方式还附有进度条、已完成和待完成数量等视觉提示。这个范例的缺点是你没有办法返回到前面填完的输入框进行修改。点击标题链接,你可以在codrops里看到详细的介绍和教程。
自然语言表单界面
如果你的表单看起来不像表单,而是一段文字,上面的关键信息可以通过下拉框和文本框来修改替换,看起来是不是很酷?标题链接到的教程将给你制作这种表达的全部资料。
全屏表单界面
这种全屏体验的表单能够给访问者一个完全无干扰的填写体验。
邮件注册表单设计
下面这些贴心的邮件注册动画将让你的客户心情愉快。
Studio Kit (域名已停用)
Bart Nederveen 的设计
Daniil Vnoutchkov 的设计
信封邮箱注册动画
Patrick Rogan 的邮件注册设计
Julia Khusainova 的邮件注册设计
从按钮展开订阅表单
登录/注册表单设计
Snapwire注册表单设计
他们鼓励用户使用Instagrame申请早期接入。
Farruh Tillaev 的登录表单设计
从按钮变成登录/注册表单
Glenn Hitchcock 的登录表单设计
Glenn Hitchcock 的登录表单设计
Alexey Golovanov
Colin Garven 的登录表单设计
信用卡注册表单设计
Alexey Golovanov 的信用卡表单设计
这个信用卡表单使用视觉表述来告诉用户该填什么。
单框信用卡表单设计
支付表单设计
支付卡设计
Jesse Pollak 卡
原文地址:
Epic Form & Input Field Design Trends
原文作者的网站:CodeMyUI.com