首页/风格学院/Circular Fintech

什么是 Circular Fintech?

Circular Fintech 设计风格示例

Circular Fintech 是银行类 App 不再「长得像银行」的那个转折点——2018 年前后的一批新型银行,把海军蓝、红与密密麻麻的表格,换成了淡紫白留白、圆角卡片,以及一道自信的紫罗兰到紫色渐变。

Circular Fintech 速览

Circular Fintech 是「App 原生新型银行」的视觉语言:一块大面积、通透、带着一丝冷紫调的近白画布之上,漂浮着圆角卡片——看起来是悬浮着,而非被塞进方框或边框里。一道鲜明的紫罗兰到紫色渐变,是整套体系里唯一的标志性装置,只保留给一张主余额卡片、一个关键行动号召按钮,或一个重点套餐——绝不铺满整个屏幕。几何圆体无衬线字体、充裕的留白与圆形图标芯片,共同完成这幅画面:界面里的一切都是圆的,没有一处是尖锐的。

这种风格与它之前的一切正面对立。老一代银行 App 在视觉上不过是数字化的纸质对账单:密密麻麻的表格式数字、细小的衬线体或默认系统字体,以及一套继承自数十年印刷品牌、纸质存折与网点招牌的海军蓝加机构红色板。安全感靠视觉分量来传达——粗边框、挂锁与盾牌图标、密密麻麻的免责声明——因为在那套旧语法里,「值得信任」就等于「看起来严肃、官方」。

Circular Fintech 主张的恰恰相反:对于每天查看余额、而非每季度才走进一次网点的移动原生一代来说,信任感来自「轻盈、易读、不带压迫感」。紫色承担起过去海军蓝与红色所承担的工作,但只出现一次、大胆而克制——是单一的主打色,而非一整套企业色板——剩下的一切交给圆角与留白去完成,让这款 App 更接近一件设计精良的消费产品,而非一家金融机构。

Circular Fintech 设计风格用在文章页上

Circular Fintech 从何而来?

在智能手机时代最初的几年里,数字银行的视觉语言几乎没有变化。2010 年代初期的早期银行 App,无论在功能还是视觉上,本质上都只是网银网站的移动版移植——而网银网站本身,又是纸质对账单与存折的数字化版本:密密麻麻的表格式数字、细小的默认系统字体,以及一套沿用自数十年网点招牌与印刷物料的海军蓝、灰色与机构红色板。安全感靠视觉上的严肃感来传达——粗重边框、挂锁与盾牌图标、密密麻麻的法律免责声明——这是一套为「走进网点办业务」的客户而设计的语法,而非为「地铁两站之间查一眼余额」的客户设计的。

这套语法在巴西被打破了。2013 年创立于圣保罗的 Nubank,在一个银行业普遍被认为由少数几家动作迟缓、收费高昂的大型老牌银行所主导的市场里,做出了一款完全数字化、没有实体网点的信用卡产品。除了产品本身,创始团队把卡片与 App 定为紫色——这是一种此前在全球任何地方都与银行毫无关联的颜色——这一决定本身就是一次真正具有颠覆性的设计宣言。它在客户读到任何一项具体功能之前,就已经传达出:这不是又一家披着这个行业蓝、红或金色统一制服的银行。

到 2018 年前后,Nubank 所普及的这套视觉语法——单一大胆的强调色、圆角卡片、充裕留白、几何无衬线字体——已经超越了这一家公司本身,扩散为拉丁美洲与西欧一大批纯 App 新型银行与消费金融初创企业的共同选择。带有柔和圆润字形的几何无衬线字体家族——例如 Circular、Poppins 这类字体所代表的类型——成为那个年代的字体之声,取代了早期智能手机 App 里狭窄的系统字体,也取代了传统银行账本式的衬线字体。数字产品设计咨询机构,包括 Pentagram 这样的大型跨国事务所,在这一时期也活跃于塑造 App 优先的金融品牌更广泛的视觉惯例——为界面尺度而非印刷版 logo 而设计的、大胆的单色识别系统。

到 2020 年代初,这种风格已经从一次颠覆性的信号,成熟为近乎默认的行业预期:紫罗兰到紫色的渐变、圆角卡片、友好的几何无衬线字体,成为消费金融 App 如此普遍的惯例,以至于新入局者越来越需要主动远离它才能脱颖而出。这种成熟本身,正是它今天能被辨认为一种特定时期风格——「2018 年代新型银行」——的原因,就像扁平化设计与拟物化设计如今也被认作各自独立年代的界面史一样。

Circular Fintech 的视觉特征是什么?

色彩

画布是一种偏冷、带一丝淡紫调的浅近白色——从不是暖调奶油白,也不是那种冷冰冰的临床白。在这块底色之上,一道从紫罗兰过渡到紫色的鲜明渐变,是整套体系唯一的主打色,只保留给少数几个真正承重的元素,而不铺满整个界面。这里没有一整套辅助品牌色;对色彩数量的克制,本身就是这套体系的纪律。

字体排印

字体是几何无衬线体,字形带有柔和的圆润字腔——属于 Circular、Poppins 这类字体所代表的家族——之所以选用它们,正是因为小写字母上圆润的收笔读起来友好,而非权威。标题采用宽松、通透的间距;正文保持简洁易读,而非密集紧凑。老一代银行 App 用紧密排列的表格数字来传达精确感,这种风格反其道而行——让关键数字变大、变疏朗,独立呈现在页面上。

圆润形态

一个单一的几何理念——圆角矩形与圆形——在每一个尺度上反复出现:卡片圆角、按钮形状、头像与图标芯片,甚至图表曲线的弧度。这不是随意点缀的圆润,而是一套贯穿全局的形态语法——用户视线所及之处,不会出现任何一个尖锐的直角。正是这种一致性,让这种柔和感读起来是刻意为之,而非偶然。

渐变的用法

紫罗兰到紫色的渐变被有节制地、克制地使用——通常只出现在一张主打卡片上(余额展示、重点套餐、主行动按钮),而非作为整片背景铺色。界面的其余部分保持平静、平面、近乎单色,这样渐变才会读作一处刻意为之的标志性强调,而非众多互相争夺注意力的渐变之一。在版面其他地方过度使用它,恰恰会稀释它本该制造的效果。

留白与信息密度

卡片与卡片之间靠充裕的留白来分隔,而非依靠分隔线或粗边框——间距本身就承担了划分的功能。数据呈现是疏朗的,而非表格式的:一个大大的余额数字,而非一整片密密麻麻的数字网格;每张卡片只呈现一个清晰的指标,而非让多个指标在同一空间里相互竞争。这是对老一代银行界面那种「电子表格式」信息密度的刻意背离。

图标语言

图标简单、单线条、带圆角,被安放在圆形芯片里,而非方形色块中。这里没有拟物化的银行图标——没有带明暗渲染的保险柜,没有挂锁,没有盾牌。老一代银行 App 用一个上锁的保险箱图标来传达「你的钱很安全」,而这种风格则依靠界面整体的柔和感本身,去传达亲和力,而非机构式的严肃感。

Circular Fintech 设计风格用在仪表盘上

谁塑造了 Circular Fintech?

Nubank

Nubank 于 2013 年创立于圣保罗,打造了一款完全数字化、没有实体网点的信用卡与银行产品,也是与这种风格关联最深的公司。它选择将产品定为紫色——在一个此前从未使用过这个颜色的行业里——这一个决定,最常被认为是掀起整个 2018 年代新型银行美学浪潮的起点。

David Vélez

Nubank 联合创始人兼首席执行官,被认为是「打造完全 App 原生、无实体网点的银行产品」这一创立决策的关键人物,也主导了刻意区别于任何一家传统银行的视觉识别方向——赌的是:对于移动优先的客户而言,易读与温度,而非机构式的严肃,才是建立信任的方式。

Pentagram

这家跨国设计咨询机构在这一时期活跃于塑造 App 优先、数字原生品牌更广泛的视觉惯例——为界面尺度而非印刷版 logo 而设计的、大胆的单色识别系统——这些惯例后来更广泛地塑造了 2010 年代末消费金融设计的整体面貌。

The neobank wave

超越任何一家单独的公司,2010 至 2020 年代拉丁美洲与西欧那一整波纯 App 新型银行,都采用了高度近似的视觉语法——单一强调色、圆角卡片、充裕留白——延续着 Nubank 所普及的模式,直到这种样貌从某一品牌的标志,变成了整个门类的通行惯例。

Geometric sans-serif UI typography

转向圆润几何无衬线字体家族、并将其作为消费软件默认声音的这一更广泛趋势,本身就是塑造这个年代的重要力量——它同时取代了早期智能手机 App 中狭窄的默认系统字体,以及长期与传统银行印刷物料相关联的账本式衬线字体。

今天怎么用 Circular Fintech?

Circular Fintech 天生读起来亲和、现代、对消费者友好,这让它尤其适合任何面向普通大众、处理资金或预算、需要「安心感却不带压迫感」的产品。用好这种风格的关键,是把紫色与圆润当作稀缺且刻意的信号来使用,而不是把它们当作一整套要铺满每个界面的品牌色板。

在演示文稿中,封面页适合做成一块近乎空白的淡紫白画面,上面漂浮着一张承载标题的大型圆角渐变卡片——比起企业风的标题页,它更接近一张 App 截屏。内容页应保留朴素的淡紫白底色,用小型圆角卡片来归组相关的要点,抵抗住把内容做成密集有边框表格的冲动。数据页应当让每张卡片只呈现一个数字,并把它做大——在这套体系里,一个余额式的大数字,比一张挤满多栏的图表传达得更多;渐变只应用来强调这一页里最重要的那一个指标。

对于网页界面,这种风格天然适合希望显得轻盈而非机构化的仪表板、账户页面与定价页面。在定价页上,这种克制体现得尤为清楚:套餐卡片以圆角与充裕间距排布在淡紫白底色上,只有推荐套餐获得紫色渐变处理,无需徽章或粗边框就能把视线吸引过去。如果每张卡片都给了渐变,这套层级技巧就会瓦解——重点恰恰在于强调色的稀缺性。

在编辑与营销内容中,这种风格尤其适合生活方式类的理财内容与消费级 App 的落地页。头图区域最适合用一张漂浮在淡紫白底色上的大型圆角卡片或设备样机,而非通栏的摄影背景;引用语放进一枚柔和的圆角芯片里,也比放进一整块斜体文字区块读起来更自然。

最常见的错误,是把渐变用得到处都是——每个按钮、每张卡片、每个区块背景——直到它不再是一种标志性强调,反而变成了噪音,同时也会破坏整套体系所依赖的那种平静、通透的感觉。第二个常见错误,是混入了尖锐的直角元素、密集的表格式数字,或者第二种强调色;这些做法都会打破让这种风格得以自成一格的、单色克制的纪律。

Circular Fintech 设计风格用在幻灯片 · 封面上

Circular Fintech · 常见问题

这和整个科技行业里泛泛可见的「紫色渐变」风格是一回事吗?

相关,但并不等同。同一个十年间,不少消费软件都在某处用过紫色或紫罗兰渐变。让 Circular Fintech 独树一格的是这几者的组合:冷调淡紫白的底色,而非深色或暖色底;圆角金融卡片的语法,而非泛泛的通用 App 界面外壳;以及疏朗、克制的渐变用法,而非大面积铺满渐变。去掉圆角卡片与淡紫底色,剩下的就只是泛泛的初创公司品牌,而不是这种特定风格。

这种风格适合暗色模式吗?

如果不认真重新设计,很难成立。这种风格的历史底色明确是浅色的——一种冷调、淡紫的近白——它「通透、不带压迫感」的感觉,很大程度上正是直接来自那块浅色、开放的画布。深色反转版本并非不可能,但留白效果会消失,渐变也不得不独自承担更大比例的视觉识别任务,因为它不再能与近白底面形成对比。若处理不慎,深色版本读起来会是一个泛泛的暗色仪表板,而非这种特定风格。

一套 Circular Fintech 版面应该用几种强调色?

一种。这种风格的纪律,取决于紫色作为唯一的主打色而存在,而非某个更大辅助色板中的领衔色。辅助元素应保持中性——灰色、黑色,以及淡紫白底色本身——而不是为了「丰富一点」而引入第二种、第三种强调色。颜色越多不代表体系越丰富;恰恰相反,它会稀释整套风格所依赖的那唯一一个信号。

什么样的产品适合这种风格,它在哪些场景会力不从心?

它适合面向普通大众的消费级理财、预算与生活方式订阅类产品,这类受众能从「少一点资金压迫感」中真正受益。它在机构级或企业级金融科技场景中会力不从心——资金管理工具、银行基础设施、合规仪表板——这类受众期待并看重更严肃、更具权威感的视觉语域;在按揭贷款或保险这类高度受监管、后果重大的场景里,过度的柔和感也可能被解读为在淡化重大决策,而非在简化它。

这和更广义上的扁平化设计(flat design)或 Material Design 是什么关系?

它继承自同一条后拟物化设计谱系——平面表面、诚实的形状、没有假纹理或浮雕效果——但把这条谱系收窄得多、也专业化得多。扁平化设计与 Material Design 是覆盖整个操作系统组件、色板宽广的通用界面体系;而 Circular Fintech 把自己限定在一种强调色、一套完全由圆润构成的形态语言,以及一种特定的冷调淡紫白底色上,专为单一品类的产品量身定制。把它理解为扁平化设计这个大家族里一种狭窄、带品牌属性的方言,比把它当作一套独立体系更准确。

获取 Circular Fintech 完整设计系统
© 2026 Curio Design