@爆裂的墨水瓶 ：在產(chǎn)品視覺(jué)設(shè)計(jì)中，用英文命名圖層是良好的習(xí)慣：對(duì)開(kāi)發(fā)友好，而且方便配合一些設(shè)計(jì)工具（如Framer、Principle）。在ios設(shè)計(jì)中，蘋(píng)果官方的圖層命名較為完整，雖然不是唯一答案，但很有參考價(jià)值。文字書(shū)寫(xiě)格式參考了我們公司（Teambition）的DLS，在一些命名有多種的情況下，我酌情合并或選擇了簡(jiǎn)潔的。筆者英文很渣，這也是我學(xué)習(xí)的過(guò)程，如果發(fā)現(xiàn)錯(cuò)誤請(qǐng)大家指正~

Bars（條、欄）

bars包括狀態(tài)欄，導(dǎo)航欄、搜索條、標(biāo)簽欄、工具欄

組件名：

• status bars （狀態(tài)欄）

• navigation bar （導(dǎo)航欄）
• back button （后退按鈕，包括文字label和后退icon）
• title （標(biāo)題，如導(dǎo)航欄的標(biāo)題文字）

• label （標(biāo)簽，一般可點(diǎn)擊文字加上區(qū)域）

• button（這個(gè)不用多解釋，組合有back button后退按鈕，action button功能按鈕等）
• search bar （搜索條）

• search field （搜索框，搜索條內(nèi)的輸入?yún)^(qū)域）

這兩個(gè)，一個(gè)是輸入?yún)^(qū)整體，一個(gè)是底部色塊，都可稱為search field

• cursor （光標(biāo)，輸入時(shí)閃爍的豎線）

• tabbars （標(biāo)簽欄）
• tab （標(biāo)簽）
• frame （框架，比如tab的矩形范圍，無(wú)填充色）

• toolbar （工具欄，可以理解為一些頁(yè)面下方獨(dú)有的tabbar）
• action （功能，工具欄的每塊標(biāo)簽。我們?cè)O(shè)計(jì)時(shí)按實(shí)際功能命名就好了）

• background （底，背景）

狀態(tài)詞（形容、描述不同的狀態(tài)）：

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

• light （明） , dark （暗）

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

• empty （空 ，未填寫(xiě)）

• focus （焦點(diǎn)，如搜索框選中，focus1是選中未填寫(xiě)，focus2是選中已填寫(xiě)）

• inactive （不活躍的，指iOS11的導(dǎo)航欄收起變窄）

• active （活躍的，iOS 11下拉變大標(biāo)題模式）

• default （缺省、即默認(rèn)，下面的即ios11 的一種默認(rèn)的navigation bar形式）

• with （帶有）

比如with search （帶有搜索的）

以下是重頭戲，完整格式舉例

蘋(píng)果的書(shū)寫(xiě)順序（symbol命名）是從大類到小類+狀態(tài)描述+功能

如：Bars/Navigation Bar/Light Default Navigation Bar with Search（括號(hào)里是我的翻譯，大家寫(xiě)的時(shí)候不用加上）

在文末我會(huì)附上Teambition的DLS書(shū)寫(xiě)順序鏈接~

• status bars-dark （狀態(tài)欄-暗）

• status bar-light-back（狀態(tài)欄-明-后退）

• status bar-incall （狀態(tài)欄-通話中）

• status bar-recording（狀態(tài)欄-錄音中）

• status bar-location（狀態(tài)欄-定位中）

• navigation bar/light/default （導(dǎo)航欄/明/默認(rèn)）

• navigation bar/_resources/light/left combinations/back button（導(dǎo)航欄/資源/明/左組合/后退按鈕）、navigation bar/_resources/light/right combinations/label （導(dǎo)航欄/資源/明/右組合/標(biāo)簽）

• navigation bar/_resources/light/left combinations/label（導(dǎo)航欄/資源/明/左組合/標(biāo)簽）、navigation bar/resources/light/right combinations/label emphasized（導(dǎo)航欄/資源/明/右組合/強(qiáng)調(diào)標(biāo)簽）

更多的格式舉例，筆者覺(jué)得沒(méi)必要一一舉出，搬出鏈接，大家自己研究其實(shí)更好。

實(shí)際項(xiàng)目中，可能做不到如此詳細(xì)，但盡可能保證團(tuán)隊(duì)使用一種命名格式。

當(dāng)然，如果大家覺(jué)得有用，我會(huì)后續(xù)更新Controls（控制）部分的內(nèi)容~

本文Apple設(shè)計(jì)文件

Design Resources - Apple Developer

Teambition設(shè)計(jì)語(yǔ)言的相關(guān)頁(yè)面

Teambition 的設(shè)計(jì)語(yǔ)言 - Clarity Design

「高手幫你學(xué)規(guī)范」

1. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之簡(jiǎn)易菜單+彈框
3. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之底部浮層
4. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之按鈕

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com