超实用！Apple 官方的图层命名方法之控制器篇

@爆裂的墨水瓶 ：在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，虽然不是唯一答案，但很有参考价值。本文是系列第2篇，整理补充了一下思路，谢谢大家对我第1篇的的支持~

上期回顾：《图层英文怎么写？来看看Apple官方写法(Bars篇)》

命名规则

1.顺序为大类/中类/小类+属性、状态描述（非必须，看情况），使用symbol

Sketch的Symbol会识别"/"进行归类，这个很多人都知道。特别是大型的UiKit，尤其需要这种系统的分类方法。而且，Sketch要正式推出的Libraries，其实也是基于Symbol进行协作，所以分类更能提高效率。

2.Controls(控制器)

控制器包括以下组件（类名）。

有些是查找的翻译，有些是我自己试着翻译的。如有错误，希望大家多多指正，我会及时修改的。

• 大类：Controls
• 中类：按钮（Button）、编辑菜单（Edit Menu）、分页点（Pagination Dots）、进度提示（Progress Indicators）、分段标题（Section Headers）、分段控制器（Segmented Control）、滑动条（Sliders）、表格视图单元格（Table View cells）、文本域（Text Field）、文本（Text）
• 小类：步进器（Stepper）、开关（Switch）、页面指示器（Page Controls）、头部（Header，灰色）、Cell（单元格）、脚注（Footer，cell下面的小文字）、粘性标题（Sticky Header）、分段索引（Section Index）、Label（标注，各种文字说明）、选项卡（Tab）、Action（功能，泛指一个小功能组件，我们可以按自己的需要起名）、Dots（点）、Checkmark（对号）、Accessory（附件，一般是几个action集合）、Indicator（指示器）等
• 属性、状态描述：Light（明、浅色）、Dark（暗、暗色）、Left（左）、Center（中）、Right（右）、Default（默认）、Large（大）、Info（信息）、Single（单一）、Add（添加）、On（在...上）、Selection（选中）、Multi（多）、+（多个组件之间并列）、With（带有）、Line（行，一二三行文字）、Move（移动）、Delete（删除）等

3.低耦合的组件用_resourse进行归类，"_"符号开头会使symbol排在最末。

低耦合可以理解为一个组件可用在很多地方，一般是拆分后的比较基本的组件。

Controls/TableViewCell/_Resources/Left Actions/Add Light（控制/表格视图单元格/_资源/左功能/浅色添加）

也就是说，组合好的较大组件是symbol，拆分后低耦合（耦合：各组件之间相互连接的一种度量）的_Resources是symbol内的symbol，一般是归属于它的父集，如TableViewCell。

4.大小写

大写首字母即各种组件Symbol，小写则多见内部非symbol的图层、组 。所以记得在命名的前期需要想好整体的结构。

翻译举例：

这些可以简单看看，印证一下我的分析。

Buttons(按钮)

• Controls/buttons/light default(控制/按钮/浅色默认)
• Controls/Buttons/Light Info(控制/按钮/浅色信息)
• Controls/Buttons/Light Add(控制/按钮/浅色添加)

Segmented Control(分段控制器)

Controls / Segmented Control / 3 Buttons on Light（控制/分段控制器/3浅色按钮）

选项卡（Tab1,Tab2,Tab3），这里为什么写着Label，而图层名叫Tab呢？分析Label只是指代标签内容的名字，而Tab是组件的类型。

Sliders(滑块)

• Controls/Slider/Light Default（控制/滑块/浅色默认）
• Controls/Slider/Light Volume（控制/滑块/浅色音量）
• fill（填充）
• knob（把手）
• track（路径）

Stepper（计步器）

• Controls/TableViewCell/Light Default（控制/表格视图单元格/浅色默认）
• 外层symbol名：Left Detail（左详情）
• 内层symbol名：Controls/TableViewCell/_Resources/Left Accessory/Light 1 Line（控制/表格视图单元格/_资源/左部件/浅色1行）
• 外层symbol名：Right Detail（右详情）
• 内层symbol名：Controls/TableViewCell/_Resources/Right Accessories/Stepper（控制/表格视图单元格/_资源/右部件/计步器）

Page Controls（页面指示器）

• Controls / Pagination Dots / 2 Dots On Light（控制 / 分页点 / 2个浅色上的点）
• Controls / Pagination Dots / 2 Dots On Dark（控制 / 分页点 / 2个暗色上的点）
• Dot 1（点）

Edit Menu（编辑菜单）

• Controls/Edit Menu/Multi Action（控制 / 编辑菜单 / 多功能）
• action1（功能1）
• Controls/Edit Menu/Light Text Selection（控制 / 编辑菜单 / 浅色被选中文字 ）

Progress Indicators（进度提示）

• Controls/Progress Indicator/Light Indetermined Spinner（控制/进度提示/浅色待定旋转）
• Controls/Progress Indicator/Light Indetermined Spinner with Label（控制/进度提示/浅色有标注待定旋转）
• Controls/Progress Indicator/Light Progress Bar（控制/进度提示/浅色进度条）
• Controls/Progress Indicator/Light Toolbar Progress Indicator（控制/进度提示/浅色工具栏指示器）

Table View Cells（表格视图单元格）

这里面有大量重复的命名，故列出部分。

• Controls/TableViewCell/Light Default（控制/表格视图单元格/浅色默认）没错，这些标1的都是一样的名字
• Controls/TableViewCell/Light Default + Delete（控制/表格视图单元格/浅色默认+删除）
• Controls/TableViewCell/Light Default + Action + Delete（控制/表格视图单元格/浅色默认+功能+删除）

没错，用“+”串联小类。

Section Header and Footer (分段头部和脚注)

• Controls/Section Headers/Light Grouped Header（控制/分段头/浅色组头部 ，就是分隔+标明下面cells用的）
• Controls/Section Headers/Light Grouped Footer（控制/控制/分段头/浅色组脚注，一般是简单的解释）

Sticky Header（粘性头部控件）

这种头部控件是一段距离内固定置顶的，所以称作Sticky。但是不知道为什么Apple没有在symbol上用这个名称。

Controls/Section Headers/Light Default Header（控制/分段头/浅色默认头部）

Section Index（分段索引）

Controls/Section Headers/Light Section Index（控制/分段头/浅色分段索引）

「新手必看！如何让开发秒懂」

• 《超全面的UI设计切图规范指南》
• 《写给UI设计新手的切图命名规则手册》
• 《提高工作效率！可能是最全面细致的设计文件命名规范》
• 《APP设计中，如何更专业地管理设计命名系统？》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com