移动应用界面设计的尺寸设置及规范
移动互联网手机APP原型设计规范

移动互联网产品原型尺寸规范最近公司安排我带一下新来的交互设计师,我想给他制定一份交互设计规范。
这样一来,即使新来的交互设计师没什么基础,也可以根据这一份规范,做出大致标准的原型图。
因为Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。
所以,交互设计稿的尺寸,就按照iPhone6的尺寸来做。
1、iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为750x1334px。
状态栏(status bar):就是电量条,其高度为:40px;导航栏(navigation):就是顶部条,其高度为:88px;主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px截图如下:推荐3款测量工具为:MarkMan马克鳗,Dorado标注,PXcook像素大厨。
2、关于iPhone6的图标的尺寸:导航栏的图标高度为44px左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。
关于iPhone6的文字的尺寸:导航栏的文字大小最大值是34px,标签栏的图标下方的文字大小为20px。
内容区域的文字大小是:24px,26px,28px,30px,32px,34px。
3、(iPhone6设计稿尺寸是@2x),做原型图的时候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。
4、设置界面的图标高度和开关滑动按钮的图标高度:58px。
参考下图:5、关于颜色,自从我做了3套高保真的交互原型图之后,发现后面还是改成画线框图来的快。
线框图的黑白灰之纯美,有利于专心布局界面,而不用在意界面的颜色搭配。
黑白灰颜色常用的数值是:文字黑色#282828文字深灰色#656565文字浅灰色#98989边框浅灰色#C3C3C3背景淡灰色#f2f2f2按钮背景纯白色#ffffff6、常用的可点击高度,在iPhone6的原型图上,统一成88px。
移动端尺寸规范

移动端尺寸规范移动端尺寸规范是针对移动设备上的用户界面设计的一组标准化尺寸规范。
移动设备的屏幕尺寸多种多样,不同的设备有不同的屏幕尺寸和分辨率,因此设计师需要遵循一定的规范来确保设计在不同设备上的一致性和可用性。
下面是关于移动端尺寸规范的一些要点。
1. 响应式布局:移动设备的屏幕尺寸和方向不断变化,因此设计师需要采用响应式布局来适应不同的屏幕尺寸。
响应式布局可以根据设备屏幕尺寸的变化自动调整元素的大小和位置。
2. 分辨率适配:不同的移动设备有不同的屏幕分辨率,设计师需要根据不同设备的分辨率来适配设计。
常见的屏幕分辨率包括320x480、640x960、750x1334、1080x1920等,设计师需要确保设计在不同分辨率下能够正常显示。
3. 导航栏高度:移动设备上的导航栏通常位于屏幕顶部,用于显示各种导航和操作按钮。
导航栏的高度可以根据具体设计需求来确定,一般建议在48px至56px之间。
4. 底部导航栏高度:移动设备上的底部导航栏通常位于屏幕底部,用于显示底部菜单和操作按钮。
底部导航栏的高度可以根据具体设计需求来确定,一般建议在48px至56px之间。
5. 图标大小:移动设备上的图标大小需要适应屏幕尺寸的变化,一般建议使用矢量图标来保证图标在不同尺寸下的清晰度。
图标的尺寸可以根据具体设计需求来确定,一般建议在16px至24px之间。
6. 文字大小:移动设备上的文字大小需要适应屏幕尺寸的变化,一般建议使用相对单位(如em或rem)来定义文字大小,以便根据屏幕尺寸的变化自动调整文字大小。
文字的大小可以根据具体设计需求来确定,一般建议在14px至18px之间。
7. 行高:移动设备上的行高需要根据文字大小来确定,以确保文字在不同设备上的可读性和排版效果。
行高一般建议设置为文字大小的1.5倍至2倍之间。
8. 边距和间距:移动设备上的边距和间距需要适应屏幕尺寸的变化,以保证界面的美观和可用性。
一般建议将边距和间距设置为8px至16px之间。
APPUI设计规范ppt课件

程序应用
Iphone6 1024x102 180x180
plus
4px
px
Iphone6/6 1024x102
s
4
px
Iphone5/5 1024x102
c/5s
4
px
Iphone4/4 1024x102
s
4
px
120x120 px
120x120 px
120x120 px
主屏幕
114x114 px 114x114 px
开发的,所以此设定尺寸为1,算出各个尺 寸的比例,然后乘以4,各个尺寸都能满足 是整数,可以保证开发时不会模糊。@2px (视网膜屏的到来)切图设计稿尺寸是 640x960px,所以设计时最小的单位尺寸是 8px。 使用8px原理的目的
保证在双平台上大部分机型开发中不会 出现模糊的变形的问题;而且只需设计一套 设计稿,减少设计师的工作量,提高工作效 率。
401 ppi 326 ppi 326 ppi 326 ppi
54 px 40 p88 px 88 px
146 px 98 px 98 px 98 px
ppi(pixels per inch)即每英寸像素,也叫像素密度。
3
图标尺寸
设备
APP store
25
24
48DP定律
48dp作为安卓可触摸的UI元件的标准。 一般来说,48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫 米的范围,这是一个用户手指能准确并且舒适触摸的区域。 如果你设计的元素高和宽至少48dp,你就可以保证: (1). 触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上 显示。 (2). 在整体信息密度和触摸目标大小之间取得了一个很好的平衡。 而每个UI元素之间的空白通常是8dp.
移动应用界面设计规范

移动应用界面设计规范移动应用界面设计是移动应用开发中至关重要的一环。
良好的界面设计能够提升用户体验,增加用户粘性,使应用更加易用和吸引人。
为了确保移动应用的界面设计达到最佳效果,以下是一些移动应用界面设计的规范和要点。
一、界面布局1. 界面布局应简洁明了,功能模块应合理划分和组织,以便用户快速找到所需功能。
2. 采用一致的导航和菜单设计,使用户在不同页面间能够轻松切换和导航。
3. 重要功能和信息应放置在界面的显著位置,方便用户快速识别和操作。
4. 合理设置界面元素的大小和间距,以适应不同屏幕尺寸的移动设备。
二、颜色和样式设计1. 选择适合应用风格和主题的配色方案,保证界面整体和谐统一。
2. 注意颜色的对比度,以确保文字和图标在不同背景下的清晰可见。
3. 利用元素的形状、边框、阴影等设计元素,增加界面的层次感和美观度。
4. 尽量使用标准化的图标和按钮样式,减少用户对不熟悉图标的解读成本。
三、字体和文字1. 选择合适的字体大小和样式,使文字在不同设备上都能清晰可读。
2. 利用字体的粗细、颜色等样式设置,突出界面中重要信息和功能的关键性。
3. 避免使用过长的文字描述,简洁明了的文字能更好地吸引用户的注意力和理解。
四、交互设计1. 操作和反馈应迅速有效,用户的交互体验应流畅自然。
2. 合理设置按钮和链接的大小和响应区域,以免用户操作时出现误触。
3. 提供明确的操作指引和提示,引导用户完成复杂或关键操作。
4. 操作后的状态变化和结果反馈应及时显示,以增加用户对操作的掌控感。
五、排版和布局1. 使用合适的排版和布局方式,使界面信息有序地呈现给用户。
2. 采用分组和层叠的布局,以区分不同模块和功能,避免界面显得杂乱。
3. 对于长页面的内容,采用适当的滚动和分页方式,以提高内容的可浏览性。
六、图标和图片1. 使用高质量的图标和图片,保证在不同屏幕分辨率下都能清晰可见。
2. 图片的尺寸和格式应适应移动设备的特点和要求,减少加载时间和流量消耗。
移动应用开发技术的界面布局和排版技巧

综上所述,移动应用开发技术的界面布局和排版技巧在提升用户体验和吸引用户方面起到至关重要的作用。通过遵循用户使用习惯、传递逻辑、设备适配和注重美学和用户体验等方面的原则,能够设计出令人满意的应用界面。作为移动应用开发者,我们需要不断学习和了解最新的技术和设计趋势,以不断提升自己的设计能力,为用户带来更好的移动应用体验。
移动应用开发技术的界面布局和排版技巧
移动应用开发技术的发展,已经成为现代人生活中不可或缺的一部分。不论是购物、社交、学习还是娱乐,移动应用已经渗透到我们的生活方方面面。而一个吸引人的应用除了功能的强大还需要有一个好的界面布局和排版,以提升用户体验和吸引用户。
首先,界面布局和排版需要符合用户的使用习惯。循用户习惯是设计好界面的第一步。例如,将常用的功能按钮放置在易于点击的位置,避免用户需要大幅度的移动手指。此外,考虑到用户的左右手习惯,我们需要灵活地设置操作按钮的位置,以方便用户的使用。
此外,界面布局和排版还需要考虑到不同尺寸的移动设备。随着移动设备的不断发展,屏幕尺寸和分辨率也变得各异。因此,在设计应用界面时,我们需要考虑各种屏幕尺寸和分辨率的适配。通过使用自适应布局或者响应式设计,能够确保应用在不同的设备上都能够呈现出良好的界面效果,提供一致的用户体验。
最后,界面布局和排版还需要考虑到美学和用户体验。一个好的界面设计应该注重美学和用户体验,从而提升应用的吸引力和用户留存率。通过选择合适的颜色、字体和图标,以及运用合理的空白和边距,能够创造出简洁、美观且易于操作的界面。此外,注意保持界面的简洁性,避免信息的过度堆砌,以免给用户带来困扰。
APPUI设计规范

APPUI设计规范APPUI设计规范是指在移动应用程序的用户界面设计过程中所遵循的一系列准则和标准。
一个好的UI设计规范能够提高用户的使用体验,提升应用的可用性和吸引力。
本文将从布局、颜色、图标、字体等方面介绍APPUI设计规范。
一、界面布局1.保持简洁:尽量避免过多的元素和复杂的结构,确保界面整洁清晰,提高用户的阅读和操作效率。
2.合理分组:将相似功能的操作按钮和信息内容进行归类分组,以便用户快速找到需要的功能和信息。
3.明确导航:使用易于理解和直观的导航结构,确保用户可以方便地浏览应用的各个功能模块。
二、颜色选择1.采用品牌色:根据应用的品牌定位和设计风格,选择合适的主色调,并在整个应用中保持一致。
2.使用鲜明对比色:在重要的提示信息和操作按钮上使用鲜明对比的颜色,以吸引用户的注意和引导其行为。
3.注意色彩搭配:颜色的搭配要遵循一定的规则,保持整体的和谐统一,并考虑用户群体的习惯和审美需求。
三、图标设计1.简洁清晰:图标应该尽量简洁明了,以便用户一目了然地了解其功能。
2.保持一致性:在整个应用中使用一套统一的图标风格,以提升用户的辨识度和学习记忆。
3.考虑大小:图标的大小需要根据不同的设备和屏幕进行适配,确保在各种分辨率的屏幕上均能够清晰显示。
四、字体设计1.选择合适字体:根据应用的风格和定位,选择合适的字体类型和字号,以提升用户的可读性和阅读体验。
2.排版规范:合理设置字体的行间距、字间距和对齐方式,以保证文字内容的整齐美观和易于阅读。
3.注意字体颜色:字体颜色的选择要与背景颜色形成良好的对比,以确保文字清晰可见。
五、交互设计1.简洁明了:操作按钮和功能入口要清晰明了,避免复杂的操作流程和冗余的功能内容,提高用户的操作效率。
2.反馈及时:对于用户的操作反馈要及时明确,使用动画、声音等方式增强用户的交互感受。
3.手势操作:合理运用手势操作,提供多种途径和方式供用户进行交互,以满足不同用户的操作习惯。
iOS_App界面设计规范

Navigation Bar and Toolbar Icon Size
• Use the following size for guidance when preparing custom navigation bar and toolbar icons, but adjust as needed to create balance.
Attribute Format Color space Layers Resolution Shape Value PNG sRGB or P3[See Color Management] Flattene with no transparency Varies[See Image Size and Resolution] Square with no round corners
@2x
@2x @2x @2x
4.7
4 4 3.5
326
326 326 326
375 x 667pt
320 x 568pt 320 x 568pt 320 x 480pt
一.标准位
• Pixels(像素): Pixels是数字显示屏上我们可控制的最小物理元素, 在一个特定屏幕尺寸中可以有多个像素。 • Points(点):Points用以衡量分辨率。根据屏幕的像素密度,一个 point可以包含多个像素(比如在常规的Retina屏上,1pt包含2 x 2 的像素)。 • 英寸:1英寸 = 2.54厘米
一.标准单位
• PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的 像素(Pixel)数目。PPI数值越高,代表显示屏能够以越高的密度 显示图像,即通常所说的分辨率越高、颗粒感越弱。
移动应用中的用户界面设计原则

移动应用中的用户界面设计原则移动应用是现代人们生活的一部分,越来越多的人使用手机和平板等移动设备来满足他们的需求。
而用户界面设计在移动应用中起着至关重要的作用。
一个良好的用户界面设计可以提高用户的使用体验,增加用户对应用的满意度和忠诚度。
那么,在设计移动生成应用的用户界面时,有哪些原则是必须要遵循的呢?首先,简洁明了是一个好的原则。
在移动应用中,屏幕空间是有限的,因此用户界面设计需要简洁明了,避免冗长的文字描述和复杂的操作。
在设计界面时,应尽量采用简单明了的图标和按钮,以及清晰易懂的文字提示,以帮助用户快速理解应用的功能和操作。
整个界面应该简洁、干净,让用户一目了然,避免繁杂的信息干扰用户的使用体验。
其次,一致性是一个重要的原则。
用户界面的一致性可以提高用户的使用效率,减少用户的混淆和迷失感。
在设计界面时,应尽量保持整体风格的统一,如采用相似的颜色、字体和排版等。
同时,在不同的界面之间保持一致的操作逻辑,如相似的按钮位置和相似的操作方式等。
这样,用户可以更快地适应并掌握应用的使用方法,提高他们的满意度和忠诚度。
另外,反馈和响应是一个必要的原则。
用户在使用移动应用时,经常需要与应用进行互动,而好的用户界面设计需要提供及时的反馈和响应,以增加用户的参与感和满意度。
例如,当用户点击一个按钮时,应该有明确的反馈,如按钮变色、发出声音或显示动画等。
当用户进行一项操作时,应该有及时的响应,如加载进度条或对话框等。
这样,用户可以感受到应用对他们操作的重视和关注,提高他们的使用体验。
此外,清晰的导航是一个关键的原则。
移动应用往往有许多不同的功能和页面,设计一个清晰的导航系统可以帮助用户快速定位和切换功能。
在设计界面时,应尽量使用简单明了的导航图标和文字,以及明确的页面标题。
同时,应提供明确的导航路径和反馈,以帮助用户清晰地了解自己当前所在的位置和应用的结构。
这样,用户可以更方便地浏览和使用应用,提高他们的操作效率和满意度。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
【总结】移动应用界面设计的尺寸设置及规范时间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模式)。
来自友盟指数2014年3月份的数据(戳这里看最新数据):480 x 800的手机占比最高为%,720 x 1280的手机占比为%位居第二,而240 x 320的手机占比最少为% 。
xxdhpi模式的高分辨率1080 x 1920手机占比也越来越高,目前为% 。
2、单位换算方法android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。
这些单位如何换算,是设计师、开发者需要了解的关键。
* dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px。
dp 和px的换算公式:dp*ppi/160 = px。
对于320ppi的屏幕,1dp x 320ppi/160 = 2px。
* sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。
sp 与 px 的换算公式:sp*ppi/160 = px。
对于320ppi的屏幕,1sp x 320ppi/160 = 2px。
简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。
为什么要把sp和dp代替px?原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。
也就是说更接近物理呈现,而px则不行。
根据单位换算方法,可总结出:当运行在mdpi下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;当运行在hdpi模式下时,1dp= :也就是说设计师在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 (=1038)Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px4、图标和字体大小(来自官方规范文档)a、启动图标(home页或app列表页)整体大小为48 x 48 dpb、操作栏图标,代表用户在app中可以使用到的最重要的图标整体大小为32 x 32 dp ,图形实际区域为 24 x 24 dpc、小图标/场景图标,提供操作或特定项目的状态。
比如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 。
5、一点疑问供探讨在720 x 1280 px 的设计稿上,有两个按钮(比如登录、注册)并排一行放置,尺寸均为320 x 80 px ,换算为android开发单位就是 160 x 40 dp 。
根据前面的计算方式,如果显示在 480 x 800的手机上,反过来换算为px尺寸就是 240 x 60 px ,此时两个按钮排放在一行,刚好是480px=屏幕横向尺寸,铺满了整行,显然显示效果并不合适。
如果遇到这种情况,如何做呢?咨询android开发工程师,得到的答案是可能需要做自适应处理,不过目前他们都是写固定的dp值。
所以我想设计师是否也需要考虑——在基准分辨率下设置的尺寸换算在其他分辨率下,是否也能优雅显示?二、iOS篇1、分辨率iPhone 界面尺寸:320×480、640×960、640×1136iPad 界面尺寸: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,其他尺寸也同上。