关于用户体验的移动应用设计

2022-06-28 08:51鲁钰琦
数码影像时代 2022年1期
关键词:界面设计图标页面

鲁钰琦

引言

随着时代的进步,互联网渗透进人们生活的各个方面,移动终端的使用频率越来越高,移动App随着智能手机用户的增加而走进千家万户,成为智能手机用户生活中不可缺少的一部分。在这个迅速变化和竞争激烈的世界,用户体验因素比以往变得更加关键。一个移动应用产品的保质期变得越来越短且用户面临着无数的产品选择。因此,为了实现用户的满意度,界面设计师在设计过程中扮演了重要角色,他们强调人的因素,以确保对每个人而言移动端产品界面设计的简易性,并保证产品界面和用户之间的交互得到提升、可用性得到加强。

用户体验概念的延伸

用户体验是用户在使用产品时,产品带给用户在情感、交互、感官、浏览等方面的体验,让用户能方便快捷、舒适地达到自己的目的。

近些年来,计算机技术在移动和图形技术等方面取得的进展已经使得人机交互(HCI)技术渗透到人类活动的几乎所有领域。这导致了一个巨大转变──(系统的评价指标)从单纯的可用性工程,扩展到范围更丰富的用户体验。这使得用户体验(用户的主观感受、动机、价值观等方面)在人机交互技术发展过程中受到了相当的重视,其关注度与传统的三大可用性指标(即效率,效益和基本主观满意度)不相上下,甚至比传统的三大可用性指标的地位更加重要。

用户体验包含用户的情绪反应并旨在使用的乐趣而不是纯粹的功能性和人机工程学。在如今强调大数据应用与场景化服务为特征的智能互联时代,增强用户体验的关键思想是基于普通用户操作过程中能够被采集到的典型统计数据的行为分析。而场景化服务使得用户体验超越服务系统本身,更依赖于用户体验产生的场景以及用户自身特征。

融入用户体验原理的移动应用界面设计研究

以用户体验原理为导向的移动应用界面设计流程分析

移动应用界面设计的基本流程:移动应用界面设计的基本流程按照互联网公司内部的界面开发流程可以大致分为:(1)用户研究;(2)交互设计;(3)视觉设计;(4)测试评估四个部分。其中,界面交互和视觉设计的过程会经常与用户研究及测试评估并行开展,用于不断验证和迭代创新用户界面。因此,移动应用界面设计的基本流程大致反映了Jasse James Garrett在《用户体验的要素》一书中所提出的用户体验要素模型的内容与结构:即从用户需求到内容需求再到信息架构、信息与导航设计最后为视觉设计的五层结构。

基于用户体验的移动应用界面设计创新方法模型构建

通过观察和分析不同代表性企业的移动应用界面设计流程以及归纳得出的以用户体验原理为导向的移动应用界面设计流程,本文将基于用户体验的移动应用界面设计创新方法模型分为:(1)用户研究;(2)用户画像构建;(3)用户体验流程分析;(4)需求分析与产品輸出四个模块。其中,用户研究与概要和角色构建模块都具有情境分析特征,需求分析和产品输出与评估模块都体现以用户为中心的设计思想。

创新方法模型的实践研究

用户研究

首先笔者随机访谈了学校财务部门工作人员两名、与六名不同院系的教职工,并对访谈内容进行了记录与总结;然后使用焦点小组的调研方法,就个人的报账经历、获取报账信息的途径、准备材料遇到的困难、对现有报账流程的看法、认为可以怎样提高现有报账效率等内容进行了访谈与讨论。之后对用户在现实场景中的主要痛点进行归纳:人工操作,效率低,学校票据审核麻烦,时间长;学校财务官网上有具体流程,但因为类型太多,不能一眼找到自己对应的流程;不同类型所需材料不一样,老师不能明确知道自己所需材料;所需签字材料多,至少两个领导,领导工作时间不集中。

用户画像构建

基于上述调研内容,笔者总结了用户画像。第一位是方老师,想要去报账但是没有科研助理帮忙。每次自己去报账的时候,窗口排队的人很多,要等很久,而且经常被退回重审,来来回回跑好几趟很麻烦。第二位是张老师,想要去报账,但是没有专业人员提供咨询,只好问报过账的同事,但是政策也经常在变动,同事不太了解最新的报账情况。第三位是徐老师,因想要报账但是去排队的时候,一等就是一上午,好不容易等到能报账,审核材料没通过,又拿回去修改好几次。

用户体验流程分析

基于用户画像,总结出在用户报账的用户体验流程中的痛点与需求,分为开始阶段、准备阶段和审核阶段。

在开始阶段时,由于官网的流程说明太官方,很多老师难以理解,不能够快速明确地找到有效信息,官网信息设计需要简化。由于政策有一直在变,老师们对流程的变动不了解,再加上官网上的描述比较官方,难理解,因此需要有可咨询专业人员报账的具体流程。同时由于没有专业人员说明,老师们经常准备好材料以后去审核,就会被指出很多材料缺少,导致来回跑好几趟,因此需有专业人员告知所需全部材料。没有专业人员说明,经常来回重改材料,会耽误老师很多时间,因此需有专业人员可具体说明材料的规范性。

在准备阶段时,可以网上填写报账单,直接在网上填写,就不要老师亲自去财务部,节省很多时间。其次,需要简化材料,据调研反映,财务部需要太多没必要的证明材料,明明有些材料是没有必要的,但却强制性要求添加。三是,领导网上批审材料,由于领导们办公室分散,工作时间也不集中,找领导签字会消耗很多无效时间,在网上审批就能节省大量时间,也提高报账效率。四是,网上送审材料,老师们准备好材料还要拿着一大堆的单子跑到财务部,然后排队还很长,时间和空间上都不方便,网上进行更便捷。

在审核阶段时,一是增设报账窗口,因为报账老师多,而且窗口很多,导致要排很久的队,耽误很长时间在排队上。二是多增加几个工作人员由于报账的老师太多,而工作人员忙不过来,效率会很低,很耽误时间。三是工作人员分工合作,在窗口有专门负责审核材料的工作人员,还有专门负责把材料输入电脑的工作人员,这样老师就能一一先把材料给工作人员看了,没问题的话就能马上离开,另一个工作人员就输入材料数据,这样不耽误彼此时间。四是工作人员在审核时,一次性将问题指出,很多老师反映,去审核的时候,没有一次性指出所有问题,导致来回跑财务处,耽误很多时间。五是提高网上审核票据规范性,老师们带一大堆票据过去审核,被指出问题退回时,又要带着票据回去修改,麻烦且耽误时间。

需求分析与产品输出

(1)需求删减与优先级排序

根据需求的紧急程度与重要程度排出需求优先级,确认这次版本的上线功能。如高优先级有:获知最新的报账规范与流程,因为各个部门对材料的要求与规范没有统一的出口;提交报账预审材料,由财务人员线上预审材料,避免反复跑,以及反复找领导签字;撤销预约,突然有事可以撤销预约,这是必备的重要功能。中优先级功能有:问题自动回复功能,没有足够的数据,难以支撑智能化回复;管理科研报账类型,报账类型变更的几率不是很大,可以考虑在程序上修改等等。低优先级有插队功能,每天报账的人不会很多没有必要有插队功能;在线填写材料,材料类型不一样,尺寸不一样对打印机要求比较高。详细的功能优先级排序,见图1。

(2)流程设计

线上报账的流程是需要报账的老师填好相应材料,在未签字前先通过拍照上传材料,交由后台人员审核,通过后由自己或科研助理拿着合格的材料,在办好院级以上的流程后在报账app上预约,并提前一个号到。

(3)信息架构

根据需求处理结果以及线上报账的流程设计,笔者规划了产品的信息架构,包括c端用户报账系统(包括提交预审材料、已提交材料的管理、预约功能等)和b端的管理人员对材料进行线上审核(包括材料的审核、报账的类别管理与细则内容、人员管理等)。

(4)方案设计

视觉风格:通过对视觉风格探索,基于產品背景和对目标用户的了解,以及多维度的对比,选取低明度和低饱和度的蓝色,凸显沉稳与信任,在界面中加上大面积的留白,可以凸显简洁感与高级感。头部使用主色大色块背景,配色进行统一,聚焦的同时凸显专业性,增强信任感。

界面设计:用户和平台互动的过程,成功的界面设计是那些能让用户一眼就看到“最重要的东西”的界面设计。设计复杂系统的界面所面临的最大挑战之一,是弄清楚用户不需要知道哪些东西,并减少它们的可发现性。建立合适的视觉层级可以帮助用户解决问题,例如通过文字类型、字体大小、粗细、颜色来建立有层次的视觉层级。该APP主场景的核心按钮使用大面积蓝色吸引用户视线,并且以较大且易识别的状态位于页面中心,用户可快速捕捉控件元素,在心理默认值高的情况下,点击进入下一级;核心功能按钮比次要功能按钮设计得更加明显,主次分明,引导用户快速获取核心信息;核心页面的按钮大多靠左分布,符合用户浏览页面从左到右的阅读规律。

导航设计:提供给用户一种在页面间跳转的方法,导航设计必须传达出这些元素和它们所包含内容之间的关系,导航设计必须传达出它的内容和用户当前浏览页面之间的关系。该APP全局导航为底部标签式导航,符合用户习惯,减少学习成本。底部标签栏是图标+文字的常见表现样式,在图标下面配有文字提示,可以帮助用户更好地理解图标的意思,降低用户误读或误操作的可能性。导航图标为选中时为线性图标,通过线来塑造轮廓,图标线条粗细适中,体现了该APP专业和沉稳的气质;导航图标选中后,为纯蓝色面性图标,通过面来塑造形体,承载信息相对与线性图标来说更重,更具有引导性。

信息设计:将信息整理好并分组,再把每组内的信息内容进行主次要区分,清晰地将想法传达给用户,可以通过提示颜色、图片或合适的错误来强化信息。该APP通过接近性、相似性、连续性,共同背景等方式来建立信息之间的联系;并对需要提醒用户注意的部分,使用红色标签来强调,引导用户视线。在信息内容处理上,采用线性分割和留白分割。在提交审核的内容界面采用内嵌式线性分割用线条来分隔不同的信息内容,可以帮助用户理解页面内容是如何组织的;因为该APP内容不太复杂,因此采用留白分割,可以达到一目了然的分割效果,易区分信息层级,视觉清爽无干扰。

登录首页:报账老师/科研助理通过输入工号/学号和密码登录报账系统,见图2和图3。

预审核页面:该APP的首页为预审核页面,分为预审核申请与已提交材料的管理,见图4。预审核申请时,用户必须填写报账名称,选择报账类别,选填相关说明,上传需审核的票据并点击提交。提交之后,相关的申请状态会出现在下面,可以查看当前申请的审核状态,共有四种状态,当前审核与审核未通过时,可撤销申请;当正在审核中和已审核时,不可撤销申请。

复审核页面:当审核没通过时,用户会收到复审通知,可以清晰地看到不合格的图片,点击进行修改;如果管理有备注不合格原因,也会展示。

报账流程页面:提供目前学校关于各类报账的流程与制度说明,告知用户需要提交的材料以及需要下载并填写的表格;同时提供相关管理人员的联系电话,用户不明白的地方可以直接电话咨询;如果学校报账制度更新,该APP也会及时同步更新,避免出现更新不及时,导致用户提交的审核没有及时得到处理。

结语

智能互联时代下的用户体验更依赖于用户体验产生的场景以及用户自身特征,而对场景和用户自身特征的描述可以通过定性和定量数据采集和分析来实现,这有助于挖掘用户需求、分析产品问题。因此,以用户为中心设计思想为核心、以Exod UX 模型为框架的移动应用界面设计创新方法模型构建的最终目的是提供一个结构来设计一个创新的移动端产品,从而满足用户需求并为公司带来最大利润。

猜你喜欢
界面设计图标页面
《京燕儿》APP界面设计
中医养生APP界面设计
刷新生活的页面
“共享员工”平台界面设计
面向智能手机的UI界面设计
Android手机上那些好看的第三方图标包
中国风图标设计
有意思的厕所图标
网站结构在SEO中的研究与应用
浅析ASP.NET页面导航技术