Apple官方如何命名圖層?(Controls篇)

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

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

 

命名規則

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網

上一篇: 如何在用戶腦海中建立獨特強有力的品牌形象?

下一篇: 三分鐘帶你解析ios三種導航模式

分享到: 更多
百人牛牛天地玄黄技巧 赛车北京pk10官方网站 新疆时时五星通走势图 黑龙江时时技巧 彩票倍投6期方法 mg阿拉德之怒手游官网下载 派彩网app 后二包胆技巧 天津时时开奖结果4星 大发超神快三计划app下载 时时彩技巧与攻略 杀号码无错 二八杠提现棋牌游戏 11选5任3追号稳赚 斗地主二人现金版 双色球走势图表近50