UI设计切图的点滴理解

https://www.xueui.cn/design-theory/figure-ui-design-specification.html
https://www.cdwanxun.com/zixun/show/4407.html
https://blog.csdn.net/xmlife/article/details/79806285
https://www.xueui.cn/tutorials/app-tutorials/mobile-ui-design-size.html?ref=r

https://blog.csdn.net/weixin_30407613/article/details/99566626?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.control

概念理解
  1. 物理像素(又叫像素分辨率),屏幕自身固定的像素显示能力,比如现在手机系统显示里标注的750 * 1334、1242 * 2208、2340 * 1080、2K、4K等
  2. 逻辑像素(又叫逻辑分辨率),通俗的讲其实就是指手机屏幕的宽高,由手机的尺寸决定的,比如3.5英寸、4英寸、4.7英寸、5英寸、6.5英寸等,单位为pt(ios),dp(andriod), 1pt=1dp=dpr(px)
  3. dpr(又叫设备像素比,倍率),物理像素/逻辑像素
    在这里插入图片描述
  4. 设计师是根据物理分辨率进行设计原稿,一般会参考较大分辨率的,然后向下适配,最终切出来的图也都是物理像素,而css的px为逻辑像素,需要进行换算,直接除以dpr即可!针对app客户端可以通过ps的cutterman插件快速生成不同尺寸的图标(a.png,@2x.a.png,@3x.a.png)
延申: webapp移动端设备自适应适配方案
  1. 流式布局,流式布局的解决方案有不少弊端,它虽然可以让各种屏幕都适配,但是在众多终端尺寸面前,很难显示出视觉设计师和交互最想要的效果
  • 左边固定,右边百分比自适应
  • 右边固定,左边百分比自适应
  • 左右固定,中间百分比自适应
  • 等分布局
  1. 固定宽度做法,早期偷懒的做法,设置主体固定宽度,超出部分留白,显然这个在高分辨率终端上面界面变小,旁白变大。超级难看
  2. 响应式做法,这个主要在bootstrap等前端css框架出现后的主流做法,一般只是用简单的博客、小型门户类的网站,可以同时在pc和手机端兼容显示,说到底也是对于 媒体查询的封装,针对不同尺寸的手机渲染不同的样式布局,一些比较流行响应式轻量级框架比如Amaze UI、layui等。
  3. 设置viewport进行缩放,天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效,不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
  1. rem自适应布局,通过html根元素font-size的动态改变来影响其他页面元素的等比缩放,动态处理可以通过媒体查询、页面加载后js动态换算。
    https://www.jb51.net/css/709119.html
    https://blog.csdn.net/weixin_39939012/article/details/85257521
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值