移动端车牌键盘设计


键盘顺序

一直有个疑问,现在通用的标准键盘排序为什么不是按照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系统依然占据上风的原因。

Dvorak键盘

其他语种的键盘

然而,并不是全球人都主要用英文打字。不同语言的字母和拼音不同,因此键盘代表的字母和顺序也会有相应的改变。比如日语、韩语、泰语和阿拉伯语等拥有自己字母的语言,其字母都会与标准键盘上的字母相对应,并没有改变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位数字或字母组合,所以具有普通民用车辆录入功能的停车场键盘类似下图,选择省份之后省份键盘自动切换成数字/字母键盘。

车牌省份选择键盘-html中车牌号省份简称输入键盘

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

车牌键盘-速停车公众号

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

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

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

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

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

因为项目中不需要满足使馆车、教学车等特殊车辆的停车业务,考虑到进入场内车辆多为浙江省车辆,最后根据项目需求落地的车牌及数字字母键盘为:

车牌键盘
数字及字母键盘

总结

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,200评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,526评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,321评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,601评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,446评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,345评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,753评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,405评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,712评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,743评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,529评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,369评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,770评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,026评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,301评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,732评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,927评论 2 336

推荐阅读更多精彩内容

  • 不知不觉,岁寒输入法的更新历史已经可以列出这么一长串来了。从中可以看出,岁寒的发展过程也是一个不断试错的过程,其中...
    临岁之寒阅读 33,882评论 1 6
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,345评论 0 5
  • 感冒最怕的一个穴位 大椎穴为督脉之腧穴,又是督脉与手足三阳经之会,统领诸阳经,主一身之表,宣通诸阳,有祛寒解肌发汗...
    珍善堂阅读 289评论 0 0
  • 我喜欢你,我的梦想是环游世界,到时候我要带一一起去。你知道I LOVE YOU 的意思吗?是我爱你!生日快乐,我们...
    沉_默默阅读 136评论 0 0