APP设计规范

作者: LeapDeXign | 来源:发表于2015-06-08 15:57 被阅读18096次

本设计规范基于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常用字体边距规格对照表



相关文章

  • 2019设计之旅38-设计清单分享

    第三二章交互干货必收_App界面交互设计规范 设计清单第32期:用时约3分 APP设计规范主要包括对界面布局、背景...

  • 【产品与设计】本文集说明

    6.1 用户体验6.2 App界面交互设计规范6.3 Axure原型图

  • APP设计规范

    本设计规范基于Android Design设计准则、Material Design设计准则、iOS 7以及iOS ...

  • iOS和安卓的设计规范有何不同?

    读了安卓和iOS的设计规范再看app,有一种指出“这是巴洛克风格的建筑设计”的乐趣。 想看设计规范原文直接点 安卓...

  • [译] iOS设计规范:概述一

    iOS设计规范 作为一名APP设计师,你可以设计一款被App Store推荐的APP。但是怎么样的APP才会被Ap...

  • 视觉设计规范那些事

    说到视觉设计规范,设计师们都不算陌生。例如一款APP,我们若只是设计界面而没有视觉设计规范,会直接影响到项...

  • app界面设计规范

    iOS和Android的app界面设计规范 http://www.yixieshi.com/ucd/20952.h...

  • [转载]app后端API开发总结

    app后端API开发总结 25 Jun 2015 一.API 设计规范 1.1 按需Restful设计原则 按业务...

  • App字体设计规范

    APP UI字体设计规范,这些或许你还不知道 APP UI在设计的时候对字体的运用还是需要经验积累的,不是随便往上...

  • APP接口设计规范

    前言 没有最优的方案,只有最适合的方案,本文指出对APP接口设计的一些规范与大家分享和共勉。涉及到APP接口设计规...

网友评论

  • c49f3f472986:请问,想了解APP设计规范。可以推荐几本规范的书么?
    c49f3f472986:@LeapDeXign 好的,谢谢!
    LeapDeXign:@景瑟_4879 看官方的设计规范就可以了,然后多看看不同的app
  • 30d20aaa9989:请问Android都是用dp表示单位,请问有和ios一样的px单位的数值吗?另外dp怎么换算成px呢?是否可以换算:disappointed_relieved:
    30d20aaa9989:@LeapDeXign 灰常感谢!!:blush:
    LeapDeXign:一般都是根据机型去做匹配的,dp只是统一单位,设计稿中还是1以px或者pt为单位去做的,换算在android那一节的开头就有的了😊
  • 清风徐来花满楼:还是没有图片,还有一直不知道马克鳗长度标记的单位是什么?还望楼主解答,谢谢!
    清风徐来花满楼: @LeapDeXign 谢谢!
    LeapDeXign:图片已补齐,markman标记的单位是px
  • 缥缈猫:为这片文下载了简书
  • 刘畅的大白菜名:thanks for your sharing
  • 1879edaa6a2b:MDPI 320*480 HDPI480*800
  • 5266bc0c17bd:所有尺寸数值必须为偶数,都指的是哪些? 文字与方框或控件的距离也要偶数的吗
    LeapDeXign:@5266bc0c17bd 指常用的尺寸单位px,因为iOS需要转换为pt,在retina屏幕上1pt=2px,所以你设计的时候不能出现5px,因为没有2.5pt这种东西。所有的元素都要偶数px,除非一些你想特别展现的一些元素,比如1px的分隔线,这个时候最好直接切成图片给开发让他另作。
  • 三辰:某些数值跟我记得不太一样,我要核实下,但其他部分,包括总结方式都是我见过最清楚最明白的,谢谢分享。:sob::sob::sob:
    三辰:@林记杂货铺 但是思路真的挺好,有很多之前想不通的问题都想通了
    LeapDeXign:@三辰 写的很粗糙,趁着年终估计会再改改:)
  • 1d69609fae7d:相当不错呀!正好要用到!谢谢楼主!楼主一生平安!
  • 3e0786c2fa6c:很不错的总结,不过文中好几张图挂掉了,楼主检查一下。
    LeapDeXign:@wgmjw 因为Apple撤掉了iOS8的HIG,所以涉及到iOS部分的示例图片失效了,目前已更换
    8b598e8a6e2a:@林记杂货铺 依然没有图片啊
    LeapDeXign:@zhum 谢谢提醒,已经更正图片链接。

本文标题:APP设计规范

本文链接:https://www.haomeiwen.com/subject/jrfjqttx.html