提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
在商业设计中,其实每一个设计都有满足业务诉求的可能,而这些设计高低的根本区别在于,是否通过再造精神的渲染。如果说满足业务诉求的设计是一个足重的砝码,我们是否能够在设计中追寻更整体的光彩或更深入的本质,用他们雕刻出镂空的地方,为这个设计的砝码保留几克再造精神的重量。
从20世纪初,康定斯基提出“一旦入画,即为画所用”的概念,艺术的表现不再仅仅是物象的再现,而是被经营成一个整体的内在精神表达(比如马蒂斯的作品,将现实中的事物经过内在精神的渲染后构成图画,而不是零碎地将自然的情貌拼凑一起),其实这个概念放在今天的界面设计中也同样适用。
如果说仅仅通过在界面中把产品“拼凑”一起,正逐渐让我们变成设计机器,甚至还不及智能工具1分钟出千张图的神速;那我们真正的利器则是用镂空的砝码——通过“再造”精神将产品功能、品牌理念与用户诉求等为设计所用,让界面中的功能与形式相互融合、向用户诉说品牌的特点并唤起其情感反应。
前不久刚完成了京东直播9.0的设计改版,接下来将以这个项目为例,从呼吸、平行、秩序、本质4个设计理念发散,为大家分享这次“再造”的设计过程。
京东直播作为京东App的特色频道,近年随着业务发展,更多的内容加入直播频道当中。因此本次设计改版的诉求是让界面容纳更多内容、提升产品的流量分发效率。
既然想让界面容纳更多内容,模块间距上的压缩不可避免,但仅通过物理挤压得到的界面又往往显得局促。所以又从交互行为和运营场景入手,看看能不能在这方面进行压缩、尽可能为模块腾出一点呼吸空间。
在旧版界面中,菜单栏除了通过点击,也可通过全局页面的左右滑动实现切换,所以当存在2种交互方式都能达到同一个目标行为的时候,可适当削弱其中一种在视觉空间上的占比——缩减菜单栏的点击高度。
同时在运营场景下,其实还存在着每个菜单项字数不同的情况。旧版菜单项采用固定宽度排布设计,在少字数情况下会存在间隔过大的情况,所以在新版界面中将菜单项调整为固定间距排布,兼容不同菜单项的内容灵活度,为菜单栏提供呼吸宽度。
另外像Banner模块,作为整个界面中的顶流,在空间的优先级上自然需要有更大的占比,既要增大Banner尺寸又要减少模块高度,这两个原本相悖的诉求让我们似乎只能在模块的间距上做压缩。
但是我们会发现,缩小间距后的页面在视觉上又显得特别拥挤,因此在设计Banner的时候又做了顶部的镂空,打开界面中的天窗、营造视差上的间距,而这个Banner的物理尺寸并不需改变。
布莱恩正在缓慢的前行,前面似乎发生了意外,一大群围观的人把通道堵的只剩半身宽的缝隙,而他只是要到对面的时装店里买条裤子,对前面的事情并不感兴趣。10分钟后,布莱恩终于从人群中挤出来走向对面的时装店。但他发现,一开始排在他后面的里昂,居然已经在店里准备买单了。
原来里昂见前面队伍太长,就直接从二楼走过去了。
界面里也存在“二楼”,就像京东直播中占比最大的列表模块,除了上文提到的压缩模块的物理尺寸之外,还可以利用这种“二楼”空间提升整个列表的滑动浏览效率。
我们将整个页面的视觉层级分为3层,最底部的第1层为页面的背景层,第2层则为直接排布于大背景上的产品内容层,而最顶部的第3层则是容纳了不同商家直播间的列表信息层。所以我们采用平行滑动的交互方式,帮助用户聚焦最顶层的列表内容,同时提升页面的滑动浏览效率。
对比旧版界面推移滑动的交互方式,采用平行滑动的方式,可让最顶层的列表内容不需等待其他内容滑出页面就得以继续展示。我们可以看到,用户在页面中进行同等距离的滑动行为时,采用平行滑动的新版界面可比旧版界面多展示12%的内容高度。
音符固然可以任意组合,音程也可以任意推进,但我逐渐意识到,我对不和谐音的使用其实还是要遵循某种特定秩序的引导。(勋伯格)
新版文字规范的核心是拉大主次内容的差异显示:更注重突出大标题、利益点等强吸引的内容,适当弱化标签、店铺名等辅助信息内容。同时针对不同的字号属性设置行高,避免出现因字号差异导致的空间过松或过密。
这里还有一个需要考虑的细节点,即是在实际应用场景下,标题文字除了理想的双行显示情况以外,还存在文字较少只有单行显示的情况。旧版界面此处为固定间距缩进文字,导致该情况下列表空白过大给用户带来有bug的异常感。所以在新版界面中针对单行标题的情况,通过设计相对间距的方式,能够让用户在即使不理想的显示情况下也不会有太多视觉异常感。
在旧版界面中,栅格系统的基数较大导致界面的空间利用率较低。所以在这次设计改版中,我们制定了一套新的栅格系统,在拓展页面空间的同时赋予视觉元素以规律的秩序感,指导更合理的设计页面布局。
色彩的设置分为品牌色彩和进化色彩。品牌色彩延续了京东的红色系,进化色彩则设计了京东直播特有的颜色系列。结合手机直播的特点,进化色彩的灵感来源于手机屏幕的三原色,让颜色系列代入直播的使用场景。
Banner是用户进入界面后第一个看到的内容,而第一印象往往会影响人们对产品的感受,所以在这次设计中也将Banner作为视觉体系的一部分,为它制定了多套皮肤模版。在日常的业务延展中,仅需要选择替换模版中的主体即可,为用户营造不错的第一感受的同时也降低了运营的操作成本。
形式,即使是抽象几何化的形式,亦会有其内在的精神力量。
随着京东直播延伸出更多的可能性,同时也面对着更多不同场景的表达。我们更希望在这次设计改版中,能够凝练出更具有直播属性的设计元素,它不只是为了营造千篇一律的电商氛围,而是能够雕刻直播品牌本质,关联起用户对京东直播的品牌认知。
在旧版界面中,以花瓣、笑容等为灵感的圆弧形设计元素贯穿始终,意为营造年轻、女性向的产品氛围。不过随着如今直播的发展,产品对用户群体的区分逐渐趋于中性化,再加上这类基础图形作为设计元素的应用场景过泛,品牌代入感与识别性较弱。所以在新版界面中,我们加入了一个新的设计元素来带领这些基础元素,帮助用户将场景感受与直播品牌关联起来。
回归到直播产品的本质,这是一种区别于视频录制的产品形式,它的最大特点在于“录+播”实时同步进行。所以我们通过提炼“播放的按钮”与“录像机镜头的叶片”概念,组合出这个传达直播属性的品牌符号。
不过如果我们直接将其作为设计元素放入界面中,则稍显复杂呆板且难以延展,所以在这里将这个图形进行解构设计,利用负形空间传达概念;同时解构出来的几个元素可相对自由排布在画面中,在视觉上增加界面的流动感。
因此我们在新版界面中,将它作为品牌符号贯穿在整个产品形态里,比如产品首页背景、品牌标识背景等等;同时延续旧版界面中的设计元素,在Banner、弹窗、广告等多个应用场景中,以元素组合的形式共同为用户打造统一的品牌体验。
未来必然有更多智能工具与模版将设计变得程式化,而唯独不同于这些设计机器的,是我们用镂空的砝码,以创变的觉醒、再造的精神指引自己不断进化。
以上仅展示阶段性成果,设计方式、设计理念等,对于京东直播的设计仍在持续“进化”,期待与你的下一次分享与交流。
更多 设计干货/素材下载/大赛&外包需求发布
请关注【SDL艺术实验室】公众号
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册