解密携程首页折叠屏适配方案 UI/UX 19年10月24日 编辑 TripDesign 取消关注 关注 私信 首页是通往各种产品和服务的必经之地。在首页，目标明确的用户可以在首屏快速找到业务入口，而目标未明确的用户可以通过上滑浏览推荐内容来寻找感兴趣的内容。 折叠屏为原来需要上滑才能曝光的信息提供了首屏展示空间。携程首页的折叠屏设计采用挪移布局：左侧提供业务入口，右侧提供个性化推荐，同时兼顾主业务分流和信息浏览，在一屏内同时满足用户的不同需求，增强用户粘性，实现内容营销。 在设计时，屏幕左侧做固定处理，底部设计“到底了”提示、不可上滑，因为首页属于内容展示型页面，两侧都可滑动不利于内容聚焦。 折叠屏版携程首页动态演示 为了验证首页采用挪移布局是否符合用户的心理预期，携程用研团队对于首页方案进行了用户测试。测试中共提供了三个不同的适配方案，A方案在常规首页上做横向拉伸；B方案在横向拉伸的基础上把三行宫格改为两行宫格；C方案采用挪移布局。 研究员将三个不同的方案随机拿给用户测试。然后研究员让用户无目地的浏览首页，并询问用户对三种方案的感受，在不引导的情况下，请用户选择更偏好的方案以及描述每个方案的使用感受。 调研结果表明，大多数用户都选择C方案（挪移布局），因为这种展示方式更惊喜，也发挥了折叠屏的优势。用户表示，方案A强行将宫格尺寸拉大，没有使用户体验到折叠屏的特点；方案B，宫格三行变两行，用户表示不习惯宫格变化后的位置。 在做首页适配时，应充分考虑业务需求，目标用户喜好和使用习惯，找到最适合的方案，并通过用研进行验证。 本篇文章来源于微信公众号: TripDesign 携程TripDesign
