SlideShare a Scribd company logo
互联网交互设计方法 臭鱼 2008.10
交互设计重要,但却不知要怎么做。
?
交互设计是什么? ,[object Object],[object Object],[object Object],[object Object]
互联网产品的特点 ,[object Object],[object Object],[object Object],[object Object]
那么, 互联网产品的交互设计应该怎么做?
互联网产品交互设计方法: ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],其实不是这样… ,[object Object],[object Object],[object Object]
互联网产品交互设计方法: ,[object Object],[object Object],[object Object]
自然语言法 ,[object Object],面对面的传达信息 -> 书面表达 -> 界面语言
页面表达原则 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],自然语言法
常用的页面表达方式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],自然语言法
具体操作 ,[object Object],[object Object],[object Object],自然语言法
实例:中信银行卡活动 自然语言法
自然语言法
实例:中信银行卡活动 ,[object Object],[object Object],[object Object],[object Object],[object Object],自然语言法
实例:中信银行卡活动 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],自然语言法
实例:中信银行卡活动 ,[object Object],自然语言法
自然语言法
实例:中信银行卡活动 ,[object Object],[object Object],[object Object],[object Object],[object Object],自然语言法
练习: QQ 空间黄钻催费页面 自然语言法
结构图法 ,[object Object]
信息构架的原则 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],结构图法
信息构架的常见模型 ,[object Object],[object Object],[object Object],结构图法
具体操作 ,[object Object],[object Object],[object Object],[object Object],结构图法
实例:黄钻等级 结构图法
实例:黄钻等级 结构图法
实例:黄钻等级 结构图法
实例:黄钻等级 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],结构图法
实例:黄钻等级 ,[object Object],结构图法
实例:黄钻等级 ,[object Object],结构图法
实例:黄钻等级 ,[object Object],结构图法
实例:黄钻等级 ,[object Object],结构图法
练习: QQ 空间日志 结构图法
练习: QQ 空间日志 ,[object Object],[object Object],[object Object],[object Object],结构图法
任务走查法 ,[object Object],以用户任务为线索,以可用性准则为依据。
可用性准则 ,[object Object],任务走查法
视觉表现规范 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],任务走查法
具体操作 ,[object Object],[object Object],[object Object],[object Object],[object Object],任务走查法
实例: QQ 秀快速换装 任务走查法
实例: QQ 秀快速换装 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],任务走查法
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 页面表达原则:信息的表达应该清楚、明确、直接。 依据 这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明:“在这里添加文字内容,显露您的心情”,说明的效果会更好。至于“让好友都知道!”这几个字几乎是没有用的,没有传达任何信息量。 描述 副标题表意不明确 问题 1
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 页面表达原则:信息的表达应该清楚、明确、直接。 依据 “ 请输入心情秀文字”其实是第二层要表达的信息,第一层应该是:“这里还没有输入文字”。没有第一句,直接是第二句,需要用户花些时间来推断,推断出,这里显示“请输入心情秀文字”是因为自己没有写文字进去。 描述 “ 请输入心情秀”表意不明确 问题 2
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 视觉表现规范:光标样式 依据 拖动预览图中的心情秀时,光标为  应该使用十字箭头。 描述 拖动预览中的心情秀时的光标使用错误 问题 3
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 页面表达原则:措辞统一 依据 “ 心情秀预览”暗示出,“心情秀”是指外框 + 文字内容。 “ 换心情秀”功能只是换框,这意味着“心情秀”是指外框。 措辞上的含混使得同一个概念出现两种不同的定义,不易于理解。最直接的反应是:“既然心情秀是指外框 + 文字内容,那么当我点击 下一个 后,其中的文字内容是不是也会变化?” 描述 “ 心情秀”概念不清 问题 4
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 页面表达原则:操作结果不可预知 依据 “ 上一个”“下一个”的操作不方便。无预览图,无法确定当前选项在全部“框”的列表中所处位置。 描述 换心情秀外框操作不便 问题 5
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 灰色通常表示“暂不可用”( disabled ) 依据 预览按钮视觉样式比较象 disabled  描述 “ 预览”按钮视觉效果不佳 问题 6
实例: QQ 秀快速换装 第二步 .  走查 任务走查法 修改建议 页面表达原则:信息的表达应该清楚、明确、直接。 依据 “ 脱掉”按钮在框的有下角,很多时候看不到,并且文字超小。 描述 “ 脱掉”按钮不易找到 问题 7
练习: QQ 秀 照相馆 任务走查法
练习: QQ 空间 心情 任务走查法
最后最后的总结 交互设计的主要任务是: 表达 。 通过清晰、准确、简洁的表达进而实现人机交互。
最后最后的总结 “ 互联网产品的交互设计应该怎么做?” “ 互联网产品应该如何去表达 ?”
Let’s talk  Let’s talk   Let’s talk   Let’s talk Let’s talk Let’s talk
谢谢 ~~ 臭鱼 2008.10

More Related Content

Viewers also liked

Threats And Responses
Threats And ResponsesThreats And Responses
Threats And Responses
Caroline Chua
 
Nota serah tugas
Nota serah tugasNota serah tugas
Nota serah tugas
University Malaysia Sabah
 
Immigrants N Contribution
Immigrants N ContributionImmigrants N Contribution
Immigrants N Contribution
Caroline Chua
 
Cadangan rpt fizik f4 2015
Cadangan rpt fizik f4 2015Cadangan rpt fizik f4 2015
Cadangan rpt fizik f4 2015
University Malaysia Sabah
 
How Give A Knot Of Tie (Knot In Hand)
How Give A Knot Of Tie (Knot In Hand)How Give A Knot Of Tie (Knot In Hand)
How Give A Knot Of Tie (Knot In Hand)
Marcos De Assis Pereira
 
Pembelajaran pembezaan
Pembelajaran pembezaanPembelajaran pembezaan
Pembelajaran pembezaan
University Malaysia Sabah
 
Sec 2 Hist Mye 08 (Qn & Ans For Sharing)
Sec 2 Hist Mye 08 (Qn & Ans For Sharing)Sec 2 Hist Mye 08 (Qn & Ans For Sharing)
Sec 2 Hist Mye 08 (Qn & Ans For Sharing)
Caroline Chua
 
Korean War
Korean WarKorean War
Korean War
Caroline Chua
 

Viewers also liked (8)

Threats And Responses
Threats And ResponsesThreats And Responses
Threats And Responses
 
Nota serah tugas
Nota serah tugasNota serah tugas
Nota serah tugas
 
Immigrants N Contribution
Immigrants N ContributionImmigrants N Contribution
Immigrants N Contribution
 
Cadangan rpt fizik f4 2015
Cadangan rpt fizik f4 2015Cadangan rpt fizik f4 2015
Cadangan rpt fizik f4 2015
 
How Give A Knot Of Tie (Knot In Hand)
How Give A Knot Of Tie (Knot In Hand)How Give A Knot Of Tie (Knot In Hand)
How Give A Knot Of Tie (Knot In Hand)
 
Pembelajaran pembezaan
Pembelajaran pembezaanPembelajaran pembezaan
Pembelajaran pembezaan
 
Sec 2 Hist Mye 08 (Qn & Ans For Sharing)
Sec 2 Hist Mye 08 (Qn & Ans For Sharing)Sec 2 Hist Mye 08 (Qn & Ans For Sharing)
Sec 2 Hist Mye 08 (Qn & Ans For Sharing)
 
Korean War
Korean WarKorean War
Korean War
 

Similar to 互联网交互设计方法

IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现
IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现
IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现
IxDC
 
从人物角色到设计呈现
从人物角色到设计呈现从人物角色到设计呈现
从人物角色到设计呈现canouyang
 
Web信息架构
Web信息架构Web信息架构
Web信息架构rex song
 
社会化网络设计的10大要点
社会化网络设计的10大要点社会化网络设计的10大要点
社会化网络设计的10大要点
puting
 
运营干什么
运营干什么运营干什么
运营干什么
glass4pk
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
Abby Chiu
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
grey0511
 
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
悠識學院
 
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comDjt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comdrewz lin
 
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comDjt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comdrewz lin
 
簡報規劃與技巧
簡報規劃與技巧簡報規劃與技巧
簡報規劃與技巧
基欽 劉
 
互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share
suilingbo
 
网络课程评价
网络课程评价网络课程评价
网络课程评价
tianyalu
 
Web设计 1 创建好看的网页(布局与设计)
Web设计 1 创建好看的网页(布局与设计)Web设计 1 创建好看的网页(布局与设计)
Web设计 1 创建好看的网页(布局与设计)ziggear
 
A new way to use Wikipedia for collaborative innovation"
 A new way to use Wikipedia for collaborative innovation" A new way to use Wikipedia for collaborative innovation"
A new way to use Wikipedia for collaborative innovation"
TEDxFuzhou
 
重构 这一路走来
重构 这一路走来重构 这一路走来
重构 这一路走来Webrebuild
 
育儿塘 app design for ipad
育儿塘 app design for ipad育儿塘 app design for ipad
育儿塘 app design for ipadGinger Yu
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
Abby Chiu
 
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
iflytek
 
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)yihuixue
 

Similar to 互联网交互设计方法 (20)

IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现
IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现
IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现
 
从人物角色到设计呈现
从人物角色到设计呈现从人物角色到设计呈现
从人物角色到设计呈现
 
Web信息架构
Web信息架构Web信息架构
Web信息架构
 
社会化网络设计的10大要点
社会化网络设计的10大要点社会化网络设计的10大要点
社会化网络设计的10大要点
 
运营干什么
运营干什么运营干什么
运营干什么
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
 
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
 
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comDjt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
 
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comDjt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
 
簡報規劃與技巧
簡報規劃與技巧簡報規劃與技巧
簡報規劃與技巧
 
互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share互联网分析师必备—金字塔原理 Share
互联网分析师必备—金字塔原理 Share
 
网络课程评价
网络课程评价网络课程评价
网络课程评价
 
Web设计 1 创建好看的网页(布局与设计)
Web设计 1 创建好看的网页(布局与设计)Web设计 1 创建好看的网页(布局与设计)
Web设计 1 创建好看的网页(布局与设计)
 
A new way to use Wikipedia for collaborative innovation"
 A new way to use Wikipedia for collaborative innovation" A new way to use Wikipedia for collaborative innovation"
A new way to use Wikipedia for collaborative innovation"
 
重构 这一路走来
重构 这一路走来重构 这一路走来
重构 这一路走来
 
育儿塘 app design for ipad
育儿塘 app design for ipad育儿塘 app design for ipad
育儿塘 app design for ipad
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
 
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
 
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
产品设计与用户体验Good(来自腾讯ceo马化腾的ppt)
 

互联网交互设计方法