大厂的UI设计交付命名规范-超级详细全面
郑州/UI设计师/1年前/545浏览
版权
大厂的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操作系统中，这种命名规则都能与系统的默认递增排序规则完美契合。这保证了导出的图片在实际排序上与设计软件中的预期保持一致，减少了因系统排序规则不一致带来的潜在混乱。
总结：
命名系统的设计并非简单的标记行为，而是构建了一个深思熟虑的检索体系，与文件管理的内在逻辑紧密结合。因此，在采纳并记忆任何固定的命名模式之前，我们应深入思考项目中文件和界面的层级结构及其相互关系。
命名不仅是识别工具，更是一种思维导图，强迫我们进行分类和整理，科学有序的命名系统，能够指导我们如何在复杂的项目结构中导航，确保每个成员都能迅速而准确地找到所需资源。这种深思熟虑的命名策略，最终将提升我们的工作效率，优化团队协作流程，并保障项目信息的清晰传达。
持之以恒地采用这种科学且专业的命名方法，随着时间的积累，你将逐渐感受到它带来的便利性而非复杂性。
3
Report
声明
9
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
3Log in and synchronize recommended records
9Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share