网页互交设计精髓

《网页互交设计精髓》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、瞬间的设计DesigningforInterestingMomentswww.bjjayy.com都有哪些交互瞬间？都有哪些交互瞬间？页面加载。鼠标悬停。鼠标点击。开始拖拽前。拖拽离开原来的位置。拖拽重新进入原来的位置。拖拽进入到可存放的区域。拖拽退出可存放的区域。拖拽进入到非操作的区域。拖拽出现在具体区域。拖拽到其他的控件之上。接受放置。拒绝放置。放置于新容器中。16+交互事件都有哪些交互瞬间？页面。模块。光标。模块存放区。提示。模块放置区。6+交互对象都有哪些交互瞬间？交互对象交互事件种有趣的交互瞬间有趣的交互瞬间鼠标悬停鼠

2、标移开开始拖拽前放置拖拽进入无效的区域鼠标模块模块存放区模块放置区变成手的形状淡淡的透明效果移动模块用灰色的虚线显示空白区域空白区域（灰色，虚线框）移动到新的拖放点，其他模块自动移动到最近的空白区移动区域模块移动到新位置变成回原来的状态有趣的交互瞬间鼠标悬停鼠标移开开始拖拽前放置拖拽进入无效的区域鼠标模块模块存放区模块放置区变成手的形状淡淡的透明效果移动模块用灰色的虚线显示空白区域空白区域（灰色，虚线框）移动到新的拖放点，其他模块自动移动到最近的空白区移动区域模块移动到新位置变成回原来的状态有趣的交互瞬间鼠标悬停鼠标移开开始拖拽

3、允许放置拖拽进入无效的区域鼠标模块模块存放区模块放置区变成手的形状淡淡的透明效果移动模块用灰色的虚线显示空白区域空白区域（灰色，虚线框）移动到新的拖放点，其他模块自动移动到最近的空白区移动区域模块移动到新位置变成回原来的状态有趣的交互瞬间鼠标悬停鼠标移开开始拖拽允许放置拖拽进入无效的区域鼠标模块模块存放区模块放置区变成手的形状淡淡的透明效果移动模块用灰色的虚线显示空白区域空白区域（灰色，虚线框）移动到新的拖放点，其他模块自动移动到最近的空白区移动区域模块移动到新位置变成回原来的状态有趣的交互瞬间鼠标悬停鼠标移开开始拖拽允许放置拖

4、拽进入无效的区域鼠标模块模块存放区模块放置区变成手的形状淡淡的透明效果移动模块用灰色的虚线显示空白区域空白区域（灰色，虚线框）移动到新的拖放点，其他模块自动移动到最近的空白区移动区域模块移动到新位置变成回原来的状态有趣的交互瞬间鼠标悬停鼠标移开开始拖拽允许放置拖拽进入无效的区域鼠标模块模块存放区模块放置区变成手的形状淡淡的透明效果移动模块用灰色的虚线显示空白区域空白区域（灰色，虚线框）移动到新的拖放点，其他模块自动移动到最近的空白区移动区域模块移动到新位置变成回原来的状态交互瞬间捕捉分秒的响应关注微妙的细节想象各种可能性6个原则

5、一、直接操纵原则在当前页面编辑有趣的瞬间页面加载无编辑：-鼠标进入（mouse-in）编辑区-鼠标移出（mouse-out）编辑区-鼠标点击（click）编辑区编辑：-鼠标聚焦在编辑区-鼠标点击外部区域在当前页面编辑分析交互瞬间页面加载鼠标编辑区无编辑：鼠标进入(mouse-in)无编辑：鼠标移出（mouse-out）鼠标点击（click）编辑：鼠标聚焦（focus）编辑：鼠标点击其他区域隐藏编辑区光标淡黄色背景气泡提示默认1秒钟后背景消失光标全选，边框高亮，“保存”&“取消”按钮光标自动清除全选内容，边框高亮，黑色字体，“保存

6、”“取消”按钮链接“保存”提示,内容更新1分析交互瞬间1页面加载鼠标编辑区无编辑：鼠标进入(mouse-in)无编辑：鼠标移出（mouse-out）鼠标点击（click）编辑：鼠标聚焦（focus）编辑：鼠标点击其他区域隐藏编辑区光标淡黄色背景气泡提示默认1秒钟后背景消失光标全选，边框高亮，“保存”&“取消”按钮光标自动清除全选内容，边框高亮，黑色字体，“保存”“取消”按钮链接“保存”提示,内容更新1分析交互瞬间122页面加载鼠标编辑区无编辑：鼠标进入(mouse-in)无编辑：鼠标移出（mouse-out）鼠标点击（click

7、）编辑：鼠标聚焦（focus）编辑：鼠标点击其他区域隐藏编辑区光标淡黄色背景气泡提示默认1秒钟后背景消失光标全选，边框高亮，“保存”&“取消”按钮光标自动清除全选内容，边框高亮，黑色字体，“保存”“取消”按钮链接“保存”提示,内容更新1分析交互瞬间12233页面加载鼠标编辑区无编辑：鼠标进入(mouse-in)无编辑：鼠标移出（mouse-out）鼠标点击（click）编辑：鼠标聚焦（focus）编辑：鼠标点击其他区域隐藏编辑区光标淡黄色背景气泡提示默认1秒钟后背景消失光标全选，边框高亮，“保存”&“取消”按钮光标自动清除全选内

8、容，边框高亮，黑色字体，“保存”“取消”按钮链接“保存”提示,内容更新1分析交互瞬间1223434页面加载鼠标编辑区无编辑：鼠标进入(mouse-in)无编辑：鼠标移出（mouse-out）鼠标点击（click）编辑：鼠标聚焦（focus）编辑：鼠标点击其他区域