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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

ps导出gif颜色不对_PS基础知识(1)

视图平移命令:1,使用工具箱中的抓手工具或着(H)2按住空格键,上下左右移动视图。(常用方法)图像格式PSD:原始的图像文件,包含所有的 Photoshop 处理信息,如图层&#xff0…

音乐分享 html,支付宝朋友圈可以分享音乐嘛

打开手机,找到手机里面的支付宝应用点击进入在进入的支付宝界面里,选择底下的朋友点击进入在弹出的朋友界面选择生活圈选择生活圈下方的朋友动态进到朋友动态界面,点击右上角的照相机图标支付宝 怎么发朋友圈动态?进入支付宝页面中…

eplan单线原理图多线原理图_EPLAN-黑盒-2

3、黑盒的功能定义制作完成的黑盒仅仅图形化描述了一个变频器,它实现逻辑上的智能了吗?双击黑盒弹出属性标签,它的主标签还是现实黑盒,如图,图形和逻辑还没匹配。因此,必须为它重新定义功能。EPLAN的功能定…

html图片热点新窗口,HTML基础必看---表单,图片热点,网页划区和拼接详解

html表单里面的图片点击相应图片跳转到本页其他去在表格里面选了这个 鼠标点击一下跳转到相应区块 代码要怎么写,夜影驱动编程小编今天和大家分享大神需要在一张图片上设置多个能点击跳转的链接区域时,推荐使用网页的热点链接。 参考代码如下&#xff1a…

2021辽宁高考艺考成绩查询系统入口,2019年辽宁省艺考统考成绩查询官方入口

2019年辽宁省普通高等学校招生美术类、音乐舞蹈类专业统考成绩已经公布。考生可以通过以下方式查询美术类、音乐舞蹈类专业统考成绩:一、美术类专业统考合格分数线美术类本科专业统考合格分数线为185分,且3门科目中至少有2门各不低于60分;专科专业统考合…

微型计算机硬盘为什么要分区,为什么懂电脑的人,都说硬盘不需要分区?看完你就知道了...

你的电脑有多少个分区呢?当你拿到一台新电脑的时候,一般只能看到一个系统分区。这时候就会开始进行系统分区,将硬盘分为C、D、E等等盘符,用途也各不相同,系统盘,资料盘,娱乐盘等等。似乎所有人都…

php imagecreatefromjpeg图片太大_PHP图像处理技术及应用

基本图像处理技术1体理解:1,创建(得到)一个图像资源(resource)——它相当于一个“画板”(画布)2,在该画板上进行“绘制图线”;3,将该画布输出到网页上显示出来,或保存为图片文件。图像处理技术,…

年金系数用计算机怎么算,年金系数是什么?怎么计算?

【导读】年金是相等时间间隔收到或支付相同金额的款项,如年末收到养老金1万元即为年金。年金现值是按市场利率把发生期收到的各期年金利息折成现值汇总,现值系数是按利率每期收付一元钱折成现在的价值。年金系数是什么?首先说什么是年金&…

离人愁有用计算机怎么写歌词,离人愁歌词是什么意思 今两股痒痒什么意思

最近《离人愁》这首富含古风的歌曲可是大火,既然是古风,里边的歌词也是让大多网友不理解其中表达什么意思,进而不能好好体会作者写这首歌的意图,其实每个人对于这首歌曲还是有很多自己的理解的,现在小编就来介绍这首歌…

手机耗电统计app_华为手机有哪些功能关掉比较好?

阅读本文前,请您先点击上面的蓝色字体“野趣说”,再点击“关注”,这样您就可以继续免费收到文章了。每天都有分享,完全是免费订阅,请放心关注!现在的手机使用一年半左右就会出现卡顿的情况,这也…

太原冶金技师学院计算机系,山西冶金技师学院2021年招生简章

山西冶金技师学院2021年招生简章随着考试的落幕,很多学生都比较关注一些学校的招生信息,其中山西冶金技师学院就受到很多学生关注,学校的专业专业设置也比较多,那么在今年,该学校的招生简章有什么要求呢?学校的专业招…

html高度没有滚动条,Div扩展了页面高度,但没有滚动条

我在页面左侧有一个div用于导航链接。点击标题可展开链接的子集。我将此div设置为页面高度的100%,以便列占据页面的整个左侧。当所有子类别都展开时,会出现问题。 div的内容在页面底部运行,但不添加滚动条。Div扩展了页面高度&…

es 删除重复数据_怎么标识并删除SPSS数据库里的“重复个案”?

背景:测试学生体质数据时,由于部分学生第1次测试成绩不合格,让他们进行了补测。但是,录入数据时,没有替换,造成这部分学生有2个体测成绩,现在需要找到这些重复个案并删除较差的成绩。1. 数据概览…

清华计算机接口原理,微机原理与接口技术课后习题答案清华大学

微机原理与接口技术课后习题答案清华大学 微机原理与接口技术课后部分习题参考答案 第一章 2. 第 3项任务,根据状态标志位的状态决定转移方向。 3. 程序存储是将要执行的程序的全部指令存储到存储器中,程序控制指程序开始执行后,通过指令流控…

4n35光耦引脚图_光耦继电器的主要特点以及输入特性!先进光半导体

光耦合器是一种电光电转换设备,可将电信号作为介质传输。它由两部分组成:光源和光接收器。发光源和光接收器被组装在同一气密壳体中,并通过透明绝缘体彼此隔开。发光源的引脚为输入端子,光接收器的引脚为输出端子,公共…

系统流畅度测试软件,如何通过FPS显示快速测试自己手机流畅度

对于手机流畅度测试除了系统自带的功能能测试手机流畅度之外,那么就没有其它方法能测试手机流畅度了么?那么接下来由小编为大家推荐一款小工具FPS显示(FPS Meter),你可以通过它快速的测试自己手机流畅度,接下来一起看看吧&#xf…

中软国际软件测试培训中心,中软国际准员工培养计划C++开发/软件测试方向开班典礼...

2010年8月31日上午9点半,中软国际准员工培养计划—C开发/软件测试方向开班典礼在无锡ETC隆重举行。开班典礼在热烈的掌声中拉开了序幕。典礼由教务部经理陈晨老师主持,首先她对近20名学员的到来表示欢迎,并对本次学习班顺利开班表示祝贺。中软…