网页互交设计精髓

网页互交设计精髓

ID:38513962

大小:2.02 MB

页数:105页

时间:2019-06-14

网页互交设计精髓_第1页
网页互交设计精髓_第2页
网页互交设计精髓_第3页
网页互交设计精髓_第4页
网页互交设计精髓_第5页
资源描述:

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

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)编辑:鼠标点击其他区域

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。