超实用!Apple 官方的图层命名方法之控制器篇 - 优设网 - UISDC

超实用!Apple 官方的图层命名方法之控制器篇

2017/09/15 评论区

@爆裂的墨水瓶 :在产品视觉设计中,用英文命名图层是良好的习惯:对开发友好,而且方便配合一些设计工具(如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(控制/分段头/浅色分段索引)

「新手必看!如何让开发秒懂」

【优设网 原创文章 投稿邮箱:yuan@www.avg4xic.cn】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏??裘夥炎匝缕?,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.www.avg4xic.cn

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.avg4xic.cn/layer-name-controls

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 设计趋势 海报设计 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里