ios和Android切图尺寸规则


UI交付给研发的资料有:

·注图(以 **750 \1334* 尺寸为基准标注

·2x切图(640 & 750为宽度尺寸为基准切图

·3x切图(1280为宽度尺寸为基准切图

iphone设备尺寸

切图命名规则


命名的基本原则: 

1.为了让切图便于管理,依图片性质命名。

2.当图片要做给 Retina 屏幕使用时,只要在副档名前加上「@2x」就可以了。三倍的图副档名【@3x】

3.不要把数字或符号当成档名的开头,如 3-icon.png 、+abc.png之类。

根据屏幕图片尺寸

标注图


备注:以下素材图是依ios设备为例,标注的内容适用于Android设备

·H5页面上的标注:

如果界面是用H5来实现的话,标注的单位要用px值进行标注。

·颜色标注:

两种色值表达都标上(16进制&RGB)。

颜色标注

·文字标注:

两种色值表达都标上(16进制&RGB)。

文字标注

页面标注

·按钮区域:

背景图片名称、区域位置、区域尺寸、透明度,圆弧度。

按钮标注

·图标区域:

背景图片名称、区域位置、区域尺寸、透明度,圆弧度。

区域标注

·文字区域:

文字标注、区域位置、区域尺寸。

文字区域标注

·间距:两个相邻区域之间的距离。

间距标注

·线条:宽度,颜色(16进制 & RGB)。

app端UI的制图规范相关推荐

  1. 移动端APP~最新UI界面设计规范(转载)

    首页发现 同城 职位 活动 正版素材 课程 登录注册 移动端APP~最新UI界面设计规范(尺寸大小篇) 1年前发布 原创文章 / UI / 教程 18107 7 274 移动端手机界面看似简单,然而里 ...

  2. qt ui界面无法移动控件_都是知识点!移动端UI设计最基本的10种APP界面类型(上)...

    如今互联网的发展和智能手机普及,移动应用成了人们的宠儿,很多多移动APP也会根据用户的需求而更迭本身的UI设计. 授人以鱼不如授人以渔,UI设计作为设计大类的一个细分岗位,如今已经随着时间的推移成为了 ...

  3. 移动端UI界面设计之APP字体排版原则| 萧蕊冰

    今天介绍的是移动端UI界面设计的有关APP字体排版原则的内容.除了电脑端的网站UI设计,移动端的界面设计也是UI设计中的一个重要部分,毕竟我们每个人平时身上带着的肯定有手机.今天萧蕊冰就介绍一下关于移 ...

  4. ps转换html适应网页尺寸,【ps制作网页页面】ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?...

    [ps制作网页页面]ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?下面就和小编一起来看看吧! ps图像如何生成html? 事实上,ps有很多功能.你还羡慕 ...

  5. 移动端UI界面设计:APP字体排版设计的七个原则

    移动端UI界面设计:APP字体排版设计的七个原则 发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...

  6. ui设计移动端字体适配_超全面的移动端UI 设计规范整理汇总

    很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ...

  7. vue ui框架_Vue移动端UI框架指南

    自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具体业务需求来做选择. 1.Vux 中文文 ...

  8. 优秀的基于VUE移动端UI框架合集

    vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 vux 基于WeUI和Vue(2.x ...

  9. 最全移动端UI设计规范,作为前端的你,了解多少?

    很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ...

最新文章

  1. 修复 Windows XP/2003 双系统无法启动
  2. 原来女孩要的不是真爱,而是关爱...
  3. SharePoint中修改密码的WEB Part之终极版:即可以修改AD,又可以修改本机用户密码的Web Part!!...
  4. 什么是未定义的引用/未解决的外部符号错误,如何解决?
  5. Redis源码剖析(十二)--客户端和服务器
  6. excel xml mysql_数据库表转换为xml格式,excel转换为xml格式文件
  7. python开发多平台app_django下创建多个app并设置urls方法
  8. leetcode637. 二叉树的层平均值(层序遍历04)
  9. vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法
  10. Boosting Adversarial Attacks with Momentum论文解读
  11. 【图像加密】基于matlab Logistic混沌图像加密与解密【含Matlab源码 1216期】
  12. 时间序列之向量自回归检验VAR(自相关性)(2)
  13. AutoCAD打开慢的解决方案
  14. 2022年怎么申请企业邮箱?企业云邮箱申请?
  15. 力扣242.有效的字母异位词(Java语言,排序法、散列表法)
  16. boost::asio编程-同步TCP
  17. Mysql根据经纬度和距离检索符合条件的数据浅析
  18. 软件公司要咨询顾问干什么?
  19. 【你知道maven么?】
  20. 双显卡只用独显好吗_双显卡怎么切换到独立显卡 双显卡只用独显方法

热门文章

  1. TPC-H生成测试数据集-Ubuntu
  2. 2021-09-13
  3. 浅谈Winform程序的界面布局设计
  4. oracle写会阻塞读吗,一致性读保证了读不阻塞写
  5. linux云服务器下载安装JDK
  6. 22考研上岸清华深研院人工智能,分享专业课807模式识别改革第一年备考经验
  7. 计算机短路计算基本原理,第八章第五节短路计算计算机算法.doc
  8. 小扎放话,Meta今年缩招3000人!游戏引擎巨头Unity裁员400人
  9. 安科瑞导轨式多功能电能表DTSD1352指导性技术要求-Susie 周
  10. 【分享】5S管理各阶段的推进方法及工具