Andorid&ios基础UI设计规范

开始App视觉设计前，定义好安卓或者iOS基本的尺寸及布局包括但不限于：App色调，icon尺寸，font大小，button样式、列表、其他组件、加载、空状态等。

安卓和iOSApp设计稿尺寸分别为: 安卓720*1280px  iOS 750*1334px  

视觉设计完成进行尺寸适配

安卓：XHDPI   XXHDPI    XXXHDPI

IOS：@1X @2X @3X

网站上已经有很多详细的规范说明，以下内容仅依据之前项目的迭代整理输出的一些简单基础规范。在日常项目中一般确定通用的设计尺寸后便开始进行完整视觉稿的输出，设计稿完成后跟前端及开发沟通合理的适配和切图方式。

（文末有其他网站或者大神整理的全面详细的关于UI规范、命名、安卓MD设计规则）

字体 font

Android 字体

中文：思源黑体 / Noto Sans Han

英文：Roboto

大小：主题文字 36-34px    正文 28-26px     提示文字 24-22px

iOS 字体

中文：苹方 / PingFang SC

英文：San Francisco Pro (SF UI Text 、SF UI Display)

大小：主题文字 36-34px    正文 28-26px      提示文字 24-22px

颜色 color

在开始设计之前要确定页面使用的色调，要符合App调性，确定主色调（70%）及辅助色（30%），颜色尽量不超过三种

主色： #506fc8 （核心按钮、文字选中、主菜单标题等）

辅助色： #ff6633 #76c80e（操作按钮、提醒文字等）

color

页面基本布局 layout

内容区颜色：conter #ffffff   背景颜色 ：bgcolor #f5f7ff

投影数值（Android）：color #d9ddeb angle 90° mask 10

内容上下间距：30-20px 页面左右间隔 32px

Android&ios设计尺寸

导航栏Nav bar：

Android: 720*96px  icon 48px font 36px

IOS: 750*88px  icon 44px font 34px

Nav-bar

主菜单栏Tab bar：

Andorid: hight 96px  icon 48px font 22px

IOS: hight 98px  icon 44px font 22px

Tab-bar

列表List-hight：

页面列表尺寸仅做参考，可依据具体内容调节合适的高度，不同的页面同样的列表形式保持高度一致

Andorid: 96px  90px 72px

IOS： 98px  88px  80px 

List-hight

按钮button：

(提交&登录&确认&退出等)

Android: 560*72px 圆角8px  color #506fc8 font 32px

IOS：590*80px 圆角40px  color #506fc8 font 34px

Button

其他 others

App内其他控件依据不同的内容进行合理布局

加载—Loading1

空状态—暂无数据

参考链接

UI设计尺寸规范：iOS设计尺寸规范--优优教程网

UI命名规范：

Android UI 切图命名规范、标注规范及单位描述 - karision的博客 - CSDN博客

http://www.lanlanwork.com/blog/?post=4921

Material Design规则：  https://material.io/design/

字体包下载：链接：https://pan.baidu.com/s/1gxShDY6VRyua5bsWSZaHKg

提取码：tvvd