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

看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢?

首先,我们先来认识一下产品的五个用户体验的要素

看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢? 首先,我们先来认识一下产品的五个用户体验的要素

 

 

用体验的五个层面分为:战略层、范围层、结构层、框架层、表现层

看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢? 首先,我们先来认识一下产品的五个用户体验的要素

五个层面自上而下地建设,具备基本的双重性、用户体验的要素和应用这些要素。

所谓战略层,即为产品目标、用户需求,通俗来讲,经营者想从网站上得到什么,用户想从网站上得到什么?

所谓范围层,即功能规格和内容需求,其意义在于这是一个有价值的过程,同时能够产生有价值的产品。比如,提供用户可以保存之前的邮寄地址功能。

结构层,即交互设计、信息架构层,其目的是为了确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。重点:理解用户的工作方式、行为和思考模式。

框架层,即界面设计、导航设计、信息设计层。

界面设计是用来确定界面空间元素以及位置,提供用户完成任务的能力,通过它,用户能真正的接触到那些“在结构层的交互设计中”确定的具体功能。

导航设计:呈现信息的一种界面形式,提供给用户区某个地方的能力。

信息设计:呈现有效地信息沟通,表达想法,它是这个层面中范围最广的一个要素。

实现方法建议以线框图将设计信息、界面设计和导航设计放置到一起,形成一个统一的、有内在凝聚力的架构的地方。

  1. 通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。

线框图的好处是可以确定一个建立在基本概念结构上的架构,同时指出了视觉设计应该前进的方向。

表现层,即为视觉设计。界面设计考虑可交互元素的不足,导航设计考虑在产品中引导用户移动的元素安排,信息设计考虑传达给用户的信息要素的排布,解决并弥补“产品框架层的逻辑排布”的感知呈现问题。

评估一个页面的视觉设计的简单方法:终于眼睛。一个成功的设计有2个重要的特点:

  1. 遵循的是一条流畅的路径;在不需要太多细节来吓到用户的前提下,它为用户提供有效选择的、某种可能的“引导”。

所以,我们的设计师应该怎么做呢?

读懂原型图

  • 读懂PRD。确保在需求理解上,与PM保持一致;查找漏洞。人无完人,在成熟的PM,也难免有疏漏。找出遗漏,与PM反馈、沟通;提出产品新想法。读PRD时,总会有一些产品的好想法冒出来,及时与PM和团队沟通;开始构思交互。

草图快速沟通

通过草图,快速将“产品关键流程”、“关键交互界面布局”呈现纸面,以此与PM、技术沟通至达成共识;目的是为了:

  • 再次扫遗漏;收拢想法。这个阶段,产品设计基本定型;达成共识。确保让产品、设计、技术队要做的事情有一致的理解,PM需更新PRD、技术开始做开发准备。

Axure线框图表现产品流程、界面

包含:产品流程图、全部的页面原型。

Axure让团队对产品的理解无异议,对最终的产品有直观的了解。这个阶段,产品需求冻结。开发人员可以依据原型对UI关联较小的部分进行技术开发。

视觉设计

有前面两个“扫清障碍”的过程,这个阶段,视觉设计时非常舒服的事情。在相对完整的设计规范、控件规范的前提下,视觉包括:

  • 风格探索;关键页面的视觉设计;关键交互动画表现(如果无法口头项技术表达动画效果时,给出一个“活的”效果,是非常直观的。

视觉素材输出、设计文件标注

每个项目最终给到开发人员的都要有效果图、标注图、切图三个文件夹。Pxcook、Markman是不错的标注工具,Cutteran、Assistor PS是很方便的切图工具。

开发后期,细节跟进

与开发跟进细节,是设计过程的一部分。在我们团队,完全依靠规范作业、设计文件标注(不和开发人员说一句话),能够确保80%的交互、视觉细节能够被还原。剩下的20%,就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中,一定要预留这个时间。主要包括:边距、字体、界面动画的数值微调。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10942/

(0)
iouedioued
上一篇 2015-11-19
下一篇 2015-11-19

相关推荐

  • Axure网页Banner大集合、Banner模板、京东Banner...完整版rp源文件下载

    网页Banner大集合,banner模板、天猫banner、拉勾banner、严选banner...已发布在产品大牛http://www.pmdaniu.com/rp/detail/54529只需完成以下2个任务,即可免费拿到完整版RP源文件:1、打开上方链接地址:在该页面中点赞、下载、转存、好评;2、长按下方二维码,并关注“亮亮原型”微信公众号;最后:将完成的任务截图,发送至QQ邮箱:653390398@qq.com邮件标题请使用“网...

    2018-04-02
  • 未来的用户界面,将重新定义设计师的角色

    如果用户界面能够自适应用户的需求,那么设计师实际需要设计什么?如果没有图形用户界面,还需要设计师吗?

    2017-05-10
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • 【推荐】交互设计工作记录知识总结

    交互细节小结: 1.用Axure画线框图的时候,线框图网页要多大尺寸? 答:让页面缩放至100%,网页伸缩至适合电脑屏幕大小的尺寸,一般也就是真实网页的实际大小,因为很多时候这份线框图要发送给某个没有Axure的领导…

    IxD案例 2015-11-24
  • 餐馆与UX中的用户引导

    Gordon Ramsey因为烧焦的食物冲别人咆哮,这和用户引导之间有什么关系?这个问题和事情本身一样有趣,优秀的用餐体验非常玄妙,远不止是食物那么简单:这就是用户引导的体验。

    本文中,我们来一窥餐馆顾客引导的魔力,思考如何将它们运用到体验设计中。

    2017-04-28
  • Sketch49-原型设计才刚刚开始

    官方说明:草图49已经到来,在我们的图书馆更新之后,我们又为Sketch增加了另一个巨大且备受期待的功能。我们了解设计,所以我们知道你不能总是根据静态屏幕判断是否有效。有时你需要看到整个流程的实际运行情况,最好的方法是将你的设计变成交互式原型。通过我们的最新更新,我们正在使整个过程无缝 - 在Sketch中与原型设计师打招呼。Sketch 49带给我们的是最值得期待的功能之一:能够在本地创建和分享快速交互式原型当我听到这个消息时候,脑子...

    2018-03-02
  • AxureUX企业及通用型网站WEB端原型模板发布

    01作品信息作品名称:AxureUX企业及通用型网站WEB端原型模板作品类型:模板类发布日期:2018-04-02最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:1.5MB作品编号:TEM007作品售价:¥19.00详细介绍及演示:http://www.axureux.com/home/templateswebgp.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本...

    2018-04-05