折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探

今天,华为正式发布了折叠屏手机Mate X,响了很久的靴子终于落地,在咋舌于价格的同时,作为一个设计师,你准备好面对这个革命性的产品了吗?

携程公共UED团队在年初就前瞻性地进行了折叠屏适配设计的研究,并有幸成为华为的合作伙伴参与了折叠屏白皮书的撰写。

 携程30到40岁以商务出行为主的男性用户,与折叠屏面对的商务用户非常契合,所以携程APP非常适合针对折叠屏进行适配和创意设计。对于携程来说,打造符合折叠屏的界面设计有利于用户体验的提升,同时对于旅游场景的生态开发也有深远的意义。

折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探
从左至右:华为、三星、柔宇、小米、苹果折叠屏专利


折叠屏优势
折叠屏相对传统手机的优势可以归纳为三个方面:
1.  屏幕更大
华为Mate X展开屏为8英寸、三星Galaxy Fold展开屏为7.3英寸,大屏幕提升了视觉冲击力和感染力。
2.  满足更多场景化需求
用户在休闲娱乐的场景下希望手机屏幕尽可能大,适合娱乐的体验感;而在携带的过程中又希望手机足够小,便于携带。折叠屏在“展开”和“折叠”状态下,可以分别适合不同场景下的用户体验。
3.  提升特殊场景下的工作效率
折叠屏的主要特点包括“多任务处理”“主屏幕更大”“体积小方便携带”等,大大提升不同场景下的工作效率。
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探


折叠屏适配方式
结合华为的折叠屏适配指南和携程目前的产品框架,我们总结出现阶段适合携程APP的五种适配方式:
1.  相对拉伸
纵向布局结构不变,横向空间延伸。
这种适配方式适合列表结构的页面。短期内需要快速上线的界面也可采用拉伸适配,可用优先,不考虑界面体验。
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探
2.  相对缩放
纵向布局结构不变,单个元素在行内进行等比缩放。
这种适配方式适合的页面场景很有限,如广告弹窗页。
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探
3.  延伸布局
纵向布局结构不变,可容纳元素个数增加。
这种适配方式适合横滑数量能超过两屏的页面,如果模块数量撑不满一屏,反而会给人未对齐、未做适配的误解。
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探
4.  挪移布局
可视化元素进行重新分组,各组块位置挪移,最终形成均衡的排版。
这种适配方式适用于内容呈现型、单页面内信息架构层级少的页面,如首页、内容详情页等。左侧建议固定。
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探
5.  分栏布局:左右或上下
将原来折叠态需要两屏、并通过跳转才能切换的内容,利用展开态下的屏幕空间,实现同一屏中展示。
这种适配方式是结合折叠屏特点的新布局设计,用户体验好。适合折叠屏已投入市场或开发周期充裕的版本。
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探
折叠屏来了,设计师Are you ready? ——携程折叠屏适配方案初探


APP在适配折叠屏时,应当遵循折叠屏设计规范并利用折叠屏的优势特性去展开设计。稍后的文章中我们会分享折叠屏适配过程中的一些具体案例。

本篇文章来源于微信公众号: TripDesign

UI/UX

CDC夜校|第七期开课啦,快来报名吧!

2019-10-23 17:48:40

UI/UX

剁手后是否仍旧没有满足感?关于愿望实现的几个作法

2019-10-23 20:13:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索