3D落地 | 在业务场景中引入可交互3D

阅文体验设计YUX

上海/UX设计师/4年前/2414浏览

版权

阅文体验设计YUX

起点读书的3D运用场景探索。

随着设计趋势的发展，3D已经越来越多地进入用户的视野中，技术层面上的支持也让3D有了更多可运用的场景。起点读书作为一个书粉氛围浓烈的阅读产品，在近期对端内粉丝等级体系进行了一次升级，同时在本次升级中引入了可交互的3D形式，为作品的头部粉丝增加荣誉感。本文将归纳梳理从概念到落地的流程，分析3D对于用户体验及业务的赋能。

内容概览

PART1 背景问题

起点是一个有着非常丰富且完整的粉丝体系的阅读产品，经过多年的迭代，单本作品积累下来的头部粉丝越来越多，原有的粉丝体系已经不足以满足头部粉丝的荣誉感诉求。

一方面，以前的粉丝体系对于头部粉丝来说较为单一，达到盟主档位后不再有上升空间，用户后续积累粉丝值的热情会大大减少；另一方面，以前的粉丝竞争只存在等级上的差异，到达同一等级的粉丝缺少竞争氛围，用户对于「抢先到达」某个等级是缺乏概念的。（注：在单书消费满1000块可以达成盟主）

当一本作品的头部粉丝数达到四位数时这一问题尤为明显，粉丝们虽然处于同一等级却有非常大的粉丝值差距，所以粉丝体系的升级自然成了我们需要解决的问题。

我们的做法是，一方面在头部粉丝的等级上做更为细致的划分，另一方面在同一等级内引入粉丝编号制，既是对于竞争关系的强化，也是对头部粉丝排面感的强化。

（注：新的体系中，单书消费满1万块、10万块分别可达成白银盟、黄金盟）

PART2 设计选型

首先要明确设计目标——排面感、荣誉感。

什么样的形式更能体现排面感与荣誉感？在这里我们可以以大家熟悉的地图为例进行比较：

可以看到从左至右分别是线型2D图、面型2D图和体型3D图，从视觉冲击度的维度来说，很明显线——面——体一定是逐级增强的，从用户感知的维度来说，3D意味着立体感、和我们的三维世界相似，它的操控感、互动感一定更优于2D。因此在我们的诉求中要想表现排面感与荣誉感，3D一定是优于2D的。

另一方面，随着流行趋势的变化与技术的发展，3D也已经越来越多地进入用户的视野中，综合这些方面的考虑，跟随粉丝体系的改版，我们为头部粉丝设计了一套可交互的3D徽章。

PART3 技术选形

初期与客户端同学沟通需求时了解到，如果用客户端方式来实现可交互的3D效果，需要使用游戏引擎，虽然开发功能的丰富度很高，但成本相对也较高，考虑到本次诉求是偏展示型的交互，我们决定用前端的方式来实现。

在前端的实现方式中，three.js是比较成熟的一种，它的易用性和扩展性使得它能满足大部分要求，且three.js能够支持加载多种文件格式，不仅可以通过创建材质、贴图等来实现物体效果，还可提供灯光、阴影等底层功能，最重要的是引擎体积小巧，速度很快，可以在保证可用性的前提下保持较高的性能，使用这种方式也不会额外增加安装包的大小。

PART4 流程拆解

由于本次是我们首次在业务场景中引入可交互3D，因此在流程上做了较为细致的拆解。

· Step1 元素确定

由于改版后头部粉丝细化成了三个全新的等级，在视觉上，我们分别赋予了每一个等级新的基础型：四边形、五角星及六芒星。

· Step2 平面效果

在step1的基础上，将已定义的元素作为徽章的视觉中心。除了上面提到的三个基础型，额外增加了一个皇冠元素，用来给「首个通过单笔打赏达成等级的」粉丝作为奖励，每本作品都只有唯一的一枚，相对常规的白银徽章和黄金徽章，会更加尊贵。

· Step3 模型建立

平面的视觉效果确定后，如何从2D图形转换为3D效果是一个很关键的节点。如果只是做一个非常扁平化的立体徽章，很难达到我们想要传达的「尊贵感」，因此我们需要在平面图形上进行拆解转化。以黄金盟为例示意：

将平面中核心的六芒星图形立体化，将描边转化为整个凸起结构的框架，让中心部分呈现出镶嵌物的感觉，这样处理不仅在视觉上更具有冲击力，整个徽章也更有层次感，核心元素更突出。

用同样的方式将其他平面图形进行转化处理，建立3D模型如下：

可以看到转化为3D模型后，徽章中心的等级元素相对平面效果更突出，徽章的其他图形部分及描边也相应地做了凹凸处理，这样让整个徽章看起来更加硬朗、细节更丰满。

在文字转化的部分，正面背面的处理也有所区分，正面为了让文字立体感更强来呼应中间的核心元素，在凸起的表现上也会更强，背面是徽章的辅助信息，除了logo和等级，后期还需要增加用户信息和编号，所以在凸起的表现上会稍微弱一些。

· Step4 材质渲染

由于徽章需要传递尊贵感，在最初附加材质时对于镶嵌物和细节上的材质希望用玻璃表现出类似钻石的效果，以突显尊贵感。但在实际测试还原的过程中发现，玻璃在格式转化过程中存在材质丢失的问题，且含有玻璃材质的模型文件较大。考虑到最终页面表现非静态页面，需要支持用户拖拽、旋转来查看徽章，模型的加载速度也是一个很重要的参考因素，因此我们对材质进行了一版优化，舍弃原本的玻璃效果，替换为反光金属，通过环境光源的设定来实现对比效果。