UI设计稿——iPhone的一稿适配

最新推荐文章于 2022-08-24 17:14:46 发布
最新推荐文章于 2022-08-24 17:14:46 发布
阅读量1.7k 收藏 3
点赞数 4
分类专栏： UI设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43324273/article/details/103847819
版权

文章目录

一、iPhone的发展史：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、市场上屏幕分辨率占比额度

在这里插入图片描述

三、iOS和Android的常见尺寸

在这里插入图片描述

四、iPhone4和iPhone5的适配

iPhone4 屏幕分辨率640 * 960
iPhone5 屏幕分辨率640 * 1136
（宽度一样，只需要引导页单独设计，然后切二倍图，其他资源公用）

iPhone4,5的引导页命名规范
在这里插入图片描述

五、iPhone6、7、8与iPhone5的适配

iPhone6/7/8 屏幕分辨率750 * 1334
iPhone5 屏幕分辨率640 * 1136
绝对值标准法，只要边距一样就适配（切图公用750 * 1334的二倍图）

类图：
在这里插入图片描述

六、iPhone6/7/8和iPhone6p/7p/8p的适配

iPhone6/7/8 屏幕分辨率750 * 1334
↓乘以1.5
iPhone6p/7p/8p 屏幕分辨率1242 * 2208
以750 * 1334为设计稿切二倍图给iPhone6/7/8
切3倍图给6p/7p/8p

七、iPhone6p与iPhonex适配

在这里插入图片描述

八、Android的适配

在这里插入图片描述
以750 * 1334为基础
把750图像大小改为720，切二倍适配xhdpi 720 * 1280，切三倍适配xxhdip 1080 * 1920，切四倍图给xxxhdip 1440*2560

旧爱学长
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UI ： 2022年iOS/Android UI设计规范（1）
Siimple的博客
03-27 6万+
1.设计稿与切片稿 a.尺寸 设计稿：iPhone6 750*1334 【2倍】 切图稿：iPhone6 2208*1242【3倍】 Android 1920*1080 设计稿选择750*1334 px的原因： IOS：向上和向下适配的时候界面调整的幅度最小，最方便适配 Android：设计时只需做最小的设计调整，提升设计效率 b.切图 IOS切图——3份： .........
react ui框架 移动端_移动端UI设计规范整理汇总
weixin_39628864的博客
12-03 1351
本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图片设计比例建立统一风格的图标APP版式设计规范界面文字设计规范设计适配切图规范设计稿标注一、界面设计尺寸及栏高度目前主流的 iOS 设备主要有 iPhone SE(4英寸)、iPho...
APP适配IOS8，iPhone6和Plus截图简要说明，有iP6截图下载供研究(原创)
万花筒 邪灵噶 的博客
11-18 6392
有幸在9月25日拿到了iP6和iP6 Plus的真机，恰好又要做适配APP的工作（从iphone5上适配到iphone6和ip6 plus上），所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配。同时在网上也没找到相关的真机对比截图说明什么的，又有朋友问我要IP6和PLUS的真机截图回去自己研究，既然这样，那么干嘛不利用自己已有的资源，让更多的设计师受益呢？所以那就说点什么吧，抛砖引
UI稿切图
yzpbright的博客
03-31 1184
iPhone 6 Plus 采用标准的 1920×1080分辨率屏幕。 iPhone7的分辨率是1334x750像素。 iOS 11支持2436 × 1125 iPhone屏幕。
一份设计稿可以适配IOS和Android两个平台？
UrasakiNakajima的博客
06-07 1349
在工作中，公司为了节省开支，很多互联网的小公司别说是设计部门了，就是连设计组都没有，只有一个搞设计的来撑门面。不仅要做两个移动端平台的设计，还要做网页设计，同时，还要兼顾运营和平面设计，常常忙得是狗模狗样，加班加到吐血。 所谓，上有逼迫，下有对策，下里面就来科普一个偷懒的小妙招。 对于移动端平台，其实，我们只需要输出一份设计稿就够了。至于为什么呢？我是打死也不会告诉你，是因为IOS 端的750*1334 和 Android 端的720*1280（xhpdi）超级相似性决定的。 讲真...
如何用iphone6的设计稿适配iphonex和iphone4
weixin_33881140的博客
04-27 1695
原理分析 巧用padding 巧用百分比 利用这2个小技巧，可以让你在移动端布局更加轻松。 例子一 <div class="parent"> <div class="child"></div> </div> 复制代码 .parent { position: absolute; wi...
UI界面设计——界面设计不存在美工
03-03
人类社会逐步向非物质社会迈进，互联网信息产业已经走入我们的生活。...本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴，是一个科学的设计过程，理性的商业运作模式。而不是单纯的美术描
设计社交app uplabs ui 设计概念稿 .xd素材下载
04-20
在这个主题中，“设计社交app uplabs ui 设计概念稿 .xd素材下载”提供了设计师们一个宝贵的资源，它包含了一套由Uplabs创建的概念设计稿，使用Adobe XD这个工具进行设计。以下是对这一设计概念稿的详细分析和相关...
UI设计新模式——基于PSD主题库的设计方法
03-02
随着社会的进步，生活水平的不断提高，人们对生活质量和感官感受有了更高层次的要求。体现在IT领域中我们可以发现人们更喜爱用户体验良好，视觉效果优秀的软件产品...优秀的UI设计效果主要依赖于优秀的UI设计师，而优秀
iphone计算机适配,iPhone UI界面尺寸如何一稿适配
weixin_39653764的博客
07-27 372
为什么出现适配？主要是更新换代的硬件屏幕分辨率不断提升，因此设计界面向上适配、向下兼容。在开始适配话题前，先铺垫几个单位和换算：分辨率(图像分辨率ppi、设备分辨率)、像素px、磅pt、倍率。一、单位1.分辨率可以从图像分辨率与显示分辨率两个方向来分类：图像分辨率ppi，则是单位英寸中所包含的像素点数，常用表达式：水平px × 垂直px显示分辨率，包括网屏分辨率lpi、设备分辨率dpi、角分辨率p...
最新的iPhone 各种机型尺寸信息列表（含iPhone 7/8、iPhoneX、iPhone XR、iPhone XS Max）
热门推荐
jifaliwo123的博客
02-06 6万+
1.iPhone 各种机型尺寸信息列表入下表： 机型 尺寸 逻辑缩放因子（UIKit Scale factor） 实际缩放因子（Native Scale factor） 屏幕宽高 屏幕分辨率 3GS 3.5寸 1.0 1.0 320x480 320x480 4(S) 3.5寸 2.0 2.0 32...
iPhone X 设计适配指南 & iOS 11 新特性 - 知乎专栏
10-20
iPhone X 设计适配指南 & iOS 11 新特性,一边文章精准剖析iPhone X适配
ios设计尺寸规范_iPhone6界面设计尺寸规范大全
weixin_39739170的博客
11-13 864
目前，很多APP设计师的APP Ui设计稿是先做iPhone6的，不仅是iPhone6界面视觉设计尺寸规范，也是iPhone6界面原型设计尺寸规范。 所以，ios系统平台上的APP交互设计稿的尺寸，就按照iPhone6的尺寸来做。第一步：PS文档的建立。尺寸大小：750*1334 ...
ios设计规范-iPhone6、7、8-750*1334设计尺寸
baimei007的博客
05-07 4623
【iOS设计】一款APP从设计稿到切图过程概述
freeWayWalker的专栏
09-29 1万+
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程，相当于工作流程的介绍。这里写的不是一种规范，只是一种工作方法，加上技术的更新是非常快的，大家在具体工作中，一定要灵活运用。这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱。1Part 1 项目立项文件结构项目名称v1.0 -> 01_源文件psd 02_效果图jpg
html 苹果6尺寸,iPhone6界面设计尺寸规范大全【含原型设计规范】
weixin_39854681的博客
06-20 1200
目前，很多APP设计师的APP Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。当然下面的10个方面的不仅是iPhone6界面视觉设计尺寸规范，也是iPhone6界面原型设计尺寸规范。值得APP设计师和APP产品经理好好的阅读。所以，ios系统平台上的...
iPhone 6 / 6 Plus 设计·适配方案
yongyinmg的专栏
11-23 5万+
from: treelessing2014.10.29   关于iPhone6/6+适配问题一直有争议，今天小编专门为大家整理了相关的有效方案，希望对大伙儿有帮助！   移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两
移动端UI设计尺寸规范以及iPhone尺寸大小
wang159477的博客
08-24 1万+
移动端UI设计尺寸规范以及iPhone尺寸大小
iphone个系列尺寸_iphone7和iphone6系列尺寸和分辨率对比图
weixin_32010647的博客
01-14 1903
作为一个专业的APP设计网站，每一款手机的面世，我们必须了解这个手机的尺寸、视觉效果和分辨率等参数。然后拿现在市面上主流的手机的尺寸、分辨率、显示效果来进行对比。之前25学堂分享的有：最近iphone 7隆重上市，于是，91网站率先推出了关于iphone 7的各项详细参数的专题。今天，25学堂截取2个方面来跟大家分享一下iphone7 系列和iphone6 系列尺寸和分辨率对比图。最新的苹果iph...
小程序ui设计稿怎么做
最新发布
12-12
小程序UI设计稿的制作可以遵循以下步骤： 1.确定设计稿尺寸：根据引用中提到的建议，可以将屏幕尺寸（375×667）用作视觉稿尺寸。 2.设计布局：根据小程序的功能和需求，设计师可以使用设计工具（如Sketch、Adobe XD等）进行布局设计，包括页面结构、颜色、字体、图标等。 3.使用rpx值：根据引用[2]中提到的方法，设计师可以直接使用rpx值进行设计，以实现一稿适配所有屏幕尺寸。 4.导出设计稿：设计师可以将设计稿导出为PNG、JPG等格式，以便开发人员使用。 以下是一个简单的小程序UI设计稿制作流程，供参考： 1. 打开设计工具，创建一个375×667的画布。 2. 设计首页布局，包括顶部导航栏、轮播图、分类列表、推荐商品等。 3. 使用rpx值设置各个元素的大小、位置、颜色等属性。 4. 设计商品详情页布局，包括商品图片、商品名称、价格、购买按钮等。 5. 导出设计稿为PNG格式，交给开发人员进行开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值