线框图入门:各种线框图的不同定位

2016-02-17 03:44 15 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享线框图入门:各种线框图的不同定位教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - 平面设计 】

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

线框图入门:各种线框图的不同定位,PS教程,图老师教程网

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

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

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

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

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

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

线框图入门:各种线框图的不同定位,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

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

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

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

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

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

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

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

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

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

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

讨论

来源:http://www.tulaoshi.com/n/20160217/1578178.html

延伸阅读
本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程,那么你可以下载UXPin精心制作的《原型设计终极指南》(英文版)。这篇文章会系统为你介绍线框图和原型的发展历程,了解它们在不同历史背景下的发展,能帮你在未来设计更优秀实用的线...
10款线框图和原型图设计软件   不管你设计网站也好,设计应用界面也好,都需要有出众的视觉设计,从而吸引用户。但在视觉稿输出之前,比如首先要进行线框图设计和原型图设计,来规划站点地图和应用流程 我们来盘点一下最好用的十款线框图和原型图设计软件,提高你的设计效率 Solidify ZURB旗下的一款产品, Solidify...
页面线框图(Wire frame)是网站设计方案中的重要组成部分,无论是I-Board 、Page-Layout、UI-Draft这些不同的称呼,它们的本质都是一样的,网站策划师、网络产品经理的最后交付文档,通常的呈现设计是最直观有效的。单纯从设计的角度,线框图也可以看作一个视觉呈现过程,虽然如此,也不能把线框图的设计当作简单的视觉问题。如何看待线框图,如...
当开始进行新项目时,一般都会起步于线框图。本文收集了大量的在现线框图设计工具和套件。交互设计师必备哦。 在线设计模板 Wirefy 以内容优先为原则的线框图在线设计工具。允许你运用标准元素设计出响应式线框图。 Lumzy 网页设计和界面设计的原型设计工具。 Mockup Builder 另一款原型设计工具 Mobilizer 选择设备,输入网址,立即...
流程图分为逻辑流程图和页面流程图,线框图分为纸质线框图和HTML线框图,线框图加上了操作步骤、交互逻辑可以叫做流程线框图。这些在理清产品架构,梳理产品逻辑时至关重要。 流程图(task flow) 是指用图形语言的方式画出用户在使用这个产品的方法和达到具体功能的步骤。通常会把产品的使用流程作为某些任务去完成,用语言描述出想要达到的目...

经验教程

325

收藏

85
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部