



交互设计工作不仅在于定义软件系统的信息架构和界面布局,在面对新的市场机遇,创造新产品,或对已有产品更新升级时,交互设计的工作还包含探索设计机会、定义产品功能,进而定义使用流程和信息架构、设计产品界面布局、构建产品原型并展开设计评估。完整的交互设计工作流程如图2-14所示。
图2-14 交互设计的工作流程
需求分析阶段主要通过开展设计研究探索设计机会,定义市场和消费者需求,初步形成产品概念。首先要定义所设计产品的目标用户群体,然后通过用户访谈、问卷调查、现场观察等研究方法找到用户的需求和期望。显性需求和用户期望通过访谈、观察可以获取,隐性需求则需要具备用户体验知识的研究人员分析用户对相关产品的认知、态度、使用习惯和操作流程之后进行挖掘,列出潜在需求之后,可以通过问卷调查的方式进行确认。
这一阶段的工作主要由设计研究人员完成,设计师、领域专家、产品经理参与其中。工作成果主要是需求分析报告,一般包括目标人群筛选、定义与特征描述和用户需求描述。目标人群定义以用户模型(Persona)的方式呈现;需求描述包括需求来源,如用户描述的需求,经过研究人员分析得出并由用户确认的需求。另外,为了便于规划产品的迭代与发展,需要对用户需求进行分类,常用工具为如图2-15所示的卡诺模型(Kano Model)。
图2-15 卡诺模型
卡诺模型将产品和服务的质量特性分为以下五种类型。
· 必备属性:当产品具备此属性时,用户满意度不会提升;当产品不具备此属性时,用户满意度会大幅降低。
· 期望属性:当产品具备此属性时,用户满意度会提升;当产品不具备此属性时,用户满意度会降低。
· 魅力属性:用户意想不到的特征,如果不具备此属性,用户满意度不会降低;但如果产品具备了这一特征,用户满意度会有很大提升。
· 无差异属性:无论产品是否具备此属性,用户满意度都不会改变,用户根本不在意。
· 反向属性:用户根本没有此需求,如果产品具备此属性,用户满意度反而会下降。
之后,设计开发团队根据研发计划和企业资源,来规划先开发哪些功能,满足哪些用户需求,在后续版本开发哪些功能,满足哪些用户需求。
功能定义阶段主要通过对市场与行业、竞争产品展开分析,再结合用户需求确定产品的具体功能,是一个融合多方面信息之后制定决策的过程。
市场与行业分析:寻找市场中的机遇,确定产品的切入点,一般由产品经理和项目相关人员(包括设计师)参与分析讨论,最终确定符合市场需求和行业发展趋势的产品功能。
竞品分析:分析已有的相关产品,从商业目的、功能、体验等方面归纳总结,找出竞品的优点和缺点,在保证不侵犯知识产权的情况下参考竞品的优缺点定义产品功能。
需求转化:分析已经确定的用户需求,将其转化为产品功能,描述产品功能满足用户需求的具体方式。根据用户需求类型,结合产品的商业模式定义产品的核心功能和辅助功能,为后续产品开发定义工作顺序和重点。例如,将用户的基本需求定义为产品的基本功能或核心功能,提高其开发优先度,在开发过程中优先开发;将用户的期望型需求定义为次要功能或辅助功能,在用户达到一定数量,产品运营平稳,具有持续盈利能力之后进行开发。
这一阶段的工作主要由产品经理、设计师和研究人员合作完成,需要领域专家和潜在用户的参与。工作成果是产品功能清单,需要说明功能来源,如参考某个竞品的优势,市场和行业发展的某一趋势或满足用户的某项需求。经过设计开发团队分析评估后,在功能清单中描述每一项功能的开发优先度。
产品的每一项功能都需要用户执行一定的操作流程才能得以完整实现。以某网络订餐平台为例,其核心功能是支持用户通过该平台订餐。为了实现这一目标,用户需要在手机或计算机上打开并登录该订餐平台,浏览相关餐饮信息,选择自己要订的餐食类型,确定具体的餐食项(如菜品、主食、小吃、汤品等)和数量,填写收货地址和联系方式,确认之后提交到平台,然后支付餐费,完成订餐。用户使用产品达到目的所经历的具体阶段就是相应的任务流程,如果是渐进式创新,可以参考已有的竞品定义产品功能的任务流程。如果是突破式创新产品,没有可参考的竞品,则需要根据用户以往完成相同或相似任务的具体流程定义产品功能的使用流程。
任务流程定义工作主要由设计师和产品经理完成,研究人员、潜在用户、程序人员和领域专家参与讨论和决策。在设计产品的任务流程时要关注用户在各个任务环节的具体操作行为,主要包括启动程序、登录、浏览、搜索、选择、输入、修改、删除、确定、提交等。为了便于产品开发,设计师需要与程序人员确定用户的所有操作节点处要执行的条件判定,如在提交内容时判定用户所填写内容是否完备、是否符合某些规范、是否处于登录状态等;并在判定处给出不同判定结果对用户的引导,如判定用户处于未登录状态,则将用户引导至登录页面。
这一阶段工作的主要成果是产品所有功能的任务流程图。需要注意的是,根据产品所面向的用户类型不同,需要定义适用于不同用户的任务流程。如电商平台要同时为买家和卖家提供服务,那么不仅需要定义用户购买商品的任务流程,还需要为卖家定义管理商品、订单、客户的任务流程。这两个角色的相关联任务流程需要一起定义,如买家退货和卖家管理要求退货订单的流程。
软件产品的主要作用是(通过与用户的交互)对信息进行处理,并显示给用户。信息架构可以理解为产品的骨架,它定义了产品所有信息的相对关系和组织形式。用户使用产品完成任务的过程中,无论是输入、浏览、筛选、确定还是提交,每一次操作的对象都是信息,信息的相对位置决定了用户能否流畅地完成任务,最终实现自己的目标。例如,当用户选择所要预定的菜品和数量,下一步要提交到系统,如果“提交”操作的位置和视觉效果设计得不好,用户找不到或花费了较长时间和一定的精力才找到该操作对象,这不仅会降低用户的使用效率,还会导致用户产生急躁、挫败、失望等负面情绪,某些用户甚至会放弃任务,并卸载产品。
信息架构设计阶段的主要工作是对产品包含的所有信息和功能进行分类、分组并定义其层级结构关系。这一工作由产品经理和设计师共同完成,潜在用户、研究人员、领域专家、程序人员参与讨论和决策。最终的产出成果是产品的整体信息架构图,在完成之后,拿出产品所有功能的任务流程图,在信息架构图中对应地找出完成每一项任务所需要走过的节点,确保没有遗漏。
任务流程和信息架构定义完成后,需要把产品的所有信息和功能转化为具体的页面。所有页面内的信息总和以及页面间的层级结构关系是信息架构的具体体现,页面内的浏览/操作顺序和页面间的跳转关系是任务流程在产品中的具体表现形式。产品所有功能的任务流程的每个任务节点都应该有相应的支持页面,但不一定是一一对应关系。可能某个任务节点对应多个页面,如“支付”任务对应的页面包括显示/选择/填写支付账号、输入支付密码、确认支付页面以及支付成功后显示支付信息的页面。也可能多个任务节点对应一个页面,如浏览菜品、选择所需订购的菜品、输入数量三个任务节点都在同一个页面内完成。
在设计页面布局方案的时候,可以参考已有的设计模式确定页面所包含的信息的位置和相对关系,但需要重点推敲页面所支持的任务节点处,用户的主要需求是什么、视线规律是什么、决策模型和标准是什么。带着这些问题的答案对页面内的信息进行视觉优先度分级,保证用户主要需求的信息醒目,能快速被用户捕捉到,然后通过视觉设计引导用户视线,逐渐呈现其他辅助信息,帮助用户完成当前页面内的决策,最终引导用户完成任务。例如,当用户浏览并挑选菜品的时候,口味类型是用户决策是否选择该菜品的首要信息,要突出显示,确保用户除了菜品图片之外第一眼就能看到,然后根据从上到下、从左到右、从大到小的布局原则呈现价格、所属餐厅及其位置、主要口碑评价等信息。
界面布局设计工作主要由设计师完成,产品经理、潜在客户、研究人员以及程序员参与设计方案的评审。这一阶段的工作成果是产品所有页面的线框图,完成之后,拿出所有任务流程图,对应找出利用页面完成任务的操作路径,确保页面布局设计没有遗漏。
界面布局阶段基本上完成了产品页面内所有信息对象的呈现方式(文字、图片、视频、动图等)、所处位置和尺寸的定义。视觉效果设计阶段的主要工作是通过为所有信息对象赋予颜色、材质、样式以提升界面的美感,塑造产品最终的感知体验。
在设计过程中,设计师可以先根据企业或产品的战略目标、企业的视觉形象、主要的业务内容预先制订颜色、字体、材质效果、样式的设计规划,然后抽取产品的核心功能页面开展具体的设计。设计方案经过评审通过后,依据这些核心页面的设计方案制定设计规范(如图2-16、图2-17、图2-18、图2-19、图2-20所示),说明不同信息对象的字号大小、字体选择、颜色、样式的设计标准,之后只需要依据这些规范批量化定义界面的视觉效果,这样能提高工作效率,保证产品的视觉效果完整统一。另外,纳入界面布局中信息对象的尺寸和位置等设计规范之后,可以形成产品界面的开发规范,移交给程序人员,指导产品页面的开发。
视觉效果设计工作主要由设计师完成,在定义了设计规范后,可以用示例向设计团队的所有成员说明规范的具体使用方法,之后可以让多个设计同时开展视觉效果设计工作,最终完成产品所有页面的视觉效果设计。
图2-16 某产品的图片尺寸规范
图2-17 某产品的文字设计规范
图2-18 某产品的配色设计规范
图2-19 某产品的图标设计规范
图2-20 某产品主要页面的布局规范
虽然界面布局设计和视觉效果设计定义了产品所有页面的设计效果,但该阶段最终呈现的是静态、独立、分散的产品页面,产品的整体形象并不明显。产品原型构建基于所有页面设计效果,建立页面之间的切换和跳转关系,模拟产品真实运行状态,强化产品的整体形象,提高用户测试时的沉浸感,让用户感觉到这是一款产品,而不是一堆散乱的页面。除了用来开展可用性测试、验证设计方案的合理性,带有交互功能的原型也可以用来在产品上线/发布之前向顾客和消费者演示产品功能的使用流程。
为软件产品设计方案构建原型的工具非常多,常见的包括Figma、Axure、Sketch、Adobe XD、Mockplus、Justinmind、墨刀、inVision等。与平面设计软件(以Photoshop和Illustrator为典型代表)相比,这些原型软件能在页面之间建立跳转关系,设置交互控件的视觉特效,支持触摸屏的手势操作,生成独立的可运行程序,模拟产品的运行过程,部分设计软件还能为设计师团队内部,以及后端程序开发人员建立协作平台,确保设计方案在开发过程中百分之百得到执行。
设计评估和产品的可用性测试是软件产品不断更新、不断提升用户体验的前提保障。常见的设计评估和可用性测试方法包括启发式评估、专家评估、基于任务的可用性测试、无任务的可用性测试、产品运行日志分析、关键事件分析、设计方案的A/B测试、眼动测试等。
产品原型构建完成之后,可以邀请领域专家、可用性专家、潜在用户、营销人员等设计开发团队之外的利益相关者对产品展开评估和测试,以找出设计方案中不合理的地方,这样可以在进入产品开发阶段前进行必要的调整。另外,在产品开发完成、部署之后,除了邀请以上利益相关者对已运行的产品进行评估和测试,找出需要改进的地方之外,还需要对产品的运行状况进行持续监控,分析产品运行日志,找出用户在使用产品过程中存在的问题以及产品的缺陷,为下一次的产品迭代指明工作方向。