高手是如何做改版的?来看智行10.0设计改版案例复盘。

高手是如何做改版的?来看智行10.0设计改版案例复盘

Hey,亲爱的小伙伴,你期待的旅行是什么样的?

很高兴在 22 年末,智行 10.0 带着轻快的步伐与大家见面啦!

新年新面貌,全新智行希望为小伙伴来年的旅途提供更优质服务,增添一份好心情。

下面就来看看,智行 10.0 的构思与成果吧~

智行,作为一站式旅游出行平台,已覆盖火车、机票、汽车票、酒店等业务。近年来,更是以亲民的价格吸引了越来越多的年轻用户,其中 90 后及
00 后占比高达
75.2%。前期调研中我们发现,与核心用户年轻化趋势形成反差的是,智行的界面风格调性更多被评价为"商务"、"严肃"。因此,褪去旧壳,以崭新活力之姿拥抱年轻群体是智行 10.0 需要探索的方向。

项目初期,为使改版的感情调性更贴近用户出游场景,我们在团队内部及用户渠道收集了大量关于"旅行"的联想关键词,其中包括:愉悦、轻松、有趣、探索...等等。这些美好的词汇,描绘了大家对未知旅程的期待与憧憬。

由此,我们提出「旅行,是对自由与快乐的向往」作为 10.0 升级的主线。

高手是如何做改版的?来看智行10.0设计改版案例复盘

我们希望通过 10.0 升级,提升体验及服务品质同时,打破工具类产品较为沉闷的使用感受,挖掘旅行中快乐的情绪内核,以轻盈有趣的设计传递"快乐旅行,自由出发"的生活态度,做有价值有温度的 OTA 产品。

以此,我们确立 10.0 的设计目标:

  1. 轻盈有序 · 打造高效预订体验
  2. 情感传递 · 旅程的贴心陪伴者
  3. 品牌外化 · 构建品牌记忆点

高手是如何做改版的?来看智行10.0设计改版案例复盘

一、轻盈有序 · 打造高效预订体验

1. 全新 10.0 框架 更轻量

智行始终致力于让用户订得高效、订得安心。然而扩充的业务场景和功能,使页面结构不堪重负,密集的信息和堆叠的模块影响了用户的预订体验。10.0 全新框架语言,希望通过有效的视重引导及清晰的页面展示,降低操作费力度,打造高效预订流程。

"轻"头部色彩 操作更聚焦

色彩是影响视重的重要因素。10.0 的升级中,我们将框架语言的背板色由品牌重色调整为明亮通透的浅色,有效将视重由头部转移至高频操作区,为用户营造专注沉浸的下单体验。同时,轻量的头部使页面更具呼吸感,缓解旧版"沉闷"、"商务"的视觉感受。

高手是如何做改版的?来看智行10.0设计改版案例复盘

"轻"信息展示 预订更友好

清晰的信息展示可有效降低预订流程中的操作难度及决策成本。我们对页面信息进行分类重组,通过字号大小间距等手段扩大信息层级,凸显关键决策信息。并在有限的页面空间内,精简信息,降低信息密度,增加透气感,提升阅读友好度。

高手是如何做改版的?来看智行10.0设计改版案例复盘

高手是如何做改版的?来看智行10.0设计改版案例复盘

2. 全新首页 让营销变有趣

首页是获悉智行业务种类和流量分发的第一道关卡,业务入口的清晰展示对用户查找和后续转化极为关键。新版首页在使用 10.0
框架的基础上,用重色光感色块衬托智行四大业务入口,增强点击感。同时我们将业务线入口作为营销载体,融入动效,使营销活动的曝光更立体有趣,为各业务线导流及增长起到了正向的作用。

高手是如何做改版的?来看智行10.0设计改版案例复盘

二、情感传递 · 旅程的贴心陪伴者

我们希望智行 10.0,不仅好用而且好玩,传递正向情绪价值,与用户共情,成为旅途中的贴心伙伴。我们通过 IP 植入、可视化以及创意的视觉唤新等手段一改智行往日"严肃"的形象,为用户提供更温馨友好的服务。

1. IP"小智" 陪你环游世界

智行 IP"小智"自诞生以来,机智可爱的形象圈粉无数。在 10.0 的升级中,我们将它融入更多页面流程,增加情感触点,提升智行的品牌亲和力。我们结合业务场景的同时,为"小智"量身打造了俏皮活泼的动作,塑造和饱满了它的性格特点,使其焕发生命跃然纸上。

下单助手,高效操作有"我"指引

高手是如何做改版的?来看智行10.0设计改版案例复盘

下拉刷新,一票在手,极速出行

高手是如何做改版的?来看智行10.0设计改版案例复盘

空态场景,有"我"不再无聊

高手是如何做改版的?来看智行10.0设计改版案例复盘

2. 全新视觉语言 营造愉悦氛围

视觉语言是传递产品调性的关键要素,围绕着"轻松愉悦出行"的基调及年轻的客群特征,我们对 10.0 的整体视觉进行了唤新。

明快的色彩

天空是纯澈与美好的汇集,正如旅行中探索快乐的本心。我们从中寻找灵感,从智行品牌蓝延伸出"纯净蓝",并将其作为背景色融入核心流程页面中,营造蓝天白云阳光暖煦的视觉氛围。同时,我们提高了辅助色的明度和饱和度,让页面配色更活泼。

高手是如何做改版的?来看智行10.0设计改版案例复盘

圆润的图形

我们用简洁流畅的外形结合大圆角,使图形在视觉呈现上更灵动 Q 弹。叠色的表现形式起到 1+1>2 的效果,使图形更丰富多彩~

高手是如何做改版的?来看智行10.0设计改版案例复盘

轻盈的插画

插画用简约的造型风格,聚焦核心功能点的传达。视觉上以灵动的线条,搭配轻盈的高明度渐变,展现 10.0 年轻活力的品牌调性。

高手是如何做改版的?来看智行10.0设计改版案例复盘

3. 3D 现实映射 服务贴心友好

调研中我们发现,预订流程中,用户面对复杂功能场景,时常存在这样的烦恼:

  1. 功能说明长,读得脑壳疼
  2. 看了半天不理解,迷迷糊糊下了单
  3. 我是出行新手,那么多专业词看不懂呀...

常说"字不如表,表不如图",图像在传递信息效率和容量上都是文字的数百倍。10.0 的升级中,我们希望通过有效的可视化手段替代单薄苍白的文字表达,将信息化繁为简,提升智行服务的品质感及友好度。

我们结合功能为用户搭建 3D 场景,通过营造真实的环境氛围,将现实映射运用到功能表达中,调动用户真实生活中的常规心理认知。同时结合生动的动画,将冗长复杂的功能说明以更直观友好的方式呈现。

高手是如何做改版的?来看智行10.0设计改版案例复盘

4. 趣味动效 转角遇到"小惊喜"

旅行是快乐地出发,我们在下单流程中埋藏了许多有趣的彩蛋动效,为用户即将到来的旅程增添不期而遇的"小惊喜"。

高手是如何做改版的?来看智行10.0设计改版案例复盘

高手是如何做改版的?来看智行10.0设计改版案例复盘

三、品牌外化 · 构建品牌记忆点

1. 打造全新 UI 品牌符号

品牌符号有利于品牌价值观的外化输出,为产品带来记忆点,同时高辨识度的符号能降低用户对品牌的认知成本,增加信任感和忠诚度。由此,我们结合业务属性及视觉创意打造了智行全新 UI 品牌符号~

符号的由来

创意上我们选取智行最具代表的火车业务为基点,从产品 logo 出发,衍生出抽象的火车造型。以光感的主题色渐变,增强呼吸感和透亮度。

高手是如何做改版的?来看智行10.0设计改版案例复盘

让符号"动"起来

为了更生动地展现火车迎面驶来的速度感,我们将符号"动"了起来,穿梭如风的动态不仅象征抢票的高效性,也为原本静态的页面带来一丝小调皮。我们将其应用到了底 bar、一级页面切换等众多核心页面中。

高手是如何做改版的?来看智行10.0设计改版案例复盘

高手是如何做改版的?来看智行10.0设计改版案例复盘

写在最后

智行 10.0,从探索、落地、验证到上线,历时 10 个月。

比心每一位设计师为之付出的努力。

同时很开心,我们收获了用户对此次升级的认可和喜爱。

随疫情的逐步放开,旅游业也将稳步复苏。

正如开篇所说:「旅行,是对自由与快乐的向往」

智行期待未来与你相伴,

共同探索未知的世界,

欣赏旅途的风景。

2023 年,和智行一起,向快乐出发~

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/239458.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月7日 12:31
下一篇 2023年3月7日 12:32

相关推荐

  • 六个策略让你的网站设计风格出类拔萃。

    网站设计在平面设计行业中比较独特的一个细分领域。它既要承载着平面设计方面的各种设计策略和技巧远离,但又必须要结合网页相关的技术、特性和人机交互方面的体验等知识,网站是一个活着的平面设计作品。高超的网…

    2023年2月22日 SEO操作
    03
  • 网站设计的图形设计会影响到你的网页排名吗。

    多年来,实在是看到太多的人会把网络和图形设计作为他们的数字营销策略的孤立部分,如果把它们考虑进去的话。这种陈旧的思维方式可以让你的生意和品牌回归。从美学的角度来看,网页设计总是很重要的,但它的影响远…

    2023年2月14日 SEO操作
    04
  • 分享东莞网站设计哪家公司好。

    东莞作为广东省的重要城市,拥有众多的网站设计公司,这些公司为各类企业提供专业的网站设计服务,网站设计的内容主要包括以下几个方面: 1. 网站规划:这是网站设计的第一步,需要根据企业的需求和目标,进行详细…

    2024年7月26日
    02
  • 教你网站设计布局如何排版才具有吸引力。

    网站是企业在互联网上的窗口。网站建设的目的是吸引用户到达宣传企业作用。那么什么样的网站布局能吸引人呢?网站设计编辑的意见,在这里,希望能够帮助你。用户搜索关键词来访问具有特定目的的网站。他们访问这个网…

    2023年6月16日
    01
  • 实战总结!轻松4步搞定动效视频设计。

    近期完成一些视频制作,表现形式着重在 MG 动画和产品的运营宣传方向,在设计阶段遇到一些困惑,同时在摸索中不断扩充这方面的知识体系,通过工作中的实战,总结出来 4 步搞定视频设计的方法,分享出来,不知道你们…

    2023年3月7日 SEO操作
    07
  • 我来分享网站设计的新趋势有哪些。

    网站设计要随时关注网站设计的趋势,跟着网站设计发展的潮流和趋势为用户提供设计前沿的作品。1.突出显示元素的设计风格突出显示元素的设计风格。这种设计趋势得益于明确的意图。在彩色方案中使用有趣的突出显示来…

    2023年6月16日
    02
  • 2021年值得关注的网站设计趋势。

    网站设计和平面设计是两个不断变化的领域,见证着新的变化和趋势。一般来说,网站设计的趋势一直是开发一种高保真幻想主题方法,具有令人印象深刻的动画和流畅的过渡。然而这一趋势似乎正在改变。所有的网站设计趋…

    2023年2月25日 SEO操作
    01
  • 腾讯出品!三个步骤帮你高效收集管理3D动画资源。

    前言 3d 动态设计近年在国内非常流行,设计师们都想尽办法提升自己的 3d 设计动态能力。3d 能力的提升离不开两步,第一步 3d 技术习得,第二步眼界提升并灵活运用。提升 3d 动态设计能力重点在于多看多练,多看关键…

    2023年3月7日 SEO操作
    0108

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息