58      iPhone_iPad_Mac_手機_平板_蘋果apple

圖層英文怎麼寫？來看看 Apple 官方寫法：Controls 篇

出處：非科班設計

作者：在雨木頭

本文基於Apple UI Design Resources-iOS 11 beta (Sketch)

在產品視覺設計中，用英文命名圖層是良好的習慣：對開發友好，而且方便配合一些設計工具（如Framer、Principle）。在ios設計中，蘋果官方的圖層命名較為完整，雖然不是唯一答案，但很有參考價值。

命名規則

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行）

3.外層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（控製/分段頭/淺色分段索引）

內容比較龐大（其實感覺還不夠全），謝謝大家的耐心。其實日常工作中命名中未必會做到這麼嚴格，但是把它當做一個目標，效果是顯著的。

最後更新：2017-10-08 05:42:46

  上一篇： 網友iPhone X神吐槽：Apple Jony Ive X發布啦！

  下一篇： 股民學堂：MACD的用法詳解（一）