恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
高级设计师!帮你做能落地的界面设计之输入框
0.0°
2018-02-01 原创文章 教程 举报 1871 12 11 0

      很多新人朋友由于工作经验少,常常会心理没底,因为对一些工作上的设计细节并不了解,不过没关系,以后菜心会多分享一些关于工作上的细节经验,希望对大家有所帮助。


我们常常会看到网上有很多同学做一些概念稿:

Image title


这些界面视觉上非常酷炫。

当然,我从来都不否定概念稿的作用与价值,它可以为我们提供配色、形式、创意等等,但是我今天要补充的是这些概念稿没有的东西,就是实打实在工作上需要考虑的细节。

今天就拿一个简单的输入框来举例,看看我们在界面实际落地的时候需要注意哪些内容,大纲如下:


1.输入限制问题


2.输入多行文字后的规则


3.别忘了输入内容时会唤起键盘


4.记得标注键盘类型


1. 输入限制问题


      很多输入框是有限制字数的(微博的140字),如果输入框对字数有限制,而你没有把规则告诉用户,那用户一定会吐糟。

       比如微信公众号(移动端)的后台回复,有一次我回复用户的问题,打了200多个字,最后发现字数已经超过限制,无法发送,这个体验就很不好,因为在打字过程中没有接收到任何超过字数限制的提示。

      那如何告诉用户限制规则呢?

      微信个性签名会在输入框的右下角告诉你还可以输入多少字,如下图:

Image title


发布微博的时候,会在右下角告诉你已经输入多少文字,如果超过140字后,数字的颜色会变成橙色,起到警示作用,如下图:

Image title


2. 输入多行文字后的规则

对于输入框,当文字只输入一行的时候,不会有什么问题,但输入多行的时候,如果你不给出规则,那开发哥哥一定会骂你不专业。

所以当输入多行文字时,我们一定要考虑清楚如何显示,我们来看看微信聊天界面的规则:

Image title


输入5行文字以内,输入框会向上撑开。

文字超过5行,输入框大小就不会变动了,5行以上的文字会被遮挡住。

但微信这里有个细节体验不是很好,因为遮挡住的内容一点都看不见了。

我们来看唱吧的聊天界面:

Image title


被挡住的文字会露出半行,让用户知道,哦,原来上面还有字。(不过唱吧的输入框有点小气)

以上就是放输入多行文字的细节,大家在工作的时候一定要注意。


3. 别忘了输入内容时会唤起键盘

我们来看下面这个界面:

Image title


起初一看没啥问题啊,可是当真正落地的时候,就会发现,问题大大的。

当你准备输入内容的时候,键盘会被调起,这时候就尴尬了,如下图:

Image title


提交按钮呢?

原来是被键盘挡住了,现在即使你想把提交按钮往上提,空间也不够,因为上面两个输入框已经把空间占满了。

这就是设计师经验不足,前期没有考虑充分导致的结果。

这种现象还经常会出现在登录页面:

Image title


这么登录布局本身是没有问题的,但是你需要多考虑一种键盘调起的状态,因为键盘调起来的时候登录按钮会被挡住,成本就稍微高了一些,这就是为什么大部分登录页是这样布局的:

Image title


因为键盘有没有被唤起,页面的布局是不用变的。

当然这里也不是说那种形式更好,而是提醒大家要考虑好细节。

4. 记得标注键盘类型

现在大家都知道,输入内容会唤起键盘,而键盘分为很多种类型,比如中文键盘、数字键盘、英文键盘,如果在输出设计稿的时候对键盘类型没有标注,开发哥哥就会使用默认键盘,这样就有可能造成一些降低体验的问题,例如:

Image title


如果你不标注使用纯数字键盘,默认的中英文键盘就会被唤起,给用户带来不必要的麻烦。

所以键盘类型一定要记得标注哦,如果需要自定义键盘,还需要将自定义键盘样式提供出来,不过开发成本就会高一些,所以要谨慎使用。

Image title


更新:2018-02-01

收藏

12人已收藏

  • 12

    作品

  • 82

    粉丝

  • 1

    关注

  • 资深UI交互微动效设计指南
  • APP进行视觉优化设计
  • UI设计中的布局编排原理
  • 12个移动端UX设计趋势

    猜你喜欢

      2018-02-01 原创文章 教程 举报 1871 12 11 0

      高级设计师!帮你做能落地的界面设计之输入框

      0.0°

      你确定要举报高级设计师!帮你做能落地的界面设计之输入框

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年01月31日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      12
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录