超實用！Apple 官方的圖層命名方法之控制器篇

@爆裂的墨水瓶 ：在產品視覺設計中，用英文命名圖層是良好的習慣：對開發友好，而且方便配合一些設計工具（如Framer、Principle）。在ios設計中，蘋果官方的圖層命名較為完整，雖然不是唯一答案，但很有參考價值。本文是系列第2篇，整理補充了一下思路，謝謝大家對我第1篇的的支持~

上期回顧：《圖層英文怎么寫？來看看Apple官方寫法(Bars篇)》

命名規則

1.順序為大類/中類/小類+屬性、狀態描述（非必須，看情況），使用symbol

Sketch的Symbol會識別"/"進行歸類，這個很多人都知道。特別是大型的UiKit，尤其需要這種系統的分類方法。而且，Sketch要正式推出的Libraries，其實也是基于Symbol進行協作，所以分類更能提高效率。

2.Controls(控制器)

控制器包括以下組件（類名）。

有些是查找的翻譯，有些是我自己試著翻譯的。如有錯誤，希望大家多多指正，我會及時修改的。

• 大類：Controls
• 中類：按鈕（Button）、編輯菜單（Edit Menu）、分頁點（Pagination Dots）、進度提示（Progress Indicators）、分段標題（Section Headers）、分段控制器（Segmented Control）、滑動條（Sliders）、表格視圖單元格（Table View cells）、文本域（Text Field）、文本（Text）
• 小類：步進器（Stepper）、開關（Switch）、頁面指示器（Page Controls）、頭部（Header，灰色）、Cell（單元格）、腳注（Footer，cell下面的小文字）、粘性標題（Sticky Header）、分段索引（Section Index）、Label（標注，各種文字說明）、選項卡（Tab）、Action（功能，泛指一個小功能組件，我們可以按自己的需要起名）、Dots（點）、Checkmark（對號）、Accessory（附件，一般是幾個action集合）、Indicator（指示器）等
• 屬性、狀態描述：Light（明、淺色）、Dark（暗、暗色）、Left（左）、Center（中）、Right（右）、Default（默認）、Large（大）、Info（信息）、Single（單一）、Add（添加）、On（在...上）、Selection（選中）、Multi（多）、+（多個組件之間并列）、With（帶有）、Line（行，一二三行文字）、Move（移動）、Delete（刪除）等

3.低耦合的組件用_resourse進行歸類，"_"符號開頭會使symbol排在最末。

低耦合可以理解為一個組件可用在很多地方，一般是拆分后的比較基本的組件。

Controls/TableViewCell/_Resources/Left Actions/Add Light（控制/表格視圖單元格/_資源/左功能/淺色添加）

也就是說，組合好的較大組件是symbol，拆分后低耦合（耦合：各組件之間相互連接的一種度量）的_Resources是symbol內的symbol，一般是歸屬于它的父集，如TableViewCell。

4.大小寫

大寫首字母即各種組件Symbol，小寫則多見內部非symbol的圖層、組 。所以記得在命名的前期需要想好整體的結構。

翻譯舉例：

這些可以簡單看看，印證一下我的分析。

Buttons(按鈕)

• Controls/buttons/light default(控制/按鈕/淺色默認)
• Controls/Buttons/Light Info(控制/按鈕/淺色信息)
• Controls/Buttons/Light Add(控制/按鈕/淺色添加)

Segmented Control(分段控制器)

Controls / Segmented Control / 3 Buttons on Light（控制/分段控制器/3淺色按鈕）

選項卡（Tab1,Tab2,Tab3），這里為什么寫著Label，而圖層名叫Tab呢？分析Label只是指代標簽內容的名字，而Tab是組件的類型。

Sliders(滑塊)

• Controls/Slider/Light Default（控制/滑塊/淺色默認）
• Controls/Slider/Light Volume（控制/滑塊/淺色音量）
• fill（填充）
• knob（把手）
• track（路徑）

Stepper（計步器）

• Controls/TableViewCell/Light Default（控制/表格視圖單元格/淺色默認）
• 外層symbol名：Left Detail（左詳情）
• 內層symbol名：Controls/TableViewCell/_Resources/Left Accessory/Light 1 Line（控制/表格視圖單元格/_資源/左部件/淺色1行）
• 外層symbol名：Right Detail（右詳情）
• 內層symbol名：Controls/TableViewCell/_Resources/Right Accessories/Stepper（控制/表格視圖單元格/_資源/右部件/計步器）

Page Controls（頁面指示器）

• Controls / Pagination Dots / 2 Dots On Light（控制 / 分頁點 / 2個淺色上的點）
• Controls / Pagination Dots / 2 Dots On Dark（控制 / 分頁點 / 2個暗色上的點）
• Dot 1（點）

Edit Menu（編輯菜單）

• Controls/Edit Menu/Multi Action（控制 / 編輯菜單 / 多功能）
• action1（功能1）
• Controls/Edit Menu/Light Text Selection（控制 / 編輯菜單 / 淺色被選中文字 ）

Progress Indicators（進度提示）

• Controls/Progress Indicator/Light Indetermined Spinner（控制/進度提示/淺色待定旋轉）
• Controls/Progress Indicator/Light Indetermined Spinner with Label（控制/進度提示/淺色有標注待定旋轉）
• Controls/Progress Indicator/Light Progress Bar（控制/進度提示/淺色進度條）
• Controls/Progress Indicator/Light Toolbar Progress Indicator（控制/進度提示/淺色工具欄指示器）

Table View Cells（表格視圖單元格）

這里面有大量重復的命名，故列出部分。

• Controls/TableViewCell/Light Default（控制/表格視圖單元格/淺色默認）沒錯，這些標1的都是一樣的名字
• Controls/TableViewCell/Light Default + Delete（控制/表格視圖單元格/淺色默認+刪除）
• Controls/TableViewCell/Light Default + Action + Delete（控制/表格視圖單元格/淺色默認+功能+刪除）

沒錯，用“+”串聯小類。

Section Header and Footer (分段頭部和腳注)

• Controls/Section Headers/Light Grouped Header（控制/分段頭/淺色組頭部 ，就是分隔+標明下面cells用的）
• Controls/Section Headers/Light Grouped Footer（控制/控制/分段頭/淺色組腳注，一般是簡單的解釋）

Sticky Header（粘性頭部控件）

這種頭部控件是一段距離內固定置頂的，所以稱作Sticky。但是不知道為什么Apple沒有在symbol上用這個名稱。

Controls/Section Headers/Light Default Header（控制/分段頭/淺色默認頭部）

Section Index（分段索引）

Controls/Section Headers/Light Section Index（控制/分段頭/淺色分段索引）

「新手必看！如何讓開發秒懂」

• 《超全面的UI設計切圖規范指南》
• 《寫給UI設計新手的切圖命名規則手冊》
• 《提高工作效率！可能是最全面細致的設計文件命名規范》
• 《APP設計中，如何更專業地管理設計命名系統？》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com