精简版 | iOS人机交互指南——视觉设计

动画

  • 谨慎使用动画和运动效果。
  • 努力让动画接近真实和可靠。
  • 应用内使用一致的动画效果。动画一致性
  • 让动画效果可选。

品牌

成功的品牌植入不仅仅是在应用内增加品牌元素。好的应用通过醒目的字体、颜色、图片等传递品牌概念。

  • 提炼出品牌理念。用户使用你的应用时用来或许信息的,而不是来看广告。
  • 不要让品牌阻碍良好的应用设计。
  • 应该更侧重于内容本身。
  • 不要整个应用都显示你的LOGO。
  • 遵循苹果的商标指南。可以参考Apple Trademark ListGuidelines for Using Apple Trademarks

颜色

iOS使用的扁平化颜色-来自Apple官网
  • 配套的颜色应该贯穿整个应用。使用一致的颜色搭配。
  • 一般来说,选择的部分颜色与你的LOGO匹配。精妙地会用颜色是传达品牌的一种不错的方式。
  • 整个应用中贯穿一个关键颜色来只是可交互的元素。色调唯一性
    可交互颜色-来自于Apple官网
    可交互颜色-来自于Apple官网
  • 避免对不能交互和可交互的元素使用相同的颜色。交互指示唯一性
  • 考虑插图和透明度是如何影响周围的颜色。
  • 你的图片应该是使用正确的颜色模式。iOS的默认模式是sRGB。
  • 在兼容的设备上使用更广泛的颜色来提升视觉体验。支持Display P3。


    sRGB和Display P3的色彩空间
    sRGB和Display P3的色彩空间
  • 在不同的光线条件下测试你颜色方案。
  • 考虑True Tone display如何影响颜色。更多实现细节可参考Information Property List Key Reference(没懂什么意思)
  • 关注色盲人群和不同文化对颜色的看法。
  • 充足的颜色对比。对比度至少为4.5:1,7:1更好。

布局

一般人希望可以在任何设备和方向上使用自己希望的应用。在iOS中,界面元素和布局可以根据不同的设备进行自动的改变形状和大小。

  • 在环境变化时持续关注当前内容。内容应该最高优先级。
  • 确保主要内容在默认大小下是清楚。
  • 整个应用内位置一致的外观。
  • 使用视觉上的重量和平衡来突出重要的内容。大的事物比小的更能吸引眼球和显得更为重要。一般来说重要的内容放在上半屏,最好事靠近屏幕的左边。
  • 使用对齐来组织内容。对齐使用应用看起来更有条理,可以帮助用户在滚动时更容易发现信息。
  • 避免无理由地更变布局。用户旋转设备时并不意味着这个布局都需要改变。
  • 如果可以的话,同时支持竖屏和横屏。
  • 如果你的应用只支持一个方向,确保支持不同的变体(朝上或朝下)
  • 根据环境定制你的应用响应旋转。
  • 为交互元素提供足够的点击范围。区域至少为44p x 44p。
  • 为文本的大小改变作准备。用户期望,当他们在系统设置中改变字体大小,应用可以响设置。关于更多实现细节可以参考Typography
    更多关于自适应的实现细节,可参考Auto Layout Guide

排版

San Francisco 是iOS的系统字体,它有两个变体:小于或等于19号的字体,和大于或等于20号的字体。通过这里下载字体。

  • 强调重要的信息。通过字体的重量、大小和颜色来高亮重要的信息。
  • 如果可以的话使用单一字体。
  • 尽可能使用内置的字体样式
  • 确保自定义字体是清晰的。iOS支持自定义字体,但不利于阅读。除非你有强烈要求使用自定字体,例如出于品牌目的或需要创造沉浸式的游戏体验,不然坚持使用系统自带的字体。
  • 确实自定义字体能响应辅助功能。具体可参考Accessibility

自动字体大小
SF UI字体的两个变体都会显示良好。自动字体大小提供了额外的功能让读者选择合适的字体。

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

推荐阅读更多精彩内容