移动端界面设计之尺寸篇(更新)

分类: UI教程 版权:
1397 0 0 0
2017-12-18 10:42
摘要: 先来看看各种iPhone的尺寸和分辨率,这张图写的很清楚。 设备名称 屏幕尺寸 PPI Asset 竖屏点(point) 竖屏分辨率(px) iPhone X 5.8 in 458 @3x 375 x 812 1125 x 2436 iPhone 8+, 7+, 6s+, 6+ 5.5 in ...

先来看看各种iPhone的尺寸和分辨率,这张图写的很清楚。

chicun


设备名称 屏幕尺寸 PPI Asset 竖屏点(point) 竖屏分辨率(px)
iPhone X 5.8 in 458 @3x 375 x 812 1125 x 2436
iPhone 8+, 7+, 6s+, 6+ 5.5 in 401 @3x 414 x 736 1242 x 2208
iPhone 8, 7, 6s, 6 4.7 in 326 @2x 375 x 667 750 x 1334
iPhone SE, 5, 5S, 5C 4.0 in 326 @2x 320 x 568 640 x 1136
iPhone 4, 4S 3.5 in 326 @2x 320 x 480 640 x 960
iPhone 1, 3G, 3GS 3.5 in 163 @1x 320 x 480 320 x 480
iPad Pro 12.9 12.9 in 264 @2x 1024 x 1366 2048 x 2732
iPad Pro 10.5 10.5 in 264 @2x 834 x 1112 1668 x 2224
iPad Pro, iPad Air 2, Retina iPad 9.7 in 264 @2x 768 x 1024 1536 x 2048
iPad Mini 4, iPad Mini 2 7.9 in 326 @2x 768 x 1024 1536 x 2048
iPad 1, 2 9.7 in 132 @1x 768 x 1024 768 x 1024

ultimate-guide-to-iphone-resolutions

 

iPhone-X-Screen-Demystified

 

iPhoneX-Portrait

 

2-(1) Design-Colors

以PS工具设计IOS界面。

画布尺寸:

新建750×1334  分辨率72,像素/英寸。

 

常见的字体大小:

24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

 

字体:

中文用苹方黑,英文用San Francisco,如果安不上也可以用Helvetica代替。

zitibao

app所用的字体大礼包下载(虎哥整理的)

 

ios开发里单位是pt

750×1334尺寸的换算关系 1pt=2px,也就是说程序员拿到我们的px单位的标注稿,自己除以2就是pt了。

 

界面里的小图标常见的尺寸:

24px、32px,48px等,记住4的倍数比较好。

注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。

 

界面上的间距和元素尺寸:

以偶数为单位,不清楚的可以截图量大公司的APP界面作为参考。

750 x 1334 设计稿尺寸:

状态栏高度:40 px
导航栏高度:88 px
标签栏高度:98 px

 

设计稿实时预览:

安装一个Ps Mirror可以在iphone上实时观看效果。

 

标注工具:

  1. 蓝湖
  2. 马克鳗
  3. PxCook 像素大厨
  4. Parker标
  5. 一键标注神器-zeplin

 

界面的图标切图:

用Cutterman选中@2x @3x导出。

sample1

 

启动图标:

做1024×1024尺寸,一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

Design-IconGrid Design-RoundedCorners

 

交接给程序:

最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

 

引导页:

值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1125×2436、1242×2208)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。


鲜花

握手

雷人

路过

鸡蛋
uitrees

uitrees

这个人很懒什么都没写

0 听众 / 1 收听

VTOPE APP — Exchange of Social Activity Green messenger

uitrees

uitrees

这个人很懒什么都没写

“劳模勋章”之锄头勋章 助人为乐

    (设计树uitrees)打造最新最潮最全的UI资源分享、学习平台,为设计师提供UI设计交流,UI设计教程,UI设计规范,H5设计交流,HTML5设计教程等

    设计树站内所有涉及作品及素材图片由会员上传而来,设计树不拥有此类素材图片的版权。本站所有资源仅供学习与参考,请勿用于商业用途。

设计树 鄂ICP备18002748号-1 uitrees.com © 2016-2018

知道创宇云安全