android切图规范

合集下载

ios和Android APP设计规范要点

ios和Android APP设计规范要点

相信很多人都在开发设计APP时会遇到很多界面上的问题,要以多大尺寸来设计?分辨率是多少?该怎么切图给开发等等下面的文字就给出一点点技巧总结,但也要给合团队在开发时的习惯。

每个工程师们所使用的控件,书写布局习惯来实际移交的图是不一样的,但八九不离十,都是遵循一个原则,便捷开发、自适应强的开发模式IOS篇一、尺寸及分辨率iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。

在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。

如果是我来做的话,我会使用640×1136,对plus做单独的修改适配,因为plus的屏幕实在是大了,遵循屏大显示更多内容的原则这里本应该是需要修的了。

有更好办法的话希望大家可以分享一下。

Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素iPhone的app界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。

状态栏(status bar):就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏(navigation):显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px主菜单栏(submenu,tab):类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px内容区域(content):展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px至于我们经常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。

移动应用界面设计的尺寸设置及规范

移动应用界面设计的尺寸设置及规范

【总结】移动应用界面设计的尺寸设置及规范时间2014-05-04 15:15:07 青溪·札记原文appdesign-sizesetting/主题用户界面设计移动应用刚接触移动应用的界面设计,最先跳入脑海的疑问是:画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现?本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。

若有不当之处,欢迎斧正。

一、android篇1、android分辨率Android的多分辨率,一向是设计师和开发者非常头疼的事儿。

尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。

Android支持多种不同的dpi 模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi注意,ppi、dpi 是密度单位,不是度量单位:* ppi (pixels per inch):图像分辨率(在图像中,每英寸所包含的像素数目)* dpi (dots per inch):打印分辨率(每英寸所能打印的点数,即打印精度)dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。

尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。

ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。

即:长、宽各自平方之和的开方,再除以屏幕对角线的英寸数。

以iphone5为例,其ppi=√(1136px² + 640px²)/4 in=326ppi(视网膜Retina屏)对于android手机,一个不确切的分法是,720 x 1280 的手机很可能接近 320 dpi (xhdpi模式),480 x 800 的手机很可能接近 240 dpi (hdpi模式),而320 x 480 的手机则很接近 160 dpi(mdpi模式)。

网页切图规范

网页切图规范

网页切图规范网页切图规范是指在设计师完成网页设计后,前端工程师切分图层并进行代码实现的一种规范。

它主要包括图层切割、命名、导出、优化等方面的规定,旨在规范化切图流程,提高工作效率和代码质量。

以下是一份网页切图规范,共计1000字。

一、图层切割1. 根据设计稿,将整个页面切割为一层层的图层。

每个图层对应一个HTML元素,图层之间不要重叠或交叉。

图层的位置和尺寸应与设计图一致,确保切出来的图层能准确匹配后续的布局和样式。

2. 图层之间的距离应保持一致,通过对齐工具进行调整。

确保对其方式一致,例如使用“顶部对齐”、“水平居中”等。

二、命名规范1. 图层命名应简洁明确,能够准确描述图层的内容和作用。

避免使用中文、拼音或无意义的命名,应使用英文或数字进行命名。

2. 图层的命名应采用小驼峰式命名法,首字母小写,每个单词首字母大写。

例如,一个导航栏图层的命名可以是“navigationBar”。

3. 如果一个图层有多个状态或不同变种,可以在命名中使用“_”或“-”进行分隔。

例如,一个按钮图层的命名可以是“btn_default”或“btn-hover”。

三、导出规范1. 只导出需要的图层,避免导出重复、隐藏或不需要的图层。

优先导出单独的图片文件,如果有多个图层组成的图形,可以将其合并为一张图片进行导出。

2. 导出的图片应尽量使用透明背景,如果没有透明背景,应与页面背景色保持一致。

3. 图片的格式选择应根据需要进行适当调整。

一般情况下,可以使用PNG格式,有需要时可以使用JPEG格式。

四、优化规范1. 图片应进行适当的压缩和优化,以减小文件体积。

可以使用图片压缩工具(如TinyPNG)对图片进行压缩,确保图片在保持清晰度的前提下尽量减小文件大小。

2. 尽量使用CSS3的效果代替图片,以减少页面的加载时间和请求次数。

例如,使用CSS3的渐变、圆角等效果,替代制作图片。

3. 优化CSS代码,将重复的样式合并,使用缩写等方式减小CSS文件大小。

安卓设计尺寸规范

安卓设计尺寸规范

安卓设计尺⼨规范画布尺⼨:如果想⼀稿适配ios,那就新建720×1280 分辨率72,像素/英⼨。

如果单独设计安卓MD新规范的,那就新建1080×1920 分辨率72,像素/英⼨。

单位和度量 Units and measurementsdpi =屏幕宽度(或⾼度)像素 / 屏幕宽度(或⾼度)英⼨dp =(宽度像素 x 160)/ dpi名称分辨率 px dpi像素⽐⽰例 dp对应像素xxxhdpi2160 x 3840640 4.048dp192pxxxhdpi1080 x 1920480 3.048dp144pxxhdpi720 x 1280320 2.048dp96pxhdpi480 x 800240 1.548dp72pxmdpi320 x 480160 1.048dp48px字体 Typography中⽂字体:思源⿊体Source Han Sans / Noto(是⼀个字体,叫法不同⽽已)英⽂字体:Roboto注意:安卓的字号单位是SP720×1280常见的字体⼤⼩:24px、26px、28px、30px、32px、34px,36px等等。

记住是偶数的。

最⼩字号20px。

元素字重字号⾏距字间距App bar Medium20sp––Buttons Medium15sp–10Headline Regular24sp34dp0Title Medium21sp–5 Subheading Regular17sp30dp10Body 1Regular15sp23dp10Body 2Bold15sp26dp10Caption Regular13sp–20图标 icons图标⽤途mdpi (160dpi)hdpi (240dpi)xhdpi (320dpi)xxhdpi (480dpi)xxxhdpi (640dpi)应⽤图标48 x 48 px72 x 72 px96 x 96 px144 x 144 px192 x 192 px系统图标24 x 24 px36 x 36 px48 x 48 px72 x 72 px196 x 196 px颜⾊material design colors在线⼯具>>单位换算距离单位是DP,⽂字单位是SP720×1280尺⼨的换算关系 1dp=2px,⽂字1sp=2px。

APP切图详细规范终极指南

APP切图详细规范终极指南

APP切图详细规范终极指南2015-03-11 分类:UI设计围观31698次我们都知道一套完整的App 通常会有很多张切图,不管是iPhone 需要1x、2x、3x 图档,Android 需要至少3 种hdpi、xhdpi、xxhdpi。

在庞大的切图数量下如何让负责套图的RD 快速找到所需图档,档名的命令方式就需要双方统一格式方便大家作业。

所以,制定一套非常有效而方便的APP切图命名规范非常有用的。

下面就跟随小编来详细了解APP切图命名的流程和命名规范。

ios切图尺寸规则目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)(1080-1920),还有iPhone6和6+上的放大模式(1125-2001)和默认模式(1242-2208),是不是感觉好恐怖?但是不用怕,我分享一套超简单的适配方法,看完你都不信有这么简单~美术交付给开发的资料有1、标注图(以640为宽度尺寸为基准标注)2、 2x切图(以640为宽度尺寸为基准切图)3、 3x切图(以1280为宽度尺寸为基准切图)开发看到这份标注图,可以自己用上面的数字,乘以1.5得出3X的数字。

1.为什么3x切图要以1280来为宽度?其实iPhone6+的尺寸1242*2208作为3X,怎么算都又难记又不能整除,我们直接640*2得到1280跟1242相差也没几十个像素,最重要的是不虚边啊,放在真机上看(处女座除外)看不出差别的。

2.为什么只设宽度?为了保持长宽比例。

iPhone的这几个尺寸不是正好的,宽度放大后高度总差那么几个像素,这不要紧,千万别去改高度,手机屏幕是可以上下滑动的嘛。

不可以滑动必须保证一屏显示的除外,手动去调整好了。

3.为什么开发不是乘以2而是乘以1.5来算尺寸和字号?因为大屏手机就是要显示更多内容而存在的。

纯等比放大界面看起来傻大傻大的,实验证明1.5倍是正好的。

Android切图尺寸规则px(像素)是我们UI设计师在PS里使用的(不解释),同时也是手机屏幕上所显示的(也不解释)dp是开发写layout的时候使用的尺寸单位,sp是开发写layout时关于字体的字号单位,且dp与sp总为1:1关系。

UI切图管理规范

UI切图管理规范

UI切图管理规范1切图命名规范UI切图命名格式为:“aaa_bbbb_cccc”。

其中“aaa”为切图类型;“bbbb”为模块名称;“cccc”为具体名称。

其间用“_”分割。

其他情况:当三级仍无法具体标识切图时,可延伸至四级。

例如“aaa_bbbb_cccc_dddd”。

iOS以在切图命名末位加“@2x”或“@3x”等标识来区分不同像素的同一张图片。

例如:“aaa_bbbb_cccc@2x”、“aaa_bbbb_cccc@3x”。

详见3.1。

Android则以drawable-mdpi,drawable-hdpi,drawable-xhdpi,drawable-xxhdpi等文件夹来区分不同像素的同一张图片。

详见3.2。

2切图类型和格式2.1图标切图命名以“ico”开头;后缀为“png”格式。

例如:首页公告图标切图应命名为“ico_home_notice.png”2.2背景切图命名以“bg”开头;后缀为“png”格式。

例如:首页标题栏背景切图应命名为“bg_home_title.png”。

2.3图片切图命名以“img”开头;后缀为“jpg”格式。

例如:广告栏轮播图应命名为“img_adv_name.jpg”2.4按钮切图命名以“btn”开头;后缀为“png”格式。

按钮一般分为两种状态:点击状态和未点击状态。

例如:缴费页面确定按钮点击状态的切图应命名为“btn_pay_confirm_onclick.png”;未点击状态的切图应命名为“btn_pay_confirm_unclick.png”2.5标签切图命名以“tab”开头;后缀为“png”格式。

标签一般分为两种状态:选中状态和未选中状态例如:首页标签选中状态的切图应命名为“tab_home_onselected.png”未选中状态的切图应命名为“tab_home_unselected.png”3切图尺寸规范3.1iOS尺寸规范3.1.1iPhone界面尺寸3.1.2iPhone图标尺寸3.2Android尺寸规范3.2.1Android SDK模拟机尺寸3.2.2Android图标尺寸3.2.3Android系统dp/sp/px换算表。

Android界面设计中的.9.png使用

Android界面设计中的.9.png使用

Android界面设计中的.9.png的使用技巧在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。

这种图片是用于Android开发的一种特殊的图片格式,它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸,哪些区域不可以拉伸设定好,同时可以把显示内容区域的位置标示清楚。

本文结合一些具体的例子来看下.9.png的具体用法。

首先看下普通的.png资源与.9.png的资源区别:普通的png资源就不多介绍了,可以明显看到.9.png的外围是有一些黑色的线条的,那这些线条是用来做什么的呢?我们来看下放大的图像:放大后可以比较明显的看到上下左右分别有一个像素的黑色线段,这里分别标注了序号。

简单来说,序号1和2标识了可以拉伸的区域,序号3和4标识了内容区域。

当设定了按钮实际应用的宽和高之后,横向会拉伸1区域的像素,纵向会拉伸2区域的像素。

如下图:拉伸的含义应该比较容易理解,但是内容区域的标注有什么意义呢?我们来看下图:这里程序设置的文字垂直居中,水平居左的对齐方式。

对齐方式是没有问题的,但是对于这种大圆角同时又有些不规则边框的图形来说,错误的标注方式会让排版看起来很混乱。

所以我们需要修正内容区域的线段位置和长度。

把横向的内容区域缩短到圆角以内,纵向的内容区域控制在输入框的高度以内,这样文字就可以正常显示了。

这里还有一种特殊情况,就是本身是.9.png的资源,但是在修改过程中你希望这张.9.png不能被拉伸(在做皮肤的情况中有可能会遇到),那怎么办呢?只要把拉伸区域的点点在透明像素的地方就可以了,这样拉伸的时候会拉伸透明部分的像素,而不会拉伸图像本身。

如下图:大家可以看到拉伸区域的黑点是可以不连续的。

说了半天.9.png的用法,那.9.png如何输出呢?有很多种方式可以输出.9.png,比如说用draw9patch.bat这个工具,或者简单一点,用photoshop 直接输出。

手机ui设计规范

手机ui设计规范

手机ui设计规范手机UI设计规范是为了统一手机应用界面的设计风格和交互规则,提高用户体验和使用效率的一些指导原则。

下面是手机UI设计规范的一些主要内容:1.界面布局界面布局应该简洁明了,避免过多的视觉干扰。

主要内容应该放置在屏幕的中央或者上方,避免过度集中在底部。

同时,应该合理使用空白区域,让用户的注意力集中在主要内容上。

2.字体和颜色字体应该选择清晰易读的字体,避免使用过小或者过花俏的字体。

颜色应该选择明亮的颜色,避免过于柔和或暗淡的颜色。

同时,在不同模块中应该保持一致的字体和颜色,以保持统一的视觉效果。

3.图标图标应该简洁大方,易于识别和理解。

图标的形状和颜色应该与功能相关,不应该使用过多的不同形状和颜色。

同时,图标应该具有一定的反馈能力,在被点击或触摸时能够给用户一定的反馈,以增强用户的操作体验。

4.交互规则交互规则主要包括用户操作的习惯和行为规则。

例如,点击图标通常会打开相关功能,双击屏幕会放大或缩小内容等。

这些规则应该在手机应用中得到遵守,以便用户能够更加方便和有效地操作应用。

5.导航和菜单导航和菜单应该简单明了,便于用户快速找到目标。

导航栏应该放置在屏幕的顶部或底部,以便用户在不同页面之间进行切换。

菜单应该包含常用功能,不应该过于复杂和深层次。

6.响应速度手机应用的响应速度应该尽可能地快速,用户操作的结果应该及时反馈给用户。

例如,点击按钮后,应该立即给用户一个反馈,而不是有延迟或者没有反应。

这样可以提高用户的满意度和使用体验。

7.多平台适应手机UI设计应该能够适应不同尺寸和分辨率的屏幕,以便在不同的设备上呈现相似的视觉效果。

同时,应该考虑在不同操作系统上的表现,尽可能地遵循操作系统的设计风格和规范。

总结起来,手机UI设计规范主要包括界面布局,字体和颜色,图标,交互规则,导航和菜单,响应速度以及多平台适应。

遵循这些规范可以提高用户的使用体验和效率,提高应用的用户满意度。

ui切图规范

ui切图规范

ui切图规范UI切图规范是指在UI设计完成后,切图人员需要按照一定的规范进行切图,以保证设计师的设计效果能够准确地呈现在用户面前。

下面是一个关于UI切图规范的1000字说明,具体内容如下:一、文件格式规范1. 切图使用图片编辑软件,如Photoshop或Sketch等,文件格式统一为PNG格式。

2. 为避免大小写不一致的问题,请使用统一的文件命名规范,如"按钮.png"。

二、图层命名规范1. 图层命名要简洁明了,避免使用无意义的名称或者过长的命名,命名最好使用英文,并以英文单词为主。

2. 图层命名要有层级结构,可以使用"/"符号进行分级。

例如,按钮的图层命名可以为"按钮/背景"、“按钮/文字”等。

三、切图尺寸规范1. 切图尺寸要与设计稿保持一致,不得超出或缩小原来的尺寸。

2. 针对需要适应不同屏幕分辨率的设计,如移动端的自适应设计,切图时需要提供不同的尺寸和倍图,例如1x、2x、3x等。

四、图片拼接规范1. 按照设计稿的要求,将需要拼接的图片进行合并,以减少资源文件数量。

2. 拼接图片时,要保证图片拼接的精细度,避免出现明显的间隙或错位。

五、图片优化规范1. 切图前,要对图片进行压缩和优化处理,以减小图片文件的大小。

2. 避免使用无损压缩的方式,可以采用有损压缩方式,如JPEG格式的图片。

六、切图边缘规范1. 切图时要保证图像的边缘清晰,避免出现模糊、锯齿等问题。

2. 在需要切圆角的图片时,要确保切割出的圆角光滑。

七、切图准确性规范1. 切图时要准确无误地按照设计稿的要求进行切割,不得有遗漏或错位。

2. 切图时要注意对齐线和参考线,确保元素之间的距离、位置和比例都符合设计要求。

八、切图保存规范1. 切图完成后,要将切图保存到指定的文件夹中,并按照设计的层级结构进行分类保存。

2. 保存时要删除不需要的图层,保持文件的整洁。

九、切图命名规范1. 切图的命名要与设计稿一致,以方便后续的开发工作。

安卓ui设计尺寸规范

安卓ui设计尺寸规范

安卓ui设计尺寸规范安卓UI设计尺寸规范是指在设计安卓平台应用程序时,需要遵循的屏幕尺寸和分辨率的规范。

以下是一些建议的尺寸规范,以帮助设计师开发一致和易于使用的界面。

1. 基本尺寸规范:- 安卓设备的屏幕尺寸和分辨率在不同的设备上有很大的差异。

设计师应该考虑多种设备和屏幕尺寸的兼容性。

建议使用相对单位来设计,例如dp(密度无关像素)和sp(与缩放无关的像素)。

- 设计师应该考虑到不同屏幕方向的布局,包括横向和纵向。

对于横向布局,界面元素应该适当调整,以适应更广阔的宽度。

2. 手机屏幕尺寸规范:- 对于大屏幕手机,建议使用220dp x 220dp的按钮尺寸。

这个尺寸在大部分大屏幕手机上看起来合适。

- 对于中等屏幕手机,建议使用180dp x 180dp的按钮尺寸。

这个尺寸在大部分中等屏幕手机上看起来合适。

- 对于小屏幕手机,建议使用140dp x 140dp的按钮尺寸。

这个尺寸在大部分小屏幕手机上看起来合适。

3. 平板电脑尺寸规范:- 对于大屏幕平板电脑,建议使用400dp x 400dp的按钮尺寸。

这个尺寸在大部分大屏幕平板电脑上看起来合适。

- 对于中等屏幕平板电脑,建议使用300dp x 300dp的按钮尺寸。

这个尺寸在大部分中等屏幕平板电脑上看起来合适。

- 对于小屏幕平板电脑,建议使用220dp x 220dp的按钮尺寸。

这个尺寸在大部分小屏幕平板电脑上看起来合适。

4. 图片尺寸规范:- 图片在不同的设备上可能需要不同的分辨率和尺寸。

为了适应各种屏幕,建议使用可缩放的矢量图形,例如SVG(可缩放矢量图形)。

- 如果使用位图图像,建议为不同分辨率的设备提供多个副本。

这样可以确保图像在各种设备上以最佳质量显示。

以上是一些常见的安卓UI设计尺寸规范建议。

设计师应该根据不同的设备和屏幕尺寸来调整尺寸,以确保界面在各种设备上都能够良好显示和操作。

此外,还应该考虑用户的操作习惯和使用环境,以提供更好的用户体验。

Android的界面设计规范

Android的界面设计规范

作者:Bruce Lee出处:/BruceLee521样式设备和显示器Android有百万计的手机、平板电脑和其他设备,这些设备都有各种屏幕尺寸。

利用Android 的灵活的布局系统,您可以创建小到手机大到平板的各种应用程序。

变通拉伸和压缩布局,以适应不同的高度和宽度。

优化布局在大型设备中有额外的屏幕空间利用。

但在移动手持设备上需要创建复合的视图,结合多个视图来显示更多的内容,并且是这些视图易于导航。

所有的资源提供不同的屏幕分辨率(DPI)的资源,以确保您的应用程序在任何设备上看上去都很好,比如32*32,64*64。

策略那么设计这些多尺寸的屏幕,应该从哪个规格开始?一种方法是先设计标准设备的(正常大小和MDPI),然后设计向上和向下比例的尺寸。

另一种方法是从最大屏幕尺寸的开始,然后缩减,并找出我们需要使在小屏幕上的折中的UI。

主题主题是Android机器应用统一样式到应用程序或活动的一。

样式指定用户界面元素的视觉属性,如颜色,高度,填充和字体大小。

为了促进更大的平台上的所有应用程序之间的凝聚力,Android 提供了三个系统的主题,你可以从中选择来构建应用程序:全亮主题全暗主题全亮与全暗动作条主题Gmail是使用全亮的主题。

Settings是使用全暗主题. Talk使用全亮与全暗动作条主题.触摸反馈使用颜色和明亮来响应触摸,强化行为的手势,并表明什么样的动作是允许的什么样的是不允许的。

当用户触摸可操作的区域,应用程序需要可视化的反应。

这让用户知道哪些对象被触摸了,你的应用程序是“听”到触摸了。

状态Android的UI元素具有内置的触摸反馈,包括状态,用于指示触摸元素是否会产生什么反应。

通讯当你的对象作出反应,更复杂的手势,帮助用户了解操作的结果将是什么。

例如,在最近,当你开始刷的缩略图左或右,开始暗淡。

这有助于用户明白,刷卡会导致被删除的资料。

当用户尝试向上或向下滚动过去的一个可滚动区域,边界视觉效果要提示给用户。

APP界面设计规范二(Android版)

APP界面设计规范二(Android版)

一、Android设计常识开始介绍之前先帮大家梳理一下Android常用单位,方便各位亲们更好的掌握并了解Android端设计规范。

1。

1 Android常用单位1.1。

1。

PPI(pixels per inch):数字影像的解析度,也就是每英寸所拥有的像素数,即像素密度;PPI计算公式:ppi=√(长度像素数2 + 宽度像素数2)/屏幕对角线英寸数1.1。

2。

DPI(dots per inch):是指印刷上的计量单位,也就是每英寸上能印刷的网点数,我们设计用于显示器的默认为(72像素/英寸)就好了;1.1.3.屏幕尺寸(Screen Size):一般我们所说的手机屏幕尺寸,比如3英寸、5.5英寸等,都是指对角线的长度,而不是手机的面积;1。

1.4。

分辨率(Resolution):是指手机屏幕垂直和水平方向上的像素个数,比如分辨率为:720*1280,是指设备水平方向有720个像素点,垂直方向有1280个像素点1.1.5.px( pixels):像素,不同设备显示效果相同1。

1.6.pt( point):一个标准的长度单位,ios的逻辑单位,1Pt=1/72英寸,用于印刷业,非常简单易用;标注字体大小(72是早期台式机的DPI)1.1。

7。

sp(Scaled-independentpixels):放大像素,安卓的字体单位;1.1.8。

Dp(Density-independentpixels):是指设备的独立像素,不同的设备有不同的显示效果,它与设备硬件有关系;sp和dp基本一样,是android开发里特有的单位,都是为了保证文字在不同密度的显示屏上显示相同的效果;dp与设备硬件有关,与屏幕密度无关,sp与屏幕密度和设备硬件均无关;1.2 换算关系android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。

这些单位如何换算,是设计师、开发者需要了解的关键。

*dp:以160PPI屏幕为标准,则1dp=1px。

手机App设计规范

手机App设计规范

手机App设计规范
明确了APP设计规范的存在意义,那么接下来墨刀小编就带大家了解一下App 设计规范中关于视觉规范和图标按钮规范的具体内容。

一、文字
文字对于APP来说是非常重要的,是APP与用户交互信息的核心,通过规范文字大小和颜色,弱化次要信息,突出重点信息。

另外要给人以简洁整齐,条理清晰的视觉,还需要依靠界面元素的排版和间距设计,最终使用户操作时能够抓住关键点,达到快速阅读,减少费力度的效果。

二、色彩
色彩分为重要,一般,较弱三个等级。

其中重要色彩通常不能超过3种;而一般色彩,则都是重要色彩的相近色,但颜色的亮度饱和度不能超过重要色彩;最后是较弱色彩,通常是用于背景色及不重要的边角信息,色彩较淡,不能过于突兀。

三、图标
在进行图标设计时需使用形状绘制,确保图标和按钮都是矢量图,切图格式为PNG。

另外功能不同,图标也应设计为不同状态,如:如常态、点击态、选中态等。

具体图标分类规范有2个:
1. 以界面位置及模块进行分类。

2. 以功能模块进行分类,具体可分为:功能型图标and示意型图标。

四、按钮
按钮设计包含重要按钮、软弱按钮以及一般按钮。

作用根据名称意思很容易理解。

重要按钮就是代表重要操作的,通常设计在比较醒目的位置,通常文字设计在按钮之上,按钮会比较大一些。

指引用户点击,如搜索、咨询、下单、确定等按钮。

软弱按钮是重要等级最低的一个按钮,如筛选、排序等按钮。

一般按钮,重要等级在重要按钮之后,代表一些不是特别重要但是又需要用到的操作,如退出、清楚、详情等按钮。

安卓1080规范

安卓1080规范
到这里大家心里也有谱了materialdesign是介于拟物化和扁平化之间的它强调了物理定律的扁平化设计这体现在它的阴影和劢画中同时有保留了其写意化的外观设计风格
安卓篇 1080尺寸规范
虽然目前都有不同的一些设计尺寸。 720、1080都是可以的。而今天跟大家 要讲讲最具性价比的1080P设计规范。
苏辙、曾巩合称“唐宋八大家”。后人又将其与韩愈、柳宗元和苏轼合称“千古文章四大家”。
关于“醉翁”与“六一居士”:初谪滁山,自号醉翁。既老而衰且病,将退休于颍水之上,则又更号六一居士。客有问曰:“六一何谓也?”居士曰:“吾家藏书一万卷,集录三代以来金石遗文一千卷,有琴一张,有棋一局,而常置酒一壶。”客曰:“是为五一尔,奈何?”居士曰:“以吾一翁,老于
第一部分app设计知识:什么是安卓1080P?
目前市场上,只有Android系统的手机才有1080P全高清的产品。1080P是 说手机屏幕的分辨率达到1920*1080像素。 目前为止,市面上Android阵营中所有品牌手机里面,全高清屏幕的手机有 以下几款。 小米3以上、索尼L36h(Xperia Z);OPPO X909(Find 5);HTC、一 加手机 X920e(Butterfly);华为Ascend D2,Ascend P7,荣耀6以上 等、中兴Grand S;Nubia Z5(NX501);夏普的SH930W等等。 1080P的屏幕最直观的改变当然是屏幕精细度的巨大提升,就算是5寸的屏 幕,精细度也可以达到441ppi的超高级别。相当于苹果手机的iphone6的 分辨率。 以上就是针对安卓1080P的解读和一些市面上流行的安卓手机。 所以,作为一名优秀的移动app设计师,也必须了解这些常识和手机屏幕的 知识,才能着手去设计1080*1920的界面设计规范。 目前安卓系统5.0的设计风格和标准是Material Design. 大家务必不要跟安 卓1080P界面设计规范搞混了。

手机客户端切图命名规则

手机客户端切图命名规则

如: leftbar_info.png\leftbar_info_pre.png (个人中心)
选项卡
选项卡按钮命名规则: tab_(功能描述).png 如: tab_set.png\nav_set_pre.png (设置)
主界面
主页面命名规则: home_(功能属性+描述).png 如:home_menu_recommended.png (热门推荐)
登录界面
启动界面命名规则: login_bg.png (登录背景) login_logo.png(登录logo) login_input.png(输入框) login_input_pre.png(输入框选中状态) Login_btn.png (登录按钮) Login_btn_pre.png(登录按钮选中状态)
PS:描述可用英文或拼间开头字母组合等。
列表页
页表页命名规则: list_(功能属性+描述).png 如:list_menu_collect.png (页表页收藏按钮)
内容页
可重复使用按钮命名规则: btn_(功能属性或色彩均可).png 如:btn_blue.png /btn_blue.9.png (蓝色按钮)
手机客户端切图命名规则 V1.0
启动界面
启动界面命名规则: defoult.png (启动图片) defoult_logo.png(启动logo) 如: defoult.png\defoult@2x.png\defoult568@2x.png
PS:同一区域按钮切图大小一致defoult@2x.png\defoult568@2x.png 为IOS命android下 input、btn、list 等图片可用.9.png格式图片
导航栏

切图命名规范

切图命名规范

切图命名规范切图命名是在进行图片切割时,给切下来的图片文件起一个易于理解和标识的名字。

一个规范的命名能够方便团队协作和管理,提高工作效率。

以下是一些常用的切图命名规范的建议,总结如下:1. 统一前缀 - 可以根据项目或模块名称给切图文件添加统一的前缀,比如"home_"表示首页相关、"nav_"表示导航相关等。

这样可以便于查找和识别不同模块的切图。

2. 功能描述 - 使用简短的英文单词或短语来描述切图的功能或用途,比如"logo"表示网站logo、"button"表示按钮、"banner"表示广告横幅等。

注意避免使用含糊或重复的描述词。

3. 元素类型 - 如果切图是某个特定元素的一部分,可以在命名中添加元素的类型,比如"icon_"表示图标、"bg_"表示背景、"pic_"表示图片等。

4. 状态和尺寸 - 如果切图有不同的状态或尺寸,可以在命名中添加相关信息,比如"_hover"表示鼠标悬停状态、"_active"表示激活状态、"_small"表示小尺寸等。

这样可以便于组织和管理不同状态或尺寸的切图。

5. 编号或版本 - 如果同一功能或元素有多个切图,可以使用序号或版本号来区分,比如"btn_01"、"btn_02"等。

这样可以避免命名冲突,并且方便追踪和管理不同版本的切图。

6. 文件格式 - 如果切图需要导出不同的文件格式,可以在命名中添加相关的文件后缀,比如".jpg"表示JPEG格式、".png"表示PNG格式等。

这样可以帮助区分不同的文件格式和用途。

7. 文件夹结构 - 在切图文件的存放位置上,可以使用文件夹的方式来组织和管理切图文件。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
相关文档
最新文档