苹果官⽹iPhone页⾯设计⼿法浅析
北京时间2021年9⽉15⽇凌晨1点，苹果公司发布了新款iPhone。
⼀起来看看iPhone官⽹的设计⼿法。
从图上看，设计师使⽤了很多⾼清渲染图。其中整机的镜头部分的光泽采⽤倾斜玻璃反光效果，加了渐变半透明的蒙板。
这些渲染图极具视觉冲击⼒。如镜头局部采⽤了不锈钢⾦属光泽渲染，同时图不像⼿册的常见的居中或居左放置，⽽是右对齐，给⼈⼀种突破页⾯边框的感觉。
iPhone 13 Pro与iPhone 13采⽤层叠对⽐的⼿法，直观展现两款机型的屏幕尺⼨⼤⼩。
刚开始，我以为这是通过图形软件把两款机型的照⽚合在⼀起，再嵌⼊⽹页中。通过在Chrome浏览器按【F12】键，然后按【Ctrl+Shift+C】组合键，把光标移到图上，发现这其实是两张单独的图⽚前后层叠在⼀起。
后⾯的例⼦还有不少。
整体与局部特写，⼤与⼩，背景⿊与⽩，光与影，对⾓交错，形成强烈对⽐。
主打亮点是镜头、拍照、全新的智能影像系统。⽂案中⽤纯⿊颜⾊的字标出，使⼈很容易就留意到。
为了突出弱光拍照功能，使⽤了不少暗⾊甚⾄纯⿊背景的照⽚。采⽤图⽂交错混排的⽅式展现。
这些图⽚占据全部浏览器空间，甚⾄让⼈产⽣⼀种沉浸在夜晚当中的错觉。
flex布局对齐方式图⽚交叠的排版效果很有意思。
到底是怎么实现的呢？
通过查看源代码得知，设计师采⽤CSS grid布局⽅案（类似Excel⼆维空间，把版⾯空间分成⾏和列），通过把图⽚放⼊单元格中，重叠单元格让图⽚产⽣重叠。在设计师和前端开发者眼中，实际设计时是这样⼦的。
在这样的⼀个分分合合，纵横交错，合纵连横，你中有我，我中有你的世界，复杂的页⾯排版就变得简单了。
类似的页⾯布局，就好懂多了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。