移动开发需要了解的UI设计知识
下面我列出了自己做项目时遇到的需求，及解决方案
1,安卓各大应用市场图标、闪屏页、应用截图要求如下：
360：图标——圆角半径弧度：70PX，尺寸：512*512PX，图片格式：PNG
截图——支持JPG、PNG格式。截图尺寸要求：480×800，单张图片不能超过3M。请去除截图中的顶部通知栏。
应用宝：小图标－尺寸16×16，大小20K以内，PNG格式
图标－尺寸512*512，大小200K以内，JPG、PNG格式，建议使用直角图标
截图－尺寸推荐480*800像素，单张图片不超过1M，JPG、PNG格式。
百度：图标－尺寸512*512，大小800K以内，PNG格式，图标需为透明背景截图－单张图片不超过2M。
截图推荐480*800像素。JPG、PNG格式。
小米：图标－自动读取包内
截图－尺寸720×1280，JPG、PNG格式。
注意图片中不能存在手机外观素材非Android设备或界面非Android系统，不能存在其他设备品牌标志、名称、商标。
华为：图标——需上传完整正方形图标。尺寸：192*192px，图片格式：PNG（不允许上传JPG）
截图——大小：2MB以内，推荐截图大小为480×800格式：jpg、jpeg、png
2,安卓手机分辨率及横向像素
上图中“1x，1.5x，2x，3x，4x”我们可以理解为相对单位或者倍数关系，我们将mdpi作为一个基础一个参考物，它为1倍的话，hdpi就为1.5倍，下面依次类推，作为设计师更关注的是横向分辨率
横向上来看：
屏幕级别 横向分辨率 屏幕密度（dpi）
mdpi 360px左右 160
hdpi 480px（1.5倍） 240
xhdpi 720px（2倍） 320
xxhdpi 1080px（3倍） 480
xxxhdpi 1440px（4倍） 640
3,移动开发给设计师的规范：
安卓
启动图（App中使用）：
drawable-land-hdpi-screen.png 800*480
drawable-land-ldpi-screen.png 320*240
drawable-land-mdpi-screen.png 480*320
drawable-land-xhdpi-screen.png 1280*720
drawable-land-xxhdpi-screen.png 1920*1080
drawable-port-hdpi-screen.png 480*800
drawable-port-ldpi-screen.png 240*320
drawable-port-mdpi-screen.png 320*480
drawable-port-xhdpi-screen.png 720*1280
drawable-port-xxhdpi-screen.png 1080*1920
应用程序图标（AppIcon要求是圆角有弧度1024*1024的弧度是180px，App中使用）:
drawable-hdpi-icon.png 72*72
drawable-ldpi-icon.png 36*36
drawable-mdpi-icon.png 48*48
drawable-xhdpi-icon.png 96*96
drawable-xxhdpi-icon.png 144*144
drawable-xxxhdpi-icon.png 192*192
vivo市场特殊：
drawable-hdpi-icon-vivo.png 192*192
drawable-xhdpi-icon-vivo.png 256*256
drawable-xxhdpi-icon-vivo.png 384*384
drawable-xxxhdpi-icon-vivo.png 512*512
应用市场美化之后的截图（应用市场使用）：
drawable-port-hdpi-screen.png 480*800
drawable-port-xhdpi-screen.png 720*1280
drawable-port-xxhdpi-screen.png 1080*1920
IOS
启动图（App中使用）
iphone6.png 750*1334
iphone6plus.png 1242*2208
iphoneSE.png 640*1136
iphone4s.png 640*960
iphoneX.png 1125*2436
iphoneXR.png 828*1792
iphoneXSMAX.png 1242*2688
应用程序图标（AppIcon方角，App中使用）:
icon-40.png 40*40
icon-40@2x.png 80*80
icon-40@3x.png 120*120
icon-50.png 50*50
icon-50@2x.png 100*100
icon-60.png 60*60
icon-60@2x.png 120*120
icon-60@3x.png 180*180
icon-72.png 72*72
icon-72@2x.png 144*144
icon-76.png 76*76
icon-76@2x.png 152*152
icon-83.5@2x.png 167*167
icon-1024.png 1024*1024
icon-small.png 29*29
icon-small@2x.png 58*58
icon-small@3x.png 87*87
icon.png 57*57
icon@2x.png 114*114
应用市场美化之后的截图（应用市场使用）：
iphonex.png 1125 *2436
iphone6Plus.png 1242 *2208
4,苹果手机尺寸及分辨率及点
| 手机型号 | 屏幕尺寸 | 屏幕密度 | 开发尺寸 | 像素尺寸 | 倍图 |
| 4/4s | 3.5英寸 | 326ppi | 320*480pt | 640*960px | @2x |
| 5/5s/5c | 4英寸 | 326ppi | 320*568pt | 640*1136px | @2x |
| 6/6s/7/8 | 4.7英寸 | 326ppi | 375*667pt | 750*1334px | @2x |
| 6p/6sp/7p/8p | 5.5英寸 | 401ppi | 414*736pt | 1242*2208px | @3x |
| x/xs | 5.8英寸 | 458ppi | 375*812pt | 1125*2436px | @3x |
| xr | 6.1英寸 | 326ppi |
828*1792px |
||
| xs max | 6..5英寸 | 458ppi | 1242*2688px |
注意：这里手机的尺寸是对角线的尺寸
5，分辨率定义
图像分辨率与显示分辨率
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。
图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义，就是ppi。
6，dpi与ppi区别
首先dpi是dot per inch
每英寸的物理点
ppi是pixel per inch
每英寸的像素点
比如iphone6的ppi计算方式为
(iphone6)ppi=√750平方*1334平方￣/4.7=326ppi
两个参数的区别就在于Dot和Pixel的区别，dot指的是显示器上每一个物理的点，而pixel指的是屏幕分辨率中的最小单位。这两个难道会不一样么？会！当一个像素需要多于一个屏幕上的物理点来显示的时候dot就跟pixel不一样了
比如一些人的电脑屏幕，看上去总是那么傻大傻大的。就是因为他们把分辨率调的太低导致ppi变低了，让画面看上去那么的不协调。ppi变低了，对角线尺寸不变，那么显示像素就要变小，屏幕的物理点不变，这样就会导致一个像素点会占据多个物理点，自然感觉图标之类的都变大了。
7，png与jpg互转（能直接改后缀吗）
不能直接改后缀
文件的后缀是系统用来区别该用什么程序软件打开他的，改后缀后就相当于告诉电脑用另一种程序打开这个文件，如果改后的程序可以打开这个文件，不会有什么影响，如果更改后的程序打不开这个文件那会导致文件表面上不可用，（可以用这个方法隐藏你不想让人看到的文件）系统无法打开他。但是你还原之前的后缀电脑使用原来的程序依然可以打开他，不会对文件造成任何影响。
而专换格式则是更改文件的构造，让他从这种格式变成另外一种格式，电脑不会因此识别不了、打不开他，就这样。
8，PNG压缩图片，像素不变（这种需求是要改变图片的物理大小，所占存储空间变小）
修改ppi，ppi变小，图片会变模糊，这样图片的物理大小会变小
9，网大图片像素变小（需求比如512*512变为36*36）
这种需求ppi不会变，图片的像素大小会变小（发现图片宽和高变小了），但是直接双击打开是不会模糊不清的（因为图片宽和高变小了）
10，网上找的图片png或者jpg，要像素（宽和高）变大
比如转svg
使用Adobe Illustrator编辑后导出SVG
首先，只要jpg或者png图片没有太小，比如宽高都大于200px，并且没有阴影等乱七八糟的效果，我认为用Illustrator就可以做出比较好的矢量SVG。操作流程如下：
（1） 用Illustrator打开JPG/PNG图片。
（2）点击图片，进入选择状态，上面的工具栏点击“图像描摹”右侧的下拉箭头，选择“高保真度图片”。
这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题，就是仔细观察的话，这个图是有白色背景的。如果你恰好需要这个背景那太好了，否则我们必须把这个背景弄掉。
（3）打开描摹面板。两种方法，第一种，点击工具栏上的按钮。第二种，右上角切换工作台模式。二选一，如图：
（4）展开高级，方法选择第一个“临接（创建木刻路径）”，选项勾选“忽略白色”，看图就明白了：
但注意转换为svg后有可能出现问题，需要修正
11，图片的像素改变了，如何使图片不变形
这个应该需要在ai中修改下，需要重新做下
12,如何导出多个尺寸的图标
ai中选择文件导出所选项目项目即可
13，导出svg，转成iconfont
登录阿里巴巴iconfont，上传svg图片即可一键转换
14，图片圆弧，透明底（网上有在线转）
推荐网址 http://www.atool.org/roundcorner.php
15，安卓中sp，dp，px区别
dp和px的关系：px = dp * (dpi / 160)
Density-independent pixel (dp)独立像素密度。标准是160dip.即1dp对应1个pixel，，屏幕密度越大，1dp对应 的像素点越多。 上面的公式中有个dpi，dpi为DPI是Dots Per Inch（每英寸所打印的点数），也就是当设备的dpi为160的时候1px=1dp；
dp=px*160/dpi
举例：比如尺寸不变，不同分辨率上都用5px，在160dpi时控件长度采用5px，然后480dpi上控件长度也用5px，会发现480dpi上的5px变短了，因为480dpi上每英寸像素点多了，5px所占的英寸自然小了，但是采用dp会发现控件的视觉大小没变因为控件所占的英寸没变。
比如：我将一个控件设置长度为1dp,那么在160dpi上该控件长度为1px，在240dpi的屏幕上该控件的长度为1*240/160=1.5个像素点。（公式px=dp*(dpi/160)）
sp和dp的关系 :
dp只跟屏幕的像素密度有关；
sp和dp很类似但唯一的区别是，Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等等），当文字尺寸是“正常”时1sp=1dp=0.00625英寸，而当文字尺寸是“大”或“超大”时，1sp>1dp=0.00625英寸。类似我们在windows里调整字体尺寸以后的效果——窗口大小不变，只有文字大小改变。
16，设计师在标注图上标的字体px转换成ios和android开发中的大小
对于android
1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。 以mdpi为标准，这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=1sp=2px；在hdpi情况下，1dp=1sp=1.5px。其他类推。
17，设计师在标注图上标的图片px转换成ios和android开发中的大小
设计师一般标注图都是用的iphone6，而iphone6的像素是750*1334，对应于开发的点是375*667，比如标注图片是67*67，那么我们在xib上的大小是33.5*33.5,这时候我们需要的图片是@2x为67*67，@3x为100.5*100.5。
原因：
- 在同样一个尺寸的屏幕下由于使用的屏幕不一样(retina和非retina),所以造成的屏幕分辨率会不同.也就是说,同样是30*30的像素,在3.5 inch大小的屏幕上,如果是非retina显示会大一些,retina屏幕显示会小一些。
- 在开发中使用的是点.(比如 30 * 30 ,不是表示30像素,而是表示30点,这样的话iOS系统会自动把点转换为对应的像素)
- 非retina屏幕1个点表示1像素
- retian屏幕1个点表示2像素
- iPhone6 Plus 下1个点表示3像素
- 因为程序中是点,iOS系统会自动把点转换为不同的像素去找图片,所以图片对应的也要准备多份不同的图片,
- @2X:视网膜屏幕,在原来点坐标的大小上乘以2
- @3X：在原来的坐标的大小上乘以3
对应于安卓中xhdpi为67*67
18，用ps修改png格式图标的颜色
点击打开链接
19，使用pixelstick量像素大小
pixelstick在Mac上是需要购买的
使用方式：如下图
最左边的红色圈圈是固定点，右边黄色圈圈里面可以左右拉伸，还可以有角度的变换，，然后看右边黑色圈圈里面的值512px，说明白色小块的宽度为512px
移动开发需要了解的UI设计知识相关推荐
- java前台界面设计_前端程序员要懂的 UI 设计知识
前端程序员要懂的 UI 设计知识 疯狂的技术宅 前端先锋 翻译:疯狂的技术宅 作者:Per Harald Borgen 来源:freecodecamp 正文共:1401 字 预计阅读时间:5分钟 作为 ...
- Android实战开发--小慕笔记UI设计（Fragment布局的使用）
目录 前言 一.需求 二.主要步骤 1.Fragment容器操作 2.封装删除工具类 三.关键代码 四.效果展示 前言 本项目为安卓基础实战开发,利用Fragment进行小慕笔记UI设计,学习之前需要 ...
- 前端程序员必须要懂的 UI 设计知识
作者:Per Harald Borgen 翻译:疯狂的技术宅 原文:https://www.freecodecamp.org/news/learn-ui-design-in-5-minutes-tut ...
- 开发手机APP做UI设计，这5个UI错误会置你的APP于死地！
作为一名常州开发APP公司的UI设计师,我们需要一些规范来约束自己,让工作变得更有条理,更具专业性.在完成APP开发的过程中会有很多的细节需要注意,今天就来为大家讲5个常犯的主要错误以及解决的办法.& ...
- Windows phone 应用开发[3]-UI 设计
本篇来谈谈Windows phone UI设计.这个有点让我痛苦的话题. 其实谈到移动平台的设计.原来没有实际接触Windows phone 产品开发工作时对UI设计这个概念不是特别强烈. 并没有感到 ...
- 麓言信息学UI设计必须掌握的知识体系和职业规划
当我们步入一个新行业的时候,对这个行业即使充满了期待,又是充满了少许的一丢丢恐惧.不要恐惧,今天我们一起来梳理下,作为一名小白,怎样掌握体系的UI设计知识和准确的职业方向? 经常听到很多人有这 ...
- 【UI设计基础知识】UI界面设计怎么划分
UI界面设计是什么?我们来解释一下.对于用户的界面,我们想一下,我们日常生活中接触到的哪些是用户界面?我们的手机界面.电脑界面.iPad界面.还有车载系统界面.VR界面等.将这些界面设计划分为三类:P ...
- 如何进入UI设计行业 学好设计的关键是什么
如何进入UI设计行业?学好设计的关键是什么?如今学习UI设计的人越来越多,互联网的迅速发展下,企业越来越重视UI设计人员,市场对于人才的需求量也是不断递增.那么想进入这一行业,现在就要开始学习,想学好 ...
- 优漫动游UI设计适合什么样的人学习？
随着信息化时代的发展,其实大部分企业已经开始流行网站和小程序的开发,在这样的情况下,选择UI设计培训,除了可以有不错的职业发展前景外,你也能在互联网的大环境下收获可观的薪资. 其实没有适不 ...
最新文章
- sql server 根据身份证号计算出生日期和年龄的存储过程
- db4o Tutorial 中文翻译（十一）
- android 6.0 logcat机制（三）logd处理请求log
- iOS之性能优化·优化App的启动速度
- Sklearn参数详解—GBDT
- 认知无线电matlab代码详解,认知无线电频谱感知之功率检测matlab代码.docx
- 前端学习（1874）vue之电商管理系统电商系统之修改element-ui组件的按需导入
- 10分钟带你逆袭kafka之路
- python3 音乐播放器_Python3——MP3播放器
- Linq学习（零）-错误汇总
- java 改文件名的例子
- 【react】---函数化编程的理解，柯里化函数及返柯里化函数的理解...
- php 限定字符长度,PHP中字符串的最大长度是多少？
- pc用c语言控制三菱plc,上位PC机控制三菱PLC
- 删除文件夹需要管理员权限的解决方法
- NodeJS必知基础知识(非巨详细)
- java实现十进制数转换成二进制数
- Spring Boot入门(24)：Spring Boot事务 | 超级详细，建议收藏
- 余弦相似度的计算方法
- Android Zxing3.3.2扫描、生成、解析二维码，以及近距离无法识别的问题