「学UI设计」千牛IP形象升级啦！来看看如何一眼吸晴？

千牛作为淘宝商家开店日常经营工作台，2021品牌升级使平台界面的呈现出明快的色彩，更年轻，表达也更具活力。品牌形象往往能加速拉近平台与商家间的距离，串联产品操作与运营活动，形成平台与商家间的情感纽带。

因此，在这个契机下，我们同时着手对“千牛”这一IP形象进行了一次全新的升级。B端产品的IP形象如何升级，如何渗透进这一类型产品的用户链路中？我将这次宝贵的设计实践记录下来，分享给大家，也欢迎交流。

#01

升级的必然与必要

C端产品的IP屡见不鲜，很多形象深入人心，而B端产品因其更有针对性的用户人群以及商务、专业等印象标签，往往在IP形象这件事上，做与不做？刻画到什么程度？让人很难拿捏……

1. 为什么要做升级

• 应用现状：原有的千牛IP从2014年就建立起的千牛形象经过8年的洗礼，到目前出现了明显的断代情况，TA与全新的9.0品牌设计语言出现了较大的视觉差异，一方面形象本身对现有用户群体的亲和力偏弱，另一方面无法有效融入用户链路的设计中，使用度随之极速下降。

• 用户认知：调研结果同步表明，商家群体们对千牛这一品牌形象的辨识模糊，记忆点不足，在情感链接的建立上更是乏力。

千牛IP与时俱进的全面升级也便成了一件呼之欲出的事。

▲ 旧千牛形象

2. 度的拿捏

在年轻化的商家群体和千牛全新的设计语言下，牛的形象重新基于用户群体、平台定位、视觉语言三方面进行梳理，从中定位关键词，确定设计方向。

▲ 脑爆关键词

定位 - “商家”

开店新商家逐步趋于年轻化，90、00后商家比重逐渐增大。年轻化的商家群体，在日常生活中，所接触到的公仔形象多为潮玩、盲盒等；趋于年轻化表达更贴近大部分商家群体的喜好，亲切感能帮助千牛拉近商家距离。

▲ 各类盲盒/IP联名等（灵感搜集 - 图片来自于网络）

造型 - “符号”

作为代表千牛平台的IP，应该具备什么样的符号才能具有商家平台特征，并且一眼让商家喜欢呢？符号化聚焦“元宝、火焰、数据、钱、店铺”这等方向。牛自然形态牛角和鼻子的明显特征，也是设计着重符号化打磨的方向。

▲ 各类牛形象IP（国际站/1688/富途牛牛）

材质 - “色彩”

结合千牛产品调性，色彩以"轻量渐变、明亮简洁、质感轻透”为原则，IP与产品表达一致性，便于后期运营活动与产品链路延展。

▲ 质感色彩表达（灵感搜集 - 图片来自于网络）

#02

IP升级的过程

1. IP方向确定

经过数轮设计提案后，结合定位、符号化、色彩三原则，锁定千牛形象分别为“招财牛、潮酷牛、专业牛”。

• 招财牛：造型上对鼻子进行刻画，尝试将元宝和牛鼻子结合，取“金元宝”招财吉寓，憨萌可掬，具有亲和力；

• 潮酷牛：个性张扬年轻态，在设计中，将牛头和身体做减法，线条简约造型独特，视觉焦点突出蓝色牛角和身体曲线，更具识别度；

• 专业牛：商务属性强，为专业牛穿上了西装，整体造型突出职业性，代表经营专业度。

▲ 千牛探索 确定三只牛方向

本以为三只形象设计定稿，升级这件事踏实了一半，现在回想起来，还是太年轻了……首先“Pick谁？”，“讨论”可以说是非常激烈了，谁说都不算。IP是用户的，因此让商家来选择自己喜爱的形象最为明智。票选心中的千牛，最终“招财牛”以压倒性优势胜出！这件事不光让我们得到了一个结论，更重要的是把在沉浸在激烈“讨论”中的我们拉出小我，回到直面用户的理智和客观世界中。

2. IP诞生

后续我们对IP进行和深入刻画，从造型、材质、符号化三点着手：

• 造型雕琢：精简轮廓，极简线条，头身比采用1:1.2，整体偏幼态，视觉上更具亲和力，符合品牌传递的亲切感，在运营运用延展上，四肢形态延展度高；

• 材质发散：商家端材质定义中，色彩轻透的原则上，我们牛角采用品牌色透明玻璃质感，牛角更具特色；

• 符号强化：IP最能让人产生记忆点的符号化视觉形态，我们聚焦在千牛元宝鼻的刻画上，微椭圆的鼻子加半圆形成具有简洁且显性的符号化特征；

▲ IP诞生

#03

应用与渗透

亲手打造出了用户喜欢的IP可不得让它多多出街呀？相信同为设计师都能感同身受我的内心OS。但正如感情也不是一朝一夕建立的，让用户在对的时间遇到的“牛”才是对的事，IP形象对内脚踏实地服务于产品本身，渗透进功能；对外面向用户传递和生发正向情绪，让TA成为连接产品和用户的美好桥梁。

▲ 链路渗透

1. 千牛形象拓展

搭建千牛IP形象拓展，结合商家核心工作场景，如数据、客服、物流发货、订单管理、营销活动，建立具有千牛电商特色的角色形象，构建完整丰富的角色特征。

▲ 角色场景拓展

接着便是一大波出街渗透来袭，这个阶段，“时宜”和“视觉层次”是设计需要重点把握的方向。让我们来看看全新的千牛形象都分别出现在了哪些地方？

2. 产品链路的运用

重新绘制了异常状态下平台缺省页，利用千牛憨态可掬的形象与场景结合，打造在负反馈情况下的趣味感。

▲ 缺省页

商家接待场景也是经营链路重要一环。从客服进店欢迎回答咨询促成下单物流及售后链路切入，新增贴合接待场景的客服表情包，帮助商家更好表达购物流程中的情绪，促成消费者下单，完成售后链路。

▲ 表情包

3. 平台关怀类

每年的大促时，同样是商家最忙碌的时刻，在经历了618、双11这类大促后，平台为商家“寄”去一份来自“亲人”的问候，在商家忙碌的时刻千牛一直陪伴在身边，为商家回顾这场大促的瞬间、这一年的点滴。过年与产品功能联动，为商家提供一年经营数据的同时还提供了“过年打烊”“提前收款”等产品功能。

▲ 春节家书

▲ 大促情感关怀

在商家经营学习场景下，将IP融入各类短视频、直播类栏目。

▲ 千牛平台自制栏目

如二十四节气，当商家打开工作台的时候，也能感受到不一样的气息。色彩上参考了自然界环境中节气的色彩结合千牛年轻感、亲切的形象设定，形成千牛独有的24节气表达。

▲ 二十四节气

▲ 「千牛发财」环保袋

▲ 「千牛」贴纸

写在最后

这次在B端产品中实现IP形象升级的设计过程，是实践也是一次不一样的设计探索。在用户链路中的渗透中，通过数据和反馈，我们收获到的不仅仅是对自己设计作品的小小的成就感，反而在这种类型的产品中，IP形象的设计可以在哪些地方产生应用效果加成？哪些地方要收敛？等得到了不少的宝贵沉淀。

这是一个开始，实践也还在继续，后续将会参与进更深的业务逻辑中，在商家经营链路中增加更多的节点，通过IP形象，传递关爱与温暖，催化平台与商家的情感萌生，让这只小牛伴随商家一起成长。

扒一扒淘宝千牛商家客服系统

大家都知道淘宝的商家系统--千牛，今天我们就一起来简单看看千牛的客服及IM功能吧

整体结构

整个千牛结构很庞大，功能也很多，我们今天主要看下它的客服IM部分

淘宝商家客服体系ai客服+人工客服，ai客服又分为辅助模式与全自动模式。

而人工客服通过千牛客户端进行咨询进线和回答，可以通过给店铺开子账号的形式简历多个账号进行回复，同时可以对多个账号进行咨询分流和统一管理。

我们先看看人工客服，商家可以在千牛客户端或app上回复客人咨询

账号体系

一个店家可能又多个账号，可以多个账号一起处理淘宝店的咨询。整体结构上，人工服务由各个账号来完成服务，店家对应可以建立多个子账号来进行服务

可以对子账号的聊天服务内容进行控制，查看具体聊天情况。

关于聊天页面

这里本人没有新建账号，所以通过店家主账号来整体看看聊天模块吧

聊天是通过千牛客户端进行的，对应消息提醒也是通过客户端或千牛手机app收到。由于之前购物也是使用这个账号，发现对应的消息也是出现在系统上面。由此看来千牛并未特意区分卖家卖家对客户端的使用。当然某些细节存在差异，例如订单，店铺介绍等。

店家账号存在店铺相关信息

买家账号来信息并无特殊提示，但是包含用户信息，店家账号为店家信息

聊天页面整体结构

区域1是IM四块主功能，聊天，历史会话，联系人，群组，没有太特别的也不赘述了

区域2是四块分别为工作台（店铺数据相关），消息中心，卖家中心，新建群组

消息中心包含了很多系统消息，这一块以后有机会再具体描述

操作内容

功能部分目前看基本都比较简单

表情，截图，发送图片，消息管理器，震屏，举报

最右侧是用户相关信息，商户账号有店铺、订单等信息

机器人部分

目前看来这部分是另外一套单独系统，并且分为不同级别可以提供不同功能以不同价格给到卖家

整个功能也很庞大，可以重点关注其中主要部分

首先看客服两种模式，1.全自动模式2.智能辅助

自动模式指的是完全由机器人进行回复

智能辅助指的是，机器人回答同时客服也会收到消息提醒，可进行补偿或专门回答，目前看淘宝上这类较多。

正好千牛有介绍，就搬上来了

其他ai功能类型类似，问候语，ai问答，商品推荐，数据看板等，在于将此类功能做的完善程度。无疑千牛已经做到了相当完善的程度，同时处于营收目的，将不同功能服务设置为不同层级，进行售卖。

大致分为三类，内容细节很多，具体内容有兴趣的小伙伴可以自己去看看

基础功能，ai问答，知识库，

营销类功能，商品推荐，营销话术推荐

数据类功能：各类数据看板

总体看千牛商家聊天功能相对简单，没有太多功能，ai部分功能更丰富，具体功能效果体验之后再给大家介绍