除上文所提到的交互设计方法外,还要从横竖屏切换、文本输入框、引导型控件和点击区域这四个交互细节方面提升智能手机移动互联网应用界面的交互体验。
(1)横竖屏切换：重力感应等技术在智能设备中的广泛应用,使移动互联网应用特别是移动互联网客户端应用能轻松和灵活地实现横屏和竖屏的自动切换。这种屏幕切换的变化不仅能满足用户的不同需求,还能提高用户体验,例如,用户在拍摄照片时,能根据实际的拍摄需要随时进行横竖屏切换;用户在浏览较长列表文字或图片信息时,竖屏浏览能提高阅读效率;用户在观看视频或玩游戏时,横屏切换能提升视觉以及触觉体验。因此,根据不同的应用属性进行横竖屏切换设计尤为重要。在移动互联网应用中,效率型应用与实用工具型应用使用横竖屏切换适配设计更为普遍。
智能手机移动互联网应用界面横竖屏切换的设计方法主要分为拉伸、分割、隐藏、重排、互补、延伸。拉伸:基于竖屏界面的内容与结构,将横屏界面中其它部分进行适当的拉伸以填满整个屏幕。分割:由于横竖屏切换后界面布局变化较大,可以将内容分割为两个模块,并将这两个模块分别放置于横竖屏中。例如:竖屏釆用上下模块而横屏则采用左右模块。隐藏:由于受到屏幕空间限制,界面中的功能或信息只能在横竖屏(一般为横屏)其中一个模式中显示完全,而在另一个显示模式中的功能或信息则需要做出适当删减和隐藏。例如:计算器应用中的所有功能只能在横屏模式中显示完全,因此在竖屏模式中的部分功能需要被隐藏起来,仅显示最为核心的功能。重排:当界面信息较为丰富和复杂时,需要根据横竖屏的特点重新组织界面结构,将不同的功能合理分配到横竖屏的界面空间中。互补:将应用的核心功能分为两种不同内容展现形式,使彼此形成互相补充和辅助的关系,例如:以两种不同的形式展现同一组数据信息。延伸:设置应用开启的默认显示模式,而第二显示模式则作为默认显示模式的延伸与强化。例如:苹果iOS系统中的日历应用在竖屏状态下显示当月的日期,而在横屏状态下则显示每日的日程计划,横屏功能是竖屏功能的延伸。
智能手机移动互联网应用的横竖屏切换设计要注意以下八点:①保证横竖屏界面信息架构、流程逻辑、导航以及操作反馈的一致性,避免使用户迷失方向和增加他们的学习成本;但对于娱乐型应用可以釆用具有差异性的横竖屏设计以增加更加丰富的感官体验,如音乐播放应用中歌词与封面就可以采用横竖两种不同的界面风格;②横竖屏切换要尽量自然和流畅,使用户感觉不到明显差异,可以加入适当的动画效果以提升转换体验;③根据移动设备特点设定应用界面默认的定向模式(横屏或竖屏),即:用户开启应用后默认的界面方向;④设计时要根据界面内容合理分配在横竖屏中的布局,避免信息过度拥挤或屏幕空间的过度浪费;⑤界面中可以加入适当的引导和提示以告知用户界面涵盖横竖屏两种模式,以免使用户错过另一种模式中相应的功能体验;⑥设计时需要考虑不同用户左右手切换习惯,避免仅仅支持用户使用右手转换屏幕;⑦并不是每一款应用都需要进行横竖屏切换的适配设计,因此要根据应用的具体情况进行理性分析;⑧提供用户自定义 启或关闭横竖切换的功能。
(2)文本输入框：在整个用户界面体验生态中,文本输入是移动互联网应用界面中常见和常用的功能。一个良好的输入环境能使用户与界面的对话过程更加顺畅。移动互联网应用界面的文本输入框就是提升文本输入体验的核心模块。
首先要注意输入内容提示的设计。用户在进行输入动作时,系统提供相关输入内容的提示能提高用户操作的效率,缩短用户思考的时间成本。例如:在登录界面告知用户其用户名一栏既可以输入邮箱名称又可以输入用户的昵称;在搜索输入框提示用户可供搜索的内容;在多行文字的空白输入框中,增加引导性文字提示用户可以输入的内容。在输入框中增加适当提示能帮助用户快速完成输入任务,同时,引导词或短句容易使用户产生情感上的共鸣,让用户的操作过程变得更加愉悦。
此外,除了文字输入提示,还可以将提示内容变换为单个控件按钮供用户选择。例如:在浏览器应用的网址输入框中,默认提供“www.” “.com”等控件按钮方便用户直接选择。
其次要注意输入限制的提示设计。输入限制提示主要用来提醒用户文本框可供输入的文字字符总数和目前可供输入的文字字符数量,以避免用户输入超出限制。输入限制提示一般以控件的形式内嵌于输入框右侧,并与输入框存在颜色或字体上的差异以方便用户识别与理解。例如:微博应用限制输入140个字符,并将其以黑色数字的形式设置于输入框的右下角;当用户开始输入时,数字便会不断减少以告知用户当前还能输入的数字数量。人人应用则将当前可供输入字符与总字符240同时显示于输入框的右下角并以分隔号隔开,当用户开始输入时,左侧字符会不断增加而右侧240保持不变。输入限制提示不仅能直接告知可供用户输入的文字字符,还能减少用户误操作概率,提升输入文字字符的体验过程。
最后要为用户提供一键删除的操作。当用户需要对已编辑内容进行删除操作时,系统仅支持其用虚拟键盘进行逐字删除会降低用户操作的效率。因此无论是小段字符还是长段文字,系统都应该为用户提供直接删除全部内容的选择。在设计中体现为一键删除的控件按钮,在小型输入框中一般显示于文字输入的末端;而在支持文字较多且大量留白的输入框中则一般显示于输入框的左上侧,以免遮挡用户视线。例如:在用户登录界面,若用户输入的用户名或密码错误,系统能在输入框右侧提供一键删除的控件按钮,方便用户重新输入;在微博文字输入界面,当用户需要重新输入文字时,系统在输入框的左上侧提供一键删除的功能,方便用户快速重建内容。此外,当用户 始进行文字输入以后,一键删除控件方才出现或被激活,避免对用户造成错误引导。
(3)引导型控件：引导型控件又称作用户教育控件,主要用来指导用户操作,将用户更快地带入应用的使用情境中。移动互联网应用界面的引导型控件可大致分为八类:对话(Dialog)、提示(Tip)、教程(Tour)、视频演示(Video Demo)、半透明提示(Transparency)、嵌入(Embedded)、持续(Persistent)、探索(Discoverable)。?
①对话是比较普遍和常见的引导型控件,常表现为文字载入模态对话框的形式,浮现在界面最前面。主要有两种形式:第一,提示重要内容,待用户点击确定后方会消失;第二,基于重要操作,为用户提供确定或取消两种选项,待用户选择后对话框才会消失。在对话框引导控件的设计中,需要在保证说明文字简洁和易懂的基础上,使用户容易操作和选择。
②提示作为一种伴随用户操作过程的反馈形式,随时引导用户进行高效和正确的操作。它会在必要时以提示框融合箭头的形式出现在界面之中。例如:当用户第一次开启应用时,提示对话框作为新手引导的一种视觉形式指导用户进行操作;当用户在使用一项新功能时,提示对话框也能即时地告知其正确的操作方法。
与对话框的形式比较,提示对话框具有更强的上下文相关性。设计提示对话框时要注意框内文字尽量简洁,箭头指向的唯一性和清晰性。
③教程型的引导控件是通过连续性的功能展示,全面地告知用户应用界面的关键性功能及其操作方法。例如:将功能介绍分为5张界面,每张界面展现一种核心功能,用户可以通过点击“下一页”按钮或向左滑动屏幕切换到下一张界面。
考虑到用户短时记忆的限制,需要将教程型引导控件的界面数量控制在5页以内,并尽量以文字和图形搭配的视觉形式展现重点内容。与此同时,系统还要做到支持用户自定义关闭或开启教程引导控件。
④视频演示是比较直观的引导方式,主要用来展示应用界面的操作流程。而对于特定或复杂(图像或文字难以表述清楚)的操作方法,视频演示引导更加有效。例如:一款功能复杂的绘图应用可以通过视频演示轻松地帮助用户学习其使用方法。在设计时需要注意一下几点:第一,将视频播放时间控制在2分钟以内,否则容易使用户产生负面情绪;第二,视频演示要做到重点突出;第三,提供用户控制视频的功能,例如:关闭、暂停、停止、开启等;第四,注意视频与音频的整合。
⑤半透明提示主要用来引导新手用户,因此它通常出现在用户第一次开启应用的界面中,即:新手引导界面。它以半透明的视觉效果覆盖在应用界面前方,并用文字和图形符号结合真实界面内容指引用户操作。例如:在透明层用方框的形式选定背景界面中的导航并配合文字和箭头告知用户其意义和使用方法。设计时要尽量在一张界面以内展现引导内容,并将单界面展示信息控制在5条以内。同时,还要注意信息的逻辑、排版和布局,尽量采用流线型的视觉引导形式。
⑥嵌入引导一般置于应用界面之中,用来引导用户自行嵌入需要的内容。例如:在编辑图片或制作文件的应用中,用户可以在嵌入控件框内添加图片或文字。
在设计时要注意将嵌入控件和已有信息进行视觉上的差异化处理,明确告知用户嵌入控件的位置和操作方式。同时,系统还要支持用户在一个界面中嵌入多项文件,以保证用户操作的自主性。
⑦持续引导是置于应用界面之中并始终存在的引导性控件。例如:在浏览器应用的起始页中,始终存在支持用户自行定制网站的控件。由于持续引导会一直存在,因此要突显应用最核心的功能,避免对用户造成不必要的困扰。
⑧探索引导是非模态的控件形式,当用户进行某项特定操作时便会出现。它的出现不会影响用户操作和界面视觉效果,属于一种激励型引导方式。例如:当用户往下拖拽列表时,列表与搜索框之间出现“下拉刷新”的引导性文字以告知用户往下拖拽界面可以完成刷新列表的工作。并不是每项功能都适合使用探索型引导,因为它通常在用户进行某项特定操作后才会显现。目前使用较多的功能为刷新或加载界面内容。
(4)点击区域：点击区域设计涉及用户点击界面各元素的准确率和触摸感知。保罗?费茨(Paul Fitts) 于1954年提出了费茨定律,主要用来描述目标区域尺寸、距离和人类行为之间的关系。他认为距离越远移动所花时间越长,目标面积越大移动到从一个点移动到另一个点就越轻松。根据这个定律,将移动互联网应用界面中供用户选择的目标区域设置得越大,用户就越能轻松移动和点击,并能减少误操作的问题。随着可点击区域的变大组件之间距离也会变大,界面也显得更加简洁。
基于移动设备屏幕空间的限制,手指点击区域无法被无限放大;并且,若目标过大,用户也需要思考精确点击的方法,这在无形中增加了用户的认知和记忆负担。因此,设计点击区域需要符合常人手指的大小,食指与拇指是用户在点击时常用的手指。当用户左手持移动设备时更习惯用右手食指操作(左撇子则相反);当用户单手持移动设备并用单手操作时,习惯釆用拇指进行操作;当用户在玩游戏时则会更倾向于双手持移动设备,并使用双手的拇指进行操作。根据一项触摸实验室?有关人指尖研究中对触觉力学调查的研究发现:用户食指的平均宽度为16-20mm,即:45-57像素(px);拇指的平均宽度为25mm,即:72像素(px)。因此食指点击区域保持在57像素(px)左右,拇指点击区域保持在72像素(px)左右能提供给用户最佳的点击体验。
在设计移动互联网应用界面点击区域时,要避免出现按钮过远、按钮过小、按钮过大和按钮间布局过密的问题。设计师必须合理地控制按钮的大小(像素)和操作点之间的空间距离,使用户的点击体验更精确更有效率。
金城在线专注网站、软件、APP、微信公众平台、小程序、抖音、头条等开发推广，如果您有这方面的需求或者不同的观点，欢迎联系交流。
