iOS11人机交互指南(五)- 视觉设计(Visual Design)- 下

四、颜色(Color)

颜色是增加活力、提供视觉的连续性、传达状态信息、反馈用户的行为并帮助用户将数据可视化的好方式。在挑选应用色调的颜色时,请参考系统的色彩方案,以保证这些颜色无论是单独还是组合、在浅色背景还是深色背景上都看起来很棒。

明智地使用颜色进行沟通。 谨慎少量使用颜色以唤起对重要信息的注意力。 例如,当出于非关键原因在应用程序中的其他地方使用红色时,警告人们出现严重问题的红色三角形会变得不那么有效。

在应用内使用互补的颜色。你的应用内的颜色应该和谐共处,不会互相冲突和干扰。如果你的应用风格的基础色调是柔和的,那么使用一系列与之协调的柔和色调。

一般来说,选择与你的应用logo相符的颜色数量有限的色板。巧妙地使用颜色是一个传达品牌的好办法。

考虑在应用中统一使用一种关键色来暗示交互性。在Note中,可交互的元素是黄色的。在Calendar中,可交互的元素是红色的。如果你定义了一种关键色用于传递可交互性,那么你要保证其它颜色不会与之冲突。

避免给可交互和不可交互的元素使用相同的颜色。如果可交互和不可交互的元素是同一种颜色,用户就很难知道到底哪里是可点击的。

可交互和不可交互元素

考虑插图和半透明对颜色的影响。变换插图有时也要变换附近的颜色,以保持视觉的连续性,并防止界面元素变得过于强大或平庸。例如,地图在使用地图模式时显示亮色,但当启用卫星模式时会切换到暗色调模式。颜色在半透明元素之下和之上(比如工具栏)都会看起来很不一样。

 左:光线较亮;右:光线较暗

在多种光线条件下测试你的应用颜色方案。光线会在室内和室外、房间氛围、不同的时间、气候等条件下明显地变化。你的应用在现实世界中使用时看到的颜色不会一直和你在电脑上看到的颜色相同。你应该在不同的光线条件下预览你的应用来观察颜色的真实表现,比如在晴朗的户外。必要时,应当调整颜色以求在大多数的使用场景下提供最好的视觉体验。

考虑True Tone显示屏对颜色的影响。True Tone显示屏利用了环境光传感器来自动调整显示屏的白点,以适应当前环境下的光线情况。专注于阅读、照片、视频和游戏的应用可以通过确定一种白点纠正模式来强化或弱化True Tone 的效果。开发指导请查阅 Information Property List Key Reference

注意色盲。例如,很多色盲用户很难分辨红色和绿色(以及任何颜色和灰色),或是蓝色和橘色。避免把这些颜色组合作为区分两种状态或值的唯一方式。例如,用红色方块和绿色圆形来表示下线和上线状态,而不是用红色圆形和绿色圆形。有些图形编辑软件含有能够帮助你证明你是否是色盲的工具。

左: 非色盲所见 ;右: 红绿色盲所见

考虑你在其他国家和文化中如何使用颜色。例如,在某些文化里,红色用来表示危险;但在另一些文化里,红色又有着积极的含义。请确保在你的应用中的颜色传达了恰当的讯息。

使用足够的颜色对比度。在应用中,过低的对比度会让内容难以阅读。比如,图标和文本可能会和背景相融合。在线的颜色对比度计算器能够帮助你精确的分析应用中的颜色对比度,以确保它符合最佳标准。请确保你的应用对比度至少达到4.5:1,但是7:1更好,因为它符合更加严格的辅助功能标准。

色彩管理

将颜色配置应用到你的图像中。iOS默认颜色空间为标准RGB(sRGB)。为了确保应用的颜色与此颜色空间匹配正确,请确保图像包含嵌入的颜色配置文件。

使用 P3 色彩空间增强广色域屏幕体验。iOS 设备的广色域屏幕支持 P3 色彩空间,颜色比 sRGB 更丰富,更饱满。因此使用 P3 色彩空间的照片和视频更加逼真,视觉数据和状态指示更具冲击力。适当时,使用 P3 颜色配置文件(每通道16位),并以 .png 格式导出图像。请注意,需要支持 P3 颜色配置文件的显示器才能设计相匹配的颜色。

当体验需要时提供颜色空间特定的图像和颜色变化。一般来说,P3 颜色空间和图片倾向于在 sRGB 设备中使用。然而,有时很难区分sRGB 设备中两个非常相似颜色的差异, P3 颜色的渐变效果也有时会在 sRGB 上会出现色带。为了避免这些问题,可以在 Xcode 的资源目录中提供不同色彩标准的图像,确保 sRGB 和 P3 屏幕上色彩还原度。

在 sRGB 和 P3 屏幕上都预览颜色。根据需要进行调整,以确保在两种类型的屏幕上有同样很好的视觉效果。

提示:在P3屏幕的Mac上,您可以使用系统颜色选择器来选择和预览P3颜色,并将其与sRGB颜色进行比较。

五、术语(Terminology)

应用中的每个用词都是与用户进行交流的一部分,让用户在使用应用中感到舒适。

用词应熟悉且好理解。专业技术术语可能会吓到用户。要避免使用用户可能不了解的技术术语和相关缩写。如果了解受众,可以衡量某些词语或是否得当。一般来说,受人喜爱的应用会避开高度技术性用语,它们只适用于先进或技术人群。

确保界面文字清晰简洁。用户能快速、轻松地理解简短文本,而且不喜欢被迫阅读长段落来完成任务。简明扼要地表达最重要的信息,并突出显现,以便用户不必阅读太多,就能找到他们需要的内容,或弄清楚下一步该怎样做。

恰当确定交互元素。用户应能一目了然地了解某个元素的作用,必要时应配上说明文字,建议使用动词,如连接、发送、添加。

避免歧义。避免使用我们、我们的、我、我的(例如“我们的教程”和“我的锻炼”)。用户有时会理解为一种侮辱或高人一等的态度。

善用友好语调。使用一种非正式且平易近人的语调,类似于在午餐时与他人交谈的方式。可以适时用谦卑的语调,如使用 “您” 作为尊称。

谨慎幽默。请记住,用户很可能会在界面中阅读文本内容,使用幽默的句式最初看起来可能很讨喜,但随着时间的推移用户会对这种这法变得恼怒。还要记住,一种文化中的幽默不一定在其他文化中被理解。

使用与设备一致的描述。始终确保内容能够指导用户。例如,当用户使用 iPad 时,不会显示 iPhone 的图像。用词也要和平台一致,点击、清扫、滑动、挤压和拖放触摸屏内容,按住 Home 键,使用 3D Touch ,旋转并摇动设备。

准确的参考日期。使用“今天”和“明天”这种友好的描述是合适的,但要是不考虑语境,这些术语可能会令用户困惑甚至误解。假设一个在午夜之前开始的事件,在一个时区可能从今天开始,在另一个时区可能在昨天就已开始。一般来说,日期是以用户所在时区确定的。但用户所在时区也会变化,例如在航班类应用中,明确显示飞行起始日期和时区会更为明确。

六、字体排印(Typography)

旧金山(SF)是iOS中的系统字体。这个字体类型已优化来使不匹配文本易读、清晰和一致。从 here下载旧金山字体系列。

强调重要信息。通过利用字体的粗细、大小和颜色来突出你应用程序中最重要的信息。

尽可能使用单一字体。混合几种不同的字体可能使你的应用程序显得支离破碎和草率。考虑使用单一字体,并使用此字体的一些变体和大小。

尽可能使用内置的文本样式。内置的文本样式让您以直观的方式表达内容,同时保持最佳的可读性。这些样式基于系统字体,并允许您利用关键的排版特性,例如动态类型,它会自动调整跟踪并引导每个字体大小。iOS包括以下文字类型:.

开发指导请参阅 UIFontTextStyle

确保自定义字体是易读的。iOS支持自定义字体,但通常很难阅读。除非你的应用程序对自定义字体有强烈的需求,比如为了品牌目的,或者为了创建一个沉浸式的游戏体验,否则最好还是坚持使用系统字体。如果您使用自定义字体,请确保它易于阅读(即使是小尺寸)。

实现自定义字体的可访问特性。系统字体会自动对可访问性特性做出反应,比如粗体文本和较大样式。使用自定义字体的应用程序应该通过检查是否启用了可访问性特性并在更改时注册通知来实现相同的行为。请参阅 Accessibility

动态类型大小

旧金山字体设计得在大字体和小字体上都易读。动态类型让读者选择他们喜欢的文本大小,这样提供了更多的灵活性。可以在 Resources 中下载动态类型大小表。

在响应文本大小的变化时优先考虑内容。并非所有内容都同样重要。当有人选择更大的尺寸时,他们想要使他们关心的内容更容易阅读;他们并不总是希望屏幕上的每一个字都更大。

更大的可访问性类型

除了标准的动态类型大小之外,该系统还为具有可访问性需求的用户提供了一些更大的字体类型。

字体的使用和跟踪

在接口模型中使用正确的字体变体。当你在标准控件(如按钮和标签)中使用旧金山的文本时,iOS会根据点大小和用户的可访问性设置自动应用最适当的变体。在接口模型中,使用SF Pro Text则文本大小为19点或更小,使用SF Pro Display则文本大小为20点或更大,并适当调整字母间距。

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

推荐阅读更多精彩内容