小白需要掌握的UI设计尺寸有哪些？_UI/UE设计

11条回答

yjh

2楼 · 2021-08-18 09:51

对于新手来说，APP的设计师尺寸是一定要弄明白的。

这里就不讲什么深奥的道理了，网络有很多专业文章。而且你其实不应该到知乎来提问，UI设计师常去的网站都有讲解，可以自己发掘。

这里就先给你个参考答案吧。拿iOS举例子，参考机型是iphone8。

PS属于位图软件(当然也有适量的东西)。建议APP画布用750px-1334px，即两倍图。

AI属于矢量软件。理论上矢量是没有单位的，你可以扩大到N倍来使用。可以使用375-667，一倍图。当然也可以使用750-1334，二倍图。

如果你用的是Mac的话，首选Sketch，也是矢量软件。画布默认是375-667。

其实现在的软件都有默认的设备尺寸，直接用软件预设的即可。

分辨率混乱的问题，设计师一定要弄清楚视网膜屏和弹性页面适配这两点。

我是大脸猫

3楼 · 2021-08-18 11:39

iPhone界面尺寸

设备	分辨率	PPI	状态栏高度	导航栏高度	标签栏高度
iPhone6 plus设计版	1242×2208 px	401PPI	60px	132px	146px
iPhone6 plus放大版	1125×2001 px	401PPI	54px	132px	146px
iPhone6 plus物理版	1080×1920 px	401PPI	54px	132px	146px
iPhone6	750×1334 px	326PPI	40px	88px	98px
iPhone5 - 5C - 5S	640×1136 px	326PPI	40px	88px	98px
iPhone4 - 4S	640×960 px	326PPI	40px	88px	98px
iPhone & iPod Touch第一代、第二代、第三代	320×480 px	163PPI	20px	44px	49px

iPhone图标尺寸：

设备	App Store	程序应用	主屏幕	Spotlight搜索	标签栏	工具栏和导航栏
iPhone6 Plus (@3×)	1024×1024 px	180×180 px	114×114 px	87×87 px	75×75 px	66×66 px
iPhone6 (@2×)	1024×1024 px	120×120 px	114×114 px	58×58 px	75×75 px	44×44 px
iPhone5 - 5C - 5S (@2×)	1024×1024 px	120×120 px	114×114 px	58×58 px	75×75 px	44×44 px
iPhone4 - 4S (@2×)	1024×1024 px	120×120 px	114×114 px	58×58 px	75×75 px	44×44 px
iPhone & iPod Touch第一代、第二代、第三代	1024×1024 px	120×120 px	57×57 px	29×29 px	38×38 px	30×30 px

iPad的设计尺寸

设备	尺寸	分辨率	状态栏高度	导航栏高度	标签栏高度
iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2	2048×1536 px	264PPI	40px	88px	98px
iPad 1 - 2	1024×768 px	132PPI	20px	44px	49px
iPad Mini	1024×768 px	163PPI	20px	44px	49px

iPad图标尺寸：

设备	App Store	程序应用	主屏幕	Spotlight搜索	标签栏	工具栏和导航栏
iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2	1024×1024 px	180×180 px	144×144 px	100×100 px	50×50 px	44×44 px
iPad 1 - 2	1024×1024 px	90×90 px	72×72 px	50×50 px	25×25 px	22×22 px
iPad Mini	1024×1024 px	90×90 px	72×72 px	50×50 px	25×25 px	22×22 px

Android SDK模拟机的尺寸

屏幕大小	低密度（120）	中等密度（160）	高密度（240）	超高密度（320）
小屏幕	QVGA（240×320）		480×640
普通屏幕	WQVGA400（240×400） WQVGA432（240×432）	HVGA（320×480）	WVGA800（480×800） WVGA854（480×854） 600×1024	640×960
大屏幕	WVGA800 （480×800） WVGA854 （480×854）	WVGA800 （480×800） WVGA854 （480×854） 600x1024
超大屏幕	1024×600	1024×768 1280×768WXGA（1280×800）	1536×1152 1920×1152 1920×1200	2048×1536 2560×1600

Android的图标尺寸

屏幕大小	启动图标	操作栏图标	上下文图标	系统通知图标(白色)	最细笔画
320×480 px	48×48 px	32×32 px	16×16 px	24×24 px	不小于2 px
480×800px 480×854px 540×960px	72×72 px	48×48 px	24×24 px	36×36 px	不小于3 px
720×1280 px	48×48 dp	32×32 dp	16×16 dp	24×24 dp	不小于2 dp
1080×1920 px	144×144 px	96×96 px	48×48 px	72×72 px	不小于6 px

Android安卓系统dp/sp/px换算表

名称	分辨率	比率 rate (针对320px)	比率 rate (针对640px)	比率 rate (针对750px)
idpi	240×320	0.75	0.375	0.32
mdpi	320×480	1	0.5	0.4267
hdpi	480×800	1.5	0.75	0.64
xhdpi	720×1280	2.25	1.125	1.042
xxhdpi	1080×1920	3.375	1.6875	1.5

主流Android手机分辨率和尺寸

设备	分辨率	尺寸	设备	分辨率	尺寸
魅族MX2	4.4英寸	800×1280 px	魅族MX3	5.1英寸	1080×1280 px
魅族MX4	5.36英寸	1152×1920 px	魅族MX4 Pro未上市	5.5英寸	1536×2560 px
三星GALAXY Note 4	5.7英寸	1440×2560 px	三星GALAXY Note 3	5.7英寸	1080×1920 px
三星GALAXY S5	5.1英寸	1080×1920 px	三星GALAXY Note II	5.5英寸	720×1280 px
索尼Xperia Z3	5.2英寸	1080×1920 px	索尼XL39h	6.44英寸	1080×1920 px
HTC Desire 820	5.5英寸	720×1280 px	HTC One M8	4.7英寸	1080×1920 px
OPPO Find 7	5.5英寸	1440×2560 px	OPPO N1	5.9英寸	1080×1920 px
OPPO R3	5英寸	720×1280 px	OPPO N1 Mini	5英寸	720×1280 px
小米M4	5英寸	1080×1920 px	小米红米Note	5.5英寸	720×1280 px
小米M3	5英寸	1080×1920 px	小米红米1S	4.7英寸	720×1280 px
小米M3S未上市	5英寸	1080×1920 px	小米M2S	4.3英寸	720×1280 px
华为荣耀6	5英寸	1080×1920 px	锤子T1	4.95英寸	1080×1920 px
LG G3	5.5英寸	1440×2560 px	OnePlus One	5.5英寸	1080×1920 px

主流浏览器的界面参数与份额

浏览器	状态栏	菜单栏	滚动条	市场份额(国内)
Chrome 浏览器	22 px（浮动出现）	60 px	15 px	8%
火狐浏览器	20 px	132 px	15 px	1%
IE浏览器	24 px	120 px	15 px	35%
360 浏览器	24 px	140 px	15 px	28%
遨游浏览器	24 px	147 px	15 px	1%
搜狗浏览器	25 px	163 px	15 px	5%

系统分辨率统计

分辨率	占有率	分辨率	占有率
1366×768	15%	1440×900	13%
1920×1080	11%	1600×900	5%
1280×800	4%	1280×1024	3%
1680×1050	2.8%	320×480	2.4%
480×800	2%	1280×768	1%

是你的小甜心呀

4楼 · 2021-08-18 14:16

你可以保存一下

香蕉牛油果酸奶

5楼 · 2021-08-19 09:51

屏幕分辨率一般是3个尺寸iPhone4：640*960ptiphone5：640*1136ptipad：768*1024pt
icon一般要以下几个规格：
Icon.png–57×57iPhone应用图标
Icon@2x.png–114×114iPhoneRetina显示屏应用图标
Icon-72.png–72×72iPad应用图标
Icon-72@2x.png-144×144iPadRetina显示屏应用图标
Icon-Small.png–29×29iPhone系统设置和搜索结果图标
Icon-Small@2x.png–58×58iPhoneRetina显示屏系统设置和搜索结果图标
Icon-Small-50.png–50×50iPad系统设置和搜索结果图标
Icon-Small-50@2x.png–100×100iPadRetina显示屏系统设置和搜索结果图标

一个Ai

6楼 · 2021-08-19 10:43

1629340991(1).jpg 1

20200921文 - 做更棒的自己!

7楼 · 2021-08-19 12:14

1、技术基础

如果说程序员一天中大部分时间都在敲代码，那么设计师的时间都留给了Photoshop、Axure、Adobe Illustrator，涂涂修修确实是常态，而这里，也是“美工”称呼的发源地。娴熟的技法，是更好展现设计作品的必备条件，作为UI设计师，也应当熟练掌握这些常用软件。稍低一点的要求，是至少能精通其中一款软件，各种操作都已经形成自然反应，其他软件也能通个七八分。

2、画图能力

有人以为，设计师只要去图库网站找一些素材，借助工具进行修饰即可，其实这只能锻炼你的借鉴能力，当你的技法娴熟到一定程度，就可以尝试临摹。通过临摹，一则用来强化技法层面的能力，二来也能提升初学者的创新能力。临摹的内容，可以有两方面选择：一种是系统自带的图标，既能帮助初学者了解平台设计规则，又能在临摹中逐渐巩固常用软件的技术。另一种则是行业牛人的设计作品，捉摸他们的设计风格、思想和细节，都能加深对设计的认识。

3、审美能力

设计师自身的审美意识非常重要。至于审美意识要如何培养、提高。日积月累地多浏览、多学习、多思考、多练习，就是逐渐提升审美能力的最佳途径。

4、设计思考能力

设计和美工的区别就是，设计需要思考。经常会有一些应届的毕业生拿着临摹的作品去面试，虽然做的很漂亮，也是自己动手做的，但是我们招的是设计而不是美工。临摹只会锻炼你的技能而不会锻炼你的思考能力，对你的设计提高没有一点帮助。那么应届毕业生没有作品应该怎么办呢?我的建议就是“再设计”。再设计不是临摹，是带着思考去做的，每一个排版每一个用色都是经过自己深思熟虑的。

5、设计表现能力

作为 UI 设计师，很重要的一点就是视觉表现力。创意是一个好的设计的起点。好的创意能够引人在情感上产生强烈波动，或震惊，或感动，或悲伤共鸣，创意考验一位设计师的视野、脑洞，更考验一位设计师对人情感的掌握。

6、沟通理解能力

大多数设计师不是单打独斗，而是和一个团队一起工作，你需要保持良好的沟通能力。比如经常改图的问题。不是别人说1你就做1,有可能你按照要求做了1，别人依然不说你好。比如产品要你换样式，你要弄清楚原因，是不符合当前的风格，又或者产品想突出什么，弄清楚意图才去做设计，事半功倍。且给对方留下喜欢思考，乐于沟通的好印象，这样的员工到哪里都受欢迎。

三岁奶猫

8楼 · 2021-08-19 15:08

1、像素密度-PPI像素密度是指显示屏幕每英寸的长度上排列的像素点数量，PPI（Pixels per inch）越高代表屏幕显示效果越精细，Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

2、计量单位

ios和Android平台都定义了各自的像素计量单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

tiu

9楼 · 2021-08-20 14:01

名片(制作软件为矢量软件，如AI)

设计尺寸(标准尺寸):90*54mm、90*50mm、90*45mm

出血:2mm

横版:90*55mm(方角)、85*54mm(圆角)

竖版:50*90mm(方角)、54*85mm(圆角)

颜色模式:CMYK

分辨率:》=300ppi 像素/英寸

最小字体:6pt，描边不能小于0.75pt

文字字体建议不超过两种

展架、易拉宝

展架:60*160cm、80*180cm

易拉宝:80*200cm、90*200cm、100*200cm、120*200cm、150*200cm

1 2 下一页