首页/风格学院/Patreon 2017

设计风格指南

什么是 Patreon 2017?

Patreon 2017 设计风格示例

Patreon 2017 年的品牌重塑证明了一件事:服务创意资助的平台,完全可以像它所支持的艺术一样温暖而有人情味。

Patreon 2017 速览

Patreon 2017 是一套通过大规模品牌重塑确立的视觉识别系统,将这个平台从一个功能可用却平淡无奇的创业公司界面,转变为创作者经济领域辨识度最高的设计声音之一。整套风格围绕温暖的珊瑚红与柔和奶油色、圆角卡片布局,以及手绘风格插画点缀构建,传达出信任、温暖与创意可能性,却没有一丝企业感或交易气息。

在本质上,Patreon 2017 的美学拒绝了大多数金融科技与平台设计惯用的冷调、偏蓝的中性色。当支付类和订阅类平台通常用视觉上的节制来传递可信赖感时,Patreon 选择了截然相反的路径:以平易近人的温暖作为真实性的信号。珊瑚主色充满活力却不咄咄逼人,亲切但不失稳重;奶油底色柔化了整体观感,让界面既不显得冰冷,也不流于过度俏皮。

这套风格清晰地标记着它所属的时代——创作者经济兴起的那个时刻:独立音乐人、作家、播客主、插画师成为一个被认可的经济群体,拥有自身鲜明的文化身份。Patreon 2017 的设计是一份视觉宣言,宣告这种身份值得拥有属于自己的美学语言——既有别于企业软件的刻板专业感,也有别于消费类社交媒体的喧嚣紧迫感。

Patreon 2017 设计风格用在文章页上

Patreon 2017 从何而来?

Patreon 由音乐人兼 YouTube 创作者杰克·孔特(Jack Conte)与软件工程师山姆·严(Sam Yam)于 2013 年在美国旧金山共同创立。孔特的创业洞见来自亲身经历:他发布了一支获得数百万次播放的病毒式音乐视频,却几乎没有变现收益。他和严一起建立的这个平台,旨在让粉丝以持续订阅的方式直接向创作者付费——以文艺复兴时期艺术赞助的概念为蓝本,有意取代以广告为驱动的收入模式。

2013 年上线时,Patreon 的原始界面采用的是简洁实用的众筹平台美学——功能明了,但缺乏个性。到 2016 年,平台的创作者基础和文化影响力均已显著增长,管理层意识到设计必须与产品的雄心相匹配。2017 年,Patreon 邀请了伦敦品牌咨询公司 Wolff Olins 主导一次全面的品牌重塑。Wolff Olins 此前曾操刀 2012 年伦敦奥运会与 AT&T 等知名品牌形象。此次设计简报的核心目标是:创造一套感觉人性化、富有创造力,且与大多数平台设计的灰色中立感截然不同的视觉语言。

Wolff Olins 将珊瑚与奶油色调作为一次刻意的突围,意在脱离硅谷平台惯用的蓝色主导语言——PayPal、Facebook、Twitter、LinkedIn 无不占据了冷色调的光谱。珊瑚色处于红与橙的温暖交汇处,带有活力、乐观与亲切的联想。与纯白底色相比,奶油底色与珊瑚的组合制造出一种数字界面极少能实现的模拟温度。作为视觉系统的辅助层,手绘插画风格的引入则着重强调了创意与人情味的维度——Patreon 的核心用户群,艺术家与他们的粉丝,会将这种感觉认定为真实可信。

2017 年确立的这套视觉系统在视觉上保持稳定直至大约 2024 年,对于一个科技品牌而言,这是极为罕见的持久性。这种长效性反映了这套美学与一个文化时刻的深度绑定:随着创作者经济持续增长,Patreon 的视觉语言也随之成为这一领域的定义性面貌。此后的品牌迭代对珊瑚-奶油-圆角体系有所精炼,却未有根本性颠覆,印证了 Wolff Olins 所打造的东西拥有非凡的持久力。

Patreon 2017 的视觉特征是什么?

色彩

整套色板以温暖的珊瑚红为主要行动色与强调色,铺设于柔和的奶油色或米白底面之上。这一组合经过刻意选择,目的是传递温暖与人情味,而非冷调与机构感。黑色用于主体文字与结构性元素。珊瑚色中红的成分足以传递活力,却不至于触发警示感;橙的成分则让它显得亲切而非咄咄逼人。辅助色系从同一暖色谱系中提取大地色调,即使在信息密度较高时也维持着整体的模拟温度感。

字体排印

字体系统采用人文主义无衬线字体——这类字体的字形比例松散地源自古典书法,比几何型或怪诞型无衬线字体拥有更为亲切的节奏感。这一选择与平台对温暖感的核心需求高度契合:同一款字体,在法律免责声明中可读,在创作者自我介绍中同样显得亲近。层级通过字号与字重建立,而非在不同字体家族之间切换。标题尺寸充裕,制造出邀请性的视觉入口;正文保持舒适的行宽,搭配宽松的行距。

形态与圆角

圆角被一致且慷慨地应用于卡片、按钮、输入框与容器元素上。圆角幅度足够大,能立即被感知到,而非仅仅是细微的柔化处理——这是一个审慎的审美决定,而非技术默认值。圆角在心理上与安全感、亲近感以及人工制造物的联想相关,与尖角所传递的精准与权威感形成对比。圆角在所有可交互元素上的一致性制造了视觉凝聚力,在每一个接触点上强化平台的温暖底色。

手绘插画

插画系统采用松散的手绘质感,刻意呈现人手的痕迹。线条并非完美流畅,形态带有轻微的不规则感,质感暗示铅笔或墨水而非矢量精准。这一选择意在唤起创作过程本身——平台的核心主题——并将品牌与科技行业更广泛流行的精致光滑插画风格区分开来。插画出现在主视觉区域、装饰性点缀与空状态图形中,始终强化着这样一种感受:创意是私人的、手工的,而非自动化的。

空间的慷慨

布局系统大量运用留白,组件内部填充充裕。卡片有呼吸空间,文字四周有余地,区块之间靠可见的空气分隔,而非线条或分割符。这种空间慷慨同时服务于审美与功能两个目的:在审美上强化温暖、从容的基调;在功能上确保内容丰富的创作者页面显得有条不紊而非拥挤。这种方式抗拒了平台设计中常见的信息压缩冲动,转而优先保证每条内容都被赋予适当的关注感。

柔和深度

与某些复古或最大主义风格的硬边阴影不同,Patreon 2017 在卡片与浮层表面上使用柔和、漫射的抬升阴影,制造出一种轻柔的层叠感。阴影足够微妙,不会主导视觉场,却足够清晰,能在内容层级之间建立明确的视觉秩序。这种柔和深度方式与 2010 年代中期兴起的材料设计语言一脉相承,但通过更温暖的奶油底色加以呈现,让深度感更接近模拟质感而非数字感。

人文基调

系统中的每一个元素——色彩、字体、插画、间距——都围绕同一个基调目标进行校准:界面应当感觉像是由关心创意工作的人为关心创意工作的人所打造的。这并非依赖任何单一的视觉手法,而是通过温暖选择的积累来实现。珊瑚色说的是温暖;圆角说的是亲近;手绘插画说的是有人亲手做了这件事;充裕的空间说的是我们不着急。这些选择的一致性,是将这种风格与任何单一元素的表面性应用区分开来的关键。

Patreon 2017 设计风格用在仪表盘上

谁塑造了 Patreon 2017?

Jack Conte

孔特于 2013 年联合创立了 Patreon,此前他作为 YouTube 上的音乐人亲身经历了创意曝光度与财务可行性之间的落差。这段创业经历塑造了平台的核心价值主张——创意工作值得获得可持续的回报——而这同样的信念成为 2017 年视觉系统的情感设计简报。作为首席执行官,孔特持续深度参与平台的品牌方向,确保视觉语言所表达的是对创作者体验的真实共情,而非单纯的市场定位演练。

Sam Yam

严与孔特共同创立了 Patreon,提供了让平台在技术层面得以实现的工程与产品基础。作为联合创始人兼首席技术官,严参与定义了 2017 年视觉系统需要在规模化场景下表达的产品架构——一个服务多样化创作者类型的会员制平台,涵盖播客主、视觉艺术家、作家,各自与粉丝社群的关系动态各有不同。平台需要服务的创作者类型之广,是一个关键的设计约束条件,它推动视觉系统走向温暖与灵活,而非针对特定品类的专属品牌形象。

Wolff Olins

Wolff Olins 是受邀主导 Patreon 2017 年品牌重塑的伦敦品牌咨询公司。这家公司由沃利·奥林斯(Wally Olins)与迈克尔·沃尔夫(Michael Wolff)于 1965 年创立,拥有挑战行业惯例的品牌形象设计长期记录——包括 2012 年伦敦奥运会因其断裂、动态的标志设计而引发广泛争议的品牌形象。针对 Patreon,Wolff Olins 开发了珊瑚-奶油色调体系、圆角视觉词汇以及整体品牌架构,将平台定位为企业级平台设计的对立面。此次合作产出了 2010 年代中期科技行业最具持久力的品牌形象之一。

Patreon Brand Team

Patreon 内部品牌与设计团队负责将 Wolff Olins 系统延展并维护至完整的产品接触点范围——网页、移动端、营销材料、电子邮件与面向创作者的工具。他们在 2017 年上线后多年间的工作,展示了一套构建良好的视觉系统如何规模化运作:珊瑚-奶油-圆角语言在数百个个别设计决策中保持连贯,原因在于底层原则足够清晰,能在无需逐案裁定的情况下持续输出一致的结果。从很多意义上说,团队对系统的持续维护,与原始品牌形象工作本身同样是值得称道的创意成就。

今天怎么用 Patreon 2017?

Patreon 2017 最好被理解为一种以温暖为核心的平台美学——它适用于那些设计需要表达亲近感、创意社群与人际连接价值的场景。最自然的应用场景包括:创作者经济产品、会员制平台、社群工具,以及任何用户将自己视为共同创意项目参与者而非服务消费者的数字产品。

在演示文稿中,这套风格对封面页与章节分割页尤为有效。封面页应以奶油底色上的大面积留白为主,珊瑚色保留给单一主导性视觉元素——一个形状、一处强调、一个突出的行动号召——标题采用大号人文主义无衬线字体。章节分割页适合将手绘插画语言用作满版背景或装饰性角落元素,在传递过渡感的同时保持视觉温度。内容页应优先保证空间慷慨:每页元素更少,容器内部填充更大,章节标题有充足的视觉呼吸空间。

在网页界面设计中,这套系统在会员仪表板、创作者个人资料页,以及定价或会员等级选择流程中表现出色。仪表板布局以圆角卡片语言作为主要组织单元,柔和的抬升阴影区分活跃内容区域与背景。导航与主要操作使用珊瑚色,保持清晰的路径指引而不依赖生硬的视觉打断。数据可视化——支持者数量、收入图表、互动指标——在暖色调中呈现比大多数分析工具默认的灰蓝色调更为亲和的质感。定价页面天然契合这套系统:其温暖感能有效降低等级与价格展示通常引发的交易焦虑。

在编辑与营销材料中,这套风格有效支撑关于创意文化、创作者成功故事与社群功能的内容。营销页面应充分调用系统的完整表达力:在奶油底白字与珊瑚底奶油字的全宽区块之间交替,以手绘插画作为区块主视觉,排版尺度足够大胆,传递出海报感而非纯信息感。采用这套系统的电子邮件模板同样受益于空间慷慨原则——宽阔边距、宽松行距、每封邮件只有一个珊瑚色行动号召——手绘插画语言在缩小到缩略图比例的点缀图形时同样表现良好。

应用这种风格时最常见的错误是对珊瑚色的过度使用。系统的温暖感依赖于珊瑚色被克制地用于柔和的奶油底色之上——当珊瑚色填充大面积区域,或在同一版面上多处竞争性出现时,它会失去温暖感,读起来流于俗艳。同样,在没有仔细整合的情况下将手绘插画系统与摄影图片混用,会破坏基调的一致性:摄影是冷调且具有指示性的,手绘插画是暖调且富有表现力的。当两者必须共存时,摄影应加以暖色调处理,或通过构图安排让插画承担主要的情感表达职能。

Patreon 2017 设计风格用在幻灯片 · 封面上

Patreon 2017 · 常见问题

Patreon 2017 与其他温暖友好的平台风格(如早期 Mailchimp 或 Basecamp)有什么不同?

Mailchimp 早期的视觉形象同样温暖且以插画为主,但它依赖于怪诞的角色驱动插画和更偏黄的色调,整体感觉更为俏皮,带有卡通气质。Basecamp 则使用大地色调和简洁直接的布局语言,通过简约而非视觉表现来传递温暖感。Patreon 2017 介于两者之间:比 Mailchimp 早期的随性更为精致,比 Basecamp 的朴素实用更富表现力。其独特性来自珊瑚色本身——这种颜色拥有足够的视觉温度让人感到亲近,同时具有足够的色彩强度,能在产品界面中充当行动色。

这套风格能用于非创作者类平台吗?或者说它与 Patreon 的关联是否太过紧密?

珊瑚-奶油色调在创作者经济的语境中与 Patreon 关联强烈,因此在竞争性创作者平台上直接复用会显得缺乏原创性。然而,其底层视觉原则——人文主义无衬线字体、圆角、柔和抬升感、手绘插画点缀、暖色调色板——并非专有设计元素,可以很好地迁移至完全不同领域的会员制平台、社群工具、教育产品与健康应用中。关键在于:通过有别于 Patreon 特定珊瑚色的色调来表达温暖优先的原则,同时保留让系统感觉人性化而非企业化的结构性选择。

在深色模式场景下如何应用这套风格?

Patreon 2017 从根本上是一套浅色底面系统,奶油与珊瑚的温暖感在很大程度上依赖于这个浅色基础。真正的深色模式反转颇具挑战性:用深炭色或近黑色替代奶油色后,珊瑚强调色保留良好,但整体温暖感会消散,因为深色底面在视觉上天然偏向冷调。最成功的深色适配版本会保留珊瑚色作为主要强调色,将插画系统简化为更简洁的线条处理,并通过降低文字对比度来补偿失去的温暖——在深色底面上使用略带暖意的米白色作为正文颜色,而非纯白色。

手绘插画风格对这套系统来说是不可或缺的吗?还是可以舍去?

手绘插画是系统中最具可选性的层次,但也恰恰是最能将这套风格与通用暖色调设计区分开来的那一层。缺少手绘插画,一个珊瑚-奶油圆角界面会让人感觉愉悦,但不会被明确地读作 Patreon 风格——它可能属于 2010 年代中期任意数量的消费类应用。插画系统赋予了这套美学创意身份信号,传递出这个平台关乎人工创作而非自动化内容的感受。若生产条件不允许定制插画,哪怕是统一使用一套市售手绘图标集,或用带纹理的笔触作为分割线,也能部分承担这一功能。

考虑到这套风格确立于 2017 年,它的时效性如何?

对于一套建立于 2010 年代中期的数字设计系统而言,Patreon 2017 的时效性出人意料地持久。同时代许多风格深受扁平设计浪潮的时代烙印,如今看来已显老态,但 Patreon 对温暖感和人文插画的倚重,而非对纯粹的扁平几何抽象的依赖,赋予了它更为超越时代的品质。珊瑚-奶油组合已经作为一种文化现象与创作者经济关联,而不仅仅与某种特定的界面时尚挂钩。这种文化附着正是它最有力的持久性机制:只要创作者经济作为一个被认可的领域持续存在,以视觉方式定义了它的那套美学就保有当代相关性。其主要的老化信号是插画风格——反映了 2010 年代中期此后已有所演进的插画设计惯例。如果考虑刷新,这一层最值得优先更新。

获取 Patreon 2017 完整设计系统 →