聊聊线框图:UED和PD对于线框图不同的定位

本周和PD们进行了一次《线框图以及">Axure入门》培训。这是应几位PD的需求,他们也要学习如何设计线框图,所以想更加高效进行入门。

在场的有UED,有PD,我发现,对于两者都要画线框图,引发了一些讨论,这也是我事先预想到可能会引发争议的部分。

其中有个PD讲,有一次,老板是要求她来画线框图给他看的,她花了很多心思在线框图上,结果交付给交互设计师的时候,交互设计师不知道如何进行发挥了,交互设计师说:你都画这么好了,我不知道画什么了。之后,交互设计师进行了“润色”后,交付给10243.html">视觉设计师,结果视觉设计师发现自己也无从发挥了,因为视觉稿已经出来了,都上了色了。

如果能够提升项目效率,这样倒真的也是好事。PD直接画出确认版的线框图,然后直接给视觉设计师,交互就不需要了。在很多小公司,也确实如此运作,也蛮好的嘛。

交互设计师说:交互设计师承担了一种需求翻译的工作,将PD的商业需求,进行具象化,并加入一些用户的视角,帮助优化产品,之后翻译成视觉设计师能够理解的语言,最后产生视觉稿。这也只讲到了一部分,如果PD也能够具象化,并传达得很好,为何还需要交互呢?

但是,在实际的工作环境里,我们必须得承认一个前提:术业有专攻,每个人的精力是有限的。

所以,PD,交互,以及视觉,虽然都在画图,究竟画得有什么不同呢?

这是在这个PPT里其中的一页,也得到了在场的PD以及UED的认可。

PD画线框图有时是不可以避免的,他们需要:

1. 细化思路,帮助自己写需求文档

2. 更好传达自己的需求给其他人,比如交互

3. 一些预研型的项目,需要据此让老板认可并拍板

但是做为PD,同样也担心之后交付给交互,会影响交互的发挥。而且,人人都有追求完美的倾向,在做了一个简陋版的线框图后,总是觉得太简陋,总是不由自主增加很多细节,以使之先得更加专业。但是,PD需要将重点放到“辅助表达想法”上,对“有用”负责,比如,功能点、内容块、业务流程,而那些打着叉叉的方面,不是说绝对不关注,绝对不表达,而是需要加上“仅供参考”。

做为PD,你认为版块A非常重要,比版块B重要得多,你可以在线框图上把版块A放大,放到首要位置,但是“位置”和“结构”不是你主要要控制的,你要传达给交互的是:版块A非常重要,以及为什么,而你所做的处理,仅供参考。聪明的交互会理解你的需求,且不会因为你妨碍了他的表达。

同样,交互和视觉,虽然是一个团队的,也经常发生因为边界问题,比如:交互不由自主加了很多颜色和质感,视觉不知道如何处理。视觉更改了线框图的结构,导致交互认为和自己传达的逻辑不相符。

所以,作为交互,请注意那些必须要关注的东西:

1. 任务流——根据用户需求、行为,分析用户的任务,以及任务流程,简化任务。

2. 布局/结构——信息分几类,什么样的布局更加易用

3. 位置/顺序——各个版块之间按照什么样的位置进行排列,引导用户的顺序是怎么样的

4. 层次/轻重——版块之间、文本之间的层次如何

请注意,在表达位置/顺序以及层次时,交互会忍不住为线框图加注颜色,进行字体的设计,但是在交付时,这些也是“仅供参考”的。要传达给视觉设计师的,仍然是“这些比哪些更重要,更应该被强化,以及为什么”。聪明的视觉设计师自然知道如何去表达而不是会觉得受到束缚。

到了视觉阶段,视觉设计师不管接到多么像视觉的稿子,也需要重新进行思考定位,需要输入目标用户特征,需求,进行产品的风格定位。

我建议,在改变线框图结构的时候,要和交互设计师保持沟通。上次,我在做线框图的时候,和几个PD,以及我们的几个UED争论了很久,确认的面包屑和搜索筛选的位置,结果到了视觉设计的时候,视觉设计师将我的面包屑调整到了不同的位置,为此还起了纠纷。因为这些位置的调整,是会影响之前确认的功能逻辑的。

大家如果有什么疑问,也欢迎继续讨论,那就先这样吧~

源地址:http://heidixie.blog.sohu……59785390.html

时间: 2024-11-10 07:41:55

聊聊线框图:UED和PD对于线框图不同的定位的相关文章

聊聊线框图:那些必要的理论和前提

这是一篇老生常谈的问题,所以若有人已经了解,请自动忽略好了.这也是在一次和PD的交流培训会上再次提出的老问题:究竟线框图为什么要画,以及如何画. 至于线框图为什么要画,就不在这里聱述了.相信已经有很多人写过类似的文章,当然,如果你还有疑问,可以给我写邮件. 现在就是如何画的问题. 这不是很简单吗?一个简单的线框图,断不得比一个精美的视觉图更花费时间吧?也不需要美学的基础,也不需要精细的加工,加上已经有一个号称10分钟上手的工具作为辅助,恐怕没有必要单独开这个话题来研究. 但是,之所以又抛出来,正

Photoshop线框图套件:PS制作线框图

这篇文章向大家介绍一套免费的 Photoshop线框图套件,这个线框图套件中包括通知.图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等. 这个套件的使用非常简单.新建一个空白的 Photoshop 文档并在打开线框图套件的 PSD 文件,然后把你需要的元素从套件中拖放到自己的空白 Photoshop 文件中进行布局设计. 如果你有两个显示器或有一个大屏幕,这将是非常有帮助的.我通常会在一个屏幕打开一个空白的 Photoshop 文件

使用Photoshop制作网页线框图

这篇文章向大家介绍一套免费的 Photoshop线框图套件,这个线框图套件中包括通知.图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等. 这个套件的使用非常简单.新建一个空白的 Photoshop 文档并在打开线框图套件的 PSD 文件,然后把你需要的元素从套件中拖放到自己的空白 Photoshop 文件中进行布局设计. 如果你有两个显示器或有一个大屏幕,这将是非常有帮助的.我通常会在一个屏幕打开一个空白的 Photoshop 文件

画好线框图的20个步骤:知道什么时候结束

对于任何一个开发项目来说最大的错误可能就是没有计划.最近,有些人认为开始前无需计划,一个优秀的开发者需要的是随机应变.我敢肯定这样的做法最后注定是要失败的. 线框图是计划中的第一步也是最重要的一步.这是将创意转换成客户使用的程序的第一步.本文将要带你了解线框图整个的流程;包括涉及参与人员,工具等,以便您能够更好的制作计划. 1)了解自己的目标 作为一个开发人员我想大家都有马上坐下来开始编码的冲动.通常最初的想法都很简单,那么你真的可以坐下直接开始吗?答案是否定的,项目很少有那么简单的,任何有经验

聊聊线框图——为线框图多留点时间

线框图是交互设计师必不可少的产出物,它在交互设计师的工作中扮演了如此重要的角色,以至于交互设计师经常被认为是个画线框图的,但是无论是设计师本人还是项目组成员,对于线框图存在的意义未必有足够的认识. 项目为何需要线框图? 为什么不缩短周期,直接跳转到视觉设计呢? 对于设计师而言,疑问一样存在: 线框图给我们带来什么价值? 在我们想进行线框图培训时,疑问有: 不就是画个草图吗?还需要学习? 如果大家都把线框图理解成"草图",那么按照正常逻辑,草图的产出一定是比视觉稿更快而不是更慢才对,但是

聊聊线框图、原型和视觉稿的区别

  @小轰同学 :两三年以前,我发现很多搞信息技术的朋友们(非设计师)交付设计时,用着上面列出的词汇.他们以为线框图 (Wireframe).原型 (Prototype)和视觉稿(Mockup)是一个东西:表达自己创意的线框手绘设计稿. 混淆概念便带来麻烦:他们分不清用户体验设计师的作品,常常感到困惑.「这按钮他妈的怎么点不了?」「我不知道这个地方可以按啊!」类似这样的问题在用户体验的项目中屡见不鲜.误把线框图当成原型,有点像建筑里分不清蓝图(指导如何建筑施工的方案)和演示厅.你完全可以试着在演

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.5 绘制网站线框图

2.5 绘制网站线框图 网站规划的下一步是确定如何在网页之间分配内容,并制定在网页之间导航的方案.如果有很多需要以复杂的方式链接起来的内容,请坐下来制定具体的内容分配计划,这对您以后开发和链接网页大有裨益. 2.5.1 线框图是什么,为何需要绘制线框图线框图是网站完成后的大致轮廓,指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的.有了线框图后,开发每个网页时就无须牢记它在整个网站所处的准确位置,也无须牢记它与其他网页之间的复杂关系. 在网站特别大的情况下,如果有线框图,就可将网站不同部

你了解线框图和原型的过去、现在与将来吗?

  本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者.如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程,那么你可以下载UXPin精心制作的<原型设计终极指南>(英文版).这篇文章会系统为你介绍线框图和原型的发展历程,了解它们在不同历史背景下的发展,能帮你在未来设计更优秀实用的线框图和原型.通过线框图和原型的发展历程,你还能从侧面了解用户体验设计的过去.现在和未来. 来源:What Does Lean UX Have Tha

你知道线框图和原型有啥区别吗

  线框图并非是原型,但即使是经验丰富的设计师也可能会将两者混为一谈.实际上,两者的差别还是非常多且明显的,那么就让我们通过这篇文章分辨清楚这俩概念,一劳永逸. 线框图 线框图是产品设计的低保真呈现方式.它有三个简单直接而明确的目标: 1.呈现主体信息群 2.勾勒出结构和布局 3.用户交互界面的主视觉和描述 正确地创建了线框图之后,它将作为产品的骨干而存在. 它就像一幢建筑的蓝图一样,将细节规定地明明白白. 线框图的视觉特性 线框的视觉特性局限性非常明显.通常设计师会只需要使用线条.方框和灰阶色