APP设计师必读!快速适配iPhone6及plus的诀窍

2023-10-11 13:10

本文主要是介绍APP设计师必读!快速适配iPhone6及plus的诀窍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

iPhone6来了,设计师哭了…..吗?

APP设计师必读!快速适配iPhone6及plus的诀窍01

不知道小伙伴们是否观看了半夜直播的苹果新品发布会,静电实在熬不住了,所以只有第二天起床浏览铺天盖地的消息了. 这次苹果发布了新款手机iphone6及iphone6 Plus,作为果粉,看着实在眼馋啊.不过摸摸自己那发酸的腰………额,还是养养再说吧。

作为设计师,我们肯定想知道,新款的iphone对我们目前的设计开发有多少影响。适配要多少工作量?工作量大的话,赶工期的小伙伴们会不会哭晕在厕所里?嗯嗯,那么先来看看这次苹果发布的新机型的参数。

iPhone各机型分辨率解析

我们先来看看新款iphone的分辨率和ppi

APP设计师必读!快速适配iPhone6及plus的诀窍02

使用何种尺寸来做设计稿?

由上边的分析,我们知道, 如果要适配iPhone6 Plus的图片资源,做到真正的高清,我们必须要将现有的@2x的图片资源的宽高各放大1.5倍。

由于现在大部分设计师都采用photoshop等位图软件来设计,大家知道,对于位图,从大尺寸到小尺寸的缩放没问题,但从小尺寸到大尺寸的放大,问题可就没那么简单了,没错,糊了

1920还是2208高?是个问题

静电在iphone6发布后推测使用1920-1080的分辨率来做设计稿,默认使用位图的情况下,生成@3x尺寸的图片资源,然后再批量缩小为@2x。但其后在新版本的xcode中,这种推测却被颠覆,iphone6 plus模拟器使用了1242 - 2208这样的分辨率,然后在通过某种插值算法,缩小到物理分辨率为1920-1080。具体原理可以参考下面的图(图片来源:paintcode)

静电也挺纠结的,因为现在大部分显示器还是全高清的1080p显示器,如果用这么大的尺寸来作图,我们的显示器尺寸就捉襟见肘了。所以,静电只能默默期待有一天,显示器的分辨率能进一步提高,高清显示器的价格进一步下降,否则,设计师估计要哭死了。

如何在这个阶段来过渡呢?如果我们的设计稿已经全部位图化,那么很苦逼,你需要将所有图标重绘扩大。 如果你有幸还保存着设计源文件,切源文件里大部分都是矢量化的图片,那么还好还好,简单拉大再导出就好了。不过怎么说都是一件费时费力的工作,静电只能说,免不了,大家辛苦了。

一套图片资源搞定?! SVG矢量资源来啦!

如果还单纯的以为,ios还在使用位图,那就弱爆了! 直到昨天,静电得知,苹果在开发环境中引入了矢量图片资源.也就是说SVG,PDF等格式可以直接作为图片素材导入到xcode中进行调用.这是一个非常激动人心的举动.

也就是说,以后我们可以直接在ios的开发中使用矢量素材了.这意味着,只有一套图就能解决问题!

静电在版本为(6.1 6A1027)的xcode中已进行过验证.

制作矢量化的设计稿-高清重绘无障碍

sketch在之前静电的设计教室已经讲过(小伙伴可以直接访问静电的主页查看sketch教程),相信小伙伴已经渐渐的开始用这款神器来做设计了。这个时候,用sketch做设计的好处慢慢的展现出来,全矢量的图标,想导出多大就导出多大,同时也支持导出SVG矢量格式. 是不是方便很多?全矢量化的设计,在以后相当长的一段时间,应该会慢慢变成主流。哦不,其实已经是主流,因为苹果已经开始使用了.

最后的总结

1.简单粗暴的适配iPhone6plus的原理,如果继续使用位图,直接将现有图标的长宽分别放大1.5倍即可,也就是从@2x到@3x。 强烈建议使用2208-1242分辨率来设计,然后等比缩放(长宽各缩放2/3)
2.在新的开发环境中,使用矢量化的图片素材(但位图不可避免,所以静电建议根据实际情况选择合适的图片格式)
3.由于iphone6发布后信息比较少,静电的文章在发布后存在着错误,在这个过程中有不少小伙伴指正和加入探讨研究,在此感谢所有朋友.
4.以上内容已在2014年9月13日进行了重新的修改.以上内容可能根据实际情况有些许变化,大家可以静观其变,也可以多多跟身边工程师交流和探讨,争取尽快适配新的iphone机型。

 

静电的sketch教程系列:

静电的设计教室-初识与改变-APP设计利器sketch教程(01)

静电的设计教室:熟悉新朋友-APP设计利器Sketch教程(02)

静电设计教室:插件助你一臂之力-APP设计利器Sketch教程(03)

静电的设计教室:钢笔和路径-APP设计利器Sketch教程(04)

静电的设计教室:sketch好搭档Mirror初体验-APP设计利器Sketch教程(5)

本文由jingdesign原创,转载请注明作者和出处.谢谢.

查看更多静design的干货, 请扫描下方二维码关注公众号: jingdesign91

来源:bbs.guimobile



转自:http://www.guimobile.net/rapid-adaptation-iphone6-and-plus-tips.html

这篇关于APP设计师必读!快速适配iPhone6及plus的诀窍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/188260

相关文章

【C++ Primer Plus习题】13.4

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: main.cpp #include <iostream>#include "port.h"int main() {Port p1;Port p2("Abc", "Bcc", 30);std::cout <<

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

软件设计师备考——计算机系统

学习内容源自「软件设计师」 上午题 #1 计算机系统_哔哩哔哩_bilibili 目录 1.1.1 计算机系统硬件基本组成 1.1.2 中央处理单元 1.CPU 的功能 1)运算器 2)控制器 RISC && CISC 流水线控制 存储器  Cache 中断 输入输出IO控制方式 程序查询方式 中断驱动方式 直接存储器方式(DMA)  ​编辑 总线 ​编辑

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值: Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中: 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令: An=(a+b√)n A_n = (a +

v0.dev快速开发

探索v0.dev:次世代开发者之利器 今之技艺日新月异,开发者之工具亦随之进步不辍。v0.dev者,新兴之开发者利器也,迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势,助汝速速上手,提升开发之效率。 何谓v0.dev? v0.dev者,现代化之开发者工具也,旨在简化并加速软件开发之过程。其集多种功能于一体,助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者

系统架构设计师: 信息安全技术

简简单单 Online zuozuo: 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo :本心、输入输出、结果 简简单单 Online zuozuo : 文章目录 系统架构设计师: 信息安全技术前言信息安全的基本要素:信息安全的范围:安全措施的目标:访问控制技术要素:访问控制包括:等保

利用Django框架快速构建Web应用:从零到上线

随着互联网的发展,Web应用的需求日益增长,而Django作为一个高级的Python Web框架,以其强大的功能和灵活的架构,成为了众多开发者的选择。本文将指导你如何从零开始使用Django框架构建一个简单的Web应用,并将其部署到线上,让世界看到你的作品。 Django简介 Django是由Adrian Holovaty和Simon Willison于2005年开发的一个开源框架,旨在简

CentOs7上Mysql快速迁移脚本

因公司业务需要,对原来在/usr/local/mysql/data目录下的数据迁移到/data/local/mysql/mysqlData。 原因是系统盘太小,只有20G,几下就快满了。 参考过几篇文章,基于大神们的思路,我封装成了.sh脚本。 步骤如下: 1) 先修改好/etc/my.cnf,        ##[mysqld]       ##datadir=/data/loc

SAM2POINT:以zero-shot且快速的方式将任何 3D 视频分割为视频

摘要 我们介绍 SAM2POINT,这是一种采用 Segment Anything Model 2 (SAM 2) 进行零样本和快速 3D 分割的初步探索。 SAM2POINT 将任何 3D 数据解释为一系列多向视频,并利用 SAM 2 进行 3D 空间分割,无需进一步训练或 2D-3D 投影。 我们的框架支持各种提示类型,包括 3D 点、框和掩模,并且可以泛化到不同的场景,例如 3D 对象、室

Adblock Plus官方规则Easylist China说明与反馈贴(2015.12.15)

-------------------------------特别说明--------------------------------------- 视频广告问题:因Adblock Plus的局限,存在以下现象,优酷、搜狐、17173黑屏并倒数;乐视、爱奇艺播放广告。因为这些视频网站的Flash播放器被植入了检测代码,而Adblock Plus无法修改播放器。 如需同时使用ads