移动端的输入设计

作者: 王bu留行 | 来源:发表于2016-09-21 00:04 被阅读109次

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

Text Field

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

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

快速输入

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

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

引导用户输入

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

输入验证

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

相关文章

  • 移动端的输入设计

    我觉得再移动端的界面设计就好像是在刀锋上跳舞,不是一鸣惊人就是一败涂地,但这也是一种艺术!就像在火影中,每个人对艺...

  • 关于APP注册设计的二三事

    1. 分步注册 a、分步注册适合移动端设计 移动端屏幕小,加上弹出键盘,假设将多个输入项放在一个页面,会给用户造成...

  • 移动端ui设计,移动端界面

    移动端ui设计,移动端界面。相信你可能对这个概念比较模糊,一般来说,ui设计分为移动端ui设计和PC端ui设...

  • 关于技术与产品的思考

    1.关于移动端对用户输入的校验 iOS和android的同事就移动端用户输入是否需要校验,以及用户输入是否需要更强...

  • 移动端rem适配

    1.移动端适配使用技术 . sass . 单位rem 2.移动端设计稿转px 一般的移动端设计稿都是 750/13...

  • 移动端

    app Web App Hybird App 移动端页面 设计图 测试 移动端的设置 移动端的布局 弹性 fl...

  • web移动端常见面试题以及适配兼容问题

    1、移动端你们一般采用什么布局?移动端设计稿是多大的尺寸? ● 定宽布局 ● 一般移动端设计稿是640或者750的...

  • 杂项笔记

    移动端如何阻止下拉出现底白 移动端meta表情解决缓存 input框正则输入限制

  • emoji表情 检验

    主要是为了在移动端输入框(input、textarea)输入emoji表情时,做校验。移动端直接输入emoji表情...

  • 如何设计移动端文本输入框

    数据输入体验中三个关键因素: 1、速度(提高输入速度) 2、引导(为用户输入提供引导帮助) 3、反馈(直接有效的指...

网友评论

    本文标题:移动端的输入设计

    本文链接:https://www.haomeiwen.com/subject/lpnoettx.html