步步为赢:交互设计全流程解析

交互设计是对人与数字产品、环境、系统、服务等如何进行互动的设计。互联网开发流程分为五个阶段,分别是产品需求阶段、交互设计阶段、视觉设计阶段、开发/测试阶段、上线阶段,而交互设计贯穿了这五个阶段。


一、设计分析

(一)目标用户

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、通用设计原则:对齐、分类、主次分明


三、设计标准规范

《步步为赢:交互设计全流程解析》阅读笔记。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343