视觉设计 » 数智服务品牌官网设计分享

数智服务品牌官网设计分享

发表于: 视觉设计. 评论
Sponsor

前言:本文将分享阿里产品瓴羊品牌设计,包含瓴羊官方网站的构建、品牌标识以及KV设计的经验分享,有阿里的设计团队设计,欢迎大家一起学习。

我们正在经历时代的拐点,云计算的高速发展,数字经济时代浪潮已至,如何走向全方位的数字化,让数据产生的价值贯穿在企业经营的方方面面,是所有人都在思索的课题。

瓴羊适时而至,成立为一家专注企业数智服务的DAAS公司,带着阿里巴巴二十多年来对行业和生意的理解、带着数据与业务双中台沉淀的数字化能力,为企业解增长之困、创增长之势,是“阿里巴巴最佳实践”完整、系统、产品化地对外输出。

瓴羊品牌标识的诞生

了解我们如何定位视觉标识,完成品牌设定。

“瓴”与“羚”

“瓴” 读作líng,是一种盛水的瓦器,“高屋建瓴”表达从屋顶上倾泻而下的水势,也指对事物把握全面,了解透彻,有很好的寓意。

与阿里巴巴集团的“盒马”相同,瓴羊也是动物“羚羊”的谐音,机敏灵活的羚羊,代表了瓴羊旗下数据产品与服务的:精准、迅速与敏捷。

前期对标识的构思中,我们直接从“羚羊”动物形象入手,希望标识的记忆点简单明确;除此之外,我们取用Data(数据)的首字母D,与羚羊的动物形象相结合来进行尝试。

前期部分草图:

数字服务品牌官网设计分享

”D“与”羚羊“结合方案、以及其他方案初步尝试:

数智服务品牌官网设计分享

至此我们发现,仅通过表层含义来演绎标识,过于具象化,我们对结果还不够满意,接下来我们开始思考如何赋予它更深层次的含义和美感。

“瓴羊”与“数据”

数据是记录现实世界事物的产生、发展及变化的内容,而人们也通过数字技术去构建数据,创造虚拟的数字世界。从这个角度去看待数据的时候,我们想到了中国思想上的一个重要概念——太极,太极有阴、阳两仪,阴阳也代表万事、万物的两面,不断的变化,且互相关联,就像数字世界与现实世界的两面。

把太极的概念融合进来,希望我们的数据价值,如太极一般不断生长且生生不息,最终使用的圆形轮廓,也有如一个数据罗盘,洞察先机。

数智服务品牌官网设计分享

用严谨的图形结构与绘图规范来支撑品牌形象,使羊的动势表现“昂扬”且“优雅”;角与头部外轮廓曲线也与主体负形形成的曲线呼应;整体流线如水般自然,平滑。

数智服务品牌官网设计分享

品牌标识的标准色为蓝色与青色的渐变组合,表达“数据”“智能”与“流动”。而除标识基本使用场景外,我们允许在某些传播场景中出现更开放、灵活的演绎,比如品牌视频中,使用一些紫色调让它看起来更灵动,我们也对标识做了完整“瓴羊”的形态变化,赋予它基本造型以外的生命力。

数智服务品牌官网设计分享

瓴羊智能服务品牌发布会主KV设计

2022年6月29日,瓴羊全新品牌对外发布。如何设计能让我们的品牌发布会更具有“瓴羊”专属特色,让人感觉到新颖并能够眼前一亮,是我们思考的课题。

数智服务品牌官网设计分享

发布会当天投放的户外大屏广告。

“瓴”与“水”

上文已经介绍了“瓴”本身的含义,它与水有关,而数据与水也有共通之处,数据如水润物无声、利万物而不争,我们希望瓴羊的产品和服务如水一样,帮助客户的企业,如万物奔流,换发新生,在数字经济浪潮中实现增长。

带着瓴羊的核心主题,我们脑暴了非常多想法并提炼关键词:万物、水、数据、智能。同时也讨论了动态方案 ,包含了一些转场与分镜头,不过最终,我们决定选择柔和的动效,也与现场更好的融合。

前期的部分思路与情绪板:

数智服务品牌官网设计分享

初筛方案:

整体以瓴羊为核心,与水融为一体表达瓴羊与水的关联,星星点点作为围绕瓴羊诞生的数字化增长之势

数智服务品牌官网设计分享

当前仍缺乏一些细节,主体与水融合处处理的不够精致,以及主体与水面的视觉平衡需要斟酌,整体画面缺乏瓴羊水利万物,万物奔流的核心含义,于是在此基础上做进一步的优化。

万物奔流

瓴羊的万物即瓴羊的万千用户,瓴羊像滋润山川湖海一样服务万千用户

调整后的方案:

丰富画面层次,优化画面背景,为主体描绘更精致的动态倒影,与水做更好的融合,中层的山川与数据的星星点点相结合,表达瓴羊汇聚万物助力数字化增长的含义,背景线条表现银河;最终体现山川湖海,星河汇聚。

数智服务品牌官网设计分享

瓴羊官网设计

随着瓴羊品牌发布,官网作为承载业务价值转化的重要阵地之一也同期上线;从设计到开发,我们历时2个多月,设计并开发了44个组件、模块、搭建了21个正式页面,覆盖PC与移动两端,几名同学之间高效协同让官网顺利如期大家见面!

业务目标与设计策略

首先,我们对瓴羊官网的访问者进行分析,思考几个基本问题。浏览者是谁?从哪里来?浏览后会怎么样?

根据访问者的特点与需求,我们明确官网的定位以及业务目标,并制定官网的内容框架与6个主要版块。

数智服务品牌官网设计分享

进一步拆解出官网体验设计策略;

数智服务品牌官网设计分享

基于品牌调性,我们使用数据如”水“的含义,把水的波浪和流动感作为了官网沿用的视觉符号,再根据官网的属性,提炼了视觉设计的关键词。

数智服务品牌官网设计分享

官网效果展示

首页:

我们没有在头部banner位去放置产品介绍,而是直接展示客户增长的真实案例,并在banner下方通过瓴羊定位、优势去获得用户认同,产生共鸣。其下篇幅介绍瓴羊如何为用户带来增长,以及我们的产品和解决方案。

“流动”作为视觉符号在页面中的应用

数智服务品牌官网设计分享

数智服务品牌官网设计分享

模块化提效-瓴羊官网产品页面设计

瓴羊针对数据治理和分析、营销、销售、服务、供应链等企业核心经营领域,推出了分析云、营销云、产销云、客服云、开发云五大产品矩阵,涵盖了瓴羊多款子产品。

我们延续瓴羊主品牌标识的设计风格,为这些子产品设计了全新标识,视觉风格形成一个完整系列: 数智服务品牌官网设计分享

官网一期上线12款产品页,有不小的工作量,如何提高设计与开发效率,是我们面临的主要问题之一。

我们决定使用模块化的方式设计,将完整的产品页框架拆分为7个模块,分别对每个模块设计好布局规则,研发同学则基于阿里旗下的斑马搭建平台搭建页面,通过跨端源站平台接入,先开发的模块作为基础原料,其余产品页面直接通过斑马平台配置数据即可快速实现,提效的同时,又保证了每个页面的风格统一性。

数智服务品牌官网设计分享

瓴羊官网地址:lydaas.com

结语

至此,为大家介绍了瓴羊品牌体系的第一阶段内容,从品牌标识诞生、发布到官网上线,也仅是瓴羊品牌建设的一个开始,希望瓴羊可以帮助更多的客户带来全方面的数字化增长;我们也将不断探索,让更多人认识瓴羊,了解瓴羊。

来源:AlibabaDesign公众号(ID:AlibabaDesign)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }