開始App視覺設(shè)計前，定義好安卓或者iOS基本的尺寸及布局包括但不限于：App色調(diào)，icon尺寸，font大小，button樣式、列表、其他組件、加載、空狀態(tài)等。
安卓和iOSApp設(shè)計稿尺寸分別為: 安卓720*1280px? iOS 750*1334px??
視覺設(shè)計完成進(jìn)行尺寸適配
安卓：XHDPI? ?XXHDPI? ??XXXHDPI
IOS：@1X @2X @3X
網(wǎng)站上已經(jīng)有很多詳細(xì)的規(guī)范說明，以下內(nèi)容僅依據(jù)之前項目的迭代整理輸出的一些簡單基礎(chǔ)規(guī)范。在日常項目中一般確定通用的設(shè)計尺寸后便開始進(jìn)行完整視覺稿的輸出，設(shè)計稿完成后跟前端及開發(fā)溝通合理的適配和切圖方式。
（文末有其他網(wǎng)站或者大神整理的全面詳細(xì)的關(guān)于UI規(guī)范、命名、安卓MD設(shè)計規(guī)則）
字體 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
在開始設(shè)計之前要確定頁面使用的色調(diào)，要符合App調(diào)性，確定主色調(diào)（70%）及輔助色（30%），顏色盡量不超過三種
主色： #506fc8?（核心按鈕、文字選中、主菜單標(biāo)題等）
輔助色： #ff6633 #76c80e（操作按鈕、提醒文字等）
頁面基本布局 layout
內(nèi)容區(qū)顏色：conter #ffffff? ?背景顏色 ：bgcolor #f5f7ff
投影數(shù)值（Android）：color #d9ddeb angle 90° mask 10
內(nèi)容上下間距：30-20px 頁面左右間隔 32px
導(dǎo)航欄Nav bar：
Android: 720*96px? icon 48px font 36px
IOS: 750*88px? icon 44px font 34px
主菜單欄Tab bar：
Andorid: hight 96px? icon 48px font 22px
IOS: hight 98px? icon 44px font 22px
列表List-hight：
頁面列表尺寸僅做參考，可依據(jù)具體內(nèi)容調(diào)節(jié)合適的高度，不同的頁面同樣的列表形式保持高度一致
Andorid: 96px? 90px 72px
IOS： 98px? 88px? 80px?
按鈕button：
(提交&登錄&確認(rèn)&退出等)
Android: 560*72px 圓角8px? color #506fc8 font 32px
IOS：590*80px 圓角40px? color #506fc8 font 34px
其他 others
App內(nèi)其他控件依據(jù)不同的內(nèi)容進(jìn)行合理布局
參考鏈接
UI設(shè)計尺寸規(guī)范：iOS設(shè)計尺寸規(guī)范--優(yōu)優(yōu)教程網(wǎng)
UI命名規(guī)范：
Android UI 切圖命名規(guī)范、標(biāo)注規(guī)范及單位描述 - karision的博客 - CSDN博客
http://www.lanlanwork.com/blog/?post=4921
Material Design規(guī)則：? https://material.io/design/
字體包下載：鏈接：https://pan.baidu.com/s/1gxShDY6VRyua5bsWSZaHKg
提取碼：tvvd
