苹果粘贴为什么是英文的(图层英文怎么写)

在产品视觉设计中,用英文命名图层是良好的习惯:对开发友好,而且方便配合一些设计工具(如Framer、Principle)。在ios设计中,苹果官方的图层命名较为完整,虽然不是唯一答案,但很有参考价值。文字书写格式参考了我们公司(Teambition)的DLS,在一些命名有多种的情况下,我酌情合并或选择了简洁的。笔者英文很渣,这也是我学习的过程,如果发现错误请大家指正~

Bars(条、栏)

bars包括状态栏,导航栏、搜索条、标签栏、工具栏

组件名:

  • status bars (状态栏)

苹果粘贴为什么是英文的(图层英文怎么写)(1)

  • navigation bar (导航栏)

  • back button (后退按钮,包括文字label和后退icon)

  • title (标题,如导航栏的标题文字)

苹果粘贴为什么是英文的(图层英文怎么写)(2)

  • label (标签,一般可点击文字加上区域)

苹果粘贴为什么是英文的(图层英文怎么写)(3)

  • button(这个不用多解释,组合有back button后退按钮,action button功能按钮等)

  • search bar (搜索条)

  • 苹果粘贴为什么是英文的(图层英文怎么写)(4)

    • search field (搜索框,搜索条内的输入区域)

    这两个,一个是输入区整体,一个是底部色块,都可称为search field

    苹果粘贴为什么是英文的(图层英文怎么写)(5)

    苹果粘贴为什么是英文的(图层英文怎么写)(6)

    • cursor (光标,输入时闪烁的竖线)

    苹果粘贴为什么是英文的(图层英文怎么写)(7)

    • tabbars (标签栏)

    • tab (标签)

    • frame (框架,比如tab的矩形范围,无填充色)

    苹果粘贴为什么是英文的(图层英文怎么写)(8)

    • toolbar (工具栏,可以理解为一些页面下方独有的tabbar)

    • action (功能,工具栏的每块标签。我们设计时按实际功能命名就好了)

    苹果粘贴为什么是英文的(图层英文怎么写)(9)

    • background (底,背景)

    苹果粘贴为什么是英文的(图层英文怎么写)(10)

    状态词(形容、描述不同的状态):

    • left(左) accessory(部件) , right(右) accessory(部件)

    苹果粘贴为什么是英文的(图层英文怎么写)(11)

    • light (明) , dark (暗)

    苹果粘贴为什么是英文的(图层英文怎么写)(12)

    • back (后退,如back button),large (大,如large title)

    苹果粘贴为什么是英文的(图层英文怎么写)(13)

    • empty (空 ,未填写)

    苹果粘贴为什么是英文的(图层英文怎么写)(14)

    • focus (焦点,如搜索框选中,focus1是选中未填写,focus2是选中已填写)

    苹果粘贴为什么是英文的(图层英文怎么写)(15)

    苹果粘贴为什么是英文的(图层英文怎么写)(16)

    • inactive (不活跃的,指iOS11的导航栏收起变窄)

    苹果粘贴为什么是英文的(图层英文怎么写)(17)

    • active (活跃的,iOS 11下拉变大标题模式)

    苹果粘贴为什么是英文的(图层英文怎么写)(18)

    • default (缺省、即默认,下面的即ios11 的一种默认的navigation bar形式)

    苹果粘贴为什么是英文的(图层英文怎么写)(19)

    • with (带有)

    比如with search (带有搜索的)

    苹果粘贴为什么是英文的(图层英文怎么写)(20)

    以下是重头戏,完整格式举例

    苹果的书写顺序(symbol命名)是从大类到小类 状态描述 功能

    如:Bars/Navigation Bar/Light Default Navigation Bar with Search(括号里是我的翻译,大家写的时候不用加上)

    在文末我会附上Teambition的DLS书写顺序链接~

    • status bars-dark (状态栏-暗)

    苹果粘贴为什么是英文的(图层英文怎么写)(21)

    • status bar-light-back(状态栏-明-后退)

    苹果粘贴为什么是英文的(图层英文怎么写)(22)

    • status bar-incall (状态栏-通话中)

    苹果粘贴为什么是英文的(图层英文怎么写)(23)

    • status bar-recording(状态栏-录音中)

    苹果粘贴为什么是英文的(图层英文怎么写)(24)

    • status bar-location(状态栏-定位中)

    苹果粘贴为什么是英文的(图层英文怎么写)(25)

    • navigation bar/light/default (导航栏/明/默认)

    苹果粘贴为什么是英文的(图层英文怎么写)(26)

    • navigation bar/_resources/light/left combinations/back button(导航栏/资源/明/左组合/后退按钮)、navigation bar/_resources/light/right combinations/label (导航栏/资源/明/右组合/标签)

    苹果粘贴为什么是英文的(图层英文怎么写)(27)

    • navigation bar/_resources/light/left combinations/label(导航栏/资源/明/左组合/标签)、navigation bar/resources/light/right combinations/label emphasized(导航栏/资源/明/右组合/强调标签)

    苹果粘贴为什么是英文的(图层英文怎么写)(28)

    更多的格式举例,笔者觉得没必要一一举出,搬出链接,大家自己研究其实更好。

    实际项目中,可能做不到如此详细,但尽可能保证团队使用一种命名格式。

    ,

    免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。