提升应用界面交互体验的要点与方法

除上文所提到的交互设计方法外,还要从横竖屏切换、文本输入框、引导型控件和点击区域这四个交互细节方面提升智能手机移动互联网运用界面的交互体验。

(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)左右能提供应用户最佳的点击体验。

在设计移动互联网运用界面点击区域时,要防止出现按钮过远、按钮过小、按钮过大和按钮间规划过密的效果。设计师必需合理地控制按钮的大小(像素)和操作点之间的空间距离,运用户的点击体验更准确更有效率。