twitter的特点是什么（Twitter功能设计流程全程剖析）

译者总结：

在这7000字文章中，Twitter设计师展示了严谨的设计流程 以及 设计开发协作心得。

Twitter设计流程值得学习的几点：

1.原型设计驱动设计方向，可交互、便于测试、确定开发可行性。

2.注重设计与开发的沟通，将很多设计师来做更好的开发工作转移给设计师，项目跟进扎实，与其在AE中死抠“设计”细节，不如简单制作大致原型，尽早协助开发调节效果，制作“产品”

3.精雕细琢，750 静态设计变种，54份原型可见细心程度。

4.问题汇总，bug发现，用户测试并非与设计师无关。

5.任何棘手的实现问题，多揪着开发问，很多小发现影响却很大。

————————————————————————————————————————————————————

在2011中期，Twitter率先推出原生功能——发布照片。2013年，Twitter为用户带来了随时间推送媒体信息的功能——时间轴信息流（Timeline）。2014年，Twitter开始支持发布多张照片和GIF动图。最近，我们发布了Twitter 30s段视频功能——Twitter Video，通过这一功能，可以帮助用户使用iOS和Android上的Twitter应用，捕捉生活生活瞬间。

作为这一功能设计的参与者之一，我非常有幸的见到了Twitter视频功能的发布。这得益于设计师、产品人员、工程师的精益协作，当然还包括一些分散在其他办公场所的贡献者（主要来自我们的西雅图分部——our Seattle office)。我要向我的产品和工程师，也就是Joy Ding和Jeff Currier致敬。

看看连线杂志是怎么评论Twitter视频功能的—— what WIRED said about Twitter Video.

我的Nexus 6 和 M2 stand支架，上面运行着Twitter的视频功能，后面摆着一堆测设备

“唯一能确定的是：向整个团队展示真实、可交互的原型，便是最佳的沟通手段。”

在这篇文章中，我将带领各位管中窥豹，了解Twitter视频功能设计所经历的流程。这篇文章主要讲述的不是枯燥的草图和模型迭代。这篇文章重点讲的是原型设计。

我之前曾经写了一篇文章——Provide meaning with motion（赋予动效含义），在那篇文章中我举例说明了为什么设计师需要通透考虑动效和原型。大约也是在写那篇文章之时，我开始喜欢上了Framer.js和Framer Studio，便利之处便在于移动端可交互原型。这段机遇让我受益匪浅。那时我还不知道这款工具会在日后我的设计流程中起到关键作用。

但是我们的原型设计并不仅仅局限于Javscript原型制作，除了FramerJS所实现的原型外，下面我会提供更多细节以及一些动图，这些动图是我们iOS原型设计团队在探索概念、尝试设计的过程中使用原生iOS代码所实现的效果。

PS.如果视觉设计、动效设计、原型设计是你的兴趣所在，那么欢迎应聘Twitter——Twitter is hiring.

什么是Twitter视频功能？

在Twitter，我属于相片和视频团队，我们与Expression团队（@TeamExpression）、私信团队和开发团队一道，努力构建优异的用户，为用户提供表达、展示的工具。

Twitter平台极具公众性，信息量大且实时发布，受众极广。我们需要设计原生的视频功能，让用户能够捕捉生活的美好瞬间，然后向世界分享。

这便是我们对于视频功能的看法。

我们开始设计30秒视频功能——30秒能够承载很多信息，同时又足够短，让其他用户可以快速预览。在设计时，我们需要审慎考虑这一体验的权重，向用户提供这一较为高级的功能。尽管我们能够支持更长的视频，但是我们希望用户所拍摄的视频质量小而精，而不是一种应付了事的拍摄体验。因此，我们设计出简约的界面，帮助用户记录生活中的片段，同时尽量减少拍摄时进度条充满所带来的压力感。

仔细品味这一产品设计，它对沟通所起到的作用令人印象深刻，仅有一个界面。更令人印象深刻的地方在于，录制和发送设计的十分简洁，可以快速的满足视频分享需求。

连线杂志

所设计出来的原型给谁用? 原型的作用在于体验感受，验证交互设计和概念。我通常会把一些早期原型给我的经理Brendan Donohoe看，也会给一些同事看，进而听取他们的批评和意见。

一份可以交互的原型胜过上千场毫无价值、扯皮的会议。

为何采用Framer作为动效工具：因为我有前端开发背景，因此我能够熟练使用Javascript。我不想因为不够熟练而被限制住，因此我没有使用其他工具；使用CSS/HTML/JS，你可以构建一切。

迭代版本一

这个迭代版本主要进行一些尝试。主要考虑的几点是：导航，录制进度提示，拍照和拍摄模式之前的切换，思考长短视频的功能，思考编辑功能。

我们首先发现的一点是，观看竖屏体验其实不好，对于timeline来说竖屏视频太高了，而且用户需要开启全屏才能较好的欣赏视频，而如果我们缩小视频尺寸，添加黑边，效果更不好。我们不鼓励在Twitter中拍摄竖屏视频。因此录制出来的视频是正方形的，但是用户依然可以导入Camera Roll中已经有的、高宽比不一的视频。

我的第一版设计只有两个页面切换：录制视频，然后返回，在第二页中重播、重排列、删除视频片段。似乎看上去逻辑很合理。录制模式有着简单的蓝色进度条，机理是按压录制。编辑页中的体验略像幻灯片，每5秒一环。这种设计的好处是，哪个视频长，哪个视频短，一眼即知。

Avi和我讨论了最后一个迭代版本，视图找出将多个视频片段融入单个界面的办法。最终我们想出了一个办法，每份视频片段只显示第一帧，按压后，录制区域会播放所选片段，并且显示录制状态。

在讨论的第二天，我去找Avi，我发现他走的更远：除了我们讨论的那些，他还实现了自动播放，单个视频片段循环功能。

唯一的问题？我们还没有构建出真实的视频界面。

我又去了iOS原型团队。Avi和David构建出了一个“假”APP。当然，用户是不会知道的。其他屏界面我都用真实的静态素材进行了替换，我告诉Dave如何引导用户进入视频功能界面。

Dave Dearman 开始询问每个调研参与者个人信息和兴趣所在，以及他们是如何在其他服务中分享视频的。从而了解Twitter应该如何调整视频分享流程，以便了解何时用户需要使用Twitter视频分享功能。他擅长让用户畅所欲言，从而获取真实的反馈。他会跟用户说“这是内部Build版本，还没上线，你可以随便批评。”

原型里面的有些地方还没加上功能，Dave会问用户诸如“如果你想删除视频片段，你希望采用什么样的操作来删除？怎样让你觉得用起来更舒服？”

现场观摩可用性测试令人大开眼界，当你设计时，你会抱着主观的心态，当你的设计到了用户的手上，一切都变得客观。我在我们西雅图分部实时观看Dave可用性测试（他在旧金山）的流媒体视频，同时根据用户反馈记录了一些有价值的点。

经验教训

1.当用户看到多个视频片段，并被问之“你觉得如果你点击它们，会发生什么？”的问题，有些用户会认为只会向最终视频中添加所点击选中的效果。实际设计是，每个视频片段都是最终视频的一部分。

2.当展示迷你幻灯片——也就是视频片段长度看起来比较长的那个版本，用户感到非常的困惑，它们认为他们可以任意裁剪视频。但实际不能，用户感到非常沮丧。Dick在之前的会议中也指出了这个问题。

3.每个人都知道怎么打开摄像机，切换视频模式，熟悉按压录制的设计模式（当你按压的时间不够长的时候，提示条会出现），当提示条变红的时候，会提示用户30秒时间快用完了。

4.当用户被问之“你认为视频限制时间是多少”，很多用户没有使用过，但是就已经猜到了是30秒。

5.原型不带有录制和删除视频片段功能。当询问用户他们所预期的删除效果时，很多人希望能够有拖动删除效果，当拖拽出视频片段区域时，便可以删除。还有一个家伙画出了一个向上的直线，意思是可以类似iOS的任务切换，上滑删除。

问题修正

我们需要让每个视频片段看上去得感觉是整体的一部分。为了让整体感更强，我为每个视频片段都加入了蓝色覆盖层。因为如果自动播放一个接一个的播放，蓝色进度覆盖层如果仅仅展现在单个视频片段上，会让人感觉这不是一个整体，感觉选中的那个片段会被发送出去。

我添加了全局的回放进度条，展示整体视频的播放进度。如果你有4个视频片段，长度均等，当你点击第二个片段的时候，进度条会从25%开始，读取到50%。Avi和Dave关于给予了一点建议，他们建议同时在进度线上加入一些标示来让用户知道所处的片段。

为了体现整体感，削弱独立感，我们将视频片段的距离减小，在开始和结束的片段上进行形状处理——加入圆角，而中间段没有。David Hart做了一个很好的原型(最后演变为最终实际代码的一部分)，当你移动视频片段或拖起的时候，圆角会产生动画。拖起的时候，所选片段四角都会带上圆角。

调整&完工

“细节不仅仅是细节，细节成就设计”——Charles Eames

可用性测试的结果证明设计方向无误，也没有什么大的可用性问题，我很高兴。

目前为止，新的设计完全就是个原型。而目前Build到的地方是老版，旧版Twitter设计加上计时器，以及第二页预览/编辑页。可用性测试环节验证了我们的设计概念无误，而且解决了我们设计中的一些小问题。

Jeff, Joy和我与团队中的其他同事进行了开发预估——大致预览一下将设计中的细节实现大概要花多久——然后向Dick和执行委员会汇报了研发排期，顺便了解一下他们的喜爱那个发。他们很喜欢这版设计，我们便朝这个方向开始推进。

通过前面的原型驱动设计迭代的设计流程，我们一步一步改良设计，达成了第一版视频设计。如有必要，我们依然会修改设计，而不会为了赶期而牺牲设计质量。

我们养成了每天早上核实JIRA上问题的习惯，解决后问题不会关闭，直到等到下一个build版本。因此经常会用拍照会拍视频来记录问题（我个人喜欢拍视频）。我们还和QA质检紧密协作，以便找出多设备适配存在的一些问题。

与工程师紧密协作非常非常关键，测试，问题追踪要严密关注，这和你的设计能否100%实现很有关系。

结语

Twitter视频功能的设计和研发成功，很大程度上得益于设计流程中的原型设计。同样离不开才华横溢的开发团队。当你看到周围的人都在使用你打造的产品时，感觉棒极了。这就是我喜欢在Twitter工作的原因。

来源：UI中国

,