首页/风格学院/Salesforce Trailhead

设计风格指南

什么是 Salesforce Trailhead?

Salesforce Trailhead 设计风格示例

Trailhead 证明了企业软件也可以温暖、有趣而令人心生向往——以晴朗的天空、彩虹徽章和皮克斯气质的吉祥物,彻底取代冷硬的企业光泽。

Salesforce Trailhead 速览

Salesforce Trailhead 是 Salesforce 在线学习平台的视觉识别系统,也是其企业品牌最富人情味的一面。整套系统以标志性的钴蓝为锚点——这一色调已成为 Salesforce 企业色的即时识别符——配合白云般的底面、覆盖橙色、洋红、青绿与明黄的暖色系小径点缀,以及一家风格明显借鉴当代动画电影的三维吉祥物阵容。最终呈现出的设计语言在企业软件中占据了罕见的位置:它毫无疑问是专业的,同时对于那些可能被 CRM 工具吓退的新手也充满吸引力。

在结构核心上,Trailhead 植根于 Salesforce 的开放设计框架 Lightning Design System。视觉词汇包括慷慨的圆角卡片、暗示层级感却不显生硬的柔和多层投影、将学习进程游戏化的徽章花环,以及以干净开放的无衬线字形和舒适行距构建的字体排印系统。插图与吉祥物刻意呈现出立体感与暖光质感,令人联想到工作室动画的角色设计,而非企业软件中常见的扁平图标系统。

在美学上让 Trailhead 与众不同的,不是任何单一元素,而是将温暖感一层层嵌入结构化系统的高度一致性。天空渐变的英雄横幅让人联想到户外小径,而非季度仪表盘。各具个性的吉祥物穿插全程,引导、庆祝,并将原本枯燥的操作内容人性化。徽章既是成就标记,也是微型设计对象,其圆形花环形态借鉴了纹章与功勋徽章的传统。这些选择共同构建了一个视觉论点:学习复杂的企业工具应该感觉像一场冒险,而非一项合规任务。

Salesforce Trailhead 设计风格用在文章页上

Salesforce Trailhead 从何而来?

Salesforce 于 1999 年由 Marc Benioff 和 Parker Harris 等人在旧金山创立,以明确的使命颠覆企业软件市场——通过网页浏览器完整交付 CRM,彻底消除当时行业所依赖的昂贵本地化安装模式。从一开始,这家公司便为 B2B 软件厂商树立了异乎寻常的表达性品牌,包括将云图标作为标志与交付模式文化符号的突出运用。「No Software」口号与轻松的会议文化氛围共同奠定了一种基调,并最终在 Trailhead 上找到其最完整的视觉表达。

Trailhead 学习平台于 2014 年上线,起初是帮助 Salesforce 客户与合作伙伴快速掌握公司持续扩张的产品矩阵的途径。围绕它涌现的视觉识别比 Salesforce 主品牌更为活泼——引入小径比喻、户外冒险图像语言,以及一套松散参照童子军与职业认证传统建立的模块化徽章体系。徽章花环设计——其层叠圆环与中央徽标——成为平台最具辨识度的视觉母题,出现在实体周边、活动装置与数字界面等各类场景中。

吉祥物项目在 2016 年前后成形,以 Astro 的登场为标志——这只身着宇航服与牛仔帽的浣熊,被设计为同时兼具冒险气质、亲切感与一点点最优秀动画配角特有的荒诞感。随后登场的 Codey 蓝熊、Cloudy 粉云、Genie 蓝精灵等形象各自关联特定产品线或学习赛道。吉祥物美学明确借鉴了 Pixar 等工作室的角色制作管线:以简化却有体积感的形体、温暖的定向光照、富有表现力的面部特征构建,并以在手机小屏幕上仍能清晰识别的配色方案呈现。

2022 年至 2024 年间趋于成熟的当前视觉系统,是上述创始冲动的深化版本。Lightning Design System 提供结构性脚手架——一致的间距节奏、无障碍色彩对比规范、适用于网页与移动端的组件库——而 Trailhead 层则叠加温暖感、个性与游戏化元素,使学习体验有别于主产品界面。曾担任 Salesforce 总裁兼首席传道者的 Sarah Franklin,以及创意负责人 Tim Mason,是在平台最大规模增长阶段塑造其品牌基调的关键声音。Salesforce 每年在旧金山举办的 Dreamforce 大会,是这套视觉系统规模最大的线下呈现场合:吉祥物以巨型装置形式现身,小径调色板的全彩范围浸透整个活动现场。

Salesforce Trailhead 的视觉特征是什么?

标志蓝与云白

Salesforce 的钴蓝——一种饱和度高、略带暖意的中调蓝——作为系统的首要锚点存在。它出现在英雄横幅、主要按钮、导航栏与品牌识别元素中。与之相对,云白是主导的底面色,赋予整体调色板一种轻盈的天空质感。蓝白关系并非纯企业调色板的冷峻对比;它读起来像白昼光线,而非荧光灯管。

彩虹小径点缀色

在核心蓝白之外,Trailhead 使用一套结构化的点缀色系,覆盖暖橙、鲜洋红、明青绿与活力黄绿。这些色调出现在徽章配色、数据可视化、分类标签与英雄插图中。它们单独使用——极少同时全部亮相——以区分不同的学习小径、模块与技能等级。效果同时兼具庆典感与导航性:色彩传达具体含义,而非纯粹装饰。

徽章花环游戏化

徽章是 Trailhead 最具标志性的设计对象。每枚徽章是一个圆形花环——从中央徽标向外放射的层叠圆环——以足够的立体细节呈现,即便在数字形态下也有实体奖章的质感。徽章按模块、小径与超级徽章等级组织,以颜色与徽标图像传达其类别。形态语言借鉴自童子军功勋徽章、军事勋章与职业认证印章,将那套「赢得成就」的视觉词汇转译到软件学习情境中。

皮克斯气质的三维吉祥物

Astro 浣熊、Codey 蓝熊、Cloudy 白云与 Genie,均以当代动画电影的角色设计原则塑造:简化却有体积感的剪影、温暖的三点布光、大而富有表情的眼睛,以及让人感到友好而非写实的比例体系。它们出现在英雄插图、加载状态、错误页面与活动装置中。每个吉祥物都有明确的性格——Astro 充满冒险精神,Codey 真诚努力,Cloudy 温柔呵护——使整套系统拥有超越单一情感基调的表达幅度。

圆角卡片与柔和层级

Trailhead 系统的 UI 组件采用慷慨的圆角与多层柔和投影,以传达层级感与分组关系。这与企业仪表盘中常见的直角扁平界面形成刻意对比:圆角卡片读起来亲切而现代,而非权威而僵硬。投影细腻且多层叠加,制造深度感而不产生视觉沉重感。两者叠加的效果,是一个感觉略微悬浮于背景之上的界面——被托举着,可以栖居的。

天空渐变英雄横幅

英雄横幅与区块背景频繁使用天空渐变处理——从顶部较浅的色调温柔过渡至底部更丰富的蓝色或互补色调,偶尔点缀插图云朵元素。这些渐变并非其他当代风格中那种硬边或霓虹渐变;它们自然而平静,唤起真实天空而非数字特效。这一手法始终如一地强化了贯穿整个平台的「小径即户外冒险」比喻。

开放无衬线字体与富有表现力的尺度

字体排印系统偏向开放、人文气质的无衬线字形,配以慷慨的字距与舒适的行高——这些特质将不同屏幕尺寸与技能水平下的可读性置于首位。层级通过尺度与字重对比建立:大而粗重的标题标示新章节或成就时刻,而正文则保持从容可及的节奏。字体系统从不给人压缩感或企业感;一切都被留白环绕,强化平台关于「在此学习舒适自主」的承诺。

Salesforce Trailhead 设计风格用在仪表盘上

谁塑造了 Salesforce Trailhead?

Marc Benioff

Benioff 于 1999 年联合创立 Salesforce,并始终是其最具辨识度的代言人,奠定了使 Trailhead 的温暖感与使命驱动语言得以成立的文化基调。他早期对云交付的坚持、慈善品牌理念,以及将企业文化定义为「Ohana(家人)」的概念,为一个围绕冒险比喻与卡通吉祥物构建的学习平台创造了条件——令其感觉真实而非生搬硬套。他力推的年度大会 Dreamforce 是该平台规模最大的线下呈现。

Parker Harris

作为 Salesforce 联合创始人与长期担任的首席技术官,Harris 监督了 Lightning Design System 的技术架构——这是 Trailhead 视觉一致性所依托的结构性框架。他的团队决定构建并开源一套完整的设计系统,确保 Trailhead 识别体系能够跨越数百个产品界面延展而不发生碎裂。设计系统在工程层面嵌入的无障碍承诺,也与 Trailhead 包容性学习使命所体现的价值观一脉相承。

Sarah Franklin

在 Trailhead 增长最迅猛的年份,身为 Salesforce 总裁兼首席传道者的 Franklin 对于塑造平台的声音、使命框架与社群文化发挥了关键作用。她大力推广「Trailblazer」身份认同——这一称谓赋予 Salesforce 学习者与社群成员——让平台用户拥有了一个自我定义为先行者的名字与叙事。她在 Dreamforce 与 Trailhead 营销中的公开存在,将平台基调确立为充满志向感、包容性与职业转型潜力,而非狭义的技术性内容。

Tim Mason

Mason 在 Trailhead 视觉系统趋于成熟的时期担任关键创意负责人。他在吉祥物项目、徽章设计语言与整体插图方向上的工作,确立了使该平台有别于常规企业设计的皮克斯气质温暖感。吉祥物阵容——各具鲜明个性且与特定产品线关联——反映了一种将每个形象视为长期品牌资产而非一次性活动工具的角色设计哲学。

Astro (character)

身着宇航服与牛仔帽的浣熊 Astro,是 Trailhead 的旗舰吉祥物,也是该平台设计价值观最清晰的单一表达。这个角色的混合装扮——半是宇航员,半是牛仔——字面化地体现了平台的双重承诺:前沿探索与扎根社群。Astro 的设计在宽泛的文化可读性(浣熊在北美流行文化中顽皮而友好)与现代动画的立体感、暖光角色美学之间取得平衡。作为吉祥物,Astro 展示了 Trailhead 体系如何在字体与色彩单独呈现显得不足的情境中,以角色作为品牌价值观的承载载体。

今天怎么用 Salesforce Trailhead?

Trailhead 是在其原生语境之外应用难度较高的企业设计风格之一,原因在于其温暖感大量来自吉祥物与插图层,而非仅仅来自结构性组件。良好应用意味着理解哪些元素具有可移植性——色彩逻辑、卡片架构、徽章母题与字体温度——哪些则需要专项插图制作,无法简单以图库素材替代。

在演示文稿中,Trailhead 系统最适合封面页完整采用天空与蓝色英雄处理:从较浅到较深蓝色的渐变背景、一侧锚定着吉祥物或大胆插图元素、以及以白色或奶油色呈现的自信大标题。内容页应遵循整洁的卡片网格——每个区块框架为带柔和投影的悬浮面板——点缀色用于标记不同类别或进展阶段。数据页受益于徽章母题:进度指标、完成率与认证数量是圆形花环框架的天然候选对象,能让数字感觉像成就而非统计数据。

对于网页仪表盘与产品界面,这套方法转化为所有交互组件上慷慨的圆角半径、以白色或极浅蓝为主导底面色,以及将钴蓝保留给主要行动与关键导航锚点。柔和多层投影在不使用硬分隔线的情况下将卡片与背景区分开来。点缀色调色板——橙、洋红、青绿、明黄——应系统性使用:每个类别或数据系列对应一种色调,切忌随意混用。错误与警告状态在暖色调系中表现良好;成功状态与品牌蓝自然契合。对于定价页面,徽章形态可以结构化层级对比:每列顶部的圆形层级标记赋予版面一种游戏化、成就导向的阅读体验。

对于编辑与营销内容,这种风格支持英雄驱动的版面:核心蓝与白的全宽横幅交替出现,吉祥物或大型插图打破水平节奏。正文应以高于平均水平的行高与舒适的行宽排版,强化平台从容可及的声音。引述或标注作为徽章式圆形纹章,或以点缀色调文字置于白色卡片上效果俱佳。营销标题应简短、主动而充满志向感——与 Trailblazer 那种自我提升与前沿可能性的基调相匹配,而非罗列功能特性。

在原生语境之外应用 Trailhead 时最常见的错误,是一次性动用全部彩虹点缀色调色板,产生混乱而非庆典感的版面。真实的 Trailhead 使用将每种点缀色视为类别信号——一条小径对应一种颜色,一个数据系列对应一种色调——并保持大面积白色或蓝色让这些点缀色得以呼吸。第二种常见错误是以柔和的通用图库插图替代三维吉祥物美学:扁平图标插图读起来像通用企业设计,而非 Trailhead。如果无法实现原创角色插图,宁可专注于徽章与字体排印系统、让吉祥物层保持缺席,也不要用风格不匹配的视觉元素勉强近似。

Salesforce Trailhead 设计风格用在幻灯片 · 封面上

Salesforce Trailhead · 常见问题

Trailhead 风格适合用于 Salesforce 生态系之外的产品吗?

可以,但需要谨慎。Trailhead 系统最好被理解为友好的游戏化学习与社群平台的设计模板,而非 Salesforce 专属的企业风格。其底层原则——钴蓝与白色的色彩结构、以徽章为基础的成就框架、圆润温暖的 UI 组件、天空渐变英雄横幅——能够良好迁移至任何以技能发展、进阶成长与社群归属感为核心体验的平台。EdTech 产品、职业认证平台、新用户引导流程与开发者文档站点都是天然的适用场景。吉祥物是 Salesforce 的专有资产,不能借用;需要以同样精神创作原创角色设计。

Trailhead 与 Material 或 Fluent 等标准企业设计系统有何不同?

Material Design 和 Microsoft Fluent 是通用型系统,构建目的是适应广泛的应用场景与用途,以中立性与可扩展性为优化目标。Trailhead 则是为特定情感调性——温暖、鼓励、冒险——专门构建的识别系统,叠加于 Lightning Design System 的结构性组件之上。Material 和 Fluent 刻意保持低调以让应用内容先发声,Trailhead 则刻意表达:吉祥物、徽章形态与天空渐变并非中立系统之上的装饰,而是平台价值主张的首要承载者。这一取舍的代价是 Trailhead 的表达性使其中立性降低,因而不适合需要情感克制的场景。

Trailhead 美学能适用于深色模式吗?

Trailhead 的经典体验是浅色模式:白云底面与钴蓝,天空比喻依赖于浅色底面。深色反转是可行的,并在 Dreamforce 活动现场有所探索——以深海军蓝或深靛蓝为底面,配合明亮的吉祥物打光与发光的徽章配色。关键在于将深色底面视为夜空而非企业深色主题——保留吉祥物的温暖感与角色渲染质量,以点缀色调色板作为发光点色,保持徽章花环明亮而非将其调暗以迁就背景。当吉祥物被压暗、徽章被去饱和时,深色 Trailhead 变体就失败了:那会剥离掉定义整套系统的温暖感。

哪类产品或品牌应该避免使用 Trailhead 风格?

Trailhead 在权威性、正式感或严肃性是首要价值的场景中表现欠佳——法律服务、金融合规工具、医疗临床系统或以安全为核心的企业产品。在这些情境下,圆润的温暖感与吉祥物的活力可能削弱而非建立用户信心:被要求审阅合规报告或授权金融交易的用户,需要感受到系统的严肃性,而非被鼓励感包围。该风格也不适合奢侈品或高端定位,那些场景以克制与精炼传达价值;Trailhead 的庆典式丰富感读起来是大众化而非专属性的。最后,高度密集的数据分析工具受益于优先考虑信息密度而非情感温度的中性字体与色彩系统——Trailhead 在间距与色彩表达上的慷慨,在高数据量场景下反而影响可读性。

吉祥物对整套系统有多重要——没有吉祥物 Trailhead 还能成立吗?

吉祥物在结构上对系统并非不可或缺,但在情感上是其核心。没有 Astro 等角色,Trailhead 的其余元素——钴蓝与白色调色板、徽章花环、圆角卡片组件、天空渐变——组合成的是一种友好但通用的企业与消费者设计语言,而非真正独特的识别体系。吉祥物正是使整套系统感觉有人居住、充满生命力而非仅仅有风格的关键所在。对于无法授权或自行创作同等角色工作的应用,最佳策略是专注于徽章架构与天空渐变英雄词汇——这两者在无需原创插图的情况下承载了最多的系统识别度。试图以图库摄影或通用图标包替代吉祥物,产生的结果将是 Trailhead 的近似版本——可辨认,但缺少使原版引人入胜的温暖感。

获取 Salesforce Trailhead 完整设计系统 →