导读在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名....

在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，虽然不是唯一答案，但很有参考价值。文字书写格式参考了我们公司（Teambition）的DLS，在一些命名有多种的情况下，我酌情合并或选择了简洁的。笔者英文很渣，这也是我学习的过程，如果发现错误请大家指正~

Bars（条、栏）

bars包括状态栏，导航栏、搜索条、标签栏、工具栏

组件名：

• status bars （状态栏）

• navigation bar （导航栏）

• back button （后退按钮，包括文字label和后退icon）

• title （标题，如导航栏的标题文字）

• label （标签，一般可点击文字加上区域）

button（这个不用多解释，组合有back button后退按钮，action button功能按钮等）

search bar （搜索条）

• search field （搜索框，搜索条内的输入区域）

这两个，一个是输入区整体，一个是底部色块，都可称为search field

• cursor （光标，输入时闪烁的竖线）

• tabbars （标签栏）

• tab （标签）

• frame （框架，比如tab的矩形范围，无填充色）

• toolbar （工具栏，可以理解为一些页面下方独有的tabbar）

• action （功能，工具栏的每块标签。我们设计时按实际功能命名就好了）

• background （底，背景）

状态词（形容、描述不同的状态）：

• left（左） accessory（部件） , right（右） accessory（部件）

• light （明） , dark （暗）

• back （后退，如back button），large （大，如large title）

• empty （空 ，未填写）

• focus （焦点，如搜索框选中，focus1是选中未填写，focus2是选中已填写）

• inactive （不活跃的，指iOS11的导航栏收起变窄）

• active （活跃的，iOS 11下拉变大标题模式）

• default （缺省、即默认，下面的即ios11 的一种默认的navigation bar形式）

• with （带有）

比如with search （带有搜索的）

以下是重头戏，完整格式举例

苹果的书写顺序（symbol命名）是从大类到小类 状态描述 功能

如：Bars/Navigation Bar/Light Default Navigation Bar with Search（括号里是我的翻译，大家写的时候不用加上）

在文末我会附上Teambition的DLS书写顺序链接~

• status bars-dark （状态栏-暗）

• status bar-light-back（状态栏-明-后退）

• status bar-incall （状态栏-通话中）

• status bar-recording（状态栏-录音中）

• status bar-location（状态栏-定位中）

• navigation bar/light/default （导航栏/明/默认）

• navigation bar/_resources/light/left combinations/back button（导航栏/资源/明/左组合/后退按钮）、navigation bar/_resources/light/right combinations/label （导航栏/资源/明/右组合/标签）

• navigation bar/_resources/light/left combinations/label（导航栏/资源/明/左组合/标签）、navigation bar/resources/light/right combinations/label emphasized（导航栏/资源/明/右组合/强调标签）

更多的格式举例，笔者觉得没必要一一举出，搬出链接，大家自己研究其实更好。

实际项目中，可能做不到如此详细，但尽可能保证团队使用一种命名格式。