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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 2022年 2月19运维面试题

    2022年 2月19运维面试题 

    2022年5月30日
    27
  • zigbee组网的设计_物联网组网技术

    zigbee组网的设计_物联网组网技术目前,针对一定区域内信息和设备进行监测和控制多采用有线方式通信,网络在布线和维护过程中由于线路腐蚀和损坏造成网络中断,给正常生产工作带来影响,同时也增加了人力资源成本比重。基于此,从节省成本和网络稳定性考虑,给出一种基于ZigBee技术的多节点设备无线自组网设计方案。   基于IEEE802.15.4协议的ZigBee技术是一种新兴的短距离无线通信技术,具有功耗低、成本低

    2022年10月8日
    0
  • tomcat详细安装及配置教程_tomcat安装及配置

    tomcat详细安装及配置教程_tomcat安装及配置1、进入官网www.apache.org,找到Projects中的tomcat2、Download下边的版本,这里最新的是10.0x,但是一般不选最新版本,我选择的是8.5x,所以点击Download下边的Tomcat8这里我选择了64位的Windows版本,根据自己的需求下载。(建议:最好别放到C盘)下载之后解压二、配置环境1、系统变量添加:变量名:CATALINA_HOME变量值:就是你刚刚解压的那个文件夹路径2、在path中添加%CATAL…

    2022年9月19日
    0
  • css怎么实现背景图片自适应窗口大小_html5背景图片自适应

    css怎么实现背景图片自适应窗口大小_html5背景图片自适应本篇文章给大家介绍html背景图片自适应窗口大小的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。background-size:cover会把图片拉伸至足够大,但是背景图片有些部分可能显示不全效果大窗口小窗口background-size:contain把图片拉伸至最大,完全显示图片大窗口小窗口推荐学习:html视频教程…

    2022年9月28日
    0
  • 中兴F450光猫设置桥接_电信光猫改桥接后上不了网络

    中兴F450光猫设置桥接_电信光猫改桥接后上不了网络前几天突然想搞外网访问,但是电信这款光猫DMZ不能用让我很愁,后来经过一番了解可以让光猫只负责光数转换,剩下的事情交给路由,但是要把光猫设置成桥接模式这个光猫比较特殊不需要进入超级管理员只需要下面这个链接:http://192.168.1.1:8080/bridge_route.gch会出现这个页面,点击桥接复原就行,我是已经点过了,所以置灰了。…

    2022年10月8日
    0
  • Linux下安装mysql-5.7.30详细步骤[通俗易懂]

    Linux下安装mysql-5.7.30详细步骤[通俗易懂]前言下面记录了我在Linux环境下安装Mysql的完整过程,实操记录,只为让更多人少踩坑,本次安装版本为:mysql-5.7.30,64位操作系统官网下载地址:mysql-5.7.30-el7-x86_64.tar.gz1、安装前准备检测系统是否自带mysql[root@localhost/]#rpm-qa|grepmysql如果是,则使用下面命令进行删除:[root@localhost/]#rpm-e–nodeps‘上一步查找的名称’删除成功后,查询所

    2022年5月8日
    121

发表回复

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

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