首页/风格学院/Traveloka

Traveloka 是什么风格?

Traveloka 示例

Traveloka 把东南亚出行预订的纷乱收成一条规矩:价格排第一,其余一切为它让路。

Traveloka 速览

Traveloka 是东南亚出行超级应用的视觉语言:机票、酒店、火车、大巴和景点门票,在同一条连续的白色卡片流里售卖,覆盖印度尼西亚、泰国、越南、马来西亚、新加坡和菲律宾。它属于在线旅行社(OTA)界面这一家族,但针对一类很具体的人群调校过:手机优先、对价格敏感、没耐心,而且要同时读好几种文字。

整套系统靠四个决定撑起来。顶部一条天蓝色的横带容纳搜索,同时传递可信感;下面是白色卡片,每张只装一个结果,眼睛不用判断一个报价到哪里结束、下一个从哪里开始;卡片上价格是整屏最大的数字,比航司名、时长、酒店名都大;最后,一枚橙色按钮几乎不做别的用途,只标记那个无法撤回的步骤:预订。

因此,这种风格的辨识度不来自装饰,而来自克制。颜色很少,字号很少,几乎没有点缀。评分、徽标、筛选项都在,但在价格旁边安静而灰淡。整个界面像一块运转良好的机场信息屏:密、好扫读,并且坦率地把对眼前这个人最重要的东西放在最前面。

Traveloka 用在文章页上

Traveloka 从何而来?

Traveloka 2012 年起步于雅加达,最初只是一个机票比价网站。创始人费里·乌纳尔迪(Ferry Unardi)、德里安托·库苏马(Derianto Kusuma)与阿尔伯特·张(Albert Zhang)从一个朴素的观察出发:在印尼买机票,意味着逛许多家航司网站、人工比价,还常常要经由陌生的渠道付款。能把票价并排摆出来、让最便宜的选项一眼可见的工具,在好看之前就已经有用。这个出身,解释了界面对“那个数字”的长期执念。

产品随后分阶段扩张。2013 年上线直接预订,2014 年加入酒店,之后陆续接入火车、大巴、景点和一批日常服务,逐渐从比价页变成超级应用。每增加一个新品类,都必须塞进同一条卡片流里,这是它的版式如此模块化的原因:机票卡、酒店卡、大巴卡看上去像兄弟——同样的白色底面,同样的价格位置,同样唯一的行动按钮。

如今人们认作这个产品的视觉语言,大致成熟于 2019 至 2024 年,受 Material Design 时代的安卓产品设计影响很深。这个传统给东南亚的应用留下了共同的语法:浅色底上的浮起卡片,应用栏里一个强烈的品牌主色,宽裕的触控区域,以及只给主要操作的克制强调色。Traveloka 拿过这套语法,往交易的方向掰了一下:天蓝色横带是品牌,橙色按钮是成交。

地域对设计的塑造不输于时代。东南亚的多语言环境,对排版是一场压力测试。印尼语、英语、泰语和越南语会出现在同一批组件里,泰文堆叠的元音符号与越南文的声调符号在行的上下方伸展,要求行距宽松、字体覆盖完整。酒店名无论以哪种文字到来,界面都得保持可读,这推着它走向朴素、开阔的字形,远离紧凑的展示型字体。许多用户使用中端手机和不稳定的网络,所以大图被约束在卡片之内,界面本身保持轻量。

Traveloka 的视觉特征是什么?

色彩

色板几乎是“一个品牌色、一个行动色”的体系。天蓝色占据顶栏与品牌识别;白色铺满所有结果表面;中性灰处理次要信息;一种暖橙专门留给决定性的预订按钮。正因为橙色几乎不在别处出现,它是信号而不是装饰:眼睛一旦找到它,任务就离完成只差一次点按。

价格即主角

每张卡片上,票价都是最大、最重的数字,用有分量的字重,货币符号则写得更小,靠在旁边。航司、路线、时长都退居其次。这个层级是风格的核心:快速滑过几十条结果的人,只看一列数字就应该能完成比较。

一结果一卡片

每个报价住在自己的白色卡片里,与后面的灰色页面只做轻柔的分隔。卡片内部结构一致:一端是标志或缩略图,中间是路线或标题,另一端是价格与操作。重复让用户形成扫读节奏,也让新品类可以直接加入而无需重做信息流。

多语言排版

字体是干净、开阔的无衬线体,选它看重的是覆盖面与可读性,而非个性。它得把拉丁字母、泰文和越南文的附加符号都清晰地承载下来,所以行距宽裕,避开紧凑的展示技巧。标签保持简短,因为翻译往往会让字符串变长;容器被设计成可伸缩,而不是裁切。

扁平的层次

层次感很收敛。卡片以淡而弥散的微弱浮起落在页面上,顶部横带是平整的色块,没有发光,也没有光泽。平静的表面把注意力留给内容,也能在低端屏幕上稳定呈现——那里沉重的阴影与模糊常常显得浑浊。

密而有序的间距

信息密度很高,但由稳定的纵向节奏来组织:卡片内边距一致,卡片之间间隔均匀,左边缘对齐。筛选和排序控件收拢在一条紧凑的条带里。密度被当作对购物者的服务,而秩序让这种密度可以忍受。

安静的次级信号

评分、设施、行李说明、取消政策标签都用小号灰字与细线图标。它们为了建立信任、补充细节而存在,但绝不与票价竞争。若需要紧迫感提示,也只是节制地借用橙色,好让主操作保持它的意义。

Traveloka 用在仪表盘上

谁塑造了 Traveloka?

Ferry Unardi

2012 年在雅加达创办 Traveloka 的联合创始人,与“价格优先、为用户化繁为简”的产品气质关联最深。

Derianto Kusuma

联合创始人,参与搭建早期机票搜索的技术基础,以及后来支撑卡片流的预订平台。

Albert Zhang

公司联合创始人,是把比价构想做成多产品出行超级应用的最初团队成员之一。

今天怎么用 Traveloka?

用于幻灯片,这套风格适合对比与决策类的演示。封面可以用整条天蓝色横带配一个简短的白色标题,不再添加别的东西。内容页最好做成一排白色卡片,每张一个选项,关键数字远大于它的标签。数据页让每块磁贴由一个数字主导,辅助数值用小号灰字;把橙色留给观众必须记住的那一个推荐,或那一个行动号召。

用于网页和应用界面,它天然适合预订、下单与比价流程:搜索结果、商品列表、报价表、订阅方案和结账步骤。每张卡片只放一个结果,价格在每张卡片上的位置保持一致,主按钮是屏幕上唯一的橙色元素。这种风格的仪表盘应当偏向一列可比较的行,而不是装饰性的图表;定价页则可以直接借用这个模式。

用于内容与营销,当信息偏实用、偏数字时选它:票价周报、特惠落地页、主打“更低价格”的活动。天蓝色横带可以当报头,白色卡片把优惠整齐地排成网格。它不太适合做目的地的氛围叙事,那样读起来更像收据而不是明信片。

常见的错误,是把橙色当成通用强调色,撒在徽标、链接和图标上。橙色一旦无处不在,就不再标记那个不可撤回的步骤,整个层级随之变平。第二个错误是为了给图片或促销文案腾地方而缩小价格。如果数字不再是卡片上最大的元素,这个设计就不再是 Traveloka,而成了一份普通的列表页。

Traveloka 用在幻灯片 · 封面上

Traveloka · 常见问题

Traveloka 设计风格是什么?

它是东南亚出行超级应用的界面语言:天蓝色顶栏、一个结果一张白色卡片、票价作为最大数字,以及只给最终预订步骤的一枚橙色按钮。它的个性来自克制和价格优先的层级,而不是装饰。

Traveloka 是什么时候、在哪里起步的?

它 2012 年在印度尼西亚雅加达创立,最初是机票比价网站。2013 年上线直接预订,2014 年加入酒店,此后扩展为涵盖火车、大巴和景点的更广泛的超级应用。

为什么屏幕上只有一个橙色元素?

橙色是信号,不是装饰。把它专门留给预订按钮,界面就能准确告诉用户哪一步无法撤回。在别处使用会削弱这层含义,让层级变平。

这套风格如何同时处理多种语言?

它采用开阔、可读性极高的无衬线体并留足行距,让泰文元音符号与越南文声调符号互不碰撞;标签保持简短,容器可伸缩,以应对译文比原文更长的情况。

哪类项目最适合这套风格?

预订流程、比价页面、交易平台、报价表、订阅方案页,以及任何用户要扫读大量相似报价并凭一个数字做决定的高密度移动界面。

获取 Traveloka 完整设计系统
© 2026 Curio