• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超实用!Apple 官方的图层命名方法之控制器篇

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

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI控件,图层命名,基本控件,经验分享等相关知识,希望在学习及工作中可以帮助到您

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

您可能想查找下面的文章:

  • 超全面!底部动作栏设计总结
  • 如何做好提示设计?我从3个角度完成了这篇超全面的总结!
  • 「这个控件叫什么」系列之Notice Bar/通告栏
  • 超全面的分享功能设计总结
  • 「这个控件叫什么」系列之输入框/文本框/Text fields
  • 轻松看懂规范!详解组件控件结构体系之单元控件类
  • 从设计指南说起,详解iOS系统组件分类体系
  • 超实用!Apple 官方的图层命名方法之控制器篇
  • 高手帮你学规范!iOS版和安卓的规范解析之底部标签导航
  • 「这个控件叫什么」系列之动作菜单/动作面板

相关文章

  • 2018-08-23以登录账号密码不匹配为例,全面浅析设计背后的逻辑
  • 2018-08-23新手科普文!每个设计师都该懂的栅格系统基础六要素
  • 2018-08-23在APP中,Tab Bar是固定好还是不固定好?
  • 2018-08-23设计表单的时候,为什么悬浮式标签体验更好?
  • 2018-08-23如何提升界面品质感?来看这篇超全面的总结!
  • 2017-08-06HTML,CSS的命名习惯总结
  • 2017-08-06关于调试CSS跨浏览器样式bug的问题
  • 2017-08-06如何用JavaScript获取/计算页面元素的offset
  • 2017-08-06DIV常见任务(下) —变身为编辑器及div的各种diy应用
  • 2018-08-23想紧跟流行风尚?这5种平面设计趋势了解一下

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网易资深设计师:新人该如何提升设计思维?
    • 为什么你始终做不好视觉设计?
    • 超大字体排版的40个网页设计欣赏
    • CSS常见11条技巧与经验收集
    • 想成为一名好文案,需要具备这7个职业素养!
    • 优设首发!800M高质量的iPhone X+8展示模板免费打包下载
    • 手机浏览器Viewport 参数(web前端设计)
    • 实战案例!滴滴试驾商业B端App 项目设计经验总结
    • haslaylout 和 bfc解析的理解
    • 大型的视觉设计系统都是怎么设计出来的?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有