android与ios ui切图关系,APP-IOS与Android界面设计与切图

做一全套的APP设计,流程是:

1、界面设计:设计IOS界面;设计Android界面。

2、切图:切IOS的2倍图和3倍图;切Android的hdpi,xhdpi,xxhdpi这三个尺寸的图。

3、标注:以px为单位标注IOS界面的尺寸;以dp为单位标andriod的尺寸。

----------------------------------------------------------------------

IOS端_界面设计

————————

一、界面设计:

1、【界面分类】:IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。

2、【设计方法】: 以iphone8为标准进行界面设计,让开发进行适配。即750px*1334px以基准(72像素\英寸)。

3、【设计标准】:750*1334界面——状态栏40px; 导航栏88px;标签栏98px;工具栏88px;文字最大34px; 最小18px;常用28px。

————————

二、切图:(所有开发写不出来的都得切,如icon, 默认头像,背景图等)

1、【切图尺寸】:IOS 只用切【二倍图】和【三倍图】。注意:有些button, 需要更改颜色,切一个“被点击的状态”(如btn-xxx-pressed@2x,btn-xxxx-pressed@3x)。

2、【切图命名】:如btn-xxxx@2x,btn-xxx@3x(按纽); img-xxx@2x,img-xxxx@3x(图像); bg-xxx@2x,bg-xxx@3x(背景图)

3、【方法一】:【photoshop图层-右键-导出为...】

设置大小(@1x+@2x);设置好icon的画布尺寸(如导航栏上的几个icon的画布尺寸应保持一致)

fb30023dbd7da83e5979acc5f4d59229.png

51325b9fbec29f587233a0eb45fef991.png

【方法二】:【sketch-选中icon-右下角-make exportable】

(如需切相同尺寸的icon,需建立相同尺寸的画布,并选择整个画布整体导出)

————————

三、标注:

1、【标注内容】:颜色\长宽\字号\距离;

2、【标注单位】:IOS的标注以px为单位进行标注。(注意:数字最好为偶数)

3、【标注软件一】:标注神器-parker/markman,标注前请在“设置”里将单位改为px;

83dfb383a41aea62af040e401f8cb944.png

【标注软件二(强烈推荐)】:zeplin软件——无需标注,只需将界面导入zeplin,开发直接访问zeplin,即可查看所有的尺寸、间距、色值、字体、字号等。

7109e369054a844e1c4f45e2593669dd.png

9187ca7b525a9da3b1060d20d9ea7c96.png

7068faa394f1363f0718661e68503803.png

Android设计:

————————

一、界面设计:

1、【界面分类】:Android的尺寸非常多,非常杂。总的说来,就分为这几种模式:idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。

2、【设计方法】:以xhdpi为基准进行界面设计,让开发进行适配。即以720px*1280px为标准(72像素\英寸)。

3、【设计标准】: 720px*1280px界面——状态栏50px, 导航栏96px,标签栏96px,工具栏96px,实体键96px;文字最大36px;最小18px;常用28px。

————————

二、切图:

1、【分类】:Android 的切图需要切三个尺寸的:hdpi, xhdpi, xxhdpi。

2、【方法一】:切图神器-cutterman,也可以一键切出hdpi, xhdpi, xxhdpi三个尺寸的图, 而且还可以切出“点九图”。

【方法二】:photoshop、sketch、illustrator皆可直接导出icon。

————————

三、标注:

1、【单位】:Android的标注以dp为单位。(parker里, 在“设置”里将单位改为dp)

2、【标注软件】:同上,推荐zeplin软件(建立文件夹时需选择安卓版本)

a7fa6cd9f1dcfedd5489edbb63521d5f.png

----------------------------------------------------------------------

补充 _ 2019/4/10:

目前流行的是以【一倍图】的分辨率来进行设计,也就是sketch、PS、AI上给的分辨率:

iPhone 8的分辨率是750*1334,而sketch、PS、AI上iPhone 8给的分辨率是375*667.

意思是设计平台鼓励设计师用一倍图来设计,一方面是因为开发环境是以一倍图的环境来开发的,因此一倍图的设计稿无需开发再进行换算。

另一方面是icon导出时:@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整数换算。

所以推荐大家用【一倍图】的分辨率来设计。icon切图分别导出2倍图和3倍图供开发使用。(而且sketch提供的IOS控件也是1倍图的尺寸啊~~)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js禁止鼠标滑轮_js实现鼠标滑动到某个div禁止滚动

本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动。这里主要是当鼠标滑动到该div时,监听滚轮事件并通过preventDefa…

android app应用后台休眠,安卓手机锁屏后程序自动关闭,怎么设置手机app允许锁屏后台运行...

原标题:安卓手机锁屏后程序自动关闭,怎么设置手机app允许锁屏后台运行安卓手机锁屏后,很多程序就会自动关闭,实际上,这是安卓手机的一种保护机制。为了使系统能够流畅稳定的运行以及更加省电,它都会在手机锁…

ps怎么清屏_黑洞PS大赛刷屏!最后一张扎心了……

事件视界望远镜(EHT)项目组和中国科学院共同在上海天文台发布由EHT“拍下”的人类历史上首张黑洞照片这意味着人类成功获得了超大黑洞的第一个直接视觉证据黑洞首次露出真容!据说宇宙诞生了138亿年年龄最大的黑洞也已经超过了100亿岁经过了这么久黑洞家族的成员才终…

linux和windows和鸿蒙,linux很好,但为何大家都用Win,鸿蒙系统站错阵营了吗?

原标题:linux很好,但为何大家都用Win,鸿蒙系统站错阵营了吗?由目前已知信息可知,华为“鸿蒙系统”很可能基于linux开源程序搭建,这个特点与苹果微软由很大不同。苹果手机目前主要使用Objective-C程序语言开…

centos7磁盘逻辑分区命令_CentOS7 磁盘分区(主分区、扩展分区和逻辑分区)的创建、挂载与删除...

创建磁盘分区查看磁盘分区情况:fdisk -l[rootmodel ~]# fdisk -l //查看系统中所有磁盘的分区列表Disk/dev/sda: 107.4 GB, 107374182400 bytes, 209715200sectorsUnits sectors of 1 * 512 512bytesSector size (logical/physical): 512 bytes / 512bytesI/O size…

php使用webservivce_JWS服务开发使用指南

均支持该版本&#xff0c;主要你的web.xml文件中必须制定2.5版本xmlversion"1.0"encoding"UTF-8"?><web-appxmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns"http://java.sun.com/xml/ns/javaee"xmlns:web"ht…

android sdk是灰的,Android Studio 2.3 sdk管理器标签灰显

Android Studio 2.3 - >配置 - > SDK管理器。 这些选项卡呈灰色显示&#xff1a; SDK工具&#xff0c;SDK更新站点。此外&#xff0c;“Show Package Details”复选框呈灰色。 系统正常更新。没有错误消息。Android Studio 2.3 sdk管理器标签灰显我认为这发生在Studio 2.…

android layer阴影,Android Layer-List实现自定义Shape阴影

一、给右侧和底层加阴影android:left"2dp"android:top"2dp">android:angle"270"android:endColor"#0F000000"android:startColor"#0F000000" />android:bottomLeftRadius"6dip"android:bottomRightRadius&q…

localdatetime 默认时间_java中的时间与时区:LocalDateTime和Date

LocalDateTimeLocalDateTime本身不包含时区信息&#xff0c;它存储的是年、月、日、时分秒&#xff0c;纳秒这样的数字。在不同的时区下&#xff0c;这样的数字代表不同的时间。比如一个LocalDateTime存储2020-01-01 08&#xff1a;00&#xff1a;00&#xff0c;这里省略纳秒。…

html 拖拽坐标,Html+css实现拖拽导航条

div横向拖拽排序body, div {padding: 0px;margin: 0px;}.box {position: relative;margin-left: 15px;padding: 10px;padding-right: 0px;width: 810px;border: blue solid 1px;}.box ul{list-style: none;overflow: hidden;padding: 0;margin:0;}.drag {float: left;border: #…

seata 如何开启tcc事物_微服务分布式事务4种解决方案实战

分布式事务分布式事务是指事务的参与者&#xff0c;支持事务的服务器&#xff0c;资源服务器分别位于分布式系统的不同节点之上&#xff0c;通常一个分布式事物中会涉及到对多个数据源或业务系统的操作。典型的分布式事务场景&#xff1a;跨银行转操作就涉及调用两个异地银行服…

python redis 哨兵_Redis哨兵机制

概述上篇文章主要说了Redis 复制的内容&#xff0c;但 Redis 复制有一个缺点&#xff0c;当主机 Master 宕机以后&#xff0c;我们需要人工解决切换&#xff0c;比如使用slaveof no one 。实际上主从复制并没有实现&#xff0c;高可用&#xff0c; 高可用侧重备份机器&#xff…

labview自动生成html,使用LabVIEW实现网页数据提取及交互.pptx

使用 LabVIEW 控制IE或WebBrowser实现网页数据的提取和交互By GSD&#xff1a;attraction - 张生斌2013.1.11可能会遇到的问题网页能否被程序控制&#xff0c;程序和网页如何通信&#xff1f;如何下载网页中我们所关注的数据&#xff1f;如何用程序修改网页中表单的内容&#x…

pdf python定位_如何使用PyPDF2获取PDF定位

我正在使用Python/Django。PyPDF2阅读我目前的pdf。如何使用PyPDF2获取PDF定位我想阅读我已经保存的pdf文件&#xff0c;并获得pdf内单页的方向。我期望能够确定页面是横向还是纵向。tempoutpdffilelocation settings.TEMPLATES_ROOT nameOfFinalPdfpageOrientation pageToE…

android 内容显示栏,android – 在工具栏下显示内容

您好我试图简单地将我的内容放在工具栏下面,但是当我运行我的应用程序时,当它应该低于它时,一些内容隐藏在它后面.我已经阅读了关于使用框架布局来尝试将其分开但我已经陷入困境.我目前正在使用随软件提供的基本android studio导航抽屉模板,并想知道我必须做出哪些更改.我的协调…

ios nslog 例子_iOS 典型内存泄露案例 - zhenshan2013的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...

最近进行iOS 安全黑匣子的测试,在Demo中通过不断的点击调加密接口,同时通过苹果自带instrument的leak工具监控,发现典型的内存泄漏,监控图如下:上图中红色的部分表示该操作触发的代码有内存泄漏的可能,于是拿出源代码来研究一番,源代码如下://加密接口-(IBAction)encrypt:(id)s…

HTML饼状图中心添加文字,echarts饼状图环形中间动态文字

let currName "";let myChart echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);myChart.on(‘mouseover‘, (params) >{currNameparams.name;console.log(params)let opmyChart.getOption();let _label{normal:{sho…

pos共识机制_OK区块链60讲 | 第17集:什么是PoS共识机制

什么是PoS共识机制https://www.zhihu.com/video/1196092110837805056《OK区块链60讲》是由OKEx&#xff06;新浪科技联合出品的区块链科普动画视频&#xff0c;针对区块链零基础用户&#xff0c;通过系列文章、科普动画等形式&#xff0c;从概念、技术、应用等角度&#xff0c;…

html溢出左右滚动,html-选项卡溢出时水平滚动

我在容器中有一个基本表。 该表将包含约25列。 我正在尝试在表格溢出时添加水平滚动条&#xff0c;现在过得很艰难。现在正在发生的情况是&#xff0c;表格单元格通过自动调整单元格的高度并保持固定的表格宽度来容纳单元格的内容。对于我的方法为何无法解决此问题的建议&#…

大疆无人机android登录闪退,你的DJI APP闪退了吗?附官方解决方案

原标题&#xff1a;你的DJI APP闪退了吗&#xff1f;附官方解决方案今天&#xff0c;很多飞友反应&#xff0c;在使用大疆无人机过程中出现DJI APP闪退情况。随后在大疆社区官方给出了解决方案&#xff0c;如下&#xff1a;关于DJI GO 4 APP闪退解决方案目前关于DJI GO4 APP闪退…