第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

如何适配iPhone X?来看滴滴出行的实战案例复盘!(3)

时间:2017-12-06 08:50来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
以上的适配规则基本可以满足所有场景的基础适配需求。当然还有很多特殊场景,不需要特意保持 iPhone 8 和 iPhone X 展现效果的一致性,这种情况就需要单

  以上的适配规则基本可以满足所有场景的基础适配需求。当然还有很多特殊场景,不需要特意保持 iPhone 8 和 iPhone X 展现效果的一致性,这种情况就需要单独设计方案,不是通用规则能满足的了。

  滴滴出行针对内部产品做了一套适配指南,几十页满满的适配方案说明,尽可能详尽的将普适规则与特殊规则运用场景举例说明。设计平台将此适配指南发放到各业务部门,由业务方产出自己各功能场景下的适配方案。

  在此过程中我们发现,即使规则已经很详尽,Webapp、H5页面等多场景下仍有一些不清楚如何适配,或不能通用适配规则的情况,需要设计平台持续跟进,讲解规则走查适配效果。

  造成这种情况的原因大多是因为界面设计的时候没有充分考虑其后期延展,导致多屏幕下不能保持统一样式,无法通用适配规则。这让我们开始思考如何设计界面才能包容多屏幕的展现。

  「去边界化」设计

  设备屏幕在不断更新,适配需求就是持续的无尽的,iPhone 从 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ,屏幕尺寸不断在变化,甚至屏幕的形状边界也在变化,更不用说安卓系统各种各样的屏幕尺寸及屏幕形状。例如,夏普AQUOS S2。

  设计界面时,如果对市面的主流屏幕挨个设计是有极其高的时间成本的,那怎么才能让适配更从容,不必紧张的跟随手机厂商的发售脚步?是否有提高适配效率的方法?适配可否是一劳永逸的?需要适配的元素有没有一些共性……

  带着这些问题不断的思考总结,我们形成了一套自己的设计理念,能够让适配这件事情以一抵百,万变不离其宗,这就是「去边界化」设计。

  「去边界化」设计,是指在设计之初把边界限制去掉,定义好界面元素的特性及层级关系后,再套用到屏幕边框之中。与常规设计的区别在于,让内容成为独立且完整的组合体,再根据设定好的变化规则组合到不同的边界中去。这样保障了内容的最大适用程度,且保障各屏幕展示规则的统一性。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  目前我们最常做还是手机界面,未来VR、AR 成熟起来,我们所设计的界面就会更大,甚至会大到无形。运用「去边界化」设计,可以让我们更好的适应未来。

  另外回到手机界面,我们完成一个设计方案后,也可以运用“去边界化”的方式检查界面元素是否在多屏幕适配上存在问题,减少不必要的适配工作量。

  其大无外,其小无内,在界面设计上,我们也需要突破界限,精益求精,让每一个元素都丰富而完整。

  「去边界化」设计的应用

  1. 定义元素特性

  这里的元素特性,除了元素本身的基础功能及操作方式外,从三个角度进行思考,延展性、吸附性、流动性。

  这里我们以同倍率,不同尺寸的屏幕适配为例,省略倍率换算方便我们更简单的了解「去边界化」设计。

  延展性:延展性指元素是否会在不同尺寸屏幕进行尺寸变化。定义元素的延展属性是适配的基础,确定什么元素大小可变,什么元素大小不可变,才能让适配方案清晰统一。

  如下图中,图片、卡片、背景、列表、按钮 等元素可随着屏幕进行延展变化,而icon、文字等为固定大小不会随着屏幕进行变化。

  延展变化又可分为:等比延展、横向延展、全部延展。

  通常图片、视频元素使用等比延展,保障画面比例统一不变形;列表、按钮 等多采用横向延展,信息量不变高度无需变化;卡片、背景等多根据其承载信息和屏幕背景尺寸进行调整,长宽均跟随变化。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  吸附性:界面中的元素都不是独立存在的,每个元素都和其它某个元素存在一定联系,所以定义好元素之间的吸附关系,方便后续元素的重新组合。

  如下图,button 吸附于界面(或安全区)底部,适配到其它屏幕依然保持与界面(或安全区)底部的吸附性。而下图中的toast 提示为界面居中元素,也就是它的吸附性就是界面的中心,适配到其它屏幕仍保持这一吸附属性。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  流动性:流动性将元素比作水,依附与一个容器内展示,根据容器的尺寸变化而变化。多为文字流、图片流等信息元素所具备。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕