大厂设计怎么做？“途牛直播”项目从0到1拆解！

设计工作当中，熟练掌握软件是最基础的需求，但想要进阶成为设计大神，还需要掌握最重要的一点：设计思维。

在面对一个新项目的时候，怎么去切入，怎么去执行，这都需要丰富的经验和设计思维，每一步都直接关乎着项目最终的成果。

那么，同样是做项目，大厂和普通企业的思维有何区别呢？今天，数艺君就给大家分享一个途牛旅游的直播项目。

今天，消费路径和习惯发生了很大的变革，粉丝经济正在潜移默化地形成一种新的消费形态。好的内容能够通过互联网产生强大的流量，用户在观看内容，以及收到由内容产生的商品建议和推荐，之后，可能会产生购买某些商品的欲望，进而产生消费。

(图源：网络)

其中比较典型的例子就是“直播”，但目前旅游类直播尚未有成功的案例，这意味着我们面对的既是机会，又是挑战。

面对一个陌生行业，在设计之初，竞品分析可以作为一个较好的切入点。通过竞品分析，我们可以了解行业的现状和未来发展的趋势，对业务背景有一个较为全面的认识，从而在此基础上提炼用户痛点，找到产品目标。

在直播项目中我们找到了如图所示的3种直播App的主流样式。其中“上下分屏”属于视频 App 最原始的形式，而“全屏”是目前市面上涵盖面较广，也较为成熟的形式。但这并不意味着“全屏”会全面取代“上下分屏”，因为“上下分屏”还是有自身的存在价值的。

竞品分析

下面，我们对“上下分屏”和“全屏”的优缺点进行对比分析，如图所示。“上下分屏”将直播模块与内容模块进行分屏设计，使内容区块有了足够的展示空间，也会被进入界面的用户第一眼看到，同时，横屏画面对于大场景和多人画面的表现力较好，用户可以通过二次操作展开成全屏模式观看。

但其与用户的互动性不够，画面冲击力较弱；“全屏”的内容模块一般是叠在直播模块之上的，它舍弃了内容的展示，而更注重画面质量和氛围感，视觉冲击力强，主播与用户的互动也更直接，且竖版画面更适合个人用户镜头，使用成本较低，但其对推送产品的展示不够直接，可阅读性不强。

“上下分屏”和“全屏”的优缺点对比示意图

经过综合分析后，我们发现，影视、演讲和授课等题材的产品，对获取知识的价值要求较高，而对用户互动的要求比较低，所以内容呈现上一般采用的是“上下分屏”的形式。

而开放给个人用户的产品则更注重趣味性和互动性，所以内容呈现上多采用“全屏”的形式。其中互动性主要以“互动窗口”的功能来实现。

只有语音而没有画面的“互动窗口”功能，成本较低，适合对画面质量没有过多要求的语音直播。同样的，“互动窗口”可以融入“上下分屏”或“全屏”里面，不过具体形式也需要根据实际的业务需求来定。如图所示。

“下分屏+互动窗口”与“全屏+互动窗口”对比

大概完成竞品分析后，接下来需要思考的主要是“我们想要做成什么样”“我们能做成什么样”等问题。

直播产品的整个项目周期只有45天，包含了前期调研、产品原型、页面设计、项目上线、直播品牌设计和初期运营内容等。经过与业务方的同事沟通讨论之后，我们共同设定了8个工作日用于制作前期设计方案，其中还包含前期竞品分析所需要的时间（大概两天）。

这时候，时间对每个人来说，都是很宝贵的。设计组只由一个交互设计师和一个视觉设计师构成，其余的组也只是由1~3人组成。按照传统的开发模式，每个阶段都不可能在规定的时间内完成。于是我们决定将直播项目拆分成一个个小的子任务，并采用敏捷开发的模式分迭代展开子任务的设计工作，如图所示。

这时，我们对市场调查和竞品分析的作用便显示出来了。它可以帮助我们对全部任务体量和重难点有一个初步的预估，进而更好地进行任务分工。

任务拆分与人效提升

1. 拥抱变化

此外，在整个任务过程中，每个岗位的角色都不是一成不变的。每个阶段的人效都在逐层提高，每个阶段的时间逐步缩减。因为我们会逐步学习前一阶段的经验，并运用到下一阶段。

在第一个阶段，交互设计师和产品经理共同梳理出原型图后，两人的工作会更有默契度；在第二个阶段，产品

经理可以通过口述或者手稿传达的方式让交互设计师快速地制作出原型；到第三个阶段即中后台的设计阶段，对视觉表现力的要求已经没有那么高了，交互设计师的水平完全可以直接产出视觉稿，从而让视觉设计师得到解放，让他们有时间去走查和优化体验，如图所示。

设计过程中角色的变化

2. 分工协作

先以视觉设计师为例。当任务还在需求评审阶段时，视觉设计师就应积极地介入其中，了解业务方向，同时也为自己后续的设计工作做充分的准备。在完成自己的任务后，视觉设计师也要推动其他环节的进度，保持分工有序，这样不仅可以集思广益，而且可以更高效地完成任务，如图所示。

项目分工协作

再举个例子，在测试阶段，我们发现4G环境下观看直播太费流量，最后讨论出需要增加一个“提示”窗口功能，以提醒用户在4G流量环境中观看直播时默认切换回“标清”模式。

又如，在研发阶段，我们通过提前与前端工程师进行沟通，将部分直播中的交互微动效，用输出Lottie动画的方式来代替研发编写代码，大幅度地减轻部分研发的工作量，提升项目的开发效率。

直播设计一般时间紧、任务重，因此需要我们对用户的核心需求进行统一、具体的筛选和评估。我们应该制订优先级，先完成核心功能，再分层次、有计划地完成其他次要功能。

毫无疑问，提升直播体验和拓展用户互动方式是直播功能优化设计的关键。因此，我们从用户端的“直播中”和“互动”页面入手，进而展开设计；先由视觉设计师完成若干初稿设计，然后和项目组进行反复沟通，确定视觉风格，最后再推广其他页面进行设计。

在视觉设计师进行风格探索的同时，交互设计师需要完成整个链路的梳理工作，将各页面和各功能进行串联，如图所示。

直播项目流程图

基于前期高效率的工作执行，在以上任务都完成之后，我们还利用了空余出的几天时间来思考直播设计的痛点。

我们要思考的设计问题就是设计的切入点在哪里。仔细想来，从营销导购到内容导购变更，更多的是从争“利”到争“人”，所以我们的设计点将围绕如何“吸引人”进行展开，具体主要表现在以下5个方面。

1. 增加观感，降低干扰性

在旅游行业，有“千句话不如一张图”的说法。而针对直播，则可以说是“千张图不如一段视频”。所以在图标的设计上，我们采用了“线性图标”的样式，文字背景也采取了“半透明”样式，这样不仅能够保证画面不被遮挡，也强化了内容自身的表现力，如图所示。

直播样式设计

2. 营造热闹氛围，诱导人气互动

这一块的优化运用了一些动效，可以让画面鲜活起来，而其采用彩色字设计用户名的方式，也营造了一个多人捧场的氛围，并增添了产品的娱乐感。同时，为了强化用户的参与感，当有用户进入产生“点赞”或“购买”行为时，屏幕上都能得到及时的信息反馈，如图所示。

直播样式设计

3. “导购”的色彩处理

途牛标志中的绿色、黑色和白色是整个设计的主色调，凡是与购物相关的模块都采用带有品牌属性的橙色，以此来增强用户了解相关内容的欲望。

4. 渗透行业特性和途牛元素

这一部分主要体现为购物袋里出现的世界地标建筑、点赞出现的小元素等，如图所示。

直播样式设计

5. 沉浸式观看体验

受国内各种视频App的启发，我们在直播界面的交互设计上坚持了“不中断直播”的操作原则，通过视频窗口的缩小、悬浮等方式，保证用户在进行其他操作的时候，依然能够保证正常观看直播，而不会出现中断的现象。

在项目快速迭代过程中，我们总结了一些经验，相信可以帮助大家少走弯路，更高效地完成敏捷开发。我们的经验主要有以下3个方面。

1. 组件复用

由于时间限制，对上文中提到的“分屏模式”和“全屏模式”，我们只能选择其中一种作为一期开发。通过之前的总结，以及基于其对新产品的冲击力、初期运营成本等考虑，我们决定先开发“全屏模式”，同时将项目拆分成3个子任务，并保持人员的循环投入，产出的分批交付。

同时通过对竞品的分析，我们发现，用户端涉及的页面体量较大，主播端与导播端可以复用它的绝大部分控件，我们可以在设计用户端的同时，产出设计规范，从用户端入手进行产品设计，其所产出的控件可以在下面的子任务中复用。

2. 规范制订

常规的规范制订流程就不在这里一一复述了。在架构方面，我们将页面分为临时层、结构层和背景层3个维度，这种结构的划分能帮助我们在制订规范时避免遗漏，对于研发部门来说也更容易理解，如图所示。

页面架构示意图

不同的交互规则对应的设计规则的定义也不同。直播类页面不同于我们通常见到的销售链路，它的触发规则多种多样，这里我们也尝试着对此进行定义。如图所示的是对话区的一个规则情况。

直播交互规则定义

3. 迭代优化

项目上线后，我们还需要面对上线后的问题和后期需要完成的迭代任务，这个阶段设计的侧重点主要转向“试错”和“迭代”这两个方面上。

其中“试错”是敏捷开发的方法之一。由于对直播类项目经验的缺乏，很多的方案都是“摸着石头过河”，需要通过试水市场和真实场景测试，再对已有方案进行循环优化，从而逐步完善业务的整体体验。

例如，对导播端的设计，在一开始我们只是理想化地把导播认为是主播的助理，功能点也只是主播端的缩减版。产品上线后，我们发现导播端其实需要更强大的功能支撑，如发红包、筛选用户问题等。用App端显然无法承载这么多功能，于是在后期我们将导播端改成了PC端。

设计师自驱的体验修复，可以先将动机拆解为局部功能和全局体验这两类。针对局部体验来说，上一版本遗留问题是可以通过快速迭代来解决的。针对全局体验来说，历史遗留问题与版本功能无关，属于基础体验，而且一旦修改，就需要梳理整个产品所有的场景。

相关文章：