PS-UI设计规范
作者：互联网
UI的载体：手机（Android/IOS），平板，笔记本
DPI：androdi所特有的密度单位，表示每英寸所拥有的点数量，点数密度，密度越高，显示器显示的画面就越真实，越清晰
PPI：ios所特有的像素密度单位，表示每英寸所拥有的像素数量，像素密度越高，显示器显示的画面就越真实，越清晰
视网膜屏幕：分辨率超过人眼识别极限的分辨率屏幕
DPI屏幕密度计算公式：根号下（宽的平方+高的平方）除以屏幕尺寸（屏幕对角线英寸数）
PPI像素计算公式：根号下（长度像素数的平方+宽度像素数的平方）除以屏幕尺寸（屏幕对角线英寸数）
屏幕尺寸就是移动端界面的对角线尺寸
Android设计规范：
名称 常见分辨率 点数密度 倍率 换算
MDPI 320x480 160 @1x 1DP=1PX
HDPI 480x800 240 @1.5x 1DP=1.5PX
XHDPI 720x1280 320 @2x 1DP=2PX
XXHDPI 1080x1920 480 @3x 1DP=3PX
XXXHDPI 2160x4096 640 @4x 1DP=4PX
DP：安卓专用长度单位，以160 DPI屏幕为基准，1DP=1PX
换算到PX设计的单位 计算公式：dp x dpi / 160=px
因为尺寸太多，所以我们要用一个标准，然后根据约等于相应的倍率来适配就可以了
主流尺寸及分辨率：
XHDPI：720px*1280px（默认）状态栏：50px 导航栏：96px 标签栏：96px 导航栏/工具栏图标大小（方形）48px
XXHDPI：1080px*1920px 状态栏：75px 导航栏：144px 标签栏：144px 导航栏/工具栏图标大小（方形）72px
背景颜色号：#f5f5f5 #eeeeee #efeff4
分割线：1px #000000/#dddddd/#cccccc 不透明度10%
卡片之间间距：20px
列表高:100px~120px
启动图标形状：方形直角/方形圆角4角弧度都为90px
启动图标大小：48px 72px 96px 144px 192px 512px
启动图标制作技巧：先做个最大尺寸的512px然后转为智能对象调整具体的合适尺寸
主屏幕重的APP图标96px
应用商店的APP图标96px
设置中的APP图标64px
导航栏/标签栏/工具栏图标48px
字体：官方思源黑体
36px：导航栏标题文字，详情页标题文字
32px：常用的重要列表文字标题，如二级导航文字，带头像列表标题，详情文字，输入提示文字
28px：用于较重要的小标题，如副标题，评论标题，点赞标题，按钮文字
26px：详情描述文字，如列表详情，作品详情，卡片标题
24px：提示信息，数据描述，警示文字，错误提示
22px：菜单栏文字，如底部菜单栏文字，极少部分的备注信息
字体大小灵活使用，设计一定要用偶数！，总结：
导航栏：36px~38px 主题 副标题
正文：28px~34px 说明性文字
标签栏：22px~24px 提示性文字
字间距：默认
行间距：字号*1.5
文字的颜色：333主文 666 副文 999提示文 灵活使用上下浮动
IOS设计规范：
名称 屏幕尺寸 分辨率pt 倍率 分辨率px PPI
iphone6 4.7 375*667 @2x 750*1334 326
iphone6Plus 5.5 414*736 @3x 1242*2208 401
iphone6s 4.7 375*667 @2x 750*1334 326
iphone6sPlus 5.5 414*736 @3x 1242*2208 401
iphone7 4.7 375*667 @2x 750*1334 326
iphone7Plus 5.5 414*736 @3x 1242*2208 401
设备 分辨率 状态栏高度 导航栏/工具栏高度 标签栏高度
iphone SE 640*1136 40px 88px 98px
iphone 6s/7/8 750*1334 40px 88px 98px
iphone 6s/7/8 plus 1242*2208 60px 132px 147px
iphone X(@3x) 1125*2436 132px 132px 147px
因为尺寸太多，所以我们要用一个标准，然后根据约等于相应的倍率来适配就可以了
背景色，分割线和安卓一样
启动图标最大：1024*1024 圆角180px
手机主界面APP图标：120px 圆角25px
默认搜索页显示的APP图标：40px 圆角10px
设置中的APP图标：58px 圆角10px
spotlight搜索中的App图标：120px 圆角25px
导航栏/标签栏/工具栏 中的所有功能图标：44px
默认官方字体：苹方
字体大小、颜色、间距、标准和安卓一样
首先分析元素组成
登录界面有：logo/名字 账号/手机号，密码 忘记密码 登录按钮 注册按钮 第三方登录
注册界面有：账号/手机号，密码 验证框 注册按钮 登录按钮 同意服务协议 第三方注册
登录注册展现形式：按钮排列式 选项卡式，登录/注册切换
首先可以做个单独的引导页：有logo/名字 登录按钮 注册按钮 辅助元素： 关于我们 先看故事
当点击登录按钮后才进入登录页面
LOGO，账号，密码，登录按钮，注册按钮，忘记密码，第三方登录
当点击注册按钮后才进入注册页面
尺寸大小：750*1334 单位：像素 分辨率：72 像素/英寸 颜色模式：RGB颜色 8位 背景内容：白色
状态栏高度：40px 导航栏高度：88px 标签栏高度：98px 左右两边间距30px
添加一个整体背景的颜色设置位：#f5f5f5
一般状态栏和导航栏一个颜色
输入框提示语+一键清除x功能；外图标高度控制在文字高度上下多出1~2个px即可；内图标高度和文字高度一致
文字大小:30px 颜色#999 border:1px
输入框上下排列间距控制在大约2个字符高度的间距
技巧做文字背景框：先文字后图形，文字大小36~40px，背景图片高度控制在两个半字符的高度，可以加一个羽化的边阴影效果
忘记密码：放置在密码框下面 大小26~28px 颜色#666
第三方登录：弱化 大小12px 颜色#999 圆形放置阿里巴巴矢量图标
标签：文字,PS,登录,UI,按钮,设计规范,屏幕,导航,图标 来源： https://blog.csdn.net/jimoluoluo1989/article/details/121352597