[移动开发]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? 圆形放置阿里巴巴矢量图标