项目复盘:从设计层面建立品牌体系

如何建立起一套行之有效的规范,并帮助业务更体系化的建立起自身的平台特色呢?这篇文章也许可以给你提供一些设计过程中的灵感和思路。

项目复盘:从设计层面建立品牌体系

为了进一步拓展互动营销C端到B端业务价值边界。通过构建互动中台引擎,将公共通用素材和算法互通结合。以模板组件化、社交关系图谱、数据精准营销、系统化招商四大平台能力,来实现平台业务、事业部、商家侧的互动协同,建立完整的全链路用户运营路径,全面提升产品生命周期价值。由于项目初期的规划并没有特别明晰,所以在设计之初整理出设计脉络尤为重要。

项目复盘:从设计层面建立品牌体系

项目复盘:从设计层面建立品牌体系

品牌内核

京东作为品牌背书来赋予中台品牌价值,从品牌、用户、服务内容来考量品牌内核的生命力。

作为智慧互动平台的子平台:「京工厂」、「精准营销平台」、「社交关系图谱」和「互动集市」都是通过「满天星」主平台来集成协同管理的,每一个平台都有一套独特的视觉体系。不同品牌代表了平台的多样性,如何在品牌体系中平衡多平台的开放性和协作性,并以包容的形式来集成体现,是设计师需要考虑的问题。

项目复盘:从设计层面建立品牌体系

如何建立起一套行之有效的规范,并帮助业务更体系化的建立起自身的平台特色呢?我们从设计规范的建立角度来进行思考,一般意义上的设计规范包含以下几种:品牌型(VI)、系统平台型、产品业务型。结合满天星的平台

特性:数据、技术、赋能、营销,通过品牌和产品业务规范建立两方面来总结项目经验。

品牌LOGO的设计:主平台和附属平台的品牌联想

1. 梳理满天星的品牌定位,从浩瀚宇宙中汲取灵感,使其象征意义更具包容性。

满天星从表象上会联想到繁星、星空等现实场景,从现实场景中汇总提炼出映射关键词是开始设计的第一步。下图是思维发散的结果,我们对差异性不大的关键词进行合并划归,在合理范围内整理出不同思考维度与我们的目标提案相符的方向。

项目复盘:从设计层面建立品牌体系

项目复盘:从设计层面建立品牌体系

将这些关键词重新整理归类为“具象”、“意象”以及”抽象“三大类。

项目复盘:从设计层面建立品牌体系

具象:具体存在于空间,而且能够感知的一种形状或形态.,例如:夜空、激光、宇宙等。

项目复盘:从设计层面建立品牌体系

意象:存在于人的心里或思想里的一种感知物体或事态,但不会直接展现在人们的眼前。例如:网络、汇聚、联系等。

项目复盘:从设计层面建立品牌体系

抽象:从以上联想中提炼出抽象符号,例如几何图形、点线面、空间、肌理等组合來体现想要表达的含义,唤起人们对于满天星的抽象意义、观念或情绪的共鸣。

项目复盘:从设计层面建立品牌体系

接下来进入实操阶段了,把觉得可落地的方案都画成草图。尝试多种图形组合,将之前汇总的关键字以及收集的概念,用图形化的视觉语言表达出来,利用正负形图形的交错和重叠、元素的相加形成全新的概念图标,绘制出具象亦或是抽象的图形标志。

项目复盘:从设计层面建立品牌体系

从大量的草图中找出和目标提案最相符的那些标志,进行设计细化。

项目复盘:从设计层面建立品牌体系

登登~到最后LOGO的定稿了。以圆形为基础图形,在空间布局上进行了紧密且整齐的排列,形成秩序美,体现出宇宙星系的概念。一个由数量巨大的恒星系及星际尘埃组成的庞大系统呈现在了我们面前,我们希望在视觉表达上赋予平台广阔以及浩瀚无垠的想象力。这和业务同学最终推行的恒星计划、行星+卫星计划、银河计划的营销策略不谋而合。

项目复盘:从设计层面建立品牌体系

2. 接下来开始考虑如何更系统化的树立主平台和子平台的统一形象。

作为系统平台,从主平台「满天星」到子平台「京工厂」、「精准营销平台」、「社交关系图谱」和「互动集市」,都是以帮助品牌实现流量、用户和销售的增长为长期目标而存在的。

如何用视觉语言集成体现主附平台的品牌概念和关联性呢?

在确定主平台Logo概念后,我们将视觉简化后的核心LOGO拆解出来,使用不同大小的圆形来作为核心共有元素,并融会贯通在不同子平台的logo设计中,使他们主调性看起来不仅互相关联,次调性又兼具平台特色。体系化的表达出整个生态链包容、聚合、赋能的核心价值观。

项目复盘:从设计层面建立品牌体系

考虑到体系化Logo的普适性,运用图形构成法则,对基础图形进行变化与统一、条理与反复的规律化呈现,凸显每一个子平台LOGO的附属特性,增强图形间的互动关系。

项目复盘:从设计层面建立品牌体系

3. 界面配色充分汲取了平台LOGO的象征特性,并遵循了颜色搭配准则,来整体规划界面的配色方案。

尝试使用不超过5种颜色的配色方式,以主色调、辅助色、LOGO色为点缀色来进行配色探索。

项目复盘:从设计层面建立品牌体系

项目复盘:从设计层面建立品牌体系

产品业务规范的建立

不同于C端产品,B端中台产品具有更长生命周期的特性,分布式团队设计的形式更符合目前的现状。随着产品体量的扩大和不同设计师协作中可能产生的:变更组件、更新样式、颜色改动等问题,都会造成产品体验上的不一致。为了有效提高产品的用户体验一致性,从原子设计方法入手建立基于原子、分子、有机体、模板和页面的心智模型,来帮助我们把用户界面更慎重和更具层次的呈现在用户面前。

1.首先我们需要整理规范好作为原子的用户界面基本构件

表单标签、按钮、单一icon、单一标题党、输入框等不能进一步拆解的那些元素。(由于满天星项目需要多平台使用,设计师需要在设计之初对原子元素的辐射范围和适用性做全局判断。)

项目复盘:从设计层面建立品牌体系

2. 构建分子:

使用原子元素单一标题、标签、按钮打造一个表单分子。同理tab分子的构建。

3. 有了分子就可以来制造复杂的有机体了,一般有机体是由分子、原子或其它有机体组合而成的相对复杂的UI组件。

它可以包含相同或不同的分子类型,导航、搜索表单都是典型的有机体构件。我们这里规范了一系列的有机体框架模型。

4. 有了相对复杂的有机体部件,就可以将这些组件放置在布局中,并演示设计的底层内容结构了。

主页模板由应用于布局的有机体和分子组成。

项目复盘:从设计层面建立品牌体系

5.以上说的原子设计方法到了这一步,展示内容的底层结构已经完成,为了填充某些设计模式的内容类型我们在这个步骤中提供了必要的护栏。

最后来呈现页面,页面阶段将占位符内容替换为有代表性的真实内容,使设计系统有了生命力。

项目复盘:从设计层面建立品牌体系

加之适用于多平台的栅格系统,对基础布局统一规范的建立,使得多平台的开发效率更专业更高效,对体验的一致性和后期迭代提供了参考基线。

项目复盘:从设计层面建立品牌体系

项目复盘:从设计层面建立品牌体系

总结:整个设计过程从体系化的品牌和产品角度,为我们提供了一个界面局部和整体之间的构建畅想,它不是一个线性过程,它更像一种心理模型。通过使用原子设计方法来整合产品规范,更系统化的规范组件和底层界面结构,可以帮助我们协同开发更方便的讨论模块化,并在此过程中打开提升效率和系统化的新思路。

写在最后,项目顺利上线,离不开小伙伴的友情支援。特别鸣谢参与满天星项目的大家,排名不分先后:王贝贝、聂雨婷、彭聪,感恩的❤。

业界动态

直播带货,精致的电商主义

2020-11-26 9:34:42

业界动态

数据建模:维度设计基础知识(上)

2020-11-26 9:39:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索