UI设计稿IOS和安卓如何适配 如何做一套设计稿兼容Android和iOS双平台,IOS和安...

作者&投稿:向肾 (若有异议请与网页底部的电邮联系)

方案一

IOS与Android共用一套效果图 1242*2208

IOS与Android常用的尺寸中,最大尺寸的为i6+的尺寸,即1242*2208px

IOS常用尺寸为1242*2208  750*1334  640*1136  640*960

其中750*1334  640*1136  640*960同为@2x,1242*2208为@3x

所以750*1334  640*1136  640*960只做一套640*1136就好了

Android常用尺寸为 1080*1920  720*1280  480*800

他们之间相邻是可以整除1.5的,也就是1080除以1.5等于720,720除以1.5等于480

即,这三个尺寸可以等比缩放大小,只做一套1080*1920就可以了。

那么,问题来了。

IOS要做两套尺寸,1242*2208与640*1136

Android要做一套尺寸,1080*1920

这样不就是三套了吗?

其实,i6+的尺寸1242*2208整除1.15就刚好等于1080*1920

也就是说,1242*2208与1080*1920是可以等比缩放的

那么,i6+与Android的尺寸只做一套1242*2208就可以了。

现在就剩下IOS的640*1136

1242*2208可以直接缩放成640*1136吗?

如果要等比缩放肯定不行,因为他们之间不能整除

但是,如果我们把1242*2208的尺寸直接放到PS里等比缩小宽度到640,会发现原本2208的高度变成了1138,也就是比1136多了2px,2px的误差其实无关紧要了,硬着头皮改成1136去!

现在,你会发现,里面的图标,其实1138跟1136的大小都是一样的。

为什么提到图标呢?因为我们的交付物只要一套效果图与五套切图就好了。

一套效果图   1242*2208

五套切图     1242   640   1080    720   480  

最后,注意缩放后的图标要细调一下。由于转换有误差,共用一套效果图是有一定的风险的,例如UI细节上的风险。开发前,设计师与技术人员要先共同确认此适配方案,全程沟通,及时改正UI方面的问题。

方案二

IOS与Android 共用一套效果图 750*1334 

上面提到,750*1334  640*1136  640*960同为@2x,所以750跟640用同一套图标,同一套字体就可以了,至于其他的尺寸大小,只要跟着尺寸延伸就没问题了。

750*1334应用到1242*2208,则需要把@2x的图标放大导出成@3x,也就是把字体图标放大1.5倍,其余的,直接放大到1242就行了。

至于Android的版本,我个人的做法是把750*1334直接换算成为1080*1920,因为只有1px之差,我就忽略了。换算出了1080*1920,那么Android的其他尺寸也就好办啦~同样,我们的交付物只要一套效果图与五套切图就好了。

一套效果图   750*1334

五套切图     1242   640   1080    720   480  

方案三

IOS与Android各做两套效果图

原理跟方案一、二差不多,但为了追求细节上的完美,可以多做一套效果图,即两套效果图

1242*2208与 640*1136

1242*2208适配i6+  Android三种尺寸

1242*2208整除1.15等于1080*1920

1080*1920整除1.5等于720*1280

720*1280整除1.5等于480*800

640*1136  适配i6 i5 i5s等尺寸

方案四

如果需要更完美,那就需要做三套效果图了

1242*2208    640*1136   1080*1920  

还可以再加一套640*960

总之,分开做的越多套效果图,出来的效果就越精细。反之,看起来可以就行了。



如何做一套设计稿兼容Android和iOS双平台,IOS和安卓UI的区别~

  安卓和IOS系统的区别分为以下几点:
  1. 总体风格
  从iOS7开始,苹果摒弃了尝试在早期的iPhone中使用的拟物化(skeuomorphic)设计风格,转向扁平化设计。而谷歌的情况却相反。谷歌新推出的Material Design指南倾向于营造更接近真实世界的效果。
  2. 真实按钮
  安卓手机有一个“后退(back)”按钮,在app界面中,它可以让用户回到早先的界面。

iPhones上没有这个按钮,回到上个界面的操作一般是通过屏幕左上角的“返回上一级”图标实现的,但但使用时需要考虑app界面的不同路径。
  3.全局元素
  有一些全局性图标(如状态和首标)会出现在所有界面中。如果想你的设计看起来很自然的话,就不要去改动这些条形的高度和风格。我建议在你设计第一个界面时就将这些元素定义好。在后续设计中,你可以在模拟文件中使用占位图形(或OS中的状态和首标)来代替它们,但一定要告诉开发人员,在所有页面中这些元素都应该保持一致。

  两个平台在导航设计上略有不同。在安卓系统中,标题文字是左对齐的,而在iOS中,文字是居中的。在iOS中,很多公司都会将标题替换为公司图标,但在安卓系统中,这却并非是一个好的策略。因为状态条(包括信号,电池和时间等信息)是原生系统自带的,无需考虑它的设计。需要保证的是在制作模拟文件时,要使用正确的图标以免造成误解。
  4. 导航
  或许安卓与iOS最大的不同之处体现在各自的导航上。安卓平台的主要导航方式是一个抽屉式目录。在用户使用app的整个过程中,他似乎始终出现在界面里。而苹果的导航使用的是标签栏的模式,它位于屏幕的下方,允许用户查看app中不同的一级活动区。所以在设计app的一级活动区时,应该分别针对两种平台设计不同的目录。

  从整体上考虑,app的结构或许比导航目录更为重要。如果app的整体结构良好,那么导航条也会较为出色。正如我们刚才说过的,你要面对的导航模式有两种,Android中的抽屉式目录和iOS中的标签栏。在设计单独的页面时,有时把导航层直接隐藏也不失为一个办法。
  5. 是否使用卡牌界面
  卡牌式界面(Cards)正在逐渐成为数字设计中重要的UI类型。他们用途灵活,便于用户快速理解界面中的内容。从视觉效果上讲,卡牌式界面也与安卓material design的理念非常一致。卡牌之间的阴影使它看起来感觉非常自然。
  在iOS中,使用卡牌界面则需要审慎行事。即便是像Facebook 和Pinterest这样的大公司,当他们使用卡牌设计时,也给人以不太符合iOS设计指南的感觉。

  iOS建议设计师使用幻灯片和层叠效果,但其基本试图则更为贴近扁平化设计风格。Instagram的app全部采用了扁平化风格的设计,虽然从总体结构上讲,它的每个帖子更应该被看成是卡牌界面。因此如果你想在iOS平台下使用卡牌式界面的话,一定要小心使用阴影效果,并尽可能使阴影看起来十分柔和。
  6. 排版
  iOS系统使用的字体是Helvetica Neue,而安卓使用的是Roboto。虽然两种字体的风格各不相同,但它们的规格是接近的。如果想保证速度的话,也可以选择一种字体使用。但需要与开发者做好沟通,选择的字体大小要适用于平台中。在处理较为重要的布局或极端大小的字号时,建议对两种字体都进行测试。
  如果想追求效果的话,则需要你根据两种平台的不同特点,做出进一步的优化。以下仅是一些需要注意的要点:
  安卓的Material Design在布局中使用了大量的白空间
  在 material design中,字体的使用更为大胆.。造型夸张的标题配合以大量的空间往往能起到分层的作用。
  在iOS中, 缺少戏剧性的变化。但通过调节字号的大小。同样能起到分层的作用。
  在典型情况下,两个平台使用的都是字体库中较小的字号。然而在下面的示例中我们也可以看到,安卓使用的是较小的规范字体,而iOS 使用的却是加粗的Helvetica Neue规范字体。这个简单的示例说明,即使是非常简单的排版,在安卓和iOS 中呈现出的效果也是截然不同的。

做一套设计稿兼容Android和iOS双平台就得了解一下Android和 iPhones平台的差异是很有必要的。
安卓和IOS系统的区别分为以下几点:
1. 总体风格
从iOS7开始,苹果摒弃了尝试在早期的iPhone中使用的拟物化(skeuomorphic)设计风格,转向扁平化设计。而谷歌的情况却相反。谷歌新推出的Material Design指南倾向于营造更接近真实世界的效果。
2. 真实按钮
安卓手机有一个“后退(back)”按钮,在app界面中,它可以让用户回到早先的界面。
iPhones上没有这个按钮,回到上个界面的操作一般是通过屏幕左上角的“返回上一级”图标实现的,但但使用时需要考虑app界面的不同路径。
3. 导航
或许安卓与iOS最大的不同之处体现在各自的导航上。安卓平台的主要导航方式是一个抽屉式目录。而苹果的导航使用的是标签栏的模式,它位于屏幕的下方,允许用户查看app中不同的一级活动区。

android屏幕适配做哪几个尺寸
答:android屏幕适配尺寸有全屏模式、4:9、8:12多种。android屏幕适配尺寸有多种,具体的要结合自己的兴趣爱好和手机的自身的实际情况,具体设置标准如下:1、不要使用绝对布局,这会限制你的手机屏幕的更换。2、尽量使用match_parent ,从而保证屏幕的最大化利用。3、尽量使用权重(android:layout_weight),...

如何让动效符合iOS和Android设计原则
答:今年iOS 7与Android L都将动效作为提升用户体验的利器,如果你还木有通读整一篇设计指南,就先来了解一下阿里同学今天的分享吧,通过案例剖析,帮你了解动效与设计原则的关系,来学习咯。一个新的设计风格的确立一定会提出他特有的设计原则。而如今设计原则越来越多的关注到了动效的定义。甚至在Android L...

iphone X 出来了,怎么做屏幕适配?
答:在逻辑像素上 iPhone X 的宽度和 iPhone 6 保持一致,这是高度高了145pt(812-667),如果你是用@1x做设计稿的时候,那么你在适配 iPhone X 的时候会方便很多很多,因为只需要增加高度就能得到 iPhone X 的大小,你所有的 symbol 基本都不要变,只是复制几个苹果爸爸的 symbol 到你 symbol 里面...

ios系统和安卓系统在设计风格上的差异都有哪些
答:设计上来说这两个系统有些东西越来越通用了,目前很多Android的应用偏苹果风格,也就是说基本都是采用一套iOS设计模板来适配Android系统。术语解读和系统平台对比 android是Google公司开发的操作系统。iOS是苹果公司的移动操作系统。导航方式不一样 iOS的Tab放在页面底部,不能通过滑动来切换,只能点击。也有...

安卓系统的app和IOS系统的app,能不能实现用同一个UI界面尺寸
答:ios 8 中可以使用一套UI就可以适配所有的尺寸,包含各尺寸的iphone及ipad。用到的技术是AutoLayout +法丹瘁柑诓纺搭尸但建 sizeclass 但在未推出自动布局autolayout 之前的ios 版本,就需要多套UI来适配iphone,ipad了。

开发安卓APP如何考虑机型适配问题?
答:通常这种持久化的数据存储,都要考虑存储位置及其易失性问题,不要把关键数据保存在易失的外部存储当中,还有Android5.X开始的外卡的不可访问性,进而,可以根据存储空间和数据特点考虑明文格式还是密文格式,压缩还是不压缩。由于android手机的碎片化,没有像ios那样只有固定的机型和尺寸,所以要做到全部适配...

uniapp安卓和ios适配麻烦吗
答:不麻烦。UniApp是一个使用Vue.js开发所有前端应用的框架,开发者编写一次代码,可发布到iOS、Android、H5等多个平台,因此UniApp适配安卓和iOS并不麻烦。

IOS界面设计尺寸标准规范
答:在iPhone6设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30p x。A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。B、亲密距离:比如,左边图标与右边文字之间的距离。七、原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。1、iPhone5在@2x屏幕尺寸是,640...

浅谈iOS APP设计规范-按照iphone6尺寸
答:现在iOS app 的尺寸也变多了,要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配,以前一般用的是iphone5的尺寸,iPhone6 plus出现后,iPhone6尺寸成了大多数设计师的选择。一、iPhone6的界面布局是: 屏幕是4.7英寸的,设计稿的大小750x1334px ☆ 状态栏(status bar):就是电量条,其高度...

iOS和安卓的设计规范有何不同
答:iOS设计规范围绕一个核心,就是“模态”安卓设计规范如果总结成一句话,就是“任何地方均可点击”区别iOS和安卓设计的10个check points 1. 如何全局导航:iOS导航tab bar放在底部(顶部手短摸不着)安卓导航tab个数少用固定tab,个数多用滚动tab,都在顶部(安卓的硬按键在底部,防止误操作)(如果种类...