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

Bars(条、栏)

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

组件名:

  • status bars (状态栏)

  • navigation bar (导航栏)
  • back button (后退按钮,包括文字label和后退icon)
  • title (标题,如导航栏的标题文字)

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

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

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

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

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

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

  • toolbar (工具栏,可以理解为一些页面下方独有的tabbar)
  • action (功能,工具栏的每块标签。我们设计时按实际功能命名就好了)

  • background (底,背景)

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

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

  • light (明) , dark (暗)

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

  • empty (空 ,未填写)

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

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

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

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

  • with (带有)

比如with search (带有搜索的)

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

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

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

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

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

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

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

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

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

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

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

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


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

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

当然,如果大家觉得有用,我会后续更新Controls(控制)部分的内容~

本文Apple设计文件

Design Resources – Apple Developer

Teambition设计语言的相关页面

Teambition 的设计语言 – Clarity Design

「高手帮你学规范」

  1. 高手帮你学规范!iOS和Android规范解析之提示框+警告框
  2. 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  3. 高手帮你学规范!iOS和Android规范解析之底部浮层
  4. 高手帮你学规范!iOS和Android规范解析之按钮

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

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

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

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

点赞
收藏 7
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏