sketch作图规范
最新回答
像是旧套路
2023-05-20 06:25:58
Sketch作图规范
在使用Sketch进行作图时，遵循一定的规范可以大大提高工作效率，确保设计的一致性和可维护性。以下是一套详细的Sketch作图规范：
一、文件整理
命名规则
文件命名应包含“项目名字功能块版本号_修改日期”，例如“京智办公_index_1.0_1001”。这样的命名方式有助于快速识别文件内容和版本，便于团队协作和版本管理。
分组与命名
避免随意摆放图层和无限分组。应合理命名和分组图层，以“代号_模块_功能”的结构组成，如“J-1_nav_search”。代号（如“J-1”）有助于在远程会议中快速定位讨论内容。
Artboard命名也应遵循规范，如“首页_index”，并按照代码序列号排列，相同内容的模块放在一起。
二、作图尺寸
- 默认采用@2x作图，即750x1334（或其他常用尺寸如375x667）进行绘制，以适应高清屏幕显示。若需输出@1x图，应提前与开发沟通。
三、图层整理
Layer命名
Layer命名应清晰明了，按照页面内容先分大块，再细分小文件夹，并在文件夹内按图层顺序排好。命名尽量以文件夹内容为依据，如“导航栏_nav_背景图片_bg”。
Icon命名
Icon命名应包含模块、类别、功能和状态，如“search_icon_input_gray”。若方案中只有一个此类icon，可直接命名为“icon_search”。
四、常用模块、类别、状态
- 模块：登录页面（sigup&login）、公共（common）、发现（find）、搜索（search）、消息（message）、消息流（feed）、添加（add）、通知（notification）、我（me）等。
- 类别：导航栏（nav）、按钮（btn）、菜单栏（tab）、图标（icon）、背景图片（bg）、默认图片（def）等。
- 状态：选中态（selected）、不可点（disable）、按下（pressed）、正常（normal）等。
五、Symbol命名与使用情况
- Symbol命名应规范，以“/”隔开进行整理，如“icon/general/bring”。这样的命名方式有助于快速找到和导出Symbol。
- 在整理Symbol页面时，应遵循Artboard的文件整理方式，将同一类别的Symbol放在一起。
六、导出图片和切片处理
- 导出图片时，一般采用2倍屏尺寸（如750x1334），并可根据需要设置iOS和Android预设。
- 若开发需要一倍图，应提前沟通后再进行导出。图片过多时，可使用IamgeOptim等工具进行压缩。
七、其他注意事项
- 在Sketch文件中，可额外添加一个Artboard用于画流线图和信息备注，以清晰表示页面跳转流程和设计规范。
- 遵循团队内部的命名规范和习惯，确保切片名称不变，便于开发直接替换。
以下是一些示例图片，展示了规范的Sketch作图方式：
遵循以上规范，可以确保Sketch作图的高效性和一致性，提升团队协作效率，减少沟通成本。
热门标签
