当前位置:文档之家› android,pad,设计规范

android,pad,设计规范

竭诚为您提供优质文档/双击可除android,pad,设计规范篇一:android尺寸标注设计大全和android切图规范android尺寸标注设计大全和android切图规范发布于:20xx年11月25日byadmin如何让app设计,app切图高效的与开发对接,似乎并没有什么更高明的办法。

很多团队的做法是先做一套ios的ui+标注+切图,再在ios的基础上缩放一套android的ui+标注+切图。

加上25学堂的app设计官方群内的小伙伴们,经常问到如何进android尺寸标注设计大全和android切图规范。

下面所讲的内容是以交互以ios的设计为主导,应用于ios和android两个平台。

今天跟大家分享的android尺寸标注设计大全和android切图规范,更适用于人力资源较为匮乏的设计团队。

第一个认识:对于设计环节。

对ios和android使用同一套ios的交互设计这种做法不置可否,毕竟好多人都已经这么干了。

而很多情况下,到底用一套交互还是两套,这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的,并不是简单的节操问题。

所以这里不讨论到底一套交互对不对,只讨论这种情况下怎么干活。

那么既然是同一套设计,如果仅仅是为了达到的交付物标准,输出两套几乎完全一样的ios和android的ui图,这种事情略显蛋疼。

据我所知有一些设计团队都在不明真相地这么干着。

第二个认识:来看设计环节的交付物ios和android开发需要的设计交付物至少要有:高保真ui图,标注,切图。

高保真ui图所起到的作用是,开发会参照其画页面,仅仅是获知页面样子的一个手段,并非什么高精度的事情。

仅仅基于这一条,设计师就没有必要出ios 和android两套样子一样只是大小不同的图的,对于开发来说,他们只需要看到页面样子即可。

标注和切图的作用是,开发会按照标注的尺寸,把切图按照高保真ui图的摆放方式做到界面上。

那么问题来了,ios的开发和android开发所需要的标注和切图是不一样的。

如何在一套ios的高保真ui图上做出两套标注和切图呢?众所周知ios设计的像素尺寸是640*960/1136,android 主流的hdpi模式下的像素尺寸是480*800。

如图,他们的换算关系是,ios像素尺寸的75%是android的像素尺寸。

于是很多设计团队就基于这个75%的关系去做android 的图了,但是这不是个好方法,这是一个设计和开发没有成为好基友的状态下所使用的方法。

我们知道android开发所使用的单位并非像素,而是一个叫做dp/sp的单位,人家压根就不用像素,你费劲半天调一个480*800又有啥用呢?你给他标注上,这个宽度300像素,又有啥用呢?设计不懂开发,开发也不懂设计,android 不懂ios,ios也不懂android,很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。

(关于dp/sp的单位,具体知识点见下面知识扩展)我们以480*800像素尺寸下做的设计图为基准。

开发将部件尺寸换算成dp尺寸的方法是,像素尺寸*2/3。

这也是为什么要让android部件尺寸能让3整除的原因。

所以在hdpi模式,480*800像素尺寸设计图中,开发看到300px宽度的标注,会定义其为宽200dp,到这里android开发才得到一个他们真正会用于开发的数值。

这整个过程,设计师做ios尺寸图并标注,设计师调整ios尺寸图为android尺寸并标注px,android开发看着设计师交付的标注,再将其换算成dp,很长的一个过程。

其实经过以上整个过程之后,我们已经得出了一个更简单的换算关系:ios像素尺寸*75%=android像素尺寸,android像素尺寸*2/3=android的dp尺寸。

进而得出:ios 像素尺寸*75%*2/3=android的dp尺寸。

所以,ios里一个宽600px的东西,在android的hdpi模式下,正好300dp,正好是50%,很容易算是吧?在这个关系的指导下,我们可以在同一套ui图上做适用于两个平台的标注。

只要android的开发知道,标注600px 的东西,在hdpi模式下等于300dp这个换算关系,一切都简单了。

当然,平台的区别要留意,例如ios使用十进制色值,android使用16进制,ios可以绘制圆角和阴影,android 更倾向于用.9.png等。

这些差异要在同一套标注中体现出来,让两端的开发各取所需。

(如果你发现标注软件中无法在同一张图上标十进制和十六进制色值,你可以用文字标注替代其中一个,qq的截屏工具中也是带色值提示的,办法很多不再赘述。

)至此,已经可以做一套标注,让android和ios的开发共同使用了。

当然前提是你要告诉开发这个标注怎么看,怎么用!那到底如何看设计师或是前端的切图是否合格呢?在ios切图与android切图的转换中,是可以使用75%的换算关系的。

也就是说ios的切图缩小75%之后,就是android的hdpi模式下的切图,而android开发还需要其他dpi模式的切图,按照如下关系换算即可。

我们会发现xhdpi模式和hdpi模式的换算比例也是75%。

也就是说xhdpi模式下切图尺寸跟ios下是一样的。

所以ios 的切图可以直接适用于android的xhdpi模式。

至于除hdpi 和xhdpi之外的其他模式,如果需要适配,就需要单独处理图片了。

要注意的是切图在缩放之后像素会糊在一起,很可能需要重新调整,还有各种虚边情况,尤其是那些带透明阴影的,都要重新调,但是这个工作量显然要比重新调ui重新切,要小多了。

至此,我们设计一套适配ios的高保真ui,基于该ui做一套适用于ios和android两类开发人员的标注,再输出一套可适用于ios和android的xhdpi模式的切图,再调整一套android的hdpi模式切图,基本上大部分工作就已经完成了。

扩展阅读:《androidui界面设计指南规范》相关资料下载【设计干货】android应用程序图标模板(含psd源文件)关于android不同dpi模式或概念介绍从ui设计师的角度理解:px(像素)是我们ui设计师在ps里使用的(不解释),同时也是手机屏幕上所显示的(也不解释)dp是开发写layout的时候使用的尺寸单位,sp是开发写layout时关于字体的字号单位,且dp与sp总为1:1关系。

android支持四种不同的dpi模式:ldpimdpihdpixhdpi 一般地,手机分辨率与所运行的dpi模式是匹配的,例如hvga(320×480像素)的手机屏幕一般在3.5英寸左右,运行在mdpi模式下(也有例外,稍后解释)(这个是Rom控制的,app不能改变)。

当运行在mdpi下时,1dp=1px:也就是说设计师在ps里定义一个item高48px,开发就会定义该item高48dp;photoshop中14px大的字体,开发会定义为14sp。

篇二:android平板电脑设计没有什么时候比现在更需要设计师去为各种各样的移动设备营造体验了。

随着平板电脑被不断接受,我们已经步入“后pc时代”,公司会利用平板电脑的用户体验质量来争夺用户的注意力。

设计成功的android平板电脑应用程序,不但需要一个很棒的概念来鼓励用户下载、使用和保留,还需要一种使android用户很直观的发现并适应使用环境的用户体验。

接下来通过了解ipadios用户界面与android3.x “honeycomb用户界面设计规范和元素之间的不同,可以帮助设计师熟悉android平板电脑应用程序设计。

我们还将分析honeycomb的设计模式和布局策略,然后查看一些那里面非常好的android平板电脑应用程序。

注意,虽然智能手机上android2.x应用程序也可以在平板电脑上运行,android3.0honeycomb系统是专门为平板电脑设计和推出的。

Futureupdates承诺将honeycomb的特性植入智能手机设备中,并使它更容易在多种多样的屏幕尺寸上设计和构建。

对于我们大多数人,我们第一次接触平板电脑是通过ipad.正因为这个原因,开始比较二者的用户界面是合理的。

通过比较,我们可以组织整理我们已经了解的平板电脑的知识,并去关注二者的关键不同点,这样我们就可以满足android用户独特的用户界面要求。

在将已存在于ipad上的应用程序转换到android平板电脑上的时候,这不但可以使我们速度更快,而且变得非常重要。

只要做得像ipad就行,对吗虽然android平板电脑和ipad的体验方面有很多的相似之处(触控手势、应用程序启动图标、情态表达等),设计师在作出假设和绘制屏幕流之前应该熟知二者的差异。

屏幕尺寸和方向这两个平台之间最大的不同就是外形尺寸。

ipad的布局尺寸是768×1024物理像素,并且ipad将纵向显示方向作为它默认的查看方向。

而android平板电脑,由于拥有众多的设备生产厂家,稍微有一些复杂。

概括地讲,有7英寸和10英寸的android 平板电脑屏幕尺寸(自左上角至右下角的对角线长度),以及介于二者之间的尺寸。

然而,大多数平板电脑是10英寸左右。

换算成像素,这意味着什么一个不错的布局基线是1280×752像素(不包括系统栏),基于10英寸的屏幕尺寸大小并且将横向(而不是纵向)作为默认的方向。

如同在ipad上一样,android上的内容可以在横向和纵向两个方向上查阅,但横向模式往往更受人喜欢。

左图是在典型的10英寸android平板电脑上的纵向视图,右图是在ipad上的。

左图是在典型的10英寸android平板电脑上的横向视图,右图是在ipad上的。

然而,对于android来说,屏幕尺寸只是差异中的一半因素。

android平板电脑在“屏幕密度”(屏幕特定区域的像素数量)方面也有所不同。

不要关注太多细节,设计师只能为三种不同的屏幕密度准备所有的生产型备用位图,放大每个位图到原大小的1.5倍或2倍。

所以,被设置为100×100像素大小的位图应该也要有150×150和200×200大小的副本。

通过制作三种缩放尺寸的位图,你可以将你的位图转换。

相关主题