BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

关于在iOS当中实践Material Design的访谈

关于在iOS当中实践Material Design的访谈

刚刚过去的这一周,气温逐渐平稳回落,维持在某种不那么极端的夏天水平,且下了雨;秋天快要来了的样子。突然想到一些网站没有编辑人员介入,直接通过系统抓内容生成引言然后转载,抓到我这里的时候就是这样一堆乱七八糟有的没的东西约莫200来字,混杂在其他文章当中一并陈列下来…想想觉得好好笑...

说不定如果我哪天写一篇和设计完全无关的东西,也会被那些系统抓过去隐藏掉来源出处然后打上什么“行业资讯”或“设计干货”一类的标签,读者打开页面就会看到譬如“设计师必读干货!重点导读:刚刚过去的这一周,气温逐渐平稳回落,维持在某种不那么极端的夏天水平,且下了雨;秋天快要来了的样子”…想想又觉得好好笑...

恩,明天下午去看终结者,所以博客尽量在周六更新掉。篇幅不长,感觉与以往的文章略有不同 - 一篇访谈,设计师Jason Zigrino(不认识)谈他在iOS平台上尝试Material Design设计语言的经验。不知各位如何,我个人对于Material Design的认知还比较浅层,也未曾实际使用过相关系统,只是弱弱的觉得,在五颜六色绚烂多彩的视觉形式背后,最值得关注的还是它在交互空间、界面和元素状态转场过渡等交互层面的价值;一些具体的设计模式相比于iOS来说可能更具探索性和合理性。平台差异的背后其实是大家对于更合理更进步的人机互动方式的探寻,这里不存在阵营或流派。

说着说着认真起来了呢。下面进入译文。原文当中关于这位设计师成长经历和近期项目介绍的内容省去了,脱一层水。小节标题是host的提问。

你产出了很多不错的Material Design,尤其是iOS版本的Google Keep探索。你平时都使用哪些工具?设计这些app界面通常需要多少时间?

和大家一样,我在多数项目里都会用到Photoshop和Illustrator,不过最近特别钟情于Sketch。我从来无法满足于静态的mockup,所以涉及到动效设计时,我通常会使用After Effects。

在设计iOS版本的Google Keep时也不例外,这些工具基本都有用到,特别是最后需要将所有的界面和转场方案都整合到After Effects当中。花费的时间大约在一周的样子。

对我而言,动效设计可以传达出很多静态界面及传统转场流程难以表现出的特质,其中也包括一些情感化的元素。但同时我也必须强调一点,无论是单一元素还是界面转场,其中的动效都必须服务于某种目的,而不只是出于美观炫酷,更不能干扰或拖延人机互动流程。

当我与界面上的元素进行互动时,我下意识的希望了解这些元素从何而来,又会去到哪里。界面上的多数交互元素不能只是凭空的出现或消失 - 交互行为与触发的结果之间没有视觉上的关联,用户很快会迷失方向。

交互元素自身的行为特质对于我们理解和记忆界面的交互方式非常重要。譬如我给你一个界面,上面有一个返回按钮。当你点击这个按钮的时候,自然会期望有事情发生。然而,如果当前界面只是凭空消失,同时新的界面突然呈现在眼前,你便无法感知到前后状态变化之间的关联,进而需要回忆之前的界面状态,回忆自己的操作行为,并根据回忆来推测当前界面与之前的内容及操作之间的关系。虽然在实际当中这一过程非常短暂,但足以给用户造成很大的认知负荷。所以,更合理的做法是使当前界面平滑的过渡到下一个界面,或是使特定的交互元素通过某种运动方式过渡到下一个状态,通过这种有迹可循的过渡方式辅助用户转移注意力,让他们更直观的理解交互行为与状态变化之间的关联。

01-material-design-ios-app.gif

在iOS版本的Google Keep当中,我通过动效全程辅助着用户的每一个交互行为。例如,当用户选择创建一条新备忘,文本输入框会自动展开,然后更多相关的信息和选项会通过动效呈现在输入框底部。在这个环节当中,随着状态的切换,信息和功能由主到次通过动效依次展示在界面当中,用户的注意力得以平滑的过渡到新的状态当中,无需刻意回忆和判断前后状态的区别。

此外,在为这条备忘选择主题背景色时,与当前任务不相关的功能和信息会淡出消失,同时色彩选项依次移入。点击某个色彩按钮之后,主题背景色的动态切换方式也会使用户感到这些是在自己的操作行为触发下完成的,控制感很强。

02-material-design-ios-app.png

03-material-design-ios-app.png

你为什么决定在iOS平台上尝试通过Material Design打造Google Keep?

无论对于Android,还是iOS、Mac甚至是PC,我都很有热情,所以慢慢开始习惯于在各个平台的设计生态之间取长补短。我对Google Keep非常有爱,不过可惜的是,Google并没有在iOS App Store上架官方的版本,所以我决定自己上手,在iOS上尝试使用Material Design设计语言来打造一系列非官方版本的Keep界面。

如今,我越来越聚焦于对UI动效在人机互动当中的沟通作用进行探索和实践。平时,我会试着在其他一些知名的iOS app当中通过Material Design的设计语言来提升交互和视觉体验,另外也在设计一款自己的旅行社交app。这些对我来说都是绝佳的实践机会。

使用Material Design设计的iOS app当中,你最喜欢哪一个?

这个问题蛮难回答的。Google官方最近在iOS上发布了很多优秀的app,譬如Google Search和Inbox,在我看来便是Google官方在iOS上尝试Material Design语言的绝佳案例。

04-material-design-ios-app.png

在所有这些app当中,我个人觉得Google Play Music算是集大成于一身,包括通过动效引导用户与界面进行互动、通过简洁的界面框架使内容本身得到最大化的呈现等一系列基本设计原则都得到了淋漓尽致的体现。

你是否认为Material Design将来会对iOS app的设计方式带来越来越深的影响?

绝对的。实际上,抛开特定的风格概念,将设计语言的本质抽象出来,你会发现Material Design的基础理念可以被运用到所有的平台与设备当中。当然这并不意味着所有平台上的app都会有着相同的外在表现形式。

你是否建议其他设计师在iOS app当中尝试Material Design的设计元素?

Material Design设计语言当中的诸多视觉要素与交互模式都可以很好的被运用在iOS平台上。但是无论怎样,与操作系统自身的特性保持和谐统一都是非常重要的。你不能为了融合风格而去融合风格。在没有绝对必要的情况下,强迫用户去学习和掌握全新的操作习惯,这种做法无论在可用性层面还是情感层面都会造成极大的负面效应。设计语言的基本原理是可以被灵活运用的,根本目标是最大化的提升体验,不要制造出颠覆性的结果。

对于在iOS app当中尝试Material Design这件事,我个人更加聚焦于它背后的设计原理,而非具体的界面及元素的视觉样式;前者是根本,而后者很可能会随着潮流而更迭。对我来说,站在交互层面,元素与界面的转场过渡方式对人机互动体验的影响作用才是最值得关注的。在如今的触屏设备上,人机互动方式越来越复杂,但真实的控制感却越来越低;怎样融汇诸多设计语言当中的精华,更自然、更有效的提升人机互动体验,这是最关键的。

Material Design会不会只是一种设计潮流?

对于任何一种设计风格,当我们审视它们背后的基本原理时,或多或少总会发现一些经得起时间考验的要素。Material Design是一种纯粹的数字化设计语言,随着时间而发展演变,这是它与生俱来的能力。我们今天所看到和谈论到的Material Design,在两年之后很可能已经发展成另外一种形态。不妨将这类设计语言看做某种有机体,它能持续的调整和进化,以适应外在环境。

谢了,Jason!

本文相关内容:

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (5)
我也尝试过在 iOS 中使用 Material Design,正如文中所说的,MD 的设计风格在跨平台设计很有优势,可以很好的融入不同的平台,包括 iOS、Android、PC 以及 Web。 我在 iOS 中使用 MD 风格是因为时间上的仓促,所以打算做出一种风格然后适配到不同的平台。但是也正是由于时间仓促,才发现更不应该去使用 MD。第一次去用的时候难免会出现一些问题,比如对 卡片 形式的滥用。 不过我觉得最大问题是在动画上,iOS 并不像 Android 原生可以提供一些动画,iOS 自身的底部导航对于用户来说非常容易发现,而 MD 的几种窗口跳转都需要一些动画的支持,不然用户无法理解窗口之间的关系。时间仓促就没有去在这方面做足功课,因此最初的产品中看起来就是一团糟,结果非常失望。 交互上我觉得 MD 主要的导航方式,包括侧栏的抽屉式,以及顶部的 Tab 都存在一些可见性的问题,要求用户能够理解 汉堡包 菜单的含义,以及可滑动切换到 Tab。所以感觉 MD 有点类似 Microsoft 最初的 Metro 风格,非常超前,要求用户有一定的互联网经验。不过好在 Google 对于 MD 的态度比 Microsoft 要重视很多。而且指导手册也在不断的更新,对一些新手设计师,这个手册帮助也非常大,个人是很看好 Material Design。
好赞的经验分享,学习了;如果什么时候会汇总成文的话也请告知一下:) 多谢
不太会写经验分享,随便说几句还成,写太多了感觉写的不严谨,怕误导了读者。
无意一翻竟然有更新~啊哈哈哈~斑爹你又调皮了~
XD