在页面设计中，用户各种数据输入，和系统数据的输出的一些要点自查，做的一些思考

数据输入

数据输入，做到给予用户一个确定性，包括确认输入什么，是否输入正确(反馈)和输入提交后预期结果。

一、数据输入前：

1、输入框PX

一般设计的符合用户输入习惯就可以，32-40PX

2、输入提示：

*告知用户要输入什么内容：

比如专业性强，大众可能不清楚的文本解释输入内容，可以在输入栏中加上输入提示，例如输入字数、规则。

*用户输入信息提示：

必填项，在输入标题前面加*号，表示必须输入，例如*用户名；也可以在输入框，默认加上提示文案，比如：“请输入用户名，必填”这种文字占位符，文字占位符，在点击输入内容时消失，删除输入内容失去焦点时还原。

*重要内容输入：

第一种可以案例进行提示，例如美团外面的门牌号输入，可以提示案例：7楼702室

第二种是可以进行拆分输入，例如输入内容比较长时，可以多段进行输入，常见银行卡号4位4位进行输入。

第三种是输入限制，一般直接文案提示，输入提示可以在框中直接提示，或者弹出toast提示，或者重要的可以直接弹窗提示，还有可以在输入框下面进行提示，按照重要性进行区分。

二、输入时：

1、光标跟随，告知用户你当前点了啥输入框

2、输入框外框高亮，告知用户你当前在哪输入

3、限制输入，例如手机号码这种输入，可以做限制。当用户输入超过11位时，不允许输入。

4、实时输入提醒：包括输入字数提醒0/30,错误提醒X这种。

5、输入判断：输入时，按照需要输入的内容，选择弹出的键盘，或者做一定的限制，例如字数限制，输入内容限制（例如文章标题，需不需要显示完整等）

6、输入错误提示：实时的页内校验可以马上告知用户输入的正确性，无需等到用户点击提交按钮才发现错误，降低用户放弃的可能性，输入错误后，也需要进行提示，可以以不同颜色进行区分。

7、输入规则：是否需要对输入的值做一定限制？例如极大值，极小值(0~10000)，某些值不允许输入等(例如微信红包金额)。还有就是记得别给自己挖坑，我之前做过一个按照年龄进行颜值排名的需求，当时就没考虑清楚用户输入1900年之前和2015年之后，我该怎么办，被坑了。 

8、重复输入、减少用户输入：该数据是否需要重复输入，是输入自动保存，还是每次都要重新输入，或者是否需要历史记录？还是自动填充旧数据。

9、输入删除：对与输入错误长内容，是否需要提供一键删除功能，减少用户操作

7、输入结果提示：用户输入这些内容，提交之后会怎么样，例如页面底部加上输入内容会展示在哪里

8、输入遮挡：点击输入框，输入时，是否会被弹出的键盘遮挡，一般来说，按钮位置要避免被键盘遮挡，可以通过弹出键盘整体按钮上移的方式来解决。

9、敏感输入：对与敏感的输入数据，是否要进行保密处理，例如用户输入的密码，在输入后以“*******”替代

10、放大提示：例如输入时，提供放大镜功能，方便用户进行预览

11、输入反馈：输入完成失去焦点时，或者有前置输入框未输入，需要给予用户一个实时的反馈，反馈包括未输入反馈(红框、文案告知未输入)，输入错误反馈(红框、文案告知未输入)

12、搜索框：常见的包括搜索内容、搜索功能，或者复合搜索(可搜索内容功能等等等等)

*内容搜索：常见的百度搜索、热搜、知乎等社区型、纯内容型、电商、新闻型等产品使用，可以在搜素框中，按照当前热度或者用户数据，在搜素框中展示搜索文案。例如当前大家正在搜、正在看XXX

*搜索展示：有些搜索，在点击后进入的是搜索页，里面可以有一些搜索展示，例如搜索热点、搜索范围选择等等等。

*搜索限制：字数限制，内容输入达一定范围后，不允许用户输入，点击键盘无效

*实时检索：可以根据用户输入的内容，实时筛选结果，好友、应用搜索、后台常见，例如在搜素栏中输入B后，实时将于B相关的内容刷新呈现。

13、输入建议：依照用户输入的历史记录，或者系统记录，用户输入关键词自动提供包含该关键词的补全信息，例如在百度搜索中输入b时，下拉弹窗与b相关的搜索词

14、多文本输入：常见的微信朋友圈文字编辑、微博编辑。

*占位符文本提示：按照输入场景给予用户提示

*自动获取输入框焦点、弹出输入键盘，减少用户操作

*输入数字提示：依照微信和微博举例，在用户输入长内容时，微信是超出了不当场提示，等到点击发布才提示超出，而微博通过底部的字数提示，告知用户当前已经输入了多少内容。二者区别，微信允许用户输入更多内容，不像微博有140字字数限制，所以不放提示，降低用户编写成本和思考焦虑，想写什么就写什么。而微博有140字限制，所以需要在输入过程中实时提示用户，避免用户输入high了才弹窗提示用户超出了(当然现在微博也放开字数了)

*输入自适应：用户在输入内容时，可能会遇到文章超出当前文本输入框高度范围的情况，在输入后无法看到之前的输入或者之后的输入内容。一般可行方式有，折行显示、或者文字自动上移，旧的内容自动上移到输入框上，通过滑动来查看

15、初始值：需要填写、选取的表单，若是信息比较固定的话，可以提供一个初始值，这个初始值一般是一个建议值，方便大部分用户填写。

16、联想输入：常见的是账号联想，比如微博，在输入账号时后面带上@XXX.com

17、推测输入：能不能根据用户已经输入的内容，自动帮用户填写某些值，例如顺丰的直接复制长地址信息，系统自动判断补全。

三、输入后：

1、输入后，需要给用户预览和展示，例如微信公众号，允许用户预览自己输入的内容，给予用户确定性。

2、输入是否需要保存草稿，用户长篇输入完成，往往会碰到不小心点到返回、退出按钮，此时要按照用户输入内容的重要性给予用户提示，输入少的，不重要的，可以直接返回。输入重要的、多的，提示用户确认是否退出，输入重要的，麻烦的，自动保存为草稿，用户下次进入还能直接试用。

3、输入错误反馈：常见的提示在上面也复述过，一般来说做好提前反馈，提交反馈一般是密码、验证码错误反馈。

数据输出

数据输出，给予用户确定的信息、结果、或操作方式

一、空数据

1、提示用户数据为空，

2、按照系统推荐、给予一些相似数据推荐(电商)

3、工具类APP，可以提示用户该如何进行操作，才有信息

二、有数据

1、数据正常：正常显示，是否告知用户，这个数据有什么用。

2、数据异常：如何异常，是否要有异常提示，为什么会造成这种数据异常。

3、数据展示、当数据量过多时：把重点数据挑出，给用户关注

4、数据呈现：数据展示是否能更友好，例如用户成绩90分，是单纯给分，还是可以加上文案。