移动端的输入设计

我觉得再移动端的界面设计就好像是在刀锋上跳舞,不是一鸣惊人就是一败涂地,但这也是一种艺术!就像在火影中,每个人对艺术的追求是不一样的。
最近新项目启动,有点小忙...不过影响并不大,今天就来讲讲怎么移动端设计一个比较好的输入

Text Field

不管在移动端还是PC端Text Field都是最常见也是最常用的一种输入方式,一个体验好的文本输入至少需要具备以下几种规则

  • 要能够让用户快速地完成输入
  • 在用户输入时为用户提供帮助和引导
  • 在用户出错的时候要提醒用户哪里错了,为什么错了

快速输入

如何快速才能快速输入?有很多种形式,我就举几个比较常见的例子

  • 在文本框需要输入的是数字的时候你应该弹出数字键盘而不是英文键盘或者是中文键盘,这一点在iOS的开发中做的是比较好的。
正确姿势.png
  • 在输入的时候自动切换大小写,这种比较常见于密码输入框英文组合还有就是英文名字的输入,这就比较多应用于国外的注册啦

引导用户输入

  • 缺省值提示可以帮助用户快速完成输入,这个缺省值可以是用户之前输入过的文本,或者系统提供的一些热门词汇。
  • 自动完成是在用户输入的过程里,根据用户的输入来给出建议,用户可以通过系统的建议来自动完成输入。
Paste_Image.png
  • 输入提示,让用户知道这个Text Field输入的是什么样的值,是名称还是密码。这种比较常见的就是在文本框前面增加一个lable进行标注,也可以用Inline Label(弱提示);我个人时比较喜欢Floating Label来实现

输入验证

用户是有可能输入出错的,系统应该给予用户及时的反馈——如果我做对了,请让我知道;如果我做错了,告诉我错在那里。
提示也应该有对提示的颜色区分,一般情况下,红色对应错误,绿色对应正确,黄色对应警告。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容