DAY 34

Material design 包含内容丰富,对动效这一块有兴趣,下个月打算学AE,研究动效,这一篇会学习 ios 10 用户界面指南。

iOS 10 人机界面指南 部分 

清晰(Clarity):纵观整个系统,任何尺寸的文字都清晰易读,图标精确易懂,恰当且微妙的修饰,聚焦于功能,一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

遵从(Deference):流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容。

深度(Depth):清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。

2.1 3D 触摸(3D Touch)

3D Touch 为触碰式交互增加了一个维度。在支持3D Touch 的设备上,用户通过对触摸屏施加不同的力度来实现更多的功能,譬如触发菜单、显示更多的内容或是播放动画。用户无需学习新的手势来使用3D Touch。当他们轻压屏幕并且获得应答的时候就能立即发现这一新的交互维度。

2.1.1 主屏幕交互(Home Screen Interaction)

在支持3D Touch的设备的主屏按压应用图标会触发相应的操作视图。该视图让你能够快速地执行常用的应用任务和预览有趣的信息,譬如日历应用,它能够提供创建新事件的快捷操作,同时显示日程表上的下一个事件。

2.1.2 轻压(Peek)和重压(Pop)

轻压允许用户使用3D Touch在当前环境上预览一个临时视图内的对象,譬如一个页面、链接或者文件。要想在支持该功能的设备上实现预览,只需用手指对应用施加一点压力,而抬起手指就能退出预览。要想打开对象来浏览更多的内容,请更重地按压屏幕直到对象放大到填满屏幕。在一些轻压视图上,你可以通过上滑来显示相应的操作按钮。譬如,在Safari打开了某个链接的轻压视图时,你可以通过上滑展开相应的操作按钮——打开链接,添加至阅读列表和复制链接。


不要让同一项具备轻压和编辑菜单(Edit menu)两个功能。当一个项目同时启用两个功能时,不但会让用户感到困惑,也会让系统难以判断用户目的。

适当时提供操作按钮。不是每个一轻压都需要操作按钮,但这是一个为常用任务提供快捷操作的好方式。如果你的应用已经为项目提供了自定义的点击并长按(touch-and-hold)动作,那么最好在轻压里包含同样的操作。

避免为打开被轻压的项目提供操作按钮。用户一般都通过更重的按压来打开他们轻压的项目。所以,没有必要再提供一个明显的打开按钮。

不要让轻压成为唯一的执行项目操作的操作。并不是所有设备都支持轻压和重压,甚至有的用户会关闭3D触摸功能。你的应用为这些情况考虑其它触发项目操作的方式。譬如,你的应用可以将轻压的快捷操作映射到一个视图中,该视图会在点击和长按时出现。

2.6 反馈(Feedback)

反馈让用户知道应用现在在做什么,发现下一步他们应该做什么,并且理解操作的结果。

悄悄地在你的界面中加入状态或其它类型的反馈。理想中,用户能够在不采取任何操作或是被打扰的情况下得到重要的信息。比如,当用户在邮件应用中查看邮时,状态信息被巧妙显示在工具栏上。这个信息不会和屏幕上的主要内容抢风头,但是用户在任何时候快速一瞥就能查看。

避免不必要的警告。警告是一种有威力的反馈机制,所以它应该只被用于传递重要的并且最好是需要操作的信息。如果用户看到太多包含无关紧要信息的警告框,他们很快就会学会忽略之后的警告。了解更多帮助,请参阅Alerts

2.7 文件处理(File Handling)

用户在创建、查看和操作文件时无需思考文件系统。如果你的应用需要运行文件时,尽可能地淡化文件处理。

让用户相信除非主动取消或删除,文件会随时被保存。总而言之,不要让用户去即时保存文件。反之,在文件被打开、关闭,或是跳转至其它应用时,应该自动定时地替用户保存文件。但在某些情况,比如正在编辑一个已被创建的文件时,保存和取消的选项也是有意义的,因为它们帮助确认何时编辑的内容应该被保存。

不要提供创建本地文件的选项。用户总是希望他们全部的文件都能在任何设备上读取。如果可能,你的应用应该支持文件云储存,比如通过与iCloud类似的服务。

设计一个直观并且图像化的文件浏览界面。理想情况下,使用用户熟悉的系统文档选择器来浏览文件。如果你想设计一个自定义的文件浏览器,请确保它是直观且高效的。最好的文件浏览器应该是高度图像化的,提供了文档的视觉再现。要想加快导航速度,减少手势的使用,并且考虑提供一个添加新文件的按钮,这样用户就无需再到其它地方去创建新文档。

让用户在你的应用内就能预览文件。

2.9 手势(Gestures)

用户通过在触摸屏上使用手势来与iOS设备交互。这些手势表现了一种亲密的人与内容之间的联系,并且加强了对屏幕上对象直接的操作感。用户普遍地希望一下的标准手势能够在操作系统和每一个应用内保持一致。

轻击(Tap):激活一个控件或者选择一个对象。

拖曳(Drag):让一个元素从一边移动到另一边,或者在屏幕内拖动元素。

滑动(Flick):快速滚动或是平移

轻扫(Swipe):单指以返回上一页,呼出分屏视图控制器(split view controller)中的隐藏视图,滑出列表行中的删除按钮,或在轻压中呼出操作列表。在iPad中四指操作用来在应用间切换。

双击(Double tap):放大并居中内容或图片,或者缩小已放大过的。

捏合(Pinch):向外张开时放大,向内捏合时缩小。

长按(Touch and hold):在可编辑或者可选文本中操作,显示放大视图用以光标定位。在某些与集合视图类似的视图中操作,进入对象可编辑的状态。

摇晃(Shake):撤销或重做

2.10 加载(Loading)

当内容在加载时,一片空白静止的屏幕好像应用被冻住了,让人感到困惑和失望,而且很可能让用户离开你的应用。

明确加载的状态。至少,展示一个活动旋转器(activity spinner)来表明有任务在进行中。更胜一筹的是,显示明确的进度,这样用户就能知道他们还需等待多久。

通过教育或娱乐用户来填充加载的时间。尝试展示游戏诀窍、令人愉悦的视频序列或者有趣的占位图。

自定义加载画面。尽管标准的活动指示器还不错,但他们有时会感觉是脱离上下文环境的。尝试设计符合你的应用或游戏的自定义动画和元素,以实现一个更沉浸式的体验。

尽快显示内容。不要让用户在看到屏幕画面前去等待内容的加载。立马显示屏幕画面,然后通过占位符、图片或者动画明确告知用户哪个范围的内容还未显示。当内容加载成功之后再把占位元素替代掉。可能时,比如当动画在播放时或是用户在某个层级或菜单导航时,在后台预加载接下来要出现的内容。

分层导航:在每屏都做一次选择,直到你到达目标位置。要想到达另外的目标位置,你必须原路返回一些层级或是从头开始重新选择。原生应用设置(Settings)和邮件(Mail)就是采用这种导航结构。

扁平导航:在不同的内容类别间切换。原生应用音乐(Music)和App Store就是采用这种导航结构。

内容驱动或是体验驱动式导航:在内容中自由地转换,或是内容定义导航。游戏、阅读以及其它沉浸式应用一般都采用这种导航结构。

有的应用结合了多种导航形式。比如,采用了扁平导航的应用也可能在每个类别之内使用层级导航。

总是提供清晰的路径。用户应该一直知道他在应用的什么位置以及如何去往下一个目标位置。除了要有清楚的导航形式,还应该确保对象间的路径是合理的、符合预期的并且容追溯的。一般来说,为用户提供到达某一屏的唯一路径。如果他们需要在非常多的情景下看到某一屏幕的内容,那么考虑采用操作列表、警告框、浮出层或是模态视图的形式展示这些内容。

设计一个能够快速简单地访问内容的信息结构。合理地组织你的信息结构,保证它只用最少次数的点击、横扫和屏幕间跳转就能访问相应的内容。

使用触摸手势来制造流畅感。让用户能轻松地在界面内跳转,而感受不到阻力。比如,你可以让用户在屏幕边界右滑,而返回到上一屏。

使用标准的导航组件。可能时,使用标准的导航控件比如页面控件、标签栏、分段控件、表格视图、集合视图和拆分视图。用户已经熟悉了这些控件,他们很自然地就知道如何玩转你的应用。

使用导航栏访问分层内容。导航栏内的标题栏能够说明当前的层级位置,使用返回按钮能够轻易地回到上一个位置。

使用标签栏来展示内容或功能相似的类别。标签栏让用户能够快速简单地在类别中切换自如,而不受当前位置的限制。

使用多页面展示同类型的内容时请使用页面控件。页面控件能够清楚地表示总页数,以及当前页的位置。天气(Weather)应用就使用了页面控件来表示不同地理位置的天气页面。

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