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

2016-02-17 04:17 1 1 收藏

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

【 tulaoshi.com - 平面设计 】

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

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

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

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

1.响应

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

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

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

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

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

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

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

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

2.过渡过程或转场效果

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

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

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

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

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

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

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

3.移位

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

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

参考实例:

http://gizmodo.com/

http://www.axure.org/demo

下边的展开与收起

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

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

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

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

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

讨论

来源:https://www.tulaoshi.com/n/20160217/1578416.html

延伸阅读
寒冷的冬日到陌生环境中往往会碰到水温调节,剧情一般是这样的:你调节到一个自认为合适的刻度,放了一段时间水后发现还是冷的,于是慢慢放大热水,几次调解后索性将热水开到最大,结果太烫,放大冷水,太冷,放小冷水,太烫,放小热水最后合适了,咱们即使没有感冒也开始记恨这个淋浴器。比较合理的是一种叫 恒温龙头的产品,它给定一个用户不...
三个实用的iPhone拍照小技巧 一、录影时拍照 一些人可能利用 iPhone 进行录影,但同时间看到一个美女经过,想即时拍照留念,不需拨回相片部分,你可以利用随录即影功能。这个功能,不少手提摄录机率先使用,在 Android 部分旗舰手机都有这个功能。其实 iPhone 5 以上的手机,也有随录即影,请确保你是正在录影的时候,在录影...
标签: Web开发
WEB前端,指的是:交互-设计-制作三个角色的组合。 项目管理,指的是如何把需求分解成任务,分派给合适的人并正确的完成任务。需要把握的是以下四个方面。 1、需求分析 需求分析的目的是评审需求的可行性和优先级,这里就需要足够的项目经验了。 可行性: 关于需求本身是否合理,是否是一个值得去做的需求。 ...
按钮分组:按钮的分组可以让一个界面变得具有自我描述能力.在复杂的布局中,组织良好的各组按钮用以选择,而且因为很明显,这样可以很快告诉用户有哪些功能可以使用。 几个按钮放在一起,因为它们可能完成类似的功能。我们可以看范例iTunes的主窗口,四个角分别放置了一组按钮,界面中间的歌曲也有很多的行动点。加上滚动条,该界面只有有14个...
设计师在设计页面时,应该在页面上建立许多视觉层次,引导用户的视觉焦点。这样便于用户快捷迅速地找到自己所需,更好的完成阅读、浏览任务。所以本文将介绍几种页面表达的常用方式。 《页面表达常用方式》是整个web交互设计方法中的一部分: 设计师在设计页面时,应该在页面上建立许多视觉层次,引导用户的视觉焦点。把用户的注意力吸引...

经验教程

304

收藏

16
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部