首页/风格学院/Gojek Superapp

设计风格指南

什么是 Gojek Superapp?

Gojek Superapp 设计风格示例

Gojek 将雅加达街头的喧嚣压缩进一张绿色瓷砖网格——由此创造出东南亚超级应用设计的视觉语言。

Gojek Superapp 速览

Gojek 超级应用设计体系,是印度尼西亚最具影响力的多服务平台 Gojek 为自身开发的视觉与交互系统。其核心逻辑在于:将出行、外卖、支付、物流、医疗预约等数十项异质服务,整合在一套由彩色方块网格、扁平图标和标志性亮绿色主色构成的单一界面之后。这套系统的核心承诺是——复杂性可以被整理得井然有序,而无需被简化或删减:所有服务依然完整呈现,但网格赋予了它一种平静而有韵律的秩序感。

这套视觉体系源自两股交织的力量:一是为数亿移动端优先用户跨越多样 Android 与 iOS 设备提供服务的现实需求;二是印度尼西亚特定的文化与语言语境。2019年品牌焕新中采用的字体 Plus Jakarta Sans,专为印尼语量身设计,能够容纳该语言的变音符范围与纵向节奏,同时在移动端密集界面所要求的小字号下保持出色的可读性。这种本地化比字体选择更为深入——方块网格本身折射出印尼街头市场与导视标牌的视觉文化,彩色方格密集排列的组织方式在当地是再熟悉不过的视觉经验。

Gojek 设计系统之所以有别于泛化的 Material Design 扁平风格,在于它对密度与平静感之间那种特定平衡的把握。界面信息密度很高——考虑到服务的广度,这是必要的——但统一的方块尺寸、克制的辅助色板,以及 Gojek 绿作为主锚点的纪律性运用,使得这种密度始终未曾滑入视觉噪音。最终效果更像一张组织得井井有条的交通地图,而不像一个杂乱的集市:在这个系统里,找到任何东西都很快,因为一切都在它应在的位置。

Gojek Superapp 设计风格用在文章页上

Gojek Superapp 从何而来?

Gojek 由纳迪姆·马卡里姆(Nadiem Makarim)与凯文·阿卢维(Kevin Aluwi)于2010年在雅加达创立,最初是一家通过电话呼叫中心调度摩托车出租车的服务公司。在最早期的形态里,没有应用程序,没有视觉系统——只有一个电话号码,将乘客与早已融入雅加达交通肌理的庞大非正式 ojek(摩托车出租车)司机群体连接起来。这种非正式性正是重点所在:Gojek 是在将一种已然存在的事物正规化,赋予它一个名字、一个号码,以及最终一种颜色。

2015年向智能手机应用的转型,迫使公司第一次建立可规模化的视觉识别体系。早期版本的应用在功能上可用,但视觉上缺乏辨识度——绿色从一开始就作为品牌色确立下来,与将 Gojek 司机统一起来的绿色头盔和夹克相呼应,但界面大量借用了同时期通行的扁平设计惯例。随着平台不断扩张——加入 GoPay 数字支付系统、GoFood、GoSend,最终发展至二十余个服务垂直板块——早期视觉系统开始承压。一套为网约车应用设计的品牌架构,无法优雅地容纳一个超级应用。

决定性时刻发生在2019年。Gojek 委托伦敦品牌咨询公司 Wolff Olins 主导一次全面的品牌与识别焕新,内部代号为「Solv」。设计任务书的核心是:创造一套能够将数十项服务维系在连贯关系中而不偏重任何单一服务的视觉系统,同时传达 Gojek 走向更广泛东南亚市场的战略抱负。Wolff Olins 与印度尼西亚字体设计师 Gumpita Rahayu 合作,开发了 Plus Jakarta Sans——这款定制字体成为新识别系统的字体骨干。字体名称刻意向雅加达致敬,将这个国际化品牌锚定于它的本地起点。

Solv 焕新同时化解了一个长期的张力:一方面是头盔剪影——Gojek 最具辨识度的品牌符号,唤起那位始终是公司创始意象的 ojek 司机;另一方面是一个多服务数字平台的需求,这个平台早已远远超越了它的摩托车出租车起点。解决方案是:保留剪影作为锚点,围绕它建构一套灵活的方块系统,通过一致的图标逻辑容纳任何服务类别。到2020年,焕新后的系统已全面部署于应用程序、营销物料以及司机制服、配送包装等实体触点。由此形成的视觉语言,如今已成为整个地区超级应用设计的事实参照。

Gojek Superapp 的视觉特征是什么?

Gojek 绿:结构性锚点

品牌绿——鲜亮、偏暖、饱和度显著——不仅仅是一种颜色,而是整个界面最主要的组织信号。它出现在导航栏、关键行动按钮、激活状态和应用图标上,形成贯穿每一个屏幕的一致线索。绿色从不用于装饰性目的;它标记决策点与主要操作。服务方块内部的辅助色允许更多变化——餐饮类暖橙,物流类冷蓝——但所有辅助色都服从绿色确立的层级。整体效果如同一套有清晰线路色彩的轨道交通系统:绿色永远是主线。

方块网格导航

Gojek 界面的标志性结构元素是方块网格:一组等大小、圆角的正方形方块均匀排列,每个方块包含一个扁平图标和简短标签,用户通过它访问全部服务。这套方块系统解决了超级应用设计的核心难题——如何在不令用户不知所措的前提下呈现数十项服务——方法是利用尺寸一致性和视觉节奏,创造一张可浏览的地图,而非一份无尽的滚动列表。方块按类别分组成逻辑簇,但保持相同比例,因此扫视网格的感觉更像阅读一份索引清晰的参考文献,而非翻找无序的货物清单。

具有文化特异性的扁平图标

图标系统完全扁平——无渐变,无模拟深度,不包含任何超出识别所需之外的插图细节。每个服务图标被简化为最直接可读的剪影:摩托车头盔、装食物的袋子、钱包、包裹。但图标体系承载着将其与泛化平台设计区别开来的文化特异性:食物图标引用印度尼西亚街头食物的视觉惯例,交通图标呈现的是 ojek 摩托车而非通用出租车,整体基调温暖亲切而非冷峻临床。图标设计在极小尺寸下依然不失识别度——这在密集排列的方块网格中是必要条件。

Plus Jakarta Sans 字体排印

Plus Jakarta Sans——为 Gojek 2019年品牌焕新专门开发的定制字体——是整套系统的字体之声。它是一款人文主义无衬线字体,字形保留了细微的手绘质感,而非纯粹几何化,使其在正文字号下可读而亲切,在大标题下依然具有权威感。这款字体专为适应印尼语的语言要求而设计,能够从容处理变音符和该语言较长的复合词。在界面中,字体在标签与背景之间以高对比度使用,以尺寸和字重承担层级建构的职责,而非借助装饰性样式。字体不作变换——单一字体家族、受控字重——这赋予了系统一致的字体性格。

克制的深度与层级感

Gojek 界面使用柔和的层级提示,而非旧版扁平设计复兴潮流中常见的硬边阴影美学。卡片与底部弹窗从背景中轻微浮起——足以传达交互性和图层分离,但绝不显著到令界面产生三维感。这种克制具有功能理由:在多样的移动设备硬件和变化的环境光条件下,微妙的层级感比极端的深度对比更易识读。这种处理方式意味着该系统归属于受 Material Design 影响的扁平设计传统——深度被承认,但从不被表演。

温暖亲切的微交互

Gojek 界面中的动效是有目的且温暖的,而非炫技性的。加载状态、确认动画和状态切换使用简洁快速的动作,感觉响应迅速而不令人分心——轻触方块时的短暂放大,内容加载时的平滑淡入,订单确认时的轻柔弹跳。这些交互的情感基调友善而安心:这很适合一款最频繁使用场景涉及信任交易的应用——一个陌生人为你送来食物,一位司机载你穿越城市。微交互语言刻意回避了高度几何化视觉系统可能伴随的机械冷感。

头盔剪影:品牌锚点

Gojek 最持久的视觉符号是 ojek 头盔剪影——一个圆润的简洁形态,源自平台创始司机合作伙伴所佩戴的摩托车头盔。这个剪影充当品牌契约:它向支撑平台运转的零工经济工作者致敬,同时作为一个大胆、可缩放的品牌标志发挥作用。在 Wolff Olins 的品牌焕新中,剪影被保留并提炼为更具几何精确性的形态,在从应用图标到广告牌的每一种尺寸下都清晰有力。它在整个系统中的存在提醒人们:在超级应用界面的精致表象之下,这个品牌的身份依然扎根于街头。

Gojek Superapp 设计风格用在仪表盘上

谁塑造了 Gojek Superapp?

Nadiem Makarim

马卡里姆于2010年在雅加达联合创立 Gojek,从摩托车出租车调度呼叫中心起步,将公司发展为东南亚规模最大的超级应用平台。他将印度尼西亚分散的非正式服务经济整合在单一数字界面之后的愿景,界定了 Gojek 视觉系统被构建来解决的根本设计问题:如何让以移动端为先的大众用户能够驾驭极度复杂的服务矩阵。他担任 CEO 直至2019年,随后被任命为印度尼西亚教育部长——这一离任标志着创始章节的终结,也恰好与品牌的 Wolff Olins 焕新同步发生。

Kevin Aluwi

阿卢维与马卡里姆共同创立 Gojek,并在公司最具决定性意义的成长阶段以联席 CEO 身份领导公司——即从网约车服务向多垂直超级应用的转型期。他在 GoPay(Gojek 数字支付系统)规模扩张期间的运营领导,对于建立超级应用模式运作所依赖的金融基础设施至关重要:当支付被嵌入平台时,每一个服务类别都变得更为连贯。GoPay 在 Gojek 方块系统中的视觉整合,体现了这一架构决策——金融服务与交通或餐饮获得了同等的视觉权重。

Wolff Olins

伦敦品牌咨询公司 Wolff Olins 主导了2019年内部代号为「Solv」的品牌识别焕新,将 Gojek 从一个网约车品牌转化为能够支撑超级应用的视觉系统。他们的工作化解了设计任务书的核心张力:如何创造一套品牌架构,既足够灵活以容纳超过二十个服务类别,又让人感觉是一个单一的连贯产品。方块网格、头盔剪影的精炼,以及 Plus Jakarta Sans 的委托开发,都是这次合作的成果。Wolff Olins 此前曾为谷歌、Uber 和2012年伦敦奥运会等主导过变革性品牌工作;Gojek 项目因其刻意扎根于印度尼西亚视觉文化的特异性,在其作品序列中显得尤为独特。

Gumpita Rahayu

印度尼西亚字体设计师 Gumpita Rahayu 与 Wolff Olins 合作开发了 Plus Jakarta Sans——这款定制字体成为 Gojek 焕新身份的字体基础。设计要求是:一款无衬线字体,能够服务于印尼语的特定语言需求——容纳其变音符范围和较长复合词的视觉节奏——同时在移动界面所要求的小字号下保持高度可读性,并保留适合消费者平台的温暖亲切感。Rahayu 的贡献代表了这个项目最刻意的本土化举措:一款印度尼西亚字体,以雅加达命名,置于一个国际野心勃勃的品牌的核心之中。

Southeast Asian Superapp Paradigm

Gojek 视觉系统并非孤立产生——它形成于并反过来塑造了更广泛的东南亚超级应用范式,这一范式还催生了 Grab(新加坡/马来西亚)、Sea Group 旗下的 Shopee 等平台。这一地区性设计语境与西方应用设计在若干关键维度上存在差异:以移动优先为基础假设,极为多样的设备生态系统(包括大量入门级安卓手机),用户基于对密集市场和标牌的熟悉而期待极高的信息密度,以及单一市场内多语言多文字的共存。Gojek 的方块网格与清晰的图标逻辑,代表了该地区对这一特定设计环境最广为人知的解决方案,其系统的影响力可在越南、菲律宾、泰国后续的超级应用设计实践中得到追溯。

今天怎么用 Gojek Superapp?

Gojek 超级应用风格能很好地迁移到当代多种设计场景中,因为它的核心逻辑——以一致网格和强单色锚点组织密集信息——在结构上是稳健的,具有广泛适用性。正确应用它,需要首先将其理解为一种信息架构决策,其次才是美学决策:这种风格源于对真实复杂性的整理,将其应用于人为稀疏的内容,只会产生一种借用感而非目的感的作品。

在演示文稿中,这种风格在封面和服务概览页上表现最为强劲。用这套语言制作的封面,以大面积的 Gojek 绿或深色对比调为底,标题采用高字重的 Plus Jakarta Sans 或相近的人文主义无衬线字体,并用一组简单扁平图标预告后续内容。服务或功能概览页应直接使用方块网格:等大的卡片,每张配一个图标和标签,按逻辑分组排列成行。数据页面自然地转化为系统的视觉逻辑——图表和示意图被处理为方块状模块,绿色强调色标记主数据系列,暖色或冷色辅助色标记支撑系列。

对于网页界面,Gojek 系统最适合仪表板、产品着陆页,以及信息广度本身是特性而非问题的多服务目录。方法是:建立温暖的近白色或浅中性背景,定义强健的网格(宽屏十二列,移动端四列),将品牌绿专门用于按钮和激活导航状态等主要交互元素,为服务或数据分组部署类别色。卡片应有轻微的圆角和微妙的层级感——足以在背景上被识读为独立单元,但绝不显著到产生立体感。导航应扁平而字体化;在服务标签能增加清晰度的场景中,避免仅用图标的导航。

对于编辑和营销物料——包括社交卡片、活动横幅和推广页面——Gojek 风格支持大胆、信息前置的版面构成。用这套语言制作的营销页面,使用交替的全宽分区:Gojek 绿背景用于功能重点呼出,浅色背景用于辅助文案。服务网格可改编为功能矩阵,每个格子突出一项产品能力。方块逻辑同样适合定价页面:每个套餐成为一个方块,通过辅助色强调而非divergent版式加以区分。整体基调应感觉动感而自信——唤起一个城市系统运转起来的节奏感——而非安静或沉思性的。

应用这种风格时常见的错误,是将视觉密度误解为视觉丰富性。Gojek 方块网格之所以有效,是因为其中的一切都是一致的——相同尺寸、相同圆角半径、相同图标风格、相同标签处理。在网格内引入变化(不同方块大小、混合图标风格、不一致的字体尺度)会打破系统的基本节奏,产生视觉噪音而非有组织的复杂性。同样,过度扩张绿色的使用范围也是常见错误:品牌色之所以能充当锚点,是因为它被选择性地使用。当绿色出现在每一个元素上时,它就失去了结构性角色,界面趋于无差别的亮眼。在主色上保持克制,才是让密度变得可读的关键。

Gojek Superapp 设计风格用在幻灯片 · 封面上

Gojek Superapp · 常见问题

Gojek 风格和 Material Design 是同一回事吗?

两者有共同的祖先——都是以层级感、色彩和字体排印建立层次、而非依赖拟物模拟的扁平设计系统——但 Gojek 风格是一种具有文化特异性的演进,而非 Material Design 的一个实现版本。Material Design 是为跨产品类型和地区最大适应性而设计的通用系统。Gojek 系统则是为特定用例量身打造的:一款服务于印尼和东南亚用户、运行于以移动设备为主的硬件环境中的超级应用。方块网格、头盔剪影、为印尼语调校的人文主义字体,以及微交互的温暖基调,都将它与 Material Design 应用程序区别开来。应用 Gojek 风格时,直接套用 Material Design 组件会产生过于通用的结果;那种特定的温暖感和文化根基必须被刻意引入。

这种风格能用在东南亚以外的产品上吗?

可以,但需要适当改编。核心结构原则——以单一主导色作为系统锚点、用方块网格导航服务、强剪影扁平图标、受控字重的人文主义字体——并不具有地理特异性,能够很好地迁移至任何多服务或多类别产品。不能自动迁移的是文化温度:特定的绿色、头盔图标和 Plus Jakarta Sans 是身份元素,而非可移植的设计令牌。在其原生语境之外应用这种风格的产品,应以在目标语境中具有同等分量的等价元素替换这些文化特异性元素,同时保持底层的网格逻辑和色彩层级。若不做这种替换就直接应用,风格可能看起来像是对 Gojek 的模仿,而非经过深思熟虑的设计系统。

Gojek 如何处理深色模式?

Gojek 系统主要为浅色背景设计——温暖的近白色或纯白底面对于方块网格的识读方式具有结构性意义,绿色也是针对浅色模式下的对比度校准的。深色模式的反转在技术上是可行的,但需要谨慎处理。在深色背景上,高饱和度的绿色必须降低饱和度或调整明度,以避免过于强势;赋予浅色模式亲切质感的暖中性色,需要保留温暖感而非变成冷灰色的深色等价物。深色模式下的方块网格,通常在方块带有略微提升的深色表面(而非凹陷)时效果最佳——方块背景与页面背景之间的区别必须保持清晰,以维持导航逻辑的有效性。在实践中,这种风格的深色模式因克制而受益:更少的方块、更宽的间距,以及单个精心放置的绿色强调色,而非将绿色分散到所有交互元素上。

这种风格不适合哪类产品?

Gojek 风格最适合以全面性、导航速度和系统性清晰度为主要用户价值的产品。它在需要亲密感、编辑丰富性或情感共鸣的场景中力不从心。奢侈品平台、心理健康应用、高端编辑刊物或儿童学习产品——这些都需要将感官温度、有机质感或个人特异性置于方块网格所传达的有序效率之上的视觉语言。这种风格在品牌身份建立于排他性或稀缺性的场景中也显得格格不入:方块网格暗示着丰盛与开放获取,这对超级应用有效,但与高端或高度策展产品的视觉逻辑相悖。判断系统性清晰度是一种价值还是被解读为非人格化效率,是决定是否应用这种风格时的关键判断。

当服务或类别很少时,方块网格应如何改编?

方块网格的视觉逻辑来源于密度:它所创造的节奏与秩序,依赖于足够数量的方块有意义地填充网格。当类别非常少——比如三四个——时,完整的方块网格会显得稀疏而随意,而非有组织。在这种情况下,方块逻辑应被改编而非直接套用:使用相同的尺寸和圆角原则,但将方块排列为单行或小型精选簇,而非完整网格。或者,将每个方块扩展为包含更多信息的大型卡片组件,在有目的地填充可用空间的同时保留网格的组织逻辑。底层原则——一致的尺寸、清晰的图标、最重要操作上的主导绿色强调——不变,但网格密度根据实际内容深度加以调整。

获取 Gojek Superapp 完整设计系统 →