陌北默

本文基于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网—UI设计师学习教程平台 » Apple官方如何命名图层?(Bars篇)

登录收藏

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

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

【特色推荐】

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

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

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

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

 
你可能喜欢的:
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
iOS 11 vs 10: UI和交互全面对比分析iOS 11 vs 10: UI和交互全面对比分析
Apple官方如何命名图层?(Controls篇)Apple官方如何命名图层?(Controls篇)
UI设计图标绘制深层知识UI设计图标绘制深层知识
UI设计需掌握的细节及技巧UI设计需掌握的细节及技巧
版式設計-名片排版の1000种解法版式設計-名片排版の1000种解法
手把手教你如何适配 iPhone X手把手教你如何适配 iPhone X
通过微信Android和iOS版看两大系统差异通过微信Android和iOS版看两大系统差异
三分钟搞清iPhone X 设计尺寸和适配三分钟搞清iPhone X 设计尺寸和适配
设计规范 | 详解组件控件结构体系-单元控件类设计规范 | 详解组件控件结构体系-单元控件类
?