[译]《iOS Human Interface Guidelines》——Color and Typography

颜色和排版

颜色增强沟通

在iOS中,颜色帮助指明交互、给予活力、并提供视觉连贯性。内置的app使用了一系列无论从个体上还是整体上看,或者明亮和阴暗的背景下看都很棒的纯净的颜色。

image

如果你创造了多种自定义颜色,确保他们整体效果良好。比如说,如果蜡笔在你的app风格中是必须的,你需要创造一系列协调的蜡笔色贯穿你的app。

关注颜色在不同环境中的对比。比如说,如果导航栏背景和栏上的按钮标题没有对比度,用户就很难看到这些按钮。一个快速但不科学的检验你的颜色是否有足够的对比度的方法是:在一个不同亮度下的设备上查看你的app,包括太阳天的户外环境。

即使在设备上查看你的app可以帮助你找到一些你需要调整的区域,这仍然取代不了更加客观地得出可靠结果的方式。这种方法包括测定前景和背景颜色亮度的比值。你可以使用在线对比比值计算器或者自己使用符合WCAG 2.0标准的公式来计算去获取这个比值。app中理想的颜色对比值为4.5:1或更高。

当你使用自定义的栏色调时考虑半透明的栏和app内容。如果你需要创造一个匹配特殊颜色的栏色调,比如一个商标中的颜色,你也许需要尝试很多种颜色才能得到想要的结果。一个栏的外观会被iOS提供的半透明效果和app中在栏后方出现的内容共同影响。

API NOTE
使用tintColor属性来设置栏上按钮标题的色调;使用barTintColor属性来设置栏本身的色调。查看UINavigationBar Class Reference,UITabBar Class Reference,UIToolbar Class Reference,和UISearchBar Class Reference来学习更多关于栏的属性。

注意色盲。大部分色盲患者难以区分红色和绿色。测试你的app确保没有任何地方使用红色和绿色作为唯一区分两种状态和值的方式(一些图片编辑软件有工具可以帮助你校验色盲)。一般来说,使用多种方式来显示一个元素的交互是好的方法(查看Interactive Elements Invite Touch学习在iOS中显示交互的内容)。

考虑选择一个主颜色来显示交互和状态。内置的app中的主颜色有备忘录中的黄色和日历中的红色。如果你确定一个主颜色去显示交互和状态,确保app中的其他颜色不与其竞争。

避免对可交互和不可交互的元素使用相同的颜色。颜色是UI元素表示其是否可交互的一种方式。如果可交互和不可交互的元素有了相同的颜色,用户很难知道点击那里。

颜色会沟通,但并不总是你想要的方式。每个人看待颜色都不一样,很多文化也对颜色的意义有不同的定义。花时间去研究你使用的颜色在其他的国家和文化中会被怎样感知。你会想要尽可能地确保你app中的颜色传达合适的信息。

大部分情况下,不要让颜色使用户分心。除非颜色是你app的必要目的,否则让颜色成为一种微妙的优化方式。

好的排版使沟通更清晰

苹果设计了San Francisco系列排版来提供一种贯穿全平台的漂亮的、一致的声音和阅读体验,在iOS 9 之后,San Francisco变成了系统字体。

San Francisco与动态排版(Dynamic Type)携手工作来给你:

  • 在所有用户设置中一系列的自动字体尺寸,包括无障碍设置中提供了最高的识别率的和很好的的阅读体验

  • 每一种字体尺寸都自动调节字母间距(字距)和行高

  • 能够为语义不同的文本块指定不同的文本风格,比如正文、注脚和标题

  • 对用户做出的文字大小设置进行合适的响应变化(包括无障碍的文字尺寸)

访问https://developer.apple.com/fonts/下载San Francisco。(注意iOS 9 中San Francisco字体叫SF-UI)当你在你的app中采用San Francisco时,你可以在模拟器 > 设置中调整数值来测试你的app文本在不同尺寸下的表现。

NOTE
如果你使用自定义的字体,仍然可以根据系统设置中的的文本尺寸调整动态排版和比例类型。你的app要对用户改变设置时做出适当的响应。查看Text Styles来学习如何使用文本类型在用户改变文本尺寸设置时确保app得到通知。

San Francisco包括两种视觉尺寸:Text和Display。Text用于低于20点的尺寸,Display用于高于20点的尺寸。当你在你的app中使用San Francisco时,iOS会自动地在Text和Display中切换。

NOTE
如果你使用类似Sketch或Photoshop的应用来创建你的设计,你需要在设置20点以上的类型时切换到Display。iOS会自动地为San Francisco调整建立在字体尺寸上的跟踪值(Tracking value)(跟踪值用来修改某个点尺寸下的字母间距)。Text和Display中每个尺寸的跟踪值分别显示在表10-1和表10-2中。

表10-1 在SF-UI Text中每个尺寸的跟踪值

image

表10-2 Display中每个尺寸的跟踪值

image

为了强调某些文本或者创造不同内容部分之间的视觉关系,你可以依靠动态排版支持的语义定义样式,比如标题和正文,或者指定字体宽度,比如纤细和半粗。采用动态排版风格可以简单地传达你内容的意义,但是如果你想要更多对设计的掌控,你也可以对某个特定的文本块设置特定的宽度。(查看UIFont Class Reference学习更多关于调整文本宽度的内容。)

比如说,你也许会想要增加某个文本的宽度来帮助用户了解内容的层级或者吸引他们的注意力到某个特定的单词或短语。或者你想要增加小字体的宽度并减小大字体的宽度来创造一种多个靠近的文本的凝聚感。字体宽度对整体风格和内容表达也具有显著的影响,所以你也许会选择一个特殊的宽度来达到一种特殊的设计目标。

当响应文本尺寸变化时区分优先次序。不同内容对用户的重要性是不同的。当用户选择一种更大的文本尺寸时,他们是想要让他们关心的内容更加易于阅读;他们并不想让屏幕上的每一个单词都变得更大。

比如说,当用户选择一个大的无障碍文本尺寸,邮件会将标题和文本用大的尺寸显示,但不会变化其他重要的文本——比如日期和收件人。

image

确保自定义字体在每一种风格、不同的尺寸下都是清晰的。一种方法是对iOS在不同尺寸下显示不同字体风格的方式进行模仿。比如:

  • 文本永远不应该小于11点,即使用户选择了特小号的尺寸。相应的,正文风格使用17点作为默认的大尺寸。

  • 一般来说,在每种尺寸设置下,字体尺寸和引导值相差一点。只有两种标题风格例外,它们在特小号、小号和中号下使用相同的字体尺寸、引导值、跟踪值。

  • 在最小的三种文本尺寸下,跟踪值会相对地大一些;在最大的三种文本尺寸下,跟踪值会相对地紧致一些。

  • 标题和正文风格使用相同的字体尺寸。为了区分正文风格,标题使用了更宽的宽度。

  • 导航栏中的文本使用17点,与正文风格在大号下相同。

  • 文本总是使用常规或中号宽度;它不使用浅或粗体,因为浅和粗体在小号下看起来不好。

一般来说,在你的app中使用单一的字体。混合多种不同的字体会使你的app看起来零散和稀松。相反的,要使用一种字体以及少量的风格和尺寸。

image

本文翻译自苹果官方开发文档

查看完整合集


查看作者首页

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

推荐阅读更多精彩内容