SF Symbols详细介绍(一) —— 简介(一)

版本记录

版本号 时间
V1.0 2021.05.21 星期五

前言

SF Symbols 在 WWDC 2019 期间推出。自此Apple 为我们提供了免费 Symbols,供我们在应用中使用,而且使用它们非常简单。 不久前,WWDC 2020 又引入了 SF Symbols 2.0,这让我们在 app 中使用精美的图标更加容易。

开始

SF SymbolsWWDC 2019 期间推出。自此Apple 为我们提供了免费 Symbols,供我们在应用中使用,而且使用它们非常简单。 不久前,WWDC 2020 又引入了 SF Symbols 2.0,这让我们在 app 中使用精美的图标更加容易。

SF Symbols提供了一组超过2,400个一致的,高度可配置的符号,您可以在应用程序中使用它们。 Apple设计了SF Symbols来与San Francisco系统字体无缝集成,因此这些符号会自动确保与所有权重和大小的文本保持垂直的光学对齐。

您可以使用SF symbols来表示各种UI元素中的任务和内容类型,例如导航栏,工具栏,选项卡栏,上下文菜单和小部件。 在应用程序的其余部分中,可以在任何可以使用图像的位置使用符号。 SF符号在iOS 13和更高版本,macOS 11和更高版本,watchOS 6和更高版本以及tvOS 13和更高版本中可用。

各个符号和功能的可用性取决于您所定位的系统版本。当您将SF Symbols 2中引入的符号导出为SVG模板并将其与您的应用bundle在一起时,您可以在以iOS 13Mac Catalyst 13tvOS 13watchOS 6target的应用中使用它,但没有SF Symbol功能的好处有2种,例如多色支持和自动本地化。访问SF Symbols下载该应用程序并浏览完整的符号集。

SF Symbols 2引入了750多个新符号,其中包括:

  • 超过150种预配置的多色符号,可自动适应鲜艳度,辅助功能设置和外观模式
  • 标准符号和自定义符号中的负边距,使您可以更好地控制水平对齐方式
  • 从右到左书写系统的本地化符号变体,以及阿拉伯语,梵文和希伯来语的特定于脚本的符号

重要:所有SF符号应被视为XcodeApple SDK许可协议license agreements中定义的系统提供的图像,并应遵守其中规定的条款和条件。您不得在应用程序图标,徽标或任何其他与商标相关的用途中使用SF符号(或实质上或令人困惑的字形)。 Apple保留进行审查的权利,并有权单方面决定要求对违反上述限制的任何Symbol进行修改或中止使用,并且您同意立即遵守任何此类要求。


A Closer Look at SF Symbols

SF Symbols具有广泛的weights and scales,可帮助您创建适应性强的设计。

九个符号的权重(从超轻到黑色)分别与San Francisco系统字体的权重相对应。这种对应关系使您可以在符号和相邻文本之间实现精确的权重匹配,同时支持针对不同大小和上下文的灵活性。

每个符号也有三种比例:小,中(默认)和大。比例是相对于San Francisco系统字体的大写字母高度定义的。通过指定比例,可以调整符号相对于相邻文本的权重,而不会破坏与使用相同磅值的文本的权重匹配。有关开发人员的指导,请参阅imageScale (SwiftUI), SymbolScale (UIKit), and SymbolConfiguration (AppKit)。

默认情况下,符号可以使用应用的强调色(accent color)。在SF Symbols 2和更高版本中,可以使用多色符号来显示包含多种颜色的图像。例如,cloud.sun.rain.fill符号使用白色表示云,使用黄色表示太阳,使用蓝色表示雨。在某些情况下,可以在符号的不同区域中使用不同的颜色。例如,您可能希望为folder.badge.plus的文件夹区域指定一种颜色,例如应用程序的accent color,而系统会为badge提供绿色。有关开发人员的指导,请参见renderingMode(_:)

默认情况下,多色符号会自动适应不同的外观模式,例如Dark Mode。如果在创建的自定义符号中指定颜色,则自定义符号不会自动适应不同的外观模式。


Creating Custom Symbols

如果需要SF Symbols未提供的符号,则可以创建自己的符号。 SF Symbols应用程序使您可以将可重复使用的基于矢量的文件格式的符号导出为模板。要创建自定义符号,请导出与所需设计相似的SF符号,然后使用矢量编辑工具(如SketchIllustrator)修改模板。与使用原始模板文件一样,在您的应用程序中使用结果。 (自定义符号不支持自适应颜色。)有关开发人员的指导,请参阅Creating Custom Symbol Images for Your App。有关无法自定义的符号列表,请参见Symbols for Use As-Is

Be guided by the template。创建一个自定义符号,该符号在详细程度,optical weight,对齐方式,位置和视角方面与系统提供的符号保持一致。努力设计一个符号,它是:

  • Simple
  • Recognizable
  • Not offensive
  • Directly related to the action or content it represents

要支持各种文本设置,请根据您的应用程序所需的weights and scales创建自定义符号。要启用粗体文本设置并支持动态类型,请在所有scales下以regular, medium, semibold, and bold创建符号。如果您的应用使用了其他字体weights and scales,请同样在这些weights and scales中创建符号。

如有必要,请使用负侧边距来辅助光学水平对齐SF Symbols 2为包含徽章或其他增加符号宽度的元素的符号提供负边距。例如,在水平对齐一堆文件夹符号(其中一些包含徽章)时,可能需要使用负边距。在少数情况下,多个具有负边距的符号并排出现,您可能需要在它们之间添加空格或其他内容,以避免发生冲突。

请勿使用Apple产品的副本Apple产品受版权保护,不能在您的自定义符号中复制。

提供自定义符号的替代文本标签。替代文字标签(或辅助功能说明)不可见,但它们使VoiceOver能够以听觉方式描述屏幕上的内容,从而使视障人士更容易导航。


Symbols for Use As-Is

某些符号无法导出为模板进行自定义,并且只能用于参考下面记录的Apple技术,表格如下

参考资料

1. SF Symbols 简介
2. 官网

后记

本篇主要讲述了SF Symbols简介,感兴趣的给个赞或者关注~~~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容