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

1月 15, 2023 发表于: 视觉设计. 评论

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）

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。