移动端应用图标设计规范内的图标有统一规范么

IOS&Android_移动端屏幕与图标规范
这些是对移动端界面屏幕和图标尺寸的规范内容的相关整理,希望能帮助正在学习规范的UI设计师---------By第521颗流星:)
打开微信“扫一扫”,将本文章分享到朋友圈
快给朋友分享吧!
46人已收藏
小U妹文章推荐
Ctrl+Enter
你的打赏就是我的动力!
悄悄说,听说打赏的人收入都比我高,不信你试试。
注: 打赏金额随意,完成后,请手动关闭本窗口。
Ctrl+Enter
您将要删除您的普通推荐大作
IOS&Android_移动端屏幕与图标规范
在她入驻到UI中国的日子里
总共吸引了2540位设计师的驻足流连
总共收获了20位设计师的由衷赞赏
总共获得了46位设计师的悉心珍藏
总共引起了0位设计师的深入讨论
依然要删除吗?iOS移动产品APP界面设计规范 - 简书
iOS移动产品APP界面设计规范
编写目的:编写iOS移动产品设计规范(以下简称“设计规范”)主要是为了规范化公司移动产品设计,将常用控件的设计标准化,使其更符合iOS平台的特性,降低用户的学习成本。此外,也能让产品、UI、开发人员在产品细节上达成共识,减少沟通成本,提升开发效率。主要面向对象:产品人员、UI设计师、交互设计师、开发人员。适用范围:iOS平台上所有APP与大多数移动版网页。二.设计原则2.1设计依从:用户界面(UI)应当有助于用户理解内容并与之互动,而非对抗。清晰:文字在每种字号下都易于阅读,图标表意准确清晰,装饰也恰到其度,并以对功能的无比关注驱动设计。纵深:视觉上的分层界面和逼真的动作使其更赋活力,提升了用户的愉悦和理解。2.2交互可控:所有交互应该给予用户安全感,让人感觉程序可操纵性。适时反馈:永远在合适的时间出现,惊喜而非“惊吓”。有意义:交互是为了引导而存在,尽量避免无意义的炫技。三.格式3.1标准单位 3.1.1Pixels(像素) Pixels是数字显示屏上我们可控制的最小物理元素,在一个特定屏幕尺寸中可以有多个像素。3.1.2Points(点)Points用以衡量分辨率。根据屏幕的像素密度,一个point可以包含多个像素(比如在常规的Retina屏上,1pt包含2 x 2的像素)。3.2字体的选择iOS版本中默认字体都是Helvetica Neue。建议中文字体Mac下用的是Heiti SC(黑体-简)。Windows下则为华文细黑。设计以iPhone6的尺寸进行设计,所以所有的字号都要使用双号数字。
3.3字体大小(建议大小)
确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如(以iPhone6及以下尺寸为例):1)文本永远都不应该小于22px,内容样式使用34px的字号作为最大尺寸的默认文本尺寸设置。(个别情况:文字最小使用20px的,如标签栏图标的文字为20文字最大使用34px及以上的,如弹窗按钮文字为36px)2)为了区分标题与内容样式,标题样式使用更重的值,可以是颜色或字体大小区分。3)导航栏的文本使用相同的字号,值为34px。
3.4屏幕与显示
3.4.1 图像分辨率(ppi)PixelsPer Inch所表示的是每英寸所拥有的像素(Pixel)数目。因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。当然,显示的密度越高,拟真度就越高。我们在移动应用中提到ppi和dpi其实都一样(概念不同,但对设计来讲没有特别需要深入了解),所以我们先忽略掉dpi。1)第一代的iPhone屏幕密度:165 ppi;(基本已经淘汰)2)iPhone4开始后的屏幕密度:326 ppi;3)iPhone6 plus屏幕密度:401 ppi;iPhone6 plus缩减像素取样在iOS上渲染像素和物理像素(Physical pixels)是等同的,只有一个例外:iPhone 6 plus的Retina HD显示屏。由于它屏幕的像素分辨率要低于一个常规的@3x分辨率,所以被渲染内容会自动调整为原始尺寸的87%(从像素来适应为像素的显示屏分辨率)
3.4.2 iOS的常见分辨率和显示规格
3.4.3界面基本组成元素(建议高度)几乎所有的iOS应用都应用了UI Kit framework中定义的组件。了解这些组件的名字,作用和构成能够帮助你设计应用过程中做出更好的决定。界面基本组成元素包括:状态栏(Status Bar)+导航栏(NavigationBar)+标签栏(Tab Bar)/工具栏(Tool Tabs)+内容区域;
AppStore、Safari界面预览
3.5图标icon
每一个应用程序需要的应用程序图标和启动文件或图像。此外,一些应用程序需要自定义图标来表示应用程序的具体内容,功能或模式的导航栏,工具栏和标签栏。图标按照最大的尺寸px来设计,之后按比例缩小到每个尺寸,进行调整。提交没有高光和阴影的直角图形。(如下图所示)
设计时,可用栅格系统来帮助设计:
苹果开发了具有黄金分割比例的栅格系统,可用以正确地调整和对齐icon上的元素。不过,甚至是苹果设计师的原生App icon也没有完全严格地遵守栅格系统。所以如果你的icon上的元素在没有严格遵守栅格系统的情况下能更好地展示,那你可以考虑下打破一些固有的规则。一个APP所需提供以下6种图标尺寸:
3.6启动页图片尺寸
如果你需要为这些设备创建静态图像发布,请使用以下尺寸(个别情况要除去状态栏高度):iPhone4s(@2x):640x960px(640x920px)iPhone5s(@2x):640x1136px(640x1096px)iPhone6(@2x):750x1334px(750x1294px)iPhone6 plus(@3x):px(px)iPhone6 plus横屏启动:px四.按钮
4.1图标按钮iOS提供了许多与在内置的应用程序所使用的标准工具栏和导航栏按钮。所以,设计过程中请尽量不要“创造”图标按钮,而多使用iOS提供的标准图标按钮或在其基础上进行“适当”修改。工具栏和导航栏按钮举例:
iOS的包括一些表视图元素,可以扩展表视图功能。除非另有说明,这些元素都适合,只有表视图中使用。
各种"栏"的按钮icon:各种"栏"中的按钮icon应该有两种状态:默认状态下的1或者1.5pt笔画宽度的轮廓样式,以及纯色填充的活跃状态。
不要在按钮icon上添加任何额外的效果,比如下拉阴影或者内阴影。按钮icon应该在一个透明背景上以一种纯色进行绘制--icon的形状作为遮罩,颜色将会以编程形式应用。给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。控件最小可点击区域为:88x88 px(这个是针对开发人员)。
4.2 按钮状态说明
按钮状态在设计时主要分为普通(normal)、选中(selected)、高亮(highlighted)、不可点(disabled)四种,大部分按钮都包含了这4种状态。
4.3按钮样式要求
按钮三种样式:第一种是直角;第二种是圆角(圆角为8px);第三种是全圆角。
4.4设置按钮--开启、关闭样式,建议以下样式
用户可使用开关在"on"和"off"两种状态间切换。设计师可自定义两种状态的颜色,但是开关按钮的外观和尺寸是设定好的不能更改。五.常用设计元素(参考系统控件库)iOS提供了很多不错的现成的视图和控件,可帮设计师快速构建页面。设计师可以将一些元素自定义到某个级别,但是也有一些元素不能或者不应该进行自定义。当为iOS设计应用程序时,你应该知道一些工具集的使用,只要是可能,就应该坚持下去。但在一些情况下,可能需要设计一些自定义控件,因为你需要一个更加定制化的界面或者想要改变现有控件的功能(有点危险)。几乎任何一件事情都是有可能的,而有时候你需要打破既有的规则,不过需要三思。5.1状态栏(Status bar)
包含了基本的系统信息,比如运营商、时间、电池状态以及其他等,它在视觉上通常与导航栏联系在一起,并且使用相同的背景填充。
5.2导航栏(Navigationbar)导航栏包含在app多个视图间进行导航的控件,以及在当前视图中管理内容的选项。导航栏通常展示在屏幕的顶部,状态栏的底部。默认情况下,背景是半透明的,在导航栏下方还有模糊的内容。导航栏的背景可以是纯色的,渐变的或者是自定义的位图模式。
横屏模式下的iPhone 6导航栏
横屏模式下的iPhone 4S导航栏。导航栏的高度减了24px,除了iPad。这也是常见的横屏模式下隐藏状态栏的方法。元素应当遵循特定的对齐模式:1)返回按钮通常居左对齐。2)当前视图的标题应当居中展示在bar中。3)Action按钮通常居右对齐。如果可能的话Action按钮应当限制在一个主要操作行文,以避免错误点击,并维持其简洁性。5.3标签栏(Tab bar) (系统定制)用户可使用标签栏在APP的单个视图间快速导航,并且标签栏也只能用于这个目的。标签栏通常出现在屏幕的底部。默认情况下,标签栏是略透明的,并且向导航栏一样使用系统的模糊效果。
1)标签栏包含固定的最大数量的tabs,一旦标签数量超过其可容纳的最大数量,后边的标签将会展示在隐藏的"more-tab"列表中,并且有一个选项可重排标签顺序。2)虽然iPhone上最多可展示5个标签,但是在iPad上最多可展示7个标签。5.4工具栏(Tool bar)工具栏包含用于管理或者操作当前视图中内容的一些操作。在iPhone上,它通常出现在屏幕的底部,但在iPad上也能出现在屏幕的顶部。和导航栏类似,工具栏的背景填充也能调整,默认情况下工具栏本身是半透明的,在其下方还有模糊的视图内容。
当一个特定视图要求三个以上主要活动,但放在导航栏上又显得凌乱时,建议可以使用工具栏(作参考)。5.5搜索栏(Search bar)搜索栏默认有两种风格:突出的和最小化的。两种类型的搜索栏在功能上是一样的。1.只要用户没有输入文本,搜索栏中会展示占位符文本。2.键入搜索项目后,占位符消失,一个清晰的删除按钮会出现在搜索栏的右侧。搜索栏可以利用一个提示--一个短句来介绍搜索的上下文环境。比如"键入某个城市、邮政编码或者机场"
不使用提示和使用提示两种风格
最小化搜索栏类型
想要提供对检索词条的更多控制,可用Scope bar(范围栏)限制搜索栏,Scope bar会使用和搜索栏一样的风格,当搜索结果有清晰的定义类别时,这种方法比较有用。5.6分段控制(Segmented control)分段控制以放置更多的标签,可以通过在视图中左右滑动,切换不同的界面。可帮助用户定义搜索的范围。分段控制的数量最好控制在4个以内,必须要用竖线分割,超出4个,不建议使用这个样式。(如下图所示)
每个分段可包含一个文本标签或者一个图片(icon),但不能同时包含两者。另外,不建议在一个分段控件中混合使用不同的分段风格,比如文本和图片。每个分段的宽度会基于分段的数量自动调整(2个分段各占50%,4个分段各占25%)。5.7表视图(Table view)表视图以单列或者多列形式展示少数或者多个列表风格的信息,并有能将内容分组的选项。根据你展示的数据类型,通常可使用两种基本的表视图风格:无格式的:
分组样式:
分组表视图允许用户对内容进行分组。每个分组可以有页眉(最佳用法是描述类组的上下文环境)和页脚(适用于帮助文本等)。一个分组的表视图至少需要包含一个类组,并且每个类组至少要包含一行内容。对于以上两种表视图类型,可用几种风格来展示数据,以方便用户快速扫描、阅读和适当调整内容。默认:
默认的表视图有一个居左对齐的可选图片和标题。带有副标题:
在每行标题下展示小字号的副标题,适用于进一步的解释说明或者简短描述。带有数值:
带数值表类型可展示与行标题相关的特定数值。类似默认的类型,每行都有一个居左对齐的图片和标题。在该类型中,数值居右对齐,通常使用比标题淡一点的文本颜色。5.8活动视图(Activity view)活动视图用以展示特定的任务。这些任务可以是系统默认的任务,比如通过可用选项分享内容,或者是完全自定义的活动。当为自定义任务按钮设计icon时,你应当遵从活跃状态和栏按钮icon的一些设计指南--纯色填充、无任何效果、以及在一个透明背景上。
活动:活动页面用来执行可用操作列表中的单项操作,并且强迫用户确认或者取消某个活动。
在竖屏模式下(以及尺寸比较小的横屏模式下),活动以按钮列表形式滑入,并呆在屏幕的底部。这种情况下,活动列表应该有一个取消按钮来关闭视图和执行任何列表中的Action。5.9提醒视图(Alert view)提醒视图的目的是用来通知用户一些关键性的信息,并有选择地迫使用户做出选择。提醒视图通常包含一个标题文本(最好不要超过一行)、一个(纯信息提醒,比如"好")或者两个按钮(要求用户做出决定,比如"取消"或"好")。
5.10编辑菜单(Edit menu)用户可使用编辑菜单执行复制、粘贴以及剪切等操作。虽然你能控制用户可以选择哪个操作,但是编辑菜单的视觉外观是设定好的,不能重新配置,除非你设计一个完全自定义的编辑菜单。
5.11弹出视图(Popovers)当某项特定操作要求多个用户输入才能继续进行时弹出视图就非常有用了。在水平方向上,弹出视图可通过箭头指向展示下方相关的控件(比如按钮)。弹出控件的背景透明度稍有降低,可展示其下方的模糊内容,像iOS 7以后其他很多UI元素一样。
弹出视图是一种非常强大的临时视图,可包含类似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增加,其窗口也能滚动展示。5.12选择器(Pickers)选择器用来在一个可用值列表中选择某个值,和web上的下拉选框功能类似。选择器的扩展版本是日期选择器,允许用户滚动日期和时间列表来选择一个月、日以及具体时间。
除了背景色外,不可能更改其视觉风格或者尺寸。很多时候,选择器位于屏幕的底部,像键盘一样展示,但不能用在其他地方。5.13滑杆(Sliders)滑杆控件允许用户从允许值范围中选择一个特定的值。由于使用滑杆选择一个值的操作非常流畅,并且无需额外的步骤,所以建议在选择预估值的时候使用滑杆,而不是选择精确的值。比如滑杆可以很好地用来设置音量,用户可以听到和看到音量大小的不同,而通过输入文本来设置精确的DB值是不切实际的。
六.文件命名格式规范
同一功能下的切图放在一个文件夹下,文件夹用中文命名,名称由对应的功能模块确认。例:设置功能所有的切图放在“设置”文件夹下。
6.2文件切片命名规则设计的时候,我们以iPhone 6(750px/375pt)的尺寸作为基准设计,切图的时候我们通常需要切两套图。1)格式:普通:image.png;两倍图:image@2x.png;三倍图:image@3x.png。2)保存:png-24,保留透明度。3)尺寸:像素(避免出现小数,如@2x的图标为88x88,@3x的图标为132x132);4)命名:iPhone6及以下:模块_功能_控件_状态@2x.png
iPhone6plus:模块_功能_控件_状态@3x.png
需要用英文表示。举个例子:
文件命名实例与对应图示:
喜欢新鲜事物,聪明多变的双子座,心中却有份坚持~7301人阅读
Android(13)
移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现?
本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。
一、android篇
1、android分辨率
指实际的物理尺寸,为屏幕对角线的测量。
为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。
像素(PX)
代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。
为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi)&像素= DP * ( DPI / 160 )&例如,在一个240dpi的屏幕里,1DP等于1.5PX。
于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。
典型的设计尺寸
o&&320dp:一个普通的手机屏幕(240X320,320×480,480X800)
o&&480dp:一个中间平板电脑像(480×800)
o&&600dp:7寸平板电脑(600×1024)
o&&720dp:10寸平板电脑(720××1280)
Android SDK模拟机的尺寸
低密度(120)ldpx
中等密度(160)mdpi
高密度(240)hdpi
超高密度(320)xhdpi
QVGA(240×320)
WQVGA400(240X400) WQVGA432(240×432)
HVGA(320×480)
WVGA800(480×800) WVGA854(480×854) 600×1024
WVGA800 *(480X800) WVGA854 *(480X854)
WVGA800 *(480×800) WVGA854 *(480×854) 600×1024
80×768WXGA()
dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。
注意,ppi、dpi 是密度单位,不是度量单位:
* ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)
* dpi (dots per inch): 打印分辨率 (每英寸所能打印的点数,即打印精度)
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的手机则很接近 160dpi(mdpi模式)。
2、单位换算方法
android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。
* dp:Density-independentpixels,以160PPI屏幕为标准,则1dp=1px。dp和px的换算公式 :dp*ppi/160 = px。对于320ppi的屏幕,1dp x 320ppi/160= 2px。
* sp:Scale-independentpixels,它是安卓的字体单位,以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=1.5px :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;
当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;
3、设计稿基本元素的尺寸设置
为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、设计稿标注等。但在实际开发中,这种方法耗时耗力。所以通常会选择折中的方法。
方法一:在标准基础上(比如xhdpi)开始,然后放大或缩小,以适应到其他尺寸。不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。
方法二:以最高分辨率为基准设计,然后缩小适应到所需的小分辨率上。缺点是,图标等若都最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。
结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位,推荐设计稿的画布尺寸选用 720X1280 ,分辨率仍旧为72ppi(像素/英寸)。
在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求:
状态栏高度:50 px
导航栏、操作栏高度:96px=48dp x 2
主菜单栏高度:96 px
内容区域高度:1038 px(-96=1038)
Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px
4、图标和字体大小(来自官方规范文档)
a、启动图标(home页或app列表页)
整体大小为48 x 48dp
b、操作栏图标,代表用户在app中可以使用到的最重要的图标
整体大小为32 x 32dp ,图形实际区域为 24 x24 dp
实际区域分辨率
整体大小分辨率
c、小图标/场景图标,提供操作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x16 dp ,图形实际区域为 12 x12 dp 。
实际区域分辨率
整体大小分辨率
d、通知图标
如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x24 dp ,图形实际区域为 22 x22 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 。
6、png图在线工具
在线自动生成.9png图的Android设计切图工具推荐
ps在线版 Photoshop在线精简版
iPhone 界面尺寸:320×480、640×960、640×1136
iPad 界面尺寸:、
(以上单位都是像素,至于分辨率一般网页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
以上尺寸适用于 iPhone4、4S,iPhone5/5s 的 640×11136 的尺寸,其实就是中间的内容区域高度增加到:910 px,其他尺寸也同上。
4、常用图像、图标大小(来自官方规范文档)
5、字体大小
iOS交互设计规范文档上,对字体大小没有做严格的数值规定,只提供了一些指导原则:
单位:点pt
– 即便用户选择了最小文字大小,文字也不应小于 22 点。作为对照,正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。
– 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式,在最小、小和中等设置时都使用相同字体大小、行间距和字间距。
– 在最小的三种文字大小中,字间距相对宽阔;在最大的三种文字大小中,字间距相对紧密。
– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。
– 导航控制器中的文字使用和大号的正文样式文字大小(明确来说,是 34 点)。
– 文本通常使用常规体和中等大小,而不是用细体和粗体。
百度用户体验做过的一个小调查:
单位:像素px
还有个方法就是找你觉得好的APP应用,手机截图后放进PS自己对比调节字体大小。
1、ipad设计尺寸
2、ipad图标尺寸
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:3546978次
积分:38078
积分:38078
排名:第87名
原创:449篇
转载:400篇
评论:1081条
(6)(5)(7)(1)(3)(1)(3)(3)(1)(1)(1)(3)(3)(1)(2)(1)(3)(2)(1)(7)(2)(2)(2)(4)(2)(4)(7)(1)(1)(21)(15)(3)(2)(3)(1)(3)(2)(7)(10)(5)(6)(7)(12)(3)(7)(7)(15)(9)(9)(18)(21)(7)(9)(7)(8)(44)(10)(26)(5)(2)(1)(7)(12)(1)(2)(1)(3)(7)(11)(10)(2)(3)(1)(1)(1)(9)(7)(3)(7)(1)(2)(5)(3)(1)(13)(92)(103)(25)(2)(57)(26)(4)(45)

我要回帖

更多关于 建筑施工统一验收规范 的文章

 

随机推荐