【京东JDC分享】直播产品设计改版全解析

在商业设计中，其实每一个设计都有满足业务诉求的可能，而这些设计高低的根本区别在于，是否通过再造精神的渲染。如果说满足业务诉求的设计是一个足重的砝码，我们是否能够在设计中追寻更整体的光彩或更深入的本质，用他们雕刻出镂空的地方，为这个设计的砝码保留几克再造精神的重量。

从20世纪初，康定斯基提出“一旦入画，即为画所用”的概念，艺术的表现不再仅仅是物象的再现，而是被经营成一个整体的内在精神表达（像马蒂斯的作品，将现实中的事物经过内在精神的渲染后构成图画，而不是零碎地将自然的情貌拼凑一起），其实这个概念放在今天的界面设计中也同样适用。

如果说仅仅通过在界面中把产品“拼凑”一起，正逐渐让我们变成设计机器，甚至还不及智能工具1分钟出千张图的神速；那我们真正的利器则是用镂空的砝码——通过“再造”精神将产品功能、品牌理念与用户诉求等为设计所用，让界面中的功能与形式相互融合、向用户诉说品牌的特点并唤起其情感反应。

前不久刚完成了京东直播V9.0的设计改版，接下来将以这个项目为例，从呼吸、平行、秩序、本质4个设计理念发散，为大家分享这次“再造”的设计过程。

京东直播作为京东App的特色频道，近年随着业务发展，更多的内容加入直播频道当中。因此本次设计改版的诉求是让界面容纳更多内容、提升产品的流量分发效率。

1.呼吸（Respiration）

既然想让界面容纳更多内容，模块间距上的压缩不可避免，但仅通过物理挤压得到的界面又往往显得局促。所以又从交互行为和运营场景入手，看看能不能在这方面进行压缩、尽可能为模块腾出一点呼吸空间。

1.1 Tab

在旧版界面中，菜单栏除了通过点击，也可通过全局页面的左右滑动实现切换，所以当存在2种交互方式都能达到同一个目标行为的时候，可适当削弱其中一种在视觉空间上的占比——缩减菜单栏的点击高度。

同时在运营场景下，其实还存在着每个菜单项字数不同的情况。旧版菜单项采用固定宽度排布设计，在少字数情况下会存在间隔过大的情况，所以在新版界面中将菜单项调整为固定间距排布，兼容不同菜单项的内容灵活度，为菜单栏提供呼吸宽度。

1.2 Banner

另外像Banner模块，作为整个界面中的顶流，在空间的优先级上自然需要有更大的占比，既要增大Banner尺寸又要减少模块高度，这两个原本相悖的诉求让我们似乎只能在模块的间距上做压缩。

但是我们会发现，缩小间距后的页面在视觉上又显得特别拥挤，因此在设计Banner的时候又做了顶部的镂空，打开界面中的天窗、营造视差上的间距，而这个Banner的物理尺寸并不需改变。

2.平行（Parallel）

布莱恩正在缓慢的前行，前面似乎发生了意外，一大群围观的人把通道堵的只剩半身宽的缝隙，而他只是要到对面的时装店里买条裤子，对前面的事情并不感兴趣。10分钟后，布莱恩终于从人群中挤出来走向对面的时装店。但他发现，一开始排在他后面的里昂，居然已经在店里准备买单了。

原来里昂见前面队伍太长，就直接从二楼走过去了。

界面里也存在“二楼”，就像京东直播中占比最大的列表模块，除了上文提到的压缩模块的物理尺寸之外，还可以利用这种“二楼”空间提升整个列表的滑动浏览效率。

我们将整个页面的视觉层级分为3层，最底部的第1层为页面的背景层，第2层则为直接排布于大背景上的产品内容层，而最顶部的第3层则是容纳了不同商家直播间的列表信息层。所以我们采用平行滑动的交互方式，帮助用户聚焦最顶层的列表内容，同时提升页面的滑动浏览效率。

对比旧版界面推移滑动的交互方式，采用平行滑动的方式，可让最顶层的列表内容不需等待其他内容滑出页面就得以继续展示。我们可以看到，用户在页面中进行同等距离的滑动行为时，采用平行滑动的新版界面可比旧版界面多展示12%的内容高度。

3. 秩序（Order）

音符固然可以任意组合，音程也可以任意推进，但我逐渐意识到，我对不和谐音的使用其实还是要遵循某种特定秩序的引导。（勋伯格）

3.1文字规范

新版文字规范的核心是拉大主次内容的差异显示：更注重突出大标题、利益点等强吸引的内容，适当弱化标签、店铺名等辅助信息内容。同时针对不同的字号属性设置行高，避免出现因字号差异导致的空间过松或过密。

这里还有一个需要考虑的细节点，即是在实际应用场景下，标题文字除了理想的双行显示情况以外，还存在文字较少只有单行显示的情况。旧版界面此处为固定间距缩进文字，导致该情况下列表空白过大给用户带来有bug的异常感。所以在新版界面中针对单行标题的情况，通过设计相对间距的方式，能够让用户在即使不理想的显示情况下也不会有太多视觉异常感。

3.2栅格规范

在旧版界面中，栅格系统的基数较大导致界面的空间利用率较低。所以在这次设计改版中，我们制定了一套新的栅格系统，在拓展页面空间的同时赋予视觉元素以规律的秩序感，指导更合理的设计页面布局。

3.3色彩规范

色彩的设置分为品牌色彩和进化色彩。品牌色彩延续了京东的红色系，进化色彩则设计了京东直播特有的颜色系列。结合手机直播的特点，进化色彩的灵感来源于手机屏幕的三原色，让颜色系列代入直播的使用场景。

3.4模版规范

Banner是用户进入界面后第一个看到的内容，而第一印象往往会影响人们对产品的感受，所以在这次设计中也将Banner作为视觉体系的一部分，为它制定了多套皮肤模版。在日常的业务延展中，仅需要选择替换模版中的主体即可，为用户营造不错的第一感受的同时也降低了运营的操作成本。

4.本质（Essence）

形式，即使是抽象几何化的形式，亦会有其内在的精神力量。

随着京东直播延伸出更多的可能性，同时也面对着更多不同场景的表达。我们更希望在这次设计改版中，能够凝练出更具有直播属性的设计元素，它不只是为了营造千篇一律的电商氛围，而是能够雕刻直播品牌本质，关联起用户对京东直播的品牌认知。

在旧版界面中，以花瓣、笑容等为灵感的圆弧形设计元素贯穿始终，意为营造年轻、女性向的产品氛围。不过随着如今直播的发展，产品对用户群体的区分逐渐趋于中性化，再加上这类基础图形作为设计元素的应用场景过泛，品牌代入感与识别性较弱。所以在新版界面中，我们加入了一个新的设计元素来带领这些基础元素，帮助用户将场景感受与直播品牌关联起来。

回归到直播产品的本质，这是一种区别于视频录制的产品形式，它的最大特点在于“录+播”实时同步进行。所以我们通过提炼“播放的按钮”与“录像机镜头的叶片”概念，组合出这个传达直播属性的品牌符号。

不过如果我们直接将其作为设计元素放入界面中，则稍显复杂呆板且难以延展，所以在这里将这个图形进行解构设计，利用负形空间传达概念；同时解构出来的几个元素可相对自由排布在画面中，在视觉上增加界面的流动感。

因此我们在新版界面中，将它作为品牌符号贯穿在整个产品形态里，比如产品首页背景、品牌标识背景等等；同时延续旧版界面中的设计元素，在Banner、弹窗、广告等多个应用场景中，以元素组合的形式共同为用户打造统一的品牌体验。

未来必然有更多智能工具与模版将设计变得程式化，而唯独不同于这些设计机器的，是我们用镂空的砝码，以创变的觉醒、再造的精神指引自己不断进化。

以上仅展示阶段性成果，设计方式、设计理念等，对于京东直播的设计仍在持续“进化”，期待与你的下一次分享与交流。