一个完整的交互设计的工作流程流程是怎样的

来源：蜘蛛抓取(WebSpider) 时间：2016-08-31 02:05 标签： 交互设计流程图怎么画
一个完整的交互设计流程是怎样的_百度知道UI 设计的整个工作流程是怎样的？-早读课 | 互联网早读课
分享到:|||||
/ 编辑: / 分类:, /
作者：刘欣。作者授权早读课发表，转载请联系作者。
以下回复把“UI设计”当做一个整体的团队流程来看。而并非是“UI设计师”的工作流程是怎样的。特此说明。
我倾向于说“交互设计的整个流程”。在我这里，UI是指“界面”，在视觉设计开始之前，界面的的交互策划与设计是很重要的前置步骤，对最终的用户体验有很大的影响。
我团队在交互设计阶段一般有产品经理、交互设计师和UI设计师主要参与。以我的了解，很多公司不设专门的交互设计师，而由产品经理完成相关工作。以下是我这里的工作流程（图片来自于网络，本团队的就不贴了）。这个流程希望整个产品团队都能参与其中并共同加强对产品的理解。或者借一个时髦的概念，我是希望团队能具有更多Design Thinking，“设计思维”，来加强和推动解决问题的能力，并激发更多创新。
最开始一定要把Scenario应用场景和Persona用户角色做出来。你的产品是在何种场景下被使用，你的用户角色是怎样特征的人。设计的对不对，要用用户角色来判断，而不是设计师或产品经理自己。把场景和角色描述清楚，并且让整个团队理解透彻，这能保证团队少犯错误。
*用户角色 Persona，实际工作中写文字描述就好，不用做的如下图一般高大上。如果你要给客户或Boss提案，可以做一个提升逼格。
1. Storyboard 故事版：
主要负责人：产品经理或交互设计师
最早大家开始讨论用户体验流程，在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论，而且主要讨论的是流程和主要功能，因此手画故事版最快最方便并易于修改的。
此环节要敲定userflow，用户流程及其中的关键步骤，每一步骤都是一个主要界面。
*白板上一般都是这样，交互设计同学会在纸上重绘。
*移动产品设计这样做也行，不买专用的模板本和工具尺，自己打印也行。
2. Key wireframe 关键界面线框图
主要负责人：交互设计师
在确定的用户流程中，选出几个关键的，有代表性的步骤，做细化的wireframe线框图。线框图里要确保每一个UI元素的设计，包括其大小和位置。我们做的线框图是1:1的，也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局，以及全局的布局排版风格。
*线框图做成1:1最好。输出到文档里要添加说明。在后面的工作里，这份文档可以让UI设计同学和工程师同学共用。
3. Key visual design 关键界面视觉设计
主要负责人：UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计，进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
4. All wireframe 全部界面线框图
主要负责人：交互设计师
此环节交互设计师要完成全部界面的线框图（1:1的）设计并且团队确认。
*做完全部的线框图，一般会出一个总结构图。如果有足够大的场地，也可以逐页打印出来贴到一面墙上。方便团队随时参考。
5. Prototype 可动原型
主要负责人：交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点，那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型，特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过（PPT的开发工具+VB Script）几乎接近成品界面的可动原型。
此环节的确认同上一步，团队的理解会更精准。
*忍不住帖一个PPT的开发工具面板，提供VS风格的控件，并且直接用VB script写控件逻辑！还可以带dummy数据！客户都以为你开发完毕了有木有。
6. UI design 全部界面视觉设计
主要负责人：UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。
以上步骤里省略了了给boss汇报或者给客户汇报的描述。有条件的话，最好是每一步都要让有关的决策人员参与确认。
如果要做用户调研的产品，那一定要做出可动原型再让用户使用测试，不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好。
如果看到这段文字，证明您已经看完这篇文章了，有什么收获有什么感想有什么不赞同，我们期待您的留言评论，并诚挚邀请您加入“”QQ群，一同交流每天文章的心得并结识同行。官方10群：，加群密码“城市+职业+姓名”，否则不予通过，入群后请修改群名片。
投稿邮箱：
本文标签: ,,
版权所有: , 转载请注明本文出处
订阅分享: 您可以的内容更新.
看过本文的人还看了
关注微信，每天提醒自己来阅读
在新浪微博上关注我相关热词搜索：
频道总排行
频道本月排行一个完整的交互设计流程是怎样的？
06:33:02 &nbsp&nbsp文章来源：&nbsp 创想者学院
小编在一家创业公司，披着产品运营的外衣做着产品经理的勾当。耗时1个半月的时间，将产品原型处理完毕。耗时这么久，主要原因是研发团队先行，产品和设计后行的逆行逻辑，真真的是累够呛。
看到这个图，其实很清楚了，研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么，一个完整的交互设计流程是怎样的呢？
首先，我们先来认识一下产品的五个用户体验的要素
用体验的五个层面分为：战略层、范围层、结构层、框架层、表现层。五个层面自上而下地建设，具备基本的双重性、用户体验的要素和应用这些要素。
所谓战略层，即为产品目标、用户需求，通俗来讲，经营者想从网站上得到什么，用户想从网站上得到什么？
所谓范围层，即功能规格和内容需求，其意义在于这是一个有价值的过程，同时能够产生有价值的产品。比如，提供用户可以保存之前的邮寄地址功能。
结构层，即交互设计、信息架构层，其目的是为了确定各个将要呈现给用户的元素的&模式&和&顺序&。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。重点：理解用户的工作方式、行为和思考模式。
框架层，即界面设计、导航设计、信息设计层。
界面设计是用来确定界面空间元素以及位置，提供用户完成任务的能力，通过它，用户能真正的接触到那些&在结构层的交互设计中&确定的具体功能。
导航设计：呈现信息的一种界面形式，提供给用户区某个地方的能力。
信息设计：呈现有效地信息沟通，表达想法，它是这个层面中范围最广的一个要素。
实现方法建议以线框图将设计信息、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。
通过安排和选择界面元素来整合界面设计；
通过识别和定义核心导航系统来整合导航设计；
通过放置和排列信息组成部分的优先级来整合信息设计。
线框图的好处是可以确定一个建立在基本概念结构上的架构，同时指出了视觉设计应该前进的方向。
表现层，即为视觉设计。界面设计考虑可交互元素的不足，导航设计考虑在产品中引导用户移动的元素安排，信息设计考虑传达给用户的信息要素的排布，解决并弥补&产品框架层的逻辑排布&的感知呈现问题。
评估一个页面的视觉设计的简单方法：终于眼睛。一个成功的设计有2个重要的特点：
遵循的是一条流畅的路径；
在不需要太多细节来吓到用户的前提下，它为用户提供有效选择的、某种可能的&引导&。
所以，我们的设计师应该怎么做呢？
读懂原型图
读懂PRD。确保在需求理解上，与PM保持一致；
查找漏洞。人无完人，在成熟的PM，也难免有疏漏。找出遗漏，与PM反馈、沟通；
提出产品新想法。读PRD时，总会有一些产品的好想法冒出来，及时与PM和团队沟通；
开始构思交互。
草图快速沟通
通过草图，快速将&产品关键流程&、&关键交互界面布局&呈现纸面，以此与PM、技术沟通至达成共识；目的是为了：
再次扫遗漏；
收拢想法。这个阶段，产品设计基本定型；
达成共识。确保让产品、设计、技术队要做的事情有一致的理解，PM需更新PRD、技术开始做开发准备。
Axure线框图表现产品流程、界面
包含：产品流程图、全部的页面原型。
Axure让团队对产品的理解无异议，对最终的产品有直观的了解。这个阶段，产品需求冻结。开发人员可以依据原型对UI关联较小的部分进行技术开发。
有前面两个&扫清障碍&的过程，这个阶段，视觉设计时非常舒服的事情。在相对完整的设计规范、控件规范的前提下，视觉包括：
风格探索；
关键页面的视觉设计；
关键交互动画表现（如果无法口头项技术表达动画效果时，给出一个&活的&效果，是非常直观的。
视觉素材输出、设计文件标注
每个项目最终给到开发人员的都要有效果图、标注图、切图三个文件夹。Pxcook、Markman是不错的标注工具，Cutteran、Assistor PS是很方便的切图工具。
开发后期，细节跟进
与开发跟进细节，是设计过程的一部分。在我们团队，完全依靠规范作业、设计文件标注（不和开发人员说一句话）,能够确保80%的交互、视觉细节能够被还原。剩下的20%，就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中，一定要预留这个时间。主要包括：边距、字体、界面动画的数值微调。
转：人人都是产品经理 & &原文作者Havery
UI设计 网页设计 &UI设计培训& 网页设计培训 深圳UI设计培训& 深圳网页 设计培训 UI设计培训学校&哪家UI设计机构好&最好的UI设计培训机构&UI设计学习&远程UI设计培训&UI培训&UI培训机构&UI培训学校&深圳最好的UI培训机构&UI培训机构有哪些& 网页设计培训有哪些
欢迎来到创想者学院现场参观！
深圳市龙岗区龙翔大道2188号深圳信息职业技术学院 知行楼4号楼326室

我要回帖

更多关于 交互设计流程图怎么画 的文章

 

随机推荐