《从零开始设计一款App》系列文章共6篇。我已经谈到了前5个部分。今天也把设计规范部分分享给大家。快来学习吧。U姐列了一个小目录:基本概念Android界面设计规范Android裁剪与标注Android开发单位转换总结1.基本概念1.什么是DPI?DPI(DotsPerInch):每英寸点数,指的是屏幕密度。是衡量空间点密度的单位。最初用于印刷技术,表示每英寸可印刷的墨滴数。较小的DPI会产生不清晰的画面。后来,DPI的概念也被应用到电脑屏幕上。电脑屏幕一般用PPI(PixelsPerInch)来表示一英寸屏幕显示的像素数。现在也引入了DPI。Windows操作系统的电脑屏幕的PPI初始值为96,Mac的初始值为72,虽然从80年代开始这个数值就不是很准确了。一般来说,non-retina桌面(包括Mac)的PPI范围在72-120之间,因为这个数值范围保证了你的工作在任何地方都会保持大致相同的比例。举个实际例子:27"Mac影院显示器的PPI为109,即每英寸屏幕有109个像素。斜角长度为25.7英寸(65cm),实际屏幕宽度约为23.5英寸,23.5109约为等于2560,所以原屏幕分辨率为2560x1440px屏幕密度计算公式:1080x1920px屏幕密度:2.什么是PPI?PPI(PixelsPerInch):图像分辨率;就是图像每英寸有多少像素,单位ofresolution为ppi,通常称为pixelsperinch,图片分辨率一般用ps来改变图片的清晰度二、Android界面设计规范1、每个Android设备的屏幕密度都有大量的Android尺寸,以及适应每个屏幕肯定是不现实的,所以为了解决这个问题,Android手机屏幕有自己的初始固定密度,Android会根据这些屏幕的不同密度进行自适应,掌握这个就足够了旨在满足自己设计工作的需要...以下是Android的密度划分和代表性分辨率。在这里你可以发现它已经开始与设计稿的尺寸和切图的输出挂钩了。安卓屏幕密度优姐给你展示iPhone设备的屏幕密度:iphone4/4S/5/5S/SE/6/7≈320DPI2。Android开发单位DP和SPDP:Android特有的长度单位。以160dpi的屏幕为标签,则1DP=1PX的计算公式:dpxdpi/160=px例:以720x1280px(320dpi)为例计算1dpx320dpi/=2pxSP:Android专用字体单位.以160DPI的屏幕为标签,则1SP=1PX的计算公式为:spxdpi/160=px例:以720x1280px(320dpi)为例计算1spx320dpi/=2px3。设计稿尺寸以目前市场主流设备尺寸为准,Android设计稿尺寸我们希望使用1080x1920PX。设计稿采用1080x1920px作为标准尺寸的原因:①从中间尺寸向上向下适配时,界面的调整幅度最小,适配最方便。②在大屏幕时代,仍然以小尺寸作为设计尺寸,这会限制设计师的设计视角。③使用主流尺寸制作设计稿尺寸,大大提高了视觉还原度和对其他模型的适配性。因此,在制作Android设计稿时,请使用1080x1920px的设计稿(sketch用户使用540x960的设计稿)界面设计控件尺寸:4.Android图标尺寸Android图标相对于iOS比较小,我们只需要提供下面几个尺寸就够了,但是需要增加2套,一套是圆角的,一套是直角的,因为有些地方会用到。512x512px,192x192px,144x144px,96x96px,72x72px,48x48px因为安卓机型很多,不同屏幕密度的手机对应的图标大小也不一样,所以U姐没法给你对应图标的位置应用。5、Android设计字体英文字体为Roboto字体,中文字体为思源黑体。Android5.0以后使用sourcehan字体,字体文件有2个名字,“sourcehansans”和“notosansCJK”。思源黑体是Adobe和谷歌共同开发的一款开源字体。支持繁体、简体、日韩字体,有7种字重。6、常见主流手机尺寸和分辨率三、Android上切图标注1、标注设计稿时,用px还是dp还是sp?答:这个问题需要和Android工程师沟通。推荐使用dp和sp进行标注(这里指的是Android设计稿的前提)。但是目前很多设计者并不了解dp和sp的单位,所以有些设计者在提供Android设计稿的时候还是会用px来标注。这一点应该与您的合作伙伴工程师沟通。如果不影响他的发展和他的能力,在转换清楚的前提下,可以考虑使用Px,但是我不推荐。这里要记住一件事(你只需要记住帮助你工作):当屏幕密度为MDPI(160DPI)时,1dp=1px当屏幕密度为MDPI(160DPI)时,1sp=1px像素字体大小=屏幕密度/160*sp字号可用于计算设计稿中标记为sp的像素字号。比如在xHDPI下,一个36px的字标为sp就是18sp,以此类推。根据不同屏幕密度的换算,就是下图的意思:2.需要提供多少套图片切割资源?答:理论上,如果要兼顾目前存在的各种型号,应该为不同的密度提供不同尺寸的切口。但这无疑会增加巨大的工作量,也可能会浪费大量的资源空间。其实很多机型已经不占据主流市场,很多奇怪的分辨率不需要考虑适配。因此,具体几台的产量取决于公司的产品需求。通常我是这样做的:选择最好的尺寸提供一套裁剪资源,交给开发工程师,适配各个屏幕密度。这里需要注意的是,这个“最大尺寸”并不是指目前市面上安卓手机的最大尺寸,而是指目前流行的主流机型的最大尺寸,可以省下不少钱。资源空间。您需要与您的Android工程师就选择的最大尺寸进行沟通,每个Android工程师在这个问题上都有不同的结论。(Android小伙伴,求我提供XXHDPI的切图资源,我用的切图工具是Cutterman,可以一键切图。)3.Android切图资源应该提供给开发者小弟多大尺寸?答:iOS图片可以分为@2x和@3x,Android图片根据dpi的不同和iOS类似,只是资源文件夹是根据dpi命名的,如下图:根据不同的分辨率是用来对切片图像进行分类的,但是大家可以看到,如果切片太多,提供5组切片图像岂不是很累?一般情况下,我们只需要提供3套切图资源就可以满足Android工程师的适配,即HDPI、XHDPI、XXHDPI3套切图资源。目前我使用的方法是只提供最大尺寸的切图,其他分辨率留给Android工程师去缩放适配,所以和小伙伴沟通一下。事实上,现在大多数公司受限于人力和物力,并没有这么严格的工作方法。它基本上是一个文件夹,命名后提供给工程师。在这里提醒大家,没有固定的工作方式和方法,任何方法都是为了提高工作效率而进行的。4.我们在制作设计稿时最常遇到的问题①设计稿应该用多大的尺寸?iOS:设计稿使用750x1334px。Android:就目前市场而言,XXHDPI属于主流机型;这样既能兼顾标注又能兼顾主流机型,所以设计稿的尺寸建议使用1080x1920px,这样即使标注为px,工程师也能轻松转换。②iOS设计稿如何适配Android(强调)现在有一种很普遍的情况,就是一稿两用;设计师们正在做iOS版本设计稿来适配Android,现在需要给Android,怎么办?iPhone的屏幕密度已经达到xHDPI,设计稿制作尺寸为750x1334px。750×1334@3x切图资源其实就是AndroidXXhdpi(1080x1920px)切图资源;Android开发可以使用iOS设计稿自己转换,前提是一定要和Android工程师沟通。另一种情况:可以将750×1334的设计稿尺寸调整为Android1080×1920的尺寸,微调各个控件,重新提供label(标有dp)。换句话说,您需要提供两组注解,一组用于iOS,一组用于Android。③大家可能还有一个疑问,就是我用cutterman裁Android图片的时候,有drawable和mipmap两个文件夹,应该给开发工程师哪个?答:以前用的开发工具只有drawable,没有mipmap。后来新的开发工具只有mipmap这个文件夹,专门用来存放png格式图片的,但是png图片还是可以放在drawable里面的。所以现在我们只需要为Android工程师的抠图输出文件加上mipmap-前缀就可以了。四、Android开发单位转换1.Android机型各种尺寸下PX、DP、SP的对应关系2.字体单位SP与PX的对应关系3.距离单位DP与PX的对应关系5.总结一下这里说的只是一个工作方法。好的工作方法可以事半功倍,在具体工作中要灵活运用。您必须与开发人员进行更多交流。良好的沟通是解决问题的唯一途径。
