让产品 设计 前端成为交互设计三剑客交互设计 -电脑资料

时逢年关，各项目都到了收尾阶段，最近的一次的产品升级中给了我一定的启发，在圣诞来临之际记录这样

让产品 设计 前端成为交互设计三剑客交互设计

说到交互设计是时下比较热门的词汇，无论B/S还是C/S架构的产品交互设计元素总是充斥着任何一个角落，久而久之用户也欣喜的接受这样的变化，这对产品的研发人员来说也是新的挑战。产品人员最初在构建产品原型图时可以借助AXURE工具,在此我就不在做赘述，可以参考我先前的文章（交互不求人—Axure弹出动态面板使用方法）。界面设计师在进行设计图设计时完全可以参照原型图的模型，这对于设计不是难题。在这里辛苦的就是前端架构师了，如此之多的交互元素如何一个模块不漏的去搭建起来，真的需要动动脑筋，毕竟设计稿是一个不带任何交互元素的一张平面图。

前端：“PD同学，我看你的原型图上的交互元素有很多和设计图不一样的嘛？”

PD：“没事啊，交互逻辑按照原型图来啊！”

前端：“有你说的那么简单就好了，算了不找你了，我去找UI，

电脑资料

PD：“……”

N分钟以后……

UI：“PD同学，前端找我的事情我不知道啊，我怎么知道你们产品设计的时候交互逻辑性是什么啊，还是你和他对接吧。”

PD：“崩溃！！！！！！”

（以上的情景纯属虚构，如有雷同，那么看看这篇文章，说不定就解决了！）

在这里先给大家看一张图，

这张图是设计师交给前端架构师的产品设计图，产品经理只需要将交互的逻辑关系和触发顺序标准在需求文档上，前端架构师可以按照这张图上的设计元素很方便快速的将整个交互环节架构出来，另外这样的设计方式也是设计师热衷的风格——页面饱满，结构元素清晰，便于掌握交互元素与整体页面的色彩结合点，另外以前需要设计N张设计图来体现交互形式现在只要一张就搞定；另外拿到领导那里审核时也更加的直观大磅礴：）。

该是三剑客爆发的时候了。