目前交互设计互联网产品中应状况
交互设计提高产品性国互联网行业中建立认识基础交互设计普遍接受产品设计开始时候应该先交互啊~~项目没交互啊~~类说法越越然信息交互设计工作底应该做提高产品性？通常互联网产品研发中交互设计工作处没方法状况
理解交互设计
交互设计设计工作
交互设计门技术
交互设计目前阶段命提高产品性
通界面操作行设计提高产品性
互联网产品特点
1变化快
2质量低
3功操作信息传达重
4高速创新带标准
互联网产品交互设计应该做？
互联网产品交互设计方法分享
长期摸索体会腾讯互联网产品总结出较效设计方法：
方法 然语言法设计交互细节方法
方法二 结构图法设计产品信息构架方法
方法三 务走查法现产品进行优化方法全面普查产品包括交互细节信息构架
三方法思路基交互设计工作容分类：
1 信息构架
2 交互细节
严格说样理解交互设计工作原交互细节工作外信息构架师解决信息构架问题然面提互联网产品快特点更研发步骤显然更容易研发周期拖更长信息构架工作交互细节合起减少环节更适应互联网产品研发特点
什信息构架工作交产品理做呢？果说交互设计工作核心表达（观念会提）信息构架交互细节表达重手段信息构架清楚产品谈表达清楚明确呢交互设计工作包含两部分：信息构架交互细节
面开始具体介绍三方法：
方法 然语言法
然语言表达页面信息
设计界面交互细节方法
界面表达求：清晰明确简洁体
想象着面面交流传达信息面面传达变书面表达界面语言翻译书面表达
思路需必备原常表达方式具体操作步骤
页面表达原：
1 更少信息量更
2 结构化更易理解
3 信息表达应该清楚明确直接
4 操作识
5 操作前结果预知
6 操作时操作反馈
7 操作操作撤销
8 户知道身处
9 避免容象广告
10 提供余功
11 相功页面中应保持致性
12 措辞统
常页面表达方式：
1 左右
2 字更突出
3 图形更吸引
4 动画会误认广告
5 容逻辑：列关系属关系
6项列信息
7排序方式VS筛选容
具体操作
第步 概括表达信息
第二步 概括信息排序
第三步 界面语言翻译
实例：中信银行卡
第步 概括信息：
描述应该概括简短例：
● 您选择回邮方式办卡概括解释办卡方式
● 接您应该 载申请表
● 回邮办卡全程样…
● 系列注意事项
第二步 排序：
面序没变化
时候排序会遇困难需助界面语言准确反应表达序正界面设计价值胜单纯适文字表达表达情况面黄钻续费案例中许会遇类似问题遇种问题时记录排序遇问题翻译程中问题解决掉
第三步 翻译：
前界面：
● 开头句信息序需整理文关系更清晰
● 程描述简化
● 说明应更结构化
里说界面前前需求文档中相具象页面原型意味着里工作优化页面原型需求传达总会定形式许简单页面原型许份需求文档甚更简单时相具象化信息记录前页面反会干扰设计者明确思路设计尤需心
种成型方法意味着设计出页面样子实际设计者方法会设计出页面面外位设计师出思路许更方案：
1 您选择回邮方式办卡概括解释办卡方式
2 第步 载填写申请表回邮中信
3 第二步……………………
4 第四步……………………
样信息概括排序页面表现什样子？试着画画~~
练：QQ空间黄钻催费页面
说明：
黄钻贵族QQ空间中VIP户黄钻贵族户免费适空间中装扮外享受日志信纸超容量相册等诸特权
户黄钻贵族身份期时候QQ聊天面板钱包提示：钱包闪动点击490*300px窗口告知户续费详情
左侧图片实际页面中flash动画干张图片切换显示黄钻户装扮出更空间效果
右侧续费方式希续费方式中选择出两三种较常方式直接显示出（现页面家庭网吧两种方式）方便户时提供支付中心链接（httppaycenterqqcomcgibinshowopenservicecgiservice_typehome）户全部续费方式中选择
请面介绍然语言法重新设计界面信息表达更高效清晰明确
参考方案
需表达信息：
● 某某某您黄钻期
● 黄钻贵族棒滴~~
● 现续费黄钻额外优惠
● 续费方式…
更信息：
● 某某某您黄钻期
● 您黄钻XXXXX损失啦~~
● 现续费黄钻额外优惠
● 续费方式…
总结然语言法
然语言法基思路界面表达转化然交流交流天会发生相更容易技更容易提高
里涉两例子较偏信息表达操作较界面方法旧适
方法二 结构图法
方法思路：抛开页面细节考虑信息组织形式抛开页面细节面讨具体页面细节考虑信息整体构架页面细节留确定信息构架然语言法解决
信息构架原：
1 页面容
2 信息&公信息
3 网页基容两种：列表文档
4 更少信息更
5 户生成容document页两状态：浏览状态&编辑状态
6 信息树应该量窄浅量保持衡
7 现实生活验相符
l ● 页面网站中需固定位置
l ● 等级容应表现成列样子
……
信息构架常见模型：
1 列表+详情页+列表聚合页
2 Wizard模式第步>第二步>第三步…
3 页+干时页面例：google帐户
具体操作
第步 明确描述全部容总结纳产品需表达信息
第二步 画树状图
第三步 纸画页草图草图中需包含关键元素：页面标题导航重链接钮
第四步 模拟演示网页操作行
实例：黄钻等级
第步 总结纳容：
● 户黄钻等级信息
● 等级介绍
● 黄钻功特权介绍
● 黄钻贵族免费领取道具
● 黄钻活动
第二步 树状图：
果单纯面概括信息罗列规划出黄钻贵族网站树状图：
然信息构架设计建立现产品深刻理解基础
Qzone现状：社区成千万空间现基础设计新黄钻等级？
方案样：
第三步 草图：
里需强调：纸原型中应包括页面标题模块标题导航重链接钮页面顶端导航重链接钮清楚演示出页面间跳转关系
第四步 手握原型演示页面间跳转确保整流程畅
练：QQ空间日志心情私密记事
参考方案
总结纳容：
1 日志
2 心情
3 私密记事
树状图：
方案：
● 页
● 日志
■ 日志
■ 心情
■ 私密记事
● 音乐盒
● 留言板
● 相册
……
方案二：
● 页
● 日志
● 心情
● 私密记事
● 音乐盒
● 留言板
● 相册
…
根面两种树状图方案接页面草图会试着画画…
方法三 务走查法
种优化现产品方法成低见效快产品整体影响
户务线索性准说话记类似事实法律准绳
户务指户实际产品时需完成务方法中需操作者观判断制定户务通户研究然造成更误差时节约时间成实际工作中参产品设计学坐起讨通常较准确描述出户务
性准方法中指：页面表达原信息构架原视觉表现规范三部分页面表达原信息构架原前面提视觉表现规范专门针视觉设计制定方法处理问题现产品产品原型更视觉表现环视觉设计程中出现问题应该走查中起发现
视觉表现规范
1 滚动条应该象滚动条
2 表单齐方式
3 重容显示第屏
4 导航应出现第屏半部分
5 量避免装饰性图标
6 避免容象广告
7 光标样式
8 Tab需三种状态两种
9 红色表示警示绿色表示ok黄色表示提示
10 灰色通常表示暂（disabled）
具体操作
第步 分析总结务
第二步 根务进行评估
评估中需注意：
1 影响务问题记录
2 记录缺陷根（根性准）根感觉
实例：QQ秀快速换装
第步 务列表：
● 换套新形象
● 换表情
● 换心情
● 便逛逛
● 换前形象
第二步 评估换心情务例：
问题1 副标题表意明确
描述：
句说明旧没说明里什功果通句话说明：里添加文字容显露您心情说明效果会更友知道字没没传达信息量
：页面表达原：信息表达应该清楚明确直接
问题2 请输入心情秀表意明
描述：
请输入心情秀文字实第二层表达信息第层应该：里没输入文字没第句直接第二句需户花时间推断推断出里显示请输入心情秀文字没写文字进
：页面表达原：信息表达应该清楚明确直接
问题3 拖动心情秀时光标正确
描述：
光标框中link手型实际应该十字箭头现会误解点击操作
：视觉表现规范：光标
问题4 心情秀概念清
描述：
心情秀预览暗示出心情秀指外框+文字容
换心情秀功换框意味着心情秀指外框
措辞含混名词出现两种定义易理解然心情秀
指外框+文字容点击中文字容会变化？
：页面表达原：措辞统
问题5 换心情秀外框操作便
描述：
操作方便预览图法确定前选项全部框列表中处位置
：页面表达原：操作结果预知
问题6 预览钮视觉效果佳
描述：
预览钮视觉样式较象disabled
：灰色通常表示暂（disabled）
问题7 脱掉钮易找
描述：
脱掉钮框角时候文字超
：页面表达原：信息表达应该清楚明确直接
练1：QQ秀相馆
练2：Qzone滔滔心情
总结务走查法：
什强调务类似保存形象钮太难啦~~类问题应该提出户实际时候问题远远误预览钮点击重务确保评估更接真实
务时候栏目差务优点：
1 cover栏目间跳转出现问题
2 抓住重点问题放关紧问题：申请红钻钮
总结务程实际简化物角色情景描述务分解方法
总结
狭义交互设计定义交互设计务：表达通清晰准确简洁表达进实现机交互
互联网产品交互设计应该做问题演化成：互联网产品应该表达
方法紧紧围绕着什样方法产品表达更效核心展开
let’s talk
let’s talk
let’s talk
……
( 注：文UPA user friendy 2008中持名工作坊讲稿
附PPT文档：互联网产品交互设计方法ppt )
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
交互设计提高产品性国互联网行业中建立认识基础交互设计普遍接受产品设计开始时候应该先交互啊~~项目没交互啊~~类说法越越然信息交互设计工作底应该做提高产品性？通常互联网产品研发中交互设计工作处没方法状况
理解交互设计
交互设计设计工作
交互设计门技术
交互设计目前阶段命提高产品性
通界面操作行设计提高产品性
互联网产品特点
1变化快
2质量低
3功操作信息传达重
4高速创新带标准
互联网产品交互设计应该做？
互联网产品交互设计方法分享
长期摸索体会腾讯互联网产品总结出较效设计方法：
方法 然语言法设计交互细节方法
方法二 结构图法设计产品信息构架方法
方法三 务走查法现产品进行优化方法全面普查产品包括交互细节信息构架
三方法思路基交互设计工作容分类：
1 信息构架
2 交互细节
严格说样理解交互设计工作原交互细节工作外信息构架师解决信息构架问题然面提互联网产品快特点更研发步骤显然更容易研发周期拖更长信息构架工作交互细节合起减少环节更适应互联网产品研发特点
什信息构架工作交产品理做呢？果说交互设计工作核心表达（观念会提）信息构架交互细节表达重手段信息构架清楚产品谈表达清楚明确呢交互设计工作包含两部分：信息构架交互细节
面开始具体介绍三方法：
方法 然语言法
然语言表达页面信息
设计界面交互细节方法
界面表达求：清晰明确简洁体
想象着面面交流传达信息面面传达变书面表达界面语言翻译书面表达
思路需必备原常表达方式具体操作步骤
页面表达原：
1 更少信息量更
2 结构化更易理解
3 信息表达应该清楚明确直接
4 操作识
5 操作前结果预知
6 操作时操作反馈
7 操作操作撤销
8 户知道身处
9 避免容象广告
10 提供余功
11 相功页面中应保持致性
12 措辞统
常页面表达方式：
1 左右
2 字更突出
3 图形更吸引
4 动画会误认广告
5 容逻辑：列关系属关系
6项列信息
7排序方式VS筛选容
具体操作
第步 概括表达信息
第二步 概括信息排序
第三步 界面语言翻译
实例：中信银行卡
第步 概括信息：
描述应该概括简短例：
● 您选择回邮方式办卡概括解释办卡方式
● 接您应该 载申请表
● 回邮办卡全程样…
● 系列注意事项
第二步 排序：
面序没变化
时候排序会遇困难需助界面语言准确反应表达序正界面设计价值胜单纯适文字表达表达情况面黄钻续费案例中许会遇类似问题遇种问题时记录排序遇问题翻译程中问题解决掉
第三步 翻译：
前界面：
● 开头句信息序需整理文关系更清晰
● 程描述简化
● 说明应更结构化
里说界面前前需求文档中相具象页面原型意味着里工作优化页面原型需求传达总会定形式许简单页面原型许份需求文档甚更简单时相具象化信息记录前页面反会干扰设计者明确思路设计尤需心
种成型方法意味着设计出页面样子实际设计者方法会设计出页面面外位设计师出思路许更方案：
1 您选择回邮方式办卡概括解释办卡方式
2 第步 载填写申请表回邮中信
3 第二步……………………
4 第四步……………………
样信息概括排序页面表现什样子？试着画画~~
练：QQ空间黄钻催费页面
说明：
黄钻贵族QQ空间中VIP户黄钻贵族户免费适空间中装扮外享受日志信纸超容量相册等诸特权
户黄钻贵族身份期时候QQ聊天面板钱包提示：钱包闪动点击490*300px窗口告知户续费详情
左侧图片实际页面中flash动画干张图片切换显示黄钻户装扮出更空间效果
右侧续费方式希续费方式中选择出两三种较常方式直接显示出（现页面家庭网吧两种方式）方便户时提供支付中心链接（httppaycenterqqcomcgibinshowopenservicecgiservice_typehome）户全部续费方式中选择
请面介绍然语言法重新设计界面信息表达更高效清晰明确
参考方案
需表达信息：
● 某某某您黄钻期
● 黄钻贵族棒滴~~
● 现续费黄钻额外优惠
● 续费方式…
更信息：
● 某某某您黄钻期
● 您黄钻XXXXX损失啦~~
● 现续费黄钻额外优惠
● 续费方式…
总结然语言法
然语言法基思路界面表达转化然交流交流天会发生相更容易技更容易提高
里涉两例子较偏信息表达操作较界面方法旧适
方法二 结构图法
方法思路：抛开页面细节考虑信息组织形式抛开页面细节面讨具体页面细节考虑信息整体构架页面细节留确定信息构架然语言法解决
信息构架原：
1 页面容
2 信息&公信息
3 网页基容两种：列表文档
4 更少信息更
5 户生成容document页两状态：浏览状态&编辑状态
6 信息树应该量窄浅量保持衡
7 现实生活验相符
l ● 页面网站中需固定位置
l ● 等级容应表现成列样子
……
信息构架常见模型：
1 列表+详情页+列表聚合页
2 Wizard模式第步>第二步>第三步…
3 页+干时页面例：google帐户
具体操作
第步 明确描述全部容总结纳产品需表达信息
第二步 画树状图
第三步 纸画页草图草图中需包含关键元素：页面标题导航重链接钮
第四步 模拟演示网页操作行
实例：黄钻等级
第步 总结纳容：
● 户黄钻等级信息
● 等级介绍
● 黄钻功特权介绍
● 黄钻贵族免费领取道具
● 黄钻活动
第二步 树状图：
果单纯面概括信息罗列规划出黄钻贵族网站树状图：
然信息构架设计建立现产品深刻理解基础
Qzone现状：社区成千万空间现基础设计新黄钻等级？
方案样：
第三步 草图：
里需强调：纸原型中应包括页面标题模块标题导航重链接钮页面顶端导航重链接钮清楚演示出页面间跳转关系
第四步 手握原型演示页面间跳转确保整流程畅
练：QQ空间日志心情私密记事
参考方案
总结纳容：
1 日志
2 心情
3 私密记事
树状图：
方案：
● 页
● 日志
■ 日志
■ 心情
■ 私密记事
● 音乐盒
● 留言板
● 相册
……
方案二：
● 页
● 日志
● 心情
● 私密记事
● 音乐盒
● 留言板
● 相册
…
根面两种树状图方案接页面草图会试着画画…
方法三 务走查法
种优化现产品方法成低见效快产品整体影响
户务线索性准说话记类似事实法律准绳
户务指户实际产品时需完成务方法中需操作者观判断制定户务通户研究然造成更误差时节约时间成实际工作中参产品设计学坐起讨通常较准确描述出户务
性准方法中指：页面表达原信息构架原视觉表现规范三部分页面表达原信息构架原前面提视觉表现规范专门针视觉设计制定方法处理问题现产品产品原型更视觉表现环视觉设计程中出现问题应该走查中起发现
视觉表现规范
1 滚动条应该象滚动条
2 表单齐方式
3 重容显示第屏
4 导航应出现第屏半部分
5 量避免装饰性图标
6 避免容象广告
7 光标样式
8 Tab需三种状态两种
9 红色表示警示绿色表示ok黄色表示提示
10 灰色通常表示暂（disabled）
具体操作
第步 分析总结务
第二步 根务进行评估
评估中需注意：
1 影响务问题记录
2 记录缺陷根（根性准）根感觉
实例：QQ秀快速换装
第步 务列表：
● 换套新形象
● 换表情
● 换心情
● 便逛逛
● 换前形象
第二步 评估换心情务例：
问题1 副标题表意明确
描述：
句说明旧没说明里什功果通句话说明：里添加文字容显露您心情说明效果会更友知道字没没传达信息量
：页面表达原：信息表达应该清楚明确直接
问题2 请输入心情秀表意明
描述：
请输入心情秀文字实第二层表达信息第层应该：里没输入文字没第句直接第二句需户花时间推断推断出里显示请输入心情秀文字没写文字进
：页面表达原：信息表达应该清楚明确直接
问题3 拖动心情秀时光标正确
描述：
光标框中link手型实际应该十字箭头现会误解点击操作
：视觉表现规范：光标
问题4 心情秀概念清
描述：
心情秀预览暗示出心情秀指外框+文字容
换心情秀功换框意味着心情秀指外框
措辞含混名词出现两种定义易理解然心情秀
指外框+文字容点击中文字容会变化？
：页面表达原：措辞统
问题5 换心情秀外框操作便
描述：
操作方便预览图法确定前选项全部框列表中处位置
：页面表达原：操作结果预知
问题6 预览钮视觉效果佳
描述：
预览钮视觉样式较象disabled
：灰色通常表示暂（disabled）
问题7 脱掉钮易找
描述：
脱掉钮框角时候文字超
：页面表达原：信息表达应该清楚明确直接
练1：QQ秀相馆
练2：Qzone滔滔心情
总结务走查法：
什强调务类似保存形象钮太难啦~~类问题应该提出户实际时候问题远远误预览钮点击重务确保评估更接真实
务时候栏目差务优点：
1 cover栏目间跳转出现问题
2 抓住重点问题放关紧问题：申请红钻钮
总结务程实际简化物角色情景描述务分解方法
总结
狭义交互设计定义交互设计务：表达通清晰准确简洁表达进实现机交互
互联网产品交互设计应该做问题演化成：互联网产品应该表达
方法紧紧围绕着什样方法产品表达更效核心展开
let’s talk
let’s talk
let’s talk
……
( 注：文UPA user friendy 2008中持名工作坊讲稿
附PPT文档：互联网产品交互设计方法ppt )
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
