文档图片规范

1 截图软件

截图软件推荐使用 Snipaste

2 图内元素

  • 图内元素对位整齐。对位原则:整体 > 细节 , 左右 > 上下。

    元素对齐

  • 框线:普通框线使用 5 号线。

    普通线框

  • 箭头线:普通箭头线使用 5 号线,选用 “普通箭头”。

    菱形箭头

  • 字体与字号:中文使用 “思源宋体”,英文和数字使用 “Times New Roman”。建议使用 7 ~ 12 号字,最大不超过 14 号。(图一张截图内只能有一种字号的字体)

    中文

    英文

    3 截图规范

  • 截图界限:

    • 浏览器截图图中只可以出现 页面标题栏网址标准窗口 三个部分,书签栏必须隐藏。

      浏览器截图划分

    • 弹窗截图以弹窗大小为限,请勿将页面背景体现在图中。

      弹窗截图

  • 最小单元:截图遵循最小单元原则,截图前应将页面进行划分。划分规则:

    • 以可辨认位置为基准,进行精细划分。

    • 若焦点位置太小,则借助框线或文字描述进行精确定位。

      界面划分示例

  • 英文截图:英文文档中的截图,须先将所有用到的软件切换为英文模式,配合截图输入的使用信息应为英文。

    浏览器切换英文示例

4 图片保存与引用

  • 文档中的图片存放在各文档文件夹内的 pics 文件夹中,

  • 图片路径使用相对路径,路径开头必须为 ./ ,文件(夹)与文件(夹)之间使用 / 划分。

     示例:
    
     正确:<img src="./pics/salad_chicken_breast.png" alt="chicken_breas">
    
     错误:<img src="/pics/salad_chicken_breast.png" alt="chicken_breas">
    
     错误:<img src="pics/salad_chicken_breast.png" alt="chicken_breas">
    
  • 图片需重新命名,命名格式:“(序号-)图片描述”。禁止使用长串无序数字或字母作为图片名称。

    • 考虑到不同系统对大小写的敏感度不同,建议所有字母均为小写。
    • 增加序号时,序号应以文件为单位,例如:不同文件中的图片序号都从“01”开始。
    • 名字尽量描述图片内容,方便图片查找,尽量不要使用拼音。
    • 如果图片是从软件图片库中导出的,名称要与图片库中的名称保持一致。
    • 图片保存格式建议为 png,注意 全部使用小写,大小写混乱可能导致图片显示不正常。

      文件命名规范

  • 须根据文档布局设置图片的大小。(通过使用 HTML 的 <img> 标签设置图片渲染的大小)

    • <img> 标签的 widthheight 属性可分别设置图片的宽度和高度。如果希望保持图片本身的比例,则单独使用 widthheight(建议使用 width,以保证多张图片的宽度保持一致)。
    • 图片单位有 ptpxem 等。其中 pt (Point)为绝对长度,px(Pixel)、em 为相对长度。px 相对于显示器屏幕分辨率而言,em 相对于当前对象内文本的字体尺寸。(建议使用 em 以保持文字的相对大小)
     示例:
    
     <img src="./pics/salad_chicken_breast.png" alt="chicken_breas" style="width:20em;">
    
     <img src="./pics/salad_chicken_breast.png" alt="chicken_breas" style="height:20px;">
    
     <img src="./pics/salad_chicken_breast.png" alt="chicken_breas" style="width:20pt;">
    

results matching ""

    No results matching ""