陌北默

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

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

 

Bars(条、栏)

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

 

组件名:

status bars (状态栏)

bars-20171010-1

 

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(控制)部分的内容~

 

作者:在雨木头 非科班设计(公众号)

feikeban

转载请注明:学UI网 » Apple官方如何命名图层?(Bars篇)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
Apple官方如何命名图层?(Controls篇)Apple官方如何命名图层?(Controls篇)
UI设计图标绘制深层知识UI设计图标绘制深层知识
UI设计需掌握的细节及技巧UI设计需掌握的细节及技巧
版式設計-名片排版の1000种解法版式設計-名片排版の1000种解法
手把手教你如何适配 iPhone X手把手教你如何适配 iPhone X
通过微信Android和iOS版看两大系统差异通过微信Android和iOS版看两大系统差异
三分钟搞清iPhone X 设计尺寸和适配三分钟搞清iPhone X 设计尺寸和适配
设计规范 | 详解组件控件结构体系-单元控件类设计规范 | 详解组件控件结构体系-单元控件类
设计规范 | 详解组件控件结构体系-操作类设计规范 | 详解组件控件结构体系-操作类
设计规范 | 详解组件控件结构体系-提示类设计规范 | 详解组件控件结构体系-提示类