@爆裂的墨水瓶 ：在產品視覺設計中，用英文命名圖層是良好的習慣：對開發友好，而且方便配合一些設計工具（如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