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常用字体边距规格对照表



推荐阅读更多精彩内容