• 学习笔记:只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图


    如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图

    转自:http://www.zhihu.com/question/23255417   版权归原作者所有

    目前ios手机尺寸为320*480px;640*960/1136px;对应的手机型号为iPhone3/3g,iPhone4/4s/5/5s;他们的尺寸关系比为1:2 。
    android的屏幕众多(分为:idpi 240*320px、mdpi 320*480px、hdpi 480*800px、xhdpi720*1280px、xxhdpi 1080*1920px几类,长度单位为dp,字体大小单位为sp,dp = sp );这些手机的比为:idpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 2.25 ;(安卓为什么以mdpi为基准?因为在这个尺寸下1dp=1px=sp,便于在查看设计。理论自己搜索,知乎也有)

    ios端以宽640px为设计母版,安卓端以宽480px为设计母版(为什么?自己寻找)

    以下以宽度为说明:
    ios的母版设计,界面的元素间的间距、文字大小设为8的整数倍,例8px,16px,24px等等;

    ios设计图换算到安卓基准版mdpi的设计图尺寸就是:
    算法一(网络公式):
    先换算:640px乘以0.75 = 安卓的尺寸480 px = hdpi ;
    又知hdpi是mdpi的1.5倍,故 :480/1.5 = mdpi = 320px;前面说了在mdpi里:像素与dp的关系是1:1,也就是320px = 320dp;

    算法二(自创)直接换算到mdpi:
    因为ios 640 = 安卓的xhdpi;又xhpdi是mdpi的2倍关系;所以ios 640 换算到mdpi = 640/2 = 320px = 320dp;
    --------------------华丽丽的分割线--------------------------------------------

    换算出安卓的基准尺寸,再计算出安卓其他版本的px数值;乘以对应系数:X0.75;X1;X1.5;X2;X2.25;
    得到安卓设计稿的px尺寸。包括安卓所有元素换算成px都是遵循这个公式:
    idpi文字/图标/间距 = (ios/2)*0.75 = px;
    mdpi文字/图标/间距 = (ios/2)*1 = px;
    hdpi文字/图标/间距 = (ios/2)*1.5 = px;
    xhdpi文字/图标/间距 = (ios/2)*2 = px;
    xxdpi文字/图标/间距= (ios/2)*2.25 = px;

    设计:做一套ios640的ui

    切图:以设计好的这一套640作为安卓720x1280-xhdpi的母版(ios640=安卓720x1280的xhdpi通用),在此基础上用安卓的比例用ps放大缩小得到几套不同尺寸的安卓图标,分别按照mdpi、hdpi、xhdpi放在不同文件夹

    标注:以设计好的这一套640的图标大小行高、字体大小、间距等用markman标注为px(可供ios直接用),这套标注好的尺寸。丢给安卓程序员,让他按照idpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 2.25 去换算出多套程序适配方案(换算成dp),去适配不同安卓屏幕。如果该安卓程序员逼格不够,他会反过来要求你标多套尺寸,这样你的工作量会增加很多,而且没有必要。他只需要简单换算下就行了

  • 相关阅读:
    js下载doxc 文件示例和部分后缀对应的content-type 总结
    使用react-app-rewired和customize-cra对默认webpack自定义配置
    koa2使用es7 的装饰器decorator
    vue history 模式打包部署在域名的二级目录的配置指南
    linux 安装 node 环境
    javascript 正则表达式之分组与前瞻匹配详解
    vue的$emit 与$on父子组件与兄弟组件的之间通信
    mysql 的基本操作总结--增删改查
    mysql 常用的时间日期函数小结
    小程序封装request请求,统一API
  • 原文地址:https://www.cnblogs.com/love9happy/p/4701582.html
Copyright © 2020-2023  润新知