導(dǎo)讀在產(chǎn)品視覺設(shè)計(jì)中，用英文命名圖層是良好的習(xí)慣：對(duì)開發(fā)友好，而且方便配合一些設(shè)計(jì)工具（如Framer、Principle）。在ios設(shè)計(jì)中，蘋果官方的圖層命名....

在產(chǎn)品視覺設(shè)計(jì)中，用英文命名圖層是良好的習(xí)慣：對(duì)開發(fā)友好，而且方便配合一些設(shè)計(jì)工具（如Framer、Principle）。在ios設(shè)計(jì)中，蘋果官方的圖層命名較為完整，雖然不是唯一答案，但很有參考價(jià)值。文字書寫格式參考了我們公司（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 （空 ，未填寫）

• focus （焦點(diǎn)，如搜索框選中，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（括號(hào)里是我的翻譯，大家寫的時(shí)候不用加上）

在文末我會(huì)附上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)航欄/資源/明/右組合/強(qiáng)調(diào)標(biāo)簽）

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

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