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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
车牌键盘设计
0.0°
2019-10-16 原创文章 经验/观点 举报 802 4 1 0

本文简要介绍了键盘排序的原因及移动端键盘设计需要注意的设计思路和容易忽视的用户体验痛点。

键盘顺序

一直有个疑问,现在通用的标准键盘排序为什么不是按照26个字母顺序排布的?而是在数字下面用QWERTY这样看似无序的顺序呢?

QWERTY键盘

QWERTY键盘

第一台具有商业价值打字机的发明者之一是Christopher Sholes。他联合Samuel Willard Soulé等人一起制造了一台由黑檀木和金属键构成的打字机,拥有两排按键,就像一架钢琴。这一最初的键盘,其字母排列方式是按照字母原本的顺序,即“ABC”模型。

QWERTY打字机

当时的打字机是通过按键触动金属臂,从而打出所需要的字母。对于早期的打字机而言,在相邻字母所联动的控制杆没有完全回归原位的时候,下一个字母便会堵住,被迫让打字员停下来。所以在打字员速度很快的时候,如果相邻字母一直会卡住,反而更加拖慢了打字速度。Sholes在之后的6年里尝试了不同的键盘排列,最终开发了QWERTY系统,目的是将经常一起出现的字母之间保持一个合理的距离,让打字员打字时手指移动更多的距离,从而避免卡住、拖慢速度,减少因卡住停下来而浪费的更长时间。

由于一些技术形成了行业标准,大多数是由于市场的力量,QWERTY键盘得到了大范围的推广。


DVORAK键盘

在1936年Dvorak简化键盘系统诞生,成为了QWERTY系统的最大竞争对手。这种键盘系统优化了字母之间的距离,我们很难用QWERTY键盘一只手打出“papaya”和“opaque”这两个词,但Dvorak却能完美的打出。不过,1956年有一项系统的研究比较了这两种键盘系统的打字速度,最后并没有决出高下。这也是现在QWERTY系统依然占据上风的原因。

Dvoark键盘


其他语种的键盘

然而,并不是全球人都主要用英文打字。不同语言的字母和拼音不同,因此键盘代表的字母和顺序也会有相应的改变。比如日语、韩语、泰语和阿拉伯语等拥有自己字母的语言,其字母都会与标准键盘上的字母相对应,并没有改变QWERTY顺序。

阿拉伯语键盘
手机键盘

虽然现在几乎都是全屏幕智能手机的天下,物理键盘仅有少数的公司还在坚持,但是当年小小的诺基亚也陪伴了几代人。手机从原先只能打电话,后来可以收发信息,再到后来拥有越来越多的娱乐功能,在这过程中键盘也随之发展。大家熟悉的九宫格键盘就是将26个字母与9个数字键盘对应从而进行中英文输入的方式。对于中文而言,九宫格拼音输入也造福了一大拨手指头不够纤细的人群,减少了全键盘一不小心就按错还发出去的尴尬,这也让九宫格在中国有一批坚定的拥护者。相比中文,英文显然更适应全键盘,同时全键盘也更加是适应手机承载的越来越多的娱乐功能。

九宫格键盘

全键盘

手表键盘

TouchOne虚拟键盘是九宫格的另一种变形,将按键精简为8个字母群,这样的变形方式能够有效配合屏幕的大小限制,保证了输入法的高效便捷。同时还支持输入emoji表情、数字和符号。

TouchOne键盘

手机按键尺寸

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。《iPhone人机界面设计规范》规定常用的点按类控件的大小是44 x 44像素。微软的《Windows手机用户界面设计和交互指南》中建议使用34 x 34像素的尺寸,最小也要26 x 26 像素。诺基亚开发指南中建议,目标尺寸应该不小于1cm x 1cm或者28 x 28 像素。

iPhone人机界面设计规范按钮尺寸

小的点击目标会导致大问题

可点击目标尺寸太小,对于用户体验来说就非常糟糕,因为如果要更精确的触控。用户需要调整手指的操作方式,从指心操作,变为指尖操作,这样才能操作尺寸较小的目标。使用指心操作通常会整个覆盖操作对象,让用户无法分辨他们所要操作的目标,也无法收到操作过程中的视觉反馈,也就无法知晓,他们的操作是否有效。当用户不得不用指尖进行操作时,又出现了一个新问题,这种操作方式非常的慢,而且很吃力,体验很差。

拇指比食指要宽,平均宽度大概在2.5cm,转换成像素是72 px。食指操作时需要44 × 44像素,拇指操作需要72 × 72像素。72像素的实际使用效果很棒,更容易定位、操作的舒适感更好。同样可以看到操作目标的边缘。这意味着用户不用费力的调整手指,使用指尖去操作了。也不用倾斜拇指,用拇指侧面点击目标。


车牌输入键盘


在设计车牌输入键盘前,我们要先了解车牌的种类,和输入位数,这样才能满足各个场景下的键盘输入需求。

车牌种类

从上图可以看出标准民用车牌为省份+字母+5位数字或字母组合,所以具有普通民用车辆录入功能的停车场键盘类似下图,选择省份之后省份键盘自动切换成数字/字母键盘。

车牌省份选择键盘

考虑到用户可能会有误操作,这里还是应该允许用户进行多次选择并关闭省份键盘。速停车公众号就采用了类似于实体键盘的设计,按钮位置按倒梯形排布,并给出删除及关闭按钮,用户一旦省份选择错误键盘自动切换成省份选择键盘,方便用户在输入错误的情况下重新选择。

车牌省份选择-速停车

为了满足广大人民群众日益增长的出行需求,2017年开始推出总7位的省份+字母+6位数字新能源车辆,民用车牌号开始不限于省份+字母+5位数字或字母组合,部分停车场应用跟随趋势设计了可以自定义输入第7位车牌号的设计。

省份选择及自定义车牌输入

使馆车牌的使字和其他省份一样在车牌第一位,领、警、学、港、澳车牌较为特殊,有些是车牌第一位,有些是最后一位,上图中应用的处理可能会导致用户在输入第一省份的时候误点这些按键。左下角可以切换字母数字键盘,做这套键盘的人可能为了只开发一套键盘而忽略了软件的易用性。现如今普通的车牌号码除省份归属地外都是车主自选的5位数字+字母组合,而且数字和字母会穿插出现,现在有1-2个字母的车牌,将来车辆数增加可能会出现3位字母的车牌,如果输入“浙A23M8B”这样的车牌需要切换3次字母/数字键盘,字母和数字在一个键盘上就能解决频繁切换输入的问题。

车辆档案录入-淘宝我的爱车

淘宝我的爱车模块车牌号输入键盘是目前看到较为合理的键盘设计,字母部分保留了QWERTY键盘的设计,数字部分则和特殊车牌后缀在同一个区块,与字母区域区分开,每部分按键操作区域都采取横向等分,看起来也较为规整。仅有的缺憾是确定按钮在左侧,右利手使用起来很不习惯,和常规的键盘关闭按钮位置也有区别,与用户认知习惯不一致。

考虑到WJ和使都会作为车牌前缀,而领、警、学、港、澳为车牌后缀,最后根据项目需求落地的车牌及数字字母键盘为:

车牌省份键盘

数字及字母键盘

总结

1.在输入纯英文字母的情况下,建议使用全键盘按钮,按键大小最好不小于28×28像素;

2.键盘字母顺序最好按照QWERTY键盘顺序排布,符合用户认知;

3.省份选择键盘建议包含关闭按钮,点击后不自动关闭,允许输入框失去焦点后自动关闭;

4.车牌号字母数字键盘建议同时显示数字和字母,减少用户切换键盘的操作;

5.固定键盘上关闭按钮的位置,最好在键盘右侧,方便右利手使用。

Powered by Froala Editor

更新:2019-10-16

收藏

4人已收藏

rainbowpam

一个平凡的交互设计师

  • 1

    作品

  • 1

    粉丝

  • 2

    关注

    猜你喜欢

      2019-10-16 原创文章 经验/观点 举报 802 4 1 0

      车牌键盘设计

      0.0°

      你确定要举报车牌键盘设计

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年10月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      4
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录