【表单设计】优秀表单设计案例

表单设计二三事

来自【互联网早读课】： http://zaodula.com/archives/15757.html

在这个被互联网称霸的世界里，我们几乎每天都会接触到各式各样的表单，如果要在这些表单中找出接触频率最高的一种，相信「注册/登录」这对好基友一定榜上有名。由于数量略多，所以本篇会分为上下两期，紧密团结在以这对好基友为核心的主题中，以客窜酱油类角色为补充案例，一起来跟大家聊聊它们中一些不错的设计。

Heck House 的报错提示不仅清晰明确，而且充分利用了表单空间。

Basecamp 注册页的卡通人会跟随输入焦点而移动手臂，出现错误时表情还会发生变化。

Geeklist 注册页的密码强度是用破解所需的时间来表示的。

Delectable 注册页中的表单名称并不会如传统做法那样在激活输入后消失，而是移位至输入框上方并通过色彩的变化来提示当前输入状态。

Automatic 的注册表单会提示密码的最小长度，并且会根据输入内容实时提示密码位数是否达标。

在 Hotel Tonight 中只有当卡号信息输入完整后才会激活下一步操作。

The Fernway 中将邮箱格式的判断提示集成在了按钮上，非常赞。

在 Mixpanel 中更改密码时，会发现当前密码输入框中的图标是一枚「老」钥匙，而新密码则是一枚「新」钥匙。

填空式的表单设计，跟 Invisible Girlfriend 这款 App 一样颇有创意。

在 Readme.io 的登录页，超萌的猫头鹰会在你输入密码时遮住眼睛哦。

Yahoo Mail 注册页对于日期「月」采用了选项方式，而对于「日」和「年」则采用了输入方式。

Dubble 将提示文案放在了虚拟键盘中，既节省界面空间又可以在输入时持续进行提示。

Uber 的信用卡信息填写流程可以通过一个输入框来完成，且在填写完成后自动进行提交。

AutoAnything 车型选项的图标不仅动效很赞，同时也增强了表单选项的提示性。

Gumroad 的信用卡绑定页面会根据输入的卡号显示所对应的卡片图标，并且在输入安全码时会自动翻转到卡片背面提示 CV Code 位置。

Evernote 将「注册」和「登录」合二为一，账户若存在即转向「登录」，否则转向「注册」。

易到用车注册页面中的性别选项使用了更形象的图标来代替传统的文字。

MailChimp 的注册页面将对于密码强度的要求以清晰的文案列在密码框下方，并通过色彩明暗的变化实时对所输入的密码进行强度提示。

Instagram 注册表单中用户名一栏的图标会通过色彩的变化提示格式的正确与否。

【表单设计】优秀表单设计案例相关推荐

为什么jsp的form表单不能跳转_UI设计干货分享：设计语言 - 表单（登录/注册）...
原文作者:罗耀_UI 设计语言中的表单中的登录与注册部分大致讲完了按钮.下拉菜单.导航栏.分页等,就要开始讲表单了.表单也分几种功能和几种样式,我也不可能不能把它们一一讲出来,所以只挑出几个常用的来 ...
antd 动态添加表单_ZooTeam 拍了拍你，来看看如何设计动态化表单
? 这是第 58篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队关注我们吧- 本文首发于政采云前端团队博客:ZooTeam 拍了拍你,来看看如何设计动态化表单 https://www.z ...
电子表单设计，表单打印，表单填写，数据发布，VC++，VB，源代码组件库
电子表单设计,表单打印,表单填写,数据发布,VC++,VB,源代码组件库 -- 为您提供即刻可以拿来使用的源码级电子表单解决方案! E-Form++可视化组件库企业版本电子表单解决方案在E-Form+ ...
什么标签用于在表单中构建复选框_UI/UX笔记之如何设计好表单
原文链接: UI/UX笔记之如何设计好表单 | 须臾所学免费设计资源网presentationvip.com 无论是注册流程,多视图步骤程序还是单调的数据输入界面,表单都是数字产品设计中最重要的组成 ...
分步表单_表单设计-掌握表单设计方法（表单体验篇）
全篇阅读大概需要15min,对表单设计不熟悉的同学看完后肯定会有不少的收获~~~ 说到表单其实在生活中可以接触到各种各样的表单,比如:驾照申请表.体检表.银行开户需要填写的表等等,这些都是表单,主要目 ...
html表单标签与表单设计
html表单标签与表单设计 1.form标签及其属性 2.input标签及其属性 ①文本域:text ②密码域:password ③单选按钮:radio ④复选按钮:checkbox ⑤提交按钮:su ...
【自定义表单】自定义表单设计
1.后端设计1 diy_field_pool 字段池(我们定义好的字段类型) diy_form 表单表(记录用户自定义的表单) diy_form_field 表单字段表(记录某张表单中有哪些字段) d ...
自定义表单mysql_自定义表单系统如何设计数据库
问题描述需求是这样的: 1.由客户来根据需求设计表单内容样式点击保存后前端可以生成JSON格式数据,JSON数据如下: { "list": [ { "type&qu ...
C语言单相智能电表课程设计,《单相单用户电能表的设计课程设计》
<<单相单用户电能表的设计课程设计>>由会员分享,可在线阅读,更多相关<<单相单用户电能表的设计课程设计>(10页珍藏版)>请在金锄头文库上搜索. 1. ...
C语言单相智能电表课程设计,单相单用户电能表的计_课程设计.doc
单相单用户电能表的计_课程设计摘要此课程设计主要是通过编程来实现电子式数码管显示单相单用户的用电量,其硬件部分主要以C8051F360单片机为控制核心,连接电能计量.LED显示.掉电存储.按键清零 ...

【表单设计】优秀表单设计案例

表单设计二三事

【表单设计】优秀表单设计案例相关推荐

最新文章

热门文章