文本框

一、文本框拆解

 

文本框根据规范,拆解成七个部分。分别是:

01cd805f31fa15a80120a8217076a3

· 容器(Container)

· 前导图标(Leading icon)

· 标签文本(Label text)

· 输入文本(Input text)

· 尾随图标(Trailing icon)

· 激活指示器(Activation indicator)

· 帮助文本(Helper text)

一个文本框最初的亚子:

01275b5f31fa3da801215aa0275f6e

一个标签文本+容器,已经基本可以确保向用户传递文本框最直观的信息。

 

二、基础文本框布局方式

 

一个好的文本框可以解决排版问题,提升用户的填写和使用效率。

如果简单地进行单列布局,自然而然会出现让众多设计师纠结的一个问题: 标签文本究竟应该如何对齐?

01c3ad5f31fa64a80120a821b90b3e

左对齐,缺点:文本的长短问题又会导致部分较短标签文本与容器间距增大,让用户从左至右浏览的效率降低,并且看起来不够协调。

右对齐,缺点:标签文本的长短问题容易导致左侧的视觉隐形边界错乱,用户的规律眼动容易被打乱。

于是进一步的演变:标签文本与容器 顶端对齐。

01cc835f31fa79a801215aa03f5ef5

优点:使得用户眼动变得十分规律,竖直向下浏览可以便捷地理解标签文本并进行填写,文本的长短问题不再成为干扰设计师进行排版的一个纠结点。

缺点:在表单数据量过多时,纵向布局会使得纵向空间耗损增加,用户需要不停地滑动页面才能实现表单的完整填写。

 

三、文本框改良

 

0119d95f31fa96a801215aa067196e

对场景熟悉度高:采用前导图标来替代标签文本,对于 场景的熟悉度较高的情景当中(例如登录场景)。

对场景熟悉度不高:使用占位符来承载标签文本。例如 iOS 通讯录新增联系人,就采用了占位符承载标签文本的方式。

01b9465f31faa6a801215aa013e6ae

对于场景默认值:占位符。

占位符已经不再仅仅用来承载无用信息或提示性信息,也可以用于承载 默认值,帮助用户自动填充, 提高用户填写信息的效率(例如手游当中,创建账号时系统帮玩家默认填充一个可用昵称;例如淘宝、京东等电商平台,将商品名称作为占位符填充在搜索栏中)。

01712c5f31fac8a80120a8213df044

四、合理反馈

 

01d0065f31fae4a80120a8217cc224

文本框的负反馈提示信息,常见提示状态走查内容:

· 内容是否为空(例:必填项不能为空)

· 二次确认内容是否一致(例:确认密码与首次输入不一致)

· 内容是否合规 (例:昵称中包含不文明词语)

· 内容格式是否合规(例:昵称中不能包含特殊字符)

· 内容长度是否合规(例:手机号输入不足11位)

· 内容的是否符合唯一性(例:验证码输入错误)

及时给予用户负反馈,可以让用户清晰地排查所发生的错误。但交互设计讲究“以人为本”,在某些场景中,当用户所填写的信息是合理的,及时地展示 正向反馈也是有必要的。

例如,部分应用在用户创建账号的场景中,当用户输入账号信息后,系统将立刻检索用户的账号是否已存在在当前数据库中,避免用户忘记已创建过该账号而进行重复创建的徒劳步骤。

01fb3b5f31fb11a801215aa0ac2e50

不要狭隘地认为帮助文本只能用于“批评”用户(负反馈), 当用户做了正确的事时,也应该适当地激励用户。

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4169.html

发表评论

登录后才能评论