本文主要包含图层命名,图层管理,经验分享,设计规范等相关知识,希望在学习及工作中可以帮助到您
@爆裂的墨水瓶 ：在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如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
「高手帮你学规范」
- 高手帮你学规范！iOS和Android规范解析之提示框+警告框
- 高手帮你学规范！iOS和Android规范解析之简易菜单+弹框
- 高手帮你学规范！iOS和Android规范解析之底部浮层
- 高手帮你学规范！iOS和Android规范解析之按钮
================明星栏目推荐================
优优教程网