一、ios篇

1、尺寸及分辨率

• iPhone界面尺寸

初代iphone

iPhone4

iPhone5

iPhone6/7/8

iPhoneXS

iPhoneXS Max

• iPad界面尺寸
  1024x768 2048x1536
  单位都是px（像素，网页UI与一定段UI分辨率一般都只要72）
  设计的时候不是每个尺寸都要做一套，一般采用750x1334的尺寸进行设计。

2、界面基本组成元素尺寸

• 状态栏（Status Bars）和导航栏（Navigation Bars）
  状态栏：我们经常说的信号、运营商、电量等显示手机状态的区域，40px，
  导航栏：显示我们当前界面的名称，包含想要的功能或者页面跳转按钮
  
  状态栏和导航栏

导航栏图标尺寸：在导航栏区域上的功能诸如搜索、添加、更多、返回等均需要用图标来表达

• 标签栏 （Tab Bars）
  标签栏指的是APP底部的区域，如微信底部常驻有聊天、通讯录、发现、我的四个图标。
  iPhone6/7/8设计中，标签栏的高度为49pt（98px），通常我们会在Tab栏图标之下加上11pt（22px）的注释文字，这个注释文字一般来说都是非常浅的浅灰色。

标签栏

造型

• 工具栏 （ToolBars）
  我们在苹果自带浏览器底部就能看到工具栏。工具栏提供了和当前任务相关的操作和按钮，在滑动时可以收起。工具栏同Tab栏一样都是位于底部，但是高度略窄，它的高度是44pt（88px）。

3、字体大小

• iOS中英文使用的是San Francisco (SF)字体，中文是苹方黑体
  手机上显示的最小字体10pt（20px），最大的是34pt（68px）。
  表1：HIG对APP的字体建议，只针对英文SF字体而言的（基于@2x）

表2：特殊区域字体建议（基于@2x）

表3：用户体验

4、图标尺寸大小

• 图标都是按照最大1024x1024进行设计的，之后按照比例缩小调整，高光部分与圆角不需要做，ios系统自动生成，一般图标最大做256x256，最小44x44。
  程序应用 120x120px

• 启动图标切图
  

  image.png

• 控件
  控件包括：输入框、按钮、滑杆、页卡、开关等，设计空间需注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm的区域，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。

5、色彩

其实在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考，用什么颜色是设计师的自由。官方建议的系统色彩如下：

系统建议色彩

6、UI布局概念

• 可点击对象的区域：尺寸不要小于44x44px；
• 将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从左到右的用户来说，更贴近屏幕左侧位置容易引起关注；
• 利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来说，更能吸引目光，看上去更加重要；
• 在iPhone6/7/8尺寸下，状态栏高度20pt(40px)、导航栏44pt(88px)、Tab栏49pt(98px)、导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px)。字号从10pt（20px）到34pt（68px）均可，要视具体情况决定。

• 作为iPhone全面屏系列手机，上下左右是圆角、顶部齐刘海使屏幕凹下一块。所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能，应留出一定的边距（Margin）。一般的APP会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。不过内容展现却可以呈现在边距里。

7、切图

• 图标切图
  有了大小各异的iPhone尺寸，如果程序只有一套切图，那么一定会造成有的手机显示很差。所以我们要在程序里放置多套切图，然后让程序判断“主人”的手机是什么型号，显示不同的切图。这样才能够完美地呈现给用户最好的体验。切图的方法有很多种。Sketch和Adobe XD可以直接导出。Phtoshop不具备这个功能，但是我们可以使用cutterman、蓝湖
  等插件导出切图。不管是自带功能还是插件，导出切图都可以导出@2x和@3x图，而设计稿只需要iPhone6/7/8一套即可。
  切图命名规范

然后我们要按照 功能_ 类型_ 名称_ 状态@倍数来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：

navi_icon_search_default@2x.png
导航_ 图标_ 搜索_ 正常@2x.png

• App Store截图
  在程序上传App Store时我们需要提供多张APP截图，供用户了解APP的功能。我们需要提供1242 x 2688px和1125 x 2436px两套截图。

  
  
• 闪屏页

8、视觉规范

一套APP应该有3-5种主题色和辅助色；5-10种不同变化的字体样式。一套移动端应用的视觉规范应该包括:
1、主色/辅色/色彩规范: 规定APP所能使用的色彩种类；
2、文字颜色/大小规范: 规定APP主要使用文字的大小、颜色、应用场景等；
3、ICON规范: 规定APP的icon设计规范;
4、应用图标规范: 规定APP的应用图标使用规范；
5、按钮和交互态规范: 规定APP内所有按钮和交互态的样式；
6、间距规范: 规定APP内所有间距的尺寸。

二、Android篇

1、尺寸及分辨率

• Android界面尺寸
  462x800 720x1280 1080x1920

• Android的尺寸要比IOS要多很多套，建议采用720x1280这个尺寸进行设计
  Android的APP界面与IOS基本相同：状态栏、导航栏、主菜单栏以及中间的内容。

• 状态栏高度：50px
  导航栏高度：96px
  主菜单栏高度：96px
  内容区域高度：1038px
  Android的规范没有IOS标准，很多 Android系统手机去掉了实体键，把功能键也放在屏幕上，高度与菜单栏高度一样：96px