大厂的UI设计交付命名规范-超级详细全面
郑州/UI设计师/1年前/868浏览
版权
大厂的UI设计交付命名规范-超级详细全面
前言：
在UI设计领域，为元素和文件命名常常是新人设计师面临的一个挑战。从设计初期对图层和图层组的命名，到与开发团队合作时对设计素材的标识，再到项目文件和版本管理，掌握有效的命名方法都是团队协作中不可或缺的技能。
遵循专业的项目命名规范，不仅能够方便团队准确的识别和协作，同时，按照大厂的规范标准交付，养成良好的工作习惯，也是展现设计师专业水平的重要体现。
目录：
一、UI命名规范的5点注意事项
二、通用切图命名规范示例
三、组件（系统控件）命名规范
四、资源类型命名规范
五、操作功能点命名规范
六、交互状态命名规范
七、常用界面命名规范
八、页面布局命名规范
九、画板图层命名规范
一、UI命名规范6点注意事项：
1. 可以使用元音省略法来形成缩写。
例如在一些政府、军事、国际机构中较常见的术语，例如：United States - 缩写为U.S.，省略了 "nited" 中的元音 "i" 和 "ates" 中的元音 "a"。
2.可以使用单词的前几个字母来形成缩写。
也是一种常见的缩写方法，特别是在需要快速识别和引用较长单词或短语时。例如"Navigation" 的常见缩写一般为 "Nav"。
3.特殊的英文单词缩写或行业内专属名词缩写。
例如区块链领域里的NFT、DAO、Difi，或者网站域名的后缀名等。
4.下划线尽量使用“_”而不是“-”。
因为“_”在不同的操作系统和编辑器中显示更为一致，而短横线“-”有时可能因为字体或显示设置的原因导致显示效果不佳，使用下划线“_”也是遵循了行业内的一种非正式标准。
5.
所有切图类的命名统一为小写英文字母，不要首字母大写，也不要中文。
因为大多数前端开发中使用的编程语言，如HTML、CSS和JavaScript，都是大小写敏感的。这意味着"Class"和"class"会被识别为两个不同的实体。为了保持一致性并避免潜在的大小写错误，开发者倾向于使用小写字母。
6.画板和图层可以使用中文命名。
因为整体画板文件不涉及交付开发与代码书写，而且中文的简洁性与可读性更高，原则上方便简单高效即可
二、通用切图命名规范：
三、组件（系统控件）命名规范
四、资源类型命名规范
五、操作功能点命名规范
六、交互状态命名规范
七、常用界面命名规范
八、页面布局命名规范
九、设计画板命名规范
在设计类工具中画板与图层的命名，主要是面向设计师，因此并没有业内通用的命名规则一说，一般而言，能够清晰明了、能够提高效率和确保信息的可检索性即可。
但是当遇到项目工程量巨大，业务逻辑复杂时，又该如何遵循一个科学的命名方式，来更好的管理文档呢？
下面是我针对不同类型的文件的命名和排序策略，供你参考。
命名规则参考：N_（N+1）模块_（N+）
1_1Dapp首页_11_1商品列表页_21_2详情页1_1完整样式1_2详情页1_2没有评论1_2详情页2_1评论详情页默认1_2详情页2_2评论详情页空白1_2详情页3_1点赞列表1_2详情页4_1转发列表1_3活动推广页_11_3活动推广页-任务_21_3活动推广页-任务-下拉_3
相信你已经看出来了，使用越简单的排序方法，越容易在执行过程中落地。而且，通过多年的项目沉淀，我发现，这样简单的命名规则，它还有很多好处。
- 适应性
：既灵活又具有弹性，能够轻松适应业务需求的变化，无论是扩展新页面还是缩减现有内容，都能游刃有余。不至于增加一个而改变所有；
- 条理性
：当项目包含数百甚至数千个页面时，有序的命名规则使得每个模块的概览一目了然。通过规则中的数字前缀，我们能够迅速把握不同模块的框架，从而在与团队成员的沟通中，快速而准确地定位到特定页面。
- 沟通效率
：在设计评审会议中，我们可以使用页面编号来记录问题，快速、高效的交流和记录，极大地提升了沟通的效率。
例如，我的某一个会议记录中写到：1-2-3页面，调整正文行间距；2-3页面，优化标签布局；3-1-2重新更换NFT抽奖元素...
- 跨平台兼容性
：无论在Windows还是Mac操作系统中，这种命名规则都能与系统的默认递增排序规则完美契合。这保证了导出的图片在实际排序上与设计软件中的预期保持一致，减少了因系统排序规则不一致带来的潜在混乱。
总结：
命名系统的设计并非简单的标记行为，而是构建了一个深思熟虑的检索体系，与文件管理的内在逻辑紧密结合。因此，在采纳并记忆任何固定的命名模式之前，我们应深入思考项目中文件和界面的层级结构及其相互关系。
命名不仅是识别工具，更是一种思维导图，强迫我们进行分类和整理，科学有序的命名系统，能够指导我们如何在复杂的项目结构中导航，确保每个成员都能迅速而准确地找到所需资源。这种深思熟虑的命名策略，最终将提升我们的工作效率，优化团队协作流程，并保障项目信息的清晰传达。
持之以恒地采用这种科学且专业的命名方法，随着时间的积累，你将逐渐感受到它带来的便利性而非复杂性。
4
举报
声明
11
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
4登录即可同步推荐记录哦
11登录即可加入我的收藏
评论登录即可评论想法
分享分享