Ⅰ APP设设计规范尺寸、切图详解——IOS和android
目前主流的是以iPhone 6为主,设计尺寸是750*1334px,4.7寸。
1、分辨率以iPhone 6 设计为主:750*1334px
2、(字体 Helvetica/华文细黑,实际中运用黑体简或者Hiti-sc 最接近系统中所带字体)
3、工具栏height:88px 如搜索、选择、删除、回复等。
4、顶部标签栏height:60px 位于状态栏或者状态栏下的文字/具有可切换功能的图标
1、导航栏
所有的字号,在750*1334px的设计尺寸下都是偶数,便于程序员操作。
所有可触发按钮必须≥44*44
所有可触发按钮必须≥22*22
左右内容与边距的间隔大概在20px
强调确定,填充有彩色。
例如:
搜索框右边要有一个取消、或者输入了之后有一个“x”
渐变和底纹效果和程序员商讨
设计尺寸:720*1280px
状态栏48px 导航栏96px 内容区1038px 标签栏112px
Ⅱ android app界面设计规范(dpi,dp,px等)
PPI(Pixels per inch):每英寸所拥有的像素数,即像素密度。
DPI(dots per inch):即每英寸上,所能印刷的网点数,一般称为像素密度。ppi计算公式:ppi = 屏幕对角线像素数/屏幕对角线英寸数,通过勾股定理计算屏幕对角线像素数。
Screen Size(屏幕尺寸):手机屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是对角线的长度。
DIP(device independent pixel):即dip/dp,设备独立像素。 1px = 1dp density(由dpi决定)
Resolution(分辨率):指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800,指该设备垂直方向有800个像素点,水平方向有480个像素点。
px(Pixel像素):相同像素的ui,在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真,大分辨率上被缩小。
Android Design里把主流设备的 dpi 归成了四个档次: 120 dpi、160 dpi、240 dpi、320 dpi ,具体见如下表格。
实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。
也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。鉴于以上各种原因, 标准dpi=160
谷歌官方对dp的解释如下:
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.
简单来说,以160dpi的设备为准,该设备上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2个像素)。在app开发时,最好用dp来做界面的布局,以保证适配不同屏幕密度的手机。
dp和px的换算公式:
我的理解,该公式表示px的数值等于dp的数值*(设备dpi/160)
注意,px、dp是单位,但density没单位。
applyDimension的源码如下,可参考:
android的尺寸众多,建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。
app启动图标为48*48dp,对应各dpi设备,图像资源像素如下:
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|
操作栏图标为32*32dp,对应各dpi设备,图像资源像素如下:其中图形区域尺寸是24*24dp,可参考平时ui切图会有部分留白。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|
通知栏图标为24*24dp,对应各dpi设备,图标像素如下:
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|
某些场景需要用到小图标,大小应当是16*16dp,其中图形区域尺寸12*12dp。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|
Ⅲ 哪里 ios android 官方设计规范
废话不多说,希望大家耐心看完后,不要再纠结于尺寸相关的东西了! 一、尺寸及分辨率iPhone界面尺寸:320*480、640*960、640*1136 iPad界面尺寸:1024*768、2048*1536 单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。 Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素iPhone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。 这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px 导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px [下图为了说明我不是瞎掰的:960-40-88-98=734] 至于我们经常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。 PS:在最新的iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计iOS7风格的界面的时候多多注意下~ 三、字体大小Phone上的字体英文为:HelveticaNeue 。至于中文Mac下用的是黑体,Win下则为华文黑体。 下图是网络用户体验做过的一个小调查,可以看出用户可接受的文字大小。 其实还有个更简单的方法就是找你觉得好的app应用,手机截图后放进PS自己比对调节字体大小咯。 我的音乐——34px 我的、淘歌、发现——30px Muxx——34px 本地音乐——30px 泡沫、邓紫棋——24px 总之,方法是自己找到的,想办法解决问题,自己实践,比别人告诉你印象更深刻不是么? 一、尺寸及分辨率Android界面尺寸:480*800、720*1280、1080*1920。[单位:像素] Android比iPhone的寸尺多了很多套,建议取用720*1280这个尺寸,这个尺寸720*1280中显示完美,在1080*1920中看起来比较清晰,切图后的图片文件大小也适中,应用的内存消耗也不会过高。 二、界面基本组成元素Android的app界面和iPhone的基本相同:状态栏、导航栏、主菜单、内容区域。 Android中我们取用的720*1280的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。 状态栏高度为:50px 导航栏高度为:96px 主菜单栏高度为:96px 内容区域高度为:1038px(1280-50-96-96=1038) Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和菜单栏一样的:96px Ps:写之前我翻了好多关于Android的界面尺寸教程,都没找到像iOS一样具体的规范,或许因为在安卓中这些控件的高度都能用程序自定义,都没有提到具体的尺寸数值,所以就自己找了Android的设计规范,尺寸都是自己在PS中量的。 Android为了在界面上区别于iOS,Android4/s/1gdqoSJh
Ⅳ iOS和安卓的设计规范有何不同
是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。
iOS是苹果公司的移动操作系统。
iOS是由苹果公司开发的移动操作系统,苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等产品上。
iOS和安卓的ui区别二:UI设计规范不一样。
具体的UI设计规范详解请点击阅读:iOS、Android、WindowsPhone官方设计规范汇总
比如现在通常设计的尺寸对比如下:
iOS: 750*1334 或者 1242*2208
android 720*1280 或者 1080*1920
iOS和安卓的ui区别三:导航方式不一样
iOS的Tab放在页面底部,不能通过滑动来切换,只能点击。也有放在上面的,也不能滑动,但有些Tab本身可以滑动,比如天猫的。还有新闻类的应用。
Android一般放在页面顶端,可以通过滑动页面来切换Tab,当然Tab可以点击切换,Tab多的话,Tab本身也可以滑动。比如豌豆荚,网络贴吧,QQ。总之,Android啥都可以有。
iOS和安卓的UI区别四:单条item的操作
iOS单条item的操作有两种,点击和滑动,点击一般进入一个新的页面,滑动会出现对这条item的一些常用操作,如微信里滑动一条对话,会出现标记未读和删除。
Android中,单条item的操作也有两种,点击和长按,点击一般进入一个新的页面。长按进入一个编辑模式,可以在里面进行批量和其他一个操作,比如删除,顶置等等。比如小米的短信页面;长按也可以弹出情境操作栏dialog,进行操作,比如Android版的微信。
OS和安卓的UI区别五:实体键
iOS只有一个实体键(音量,电源不算哈),home键,这个键有这么几个功能:
1、按一次,回到桌面。
2 、双击,出现多任务界面
3、iOS8里面,轻触两下Home键,调出单手模式
4 、指纹解锁
Android有四个实体键(现在很多被屏幕上的虚拟键代替,但功效是一样的)4.4一下的分别是back键,home键,menu键,和搜索键。4.4及以上,是back键,home键,多任务键。安卓原生是这样,经过优化的Android就不一定了,比如魅族的smart bar,根据当前页面情景变化,不过蛮好用。
Android的back键,在大部分情况下,和页面上的返回功效一样。不过,Android的back键可以在应用件切换,还可以返回主屏幕。这个iOS里面的键不能在应用间直接切换。
iOS和安卓的UI区别六:浮窗设计元素不一样
安卓里可以看到各种浮窗,流量,清理内存等等。iOS暂时还不支持这样的浮窗。越狱的貌似可以。
iOS和安卓的UI区别七:图标尺寸和命名规范不一样
1、iOS和安卓手机的APP图标尺寸规范和图标命名规范
2、对比PC、iOS、Android等终端APP的交互设计的差异化
Ⅳ 移动应用界面设计的尺寸设置及规范
一、android篇
1、android分辨率
Android的多分辨率,一向是设计师和开发者非常头疼的事儿。尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。Android支持多种不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi
注意,ppi、dpi 是密度单位,不是度量单位 :
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模式)。
2、单位换算方法
android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。
简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。
为什么要把sp和dp代替px? 原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。
根据单位换算方法,可总结出:
当运行在mdpi下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;
当运行在hdpi模式下时,1dp=1.5px :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;
当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;
当你的app需要适配多个dpi模式的时候,请参考图1的比例进行换算 。
3、设计稿基本元素的尺寸设置
为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、设计稿标注等。但在实际开发中,这种方法耗时耗力。所以通常会选择折中的方法。
方法一 :在标准基础上(比如xhdpi)开始,然后放大或缩小,以适应到其他尺寸。不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。
方法二: 以最高分辨率为基准设计,然后缩小适应到所需的小分辨率上。缺点是,图标等若都最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。
结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位, 推荐设计稿的画布尺寸选用 720X1280 ,分辨率仍旧为72ppi(像素/英寸)。
在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求:
状态栏高度 :50 px
导航栏、操作栏高度 :96 px=48dp x 2
主菜单栏高度 :96 px
内容区域高度 :1038 px (1280-50-96-96=1038)
Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px
4、图标和字体大小(来自官方规范文档)
a、启动图标(home页或app列表页)
整体大小为48 x 48 dp
b、操作栏图标,代表用户在app中可以使用到的最重要的图标
整体大小为32 x 32 dp ,图形实际区域为 24 x 24 dp
c、小图标/场景图标,提供操作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ,图形实际区域为 12 x 12 dp 。
d、通知图标
如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ,图形实际区域为 22 x 22 dp 。
注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x 1280 ,图标大小需在规范要求的尺寸数字上乘以2。比如操作栏图标32 x 32 dp ,则设计稿上应该是64 x 64 px 。
e、字体大小
Android规范中的要求如下:
前面提到Android开发中的字号单位是sp,而换算关系是 sp*ppi/160 = px 。所以720 x 1280尺寸的设计稿上,字体大小可选择为 24px 、28px 、32px 、36px ,主要根据文字的重要程度来选择,特殊情况下也可能选择更大或更小的字体。
f、其他尺寸要求
通常把48dp作为可触摸的UI元件的标准。
为什么要用48dp呢?一般来说,48dp转化为一个物理尺寸约9毫米。通常建议目标大小为7-10毫米,以方便用户手指能准确并且舒适触摸目标区域 。
如果你设计的元素高和宽至少48dp,你就可以保证:
(1)触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上显示。
(2)在整体信息密度和触摸目标大小之间取得了一个很好的平衡。
另外,每个UI元素之间的空白通常是8dp 。
二、iOS篇
1、分辨率
iPhone 界面尺寸:
iPad 界面尺寸:1024×768、2048×1536
(以上单位都是像素,至于分辨率一般网页UI和移动UI基本上都只要 72 ppi)
2、单位换算px、pt
这里需要先区分pt、px,pt(磅值)是物理长度单位,指的是72分之一英寸。手机上看来同一大小的字磅值是一样的,但是换算成不同分辨率手机的字号px值不一样。(px=pt*ppi/72)
iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍。iPhone5的ppi没有变化,兼容性方面要增加类似首屏画面等程序上的判断。
在iPhone界面上元素的定位、尺寸是通过一个单位point,而非px,屏幕上固定有320x480pt,retina屏两倍的分辨率改变的只是pt和px之间的比例而已,这样就能实现不改变程序,只上传两套图片就兼容两个分辨率。
****在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用 640×960 或者 640×1136 的尺寸设计。其中设计稿的画布分辨率设为默认的72ppi(此时1px=1pt ),所以设计师可以统一采用px为单位。
开发拿到设计稿时,将上面标注的以px为单位的字号大小、图像尺寸除以2,就是非retina屏上的pt值,这样在retina屏上也可以根据此pt值换算对应的px大小,以确保不同的分辨率下有合适的效果。****
3、基本元素的尺寸设置
iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。
这里取用 640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:
状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px
导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px
主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px
内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px=960-40-88-98
以上尺寸适用于 iPhone 4、4S,iPhone5/5s 的 640×11136 的尺寸,其实就是中间的内容区域高度增加到:910 px,其他尺寸也同上。
4、常用图像、图标大小(来自官方规范文档)
单位:像素
5、字体大小
iOS交互设计规范文档上,对字体大小没有做严格的数值规定,只提供了一些指导原则:
单位:点pt
– 即便用户选择了最小文字大小,文字也不应小于 22 点。作为对照,正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。
– 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式,在最小、小和中等设置时都使用相同字体大小、行间距和字间距。
– 在最小的三种文字大小中,字间距相对宽阔;在最大的三种文字大小中,字间距相对紧密。
– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。
– 导航控制器中的文字使用和大号的正文样式文字大小(明确来说,是 34 点)。
– 文本通常使用常规体和中等大小,而不是用细体和粗体。
网络用户体验做过的一个小调查:
单位:像素px
还有个方法就是找你觉得好的APP应用,手机截图后放进PS自己对比调节字体大小。
Ⅵ ios和android设计规范区别
Android 整体视觉设计规范
App 界面的整体视觉组成大致可以分为四个部分:
StatusBar(状态栏)、TopBar(头部栏)、Body Content(内容区域)、FootBar(底部栏)。
StatusBar 的样式由系统 UI 决定,除背景配色外,不需要做其他的设计。
TopBar 两个系统平台规范上的显示高度与内容布局有明显的差异,按各自的规范进行设计。
Body Content 除控件外,采用相同的布局与视觉设计。
FootBar 除控件外,采用相同的布局与视觉设计。
二、Android差异化设计案例解读
1. StatusBar/TopBar 差异化设计
2. 常用的三个系统图标/控件差异化
3. 搜索/输入控件差异化
4. 弹窗样式差异化
三、Android系统交互与iOS系统交互的差异化设计
1. 交互方式:
除了上面提到了弹窗样式与交互差异化之外,对于一些系统交互行为,推荐尽量使用 iOS 与 Android 各自平台的系统控件与交互方式,降低开发与用户学习成本。系统交互行为主要包含以:返回上级/关闭当前页面的方式、通知开启或者关闭设置、发送/提交内容(键盘自带或者新增按钮点击)、Item 列表排序/删除、提示窗显隐、时间选择控件、手势操作等等。
2. 交互动效:
交互动效也推荐尽量使用 iOS 与 Android 各自平台的系统提供的动效。比如 iOS 的镜头切近与高斯模糊,Android 的纸墨磁吸等等。
单条 item 的交互差异示例
总体来说,就是以 iOS 版为参照,底部栏与中间内容区域尽量保持相同的设计,通过对状态栏、头部样式、控件(开关、选框、搜索、输入)、系统图标(返回、分享、更多)、弹窗样式、系统交互进行 Android 规范化差异,以保证该 App 的设计在两个不同的系统平台即能符合中国用户的使用习惯,又能适当体现系统的不同风格与特性。