设计规范大全

02156
  • ios
  • Android
  • web规范
  • 切图命名

    • 字体(苹方)

    中文字体：PingFang SC
    英文字体：SF UI Text 、SF UI Display
    其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字
    图片[1]-设计规范大全-星火工作站
    元素字重字号(pt)行距字间距
    Title 1Light28pt34pt13pt
    Title 2Regular22pt28pt16pt
    Title 3Regular20pt24pt19pt
    HeadlineSemi-Bold17pt22pt-24pt
    BodyRegular17pt22pt-24pt
    CalloutRegular16pt21pt-20pt
    SubheadRegular15pt20pt-16pt
    FootnoteRegular13pt18pt-6pt
    Caption 1Regular12pt16pt0pt
    Caption 2Regular11pt13pt6pt
    元素字号（pt）字重字距（pt）类型
    Nav Bar Title17Medium0.5Display
    Nav Bar Button17Regular0.5Display
    Search Bar13.5Regular0Text
    Tab Bar Button10Regular0.1Text
    Table Header12.5Regular0.25Text
    Table Row16.5Regular0Text
    Table Row Subline12Regular0Text
    Table Footer12.5Regular0.2Text
    Action Sheets20Regular / Medium0.5Display

    点和像素 Points and Pixels

    图片[2]-设计规范大全-星火工作站

    图标 Icon

    应用图标 App Icon

    图片[3]-设计规范大全-星火工作站
    设备名称应用图标App Store图标Spotlight图标设置图标
    iPhone X, 8+, 7+, 6s+, 6s180 x 180 px1024 x 1024 px120 x 120 px87 x 87 px
    iPhone X, 8, 7, 6s, 6, SE，5s, 5c, 5,
    4s, 4    		120 x 120 px1024 x 1024 px80 x 80 px58 x 58 px
    iPhone 1, 3G, 3GS57 x 57 px1024 x 1024 px29 x 29 px29 x 29 px
    iPad Pro 12.9, 10.5167 x 167 px1024 x 1024 px80 x 80 px58 x 58 px
    iPad Air 1 & 2, Mini 2 & 4,
    3 & 4    		152 x 152 px1024 x 1024 px80 x 80 px58 x 58 px
    iPad 1, 2, Mini 176 x 76 px px1024 x 1024 px40 x 40 px29 x 29 px

    自定义图标 Custom Icons

    设备名称导航栏和工具栏图标尺寸标签栏图标尺寸
    iPhone 8+, 7+, 6+, 6s+66 x 66 px75 x 75 px　　最大144 x 96 px
    iPhone 8, 7, 6s, 6, SE44 x 44 px50 x 50 px　　最大96 x 64 px
    iPad Pro, iPad, iPad mini44 x 44 px50 x 50 px　　最大96 x 64 px

    分辨率和显示规格 Resolutions and Display

    图片[4]-设计规范大全-星火工作站
    设备名称屏幕尺寸PPIAsset竖屏点（point）竖屏分辨率（px）
    iPhone X5.8 in458@3x375 x 8121125 x 2436
    iPhone 8+, 7+, 6s+, 6+5.5 in401@3x414 x 7361242 x 2208
    iPhone 8, 7, 6s, 64.7 in326@2x375 x 667750 x 1334
    iPhone SE, 5, 5S, 5C4.0 in326@2x320 x 568640 x 1136
    iPhone 4, 4S3.5 in326@2x320 x 480640 x 960
    iPhone 1, 3G, 3GS3.5 in163@1x320 x 480320 x 480
    iPad Pro 12.912.9 in264@2x1024 x 13662048 x 2732
    iPad Pro 10.510.5 in264@2x834 x 11121668 x 2224
    iPad Pro, iPad Air 2, Retina iPad9.7 in264@2x768 x 10241536 x 2048
    iPad Mini 4, iPad Mini 27.9 in326@2x768 x 10241536 x 2048
    iPad 1, 29.7 in132@1x768 x 1024768 x 1024

    配色

    图片[5]-设计规范大全-星火工作站

    UI组件布局 UI Element Layout

    状态栏 Status Bar

    图片[6]-设计规范大全-星火工作站

    导航栏 Navigation Bar

    图片[7]-设计规范大全-星火工作站

    搜索栏 Search Bar

    图片[8]-设计规范大全-星火工作站

    标签栏 Tab Bar

    图片[9]-设计规范大全-星火工作站

    列表视图 Table View

    图片[10]-设计规范大全-星火工作站

    弹出 Modals

    图片[11]-设计规范大全-星火工作站

    提示框 Alerts

    图片[12]-设计规范大全-星火工作站

    切换 Segment Controls

    图片[13]-设计规范大全-星火工作站

    滑动条 Sliders

    图片[14]-设计规范大全-星火工作站

    切换按钮 Switch

    图片[15]-设计规范大全-星火工作站

    字体 Typography

    中文字体：Source Han Sans / Noto
    英文字体：Roboto
    元素字重字号行距字间距
    App barMedium20sp––
    ButtonsMedium15sp–10
    HeadlineRegular24sp34dp0
    TitleMedium21sp–5
    SubheadingRegular17sp30dp10
    Body 1Regular15sp23dp10
    Body 2Bold15sp26dp10
    CaptionRegular13sp–20

    图标 icons

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

    应用图标 Product icons

    图片[16]-设计规范大全-星火工作站
    方形
    高度：152dp 宽度：152dp
    图片[17]-设计规范大全-星火工作站
    圆形
    直径：176dp
    图片[18]-设计规范大全-星火工作站
    垂直长方形
    高度：176dp 宽度：128dp
    图片[19]-设计规范大全-星火工作站
    水平长方形
    高度：128dp 宽度：176dp

    系统图标 System icons

    图片[16]-设计规范大全-星火工作站
    方形
    高度：18dp 宽度：18dp
    图片[17]-设计规范大全-星火工作站
    圆形
    直径：20dp
    图片[18]-设计规范大全-星火工作站
    垂直长方形
    高度：20dp 宽度：16dp
    图片[19]-设计规范大全-星火工作站
    水平长方形
    高度：16dp 宽度：20dp

    快捷图标 Shortcut icon

    图片[24]-设计规范大全-星火工作站
    实际面积
    高度：44dp 宽度：44dp
    图片[25]-设计规范大全-星火工作站
    总面积
    高度：48dp 宽度：48dp
    图片[26]-设计规范大全-星火工作站
    系统图标尺寸
    高度：24dp 宽度：24dp
    图片[27]-设计规范大全-星火工作站
    实际面积位置
    剩余高度：24dp
    剩余宽度：24dp

    单位和度量 Units and measurements

    dpi =屏幕宽度（或高度）像素 / 屏幕宽度（或高度）英寸

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

    名称分辨率 pxdpi像素比示例 dp对应像素
    xxxhdpi2160 x 38406404.048dp192px
    xxhdpi1080 x 19204803.048dp144px
    xhdpi720 x 12803202.048dp96px
    hdpi480 x 8002401.548dp72px
    mdpi320 x 4801601.048dp48px

    UI组件布局 Element Layout

    列表 List

    图片[28]-设计规范大全-星火工作站
    垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
    图片[29]-设计规范大全-星火工作站
    垂直边距
    1. 状态栏：24dp
    2. 工具栏：56dp
    3. 子标题：48dp
    4. 列表项：72dp
    图片[30]-设计规范大全-星火工作站
    垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
    图片[31]-设计规范大全-星火工作站
    垂直边距
    1. 状态栏：24dp
    2. 工具栏：56dp
    3. 标题和列表项：48dp
    4. 子标题：48dp
    5. 内容区域间的距离：8dp

    详情视图 Detail view

    图片[32]-设计规范大全-星火工作站
    垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
    右边图标的右边距为32dp
    图片[33]-设计规范大全-星火工作站
    垂直边距
    1. 状态栏：24dp
    2. 工具栏：56dp
    3. 内容区域间的距离：8dp
    4. 列表项：72dp
    图片[34]-设计规范大全-星火工作站
    垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
    弹出菜单与右边框的距离为56dp
    图片[35]-设计规范大全-星火工作站
    垂直边距
    1. 列表项：48dp
    2. 内容区域间的距离：8dp
    3. 导航右边距：56dp

    触控区域尺寸 Touch target size

    图片[36]-设计规范大全-星火工作站
    头像：40dp
    图标：24dp
    触控区：48dp
    图片[37]-设计规范大全-星火工作站
    实例
    图片[38]-设计规范大全-星火工作站
    触控区域高度：48dp
    按钮高度：36dp
    图片[39]-设计规范大全-星火工作站
    实例

    应用栏 App bar

    图片[40]-设计规范大全-星火工作站
    应用栏高度：56dp
    应用栏左右内边距：16dp
    应用栏图标上、下、左内边距：16dp
    应用栏标题左内边距：72dp
    应用栏标题下内边距：20dp
    图片[41]-设计规范大全-星火工作站
    应用栏高度：128dp
    图片[42]-设计规范大全-星火工作站
    操作栏高度：56dp
    标题栏高度：80dp
    标题栏底部内边距：8dp
    描述区域高度：72dp
    描述区底部内边距：16dp

    图片[43]-设计规范大全-星火工作站

    1、常见界面、控件、功能、状态命名集合：

    APP产品经理、APP设计师、APP开发工程师，包括H5前端开发人员都可以记住的文件命名规范。

    界面命名       
    整个主程序App搜索结果Search results活动Activity信息Messages
    首页Home应用详情App detail探索Explore音乐Music
    软件Software日历Calendar联系人Contacts新闻News
    游戏Game相机Camera控制中心Control center笔记Notes
    管理Management照片Photo健康Health天气Weather
    发现Find视频Video邮件Mail手表Watch
    个人中心Personal center设置Settings地图Maps锁屏Lock screen
    系统控件库       
    状态栏Status bar搜索栏Search bar提醒视图Alert view弹出视图Popovers
    导航栏Navigation bar表格视图Table view编辑菜单Edit menu开关Switch
    标签栏Tab bar分段控制Segmented选择器Pickers弹窗Popup
    工具栏Tool bar活动视图Activity view滑杆Sliders扫描Scanning
    功能命名       
    确定Ok添加Add卸载Uninstall选择Select
    默认Default查看View搜索Search更多More
    取消Cancel删除Delete暂停Pause刷新Refresh
    关闭Close下载Download继续Continue发送Send
    最小化Min等待Waiting导入Import前进Forward
    最大化Max加载Loading导出Export重新开始Restart
    菜单Menu安装Install后退Back更新Update
    资源类型       
    图片Image滚动条Scroll进度条Progress线条Line
    图标Icon标签Tab树Tree蒙版Mask
    静态文本框Label勾选框Checkbox动画Animation标记Sign
    编辑框Edit下拉框Combo按钮Button动画Animation
    列表List单选框Radio背景Backgroud播放Play
    常见状态       
    普通Normal获取焦点Focused已访问Visited默认Default
    按下Press点击Highlight禁用Disabled选中Selected
    悬停Hover错误Error完成Complete空白Blank
    位置排序       
    顶部Top底部Bottom第二Second页关Header
    中间Middle第一First最后Last页脚Footer

    2、以iOS为范例(安卓通用)的切片文件命名规范如下：

    个人觉得标识符命名原则，尽可能的用最少的字符而又能完整的表达标识符的含义（如：Navigation bar可以缩减成nav）。

    图片[44]-设计规范大全-星火工作站
    © 版权声明
    版权声明 1 本网站名称：星火工作站
    2 本站永久网址：spark.lsw0.com
    3 本站资源为搬运而来，无任何收费，下载后请在24小时内删除。
    4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5 若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
    6 如果本站有侵犯、不妥之处的资源，请在网站右边客服联系我们。将会第一时间解决！
    7 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
    8 本站提供的所有资源仅供参考学习使用，不存在任何商业目的与商业用途，请大家不要用于商用！
    THE END
    未分类
    # 内容型
    喜欢就支持一下吧
    点赞6赞赏 分享
    星火本火的头像-星火工作站星钻会员
    重要须知(本站未开放)-星火工作站
    重要须知(本站未开放)
    重要须知(本站未开放)
    1年前 1177
    （测试）甄嬛传-视频剧集观看-星火工作站
    （测试）甄嬛传-视频剧集观看
    （测试）甄嬛传-视频剧集观看
    2年前 835
    HitPaw Watermark Remover 2.4.1 专业视频图片水印清除-星火工作站
    HitPaw Watermark Remover 2.4.1 专业视频图片水印清除
    HitPaw Watermark Remover 2.4.1 专业视频图片水印清除
    1年前 686
    Linux docker安装部署开源在线画原型图项目Penpot-星火工作站
    Linux docker安装部署开源在线画原型图项目Penpot
    Linux docker安装部署开源在线画原型图项目Penpot
    1年前 566
    HitPaw Photo Enhancer 2.3.0 AI图像清晰放大工具-星火工作站
    HitPaw Photo Enhancer 2.3.0 AI图像清晰放大工具
    HitPaw Photo Enhancer 2.3.0 AI图像清晰放大工具
    1年前 564
    Matomo – 免费开源的网站统计分析程序搭建教程-星火工作站
    Matomo – 免费开源的网站统计分析程序搭建教程
    Matomo – 免费开源的网站统计分析程序搭建教程
    2年前 301
    相关推荐
    重要须知(本站未开放)-星火工作站
    重要须知(本站未开放)
    重要须知(本站未开放)
    1年前 1177
    （测试）甄嬛传-视频剧集观看-星火工作站
    （测试）甄嬛传-视频剧集观看
    （测试）甄嬛传-视频剧集观看
    2年前 835
    Linux docker安装部署开源在线画原型图项目Penpot-星火工作站
    Linux docker安装部署开源在线画原型图项目Penpot
    Linux docker安装部署开源在线画原型图项目Penpot
    1年前 566
    Matomo – 免费开源的网站统计分析程序搭建教程-星火工作站
    Matomo – 免费开源的网站统计分析程序搭建教程
    Matomo – 免费开源的网站统计分析程序搭建教程
    2年前 301
    draw.io环境搭建-星火工作站
    draw.io环境搭建
    draw.io环境搭建
    1年前 297
    在线工具大全源码下载-星火工作站
    在线工具大全源码下载
    在线工具大全源码下载
    2年前 286
    思源笔记docker部署教程-星火工作站
    思源笔记docker部署教程
    思源笔记docker部署教程
    1年前 285
    屏幕尺寸大全-星火工作站
    屏幕尺寸大全
    屏幕尺寸大全
    2年前 256
    WordPress管理员登录后邮件及公众号提醒-星火工作站
    WordPress管理员登录后邮件及公众号提醒
    WordPress管理员登录后邮件及公众号提醒
    1年前 249
    精美壁纸｜唯美风图片分享-星火工作站
    精美壁纸｜唯美风图片分享
    精美壁纸｜唯美风图片分享
    1年前 231
    评论 抢沙发

    请登录后发表评论

      暂无评论内容