思路2：通用化支持场景化

通过通用的框架，搭配已有的通用能力资源，解决各种专业场景下详情页的需求。这就要求详情页框架必须满足两个特征：高度抽象化、高复用性。

1. 高度抽象化：与单个业务场景的耦合度低，框架、能力支持保持一致，详情页的类型决定著具体需要的信息、能力以及操作；
2. 高复用性：扩展性高、灵活性高、包容性强，通过对详情页信息、能力、操作的组合即可满足不同的业务场景，并预留足够的扩展空间。

当整个详情页框架充分满足了以上两点要求后，我们便能很容易地看到利用通用化支持场景化的方向对比垂直定制 有以下几点明显优势：

1. 覆盖场景广。高度抽象化的详情页能够通过对其中的信息、能力、操作进行自由组合，从而满足任一业务场景，每当切入一个新场景时，能够快速地提供相对应的详情页支持。
2. 与用户需求匹配的过程更流畅，更敏捷。内容可进行灵活调整，与用户需求磨合的过程缩短，并且在基础业务场景满足的情况下，自定义能力能够灵活响应用户的个性化诉求。
3. 节省各方成本，释放资源。足够通用的框架能够节省大量调研、设计、研发和维护的成本，这不仅能提高详情页相关的需求响应速度，更能释放出的资源以投入到更为核心的问题上。
4. 投资回报率提升。覆盖面扩大，成本降低，资源释放，需求响应速度提升，需求匹配度提高，投资回报率自然会随之提高。

当新的详情页框架投入使用后，详情页相关的需求响应的过程便会变化为下图所示：

1. 接触到一个新场景。
2. 调研用户场景。
3. 利用已有的通用模块配置符合场景的详情页方案。
4. 快速与用户需求进行匹配验证。
5. 快速收集反馈，并调整详情页配置，响应反馈。
6. 完成对新场景的详情页支持。

整个响应需求的过程将会更加敏捷、灵活、有效。

这便是为什么我们需要一个新的详情页框架的原因，它不仅对产品设计、落地很友好，还能更好地帮助产品产生价值。

设计目标

为了设计的过程中能够更加清晰、明确，我们围绕上述产品目标列出了下面几个设计目标。

• 保证框架的复用性
• 使模块排布更合理
• 保证模块的复用性
• 保证模块的扩展性

设计过程

接下来围绕上述 4 个设计目标，展开本次设计的过程。

1. 保证框架的复用性

要确保框架有足够的复用性，最重要的一点便是让其中每个信息模块都高度抽象，并且信息模块要足够细化，覆盖面广，确保每种类型的内容都有相应的模块承载；要做到这点我们就必须回答如下几个根本问题。

1. 是什么？
2. 在哪里？
3. 能去哪？
4. 有什么？
5. 能干嘛？

我们通过具像化将抽象的问题转化为具体的界面模块，会得到下面这些信息模块，从一定程度上给了我们一个如何回答上述问题的模版。

1. 是什么：类型区
2. 在哪里：路径区
3. 能去哪：跳转区
4. 有什么：信息区
5. 能干嘛：操作区

除了上述 5 个模块，我们还需要一个记录变化过程的动态区，其中承载著包括系统动态、日志、评论等等内容，在这里你可以了解到当前详情页的前世今生，这有助于将围绕此详情的协作过程具像化，可追溯。

当我们确保新的详情页框架拥有 类型区、路径区、跳转区、信息区、操作区、动态区 后，只需通过调整这些信息模块中的具体内容，便能满足不同场景下的业务需求，基本上确保了新详情页框架拥有足够的复用性。

2. 使模块排布更合理

现在我们手上有了类型区、路径区、跳转区、信息区、操作区以及动态区，下一步便是如何将他们更合理地组织起来。

首先，「类型」模块是一个较为特殊的模块，如果类型发生变化，当前详情页携带的信息、操作、跳转入口均会随之变化，但未改版前的框架将类型弱化为信息区内众多信息项中的其中一项，仅作为一个属性存在，这显然是不合理的。

所以在新框架中，「类型」成为了一个对象中的核心角色，它决定了当前的对象是什么、有什么、能干嘛、能去哪。

我们还对一个区域进行了位置的调整——动态区。

在旧方案中，动态区处在数个区域堆叠的最末端，每次查看或评论时，都需要往下滚动到最末端，我们发现这条动线是较为不合理的。在一个任务的开始、执行、完成、回顾四个阶段中，每个阶段都会催生协作评论的需求，使用动态区的过程应该拥有一条独立于任务编辑的动线。

于是在新的方案中，动态区作为一个与对象信息区并列的区域存在，不再与信息区耦合，确保协作沟通享有自己独立的一条操作路径，同时传递了 Teambition 随时协作的概念。

同时，考虑到部分用户的使用习惯，任务信息区携带信息过少，更多地是在动态区进行协作沟通，文字记录，我们保留了单栏的方案作为偏好设置的切换项，以兼顾该部分用户的习惯。

新的排布方案，不仅使得每个区域的耦合性更低，更在一定程度上释放了在垂直空间上信息堆叠的压力，这为确保框架的复用性及扩展性奠定了基础。

3. 保证模块的复用性

若需要保证整个框架的复用性，我们得使得组成该框架的模块尽可以多地可复用，当足够多的模块可以拿来即用，成为可复用的 SDK，便可以使我们面对不同场景时，快速地通过组合模块来搭建一个符合场景的对象详情页。

那么第一步，我们得找到什么模块可以复用。我们需要对模块进行进一步地拆分细化，找出可以通用的最小单位，以及不同类型的对象详情页之间形成主要差异的模块。

从上图我们可以了解到，栏位区、通用操作区、业务操作区 为不同类型的对象详情页之间形成主要差异的模块，而其他的便是有成为 SDK 潜质的模块，它们的实现逻辑、交互方式、组成元素、界面样式均不会随著类型的变化而变化，可以达到真正拿来即用的程度。

4. 保证模块的扩展性

而 栏位区、通用操作区、业务操作区 这几个区域会随著类型的变化而变化，他们便是类型之间形成主要差异的模块，如果我们希望保证模块的扩展性，实际上便是保证这几个区域的扩展性、灵活性。

对于操作区来说，通用操作区、业务操作区共用同一块区域，新方案中通栏的设计为操作区的扩展提供了一定程度上的保障，并且如果存在过多的操作，它们可以聚合成为一个「更多操作菜单」，这更确保了操作区的扩展性。

对于栏位区来说，不同的类型携带著不同的栏位组合，而且可以通过「自定义能力」新增我们需要的栏位信息，对于信息承载量的扩展性已经得到了保证，但是我们需要面对的是解决展示的问题，若承载的信息过多，阅读的效率便会成为影响框架扩展性的一个很重要的因素。

下面我们通过三个方向去解决栏位展示的问题。

• 释放信息堆叠压力

首先我们已经为动态区新增了独立的一块区域，大大降低了垂直方向上的信息堆叠压力；除了调整整个模块的方式，我们也可以通过对模块内冗余的信息进行处理，将一些未使用、已处理的内容进行折叠隐藏也是一个有效的方式。

• 保证信息的优先顺序

文档，是信息展示方式中最自由的一种，你能够完全决定你所产出的内容在什么位置，通过理想的顺序去阅读它。我们希望 Teambition 的详情页也能给使用者这样的感受，栏位在旧的方案中已经支持了自由排序，我们在新的方案中加入了模块之间的排序能力，彻底地能够让你自己决定信息的优先顺序。

• 使得信息更易触达

除了对信息模块的排布做处理，我们还可以通过一些设计手段使得这些信息更易触达。在新方案中，我们大大增大了信息的展示区域，这让更多的信息能够一次性地暴露出来；其次，我们为了让用户能够更快速地到达某个模块，而不用通过滚动在堆叠的信息中找到某个模块，在新的方案中，快速定位能力能够帮你做到这一点。

当我们通过以上的方式确保了栏位区和操作区的扩展性时，整个详情页框架的扩展性也将得到保障，无论面对再多变化的场景，它都能灵活应对。

结语

以上的一系列步骤，便是我们搭建更包容的详情页框架的过程。

搭建设计框架的过程实际上是在制定规则，但制定规则永远不是我们的目标，它只是助力产品成功的其中一个手段。之后，详情页框架还将不断地优化迭代，规则也将越来越完善，我们的设计过程也将越来越高效。

但如果身为设计师的我们不去思考采取不同设计手段背后的意义，而过于依赖和享受设计规则带来的成果和便利，那设计师能够发挥价值的空间将被不断挤压，无法创造价值的商业设计师，终将会被这个时代所抛弃。

做设计决策并不难，拍一拍脑袋就行。但困难的是做出设计决策前的思考，以及验证思考结果的方式，这个过程决定了你作为一个商业设计师的意义所在。

One More Thing

我们现在正在寻找各种类型的设计师，如果你也想加入 Teambition 设计团队，和我们一起做些有价值的事情，欢迎私聊～

推荐阅读：