起点学院课程

AXURE原型设计:移动端输入框设计思路

2 评论 4904 浏览 17 收藏 8 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

输入框可以说是每个软件、系统、app必不可少的组成成分了,但是很多刚入行的产品经理对输入框原件并不懂得如何使用,对判断的逻辑也不清晰。本文作者从工作实践出发,分享了手机版输入框的相关设计思路,避免大家走一些不必要的弯路。

输入框可以分为以下几个类型,单行内容文本框、多行内容文本框、手机号码文本框、电子邮箱文本框、身份证号码文本框、密码输入框、验证码输入框……

01 单行内容文本框

单行内容文本框是最简单的一个文本框,对输入的内容没有任何的限制,和web端文本框不同的地方只是,在文本框获取焦点时,弹出键盘,键盘按键按下时,在文本框光标位置添加按键文本即可。

虽然单行文本框逻辑简单,但是后续的文本框都是以单行文本框的基础上变形或增加条件。

02 多行内容文本框

多行内容文本框主要是用于写文章、发博客等需要输入较长文字的地方,其原理是在单行文本框的基础上增加了行数,所以这里注意,在点击enter按钮时,要添加换行的逻辑,其他和单行文本框逻辑一致。

03 手机号码文本框

由于各国的手机号码格式都不一样,所以我以中国大陆的手机号码输入框为案例,讲解手机号码输入框的逻辑,首先手机号码是纯数字的,不能出现汉子、字母或者特殊符号。

所以,我们要对手机键盘进行控制,即只能输入数字,如果用户点击其他按钮如字母、特殊字符,则无需进行交互,其次需要判断手机号码的位数是否为11位,如果不为11位,则手机号码填写错误,提示客户重新填写,如果手机号码为11位,再进行下一步判断,判断收位数是否为1,如果不为1,则手机号码填写错误,提示客户重新填写,如果为1,则手机号码填写正确。

04 电子邮箱文本框

email输入框同样是在单行内容文本框的基础上添加判断条件。

首先我们需要判断@的个数,正确的电子邮箱有且仅有1个@,所以我们要判断电子邮箱文本框是否仅有1个@,如果不是的话,则输入的电子邮箱的格式有误,需要提示用户重新输入;

如果是的话,我们在判断是否有“.”,如果没有“.”,则输入的电子邮箱的格式有误,需要提示用户重新输入;如果有“.”,我们在判断“.”的位置,在@的后面必须由至少一个“.”,如果没有则输入的电子邮箱的格式有误,需要提示用户重新输入,如果以上全部条件符合,我们没有理由拒绝电子邮箱是正确的原假设。

05 身份证输入文本框

身份证号码输入框,需要在单行内容输入框的前提先加入限制条件和判断条件。

限制条件:只能输入数字和英文字母X(由于有些用户习惯输入小写x,所以同样可以输入x)

判断条件:首先判断输入内容是否为18位字符,如果不符合条件,提醒用户身份证号码输入错误;如果符合条件,在判断是否有英文字母x和X,如果有,那继续判断x和X是否仅在第18位,如果不是,提醒用户身份证号码输入错误;如果是,则简单的判断身份证号码正确。

为什么说简单的判断呢,因为身份证的组成是有不同的意义:

  • 1-6位是出生地址编码,如果要复杂的做还要校验地址编码是否正确
  • 7-14位是出生年月日,如果要复杂的做还要校验出生日期的格式是否正确
  • 15-16位是出生顺序号,无需校验
  • 17位是性别编号,无需校验
  • 18位是身份证校验吗,也无需校验

但是就算将全部规则写进去,也有可能出现身份证号码和姓名不对,现实一般会连公安局联网核查系统,由系统告知我们输入的身份证号码是否正确,因为我们没有借口,所以就简单的做了。

06 密码文本框

密码文本框就是在单行内容文本框的基础上,加一个切换可视状态的效果,这个是最简单的密码输入框。一般的话还要根据安全性需求添加一些特定的条件,例如8-20位字符、需要同时具备数字、大小写字母、特殊符号等等,大家可以按照实际需求添加限制条件。

07 验证码文本框

这里的验证码指的是手机短信验证码,也是在单行内容文本框的基础上添加限定的条件,只能输入数字,然后位数有些是4位,有些是6位,可以根据实际需求来添加条件。一般的为了验证码输入框更新美观,我们都话把输入框样式改成如下如所示。

那以上就是本期关于移动端常用的输入框介绍的全部内容,主要是基于我个人在实际工作中需要用到的原型,而设计出来的axure组件。

如果大家有所收获,希望可以点赞鼓励一下,也欢迎大家交流,谢谢。

 

本文由 @秀 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 原型预览及下载地址:
    https://axhub.im/pro/468c0ba0d1b6db34

    回复
  2. 身份证第18位是前17位根据公式算出来的,所以其实可以加上校验

    回复