图层英文怎么写？来看看Apple官方写法（Bars篇）

@爆裂的墨水瓶 ：在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如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（导航栏/资源/明/右组合/强调标签）

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

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

当然，如果大家觉得有用，我会后续更新Controls（控制）部分的内容~

本文Apple设计文件

Design Resources - Apple Developer

Teambition设计语言的相关页面

Teambition 的设计语言 - Clarity Design

「高手帮你学规范」

1. 高手帮你学规范！iOS和Android规范解析之提示框+警告框
2. 高手帮你学规范！iOS和Android规范解析之简易菜单+弹框
3. 高手帮你学规范！iOS和Android规范解析之底部浮层
4. 高手帮你学规范！iOS和Android规范解析之按钮

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

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

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

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