手机app设计适配尺寸(手机app设计适配尺寸是什么)
本篇文章给大家谈谈手机app设计适配尺寸,以及手机app设计适配尺寸是什么对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、APP设设计规范尺寸、切图详解——IOS和Android
- 2、安卓app设计屏幕分辨率适配问题怎么解决?
- 3、手机app的图标一般是多大尺寸?
- 4、移动应用界面设计的尺寸设置及规范
- 5、app界面设计尺寸规范大全
- 6、安卓手机app图标尺寸和分辨率都是多少?
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
安卓app设计屏幕分辨率适配问题怎么解决?
想要Android应用适应不同尺寸的屏幕,思路如下:
不同的layout
Android手机屏幕大小不一,有480x320, 640x360, 800x480,让app适应不同屏幕,需要在res目录下创建不同的layout文件夹,比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。
hdpi、mdpi、ldpi
在之前的版本中,只有一个drawable,而2.1版本中有drawable-mdpi、drawable-ldpi、drawable-hdpi三个,这三个主要是为了支持多分辨率。
drawable- hdpi、drawable- mdpi、drawable-ldpi的区别:
(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)
(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)
系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片。
更正:应该是对应不同density 的图片
在开发程序时为了兼容不同平台不同屏幕,建议各自文件夹根据需求均存放不同版本图片。
屏幕方向:
横屏竖屏自动切换:
可以在res目录下建立layout-port-800x600和layout-land两个目录,里面分别放置竖屏和横屏两种布局文件,这样在手机屏幕方向变化的时候系统会自动调用相应的布局文件,避免一种布局文件无法满足两种屏幕显示的问题。
不同分辨率横屏竖屏自动切换:
以800x600为例 :
可以在res目录下建立layout-port-800x600和layout-land-800x600两个目录
不切换:
以下步骤是网上流传的,不过我自己之前是通过图形化界面实现这个配置,算是殊途同归,有空我会把图片贴上来。
还要说明一点:每个activity都有这个属性screenOrientation,每个activity都需要设置,可以设置为竖屏(portrait),也可以设置为无重力感应(nosensor)。
要让程序界面保持一个方向,不随手机方向转动而变化的处理办法:
在AndroidManifest.xml里面配置一下就可以了。
加入这一行android:screenOrientation="landscape"。
例如(landscape是横向,portrait是纵向):
以下是JAVA代码:
?xml version="1.0" encoding="utf-8"?
manifest xmlns:android=""
package="com.ray.linkit"
android:versionCode="1"
android:versionName="1.0"
application android:icon="@drawable/icon" android:label="@string/app_name"
activity android:name=".Main"
android:label="@string/app_name"
android:screenOrientation="portrait"
intent-filter
action android:name="android.intent.action.MAIN" /
category android:name="android.intent.category.LAUNCHER" /
/intent-filter
/activity
activity android:name=".GamePlay"
android:screenOrientation="portrait"/activity
activity android:name=".OptionView"
android:screenOrientation="portrait"/activity
/application
uses-sdk android:minSdkVersion="3" /
/manifest
另外,android中每次屏幕的切换动会重启Activity,所以应该在Activity销毁前保存当前活动的状态,在Activity再次Create的时候载入配置,那样,进行中的游戏就不会自动重启了!
有的程序适合从竖屏切换到横屏,或者反过来,这个时候怎么办呢?可以在配置Activity的地方进行如下的配置android:screenOrientation="portrait"。这样就可以保证是竖屏总是竖屏了,或者landscape横向。
而有的程序是适合横竖屏切换的。如何处理呢?首先要在配置Activity的时候进行如下的配置:android:configChanges="keyboardHidden|orientation",另外需要重写Activity的 onConfigurationChanged方法。实现方式如下,不需要做太多的内容:
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
// land do nothing is ok
} else if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
// port do nothing is ok
}
}
写一个支持多分辨的程序,基于1.6开发的,建立了三个资源文件夹drawable-hdpi drawable-mdpi drawable-ldpi,里面分别存放72*72 48*48 36*36的icon图标文件。当我在G1(1.5的系统)上测试时,图标应该自适应为48*48才对啊,但实际显示的是36*36。怎么才能让其自适应 48*48的icon图标呢 ?
解决办法 drawable-hdpi drawable-mdpi drawable-ldpi改成drawable-480X320 drawable-800X480的多分辨支持的文件夹。
手机app的图标一般是多大尺寸?
手机app的图标都会有各种分辨率的尺寸,为了在不同的分辨率手机下都能正常显示。
截止2020年1月,手机屏幕分辨率最清晰是4K屏,水平清晰度3840,垂直清晰度2160,宽高比16:9,总约830万像素。但市面上真正在售的只有某尼的Xperia XZ(双4G)手机是这种屏幕。
4K是一种高清显示技术,主要应用于电视行业、电影行业、手机行业等领域。
扩展资料:
手机图标就像电脑图标一样,是一个程序的标记。如:照相机、设置、信箱、通讯录等。通常为透明背景的图片如PNG格式。
在手机中一半内置的图标都是经过美化的,后来安装的软件由于是个人制作,一定程度上不是那么完美,包括大小、 尺寸、比例等等,如果嫌不美观, 可以到安装目录比对标准的图标尺寸然后替换,用PHOTOSHOP或者其他绘图软件工具制作。
移动应用界面设计的尺寸设置及规范
一、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自己对比调节字体大小。
app界面设计尺寸规范大全
原型设计尺寸
☆ 状态栏(status bar):就是电量条,其高度为:20px;
☆ 导航栏(navigation):就是顶部导航,有线其高度为:45px;没有线高度就是44px;
☆ 主菜单栏(submenu,tab):就是标签栏,底部导航,其高度为:46px;
☆ 信号格:5 * 5
☆ wifi 图片:11 * 9
☆ 锁:11 * 11
☆ 导航:8 * 8
☆ 电量:22 * 9
☆ 闪电:5 * 8
☆ 状态栏中的文字:10px
☆ 顶部导航栏的图标尺寸为16x16px左右,底部标签栏的图标尺寸为23 x 23px左右。
☆ 导航栏的文字大小最大值是14px,底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是:10px, 12px,14px,16px。
① 文字黑色:#282828
② 文字深灰色:#656565
③ 文字浅灰色:#989898
④ 边框浅灰色:#C3C3C3
⑤ 背景淡灰色:#f2f2f2
⑥ 按钮背景纯白色:#ffffff
A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。
B、亲密距离:比如,左边图标与右边文字之间的距离。
1、iPhone6手机模型尺寸:429x881px
2、界面尺寸布局:满屏尺寸375x667px
3、高度电量条高度20px,导航栏高度44px,标签栏高度46px;
4、各区域图标大小导航栏图标16px,底部标签栏图标23px;
5、各区域文字大小电量条-文字10px,导航栏-文字14px,标签栏-文字10px;
6、常用的文字大小:16px,14px,12px,10px;
7、常用的颜色:背景浅灰色:#f2f2f2, 文字深黑色: #323232,边框色深灰:#CCCCCC;
8、常用可点击区域的高度(比如搜索区域):28px;
9、单行文字的背景框的高度:44px,双行则为:88px,三行则为:132px;
10、常用间距:亲密距离:10px;疏远距离:15px,其它距离:5px,22px等;
安卓手机app图标尺寸和分辨率都是多少?
应用程序图标 (Icon)应当是一个 Alpha 通道透明的32位 PNG 图片。
由于安卓设备众多,一个应用程序图标需要设计几种不同大小,如:
LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px。
MDPI (Medium Density Screen, 160 DPI),其图标大小为 48 x 48 px。
HDPI (High Density Screen, 240 DPI),其图标大小为 72 x 72 px。
xhdpi (Extra-high density screen, 320 DPI),其图标大小为 96 x 96 px。
建议在设计过程中,在四周空出几个像素点使得设计的图标与其他图标在视觉上一致,例如:
96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px, 四周留出4个像素用于填充(无底色)。
72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px, 四周留出2个像素用于填充(无底色)。
48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px, 四周留出1个像素用于填充(无底色)。
36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px, 四周留出1个像素用于填充(无底色)。
扩展资料:
手机图标就像电脑图标一样,是一个程序的标记。如:照相机、设置、信箱、通讯录等。
通常为透明背景的图片如PNG格式。在手机中一半内置的图标都是经过美化的,后来安装的软件由于是个人制作,一定程度上不是那么完美,包括大小、 尺寸、比例等等,如果嫌不美观, 可以到安装目录比对标准的图标尺寸然后替换,用PHOTOSHOP或者其他绘图软件工具制作。
注意:一定要名称一样,格式一样或者修改安装表文件,指向你所更换的图标文件,起到一定的美化作用。同时手机图标要有一定的共同性,便于不同品牌的图标的图标功能相近性,便于使用。
手机图标制作:
一、主题风格:
做手机图标先要定好主题,风格,以及表现方式,如:简洁大方;古朴厚重;晶莹剔透;是写实的3D图标还是平面化的图标。这一环是和整个交互界面密不可分的。
二、选定软件:
根据风格定位,可以确定出是用哪种方法:用max建模渲染ps处理;用ps直接表现;用AI绘出再经ps处理(推荐)易修改大小以及之后的调整。
三、注意要点:
由于AI是矢量软件,可以很好的表现出画面图标的细节,尤其是复杂形体的表现,性能远远高于PS去制作,还有一个原因就是在制作手机图标时图标的大小都是很明确的,对于一些级小的细节AI很有优势,如果ps的话不易画出,如果放大制作,再缩小的话,会模糊掉,显得边缘粗糙。
参考资料来源:百度百科 手机图标
关于手机app设计适配尺寸和手机app设计适配尺寸是什么的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。