移动交互设计实例:触摸屏手机输入交互设计

文章描述:触摸屏输入的交互设计。

触摸屏手机输入时会在界面绘制虚拟键盘,用于输入字符,可以使用在所有应用程序中。特别是在短信和邮箱等需要频繁输入文字时,其输入速度直接影响用户操作效率。

缺点

但是同样全键盘输入,触摸屏没有物理按键效率高,原因在于:

1.输入法需要定位手指的位置,比如双手操作电脑键盘时,左手食指中指定位在F键,右手中指定位在J键,而触摸屏无法像按键的凸点或者输入感觉定位,难以形成高效的盲打。

2.触摸屏本身点击没有物理按键精准,触摸屏点击目标区域没有真正点击到目标区域,偏向目标正中心的下方。无论是单手和双手输入,触摸屏本身误点击的概率高。在虚拟键盘这样按键密集型的区域,每个按键的可点击区域有限,误点击的概率更高。

3.点击时没有按键那样明确的触感反馈,由于手指点击会遮住按钮,iPhone的按钮被点击时会放大的视觉反馈。

4.手指移动范围较大,按键手机输入时手指局限于按键内,而触摸屏输入和切换输入框时手指还在非虚拟按键区域和按键区域切换。输入中文时,并不是像英文那样点击按键之后字符立即上屏,会显示拼音串选择需要的汉字再上屏,手指需要点击备选词。

5.触摸屏没有组合键,输入数字和符号需要切换面板。

6.移动输入光标需要精准点击或者借助于放大镜,物理按键可以直接使用方向键切换光标,对于修改错误字符操作产生不便。

中文输入

常规触摸屏中文拼音输入过程可以分为以下步骤:

1.输入字母,键盘提供字母输入建议。比如输入声母w,可以组合韵母“a、u”等高亮显示,但是这只是全拼有效,对于简拼没有意义。简拼输入时只输入拼音的第一码,在输入词组时合理运用简拼可以大大提高输入速度,缺点是容易出现重码。

2.已输入字母组成字母串,智能切词并显示候选词。单个候选词是根据字母中词库中匹配,词组短语和长句需要计算汉字组合的概率。用户在使用输入法也是训练不断更新的过程,使用时间越长,词库越符合个人的输入习惯。词库更新的方法有:

a)单个字母或者全拼匹配候选词的顺序调整。比如输入“hao”,第一个候选词“好”被选择的概率更大,但用户多次选择“号”,那么“号”可能会被调整为第一个候选词。初始化词库可能由字典、常用短文、文章和网络用语等分别提取而成,候选词、汉字组合以及联想词的概率可以从词库中计算得出,更为复杂的长句输入需要分析汉语的语言习惯。

b)用户可以调整词库中字词候选的概率,也可以自定义词组,对本没有联系的单词建立关联,俗称自造词。比如输入“nima”,用户手动输入“尼玛”,下次再输入同样字母时就会变为候选词。电脑端计算更为智能,分两次输入“尼”和“玛”,有可能根据输入的先后顺序组成词组。

c)由网络和群体用户会对原有的默认词库的“新陈代谢”。如果多数用户输入了“尼玛”的概率超出一定概率并成为流行词,可以将该词汇更新到所有用户的词库当中。当词库的几个来源产生更新时,也会影响词库,比如网络上出现的热门事件“郭美美”。

3. 中文的智能纠错能适当缓解误点击导致的效率问题。长句输入时,如发现字母串中个别输入错误时,无法像电脑端这样使用方向键微调,只能整段删除。智能纠错是将疑似错误输入的字母与词库比对,经过运算之后返回正确的输入结果,可以对误点击中常见的打反字母、漏打字母和按错字母的情况进行纠错。这对于快速盲打非常有帮助,可以变相地增加字母的可点击区域,比如已输入“haohaizi”,当继续输入“uexi”,时,第6个字母会由i变为o。没有纠错的情况下,只会根据已输入的字母去匹配短语或者长句。有纠错之后,可以会按照多个字母去匹配,如想输入i,那么只需要点击“u、i、o”中一个,一个按钮的可点击区域变为三个按钮。

在输入过程中,故意输入错误部分字母,百度手机输入法会纠正已输入的字母串,搜狗手机输入法保留错误的字母串。

4.中英混输和输入数字标点,切换面板会打断输入流程,比如在中文状态下需要输入邮箱,由于@和.需要切换输入面板,目前只有对数字使用划词输入。因为单个常用字符切换面板是很低效的操作,特别遇到面板的切换入口和出口不一致的情况。

发展趋势

触摸屏的交互方式已经成为趋势,利用触摸屏的特点和优化程序是可以适当弥补缺陷,触摸屏的交互方式比按键更为丰富,甚至在特定情形下触摸屏输入更为方便。

输入银行账号、邮箱、地址栏和数据表等特殊类别字符段时,虚拟键盘可以改变输入法布局或者切换面板,便于用户快速输入。比如当输入账号邮箱时,虚拟键盘可以显示@和.等字符。遇到连续的输入框时,右下角的按钮变为“Next”,相当于电脑键盘的tab键,用于快速切换到下一个输入框。

手机端编辑字符时如能提供常用的命令会对虚拟键盘起到辅助的作用,这些命令通常显示在虚拟键盘的上方,不受输入法控制,属于应用程序自定义命令并同时出现或者消失。

时间: 2024-11-02 17:04:12

移动交互设计实例:触摸屏手机输入交互设计的相关文章

设计实例:支付宝创意LOGO设计思路

以下是支付宝的创意标志设计的过程,通过思考琢磨推敲,从而最终设计出满意的标志.本文主要是学习标志设计中的一些技巧和方法,作为其他标志设计来说也是通用的. 支付宝lab的意思是支付宝实验室,也就是概念产品聚集地,可以让用户快速试用这些新产品.本次支付宝lab logo设计历时一个星期,视觉设计组成员群策群力,从创意发想,初稿试水,到最后的成稿执行都凝聚着每一个成员的智慧. 以下是创意发想阶段的线描草稿 在创意发想阶段,我们共同提出了灯泡,电池,龙舟,瓶子,灯丝,化学,七巧板这几个方案.每一个方案的

交互设计实例:触摸屏手机信息连接和翻页的设计

文章描述:触屏手机网站-炫版交互设计. 触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别. 手机网站常用交互功能之一"信息连接": 竖屏状态:(图1) (图1)可见 3G门户

设计实例:Google wave交互设计分析

这几天一直超级忙,wave的手记写不下去了,总体来说,wave从UI上有两个地方值得称道,一是添加联系人的交互,一是滚动条的改进,今天来说说这个交互. 添加一个新的联系人,如上图所示. 当鼠标点击输入框,焦点在输入框中时,没有任何提示语,Submit仍然是disable的.注意向下看. 输入第一个文字时,下方出现提示:invalid address,继续输入,一直到@符号,一直会是这个提示. 注意,当图中的y被输入后,下方的提示语变了:Checking address-.,开始检索数据库. 当检

交互设计实例:新版支付宝个人版设计看法

盼望着,盼望着,东风来了,偶的账号被邀请了-总之我成为受到邀请的50万支付宝用户中的一位,根据白鸦老师的说法,"这部分用户是非常活跃的用户,非常熟悉支付宝各项功能与服务.我们希望能听到更多的声音,包括尖锐的批评."为了响应这一伟大号召,下面把新版支付宝个人版的主要界面给大家做一个详细的预览,大家可以看看有什么重大的变化.同时我也会指出自己的一些看法. 一.首页 支付宝旧版首页 支付宝个人版首页 新版支付宝个人版的导航条被大幅压缩,比以前更加清晰简洁有条理. 旧版导航条 我要收款 我要收

用户体验设计实例:网站搜索的设计

文章描述:交互设计细节--搜索. 一 推荐字 关于推荐关键词放置位置的问题: 推荐字在框下:普遍认为放在下面好一些,从版面美观度考虑,从给用户的冲击力和干扰程度考虑: 推荐字在框上:有时搜索框上面会放分类等tab,推荐关键字易被认为作分类:但具体放在上面给用户带来的干扰程度,是否会让很多用户很讨厌,笔者认为来搜索的用户普遍目的性较强,会下意识自动过滤掉自己不需要的内容,此时的用户是很难被干扰到的,可放心放到搜索框之上:但可能喜欢清爽一些或有洁癖的用户比较希望什么都不要放. (图为 迅雷看看官网,

网页设计实例:微信第三方网页设计过程

文章描述:在拿到项目时,首先需要冷静下来.而不是急着去动手,大部分同学肯定都理解了解其缘由.这边要说的更多是前期先看看相似对手的情况.因为视觉设计相对于产品功能,是最容易拉开差异感的部分.或许一套不同的视觉策略就能让产品迅速脱离大部分同类作品走出来. 最近比较忙,整理作品的速度明显放缓了许多.今天总结些前段时间做的微信第三方网站.要清楚,它是网站不是单独的一个网页.需要考虑更多是整体性的问题. 在拿到项目时,首先需要冷静下来.而不是急着去动手,大部分同学肯定都理解了解其缘由.这边要说的更多是前期

设计实例:用字体变化设计的logo实例

今天带来用字体的变化设计的logo,这个趋势已经有很长一段时间了,字体本身就具有简洁,易读的特性,用字体的变化来设计logo方法包括:改变颜色,大小,留白,间距,变形,透视,再次排版,加辅助图案,合并字体,字体局部形象化等等,这里我们挑选出72个此类logo,和大家一起欣赏学习! 1. Killed Productions Who killed letter i? 2. Wrong / Right Really smart logo! 3. TypeFACE Typeface: word-pla

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩