看谷歌如何巧用「浮动标签」，改善表单信息输入体验 - 优设-UISDC

看谷歌如何巧用「浮动标签」，改善表单信息输入体验 - 优设-UISDC

用户体验看谷歌如何巧用「浮动标签」，改善表单信息输入体验

产品：Google 作者：Google设计团队时间：2018-07-11

猎人：小白观众：1816人

细节描述

小白：占位符文本框是时下最常见的运用于注册登录界面信息录入的方式，但其实它对较复杂的表单并不友好。因为一旦文本域被填写了内容，占位符文字就会消失，这样会给用户带来短期的记忆负担也不利于检查填写内容。谷歌在注册与登录界面的设计上选用了「浮动标签」来优化输入体验。当用户在填写当前表单域时，可浮动的内联标签就会缩小上移到表单上方空白处。微交互的使用既保证了界面设计的简洁舒适，又为用户提供了清楚的输入帮助信息提示，有助于用户更轻松地完成操作。

围观案例 ! 温馨提示：案例或因时间流逝和版本迭代与截图时有所差异

本篇知识点及话题# Google # 人性化 # 情境预判 # 提示 # 易用性 # 注册 # 浮动标签 # 确定性 # 输入

发表评论加载中....

评论加载中....

相关细节

微交互腾讯视频让人眼前一亮的缩略图播放预览功能

新版腾讯视频Web首页增加了视频缩略图滚动条快速播放预览的功能。当然不是所有视频都可以在首页这样预览，只有在缩略图左上角带有「小闪电」图标的视频才能使用这个功能。但其他的视频被选中也会有自动播放精彩片段的效果。操作的可预知性能给予用户更多的选择与确定性，提升了使用效率与易用性。

产品：腾讯视频作者：腾讯视频UED 猎人：小白

用户体验发布24小时后还能自动删除的说说状态

虽然现在对QQ与空间的使用频率减少了，但每隔一段时间新版本的QQ体验升级却总能带给我不小的惊喜。越来越人性化与易用是QQ给我的最大感受。QQ空间发表说说的「定时」功能是我觉得特别暖心的一处设计。在QQ的说说发表界面右下角有一个钟表的图标，点进去可以选择对说说「定时发表」或「发表24小时后自动删除」。前者可以让我们提前写好说说动态并设定系统在指定时间发布，从此再也不用熬夜到凌晨为重要的人发表生日祝福动态了。而后者对于想要发说说宣泄当刻情绪又不想让此条状态长期留存自己空间的用户而言，确是十分友好的存在了。

产品：QQ iOS 作者：QQ设计团队猎人：小白

用户体验为什么某些应用和网站要提供「语音验证码」的服务？

今天在注册「36氪」的账号时发现有「接听语音验证码」的选项，于是决定来写一写与这相关的知识点。所谓「语音验证码」就是通过语音电话直接呼叫用户手机或固定电话来播报验证码。为什么这种验证服务方式会被越来越多的使用到呢？其实「语音验证码」的出现主要是为了解决短信验证码到达率的问题。由于现在很多的平台账户注册都需手机实名注册，如果经常因为各种问题无法保障用户成功接收到短信验证码，十分破坏用户的体验也存在账号安全隐患。所以，同时为用户提供短信获取验证码与接收语音验证码两种验证服务，对品牌而言是一种「双保险」的策略，对用户而言也多了一种体验选择。

产品：36氪 iOS 作者：36氪团队猎人：小白

微交互有了小猫头鹰的陪伴，Readme的注册页竟然也可以这么有趣

注册新账号对多数人而言都是一件麻烦恼人的事儿，冗长的注册表单、复杂的注册流程都很难让人心情美丽。但于产品而言，用户注册可唯一识别的ID及提供更多信息是为其提供个性化服务与更好使用体验必不可少的环节。那如何改善用户因注册带来的不良情绪呢？Readme给出的解决方案是在注册流程中恰到好处地加入触发动画与用户互动。每完成一步资料填写，小猫头鹰都会为你注册的下个步骤给出清楚指引。既起到了视觉引导的作用又为注册流程增添了趣味与情感变得不再枯燥，人性化的设计让人眼前一亮。

产品：Readme 作者：Readme 设计团队猎人：小白

优设精选专题查看更多

136203人看过 9篇文章

求职面试

那些不容易看到的面试技巧都在这

本专题收集了最常见的面试问题和答案，而且从面试官的角度告诉你，他们在考核什么。另外还有国内各大公司的面试流程分享，以及高手是如何应对面试的。能否跨入大厂，就看你有没有收藏了！

423460人看过 7篇文章

英文字体

高手都在用的英文字体打包下载

英文字体世界浩瀚无涯，想找到合适的字体颇不容易。幸运的是那些乐于分享的前辈已经将私藏的字体打包好并全部呈上，不仅有专业平面设计师和网页设计师特供版，更有顶尖设计师灰昼倾情分享个人字体包，话不多说，是时候为你的字体库腾出一个位置来咯。

150767人看过 12篇文章

设计规范

那些条条框框您真得懂？

说出来你可能不信，我去了几家公司，每个公司里都让我制作设计规范，说是为了便于公司规划流程化管理，当时我可是费了老大劲...

429537人看过 7篇文章

微信小程序

今年最热的小程序设计和开发方法

就在上个月，微信小程序的用户突破6个亿，如此庞大的体量，让很多公司跃跃欲试。不过很多设计师和工程师之前没做过微信小程序，不知道如何开始，本专题为此而生，从基础知识、官方指南到实战技巧、案例复盘都有，让新手快速掌握微信小程序的设计和开发方法。

设计师基础理论书查看更多

破茧成蝶2

国内设计师出版的最值得一看的书，熟悉的界面背后藏着大道理。

刘津孙睿

人民邮电出版社

用户思维

创业时代的用户获取方法，优化体验，前所未有的技巧绝学。

约翰·沃瑞劳

中国友谊出版公司

设计心理学（套装共4册）

英文版销售25万册，设计学知名力作，设计师必读经典。

唐纳德· A · 诺曼

中信出版社

用户体验要素

以用户为中心的产品设计，销量经久不衰，入行必读。

Garrett

机械工业出版社

用户至上

亚马逊用户体验师首推的用户体验书，内附实践方法。

Kathy Baxter

机械工业出版社

色彩设计法则

梁老师苦心著作的配色书籍，或许适合所有色彩爱好者研读学习。

梁景红

人民邮电出版社

书到用时方恨少 > >

优设官方微信

50万设计师关注

微信号：youshege

把好文章收藏到微信

打开微信，扫码分享
学设计优设网在这里