app设计ui规范2020_ios系统ui设计规范

app设计ui规范2020_ios系统ui设计规范1.设计稿与切片稿a.尺寸设计稿:iPhone6750*1334【2倍】切图稿:iPhone62208*1242【3倍】Android1920*1080设计稿选择750*1334px的原因:IOS:向上和向下适配的时候界面调整的幅度最小,最方便适配Android:设计时只需做最小的设计调整,提升设计效率b.切图IOS切图——3份:………

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1.设计与切图

设计 PhotoShop Sketch / XD
设计稿 750×1624 px 375×812 pt
iPhone切图稿 1284×2778 px 428×926 pt
Android切图稿 1440×2560 px 360×640 dp
切图 Asset
iOS 3倍(name@3x.png)、2倍(name@2x.png)、1倍(name.png)
Android mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi

2.字体

字体 英文 中文
iOS 10+ SF UI Text (小于19pt)、SF UI Display(大于20pt) 苹方
iOS 9 Helvetica Neue 冬青黑
Android Roboto 思源黑体 / Noto

3.尺寸

iPhone 分辨率 ppi 状态栏 导航栏 主页指示器 标签栏 Asset
iPhone 12/13 Pro Max 1284×2778 px 428×926 pt 458 ppi 132px 132px 102 px 147px @3x
iPhone 12/13、12/13 Pro 1170×2532 px 390×844 pt 460 ppi 132px 132px 102 px 147px @3x
iPhone 12/13 mini 1125×2436 px 375×812 pt 476 ppi 132px 132px 102 px 147px @3x
iPhone XS Max、11 Pro Max 1242×2688 px 414×896 pt 458 ppi 132px 132px 102 px 147px @3x
iPhone X、XS、11 Pro 1125×2436 px 375×812 pt 458 ppi 132px 132px 102 px 147px @3x
iPhone XR、11 828×1792 px 414×896 pt 326 ppi 88px 88px 68 px 98px @2x
iPhone 6P、6SP、7P、8P 1242×2208 px 414×736 pt 401 ppi 60px 132px 147px @3x
iPhone 6、6S、7、8 750×1334 px 375×667 pt 326 ppi 40px 88px 98px @2x
iPhone 5、5C、5S 640×1136 px 320×568 pt 326 ppi 40px 88px 98px @2x
iPhone 4、4S 640×960 px 320×480 pt 326 ppi 40px 88px 98px @2x
iPhone、iPod Touch 1、2、3 320×480 px 320×480 pt 163 ppi 20px 44px 49px @1x
Android 分辨率 启动图标 操作栏图标 上下文图标 系统通知图标 像素比(1dp)
mdpi (160dpi) 360×640 px 48×48 px 32×32 px 16×16 px 24×24 px 1 px
hdpi (240dpi) 540×960 px 72×72 px 48×48 px 24×24 px 36×36 px 1.5 px
xhdpi (320dpi) 720×1280 px 96×96 px 64×64 px 32×32 px 48×48 px 2 px
xxhdpi (480dpi) 1080×1920 px 144×144 px 96×96 px 48×48 px 72×72 px 3 px
xxxhdpi (640dpi) 1440×2560 px 192 x 192 px 128×128 px 64×64 px 96×96 px 4 px

4.更多资料

设计指南

1、 中文版————Material Design 指南
2、 官方英文版——Material Design
3、 中文版————iOS 12人机界面设计指南
4、 官方英文版——Human Interface Guidelines

设计资源

1、 Apple官方设计资源——Sketch、PS、XD的设计模版

切图规范

1、 iOS/Android 切图规范
2、 Android 切图规范
3、 切图文件命名规范

设计规范

1、UI设计规范整理汇总———界面尺寸、控件间距、版式设计、文字设计、设计适配、标注、切图(2018.06)

2、 iOS / Android设计规范——优设网:字体、图标、分辨率、配色、UI元素尺寸 (2017.09)


参考文章:
1、http://www.shui-mai.com/2018zuixiniosduanjiemianuishejiguifanzhengli/
2、https://blog.csdn.net/xuaner1996/article/details/79091260

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/170363.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • idea打包详解_vue打包后图片不显示

    idea打包详解_vue打包后图片不显示1.点击File->ProjectStructure2.选择打包类型3.指定jar包运行的mainclass,并指定生META-INF文件的位置(一般放在resource目录下)4.配置依赖包的存放目录:鼠标右击<outputroot>创建libs文件夹,并将依赖包拖入libs文件夹(注:如果更改了依赖包的位置,classpath中的内容必须做出对应的修改)5.检查各项配置无误选择ok:框选位置依次表示为jar包名;jar输出位置;指定的编译文件,ma

    2022年10月3日
    2
  • Redis-GEO

    Redis-GEO

    2021年11月3日
    48
  • Win7、Win10中Protel99se不能加载库文件解决方法「建议收藏」

    Win7、Win10中Protel99se不能加载库文件解决方法「建议收藏」Win7以后系统中Protel99se不能加载库文件解决方法在win7下安装Protel99se会出现无法添加原理图库,元件库的情况。如图,提示“filenotrecognized”。方法二:利用原理图FindComponent功能:首先,添加原理图库,在**.sch文件中点击“Find”(下图左)在“Path”中找到存放设计的文件夹,点击“Findnow”(下图右)再点击“close”即可;2)PCB库的添加如果在C:\Windows下找不到Advpcb

    2022年5月29日
    93
  • ireport使用教程_layout怎么导入图片

    ireport使用教程_layout怎么导入图片ireport插入图片1.在模板上拖一个image组件,设置它的image Expression为变量$P{logo},如图示,属性下面的is lazy勾上。  不然有可能最后页面渲染出来的image的src为nullimage_0_0_0。2.给变量logo的值。  StringbasePath=request.getScheme()+”://”+requ

    2022年9月10日
    3
  • 史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)

    史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无~中招了咩~,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文

    2022年6月14日
    33
  • 不是单组分组函数

    不是单组分组函数问题:一:SELECT tablespace_name, SUM(bytes) freeFROM dba_free_space不是单组分组函数原因: 1、如果程序中使用了分组函数,则有两种情况可以使用:程序中存在group by,并指定了分组条件,这样可以将分组条件一起查询出来改为:  SELECT tablespace_name, SUM(bytes) freeFROM dba_free_spa…

    2022年6月30日
    28

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号