文丨
大纸箱子
腾讯互动娱乐 设计师
// 导语
《天涯明月刀》手游突破版（以下简称天刀）上线了，所有界面重构，动效也随之一并重做。2017年笔者毕业找了一份UI设计的工作，只因同事请假被迫顶替了她两天的动画工作，从此踏上了界面动效的这条不归路。7年之期已到，恭迎······（不是） 从自学unity的野路子投入工作开始到现在，我想和你分享一下当我接到需求时，我都在想些什么。
在工作中会常常听到这些话，不知道能否让你产生些许共鸣。很多时候，动效工作并不全是制作大场面，而是会有很多细碎的部分穿插其中。策划同样的一句话，应用到界面中时，需要如何制作？第一步，我得先理解需求。
这是我在项目中找到的刷光，各自都有不同的用法和表现的意义。刷光的作用，在于强调、提示。用于突出在同类元素中具有独特性质的那一项，用于提醒用户关注某一信息，用于表现某一信息的更新等等。或是快速的强烈的，或是缓慢的安静的，同样是刷光的类型，各种需求下必然会做出不同的、贴切的表现形式。
我们再来看看大场面，这是天刀的游剧情界面。策划希望的是关于少侠在江湖上发生的一切都会被记录在这个场景中，交互和UI设计将不同的功能部分分布在了不同的方位。
主页面上，尘世镜破成了碎片漂浮在空中。不同章节中，碎片随着剧情完成度的比例而与尘世镜有着不同的距离，当剧情完整探索完毕，当前章节的尘世镜将破镜重圆。
详情页面，在一个更远端的场景下，它展示的是每个碎片的详细故事。它和主界面是从属关系，所以在动效的设计上，应该强调这一点，推镜头、进入、聚焦是个不错的选择。
天命界面，在高空中，用流星的意向来展示那些在剧情里举足轻重的角色。从主场景向上摇镜头，流星飞向这个世界，云被冲击力冲向两旁。
奇遇界面，每一个奇遇事件被意向化成了一只只纸鹤漂浮在这片奇幻的湖面上。从主界面向下摇镜头，湖面在荡漾，纸鹤的浮动在湖面上荡起了七彩的涟漪。设计图上有着许多梦幻的光点，为了更加强调“梦幻”，在界面入场的时候我主观地增加了许多在镜头前模糊的光斑。
动效是设计意图的延续和升华，而不只是动起来。动效是一种手段，它的目的是为了让玩家更好的理解当前的画面。而为了能够做好动效设计，首要条件就是设计师自己能理解需求。
我会将拿到的设计图当做一段动画中的原画，或者说关键动画。我会开始去思考上一秒这个界面发生了什么，下一秒又会发生什么；这个物件从何处而来，又会产生何种变化；如何让玩家信服当下这个场景，所有的事物运动是否符合玩家直觉。
我们通常能看到一些按钮拟物成书或者卷轴被放在了桌子上，这很合理，但是那些莫名其妙飘在空中的玩意会不会有那么一瞬将让你想：“这东西咋飘起来的？”
喜羊羊联动活动中，设计图就是铃铛飘在空中、两名角色身着联动时装在一旁。我会开始想：这铃铛怎么就飘着呢？哪来的能量？喜羊羊的衣服说穿就穿上了？我想尝试在入场动画的时候把整个事件解释清楚，时空中裂开了缝隙、某种能量从喜羊羊的世界中来到天刀，都能穿梭两个世界了那飘在空中也不是什么怪事了吧。
让界面在某种情况下“说得通”，这是我的一种设计方式。
周年庆活动中，角色站在宇宙的某个星球上向后回眸、伸手邀请，我将入场制作成了快速穿梭星空的方式来顺应“她的邀请”。
新年活动中，角色张开手臂挥洒着红包和钱币，顺着挥洒的方向洒出红包遮挡屏幕将界面带出。
星河万象活动中，每一个活动入口是按照开放的时间顺序摆放在桥上的，逐一出现加上光效引导，使玩家能意识到节点次序。
顺应画面趋势和视觉引导去思考界面的入场，让界面的出现自然、不突兀，让界面更像是个场景，而不是为了界面而界面。
春澜之庭的这套衣服和活动界面整体的感觉都是比较梦幻的，拍脸界面打开时，郁金香花朵铺面而来、洒向眼前的光斑闪烁、用高亮的光去衔接主活动界面，都是在狠狠强化梦幻这个概念。
突破版的商城神名册收藏界面，天际展开阵法倾泻出巨大的能量，将卷轴送向人间，卷轴中收录的是极其珍贵的付费套装和坐骑。用比较陡峭的节奏和强烈的画面强调尊贵、珍稀。
我的思路里，会把节奏、风格归纳到情感里去，在我看来，是因为制作者想要表达和渲染某种情感才会产生了不同的风格，而我在设计的时候会先找准这些界面的关键词，进而去强化它们。
真正能把某些界面归类到某一设计思路当中去是比较稀少的，大部分的情况下这几种思路都是在交替重叠使用的，总的来的就是靠直觉。作为玩家、作为设计师，看到界面的时候我有什么冲动？直觉上我觉得这个画面会如何运动？这会是我在开始设计时的思考准备。
