本文基于Apple  Design Resources-iOS 11 beta (sketch)

在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如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(控制)部分的内容~

作者：来源：学UI网