• 项目为何需要线框图？
• 为什么不缩短周期，直接跳转到视觉设计呢？

对于设计师而言，疑问一样存在：

• 线框图给我们带来什么价值？
• 在我们想进行线框图培训时，疑问有：
• 不就是画个草图吗？还需要学习？

如果大家都把线框图理解成“草图”，那么按照正常逻辑，草图的产出一定是比视觉稿更快而不是更慢才对，但是在很多项目里，为何线框图的时间反而花费得更多？

这往往会引起不解，因为在多数人看来，线框图也就是个没有任何视觉加工过的简单简陋粗暴不美观的草稿，加上我一再声称做线框图的工具是10分钟就可以上手搭建线框图的超白痴工具，而线框图本身就完全无需精雕细琢刻意加工，那么，为何会在线框图阶段停留那么久？其他人都在干嘛？时间都花在哪里？

在我自己回顾过去的项目或者看手里的项目时，我也发现，为何过去的线框图阶段都比较长？而目前在做的项目，由于资源靠自己去安排，自己预安排的资源，比如只有3天，实施过程中发现太紧张，远远不够？
再细想一下，发现也许这三天，我用了1天半就搭建了一个满足基本需求的线框图（从商业需求来讲，这是大家能够预计到的主要的页面），但是在1天半后，我开始进行多种方案的探索与创建，然后发现更多分支流程与异常处理页面，之后，我完全没有为线框图的讨论与确认留下充分的时间！

而，线框图如果做出来不是让大家来争论和确认的，而是仅仅做出来给大家过目一下就移交了，基本上，线框图已经失去了原本存在的价值。

时间都花到了哪里？

并非所有的项目都需要线框图，但是如果需要线框图，那么线框图就需要多留一些时间，不要单纯从最终的线框图产出物的“样子”去评估需要多少资源。

用页面的个数去评估工作量，在视觉设计师也许是适用的——建立在产品视觉风格确定的前提下。
（视觉设计师的资源也需要划分成两段，一段用来做探索，确定产品风格，比如主题色，质感，图文比例与用图风格等，这个阶段也有比较大范围的评审与确认，所以时间上反而会比具体的页面视觉设计来得更长），前端工程师也可以用页面个个数与复杂程度去预估需要多少天，但是对于交互设计师，这比较是个难题。只有交互设计师将需求讨论清楚，自己将页面流程图画好，将各种分支情况考虑清楚，脑子里才会逐渐对需要多少个页面形成概念，哪些页面需要更高的单页面交互设计形成概念，而当他完成这一步，交互的大部分工作都已经做完了，剩下的单纯去设计各个页面，占据了线框图阶段的很少的时间。更多的时间是花在什么上？

讨论——评审——讨论——评审——确认

是的，线框图的作用之一是用来吵架的承载物，交互设计师为线框图确认需要召开很多次评审会（视项目不同而不同），直至大家对线框图达成共识，然后在有的公司，还需要对线框图本身进行可用性测试以发掘更多问题。

80%和20%

交互设计师可能会有20%的精力真正花在线框图本身的制作上，而且他也认为这也许是没有什么技术含量的。剩下的80%的精力，用在：

——需求的了解与讨论，“我认为这个标记出现在搜索结果页，也许并不是合理的场景……”“为什么只针对××会员类型开放这个功能？”在商业初始需求确认后，交互设计师与产品经理是配合最紧密的两个角色，他们需要将商业需求一步步细化，落实到具体的页面与功能的实现上。需求越清楚，以后的阶段就会越高效。这个阶段，交互设计师还需要借助site map，页面流程图（page flow），或者故事板等等工具，来帮助自己和项目组了解产品需求。

有时，工作量绝对不想看起来那么少，产品经理需要把做什么和为什么描述清楚，他们会在“做什么”时也会讲一下“如何做”，但是很多产品经理并不或者被要求不要深入太多解决方案细节，但是交互设计师不一样，必须从宏观到细节，将产品的交互逻辑认认真真仔仔细细思考清楚，细枝末节的东西如果不关心，到了项目进行过程中，还一定会被开发工程师追着补充各种流程中的页面。

——创造性的方案探索与尝试，“如果我这里换一种交互方式，会怎么样？”“还有更好的实现办法吗？”“缩短一步操作会怎么样？”“印象中好像曾经有个网站采用了一种更加高效的方法，我想想看？”所有设计师都有精益求精的“特质”，或者“毛病”，我们需要做这种自我激发的头脑风暴。
从设计来看，设计本身就意味着方案的筛选与确认：也许最后设计师在确认会上只给出了一到两种方案，但是大多数设计师在自己的电脑里或者大脑里尝试过很多方案。

设计本身是一种在期望和限制下进行的探索，并且将探索后的成果实施。交互设计师需要不断围绕需求与期望，进行探索并在逐步的限制中，缩小设计范围。他做的是他应该做的，他不应该将过多的问号传递给视觉设计师，视觉设计师本身也需要进行探索与限制，但是我们更加期望他们的天赋应用到品牌感、质量感、专业感、情感化设计的探索上，而不是分散精力到产品逻辑的思考中去。

——设计方案的评审与确认，正如上图所示，设计师需要分出不少精力，在设计的评审与确认上。他首先从自己的头脑风暴里解脱出来，从若干个方案中筛选一二，然后召集需求方、涉众、其他设计师，进行方案的需求。有时，这样的确认会会召开至少三轮：

• 第一轮，线框图初审，线框图基本完整后，与需求方以及技术方代表就线框图展开讨论，这是不是商业方也即需求方想要的东西，线框图满足商业期望，确认整体结构、页面上对于内容块的定义，技术方的参与能够就可行性方面给出意见，并且能够根据线框图进行初步的开发资源评估。
• 第二轮，线框图设计专业评审，让更多的设计师参与讨论，从交互设计层面给予更多意见。这个评审是第一轮评审的补充，在既定的商业需求上就设计本身展开讨论，筛选最佳的方案。
• 第三轮，线框图终审，设计师在前两轮意见中进行评估，对线框图做一些调整，发起第三轮确认会，商业方代表与设计师代表，技术方代表，以及相关的涉众（比如客服、销售代表）等面前再次宣讲设计方案，告诉大家本次是终审，终审确认后，将会进入视觉设计阶段，到时候将不再做轻易的结构与内容块定义的调整，让大家足够重视并对线框图达成一致。

在这三轮评审中，需要穿插多次小范围的讨论，比如可行性的评估，资源的评估，以及和产品经理反复去讨论需求和需求背后的意义。可以说，线框图的作用之一，就是为了讨论、确认，吵架，然后在一次次迭代与确认中，最终尘埃落定，推动项目进入下一环节。

交互设计师的挑战
挑战绝非在于线框图本身如何专业，或者把线框图做得如何快，而是在于对于需求的把握、挖掘与快速呈现，在于全程中对于各种想法的吸收与管理，在于能不能让大家都快速明白了解设计的原因和背景，并对方案达成一致。

不要让争议、问题带入到真正的实施环节，比如视觉设计，比如开发。
因为从投入产出比来看，把架吵到线框图阶段，是最高效最合适的。

不等于商业需求讨论环节，有很多有创造力的人，却不善于空想，对着商业需求文档，无法让创造力的脑细胞活跃起来，大家都只能对着产品经理的商业方案点头称是，但是到了线框图阶段，具体的产品原型会激发更多的想法，因此这个阶段，最适合进行产品开发过程中的第二次头脑风暴。

不等于视觉设计与开发环节，线框修改起来是非常容易高效的。而且它故意做得如此简陋难看，就是想把最核心的需求呈现给大家，这个产品是这样的，而不是这个产品看起来是这样的。

因为，“看”，“感觉”不可避免会带入很多主观的因素。同样是红色，有人觉得太鲜艳刺眼有人觉得热情澎湃，而恰恰在产品规划初期，我们是不希望过早去关注这些细节，我们需要先解决最核心的问题。视觉稿容易一开始就让大家陷入到各方向的讨论中，有人还在思考产品是不是需要再增加一个功能，或者在争论一个功能是否有足够的价值时，已经有人开始为“黄色”还是“红色”争论得不可开交。

另外，我们必须得承认，在视觉设计阶段，修改的成本非常高，视觉设计师是对每一个像素精雕细琢，产品定位的改变，也许对于他们是“灭顶之灾”，这可能会意味着很多个页面要重新开始设计，当视觉设计已经到了一定的地步时，视觉设计师对“修改”慢慢会变得有点抗拒，谁不喜欢自己生出来的孩子？如果一个视觉设计师不喜欢他生出来的孩子，那他可能不是一个合格的视觉设计师。但是交互设计师是很乐意在线框图上进行任何的可能性的探索，他会更加包容这个阶段涌入的任何想法，因为他明白这个是中间产物，而且看起来就不像“完美”到可以当成自己的孩子。

总结几句：
1. 线框图能够帮我们将需求具体化，从而引入更多的想法，完善产品；
2. 线框图能够帮助我们理清思路，怎么做，如何做有了更加系统化的认识；
3. 线框图制作起来非常容易，因此能够帮助我们在各种方案里评估和筛选；
4. 线框图是用来吵架的，交互设计师需要欢迎吵架包容各种想法，更重要的是对吵架进行管理。
5. 80%的时间并非在做线框图，而是花在需求的了解与讨论、多种设计方案的头脑风暴与尝试，设计的评审与确认上，但是这80%的时间投入让剩下的20%更加高效。
6. 作为交互设计师，在那80%里提升的空间会更大，很多时候，剩下的20%是自然而然的结果。

关于线框图还有很多问题值得讨论的，比如：什么阶段下开始做线框图，线框图制作工具与方法，几种不同的线框图的作用等等，就不过多讨论了。以上的部分也欢迎继续探讨。

原文作者：Heidi格物志
原文连接：http://heidixie.blog.sohu.com/151623325.html

或许这些文章您也喜欢：

• 交互设计师的专业度表现 (0)

Related Posts

• 交互设计师的专业度表现(0)

Recent Comments

• 厦门月饼团购 : 线框图或流程图在设计时应该留有余地 这样如果以后有新的产品需求时PM才能更方便的改进
• 淘宝网女鞋 : 不错支持下！！ /鼓掌
• 创意设计 : 每篇文章都是这么专业
• 北京装饰公司 : 念宏的文章写得都很专业，每次浏览都小有收益。支持....
• 炎黄软件 : 还没看完，先顶一个！

一直以来，交互设计师都是一个受到广泛质疑的岗位，很多人不了解交互设计师的价值，更直接的说，我们大多数的交互设计师没有表现出足够的、令人信服的专业度。

大约五年前选择了这个职业，一路走来，质疑过、探讨过，也争辩过。和很多交互设计师一样，我也有过盲目自信和茫然失措，历经时间的鞭挞后，渐渐的我对这份工作、这个专业，有了一些个人的感悟……

从我的理解来看，100分的顶尖交互设计师们通常天赋异禀、特立独行。但75分的合格交互设计师们却有迹可循，完全可以看作是流水线生产的标准件，今天，我和大家聊的就是这些75分交互设计师的专业度体现。

·交互设计师的基本素质

首先，谈谈我个人对交互设计师基本素质的看法。从我个人的理解来看，可以简单归纳为九字诀：“听、看、想、说、磨、做、验、写、讲”（如图1.1）。

图1.1

1）听：做一个交互设计师，最重要的一点就是要懂得倾听（这里蕴藏了一个隐晦的性格属性：谦虚！）。通常情况下，我们不是用户，所以很难100%代表用户，更左右不了老板，所以我们首先要有听的本事，把来自用户的、老板的、PD的、视觉的、前端的、开发的、测试的、市场的、业界的等各方面的声音都听过来，听进去。

2）看：99%的情况下，交互不是一蹴而就的创造工作，它是站在前人肩膀上不断迭代更新的行为过程。我这里指的“看”是要求设计师能博览、能泛猎，看到好的，见过差的，什么都略懂，交互才能变得很美……

3）想：交互是思考的输出产物和表现形式。当设计师将之前听到的和看到的内容在头脑中加以整理、分析，经过发散的创造性碰撞和严谨的逻辑论证后，逐渐得到了相对靠谱的交互产物。这个思索分析的过程贯穿于交互设计工作流程的每个环节。

4）说：一个能说会道的人不一定是一个优秀的交互设计师，但一个优秀的交互设计师必然是一个善于准确表达自己想法和观点的人。在这一点上，我坚持交互是一门分享的学科，需要的是开放的性格和良好的沟通技巧。

5） 磨：耐心、技巧、热情的综合表现。在一个项目的进程中，不可避免的会面临很多的挑战，优秀的交互设计师善于发挥“磨”的精神，他们怀揣对交互专业的无比热情，以无所不用其极的技巧，耐心的缠死一个又一个质疑方，最终让大家认同并帮助推动设计的实现。通常来说，一个优秀的交互设计师会是一个优秀的Idea推销员。

6） 做：交互设计师专业度的核心表现。俗语说得好，是骡子是马，牵出来遛遛。对于交互设计师来说，之前的环节做得再好、再完美，也只是停留在设计师自己的脑子里，游荡于听众们的耳膜间。如果理论落实不到实际，那所有的想法都只是空中楼阁，你之前所有的努力都只是在佐证你的空泛和不切实际。所以我们不仅要能“做”，更要“做”得漂亮，“做”得完美！我一直都是这样认为：“做”决定了一个交互设计师是不是靠谱，决定了一个交互设计师的高度，是一个交互设计师最根本的专业素质。

7）验：用户体验设计，最终是要落实到用户的身上的。客观中立的验证、分析、评估能力是一个优秀交互设计师的重要素质。无论个人还是团队，设计的成果都需要通过精准的测试才能算得上合乎标准，此时，一颗平常心和一双敏锐的眼睛是设计师最需要的。

8）写：分析、归纳和总结能力的综合表现。一个项目，无论成功还是失败，总是有很多地方值得设计师本人或后来人借鉴。交互设计之路不是一座苛求零失误的独木桥，但绝对是一条要求零“重复”失误的单行线。评价一个设计师的专业度，很重要的一环就是看他能不能多犯前人从来没有犯过的错误，并能有效总结给后来人。于是，他就成了大家，路就这样被趟了出来……

9）讲：演讲能力。这里所指的是在项目后期进行的交流分享。一个专业的交互设计师会站在宏观的高度上，以平和的心态同他人沟通，验证自己先前设计的合理性、全面性和科学性，更好的提高自己的专业能力，为今后的交互设计做好准备。

·交互专业度的具象化表现

刚才讲了很多，但总体来说还是偏理论，还是让人摸不着头脑，虚幻的概念最大的优势在于它的颠簸不破和四平八稳，谁也揪不住它的小辫子。但这不是我的风格，更不是我写这篇文章的初衷，我希望的是抛砖引玉，给大家带来一些真正意义上能直接使用的东西。所以，接下来，我们来些“干货”，玩点简单粗暴的……

图1.2

根据阿里巴巴目前的产品开发流程（如图1.2），交互设计是大环节中的一个小点，抛开杂乱的干扰信息，单纯考量交互设计师在过程中的参与度，我们就能得到一个理想化的交互设计行为流（如图1.3）：

图1.3

流程没什么好讲的，更没什么好争辩的，无非也就是增加一个、减少一个、偷换概念、细分归纳之类的忽悠。我这里想和大家分享的是流程中每个环节的专业输出物，我有一个激进的想法：如果某人能精准的完成某些公认的标准化输出物，那他99%可以被称为是一个“专业”的75分交互设计师了，剩下的1%，也许是拼RP……

这里，我先简单交代一下即将涉及到的流程节点、对应输出物的图形色块的代表含义。

1）流程环节说明（如图1.4）：

图1.4

2）流程环节各输出物说明（如图1.5）：

图1.5

在我看来，一个专业的交互设计师，在一个理想化产品设计的过程中，有一些是属于必须的输出物，有一些属于最好有（推荐）的输出物，还有一些属于可有可无的输出物。同时，根据项目的实际情况和参与角色的分工情况，存在一些交互设计师可能需要负责的输出物，具体细节我将在下面逐一介绍。

1）需求获取阶段：

此阶段通常来说会由PD等外部资源发起，输出物主要是FRD文档和时间计划文档，用以描述问题、提出初步目标，假想可能的解决方案、预估资源并梳理时间计划等。当然，对于从UED内部发起的项目，这两部分的输出也可以由交互设计师完成，属于可能责任输出物；

2）需求分析阶段：

历史数据的关注和分析阶段，基于项目本身，要针对竞争对手、行业现状等做详尽的收集和分析，其中的关键考核点是要做必要的头脑风暴，获取发散而全面的信息集合。在此阶段，竞争分析报告和头脑风暴输出物是交互设计师专业度的重要表现。

3）用户访谈阶段：

对于一些条件允许的项目，我们建议能在项目初期寻求一些用户的信息，定义一些用户的属性，这些对于之后的交互设计都会是坚实的基础。一个高专业度的交互设计师甚至会主动介入访谈问卷的设定工作，客观的参与调研报告输出的全过程。

4）需求修正阶段：

专业的交互设计师通常不甘于沦为一个纯粹的资源，抗拒被动的接受命令。我们之前经历的需求分析和用户访谈都是为掌控主动权而做的准备。如今，我们有理有据，应该主动出击，和需求方讨论研究需求的合理性、可行性，明确最终的修正目标，并对达成目标所涉及的重点突破点有理性的分析判断，筛选出各设计点的优先级。

5）设计草稿阶段

项目目标和设计方向确定下来后，我们将进入核心的设计环节。作为交互设计师的“杀手锏”，交互流程和线框草图当然一个都不能少，但此时我更想强调一项辅助性质的调研分析工作。从交互的角度来看，在大流程大框架敲定的情况下，交互设计师通常会投入更多的精力在一些核心的设计点，也就是我们在需求修正阶段确认的设计重点。此时，专业的设计师绝对不会拍脑袋设计，更不会想当然出方案，而是会针对这些核心点做业界调研和分析，为自己即将进行的设计寻求一个足够宽广厚实的肩膀。

6）设计细化阶段

第一阶段的设计工作将在此阶段性输出。我们回顾一下，截止此时的设计产物有：用户调研报告、FRD确认文档、交互流程、线框草图、核心设计调研分析、核心设计详细说明、交互流程整体说明等。基本上，一个交互设计师的专业度，已经可以根据此时的输出物数量、质量看出个大概齐了。

7）专家评审阶段

一个专业的交互设计师，要谦虚。此刻，我们进入小范围专家评审的阶段了，三个臭皮匠还顶一个诸葛亮呢，更何况是参与评审的专家呢。此时设计师的专业度就体现在 “听”、“说”和“想”这三诀上，耐心的做好评审记录，有理有据的同专家们进行专业沟通，并确认最终的结论和方向。

8）设计优化阶段

经历了专家团的考验，又该抖擞精神重新上路了，没什么好说的，把过程做好了，你的专业度也就到位了。设计优化阶段的投入度和产出将直接影响到后续Demo及测试的效果，和最终设计也息息相关，各位交互设计师们，千万别打瞌睡了！

9）仿真Demo开发阶段

终于到了仿真Demo的模型化阶段啦，这时尽管并没有直接的交互输出物，但还是需要交互设计师用百分百的挑刺精神，协助视觉和前端精准的达成我们之前的设计，严格保证最佳的输出效果。

10）测试验证阶段

仿真Demo出来之后，将进入最后的测试验证阶段，根据项目的实际情况，可能是QA测试，也可能是用户测试，总之，这个环节能帮助设计师最后把关设计的合理性，专业如你，一定要亲自跟进测试并给出最终的评估报告，哪些点是前期没有考虑周全的？那些点是成功的？哪些点是必须立即改进的？哪些点能以后再说？哪些……

11）完成设计阶段

最后的设计阶段，根据之前的测试验证评估报告，交互设计师要对所有之前的输出做一次严格的检查和修正，完成最后的输出。

12）开发上线阶段

盯紧视觉设计师和前端工程师吧，最关键的时候终于到了，经历了那么多纷繁复杂的环节，我们等的就是上线的这一瞬间。当然，千万别忘了后续的跟踪和分析，这能为你的专业度加分不少哦！

·总结和展望

综上所述，我们已经整理出来了体现交互设计师专业度的过程输出物了，总结一下：以75分交互设计师的标准来看，我们的专业度能通过以下的关键输出物衡量：FRD目标确认文档、竞争分析报告、头脑风暴产出物、项目初期用户调研报告、核心设计点调研及分析报告、专家评审报告和评估报告、原型测试报告、交互流程图及详细说明文档、页面线框图、核心设计点说明文档和最后的跟踪分析报告。

基本上，所有的输出物都是反复易稿的结果，都是细碎过程的迭代输出，都饱含了设计师辛勤的工作投入。所有有梦想的交互设计师们，请正确的审视这些输出物，珍惜自己的付出，它们不光是单板的形式教条，它们更是证明自己专业度最有利的武器！

被很多同学都质疑过：那么多的输出物，平时做需求怎么可能全部做出来？每当此时，我的回答都是一样的：“是的，找借口总是很容易的。大家的确都很忙碌，按季度来说，基本上每个人都会经手大大小小几十个需求，但我们真的忙碌到输出一个高质量设计的精力都没有了吗？还是我们打心里就本着做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互设计这个职业最可悲之处……

上文仅代表个人观点，请各位看官不吝指正。转载标注“阿里巴巴中文站UED朱鹤群”

或许这些文章您也喜欢：

• 产品经理到底是个什么货色 (0)
• 苹果产品开发的绝密工作流程 (1)
• 聊聊线框图——为线框图多留点时间 (6)
• 用户是如何浏览你的网站的 (0)
• 更真实的理解用户 (0)
• 从Google和Baidu的调查统计看网页布局对用户体验的影响 (0)
• 网站项目管理规范手册 (0)

Related Posts

• 产品经理到底是个什么货色(0)
• 苹果产品开发的绝密工作流程(1)
• 聊聊线框图——为线框图多留点时间(6)
• 用户是如何浏览你的网站的(0)
• 更真实的理解用户(0)
• 从Google和Baidu的调查统计看网页布局对用户体验的影响 (0)
• 网站项目管理规范手册(0)

Recent Comments

• 53中文网 : 收藏了，支持一下
• 李谭伟 : 重庆的环境还需要慢慢培养。
• 昆明设计 : 很详细的资料啊。不错。
• 牛皮癣 : 是啊，是不是地址有错误了？？？
• QQ空间免费代码 : 为什么图片看不到啊！！！