交互设计是对人与数字产品、环境、系统、服务等如何进行互动的设计。互联网开发流程分为五个阶段,分别是产品需求阶段、交互设计阶段、视觉设计阶段、开发/测试阶段、上线阶段,而交互设计贯穿了这五个阶段。
一、设计分析
(一)目标用户
1-1、产品阶段法:
成熟期的产品:通过分析用户的属性和行为数据,得到目标用户的画像。
拓展期的产品:通过市场调研、竞品分析,根据公司策略明确产品的目标用户人群。
无到有的产品:通过市场调研,分析竞品,产品经理对于产品的定位和嗅觉来确定用户。
1-2、人物模型法:
1、调查用户
定性研究:像用户访谈、焦点小组、卡片分类、日记记录等方法。
定量研究:有问卷调查、A/B测试等。
2、寻找关键变量
如:与目标产品、服务的关系;对目标产品、服务的观点及态度;相关竞品、服务的使用情况;使用相关产品、服务的情景;当前面临的问题或障碍。
3、数据归类
通过目标用户的标签,提炼出用户的目标和痛点。
4. 形成人物模型图(最多只能做3个)
(二)场景思维
场景思维是帮助设计师发掘用户“需要完成的操作”的最有效工具。
2-1、描述场景公式
场景=特定类型的用户(Who)在某时间(When),某地点(Where),周围出现了某些事物(With What),萌发了某种需求(Desire),会想到通过某种手段(Method)来满足需求。
2-2、场景的分类:用户场景和硬件场景
用户场景:分客观场景、目标场景和实际场景(每一种场景又含主要场景和次要场景)
硬件场景:各种硬件特点各不相同,需要结合硬件特性
2-3、用户场景地图
1、作用
①定位用户使用产品过程中的体验痛点。
②图形化展示产品利弊,有利于团队更好地交流和讨论,共建解决方案。
2、步骤:收集用户数据→确定用户行为、情绪、思考→绘制用户体验地图→优化解决方案。
从产品的需求出发,列出用户和产品接触的所有重要节点;为重要节点的每一步找到尽可能多的场景;以场景为基点,设计每个页面;最后将页面汇集成完整的设计方案。
(三)心智模型:关键要素是经验和期望。
1、恰当的吸引力:功能入口的吸引度与功能的重要性成正比。(发现)
2、容易理解:一眼便知按钮、元素等的状态和可能的操作方法。(了解)
3、表现模型:提供正确的概念模型,使操作键钮的设计与操作结果保持一致。(操作)
4、反馈:用户能够接收到有关操作结果的完整、持续的反馈信息。(跟进)
(四)设计目标
4-1、产品目标:决定了设计方案的方向
1、需求来源:产品经理、设计师和用户研究员三种团队。
①产品经理提需求:
②设计师提需求:研究产品数据、进行用户调研/查看用户的反馈、进行可用性测试等。
③由用户研究员提需求:用户访谈、问卷调查等。
4-2、用户目标:从功能的场景出发,明确用户有何种需要。
(五)竞品分析:流程走查法、表格法和借鉴法
5-1、流程走查法:“发现→了解→操作→跟进”来进行走查。
5-2、流程走查法:用表格统计竞品中某个功能特性的有无。
1、一种表格是对比不同竞品的相同页面中,各种元素的有无。
2、另一种表格是对页面中元素的状态、行为进行分析对比。
5-3、借鉴法:找到竞品值得借鉴的部分,分析原因,如何借鉴。
二、制作
(一)流程图制作
1-1、元素:页面、动作、条件。
1-2、万能公式:发现→了解→操作→跟进。
先确定客观场景,再确定目标场景,最后做出设计方案,在实际场景里进行测试。
1、发现:一般是“入口”的职能。
入口的设计有两点需要注意:恰当的吸引力,清楚的含义表达。
2、了解
①运用接近性原则(归类法)。
②保证文案表意准确、清晰。
③主次分明。
④保证元素的可预见性。
3、操作:注意用户习惯、尽量缩短操作路径、注意遵循一致性、合理使用设计规范控件。
4、跟进:用户知道操作后,如何查看后续的结果。
(二)交互原型的制作
1-1、元素:完整流程、功能点的展现、各种状态说明、操作后的效果、异常/极限状态说明
1-2、规则
1、同一页面的不同状态最好在一个页面展示。
2、页面之间要对齐,左右排列的页面顶端对齐,上下排列的页面左对齐。
3、界面绝大多数元素均使用黑、白、灰,界面色值不超过3种。
4、界面中的控件,应遵守设计规范。
5、界面中的图标,可以去网上寻找合适的图标进行示意。
6、尺寸大小:
①手机端:使用i Phone 8标准下的2倍图尺寸,即750px×1334px
②PC端:使用宽度为1920px的分辨率。
(三)设计原则
2-1、一致性
1、对用户作用:利于用户对界面和功能操作的认知统一,学习成本低,从而加强对产品品牌的辨识度。
2、对于产品作用:复用资源,降低设计成本,确保不同设计师方案的一致,且新人能快速上手,有利于开发加速。
3、原则的运用:可用于界面排版、交互控件、多终端的体验、文案上。
2-2、容错性
用户对产品操作时出现错误的概率和错误出现后得到解决的概率和效率。实现操作前预防,操作中提醒,操作后的解决。
1、使用正确的意符
意符:能告诉人们正确操作方式的任何可感知的标记或声音(如:图标、色彩、排版、文案)
2、 注意文案的运用
文案的风格要能清晰表达信息,并能展现产品个性
2-3、即时反馈
用户进行操作后应立即给予操作结果的展示。
2-4、通用设计原则:对齐、分类、主次分明
三、设计标准规范
《步步为赢:交互设计全流程解析》阅读笔记。