我们只做互联网+的高阶培训 拥有好作品才会拥有好工作 咨询热线:13671165726
中文 | English

IOS 10人机界面设计指南 (3)字体

承辉学院2016-09-27

    4.5 字体(Typography)


    iOS的系统字体是San Francisco。该字体有两个变种:SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)。当你在标签和其它界面元素应用了系统字体时,iOS系统会根据字号自动选择最合适的字体样式。它还会根据需要自动改变字体,以满足辅助性功能的设置。请前往 Resources 下载San Francisco字体。

640-1.png

    作为iOS的系统字体,San Francisco含有拉丁、希腊和西里尔字母,以及多种用于其它文字系统的字体。


    强调重要信息。使用字体粗细、大小和颜色来强调app中最重要的信息。


    如果可能的话,使用单种字体。混合使用多种字体会让你的app看起来零散和草率。考虑使用一种字体和几种样式和大小。


    可能时使用内置的文本样式。内置的文本样式让你能在视觉上清晰地表达内容,同时保持最佳的可读性。这些样式建立在系统字体的基础上并能让你得益于关键的排版特性,比如动态字体,能够根据每种字号自动调整字距和行间距。iOS含有以下文本样式:

640-5.jpeg

    确保自定义字体清晰可辨。iOS支持自定义字体,但往往很难阅读。除非你的app必须使用自定义字体,比如出于品牌目的或是为了营造沉浸式的游戏体验,否则的话请坚决使用系统字体。如果你使用了自定义字体,请确保它是可读的。


    让自定义字体实现辅助功能。系统字体能够自动对辅助性功能做出反应,比如当需要加粗文本时。使用自定义字体的app,应该通过检查辅助功能是否启用或是向系统注册以收到设定更改的通知,来执行同样的行为。


    动态字体大小


    SF UI字体的两个变种经过精心的设计,无论尺寸大小都十分清晰可读。动态字体通过让阅读者选择喜欢字体大小,从而提供了额外的灵活度。

640-6.jpeg

640-7.jpeg

640-8.jpeg

640-9.jpeg

640-10.jpeg

640-11.jpeg

    根据内容的优先级来应对字体大小的改变。不是所有的内容都一样重要。当用户选择了一个更大的尺寸,他们只想让自己关心的内容更易于阅读,而不是希望屏幕上的每一个文字都变得很大。


    字体使用和字距


    在界面原型中使用正确的字体变种。当字号不大于19点时使用SF UI Text。使用SF UI Display来展示20号及更大的文字。根据以下规则适当调整字距:

640-13.jpeg

640-14.jpeg


承辉教务01
承辉教务02