开始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
网友评论