• ab173工具分享站
  • JSON相关
    • 格式化校验
    • JSON视图
    • JSON压缩转义
    • JSON生成Java实体类
    • JSON在线编辑器
    • JSON解析对比工具
    • JSON着色
    • XML-JSON互转
    • JSON和GET请求字符串互转
    • Excel转Json
    • json转csv、excel
  • 编码/加密
    • Base64编码、解码
    • 在线md5加密破解工具
    • DES,AES等对称加密解密
    • SHA加密
    • Escape编码
    • URL编码
    • Javascript Eval加密解密
    • 摩斯密码加密解密
    • 在线htpasswd生成器
    • 在线Hash计算器
    • unicode中文互转
    • JS代码混淆
    • 在线卡密批量生成器
    • 在线php代码加密
  • 格式化
    • JSON格式化高亮工具
    • Javascript/HTML压缩、格式化
    • CSS压缩、格式化
    • XML压缩、格式化
    • SQL压缩、格式化
    • js代码压缩工具
  • 网络
    • 全国DNS服务器IP地址汇总
    • IP地址查询
    • IP地址批量查询
    • 在线同IP地址网站查询
    • 获取IP详细信息
    • 获取您的浏览器信息
    • 常用USER_AGENT
    • IP转数字,数字转IP
    • TCP/IP子网掩码计算换算
    • MAC地址生成器
    • 用户在线网络诊断工具
    • 阿里云CDN节点IP验证查询
    • Nslookup查询
    • 在线域名批量解析ip地址查询
  • 前端
    • 在线html转js,js转html
    • 在线Html/Js/Css过滤工具
    • 在线JS脚本校验器
    • fontawesome图标查询
    • 图片在线压缩工具
    • 在线代码编辑器
    • ueditor在线代码编辑器
    • 在线调色板
    • WEB安全色
    • CMYK颜色对照表
    • 在线图片转Base64编码
    • SVG代码编辑预览
    • 常用JS资源库
    • 弹出窗口生成器
    • 自动排版工具
    • ASCII字形生成器
    • 手机UI尺寸规范
    • 网页设计Web尺寸规范
    • 在线制作ico图标
    • 框架网页代码生成器
    • rgb颜色对照表
    • 网页设计常用色彩搭配表
    • Flash取色器
    • 可视化CSS在线编辑器
    • CSS压缩与优化工具
    • Bootstrap字体图标库
    • 在线文本内容比较工具
    • jquery下载所有版本
  • 后端
    • JSON生成Java实体类
    • JSON生成C#实体类
    • oracle转Java实体类
  • 转换
    • 驼峰转下划线,下划线转驼峰
    • 在线html转js,js转html
    • php反序列化成JSON和代码
    • px转em,em转px
    • 在线图片转Base64编码
    • unicode中文互转
    • Unix时间戳转换
    • 在线进制转换
    • 16进制到文本字符串
    • URL16进制加密
    • 字母大小写转换
    • RGB颜色和HEX互转
    • 二维码生成与解码
    • 数字转中文(人民币)
    • 在线文件大小换算
    • NATIVE/ASCII编码互转工具
    • Html与UBB代码互相转换工具
    • 汉字转换拼音
    • 全角半角转换
    • 简繁体火星文互转
    • Html转换为MarkDown工具
    • Apache路由规则转Nginx规则
    • UTF-8编码转换工具
    • ascii码在线转换器
  • 测试
    • 正则表达式测试
    • xpath测试
    • 正则表达式代码生成工具
  • 其他
    • 在线获取键盘按键值(ascii码)
    • 寻找图片、链接或xpath寻找元素
    • SQL追加或去除双引号
    • 去除重复字符串
    • 在线根据首字母排序
    • 在线涂鸦画板
    • 在线科学计算器
    • 年化收益计算器
    • 在线字符串文本压缩工具
    • 免费在线翻译
    • Email图标在线制作工具
    • 在线提取文本中的图片地址
    • 迅雷、快车、旋风URL加/解密工具
    • UUID在线生成
    • 百度网盘链接有效性批量查询
    • 万年历查询(国历,农历在线对照)
    • 文字批量替换工具
    • 世界各地时间查询
    • 在线字数计数器
    • 在线随机数生成器
    • 天数计算器在线计算
    • 年龄计算器
    • 个人所得税计算器
    • 邮政编码区号查询
    • 手机号码归属地查询
  • 站长
    • 百度收录批量查询
    • 搜索引擎关键词下拉查询
    • 网站链接百度收录查询
    • HTTP状态批量查询
    • 网页HTTP状态查询
    • 批量打开网址
    • 在线查看网页源代码
    • 网页GZIP压缩检测
    • 网页关键词密度检测
    • 搜索蜘蛛、机器人模拟工具
    • 搜索引擎蜘蛛照妖镜
    • 在线网站死链接检测工具
    • 网页META信息检测
    • 域名Whois查询工具
    • 域名删除时间查询
    • robots.txt文件生成器
    • meta标签生成器
    • 在线创建网址桌面快捷方式
    • .htaccess文件在线生成器
    • 自动刷新请求网址
    • 网站301跳转代码在线生成
    • 在线FTP登陆工具
    • 服务器网站日志分析工具
    • 服务器端口扫描工具
  • 文档
    • ping命令使用教程
    • host文件修改教程
    • 上网IP地址查询教程
    • 屏幕尺寸对照表
    • Android权限大全
    • 什么是JSON
    • 举个栗子
    • HTTP状态码查询
    • HTTP请求头大全
    • HTTP Content对照表
    • HTTP Request请求方法对照表
    • ASCII码对照表
    • 常用端口解释
    • ASP错误代码
    • 百度蜘蛛IP段
    • Linux常用命令大全
    • php常用函数大全
    • JavaScript特殊字符转义字符
    • Javascript事件说明大全
    • 硬盘分区整数对照表
    • a4尺寸大小
    • 免费JSON API接口
    • 备案查询
  • 平台工具
    • 微信公众平台调试工具
    • 微信卡券JSAPI签名校验工具
    • 微信JS接口签名校验工具
    • 微信企业号调试工具
    • QQ互联API调试工具
    • 淘宝oauth2.0测试工具
    • 淘宝API测试工具
    • 淘宝错误码查询工具
    • 淘宝商品属性工具
    • 支付宝联调日志排查
    • 开发者自助排查工具
    • 新浪微博API工具
  • 更多
    • 常用软件
    • 更新日志
    • 广告招租
    • 联系我们
您最近使用了:
  • 屏幕尺寸
  • 必备工具
  • IOS规范
  • Android规范
  • Web标准
  • 切图命名

谷歌官方设计规范

谷歌官方设计规范:https://material.io/guidelines/material-design/

谷歌中文设计规范:http://design.1sters.com/

设计尺寸

安卓手机ui界面设计尺寸规范


名称 分辨率 px dpi 像素比 示例 dp 对应像素
xxxhdpi 2160 x 3840 640 4.0 48dp 192px
xxhdpi 1080 x 1920 480 3.0 48dp 144px
xhdpi 720 x 1280 320 2.0 48dp 96px
hdpi 480 x 800 240 1.5 48dp 72px
mdpi 320 x 480 160 1.0 48dp 48px

字体

中文字体:Source Han Sans / Noto

英文字体:Roboto

常用字号排版(长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。)

1. 12sp 小字提示

2. 14sp(桌面端13sp) 正文/按钮文字

3. 16sp(桌面端15sp) 小标题

4. 20sp Appbar文字

5. 24sp 大标题

6. 34sp/45sp/56sp/112sp 超大号文字


安卓手机ui界面设计尺寸规范


元素 字重 字号 行距 字间距
App bar Medium 20sp - -
Buttons Medium 15sp - 10
Headline Regular 24sp 34dp 0
Title Medium 21sp - 5
Subheading Regular 17sp 30dp 10
Body 1 Regular 15sp 23dp 10
Body 2 Bold 15sp 26dp 10
Caption Regular 13sp - 20

图标 icons

图标用途 mdpi (160dpi) hdpi (240dpi) xhdpi (320dpi) xxhdpi (480dpi) xxxhdpi (640dpi)
应用图标 48 x 48 px 72 x 72 px 96 x 96 px 144 x 144 px 192 x 192 px
系统图标 24 x 24 px 36 x 36 px 48 x 48 px 72 x 72 px 196 x 196 px

应用图标 Product icons

应用图标 Product icons


系统图标 System icons

系统图标 System icons


快捷图标 Shortcut icon

快捷图标 Shortcut icon


单位和度量 Units and measurements

dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸

dp =(宽度像素 x 160)/ dpi

名称 分辨率 px dpi 像素比 示例 dp 对应像素
xxxhdpi 2160 x 3840 640 4.0 48dp 192px
xxhdpi 1080 x 1920 480 3.0 48dp 144px
xhdpi 720 x 1280 320 2.0 48dp 96px
hdpi 480 x 800 240 1.5 48dp 72px
mdpi 320 x 480 160 1.0 48dp 48px

布局

所有可操作元素最小点击区域尺寸:48dp X 48dp。

栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:


另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。

还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。



布局


列表 List

列表 List


比率边框

比率边框


详情视图 Detail view

详情视图 Detail view


触控区域尺寸 Touch target size

触控区域尺寸 Touch target size


应用栏 App bar

应用栏 App bar


  • 尺寸
  • 字体
  • 图标
    • 应用图标
    • 系统图标
    • 快捷图标
  • 单位和度量
  • UI组件布局
    • 布局
    • 列表
    • 比率边框
    • 详情视图
    • 触控区域尺寸
    • 应用栏

申明:整合网上已有工具、开源包等,著作权归属原作者或是团队。

Copyright @ 2011-2020 www.ab173.com All rights reserved.鄂ICP备11008024号 鄂公网安备42011102002579号