这些设计细节让你过好第一个小长假

五一小长假即将到来，疫情之后的第一个小长假必定人气暴涨，相信大家都已经非常期待啦！

为了做好充分的攻略，最近黑马哥也体验了一些旅游出行所需的产品，发现了一些不错的设计细节。提高产品设计的每一个细节，才能带给用户更好的体验，这些细节的设计也让我们的出行游玩变得更美好。

分享目录

一、品牌化的底部标签栏设计

二、流体渐变增强按钮视觉感

三、3D 场景提高解锁设计亮点

四、品牌化的图标设计

五、品牌化的闪屏设计

六、动态轮播的金刚区图标设计

七、动态封面提高关注度

八、动态可视化提高签到参与度

九、游戏化的任务页面设计

十、动态卖点强化按钮点击欲

一、品牌化的底部标签栏设计

图标在产品中随处可见，如何提高图标设计的深度和差异化至关重要，立足于品牌的角度是其中之一的有效方式。

最近在使用智行火车票 App 时，底部标签栏图标设计融入了品牌基因图形，点击状态图标以火车头剪影进行视觉表达。结合动效过度流畅自然，不仅突出了品牌曝光度，也强化了用户的品牌认知和记忆度。

二、流体渐变增强按钮视觉感

由于流体渐变丰富的色彩表现和动态感，在画面中能够更好地起到突出作用，成为近些年流行的视觉趋势之一。

在携程旅行酒店预定的栏目中，将查询按钮以流体渐变的形式进行设计，使得单调的按钮变得更加丰富多彩。流动感的视觉呈现提高了按钮的设计亮点，增强了用户的点击欲和感官体验。

三、3D 场景提高解锁设计亮点

随着 3D 设计的流行，在众多的产品中随处可见，提高了产品设计的感官体验。

在携程旅行“火车超能力”的页面设计中，运用了 3D 场景增强画面视觉感。在解锁的超能力模块中，3D 场景的呈现让内容表达变得更直观，突出的视觉感也吸引了用户的关注度。不仅让界面设计更美观，突出的视觉表达也提高了用户解锁超能力的意愿度。

四、品牌化的图标设计

越来越多的产品都在探索品牌化的融入，除了品牌色的强化以外，在品牌图形、辅助图形、特征图形等方面也在不断探索。

飞猪旅行 App 个人中心界面中，营销活动的四个入口图标设计结合飞猪 Logo 造型表达。通过内部差异化的图形元素区分各类营销卖点，品牌图形的运用统一了图标形式感，让元素不会显得分散，视觉协调性和美感度控制得都非常不错。通过固定造型来约束和统一视觉表达，可以解决图形分散和视觉风格杂乱的设计问题。

五、品牌化的闪屏设计

闪屏设计有结合品牌元素的固定形式，也有闪屏广告，可以单独出现也可以前后出现。

最近在启动途牛旅游 App 时，闪屏的设计以品牌化的创意进行表达，视觉冲击力也成功的引起了我的关注度。将旅游相关的场景元素融入到途牛的品牌外形中，形成带有品牌感的场景插画。通过固定造型约束元素组合，不仅统一了风格表达，干净简洁的设计也充满了图形创意的魅力。

六、动态轮播的金刚区图标设计

微动效在图标中的运用十分常见，可以起到突出元素表达的作用。所以，动效已经成为产品设计师所具备的基础技能。

飞猪旅行 App 行程栏目中，金刚区图标在每次进入时会以动效形式逐个演变，以此来增强用户对每个业务的了解。逐个演变后以静态形式展示，降低动效过度形成的干扰。

七、动态封面提高关注度

封面可以辅助信息的传播，也能提高用户对栏目的关注度。封面的比例、设计感和表现形式，影响了视觉感的程度，也是吸引用户关注度的重要因素。

飞猪旅行 App 在“我的旅行回忆”栏目中，封面以徽章滚动的形式进行表达，动态画面提高了该栏目的关注度。更容易吸引用户“进入回忆”，解锁并点亮对应徽章。

八、动态可视化提高签到参与度

签到可以增加产品活跃度，提高用户的签到参与度至关重要。除了对应的福利政策之外，设计感的提升也能提高用户的参与度。

马蜂窝 App 在福利中心栏目中，签到的设计融入了可视化的表达。签到领取的蜂蜜用罐子装起来，还带有流动感，动态的表达生动有趣，提高了用户参与签到的意愿度。动态可视化的设计让签到后的得利更直观，趣味性的表达也让签到变得更有意思，提升用户对该功能的感官体验。

九、游戏化的任务页面设计

产品为了提高用户黏性会打造一些激发用户参与度的功能或者活动，通过签到或者完成任务获得积分/工时等奖励，可以兑换礼品、优惠券、服务解锁等。

智行火车票 App 是通过打工小智的形象设计任务功能，以游戏化的模式激发用户参与度。完成相应的任务获得工时，用工时换取现金、优惠券和其他服务等。整个任务页面设计非常精美，打工模式的玩法也比较有趣，游戏化的设计提高了栏目的感官体验和参与度。

十、动态卖点强化按钮点击欲

在一些重点突出的按钮设计中，会通过造型、配色、动效、营销等形式突出视觉感，提高按钮的关注度和点击欲。

在去哪儿旅行机票预订的界面中，搜索按钮左侧设计了一个动态卖点（立减 20），动效的表达突出了按钮的关注度。动态营销卖点给突出按钮提供了不错的设计思考，这是一个增强用户点击欲的有效形式。

小结

在第一个小长假来临之前，我们通过这些旅游和出行的产品设计细节，让我们感受到各大产品做出的努力，为大家提供更好的使用体验。

本文对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。

作者：黑马青年（vx: heimaux）

本文由 @黑马青年 原创发布。未经许可，禁止转载。