一直以来，星座都深受年轻人喜爱。星座是什么？除了是一个标签，一个圈子，有时候，更是一种借口，一种寄托。了解了星座，也就读懂了自己，也读懂了别人。
12月，UC浏览器结合12星座和全新的品牌理念【给的再多，不如懂我】推出了UC星座专版，并推出了一款集格调、技术和传播于一体的《用星占卜》H5。根据后台数据统计，在这个H5中，约1/2的用户选择了再玩一次，约1/3的用户进行了分享，一时间，形成病毒性传播。
今天，UC浏览器营销策划组联合设计师、幕后研发，讲述我们是如何做出一款让1/3人点击分享的H5的。
关于创意——寻找用户兴趣点
由于星座主题本身并不是一个普适大众的兴奋点，而我们希望即使对星座不是那么感兴趣的用户也能够参与进来，因此我们首先想到的是，如何在结果页中，让更多的用户参与进来。于是，我们开始从时间、环境、星座上，开始分析。
方案1：结果页给出每个星座的特点。优点：喜欢星座的人会特别喜欢，如同道大叔有众多的追随者。缺点：不喜欢星座的人会比较无感。且星座的特点，存在如果准确，即比较难出新意，如果调侃，又会给人不准确的额感觉。:
方案2：结果页给出每个星座与星座间的匹配值。优缺点与方案1相似。
方案3：结合12月末，给出每个星座每个用户的得与失。缺点：与新年签太像。
方案4：创新。现在的8090后，最幸福的不是大富大贵，而是一个火锅，一顿麻辣烫，一次赖床，一个暖洋洋的被窝等这些可以握在手中的小确幸。于是，我们的方案便出来了。
除了得出一个很接地气的小确幸，我们我还增加了朋友间的打赏与互损功能。增加朋友间的互动与分享欲望。刺激用户分享。
关于设计——用写实和3D模拟浩瀚星空
整体的规划中，这个H5的结构大概由下面几个部分组成，第一部分是一个比较宏大的视角展示浩瀚宇宙，樊星闪烁。第二部分特写聚焦用户自己的星座，并进行可操作的3D展示。第三部分则是占卜出来的运势结果，可以与朋友分享和互动。
为了模拟宇宙广阔的空间感，设计风格上我采用了相对比较写实的做法。首先将空间分层处理，深邃的蓝紫色背景加上斑斓的星云，附上不规则的星光，形成最底层最远端的宇宙背景。前景和中间层则需要一些漂浮的星球产生近大远小的效果，他们的作用是造成看起来夸张遥远的距离感，这些星球则需要用到WebGL技术制造的粒子效果去模拟实现。12星座分布在这些粒子群的内部。
为了从一而终的整体氛围感，设计师决定在页面的首屏界面直接使用这个场景作为背景，这是第一次在欢迎界面的首屏尝试使用了3D的动态背景，也就是上面描述的这个场景，摄像机以较远的视角在空间中漫游。这个做法使得接下来的操作流程更为整体和一气呵成，避免了跳转带来的断层感。
关于技术——让用户以上帝的视角看星座
国际天文协会（IAU）以传统天文学为蓝本将我们头顶上的恒星们划分出了88个星座，而大家熟悉的12星座是这88个星座里面，位置正好处于我们看到的太阳运行轨道（黄道）上的那十二个，环绕地球围成一圈，因此在H5页面中我们也将这些星座按实际顺序排布在一个圆环上，摄像机（观测视角）在空间中沿着这个圆环轨道移动。
但问题是，我们似乎都只在地球上见过星座，以3D环绕的上帝视角看起来，一个星座的组成应该是什么样子的呢？星座里每颗星之间的距离、位置关系应该是怎样的？事实上，组成星座的每颗恒星间的距离都是极其遥远而悬殊的。
在查阅了一些资料文献、天文应用之后，设计师大致得到了各星座内天体间的相对位置，当然这个位置信息是非常模糊的，将其比例微缩到我们可观测的大小后，通过Blender这个3D软件将每个星座的结构排列模拟出来，将星座里每颗恒星的具体位置定位到空间里面去。Blender所生成的文件能够被前端和研发方面直接方便地提取到文件里的内容信息（X,Y,Z轴坐标）方便代码重构。到这个阶段，12个星座的三维化完成了。
将每个星座的坐标确定好之后，接下来开始实现的第二部分——用户选择星座并进行下一步操作，我们采用了一个 “理所应当” 的交互形式：镜头由远处拉近，聚焦在所选星座的面前。这里要提到的一点是，在我们重新排列星座中恒星的位置使其三维化之后，它们由一个平面变成了一团毫无章法的乱糟糟的星星，辨识度似乎更低了…为了解决这个问题，在进入所选择的单独一个星座展示界面时，我们会默认将这团乱糟糟的星系旋转到以一个特定的角度朝向你，你会发现熟悉的星座又回来了！是的，那就是他们朝向地球的角度。
以我们平时的视角看起来，星座本身并没有什么体积感——它们只是天空中一些二维的亮点。这导致了在我们的页面里面选择进入某个星座之后，并没有一个明确的因选择所带来转折的仪式感。于是我们在进入每个星座时都加上了一幅该星座的星图图腾。它的作用除了暗示你推进到了更深的一个层级以外，同时也使这个单薄的没有体积感的星系显得更为丰富饱满。
当然，这一切的顾虑都是在你手指滑动屏幕开始3D世界的探索之前。
在“把玩”够了你的星座之后，可以选择其中一颗恒星进行占卜，占卜结果多种多样千奇百怪并可以与朋友进行互动玩耍。
关于结果——有收获也有遗憾
H5一经推出，就呈现出了刷屏的态势，在口碑和分享上，都获得了一致的好评。从数据上看，用户开始点击测试后，流失率非常低。且有1/2的用户选择重玩，有1/3的用户点击了分享按钮。虽然在推出后不久，遭到了微信的静默，但在UC客户端强大的带量能力下，总PV也超过了1000W。
给的再多，不如懂我。UC浏览器正是因为有了一群脑洞大开，追求极致，死磕细节的营销、设计、前端和后端同学，通过一个个兼具趣味、逼格好玩的H5，践行着读懂每一个用户，每一个你的品牌理念。
（新闻稿 2016-01-07）
