數智服務品牌官網設計分享

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群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。