SlideShare a Scribd company logo
瞬间的设计 Designing for Interesting Moments
都有哪些交互瞬间?
 
都有哪些交互瞬间?
页面加载。 鼠标悬停。鼠标点击。 开始拖拽前。 拖拽离开原来的位置。拖拽重新进入原来的位置。拖拽进入到可存放的区域。拖拽退出可存放的区域。 拖拽进入到非操作的区域。拖拽出现在具体区域。 拖拽到其他的控件之上。 接受放置。拒绝放置。 放置于新容器中。 16 + 交互事件 都有哪些交互瞬间?
页面。  模块。 光标。  模块存放区。   提示。  模块放置区。 6 + 交互对象 都有哪些交互瞬间?
交互 对象 交互事件 种有趣的交互瞬间
有趣的交互瞬间 鼠标悬停  鼠标移开  开始拖拽前  放置 拖拽进入无 效的区域 鼠标 模块 模块 存放区 模块 放置区 变成手的形状 淡淡的透明效果 移动模块 用灰色的虚线显 示空白区域 空白区域(灰色, 虚线框)移动到新 的拖放点,其他模 块自动移动到最近 的空白区 移动区域 模块移动到新位置 变成回原来的状态
有趣的交互瞬间 鼠标悬停  鼠标移开  开始拖拽前  放置 拖拽进入无 效的区域 鼠标 模块 模块 存放区 模块 放置区 变成手的形状 淡淡的透明效果 移动模块 用灰色的虚线显 示空白区域 空白区域(灰色, 虚线框)移动到新 的拖放点,其他模 块自动移动到最近 的空白区 移动区域 模块移动到新位置 变成回原来的状态
有趣的交互瞬间 变成回原来的状态 鼠标悬停  鼠标移开  开始拖拽  允许放置 拖拽进入无 效的区域 鼠标 模块 模块 存放区 模块 放置区 变成手的形状 淡淡的透明效果 移动模块 用灰色的虚线显 示空白区域 空白区域(灰色, 虚线框)移动到新 的拖放点,其他模 块自动移动到最近 的空白区 移动区域 模块移动到新位置
有趣的交互瞬间 鼠标悬停  鼠标移开  开始拖拽  允许放置 拖拽进入无 效的区域 鼠标 模块 模块 存放区 模块 放置区 变成手的形状 淡淡的透明效果 移动模块 用灰色的虚线显 示空白区域 空白区域(灰色, 虚线框)移动到新 的拖放点,其他模 块自动移动到最近 的空白区 移动区域 模块移动到新位置 变成回原来的状态
有趣的交互瞬间 鼠标悬停  鼠标移开  开始拖拽  允许放置 拖拽进入无 效的区域 鼠标 模块 模块 存放区 模块 放置区 变成手的形状 淡淡的透明效果 移动模块 用灰色的虚线显 示空白区域 空白区域(灰色, 虚线框)移动到新 的拖放点,其他模 块自动移动到最近 的空白区 移动区域 模块移动到新位置 变成回原来的状态
有趣的交互瞬间 鼠标悬停  鼠标移开  开始拖拽  允许放置 拖拽进入无 效的区域 鼠标 模块 模块 存放区 模块 放置区 变成手的形状 淡淡的透明效果 移动模块 用灰色的虚线显 示空白区域 空白区域(灰色, 虚线框)移动到新 的拖放点,其他模 块自动移动到最近 的空白区 移动区域 模块移动到新位置 变成回原来的状态
[object Object],[object Object],[object Object],[object Object]
6 个原则
一、直接操纵原则
在当前页面编辑
有趣的瞬间 页面 加载 无编辑: -  鼠标 进入( mouse-in ) 编辑区 -  鼠标 移出( mouse-out ) 编辑区 -  鼠标 点击( click ) 编辑区 编辑: -  鼠标 聚焦 在编辑区 -  鼠标 点击 外部区域   在当前页面编辑
分析交互瞬间 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 2 2 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 2 2 3 3 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 2 2 3 4 3 4 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 2 5 2 3 4 3 4 5 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 2 5 2 3 4 3 4 5 6 6 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
1 分析交互瞬间 1 2 5 2 3 4 3 4 5 6 7 6 7 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮,“保存” & “ 取消”按钮 光标 自动清除全选内 容,边框高亮, 黑色字体, “保 存”“取消”按钮 链接 “ 保存”提示 , 内容更新
回顾一下… 按钮 提示 点击后进行 编辑 显示“保存” / “ 取消”按钮 显示“保存” / “ 取消”按钮 隐藏按钮 编辑:点击 “ 保存”按钮 显示“保存”信息 更新内容 默认 页面加载 鼠标 编辑区 无编辑: 鼠标进入 (mouse-in) 无编辑: 鼠标移出 ( mouse-out ) 鼠标点击 ( click ) 编辑: 鼠标聚焦 ( focus ) 编辑: 鼠标点击 其他区域 隐藏编辑区 光标 淡黄色背景 气泡提示 默认 1 秒钟后背 景消失 光标 全选,边框高 亮 光标 自动清除全选内 容,边框高亮, 黑色字体 链接 “ 保存”提示 , 内容更新
回顾一下… ,[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]
二、保持轻量级
留下清晰的足迹
早期的版本 Digg 1.0 总是可见的工具
早期的版本 Digg 1.0 总是可见的工具
早期的版本 Digg 1.0 总是可见的工具
早期的版本 Digg 1.0 总是可见的工具 用于主要操作
Digg 总是可见的工具
Digg 豆瓣 总是可见的工具
Digg shutterstock 总是可见的工具 豆瓣
Digg shutterstock 降低操作的难度 • 交互步骤 • 决策时间 • 寻找时间 • 引起歧义 • 等待时间 总是可见的工具 豆瓣
保证关键内容可见 Gmail
保证关键内容可见 Gmail 使用备选的方案保证可读性
保证关键内容可见(鼠标悬停) 淘宝 listing 多信息和交互性的平衡
Linkdin 鼠标悬停的延迟时间 0.5 秒 和时间相关的任务是很复杂的 只做一件事情
Amazon 只做一件事情
Amazon 只做一件事情 Hover :显示打分信息 Click :显示评价详情页面
Amazon 只做一件事情 Hover :显示打分信息 Click :显示评价详情页面 做好一件事情
适当的时候提示
适当的时候提示
三、不要打断任务流
来玩个小游戏
找茬( 6 个不同点)
找茬( 6 个不同点)
找茬( 6 个不同点)
找茬( 6 个不同点)
再试试
找茬( 6 个不同点)
找茬( 6 个不同点)
找茬( 6 个不同点)
找茬( 6 个不同点) 不要中断任务流 让变化在同一个页面出现
三个重要的交互响应参数 Jakob Nielsen
三个重要的交互响应参数 0.1 秒 1.0 秒 10 秒 不错 有点慢哦 比较难忍 0 受不鸟了 %@#
四个重要的交互响应参数 0.1 秒 1.0 秒 10 秒 不错 有点慢哦 比较难忍 0 受不鸟了 %@# 0.05 秒 完全感觉不到
Gtalk
Gtalk <0.1 秒
Gtalk <0.05 秒
 
用虚拟的视觉效果
缓解长时间的操作疲劳
等待的时间
等待的时间 进度条?
等待的时间 进度条? <1.0 秒  不需要
四、提供引导邀请
 
“ I’m on  Twitter” 4.7%
“ I’m on  Twitter” 4.7% “ Follow me on  Twitter.” 7.31%
“ I’m on  Twitter” 4.7% “ Follow me on  Twitter.” 7.31% “ You should follow me on  Twitter.” 10.09%
“ I’m on  Twitter” 4.7% “ Follow me on  Twitter.” 7.31% “ You should follow me on  Twitter.” 10.09% “ You should follow me on Twitter  here.” 12.81%
“ I’m on  Twitter” 4.7% “ Follow me on  Twitter.” 7.31% “ You should follow me on  Twitter.” 10.09% “ You should follow me on Twitter  here.” 12.81% 使用明确而清晰的话来发起请求
静态邀请
留白
Tour wufoo Yahoo 搜索
拖拽
拖拽
提示
五、过渡转化的使用
渐隐渐亮
展开 / 收起
位置变化
告诉当前的状态
告诉当前的状态 加速等待时间
告诉当前的状态 放慢等待时间
告诉当前的状态 放慢等待时间 提前预览
告诉当前的状态 放慢等待时间 提前预览
告诉当前的状态 放慢等待时间 提前预览
告诉当前的状态 放慢等待时间 建立对应关系 提前预览
六、及时响应
及时翻译
及时预览
及时更新
及时更新
及时校验
及时校验
及时响应 直接操纵原则   保持轻量级 不要打断任务流 不要打断任务流 提供引导邀请 过渡转化的使用
不要打断任务流 6 个月 “  ” “  ” 1 像素 2 小时 “  ”
不要打断任务流 讨论时间 ……

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

瞬间设计

Editor's Notes

  1. 哪里有输入,哪里就有输出
  2. 关于保持的一个轻量级的操作,是因为当用户进行应用程序的交互操作的时候,肯定会有身体或者精神上的消耗。一个首要的方面就是要创建一个轻量级别的贯穿用户使用的上下文的工具
  3. 如 dig 网站的 dig 按钮总是对用户可见
  4. 如 dig 网站的 dig 按钮总是对用户可见
  5. 我们思考一下为什么要设置 0.5 秒的时间延迟。过后我会给大家解释为什么是 0.5 秒
  6. 这个案例是我在做手机绑定的项目中遇到的。现在淘宝有手机登录的方式,但这种服务远远不够。大卖家通常有好几个客服,他需要同时有很多人来管理他的账户。于是就有了主号和子号。为了控制卖家频繁的更换主号码,需要限定更改的时间段是 5 天。希望他在非绑定时间内点击有提示。
  7. 原先的做法,鼠标 hover 上去就显示该提示,后来小裙子说“吓一跳”,才觉得这个操作是中断了用户的操作,给他们带来了多余认知 修改方案:点击后出现。
  8. 在这个过程中我会让大家先看一张图片 10 秒钟,然后我会切换到下一张图片,同样我会给大家 20 秒的时间,看看谁能最先找出这两张图片中的 6 个不同点。
  9. 在这个过程中我会让大家先看一张图片 10 秒钟,然后我会切换到下一张图片,同样我会给大家 20 秒的时间,看看谁能最先找出这两张图片中的 6 个不同点。
  10. 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  11. 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  12. 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  13. 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  14. 微软的 Live 图片搜索使用虚拟滚动来获取额外的搜寻结果
  15. Ted 来自( technolegy , entertament ,和 design 这 3 个单词的首字母)自 1984 年起, ted 一定期的聚会形式聚集技术、娱乐和设计界的人分享比并传播创意。这个视频播放器我们介绍了录制视频发布的具体时间,右上角可以点击进行全屏观看,左下角的播放按钮和声音的开关按钮都设置的非常好。并且还有时间长度和当前播放的时间。在翻译的最下角,它提供了多种翻译字幕让提供给不同国籍的人,便于该视频的传播。还有一个非常细节的设计我相信是设计师经过了很多思考得来的。当视频超过了 16 分钟,他被贴心的分成了数个小章节,用户可以在不同的章节之间来回切换。
  16. 检测安全等级的时候需要时间: 1. 淘宝服务器的运算时间; 2. 用户本地的加载时间 是否需要进度条呢? 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  17. 检测安全等级的时候需要时间: 1. 淘宝服务器的运算时间; 2. 用户本地的加载时间 是否需要进度条呢? 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  18. 检测安全等级的时候需要时间: 1. 淘宝服务器的运算时间; 2. 用户本地的加载时间 是否需要进度条呢? 这三个准则 30 年后的今天依然是不变的。 [Miller 1968; Card et al. 1991]   0.1 秒  是用户判断系统瞬时反应的极限时间,意味着需要在该时间内显示反馈结果。   1.0 秒  是用户保持不间断的思维流的限定时间,即使用户会注意到这样的延迟。通常 , 没有特别的信息反馈延迟超过 0.1 而少于 1 秒 , 但用户确实能直接感觉到这个数据并失去信心。   10 秒   是保持用户关注当前对话框的极限时间。对于长时间的延迟,用户会想在等待计算机完成期间处理其它事务。所以需要反馈显示计算机将要完成的时间。延迟反馈显得尤为重要是因为响应时间经常充满变数,用户不知道该期待什么。
  19. 发现能力对于 RIAweb 来说是一个首要的挑战之一,一个重要的特点就是如果用户不能发现它,那么就是毫无用途滴。 改善提高发现能力的一个主要的途径就是提引导邀请。引导邀请的提示用户下一个级别的交互操作。
  20. Absolutely 网站的设计师,这个是他的一个非常独特的个人 blog ,只发布特定的信息,每个页面的设计都非常棒,而且内容也不一样。而推特是他积累思想和灵感的常用工具,因此在页面的首页都大大的现实了“ follow” 的信息提示和邀请。在这里关于邀请的细节他做了很多尝试,我们不妨来看看。
  21. 静态提示
  22. 静态提示
  23. 通过新的引导发现新的功能
  24. 通过新的引导发现新的功能
  25. 通过新的引导发现新的功能
  26. 用建议或者疑问来引导用户去完成内容。
  27. 动画和过场特效,以及各种各样的可视化过渡 对于加强衔接和交流来说是很强大的技术。
  28. Change focus by brightening and dimming items.
  29. Change focus by brightening and dimming items.
  30. Change focus by brightening and dimming items.
  31. Flickr 的批量上传为了减少用户的等待时间,加入了进度条,而且更贴心的将每个上传时间分割出来,了解每个上传时间。就像我们跑马拉松一样,那么长的距离看着挺吓人,但如果吧路程分成一个一个小目标,也就不觉得困难了。
  32. Igoogle 在页面加载的时候先把每个模块的框架和标题显示出来,减少了用户的等待时间
  33. 这个是 gap 品牌的在线购物网站,他们把购物车放在了页面导航的最顶部
  34. ,当用户选择放入购物车时候,他会自动动画效果展现当前的详情。及时将结果和当前操作对应起来。
  35. Google 翻译会及时校验输入的每一个字母,并进行智能识别,如果发现符合拼写规律,则在左侧显示主要翻译。
  36. 同样是 gap 网站。
  37. 同样是 gap 网站。
  38. 同样是 gap 网站。
  39. 对于新界面中的每个要素——菜单、对话框、按钮等等——乔布斯对于开发中的软件和硬件产品,总是要求有若干不同的方案供他选择。在与瑞茨拉夫的会上,乔布斯会给出改善设计的诸多想法,直到他满意,一个功能才能算是敲定下来。 设计师是用 Macromedia Director 软件制作新界面模型,尽管乔布斯可以开关窗口、下拉菜单,但它毕竟只是动画演示,而不是由代码写就的真实程序。小组将程序代码运行在另一台电脑上,和动画演示的机器并排放在一起。他们运行程序原型给乔布斯看时,乔布斯俯身向前,鼻子几乎贴到了电脑屏幕上,仔细地在程序和动画演示之间进行查验。 “ 乔布斯可以一个像素一个像素地进行对比,来看看是否匹配。”瑞茨拉夫说,“他会一直深入到每个细节里去,详加勘察每一方面到像素的级别上去。若是有出入,“某些工程师可就要挨一顿臭骂了。” 令人难以置信的是,瑞茨拉夫的团队竟然花了 6 个月时间用于细化滚动条,以达到令乔布斯满意的程度。滚动条在任何计算机操作系统里都是很重要的部分,但却从不是用户界面中最显眼的要素。尽管如此,乔布斯还是坚持要对滚动条改成希望的样子,瑞茨拉夫的团队不得不修改了一个版本又一个版本。 开始,设计师们发现总是无法准确实现乔布斯所要的细节。小箭头不是尺寸不对,就是位置不对,要不就是颜色又错了。在窗口处于当前状态或者后台状态时,滚动条还必须呈现出不同的样子。“要在不同运行状态下把这个东西和其他设计要素匹配在一起真的很难。”瑞茨拉夫说道,语气略带疲惫,“我们一直做到对为止。我们在这上面花了好长好长的时间。”
  40. 对于新界面中的每个要素——菜单、对话框、按钮等等——乔布斯对于开发中的软件和硬件产品,总是要求有若干不同的方案供他选择。在与瑞茨拉夫的会上,乔布斯会给出改善设计的诸多想法,直到他满意,一个功能才能算是敲定下来。 设计师是用 Macromedia Director 软件制作新界面模型,尽管乔布斯可以开关窗口、下拉菜单,但它毕竟只是动画演示,而不是由代码写就的真实程序。小组将程序代码运行在另一台电脑上,和动画演示的机器并排放在一起。他们运行程序原型给乔布斯看时,乔布斯俯身向前,鼻子几乎贴到了电脑屏幕上,仔细地在程序和动画演示之间进行查验。 “ 乔布斯可以一个像素一个像素地进行对比,来看看是否匹配。”瑞茨拉夫说,“他会一直深入到每个细节里去,详加勘察每一方面到像素的级别上去。若是有出入,“某些工程师可就要挨一顿臭骂了。” 令人难以置信的是,瑞茨拉夫的团队竟然花了 6 个月时间用于细化滚动条,以达到令乔布斯满意的程度。滚动条在任何计算机操作系统里都是很重要的部分,但却从不是用户界面中最显眼的要素。尽管如此,乔布斯还是坚持要对滚动条改成希望的样子,瑞茨拉夫的团队不得不修改了一个版本又一个版本。 开始,设计师们发现总是无法准确实现乔布斯所要的细节。小箭头不是尺寸不对,就是位置不对,要不就是颜色又错了。在窗口处于当前状态或者后台状态时,滚动条还必须呈现出不同的样子。“要在不同运行状态下把这个东西和其他设计要素匹配在一起真的很难。”瑞茨拉夫说道,语气略带疲惫,“我们一直做到对为止。我们在这上面花了好长好长的时间。”