2024年多屏网页设计 篇1
底部出现一个虚拟的Home指示条，用以实现常用的交互功能，锁屏状态下向上滑动解锁，应用内向上滑动回到主屏，向上滑动并停止片刻进入多任务切换窗口，虚拟Home指示条大多数情况下将会存在于屏幕的下方，这意味着大多数的应用程序开发者将不得不考虑这个虚拟Home指示条的存在，这一块134x5像素的虚拟Home指示条将会占用底部的屏幕范围，因此，尽管是全面屏，但是却有了一个小下巴。而这个虚拟Home指示条只有黑、白两种颜色。
由于异形全面屏的设计，在内容显示上需要注意避开屏幕顶部的刘海，因此，在iPhone X的应用适配中，出现了一个安全区域的概念，屏幕上方刘海区域和下方的虚拟Home指示条区域都需要避开，只有中间的一块区域才可以显示内容和进行交互操作。
大家都知道，之前在做iOS的应用的时候，最常用到的就是@2x和@3x，这代表着不同的屏幕密度与图片大小之间的适配关系，326左右PPI的iPhone5/iPhone6/iPhone7 都使用了@2x大小的图片，虽然它们的分辨率有差异，但是最终决定我们用哪种图片素材的，还是要看手机的PPI，也就是密度。那么这次UI设计师关注的要点，可能就是iPhone X了，屏幕分辨率提升到1125X2436(375ptX812pt)，尺寸为5.8英寸，经过测算，PPI达到了458左右，这意味着屏幕密度比Plus的401PPI更大，但是只是多了50多哦，根据苹果的iOS11的规范，我们可以揭晓答案啦，没有四倍图，依然延续@3x，大家可以找一台iPhone X看看之前用@2x或者@3x的应用安装到新设备上会不会虚掉，然后就可以及时开展素材的适配工作了。 其实很简单，无非是把原来的@2x的图片再放大1.5倍就可以了，其实，也就是沿用plus的素材就可以了，只不过，布局需要动一动了。