当前位置: 首页 > news >正文

重新思考数据输入

前言

在目前的产品交互中,输入数据然后程序或者产品对数据进行验证是非常常见的需求,而产品进行验证的目的性也很明确,就是为了避免脏数据进入数据库。但是从产品交互本身来讲,产品是为了让用户更加准确的、简单的使用一个功能,而不是在出错或者用户目的很明确的时候告诉他输入错误了。

数据完整 && 数据免疫

数据完整换句话就是产品对数据库中存储的数据有效性、科学性是有要求的,而目前的这些要求为了控制来源,让严格的要求控制了用户的体验和输入。(而对于已经录入到数据库的数据,默认认为是正确的)

目前大部分产品是如何保证这方面的呢?

可以看到大部分产品在需要用户数据输入的时候,在提交之前都会做各种验证以及相应的提示,较好的产品还会做出很人性化的提示,告诉自己哪些字段是否必填,以及验证规则是什么。但这样在做好数据完整的同时丢失了较好的用户体验。我们可以操作一些数据让数据具有免疫能力。

输入控件

这个是比较科学常见的方案之一,提供对应数据的数据来源,让其是在控制范围内选择的。比较常见的有 :日期选择控件,选择下拉列表,远程搜索输入框,数字控件,数字键盘,单选多选控件,菜单式选择。

技术转换

在某些情况下,同等效力的输入数据应该是被支持的,虽然这些数据不是直接符合要求的,但可以经过一些技术手段进行自动的转换,最终实现我们的目的。

常见的技术场景比如:保留两位小数,自动转换金额类型,数据格式(文本与数据转换),非标准排版与标准排版,去空格等等

校验前置 && 动态校验 && 操作不可用

校验前置 && 操作不可用

一般情况下,这两个是同时设置的,也就是在校验时动态校验,当其符合基本的操作要求的时候,才会让操作按钮变为可用操作,否则为禁用或者错误不可操作状态,这也叫校验前置,对于每个必传的字段必须有明确的标识来说明必填性以及其正确的规则或者示范性的数据输入。

动态校验 && 操作不可用

动态校验是指针对输入数据的动态监听,当其符合规则时,放开其一个逻辑的验证,如果所有的条件都符合了,把操作重置为可用 ;否则变为不可用 ;

另一条自然是动态校验的触发规则:常见的有 :获得/失去焦点,值改变,交互事件(鼠标、键盘、手势),其他(复制粘贴),监听系统相关信息。

智能纠正

当用户真的输错了,但是无法确定自己真正输入的时候,提供更多的方式或者提示让他得到正确的返回。曾经输入法里有些字我们是不知道怎么念的,这时候输入法可以提供一些偏旁或者拼字的提示,让我们找到那个字,而不是仅仅靠拼音,或者把这个字复制粘贴出来再查拼音。

也有些时候是概念转换,或者是相近词语。

比如数字的1 与汉字的一,在某些场景下我们需要用户输入的是汉字的1,但用户不知道其怎么写或者控制输入的规规性,可以将某些特定的内容进行智能纠正,然后让用户抉择是否用这个 ;

还有一种是相近词语提供选择,在一些相近词语的时候,可能用户原来只知道一个模糊的概念,当通过我们的产品他能更清晰的定位和概念化自己想要输入的内容,以及自己真正想要的是什么,这个在我们搜索商品的比如衣服的时候很常见。我们搜索袜子,但不知道也没有概念选什么种类,然后看到了有长筒袜,短袜,船袜,丝袜,棉袜等,有些这些提供的概念和相近选择,用户可以更清晰的去选择得到自己想要的内容,这也是我们系统想要用户输入的。

总结

今天的读书笔记分享就到这里,《About face交互设计4》这本书还是相当经典的,作为产品、交互设计师或者前端都是有必要读下的,让你的产品锦上添花。

相关文章:

  • EasyUI的Vue版本
  • mi家前端面经
  • cpp学习(一)环境搭建
  • Facebook 开发的 HHVM 引擎宣布停止支持 PHP
  • 面向对象:classmethod、staticmethod、property
  • 面试宝典系列-nginx的缓冲和缓存
  • GitHub:我们为什么会弃用jQuery?
  • PostgrepSQL(大象)的使用
  • 如何在Ubuntu14.04中创建Python虚拟环境
  • Java日志系统(上)
  • BCH社区意见分歧:引领市场VS迎合市场?
  • 063_Apex 的 Test类说明
  • 前后端分离产生的跨域问题的解决方案之--jsonp、nginx代理、设置头信息等
  • 开篇:Pyhon基础笔记
  • 外国人又玩出新花样,仅需几行CSS代码就能让iPhone重启、Mac卡顿
  • 08.Android之View事件问题
  • - C#编程大幅提高OUTLOOK的邮件搜索能力!
  • CentOS 7 防火墙操作
  • CentOS 7 修改主机名
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • Java Agent 学习笔记
  • JavaScript 奇技淫巧
  • JS+CSS实现数字滚动
  • mysql 5.6 原生Online DDL解析
  • spark本地环境的搭建到运行第一个spark程序
  • Vue全家桶实现一个Web App
  • vue--为什么data属性必须是一个函数
  • windows下使用nginx调试简介
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 简单数学运算程序(不定期更新)
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 入门级的git使用指北
  • 使用Swoole加速Laravel(正式环境中)
  • 微信小程序--------语音识别(前端自己也能玩)
  • 新书推荐|Windows黑客编程技术详解
  • 应用生命周期终极 DevOps 工具包
  • 找一份好的前端工作,起点很重要
  • 自动记录MySQL慢查询快照脚本
  • 看到一个关于网页设计的文章分享过来!大家看看!
  • 浅谈sql中的in与not in,exists与not exists的区别
  • # Apache SeaTunnel 究竟是什么?
  • #NOIP 2014# day.2 T2 寻找道路
  • #Z2294. 打印树的直径
  • #大学#套接字
  • #我与Java虚拟机的故事#连载18:JAVA成长之路
  • (3)llvm ir转换过程
  • (七)Knockout 创建自定义绑定
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (十) 初识 Docker file
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • (转)创业家杂志:UCWEB天使第一步
  • ***原理与防范
  • ../depcomp: line 571: exec: g++: not found
  • .net php 通信,flash与asp/php/asp.net通信的方法
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)