APP设计规范


本设计规范基于Android Design设计准则、Material Design设计准则、iOS 7以及iOS 8官方人机交互界面准则

APP设计规范随着系统的不断变更而变更,两大平台的设计规范也在不断地借鉴参考,在很多方面越来越接近彼此,但是并不意味着所有的平台都沿用一套设计。
所有平台沿用一套设计容易造成和原平视觉风格不符的缺点(iOS中出现Android的样式,Android中出现WindowsPhone的样式,都是不合适的),并且可能使开发成本大大(为了达到另一个平台风格的样式效果需要去调用第三方插件,会破坏原来的框架,造成性能的下降和开发时间增长)

这里仅讨论Android和iOS系统,其他平台APP、WebAPP、混合式APP均不列入讨论范围,但可以借鉴

Android

基础单位

  • 图形--DP(开发中使用):
Screen DPI Exchange
360x640 MDPI 1DP=1PX
480x960 HDPI 1DP=1.5PX
720x1280 XHDPI 1DP=2PX
1080x1920 XXHDPI 1DP=3PX
1440x2560 XXXDPI 1DP=4PX
  • 字体--SP(开发中使用):

与DP相似,1DP=1SP

  • PX(设计稿中使用)

字体

  • 中文:Droid sans / 思源黑体
  • 英文:Roboto系列
  • 字体排版见附录

屏幕尺寸(PX)

android设备太多,具体尺寸不细列,只列标准dpi尺寸

Screen DPI Number
360x640 MDPI 160
480x960 HDPI 240
720x1280 XHDPI 320
1080x1920 XXHDPI 480
1440x2560 XXXDPI 640

界面元素

在新的Matearial Design中,Google重新定义了Android的设计和交互,不再是4.0之前那个混乱的时代,相继推出了Android Design 和Matearial Design 。

图标与图像

  • Play Store应用图标:512x512px,PNG
  • 应用图标:48x48dp
  • 操作栏图标:大小32x32dp,类似黑体字体的风格,尽量使用Android内置图标
  • 通知栏图标: 大小24x24dp,使用黑白的简单平面样式
  • 启动画面:根据不同分辨率制作启动画面在不同分辨率下屏幕尺寸也不一致,因此我们一般都是保证启动画面的边缘都是纯色,根据上述提供的不同分辨率下的标准尺寸来制作启动画面,然后通过设置背景色的方法使得背景与启动画面相契合,实现了无失真(相关解决方法

边框与边距

  • 设计时采用间隔为8dp的基准网格,所有的组件都与8dp网格对齐;
    文字则是与间隔为4dp的网格对齐。工具条中的图标与间隔为4dp的基准网格对齐。


  • **状态栏:
    **高度24dp
  • **导航栏:
    **高度56dp,标题文字居左
  • **列表页:
    **带有多行信息的单个列表最小高度72dp不可交互的当行信息单个列表最小高度48dp


  • 垂直边框和水品外边距:
    左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。
  • 基本界面元素之间的间距为8dp
  • 页面最小触摸目标最小尺寸为48x48dp,当为图标(24dp)或者头像(40dp)时,触摸触发区域不与触摸目标重叠

悬浮响应按钮FAB

在新的Matearial Design中,FAB按钮是一个新推出的元素,主要有两种尺寸:56dp和40dp ####

切图规则(切图工具:Cutterman

  • 所有尺寸数值必须为偶数
  • 尺寸标注必须要清楚,尽量用dp标注,方便开发 (标注工具:马克鳗Markman / PS动作插件)
  • 非可平铺变形图:
    按照web切图进行
  • 可平铺变形图(按钮等):

点9图切图,PNG格式,后缀名.9.png >点9切图教程--ISUX

iOS

基础单位

  • PT(开发中使用)-----------普通屏1pt=1px,retina屏1pt=2px
  • PX(设计稿中使用)

字体

  • 中文:华文细黑/华文黑体
  • 英文:Helvetica

屏幕尺寸(PX)

实际iPhone app设计中一般以5S或者6为模板

  • 320x480(1/3G/3GS)
  • 640x960(4/4S)----------------Retina
  • 640x1136(5/5S)--------------Retina
  • 750x1334(6)-------------------Retina
  • 1242x2208(6+)----------------Retina
  • 768x1024(1/2/3/mini)
  • 1536x2048(new/4/mini2)-----Retina

界面元素

在APP开发中,因为存在不同屏幕不同尺寸,所以除了banner以及某些我们需要限定的界面元素外,宽度一般是自适应的,设计的时候重点在于元素与整个页面的边距、元素与元素的边距

图标与图像

  • App Store应用图标:
    1024x1024px,圆角180px,PNG
  • 应用图标:
    iPhone-120x120px
    ipad-152x152pxpx
  • 操作和工具图标:
    尽量使用iOS内置图标,具体尺寸见具体运用位置
  • 启动画面:
    根据目标设备的不同尺寸制作不同的启动画面

条栏

  • 状态栏:
    高度40px,高度始终不变
    位置最顶部
    颜色:#fff、#000或者全透明
  • 导航栏:
    高度88px,高度在屏幕旋转时可自动调整
    位置顶部,半透明
    栏内字体:字号34pt,加粗效果,标题居中
    栏内图标:44x44px
  • 标签栏:
    高度98px
    位置底部
    栏内图标:44x44px
  • 工具栏:
    高度88px,高度在屏幕旋转时可自动调整,iPhone上在底部出现,iPad上在顶部出现
    栏内图标:50x50px(最大96x64px)
  • 内容视图:
    标题文字加粗效果,正文一般使用34px字号,每一档文字大小行间距差异为2pt;
  • 可交互性文字采用颜色表示高亮,不可交互性文字除非是十分重要的强调式文字否则不予颜色
  • 页面可交互元素最小尺寸为44x44px
  • 最小文字不应小于22px

切图规则(切图工具:Cutterman

  • 所有尺寸数值必须为偶数

  • 尺寸标注必须要清楚,尽量用pt标注,方便开发 (标注工具:马克鳗Markman / PS动作插件)

  • 非可平铺变形图:
    PNG或者JPG格式,针对Retina屏幕,需要切成@1X和@2X,2x图需要在文件名后面加@2x。如iPhone5S,一个640x300px的banner图,需要切成banner.png(320x150)和banner@2x.png(640x300)。
    如果你还需要支持iPhone6+,则需要再导出一张图片,后缀为@3X。

  • 可平铺变形图(按钮等):

遵循上述切图规则的同时,有以下特殊:



注意事项

  • 尤其注意考虑到设备旋转以及手机平板切换时候的app界面布局情况,若无需要可以关闭旋转的需求;

工具汇总

切图命名事项

  • 切图分层级命名
    命名尽量不要太多,一般是 「页面+定位+类型+标题+属性」
    例子:
    home_tabbar_icon_home_s@2x.png
    account_list_icon_arrow_left@3x.png
  • 分文件夹管理
    按照页面>项目>版本的文件夹分类
    例子:
    主页>Mobile-Web>1.0版本
    内容页>Reading-APP-iOS>2.1版本
  • 做好命名的目的
    方便自己检索
    方便开发检索

附录

  • Android L常用字体边距规格对照表



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容