圖層英文怎么寫？來看看Apple官方寫法（Bars篇）

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

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)簽，一般可點擊文字加上區(qū)域）

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

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

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

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

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

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

• background （底，背景）

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

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

• light （明） , dark （暗）

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

• empty （空 ，未填寫）

• focus （焦點，如搜索框選中，focus1是選中未填寫，focus2是選中已填寫）

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

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

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

• with （帶有）

比如with search （帶有搜索的）

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

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

如：Bars/Navigation Bar/Light Default Navigation Bar with Search（括號里是我的翻譯，大家寫的時候不用加上）

在文末我會附上Teambition的DLS書寫順序鏈接~

• 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)航欄/資源/明/右組合/強調(diào)標(biāo)簽）

更多的格式舉例，筆者覺得沒必要一一舉出，搬出鏈接，大家自己研究其實更好。

實際項目中，可能做不到如此詳細(xì)，但盡可能保證團隊使用一種命名格式。

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

本文Apple設(shè)計文件

Design Resources - Apple Developer

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

Teambition 的設(shè)計語言 - Clarity Design

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

1. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之簡易菜單+彈框
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è)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

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