产品经理必懂的交互设计
2018-05-31 15:58:18 288 举报AI智能生成
交互设计是产品经理必备的技能之一。它关注用户如何与产品进行互动，以提高用户体验和满意度。交互设计包括以下几个方面： 1. 信息架构：确定产品的信息结构和导航方式，使用户能够快速找到所需内容。 2. 用户研究：通过调查、访谈等方式了解用户需求和行为。 3. 界面设计：设计产品的界面布局、颜色、字体等元素，以提供直观、易用的界面。 4. 可用性测试：通过实际测试，评估产品的易用性和效果。
作者其他创作
大纲/内容
如何进行交互页面设计
明确设计元素以及影响元素
前期工作输出
功能需求
信息架构
用户流程
设计原则
设计原则
设计原则
Google用户体验十大设计原则
http://www.chuangyimao.com/detail/14970.html
有用（Useflu）
以用户为中心--他们的生活，工作和梦想。Focus on people-their lives, their work, their dreams.
快速（Fast）
每一毫秒都有价值。Every millisecond counts.
简单（Simple）
简单就是力量。Simplicity is powerful.
魅力（Engaging）
引导新手，吸引专家。Engage beginners and attract experts.
革新（Innovative）
敢于创新。Dare to innovate.
通用（Univerasl）
为全世界设计。Design for the world.
盈利（Profitable）
计划今天和明天的业务。Plan for today‘s and tomorrow‘s business.
优美（Beautiful）
愉悦用户的眼睛，但不分散注意力。Delight the eye without distracting the mind.
可信（Trustworthy）
值得信任。Be worthy of people‘s trust.
人性（personable）
有人情味。Add a human touch.
交互原则
尼尔森十大交互原则
状态可见原则（Visibility of system status 系统可见性原则）
系统应该让用户知道发生了什么，在适当的时间内做出适当的反馈。 大多数流通的翻译是针对网页的：用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈
环境贴切原则（Match between system and the real world 匹配系统与真实世界）
系统应该用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例，让信息符合自然思考逻辑。大多数流通的翻译是针对网页的：网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。
撤销重做原则（User control and freedom用户的控制性和自由度）
用户经常错误地选择系统功能而且需要明确标识离开这个的“出口”，而不需要通过一个扩展的对话框。要支持撤销和重做的功能。大多数流通的翻译是针对网页的：为了避免用户的误用和误击，网页应提供撤销和重做功能
一致性原则（Consistency and standards一致性和标准化）
用户不必怀疑是否不同的语言，不同的情景，或者不同的操作产生的结果实际上是同一件事情。遵循平台的惯例。也就是，同一用语、功能、操作保持一致。
防错原则（Error prevention ）
比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。对于网页来说：通过网页的设计、重组或特别安排，防止用户出错。
易取原则（Recognition rather than recall 识别比记忆好）
尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。 不知道是谁翻译的：好记性不如烂笔头。尽可能减少用户回忆负担，把需要记忆的内容摆上台面。
灵活高效原则（Flexibility and efficiency of use使用的灵活高效）
加速器－新用户是看不到的－也许专业用户也会经常察觉，系统可以满足有经验和无经验的用户。 允许用户进行频繁的操作。 这就要求开发者的开发技巧，更加便捷灵活的代码和反馈，优化再优化。 大多数流通的翻译是针对网页的： 中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。
易扫原则（Aesthetic and minimalist design 审美和简约的设计）
对话中不应该包含无关紧要的信息。在段落中每增加一个单位的重要信息，就意味着要减少相应的弱化一些其他信息。 大多数流通的翻译是针对网页的： 互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。
容错原则（Help users recognize, diagnose, and recover from errors 帮助用户识别，诊断，并从错误中恢复）
错误信息应该用语言表达（不要用代码），较准确地反应问题所在，并且提出一个建设性的解决方案。大多数流通的翻译是针对网页的：帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404
人性化帮助原则（Help and documentation 帮助文档）
如果系统不使用文档是最好的，但是有必要提供帮助和文档。任何信息应容易去搜索，专注于用户
的任务，列出具体的步骤来进行。
须知视觉规律
格式塔心理学
https://baike.baidu.com/item/格式塔/1546363
接近（Proximity）
人们对知觉场中客体的知觉，是根据它们各部分彼此接近或邻近的程度而组合在一起的。各部分越是接近，组合在一起的可能性就越大。
相似（Similarity）
人们在知觉时，对刺激要素相似的项目，只要不被接近因素干扰，会倾向于把它们联合在一起。换言之，相似的部分在知觉中会形成若干组。如，我们在小组辩论中，往往几个人争着发言，但我们仍然能从嘈杂的声音中听出某个人的讲话，这是因为这个人讲话的音质始终有相似性的缘故。如果他讲话的音质经常在变化，那就很难从噪音声中分辨出他的话来。
闭合（Closure）
闭合是指一种完成某种图形(完形)的行动。
连续性（Continuity）
在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。
简单（Simplicity）
合并、弱化、隐藏、删除
视觉流
视觉方向
从左上到右下
内容顺序
动图（视频）
图片顺序
须知的开发知识
基础开发原理
用户查看客户端
客户端请求服务器
服务器返回客户端
客户端给用户查看
实现方式
hybrid
结合实现
Native
H5
性能优化
提升加载速度
缓存，减少加载
静态资源（图片，CSS、JS）
优先加载
减少请求数量
优化图片
压缩html
调用接口
各大开放平台，不必要重复写
Axure页面设计
手机界面格式
IOS
屏幕尺寸：320*568.状态栏：20px
Android
颜色区分
默认黑白灰
文字
字体
大小
分类
浏览型
功能型
提示型
营销型
图标图片
图片
icon
快速验证页面设计
内部评审
邀请
使用
评估
汇总
解决方案
修改排期
用户测试
交互交付与发展
如何撰写交互说明
全局性
单独性
交互说明原则
交互说明样式
标注说明元素、区域、跳转动画
交互样式手势
交互动画
交互说明
输入大家满意的交互文档
专业性
封面
标题
产品名称_版本号_交互文档
时间
联系人
文档信息
需求列表
修改记录
信息架构
功能及落地页
用户流程
目录
总标题
副标题
界面流程
附录
效率
如何说服大家接受你的方案
保持目标一致
首先
关注业务动态，再基于迭代寻找新的设计点
其次
最后
做个PPT
完整的思考过程并可视化
群体决策
注意商业技术平衡
掌握必要的沟通技巧
交互设计趋势
动效设计
提高产品的品质感
新技术融合交互
AR&VR
多平台一体化设计
不要因为系统不一致而交互不一致
对话式交互
情感化设计
交互UX化
UE
UI
行业资深缺口大
交互作品整理与面试
把面试当做需求来处理
简历
零基础入门互联网交互设计师
你好，交互设计师
行业需求的发展搜索量在不断增长
交互设计师能力
通过课程学习
需求分析
原型设计
流程设计
视觉能力
信息架构
开发知识
通过平时积累
产品意识
逻辑分析
沟通力
学习能力
亿级产品开发流程
dream
商业价值（BRD产出）
市场分析
市场说明
市场规模、市场特征、市场趋势、竞品分析
用户说明
目标用户群体分析、需求分析
产品说明
产品定位、核心目标、主要功能
立项评审
用户研究
产品需求说明（PRD）
交互设计
用户行为路径图
设计用户在你的产品中按照怎么样的路径完成任务，通过设计提高任务的完成效率
信息架构图
关注内容架构、导航系统设计，让用户容易理解和方便找到所需信息
页面交互图
页面原型图
视觉设计
常用的方法情绪版（MoodBoard）
可用性测试
原形流程测试
开发
测试
功能
流程
界面
小范围内测
发布灰度版本
产品发布
快速迭代
交互设计师必备的素质
交际设计师的硬技能
★ ★ ★ ★ ★ Axure（原形设计）
★ ★ ★ Photoshop（专业设计）
★ ★ ★ ★ Sketch
★ ★ ★ After Effects
★ ★ ★ ★ Pixate
★ ★ ★ ★ ★Mind Manageer（脑图软件）
交互设计师的软技能
产品意识
业务需求
用户意识
以人为本
视觉能力
跟进视觉以求达到体验目标
用研能力
挖掘用户痛点及使用习惯
沟通
学习
交互设计师必懂得需求哪些事
交互设计流程
需求分析
信息架构
用户流程
原形设计
交互文档
需求分析
为什么做？怎么做
用户画像
用户基本属性
自身属性
用户特征
针对我们产品用户的特征
用户目标
为什么使用我们的产品
不要看用户怎么说，要看怎么做
不要过度关注用户需求而忽略业务需求
如何量化设计需求
需求三种形式
PRD
大型项目
口述
小需求
线框图
中小型项目
需求量化
业务需求
业务目的
业务目标
用户需求
目标用户
用户场景（明确用户限制）
用户目标
目标
提高14%
业务需求依赖用户需求实现
用户行为模型分析
需求实现路径
用户需求
场景
行为
界面
目标
目标行为模型（FBM模型）
动机
为什么要
能力
是否够条件
触发点
引爆点
需求池
功能池
如何搭建信息架构与用户流程
信息架构的重要性
让用户更容易找到自己想要的东西和产品
页面内容组织
组织归类
整体导航框架
信息归类
确定广度
如何心境信息架构设计
业务端
业务需求
列出需求架构图
根据层级嵌套关系写出一层层功能点
根据情况控制细度，如整个产品与单个页面颗粒度会不同
竞品功能架构图
直接竞品
间接竞品
竞品分析
用户端
如何确定用户流程
看到了什么，做了什么
越短越好，操作流程尽量不要操作5步
用户场景
看到什么
想到什么
做了什么
方式：头脑风暴
热身
6人以内
脑暴主题
主题发散
5-10个idea
每张纸一个idea（简洁，字体大，可以用画的）
撕纸横向，不易弯曲
轮流展示
介绍一个idea，墙上贴一个
介绍言语简洁，控制在20s以内
其他人聆听和理解为主，不要讨论，不要批判
分类整理
相似的贴在一起
节约时间：鼓励大家都动手，尽量不要言语沟通，想法不一致再沟通
二次发散
换一个颜色的便利贴用于区分
听别人讲的同时鼓励大家在别人的idea上进行发展，直接记录在条上
把相同的贴在一起
存档
所有有价值的贴在一起，拍照记录
整理所有接触点
确定深度
信息架构确定广度，用户流程确认深度
达到平衡
0 条评论
下一页
