超赞!细聊iOS 9字体的变化与使用方法(附字体下载)

2015/11/04 77560

ios-9-font-transition-1

转眼间 iOS 9已经发布一个多月了,而今苹果又更新了9.2系统。对于UI设计师来说,iOS 9的更新最为激动的是带来了全新设计的中文字体「苹方」以及英文字体「San Francisco」,今天@Ping 给同学们聊聊这次字体的变化以及字体的使用规则、应该注意的问题等,附上字体下载哟。

学习IOS 9不得不看的官方设计指南:《腾讯力作!超实用的IOS 9人机界面指南(1):UI设计基础》

中文字体「苹方」

在iOS9 前的中文字体「黑体」被人诟病已久:喇叭口设计、仅包含2个字重,不仅在Retina的屏幕上不能达到很好的显示效果,并且随着iOS 7 开始的扁平化的设计语言,两个字重的「黑体」已经完全无法胜任设计的需求。就在去年,Google联合Adobe发布了「思源黑体」作为Android的默认中文字体,新的「思源黑体」不仅仅在字形上更易于在屏幕的阅读,并且拥有7个字重,充分满足了设计的需求。终于,iOS 9带来了全新的「苹方」,字形更加「优美」,且在屏幕的显示也更加清晰易读,拥有6个字重,满足了日常的设计和阅读需求。

英文字体「San Francisco」

而英文方面,苹果加入了新的字体「San Francisco」[官方网站],该字族包含了有两个字体:为 iOS 和 OS X 设计的 SF,以及为 Watch OS 设计的 SF Compact ,而各自分为各自分为Text 和 Display,其中前者 6 个字重,后者 9 个(多了三个斜体)。

SF Compact这个字体目前专门为 Watch OS 设计,该字体最明显的差异就是字碗(Bowl)的设计,Compact的更加平直,显的瘦长,手表的界面非常小,通过增加字体间间距可以提高字体的阅读性。

这个比较特别的是 SF 字体包含了两个,分别为:SF-UI-Display 和 SF-UI-Text ,他们的差异主要是字体间距的不同,Text 的字体间距较大,再小的字体中更加易读。

而苹果建议使用规则是:小于 19pt 使用 Text,大于19pt 使用 Display,当你在 APP里面使用了 SF 字体后系统会自动选择使用SF-UI-Display 还是 SF-UI-Text。

SF字体的另外一个特性是支持符号的整体居中,比如时间显示,之前的 Helvetica 的冒号是不居中的,但是新的字体调用其 API 可以实现居中。这样的特性有很多,感兴趣的朋友可以直接去官网查看[官方网站]

字体使用规则与实际中注意的问题

中文字体使用(字体选择与字体调用名称)

如果安装了 Mac 最新的 El Capitan(10.11) 里面就已经包含了该字体,较老的苹果系统,或者 Windows 用户就需要自行下载了。简体中文字体的英文名称是「PingFangSC」, 其中有6个字重可供选择。现在很多的App都是内嵌 Html 5,那么在设计的时候如何选择字体的字重呢?在 Html 中我们选择Font-Weight 来设置字体的粗细,下图就是字体的粗细与Font-Weight数字相对应的关系:

老设计稿的调整

如果之前在设计App使用的「黑体-简」,它拥有两个字重:细体和中等,对应的可以调整为苹方的细体 和 常规体或中粗体,为什么有个「或」呢?其实「黑体-简」的中等字重是偏粗的,因为该字重是直接由「华文黑体」的中黑体拿来凑合使用的!

字体渲染问题

现在做 UI 界面设计主流都是使用 Photoshop 和 Sketch。在字体的选择以外,怎么样设计稿才能更加接近 iOS 系统真实的渲染效果呢?我们需要注意两点:渲染方式和字体大小选择。

1. PS中选择苹方字体,渲染方式选择「Mac」

2. Sketch因为使用的是 Mac 默认的渲染方式,所以不需要选择,但是对与中文却有问题,如下图(上),解决方案就是:打开Perferences → General 去掉 Font Rendering的勾选就正常了。

sketch渲染对比

sketch设置 (Sketch 3.41 已经将改设置改到第二个选项「Canvas」中)

英文字体使用

1. SF Compact 和 SF 字体区别,Watch OS 使用SF Compact

2. 不同字号时候字体选择,大于19pt 选择SF-UI-Display,小于19pt 选择SF-UI-Text

iOS 9 的新字体介绍就这些了,如有错误或者疑问,都可以告诉我。

附:字体下载(百度盘)

【IOS 9字体相关好文合集】

专业干货!解读英文字体的秘密!
《流言终结者!为你解读苹果SAN FRANCISCO字体的秘密》

说IOS 字体丑的同学建议看看:
《不开玩笑!一切吐槽IOS 9字体的行为都是耍流氓》

可能是设计师都向往的生活状态:
《优设访谈!腾讯高级交互设计师C7210的十年设计路》

原文地址:zhuanlan.zhihu
作者:@Ping

uisdc-tuweia-2

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量103万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/ios-9-font-transition

界面设计 交互设计师 HTML5 素材 用户体验设计 好文 UI 转场动效 设计师专访 设计师 设计规范 排版布局 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里