【设计经验分享】卡农老师2周年UI设计复盘

上周末卡农老师@卡农_Channel 举办了2周年直播活动，其中的UI是我设计的。感受到这次设计过程中有一些经验值得分享，这里做一个简单的复盘。

PART1 创意过程及参考

1.1 概念确立

这套直播间UI其实本来是我为自己设计的。而它又来自于我工作上的一个废弃概念。那项工作的需求为：为一个商业足球场构思一组互动打卡装置的创意，目标受众是球赛观众。

我觉得到线下来看球赛的球迷们内心都是无比坚信，自己支持的球队能够获胜的。此时此刻的心情就像是某种情绪赌注，指向的期待自然是支持的球队能够获胜，自己可以骄傲地向朋友们宣布自己支持的没错、自己亲临现场助威了，最好还能有照片或者视频材料拍到看台上的自己。于是我构思了一个名为《明日头条》的创意概念。那时找的参考大概是这样的：

除了报纸这种载体以外，也考虑了电视、视频网站界面之类的载体，引用相同的概念，只是在平面呈现上有所差异。

挪作直播间UI设计时，电视和视频网站与直播平台的形式太接近了，不够有趣味性。自然是报纸产生的反差更明显。而报纸上照片内的画面会动这一点更是能勾起一些哈利波特中魔法报纸的些许联想。至此我确定了这一创意的大致概念。

1.2 平面构思

而开展设计执行之前，我也不得不搜索大量平面中对于报纸概念表现方法的参考：

这一阶段可以初步遇见一些问题了：

其一是报纸头部的排版形式。这种形式感非常重要。由于整个画面下方的内容会用来放直播内容和弹幕列表，因此只有上端这部分有机会去塑造“报纸”的概念。但是通常报纸封面的标题都会占据一定的高度，如果照搬这样的形式就会导致下面画面区域被压缩。不过这点不难解决，能找到一个头部的形式感特别明显，并且占用高度不高的形式即可。

再者，是直播间UI是横屏，而报纸一般是竖向的版式。横屏对于报纸概念的呈现会打很大折扣。

在我为我自己设计的UI中，我最终选择强化报纸边缘的扭曲，以及光影关系来塑造报纸的立体感，使其看上去不像单纯的平面排版。此外我还添加了一双插画风格的手的方式来强化报纸的概念。

直到目前我在使用的仍然是这款UI。它在功能上是比较完善的，标题、简单的直播间信息、时间控件、弹幕区域、直播画面区域都有了。但我内心仍然感到不完美。主要原因在于这双手得到加入，如果在背后的画面已经足够丰满的情况下，加入一个画风不同的元素，我觉得这当然是锦上添花之笔，像电影结束后的小彩蛋一样，去丰富整个设计的趣味性。但是这里的手是出于报纸的概念不够明显才加入的，是对于缺陷的补偿。这恐怕会让观众觉得手的引入是相对生硬、缺乏出处的。

于是在为卡农老师设计直播间的时候，我找了这样的参考：

报纸下端卷曲，纵向的版式自然地被折叠为了横向画面的比例。这种处理我觉得比较满意，能更加明晰报纸的概念，而且符合生活中报纸的呈现方式，不会太生硬。于是将其纳入设计。

PART2 设计执行流程拆解

2.1 排版

报纸纸面上得到排版是整个设计中最重要的部分，也是最先执行的部分。不过操作起来并不难，只是需要反复评估：①. 报纸的感觉是否明显；②. 版块的分布是否合适。

上一阶段的排版，根据我的个人习惯是完全在Illustrator中完成的。除了版块划分以外，还做了字体的挑选和设计，以及依赖Ai中的笔刷，让线条具有一些印刷的失真效果，使得整体气质更复古。接下来进入光影合成的部分就需要进入Photoshop操作了。

置入PS后，通过添加“浮雕”的图层样式，以及材质纹理的堆叠，让它初步具有了一个纸张的立体感。不过这个来自Ai智能对象不能直接做变形，需要再次嵌套一层智能对象。

而后就要进入整个设计技术要求最高的环节——通过扭曲和光影关系来塑造立体感。

2.2 变形

首先是扭曲，这里有一个设计难点，那就是预留给直播画面的区域不能被扭曲。实现方式如下：

对对象执行【cmd+T或Ctrl+T，自由变换】，然后右键—变形。通过这个功能可以赋予对象以扭曲。点选后，界面中提供的变形网格是这样的：

是一个基础九宫格。外围四角是锚点，而锚点附带的手柄各自到边缘1/3的位置。对于锚点的调整理论上会辐射到整个九宫格，只是距离越远越薄弱：

所以我们要拆分这个网格，拆分出多组九宫格，使得受影响的区域不能涉及到直播画面的区域。请注意界面上方有一个名为“拆分”的功能。对预留给直播画面的区域，在其上下各打一条横向拆分；左右各打一次纵向拆分。

拆分之后的网格是这样的：

仔细观察一下的话，如下图所示，这四个黄色的部分将自成一块九宫格。对于四角锚点的调整能够影响到的范围将局限在这四个九宫格以内了。包括直播画面区的其余区域将不受影响。

这部分是本次分享的重中之重，它揭示了为非平整平面融入平整画面的方法。接下来的其它部分就相对简单了。

2.3 光影与下层结构

塑造光影关系：光影关系以单独的黑白图层以剪贴蒙版的方式加在对象图层的上方。设计师的着色方法通常有画笔和渐变工具这两种。常用的混合模式有：【变暗组】：变暗、正片叠底；【变亮组】：变亮、滤色；【复合组】：叠加、柔光。有了光影关系能让平面的纸张更加具有立体感。

然后复制这一层对象，选择性的复制光影，来搭建报纸多页的结构。

理论上有报纸上半部分就已经足够了。但是为了利于报纸概念更加清晰，可以艺术化处理，刻意加入卷曲后的下半部分在后面露出：

至此，报纸形态已经足够丰满了。

2.4 场景化

接下来就是背景和报上方元素的加入。

这里同样有一些设计意识指向的艺术化处理。相片框中的相片自然是局限在框内的，但是为了让角色的层次更突出，可以让她的头部稍微超出上边界；以及整个报纸表面是相对平整的，可以加入一张小贴纸来更加丰富层次。

最后，基于角色属性做一个全局调色，我选择让纸张的颜色更加偏紫色了。以及打上一个漂亮的光：

可惜调色和光最后都被去掉了呜呜呜呜。

全文完