今天给大家分享近期一些值得学习的线上案例,快来和我们一起发现隐藏在身边的动人设计,get新灵感!
本期我们将放眼海外,看看海外产品在交互体验和设计创新上有哪些有意思的干货!
#01
案例分享
1. Scoot--联动设计,情感化的交互表达
Scoot是一款新加坡的廉价航空产品,主要航点在澳大利亚和中国大陆,为用户提供中长程航线。Scoot的设计风格与其名称“酷航”一样,颜色采用黄黑配色,视觉感受年轻,app内视觉形象积极向上极富情绪感染力,在用户添加出行人数时,画面中跳出欢乐的人物形象,为用户带来更好的视觉体验,提升用户的情绪价。
1. 针对不同年龄绘制形象:在用户添加出行人数时会有小人联动跳出,针对婴儿、儿童和成人绘制了覆盖各个年龄段的人物形象,给用户较强的代入感;情感化的设计也让整个交互变得更加生动有趣,充满惊喜。
2. 正向情感调动:结合产品的设计风格设计了多个卡通形象,每个小人都挥舞着手臂,洋溢着灿烂的笑容,向用户传递一种欢脱的氛围,富有感染力。
—强调优势,体现酒店服务亮点
Priceline是一家在线旅游服务网站,为用户提供酒店、机票、租车、订餐以及搜索比价等服务。为了帮助用户更高效、快速地做出决策,Priceline在酒店列表页新增酒店相关服务标签,用户在列表页就可判断该酒店是否满足自己的需求,简化搜索流程。
1. 提前披露酒店优势,辅助用户提前决策:酒店列表页每张卡片中横向滚动展示酒店相关服务标签,例如“有健身房”、“有残障设施”、“禁烟”等等,方便用户在列表页快速抓取该酒店的服务内容,判断其是否符合自己需求,从而提高决策效率。
2. 推荐平价替代方案,提供更多选择:在酒店列表页提供部分酒店的平价替代方案,例如推荐同类型但是评分稍低,价格更低廉的酒店,满足更追求性价比或者预算有限的用户的需求。
Citymapper是一款英国的地图导航产品,目前导航范围已涵盖全球多个国家与城市。除了和常规导航软件应用一样为用户提供多种交通方式的出行方案外,Citymapper鼓励用户选择绿色出行方式,并通过累计出行后的卡路里消耗、减排量及省钱金额给予用户激励。
1. 信息结构化,提升方案比对效率:选择出行方案时,纵向结构化展示每种出行方式的卡路里、金额、时长,便于用户快速对比方案的优劣势,选择更适合自己的路线。
2. 出行成就可视化:结合品牌ip设计了卡路里消耗、绿色减排和省钱达人3个可爱的视觉形象。并在用户行程结束后,以等价量化的方式,将绿色出行的价值等到具像化展示,提升出行后的成就感。
点击动效传递业务属性:redbus首页头部切换tab时,增加了点击交互动效,通过大巴和火车的行进动效来强调业务属性,向用户传递一种能够快速到达的感受,同时增强了用户的互动性和趣味性。
Swiggy是一款来自印度的送餐应用程序,提供食品订购和配送服务。Swiggy需要在下单后向用户发送多个通知以便于用户了解订单的进展情况。Swiggy通过巧妙地利用实时活动小部件和灵动岛,来改变推送消息的方式。尽可能简化用户查询订单状态的流程,提高信息传播的效率。
1. 针对不同场景绘制插画,实现订单状态可视化:Swiggy为订单的每一阶段状态绘制插画,例如已下单、制作中、配送中等。插画不仅有效拉开视觉层次,而且准确反映订单的实时状态,并且变得易于观赏。对用户来说,无聊的通知栏也可以变得充满趣味。
2. 合理利用灵动岛的有限空间传递信息:利用灵动岛较小的空间来最大化地展示订单状态,严格地把握图标设计,使其能适应不同尺寸的空间。以最简洁高效的方式组合图标和文字信息。部分元素与实时活动小部件保持一致,以保证设计的整体性。
#02
最后要说的话
本期的设计分享就到这里啦。
文章中的案例与思考来自于智行UED同学的日常分享。
后续我们将持续深度体验产品,挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到智行APP后续的产品设计中。
愿我们的努力为你带来更好的体验。
智行ZXD
最后
专门为UI设计师量身打造了进阶提升课程《动效练习生》,帮你突破动画、三维设计瓶颈,助你弯道超车。
本期新增Blender在UI中的应用、车载HMI、大屏数据可视化动效、礼物动效、光效动画等内容,新增内容超过80%以上。

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。