-
固定编辑框输入上限和下限_不同类型的输入框与8大设计重点
2021-01-12 16:21:11输入框的组成部分 输入框包含的内容有三种:载体、文本、图标,细分下来是这样的:l文本:包含标题,占位符,帮助,反馈;l载体:文本框;l图标:展示型图标,操作型图标,反馈型图标。不同类型的输入框组合 组合一...输入框几乎每天都会接触到,但是看似简单的输入框,你真的会设计吗?
输入框的组成部分
输入框包含的内容有三种:载体、文本、图标,细分下来是这样的:l文本:包含标题,占位符,帮助,反馈;l载体:文本框;l图标:展示型图标,操作型图标,反馈型图标。不同类型的输入框组合
组合一:文本框与标题组合组合能确保用户知道需要在文本框中输入什么信息,虽然看起来很简单,但排版上需要注意多列内容如何正确展示,涉及到用户的眼动行为。
上面五种文本框与标题的排列是最常见的,不同的排列方式各有利弊。除此之外,我们有时还会加入占位符、帮助、默认提示来增加输入框的体验:
组合二:文本框与图标组合图标可分为展示、操作、反馈三类。最早出现,最为常见的是展示型图标,展示型图标:通常用它代替标题,如:电话、邮箱等容易表达的图标。
但用户个体认知差异,可能没办法猜测图标到底是什么意思,因此,现在很多产品开始在输入框里去掉展示型图标。反馈型图标:如填写完内容系统开始校验,并给出的反馈图标。
操作型图标:常见的要数清除
我们再总结一下输入框包含的内容:
l标题:应该始终可见。l载体:文本框,样式可根据场景变化。l占位符:可作为提示,也可以提供默认值。l帮助提示:内容多可拆分,也可以融入操作图标中。l反馈提示:有正确与错误两种l图标:展示型图标,操作型图标,反馈型图标
输入框设计的8种情况
↘开始输入↘输入部分数据后↘固定字符数量↘指定账号的输入↘即时校验↘异常提示↘特殊字符处理↘特殊账号输入↘是否提供选择输入开始输入开始输入后,提示文字消失。也有一些输入框是没有上方提示的,在输入时可能会造成用户不知道输入规则或者需要输入的内容是什么。在开始输入的阶段,要给出此状态下的提示,以及光标的位置。输入部分数据后输入部分数据后,通常输入框右侧会出现一个快速删除全部的图标,方便用户快速删除所输入的数据,而不是仅能依靠键盘上的删除按键一个个数据删除。固定字符数量当输入的账号的字符数需要在某个范围内的话,建议加上字符的提示,用户可以清楚的知道自己输入了多少个字符,还有多少可以输入。指定账号的输入通常在一些应用/网站中,会指定一些特殊的账号输入(后台较多),例如某种特定格式的前缀或者是后缀,如KK开头的工号,或者是某种邮箱账号后缀。这时候为了防止用户输错,会在输入框预置前缀或者是后缀,用户只需要输入可变部分即可,简化了操作,降低错误率。如下图所示给出固定的后缀@qq.com。即时校验现在使用很多应用或者是网站上会有即时校验的功能,当用户输入时,如果账号正确/错误,都会即时给出提示,以便用户进行下一步操作。如下图所示,一般都是在输入框的右侧或下方标识出来账号是否正确等信息。异常提示异常提示包括账号不存在(未注册)、用户填写错误、字符位数超过限制等情况,这时候就需要给用户正确的提示,让用户快速更正所填的账号。下图展示的是一些常用的处理方式。(1)当用户输入规则外的特殊字符时,提示用户账号不包含这些字符;(2)用户输入的字符数量达到上限提示账号的长度;(3)账号不存在时,提示此账号未注册,其实还可以在提示文案中增加“注册此账号”的链接,点击即可跳转到注册页面。在这些提示中,需要注意的是,提示应该包括错误信息+改正方法两种或其中的一种,让用户知道自己应该怎么改正。特殊字符处理在输入框中特殊字符一般包括@ 和. 等,一般用户输入@可能是要输入邮箱,输入.有可能是网站后缀。所以最好提供快速输入的方法,让用户减少输入的字符。虽然现在一部分输入法中已经增加了这些常用的固定的一段字符的按键。但是还是建议在输入框中加入快速输入的方法,与其依靠这种具有不确定性的情况,还不如一开始就设计好。如下图所示,当用户输入@时,提供快速输入的方式。特殊账号的输入如果是电话号码或银行的输入,这种相对长一些的数字输入,尽量按照用户习惯的规则划分,如果将所有数字连着一起就会比较容易输错。例如电话号码的划分规则为344,所以用户在设计的时候可以在将电话号码间隔开,方便用户识别。例如银行卡通常的的划分是4444X,X就是最后一位数为少于4的位数。所以可以如下图的方式设计。是否提供选择输入在一些搜索框中,经常用到选择输入,例如一些推荐的搜索,推荐的标签、历史记录等,用户点击一下即可输入,大大减少了用户的操作步骤。这种方式现有的应用中也应用得非常广泛,最常用于搜索页面。如下图的知乎的搜索框和豆瓣的搜索页面,推荐一些热门话题,点击即可进行搜索。
- End -
移动文本输入框的探索设计
移动 APP 中输入框的设计
输入框设置输入数字的限制
-
iOS Web应用开发:运用HTML5、CSS3与JavaScript(英文版)
2015-01-15 10:33:41《ios web应用开发:运用html5、css3与javascript》将帮助读者交付丰富的、面向触摸的移动用户体验。掌握了本书所介绍的概念和技术后,读者就可以在设计师或工程师的道路上更进一步,创造出精彩的ios移动项目! ... -
文字输入限制_输入框设计,设计样式及设计要点
2021-01-12 12:12:58今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面,值得我们探讨学习...文本框图标:装饰性图标,功能性图标,反馈性图标。1、文本框与标题文字的组合样式水平排列:左对齐...今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面,值得我们探讨学习。下面从以下两大块来跟大家一起分析。
1.输入框的样式
2.输入框的设计要点
输入框的样式
要了解输入框的样式,首先要知道输入框的组成部分,这里我们将输入框分为三部分:
- 文本:包含标题,占位符,帮助提示,反馈等;
- 文本框
- 图标:装饰性图标,功能性图标,反馈性图标。
1、文本框与标题文字的组合样式
- 水平排列:左对齐/右对齐
- 垂直排列
- 标题内嵌:作为占位符
- 添加帮助提示
排版上需要注意多列内容如何展示才能在界面中显得更加和谐。
1、水平排列:左对齐/右对齐
适用于展示页面内容较多的情况
上面两类,右边采取了右对齐,标题与外框的距离显得参差不齐。且用户在阅读的过程中,会显得比较费力。
2、垂直排列
适用于展示页面内容较少的情况
3、标题内嵌
当上面两种状态都无法满足某个场景时,也可以把标题内嵌,作为「占位符」来使用。
这种方式虽然节省了空间,但只要用户点击输入框后,就看不到标题了。很多用户在点击输入框后会忘了标题是什么。所以可以尝试点击输入框后标题文字置于输入框上方。
4、帮助提示
由左图可以看到, 输入框内默认文字可以作为一种帮助提示。但它不适用文字较多的情况,如果文字较多或者有几条帮助提示时,那么右图的展示形式会更合适。
帮助提示的另一种展现方式就是提供默认值。如姓名可这样展示:
2.文本框:
文本框的展现样式主要分为以下2种,整行输入或者分段输入
3.图标:
图标可分为装饰性、功能性、反馈性三类。
装饰性图标:我们通常用它代替标题。
功能性图标:其中最为常见的一种就是(快捷删除),此外还包括,语音、密码显示/隐藏等。
反馈性图标:比如当我们填写完内容脱离输入框后,系统开始校验,并给出反馈的图标。
上面提到的帮助提示,在界面中空间不够,且又不能没有的情况下可以这样处理:
输入框的设计要点:
字符限制
大部分产品的登录注册页,当用户在输入手机号时,只要超过 11 位就会无法继续输入。这其实就是一种字符数限制,只是大家有了共识,所以并不疑惑为什么无法继续输入,甚至反而会觉得可以继续输入的产品做得不够好。包括在手机号输入框里可输入英文字母,这就是没有做好输入限制的典型问题。
输入反馈的规则逻辑
输入反馈可分为三个过程:输入前提示,输入中校验,输入后反馈。
输入前提示,很简单,看下面这张图:
这里输入验证码,看到后知道我的手机接收到了一条验证码信息,这条验证码是 4 位数的,所以只要在这个位置输入这个 4 位数验证码即可。
输入中校验:
那么在这个过程中,只需要校验验证码是否正确就可以了。
如果成功,则直接进入下一步;如果失败,则给予反馈提示:
这里的反馈样式要清晰易懂,利用反馈文本让用户知道为什么会出现问题,还可以增加反馈图标增强说明。
说完输入前中后的内容,我们再来细分下输入反馈包含哪些规则逻辑:
- 验证内容是否为空
- 验证内容是否违规
- 验证内容的格式
- 验证内容的长度
相关推荐:
无感:UI底部标签栏设计总结zhuanlan.zhihu.com无感:移动端APP搜索框设计,全方位解析zhuanlan.zhihu.com无感:APP界面金刚区图标怎样做?金刚区全方位解析zhuanlan.zhihu.com -
移动端ui框架哪个好_UI界面移动端表单设计
2020-12-13 14:51:24常见的表单表单的组成标签输入字段占位符按钮前导图标后缀图标帮助(图标)验证反馈01 标签标签的目的是为了告诉用户这里需要输入的信息是什么。根据标签所在的位置,可将标签分为:左标签顶部标签行内标签1、左标签...一个努力中的公众号
表单
在网页中主要负责数据采集功能,用来收集用户的信息。
常见的表单
表单的组成
标签
输入字段
占位符
按钮
前导图标
后缀图标
帮助(图标)
验证
反馈
01 标签
标签的目的是为了告诉用户这里需要输入的信息是什么。根据标签所在的位置,可将标签分为:左标签
顶部标签
行内标签
- 标签左对齐
- 标签右对齐
顶部标签
行内标签
占用空间小,节省空间。在用户体验上不很是友好,不利于用户的短期记忆,在输入的时候,行内标签消失,会使用户对所填写信息产生质疑,我们要做的是降低用户的记忆门槛,而非增加。所以,如果需要使用行内标签,我们可以在行内标签前方放置前导图标来降低用户的理解成本。
02 输入字段
输入字段:用户输入的信息。此处主要介绍有关输入字段的以下几部分:- 输入的顺序
- 设置默认选项
- 输入限制
- 键盘匹配
- 关于数字的输入
- 从易到难
先必填后选填
如果必填的字段很多,大量 “*” 会增加用户的认知负担,可以直接在选填字段后加入 “(选填)” 文本来帮助用户识别。需要注意的是:一个表单里不要同时出现 “*” 与“(选填)” 文本。
- 相关的字段按顺序进行分类组合
2、设置默认选项默认值可以节省用户的操作时间,减轻用户填写表单的负担。
3、输入限制对表单输入的信息进行字数限制或格式的限制,避免输入非数字或者字数过长的数字。
4、键盘匹配对表单自动匹配合适的键盘。减少用户的操作,提高完成速度。
5、关于数字的输入常见的数字输入有手机号、身份证号、银行卡号、金额等。
金额
由于 “¥” 是一个定量,所以, “¥” 和金额不可以放在一个图层,需要拆开单独进行设计。输入金额一般采用千分位分隔,也可以随着金额的输入出现高分位提醒,从而提高用户体验。
03 占位符
占位符:帮助用户了解可输入的字段类型和格式提示。- 文字清晰明了
- 颜色不宜太突出
- 输入内容后消失
04 按钮
按钮:承载界面的交互跳转。
表单中的按钮有以下常用布局:
位于右上角的按钮
位于下方的按钮
· 一般是文字按钮;
· 该按钮不会对用户的视线进行过多的干扰,可以使用户专注于表单本身;
· 适用于可以在一屏展示的表单。
2、位于下方的按钮
一般分为两种:一种是吸底按钮;一种是跟随表单,位于表单下方的按钮。
吸底按钮
· 用户不需要滑动到底部就可以进行点击;
· 按钮的优先级较最高,页面的所有信息,都将聚焦在这个按钮中,从而引导用户点击。
跟随表单,位于表单下方的按钮
· 最常见的布局;
· 符合用户自上而下的阅读顺序;
· 表单内容过长,需要进行一定的引导。
05 帮助(图标)
当表单理解成本较高或者辅助用户填写表单时,常常以图标的形式引导用户点击,点击后出现详细的解答(弹窗或者跳转页面的形式)。
06 验证
用户输入完成信息后的验证。
出现错误时需要告知用户原因和解决办法。
07 反馈
用户完成表单填写并提交后,无论成功或失败都需要及时反馈,告知当前的状态。
结语
最近参与的项目涉及到一些表单页面,所以我对移动端的表单设计做了一些总结。
感谢百忙之中抽出时间看完这篇文章的同学,以后我会不定期在公众号「初的设计小铺」分享有关UI设计和交互设计的一些总结。
-
Element网站快速成型工具 v2.14.0
2020-11-25 09:09:07为您提供Element网站快速成型工具下载,Element是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。Element特性:1、一致性 ... -
Element网站快速成型工具 v2.14.1
2020-11-24 19:27:24为您提供Element网站快速成型工具下载,Element是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。Element特性:1、一致性 ... -
Element网站快速成型工具 v2.13.2
2020-09-28 16:29:13为您提供Element网站快速成型工具下载,Element是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。Element特性:1、一致性 ... -
UI设计干货模板|输入框设计临摹素材
2020-06-20 11:22:47简单来说输入框是一个单击鼠标会插入点光标的方框,我们可以直接在方框内输入框中输入文字或文本信息。但这个不起眼的方框却是用户与虚拟的互联网世界信息...输入框的校验与反馈规则 1.输入前输入前,标题信息,图表信简单来说输入框是一个单击鼠标会插入点光标的方框,我们可以直接在方框内输入框中输入文字或文本信息。但这个不起眼的方框却是用户与虚拟的互联网世界信息交流的重要枢纽。
输入框一般由以下五部分组成:
1.标题:始终可见,不可缺失。
2.载体:文本框,输入信息的地方。
3.占位符:可做提示,也可作为提供的默认信息填写。
4.提示:(1)帮助提示、(2)反馈提示
5.图标:1.展示型 2.操作型 3.反馈型
输入框的交互逻辑
输入框的校验与反馈规则
1.输入前输入前,标题信息,图表信息,占位符必须提供清晰明了提示信息,以便于用户输入操作。
2.输入中
输入中必须实时效验用户所输入信息格式是否正确,文本大小写是否正确,所输入文本长度是
否符合规则,及时给予用户反馈。
3.输入结束输入结束应及时给予用户输入结果的反馈信息。如信息有误应给予用户错误内容。
更多UI素材APP模板到,搜UI网 助工具进行修饰即可,其实这只能
锻炼你的借鉴能力,当你的技法娴熟到一定程度,就可以尝试临摹。
通过临摹,一则用来强化技法层面的能力,二来也能提升初学者的创新能力。
临摹的内容,可以有两方面选择:一种是系统自带的图标,另一种则是行业牛人的设计作品,
捉摸他们的设计风格、思想和细节,都能加深对设计的认识。
-
【最新版】mac-pdfelement_full5237.dmg【亲测可用】最好的创建,编辑,转换和签名PDF文档
2020-05-20 16:43:20快速收集同事和客户的反馈。 可靠地创建和分发PDF表单。 轻松创建和分发表单,合并收集的表单进行分析,并在电子表格中导出收集的数据。 保护文档并加快与PDF的信息交换。 控制文档以帮助保护敏感信息,防止意外访问... -
[ISUX转译]iOS7人机界面指南
2014-01-18 22:55:48界面设计基础(目录) 为iOS而设计 ...起始与停止 ...交互性和反馈 ...图标和图形 ...与iOS的整合 ...遵从:新UI更好的帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力 清晰:各种大小的 -
【最新版】mac-pdfelement_full5237.dmg 7.6.1【亲测可用】最好的创建,编辑,转换和签名PDF文档的最简单...
2020-04-18 17:49:45快速收集同事和客户的反馈。 可靠地创建和分发PDF表单。 轻松创建和分发表格,合并收集的表格进行分析,并在电子表格中导出收集的数据。 保护文档并加快与PDF的信息交换。 控制文档以帮助保护敏感信息,防止意外访问... -
安卓手机微信怎么恢复聊天记录?方法简单轻松搞定
2019-10-23 19:16:05打开手机上的微信,点击“我”-“设置”-“帮助与反馈”-“扳手图标”-“故障修复”,之后选择“聊天记录”进行修复等待手机重启后查看数据是否恢复即可。 方法二、第三方工具恢复 在手机浏览器中搜索并安装“极速... -
设计的黄金原则
2015-04-27 11:45:501.力求一致性,确保应用内部一直,相同的事情使用相同的属于,相同的操作体验,相同的图标,相同的操作手势。还要与用户的使用范围的生活知识和经验相一致 2.允许用户频繁的使用系统的操作按钮 3.要反映进程进展的... -
vue2.0桌面端框架_饿了么公司前端团队开源前端基于 Vue的桌面端组件库-Element
2020-12-19 03:27:49Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的开发快速成型。由饿了么公司前端团队开源。开源版本持续更新至2.3.2版;设计原则一致性 Consistency与现实生活... -
element ui校验两个输入框的是否相同_UI设计干货模板|输入框设计临摹素材
2020-12-27 09:59:33简单来说输入框是一个单击鼠标会插入点光标的方框,我们可以直接在方框内输入框中输入文字或文本信息。但这个不起眼的方框却是用户...4.提示:(1)帮助提示、(2)反馈提示5.图标:1.展示型 2.操作型 3.反馈型输入... -
ElementUI快速入门
2020-08-31 20:56:14Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 官网: http://element.eleme.io/#/zh-CN 特性: (1... -
什么是ui设计培训?ui培训课程难学吗?
2020-07-15 13:44:56什么是ui设计培训?这个问题其实是不太了解ui设计的一些小白想要了解的。接下来我从这些年的工作经验中去给大家分享一下对什么是ui设计培训的一些总结,希望对...2、交互设计:UI是指信息的采集与反馈、输入与输出, -
高级成就:流行的插件,为Minecraft服务器增加了独特而具有挑战性的成就-源码
2021-02-03 01:10:34:white_medium_star: 支持与反馈 想到一个好主意吗? 发现问题或需要帮助吗? 只需打开一个! 觉得这个项目有用,有趣或有趣? 通过单击此页面右上方的图标为存储库加注星号! :laptop_computer: 代码贡献 想要使... -
MySocialShortcut-crx插件
2021-03-05 13:49:49要获得我们的客户服务团队的帮助,请给我们发送电子邮件至customer@help.myway.com或在此处与我们联系:http://custhelp.myway.com/ics/support/ticketnewwizard.asp帮助和反馈:http:// custhelp .myway.com /... -
分享到兔子「Share on Rabbit」-crx插件
2021-03-05 13:49:44与朋友一起观看电视,电影,Netflix等的最佳方式 现在什么 - 是的,任何 - 你可以在Chrome中打开可以完全...请直接发送反馈,或访问我们的帮助中心:https://letsrabbit.zendesk.com www.rabb.it 支持语言:English -
HeliPort:itlwm的英特尔Wi-Fi客户端-源码
2021-02-03 10:23:23如果您有任何疑问或反馈,请随时 下载 最新稳定版 最新的Alpha版本 状态 这个应用程式目前可以运作,我们仍在尝试使其更完善。 待办事项 访问以获取更多信息 问题 该项目的问题仅用于错误跟踪和功能请求,请仔细在... -
【最新版】platypus5.3.zip【亲测可用】最好的创建本机Mac应用程序
2020-04-13 13:27:34设置自己的应用程序图标或从预设中选择 设置应用的关联文件类型,标识符,版本,作者等。 用于将支持文件与脚本捆绑在一起的图形界面 用于自动化和构建过程集成的命令行工具 “个人资料”可用于保存应用配置 ... -
【最新版】CraftManager.zip 1.0.95【亲测可用】最好的Sketch和Photoshop的插件
2020-04-23 02:29:49帮助开发人员获得设计尺寸,颜色等 使用您的真实设计文件构建交互式原型。 在您的设计环境内构建可点击的原型。 单击同步,将您的原型发送到InVision。 将画板链接到交互式热点。 实时获得团队的快速反馈。 具有基于... -
精易模块[源码] V5.15
2015-03-21 22:03:372、删除“文件_取图标”与"文件_取图标句柄"功能重复。 3、优化“系统_创建桌面快捷方式”流程代码,感谢易友[ds9660]反馈。 4、修正“IP_10进制转IP”与“IP_16进制转IP”命令反向的问题,感谢易友[@humanbean ]... -
astah-professional-8_2_0-b743f7-MacOs.dmg
2020-03-30 16:57:05表达式包括用例描述,模型的别名,字体设置,可自定义的图标,迷你图标,荧光笔/记号笔和免费书写工具。 用例图 导出和导入各种格式。 将您在Astah Pro中创建的图表导出为多种格式,包括图像文件(jpg,png,... -
泼辣修图 Polarr Photo Editor Pro 5.10.16 x64 中文多语版.zip
2021-03-08 08:43:41我们收到用户反馈后添加了画笔遮罩工具。你们都希望在编辑他们的照片时有更大的控制力和精确度,所以我们给了你。 颜色面具 我们更新的颜色蒙版比创建对特定颜色或颜色范围的局部调整更好。 复制并粘贴编辑 你是否... -
方便的话,帮我点个星星,或者反馈一下使用意见,这是对我莫大的帮助。 若你遇到问题、有了更好的建议或者想要一些新功能,都可以直接在GitHub上提交Issues:https://github.com/188080501/JQTools/issues 注:...
-
智动博客助手 v2.94.zip
2019-07-15 06:53:31软件帮助站长和博客写手快速发送博客文章到博客网站,可以方便管理博客数据,支持数据自动备份恢复、博客库自动更新、发文章时动态伪原创功能等诸多功能,帮助用户优化网站排名,是用户实现博客推广功能的好帮手。... -
客客出品专业威客系统KPPW
2016-08-11 15:24:43后台侧边栏图标修改 响应式界面样式修改 换肤功能颜色优化 用户认证页面样式优化 个人中心任务展示条数值修改 登录注册界面样式修改 后台界面样式优化 前台js验证提醒优化 财务管理界面样式优化 任务发布页体验优化....