5个产品细节剖析,看看大厂是如何做设计的!

推荐阅读

案例分享

1. Scoot--联动设计,情感化的交互表达

Scoot 是一款新加坡的廉价航空产品,主要航点在澳大利亚和中国大陆,为用户提供中长程航线。Scoot 的设计风格与其名称“酷航”一样,颜色采用黄黑配色,视觉感受年轻,app 内视觉形象积极向上极富情绪感染力,在用户添加出行人数时,画面中跳出欢乐的人物形象,为用户带来更好的视觉体验,提升用户的情绪价。

  1. 针对不同年龄绘制形象:在用户添加出行人数时会有小人联动跳出,针对婴儿、儿童和成人绘制了覆盖各个年龄段的人物形象,给用户较强的代入感;情感化的设计也让整个交互变得更加生动有趣,充满惊喜。
  2. 正向情感调动:结合产品的设计风格设计了多个卡通形象,每个小人都挥舞着手臂,洋溢着灿烂的笑容,向用户传递一种欢脱的氛围,富有感染力。

5个产品细节剖析,看看大厂是如何做设计的!

2. Priceline—强调优势,体现酒店服务亮点

Priceline 是一家在线旅游服务网站,为用户提供酒店、机票、租车、订餐以及搜索比价等服务。为了帮助用户更高效、快速地做出决策,Priceline 在酒店列表页新增酒店相关服务标签,用户在列表页就可判断该酒店是否满足自己的需求,简化搜索流程。

  1. 提前披露酒店优势,辅助用户提前决策:酒店列表页每张卡片中横向滚动展示酒店相关服务标签,例如“有健身房”、“有残障设施”、“禁烟”等等,方便用户在列表页快速抓取该酒店的服务内容,判断其是否符合自己需求,从而提高决策效率。
  2. 推荐平价替代方案,提供更多选择:在酒店列表页提供部分酒店的平价替代方案,例如推荐同类型但是评分稍低,价格更低廉的酒店,满足更追求性价比或者预算有限的用户的需求。

5个产品细节剖析,看看大厂是如何做设计的!

3. Citymapper--绿色出行,瘦身减排

Citymapper 是一款英国的地图导航产品,目前导航范围已涵盖全球多个国家与城市。除了和常规导航软件应用一样为用户提供多种交通方式的出行方案外,Citymapper 鼓励用户选择绿色出行方式,并通过累计出行后的卡路里消耗、减排量及省钱金额给予用户激励。

  1. 信息结构化,提升方案比对效率:选择出行方案时,纵向结构化展示每种出行方式的卡路里、金额、时长,便于用户快速对比方案的优劣势,选择更适合自己的路线。
  2. 出行成就可视化:结合品牌 ip 设计了卡路里消耗、绿色减排和省钱达人 3 个可爱的视觉形象。并在用户行程结束后,以等价量化的方式,将绿色出行的价值等到具像化展示,提升出行后的成就感。

5个产品细节剖析,看看大厂是如何做设计的!

4. RedBus--让人惊喜的切换动效

RedBus 是一家印度在线巴士票预订公司,目前范围已涵盖多个东南亚及南美洲国家与城市,为用户提供大巴、火车的预定业务。

点击动效传递业务属性:redbus 首页头部切换 tab 时,增加了点击交互动效,通过大巴和火车的行进动效来强调业务属性,向用户传递一种能够快速到达的感受,同时增强了用户的互动性和趣味性。

5个产品细节剖析,看看大厂是如何做设计的!

5. Swiggy 灵动岛--小空间也能发挥大作用

Swiggy 是一款来自印度的送餐应用程序,提供食品订购和配送服务。Swiggy 需要在下单后向用户发送多个通知以便于用户了解订单的进展情况。Swiggy 通过巧妙地利用实时活动小部件和灵动岛,来改变推送消息的方式。尽可能简化用户查询订单状态的流程,提高信息传播的效率。

  1. 针对不同场景绘制插画,实现订单状态可视化:Swiggy 为订单的每一阶段状态绘制插画,例如已下单、制作中、配送中等。插画不仅有效拉开视觉层次,而且准确反映订单的实时状态,并且变得易于观赏。对用户来说,无聊的通知栏也可以变得充满趣味。
  2. 合理利用灵动岛的有限空间传递信息:利用灵动岛较小的空间来最大化地展示订单状态,严格地把握图标设计,使其能适应不同尺寸的空间。以最简洁高效的方式组合图标和文字信息。部分元素与实时活动小部件保持一致,以保证设计的整体性。

5个产品细节剖析,看看大厂是如何做设计的!

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自智行 UED 同学的日常分享。

后续我们将持续深度体验产品,挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到智行 APP 后续的产品设计中。愿我们的努力为你带来更好的体验。下周二见。

*文中配图来源于各 APP 内截图,侵删

欢迎关注作者微信公众号:「智行ZXD设计中心」

5个产品细节剖析,看看大厂是如何做设计的!

收藏 22
点赞 43

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。