iOS Human Interface Guidelines 1 简介

翻译:王冠

近期正在学习iOS的交互设计规范,计划把部分交互、界面设计翻译出来,可以加深理解,需要的同学也可以做参考,有翻译得不好的地方,欢迎指正。

UI设计基础

为iOS而设计

iOS体现了以下特性:

1尊重:UI设计帮助用户理解系统界面、与系统内容发生互动,但从不会与内容发生冲突。

2清晰:确保文字在任何尺寸下都是清晰易读的,icons要表现出可被明确辨认、易懂的特性,要用微妙和适当的元素来装饰设计UI,同时致力于带有激励性的功能设计。

3深度:视觉层次和逼真的动画效果可以让用户感到界面有生命力,提高用户的愉悦感,加深对于UI的理解。


无论是在原有基础上重新改进一个软件,还是从头开始设计一个新的软件,考虑用下面的方式来设计:

首先,第一眼看UI就能明白app的核心功能,并理解他们之间的关系。

下一步,使用iOS的主题风格,来UI设计传递给用户的体验,小心地添加细节来装饰UI,拒绝加入不必要的元素。

最后,一定要确保UI设计可以适配不同型号的设备和模式,以便用户可以正常使用软件。

在整个设计的过程中,做好准备推翻之前的工作,去大胆质疑和假设,参考内容和功能来做每个设计决策。


遵循内容

即使个性好看的UI和丰富的动效是iOS使用体验的亮点,但用户关注的内容才是核心要注意的问题。

这里有一些方法可以提升UI功能性,并且遵循用户关注的内容。


利用整个屏幕,天气app是一个非常好的例子:全屏下,利用美观的方式来显示当前天气。直接表达出最重要的信息,同时用其他空间来显示每小时的天气数据。


重新考虑现实和物理的显示效果,边框、渐变和阴影有时会让UI变得压抑、无法凸出主要内容,并与内容冲突,我们应该关注软件内容,让UI扮演一个支持的角色。


让半透明的UI元素显示出他们背后的内容,一些半透明的元素——像控制中心——提供了一种场景,让用户看见更多的内容可用,并可以让用户知道当前状态是短暂存在的。在 iOS 中,一个半透明的元素只会让它下方的内容变得模糊,看起来像透过米纸看桌面的感觉,但不会导致屏幕其他地方也变模糊。

提供清晰的展示

提供清晰的展示是另外一种保证软件内容突出的方法,突出重要的功能和内容,可以让交互变得更直观、容易理解。


使用大量负空间(空间中的空白、留白),负空间重要的内容和功能更易被注意到和理解,负空间也能让人有种风平浪静和安宁的感觉。


使用颜色让UI变得简单,一个关键的颜色——像便签里面的黄色—把重要的控件(按钮)高亮,可以表现出他们的交互性,它也让 app有一致的视觉主题。系统内建 app 使用一致纯粹、干净的系统颜色,这样不管在明暗的背景下,都能显示不错的色彩效果。


确保系统字体的易读性,iOS的系统字体可自动教正字间距和行高度,让文字在任何大小下都可以看起来很舒服,无论使用系统字体或者自定义字体,一定要确保使用动态类型。app才能在用户选择不同文字大小时自动响应调节。


接受没有边框的按钮。默认情况下,所有顶栏上的按钮都是没边框的。在中间显示内容的区域,一个没边框的按钮通过场景、颜色和文字内容来体现交互性。确有需要时,内容区域的按钮可以通过窄边框或根据背景颜色来显示自己是不同的。

用深度来交流

iOS 时常在不同层次下显示内容,通过不同层次和位置来传达内容,可以帮助用户理解屏幕和对象间关系。


使用半透明背景和浮动在主屏幕上方的动画效果,这文件夹里面的内容与屏幕其他区域分隔开。


日历提醒用多个层次列表显示,当用户选中一个列表后,其他的列表收起显示在屏幕底部。


日历在年视图、月视图、日视图的切换时,日历用增强的界面过度让用户感觉到层次和深度,在收起的年视图上,用户可以直观地看到今天的日期,同时执行其他的日历任务。


当用户选择一个月份时,年视图缩小变成月视图,高亮显示今天的日期,年份则显示在返回按钮旁边(左上角)。用户可以清楚的知道自己在哪,从哪来到这一层、如何返回上一层。


当用户选择某一天时,也有类似的界面转换效果:月视图裂开展示,把的周推到屏幕顶部横向显示,然后着重显示已选的小时视图。伴随每一次界面切换,日历不断增强对用户展示年、月、日的层次关系。

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

推荐阅读更多精彩内容