原型图、交互设计、UI图的关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结。
- 做原型是表达自己思路的一种方式,任何岗位都可以制作原型与其他岗位进行工作上的沟通。当然,各个岗位制作的原型的侧重点是不一样的。
- 产品经理和交互设计师所做的原型在衔接的地方难免有一些重复。但是交互设计师所负责的原型制作应该更加精细,更加全面,更关注任务交流和操作这个层面。而产品经理不需要制作出带有丰富细节交互原型,产品经理还是要把精力集中放在产品的核心上面。更简单的说,产品经理对待交互稿,应该是快、草;快速模糊地把信息传递给交互设计师,交互设计师根据模糊的概念形成细化的方案。这样配合,效率很高哟~
- 在工作中,会根据产品形态的不同,进行合理分工。一般来讲,PM主要负责用户需求整理,规划,功能筛减,商业模式、运营模式探索,版本迭代时间规划,敏捷开发功能点描述等;
如果是WEB端的产品,交互相关的东西会涉及的比较少,由于PM洞悉各个功能点,倘若对原型设计较为精通,那么由PM亲自操刀出来的原型,既有利于开发人员了解功能点,又能减少与交互设计师沟通的时间,如此可以大大提升工作效率。
如果是移动端的产品,交互相关的东西会涉及的比较多,由于PM需要规划每个功能点,倘若操刀交互细节,将会非常费力,这个时候可以考虑将交互的细节分给交互设计师来做,自己全心全意规划功能,此为上策。虽然花费了一些沟通成本,但优化后的交互细节,在用户体验上会达到一个更加专业的程度。
综上所述,PM的demo和 Interaction designer的demo,最大的区别在于对交互细节的描述上,亦需根据产品的交互复杂度来定。
题外话:作为PM,需要不断提升自己的能力,不管是交互还是技术甚至是UI审美方面,都要保持进步,这样才能应对更多的复杂急性事件。 - a. 产品经理的原型
梳理出所有的产品功能以及流程逻辑,比如使用axure的站点地图这种树状分支的表达要清晰完整。
每个功能页面,上需要哪些功能和数据需要呈献,要表达出来。
一定要在最短的时间内制作出人能看懂的原型,反复讨论,反复修改,留给设计师足够的时间。一定不要纠结画的好不好看,这一点也不重要,快速是第一位的。甚至功能好不好用可能都不重要,表现出来我们有什么,可以做什么就够了。
b.交互设计师的原型
拿到产品经理的原型,协助细化功能点,考虑交互逻辑是否成立。对整个产品的交互逻辑要表现清楚,比如提交数据按钮需要呈现加载状态,创建新数据表单,在哪个地方使用弹窗,哪个地方使用页面,空白数据页面使用表情还是添加新数据引导呢?给UI设计师提供UI设计思路。
说白了都是考虑每个功能用户怎么用的更爽。 - 交互设计师,交互;ui,视觉设计。
- 干了五年产品经理,原型切身体会是,原型这个东西,一旦你画了,就根本停不下来!最初只是想画个草图,但唯恐哪里没表达清楚,不断在里面搞设计,简直就是个坑!这浪费了多少白花花的时间啊!到头来该想的没想清楚该理的没理顺该做的没做好可做可不做的模糊不清…
如果不画原型,交互搞不懂产品,UI搞不懂交互,技术搞不懂UI背后的逻辑,领导看不到产品经理的思路…那么问题就来了!产品经理该不该画原型?
看工作环境,有交互设计师在的情况下,别让他不知道怎么干活(需求不清)也不知道还要不要干不干活(产品经理乱入交互)。
我现在是先跟交互设计师在纸上、白板上充分讨论交流,让他明白产品和功能以及用户需求,接着讨论大概的交互怎么做,交互设计师下去用工具(推荐sketch,没有集是设计师就自己画也挺快的)做像素级的线稿,我准备背后的需求、流程、逻辑,期间再碰N次。
他做完线稿图,这一步非常重要!完成这一步三个人都可以开工了,UI设计师可以拿这个去做界面设计,我和交互设计师可以分头做原型了。
因为sketch做图又快又美还是像素级,三人同时参考避免最终成果有偏差。所以我拿去套进axure,页面配上功能说明、规则逻辑、流程图等,生成产品经理版交互原型,用来汇报领导、沟通协调、需求评审与讲解、与技术进行项目开发计划评审评估工期等。
他继续把线稿图用axure做完全部交互细节设计,期间与我反复沟通确认,最后生成交互设计原型。
差不多这个时候开发计划出来的时候,交互设计原型已经完工了,UI主界面也差不多了,技术可以直接开搞不耽误!
最重要的还是每个环节的人都对要做的东西认知基本一致,因为前期的反复讨论和沟通,以及相差不远的线稿图做各自工作的参考依据。
基本上一个好的交互设计可以解放产品经理做更多有利于产品的事情而不是被很多具体的细节套死。也就是脑子空出来了,可以多想多学多提升,产品or自己。
至于什么低保真高保真,我能说句去尼玛的保真么!
太土了!低保真费时间还得讨论一次更新一版,还不如手绘+讨论现场get来得简单粗暴有效!
高保真泥煤的不就是UI设计效果图了么,都到这一步了保真泥煤啊直接切图搞开发不好吗?
原型设计可以清楚明了讲需求,所以产品经理要用!可以动起来的原型设计必须是深思熟虑过的交互,提升产品用户体验几个档次! - PM和交互设计师两者怎么配合,工作才不会重复,发挥最佳效果?
PM整理思维脑图,头脑风暴之后,优化思维脑图,然后出草图,你可以用Axure或者visio甚至腾讯出的UI disigner或者最近比较流行的Fluid UI(APP设计工具)来画草图,也可以称之为低保真原型图,在这个低保真原型图中,你需要一一罗列功能点,交互细节大可不必提及,完成后主动找交互设计师进行沟通交流,要耐心的将各个功能点向交互设计师描述清楚。交互设计师了解到这些功能点之后,会根据自己专业能力的感知,来进行高保真原型设计。我一直认为,交互设计师应该精通Axure,甚至应该具备非常高的文字描述能力,因为作为PM,我觉得交互设计师、前端设计师就是灵魂铸造师。高保真原型出来之后,PM应主动与交互设计师沟通,看看是否有需要修改的地方,两个人需要在灵魂层面达到二合一的境界,对功能的理解一定不能有出入,一些功能细节,PM应该把关,某些交互细节,应该提出自己的意见,换位思考,理解交互的设计含义。耐心与责任心在这个时候显得尤为重要。统一方案后,就可以提交UI进行设计了。之后就是前端工程师的静态页面设计,程序员的技术实现,TEST了。整个过程中,PM的沟通能力得到了最大程度的提现。所有的这些,都基于你对产品的热情程度,因为只有热情,才能让你持续不断的保持上文提到的那些能力。
转自:https://blog.csdn.net/lucky_girl11/article/details/70233332
原型图、交互设计、UI图的关系相关推荐
- 计算机ui答辩,交互设计ui设计毕业论文答辩
<交互设计ui设计毕业论文答辩>由会员分享,可在线阅读,更多相关<交互设计ui设计毕业论文答辩(16页珍藏版)>请在人人文库网上搜索. 1.交互设计,UI,设计,毕业论文答辩, ...
- 2023年必备的10款交互设计软件
交互设计可以帮助明确产品需求和功能.进行用户测试和获取反馈.减少开发成本.促进团队合作,并在展示和推销产品时起到关键作用.通过有效的产品交互设计,可以提高产品的质量.用户体验和市场竞争力. 什么是产品 ...
- 交互设计课程的心得体会
交互设计学习体会: 1. 注重用户体验:交互设计的核心之一就是关注用户体验.在学习交互设计的过程中,我们要注重用户的需求和反馈,了解用户的使用习惯以及他们的期望.同时,在设计用户界面时需要考虑到易用性 ...
- 从用户行为打造活动交互设计闭环——2014年世界杯竞猜活动设计总结
前言:从需求→交互设计→视觉设计→开发上线,不到20天的时间,6月12日世界杯活动上线了.首先为我们这个团队点个赞.活动两个月期间一直没有时间整理,现在活动结束,说说此次暴露的一些问题及反思. 世界杯 ...
- 原型图、交互设计、UI图,到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. 做原型是表 ...
- 原型图、交互设计、UI图的小结
原文链接 其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. ...
- UI设计线框图可编辑模板,临摹学习设计要点
为什么需要设计线框图? 1. 帮助团队评估和完善工作范围 线框图允许设计师快速创建产品的视觉表现,方便后期修改: 帮助设计师向团队展示应用程序具有的页面元素和控件,以及所有元素如何进行交互. 用于We ...
- 交互设计、信息图、信息可视化、数据可视化技术资源汇总——设计师的领域,设计师说了算
本文整理了设计师常逛的网站,这些资料信息网站包括交互设计.信息图.信息可视化,在线制图.数据可视化,本文大致的内容包括: <灵感--可以参看如下网站来寻找灵感网站汇总>. <信息图工 ...
- 快速了解,带你了分清原型图和UI图的区别
在设计领域,原型图和UI图是两个常见的概念,但很多人并不清楚它们之间的区别和联系.本文将详细介绍原型图和UI图的定义.功能以及它们之间的区别和联系,以帮助读者更好地理解和使用这两种设计工具. 1,原型 ...
最新文章
- eye--创建单位矩阵
- yum 更新_CentOS7 - 使用yum-cron自动更新软件
- 牛客题霸 NC23 划分链表
- 并发、并行、线程、进程与CPU基本概念
- java日期大小比较
- Session丢失的解决办法小结(转)
- crx文件里面的html文件,javascript – Chrome扩展程序:在crx文件中打开html,标签上没有图标...
- 扫雷小游戏 3.0 版本
- Netty 源码分析之 零 磨刀不误砍柴工 源码分析环境搭建
- web前端程序员两年学习经验与总结
- 五个海盗如何分100个金币呢?
- c#中 把字符串转换为拼音码
- 【推荐架构day2】微博怎么给你推荐信息的:基本原理
- Can‘t bind to ‘ngForOf‘ since it isn‘t a known property of ‘xxx‘
- QGIS二次开发 数据编辑功能等
- 强制root工具kingoroot
- 3A技术的介绍以及CISCO路由器上相关配置
- Unity录屏的坑(FFmpeg)
- centos彻底卸载mysql
- KRPANO资源分析工具