移动端界面设计之尺寸篇(更新)
2017-08-11 15:58
337 查看
以PS工具设计IOS界面。
画布尺寸:
新建750×1334 分辨率72,像素/英寸。常见的字体大小:
24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。字体:
中文用苹方黑,英文用San Francisco,如果安不上也可以用Helvetica代替。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上实时观看效果。标注工具:
马克鳗PxCook 像素大厨
Parker标
一键标注神器-zeplin
界面的图标切图:
用Cutterman选中@2x @3x导出。启动图标:
做1024×1024尺寸,一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。交接给程序:
最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。引导页:
值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1242×2208)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。适配方法3个原则:(不清楚的在网站搜索适配2字)
文字流式控件弹性
图片等比缩放
测试界面:
程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。干货资料:
可以看看下面这几篇文章:
移动端界面设计之尺寸篇(淘宝版)iPhone6 & 6 Plus 视觉设计适配说明
新手福利!超全面的UI设计切图规范
UI适配攻略·教程④一稿配双平台
h5移动端页面设计学习文档
Dribbble 2016十大设计趋势总结
图标设计的三个小原则
新设计趋势来临,解读 iOS 10 设计指南
一份详尽全面的UI设计字体与排版指南
以PS工具设计安卓界面。
画布尺寸:
如果想一稿适配ios,那就新建720×1280 分辨率72,像素/英寸。如果单独设计安卓MD新规范的,那就新建1080×1920 分辨率72,像素/英寸。
720×1280常见的字体大小:
24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。字体:
中文用Noto/思源黑体(是一个字体,叫法不同而已),英文用Roboto。app所用的字体大礼包下载(虎哥整理的)
单位换算
距离单位是DP文字单位是SP
720×1280尺寸的换算关系 1dp=2px,文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿,自己除以2就是dp和sp了。
1080×1920尺寸就是1dp=3px,文字1sp=3px
界面里的小图标常见的尺寸:
24px、32px,48px等,记住4的倍数比较好。注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。
移动端界面设计之尺寸篇(淘宝版)
界面上的间距和元素尺寸:
最新规范MD的做法:8dp原则 栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。
常见一般常用做法:
直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。
720 x 1280 设计稿尺寸:
状态栏高度:50 px
导航栏高度:96 px
标签栏高度:96 px
设计稿实时预览:
安装一个Ps Mirror可以在安卓手机上实时观看效果。标注工具:
马克鳗PxCook 像素大厨
Parker标
一键标注神器-zeplin
标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。
界面的图标切图:
用Cutterman选中下面所示,根据需要选择不同分辨率的导出。界面中重复利用的资源切图需要做成点9图片:
主要是一些按钮,单色或半透明的背景块。图标不用做点9。
启动图标:
做1024×1024尺寸,安卓对图标的样式没有要求,你可以做各种形状都行,一般做方形无圆角的,各家手机厂商的定制系统会自己加圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。
交接给程序:
最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。引导页:
值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。适配方法3个原则:(不清楚的在网站搜索适配2字)
文字流式控件弹性
图片等比缩放
测试界面:
程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。干货资料:
可以看看下面这几篇文章:
安卓1080P界面设计规范解读6个技巧帮你把IOS的UI转换成安卓!
Material Design 安卓5.1L (UI kit包下载!)
天天喊着学UI,知道安卓和iOS的区别吗?
UI设计师不可不知的安卓屏幕知识
最后说句:“对界面上的字号,间距不清楚的,多动手去截图,量一量优秀APP界面,多分析找规律。”
虎哥整理。
2016年12月10日更新。
转载请注明:学UI网 » 移动端界面设计之尺寸篇(更新)
相关文章推荐
- 移动端界面设计之尺寸篇(更新)
- 移动端界面设计——尺寸
- [置顶] 移动端界面设计尺寸规范
- 移动端界面设计之尺寸篇
- 移动端界面设计之尺寸篇
- 移动端app界面设计之尺寸篇
- 移动端界面设计之尺寸篇
- 移动端界面设计之尺寸篇
- 如何使界面在较大的屏幕上居中,并且在设计期可以按期望的界面尺寸进行设计?
- APP界面设计之尺寸介绍
- 移动端产品版本更新数据表的设计
- 【持续更新】界面设计
- Android界面设计适配不同屏幕的尺寸和密度解读
- 2014年移动端界面设计分析
- 美图秀秀美化图片之【边框】界面设计【重大更新】
- 苹果iphone APP界面设计尺寸官方版
- Android界面设计中的尺寸单位介绍
- 【总结】移动应用界面设计的尺寸设置及规范
- android开发 界面设计 图片资源设计 尺寸说明
- 移动端web及app设计尺寸