交互设计中的三个实用技巧

不懂事孩童

不懂事孩童

2016-02-17 04:17

下面是个超简单的交互设计中的三个实用技巧教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

网上有很多现成的交互设计实例,只要细心观察总结,可以发现许多常用的技巧,本文总结三个在许多网站上都能见到的交互设计方法,如果经常关注交互设计的话,你一定见到过这些类型的交互应用。

交互设计,表现出来的呈现方式可谓是多种多样,

不过你只要掌握好了以下三点的使用技巧,同样可能轻松打造出良好的交互设计效果。

1.响应

对即将产生交互内容的区域提供给操作者一种响应机制。

参考实例:http://glyde.com

交互设计中的三个实用技巧,PS教程,图老师教程网

不同的内容有很多响应的处理方法,

比如:链接加个下划线,图片链接变换下外边框颜色,

鼠标划过某区域,变化下背景色,同时出现一些隐性的操作按钮,如删除操作等。

注意:忌讳因为某区块产生响应,而让其它区块边界产生生硬的错位。

交互设计中的三个实用技巧,PS教程,图老师教程网

2.过渡过程或转场效果

对即将产生的交互变化,提供一个过渡过程或转场的效果。

过渡过程,如:延时移动、淡入淡出等。

转场效果,如:滑动、门开关、缩放、翻转等。

参考实例:http://glyde.com

交互设计中的三个实用技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

点击某个封面,延时移动给操作者带来一个很好的引导阅读过程。

注意:要频繁处理的操作,过渡过程耽误时间的同时,还可能造成误点击。

3.移位

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

在不弹层、弹窗情况下的内容移位。合理的运用页面内容的展开、收起。

操作者在即将产生交互的地方,就近通过这种方式就完成了轻便的操作。

参考实例:

http://gizmodo.com/

http://www.axure.org/demo

下边的展开与收起

交互设计中的三个实用技巧,PS教程,图老师教程网

点击下边地址中的视频播放,同样可以看到视频右侧文字内容的移位效果。

http://www.cnn.com/2010/TECH/01/13/google.china.analysis/index.html

总结:过渡过程和移位在Web开发实现上,可能大量应用到Js库,非必要时可以尽量减少使用。

讨论

展开更多 50%)
分享

猜你喜欢

交互设计中的三个实用技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
交互设计中的三个实用技巧

Access 2002的三个实用技巧

设计创意
Access 2002的三个实用技巧

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

解析交互设计中的拖放交互设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
解析交互设计中的拖放交互设计

教程: Access 2002的三个实用技巧

编程语言 网络编程
教程: Access 2002的三个实用技巧

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

浅谈交互设计中的分页设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈交互设计中的分页设计技巧

三个智能调整Win7系统声音的实用技巧

电脑入门
三个智能调整Win7系统声音的实用技巧

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

解读2024年欧洲杯标志设计

解读2024年欧洲杯标志设计

网站图片区域的版式设计

网站图片区域的版式设计
下拉加载更多内容 ↓