交互设计三剑客—产品 设计 前端_前端交互页面设计

交互设计三剑客—产品 设计 前端由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“前端交互页面设计”。

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

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

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

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

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

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

PD：“„„”

N分钟以后„„

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

PD：“崩溃！！！”

（以上的情景纯属虚构，如有雷同，那么看看这篇文章。）

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

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

Ps：本文发布以后可能会招来一些看官的非议，但是笔者认为在整个产品开发过程中找到团队的最佳磨合方法才是项目效率提高的真正法宝，更何况在规章流程上也不存在抵触，总而言之对大家有帮助的话大可“拿来”这样的方式，至于不赞同的同学也可以发表你的观点，365UCD是一个交流的地方，我们的目的只有一个：沟通、分享——让我们的工作更加快乐和高效。