Be For Web - Material Design http://beforweb.c7210.info/taxonomy/term/168 en 关于在iOS当中实践Material Design的访谈 http://beforweb.c7210.info/node/757 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.c7210.info/sites/default/files/article-thumbs/icon-logo-s-material-design-ios-app.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>刚刚过去的这一周,气温逐渐平稳回落,维持在某种不那么极端的夏天水平,且下了雨;秋天快要来了的样子。突然想到一些网站没有编辑人员介入,直接通过系统抓内容生成引言然后转载,抓到我这里的时候就是这样一堆乱七八糟有的没的东西约莫200来字,混杂在其他文章当中一并陈列下来&hellip;想想觉得好好笑...</p> <p>说不定如果我哪天写一篇和设计完全无关的东西,也会被那些系统抓过去隐藏掉来源出处然后打上什么&ldquo;行业资讯&rdquo;或&ldquo;设计干货&rdquo;一类的标签,读者打开页面就会看到譬如&ldquo;设计师必读干货!重点导读:刚刚过去的这一周,气温逐渐平稳回落,维持在某种不那么极端的夏天水平,且下了雨;秋天快要来了的样子&rdquo;&hellip;想想又觉得好好笑...</p> <p>恩,明天下午去看终结者,所以博客尽量在周六更新掉。篇幅不长,感觉与以往的文章略有不同 - 一篇访谈,设计师Jason Zigrino(不认识)谈他在iOS平台上尝试Material Design设计语言的经验。不知各位如何,我个人对于Material Design的认知还比较浅层,也未曾实际使用过相关系统,只是弱弱的觉得,在五颜六色绚烂多彩的视觉形式背后,最值得关注的还是它在交互空间、界面和元素状态转场过渡等交互层面的价值;一些具体的设计模式相比于iOS来说可能更具探索性和合理性。平台差异的背后其实是大家对于更合理更进步的人机互动方式的探寻,这里不存在阵营或流派。</p> <p>说着说着认真起来了呢。下面进入译文。<a href="https://medium.com/materialup-exploring-material-design/should-you-use-material-design-on-ios-d740962e628d">原文</a>当中关于这位设计师成长经历和近期项目介绍的内容省去了,脱一层水。小节标题是host的提问。</p> <!--break--><h4> 你产出了很多不错的Material Design,尤其是iOS版本的Google Keep探索。你平时都使用哪些工具?设计这些app界面通常需要多少时间?</h4> <p>和大家一样,我在多数项目里都会用到Photoshop和Illustrator,不过最近特别钟情于Sketch。我从来无法满足于静态的mockup,所以涉及到动效设计时,我通常会使用After Effects。</p> <p>在设计iOS版本的Google Keep时也不例外,这些工具基本都有用到,特别是最后需要将所有的界面和转场方案都整合到After Effects当中。花费的时间大约在一周的样子。</p> <p>对我而言,动效设计可以传达出很多静态界面及传统转场流程难以表现出的特质,其中也包括一些情感化的元素。但同时我也必须强调一点,无论是单一元素还是界面转场,其中的动效都必须服务于某种目的,而不只是出于美观炫酷,更不能干扰或拖延人机互动流程。</p> <p>当我与界面上的元素进行互动时,我下意识的希望了解这些元素从何而来,又会去到哪里。界面上的多数交互元素不能只是凭空的出现或消失 - 交互行为与触发的结果之间没有视觉上的关联,用户很快会迷失方向。</p> <p>交互元素自身的行为特质对于我们理解和记忆界面的交互方式非常重要。譬如我给你一个界面,上面有一个返回按钮。当你点击这个按钮的时候,自然会期望有事情发生。然而,如果当前界面只是凭空消失,同时新的界面突然呈现在眼前,你便无法感知到前后状态变化之间的关联,进而需要回忆之前的界面状态,回忆自己的操作行为,并根据回忆来推测当前界面与之前的内容及操作之间的关系。虽然在实际当中这一过程非常短暂,但足以给用户造成很大的认知负荷。所以,更合理的做法是使当前界面平滑的过渡到下一个界面,或是使特定的交互元素通过某种运动方式过渡到下一个状态,通过这种有迹可循的过渡方式辅助用户转移注意力,让他们更直观的理解交互行为与状态变化之间的关联。</p> <p><img alt="01-material-design-ios-app.gif" src="/sites/default/files/images/201508-4/01-material-design-ios-app.gif" style="width: 600px;" /></p> <p>在iOS版本的Google Keep当中,我通过动效全程辅助着用户的每一个交互行为。例如,当用户选择创建一条新备忘,文本输入框会自动展开,然后更多相关的信息和选项会通过动效呈现在输入框底部。在这个环节当中,随着状态的切换,信息和功能由主到次通过动效依次展示在界面当中,用户的注意力得以平滑的过渡到新的状态当中,无需刻意回忆和判断前后状态的区别。</p> <p>此外,在为这条备忘选择主题背景色时,与当前任务不相关的功能和信息会淡出消失,同时色彩选项依次移入。点击某个色彩按钮之后,主题背景色的动态切换方式也会使用户感到这些是在自己的操作行为触发下完成的,控制感很强。</p> <p><img alt="02-material-design-ios-app.png" src="/sites/default/files/images/201508-4/02-material-design-ios-app.png" style="width: 600px; height: 450px;" /></p> <p><img alt="03-material-design-ios-app.png" src="/sites/default/files/images/201508-4/03-material-design-ios-app.png" style="width: 600px; height: 450px;" /></p> <h4> 你为什么决定在iOS平台上尝试通过Material Design打造Google Keep?</h4> <p>无论对于Android,还是iOS、Mac甚至是PC,我都很有热情,所以慢慢开始习惯于在各个平台的设计生态之间取长补短。我对Google Keep非常有爱,不过可惜的是,Google并没有在iOS App Store上架官方的版本,所以我决定自己上手,在iOS上尝试使用Material Design设计语言来打造一系列非官方版本的Keep界面。</p> <p>如今,我越来越聚焦于对UI动效在人机互动当中的沟通作用进行探索和实践。平时,我会试着在其他一些知名的iOS app当中通过Material Design的设计语言来提升交互和视觉体验,另外也在设计一款自己的旅行社交app。这些对我来说都是绝佳的实践机会。</p> <h4> 使用Material Design设计的iOS app当中,你最喜欢哪一个?</h4> <p>这个问题蛮难回答的。Google官方最近在iOS上发布了很多优秀的app,譬如Google Search和Inbox,在我看来便是Google官方在iOS上尝试Material Design语言的绝佳案例。</p> <p><img alt="04-material-design-ios-app.png" src="/sites/default/files/images/201508-4/04-material-design-ios-app.png" style="width: 600px;" /></p> <p>在所有这些app当中,我个人觉得Google Play Music算是集大成于一身,包括通过动效引导用户与界面进行互动、通过简洁的界面框架使内容本身得到最大化的呈现等一系列基本设计原则都得到了淋漓尽致的体现。</p> <h4> 你是否认为Material Design将来会对iOS app的设计方式带来越来越深的影响?</h4> <p>绝对的。实际上,抛开特定的风格概念,将设计语言的本质抽象出来,你会发现Material Design的基础理念可以被运用到所有的平台与设备当中。当然这并不意味着所有平台上的app都会有着相同的外在表现形式。</p> <h4> 你是否建议其他设计师在iOS app当中尝试Material Design的设计元素?</h4> <p>Material Design设计语言当中的诸多视觉要素与交互模式都可以很好的被运用在iOS平台上。但是无论怎样,与操作系统自身的特性保持和谐统一都是非常重要的。你不能为了融合风格而去融合风格。在没有绝对必要的情况下,强迫用户去学习和掌握全新的操作习惯,这种做法无论在可用性层面还是情感层面都会造成极大的负面效应。设计语言的基本原理是可以被灵活运用的,根本目标是最大化的提升体验,不要制造出颠覆性的结果。</p> <p>对于在iOS app当中尝试Material Design这件事,我个人更加聚焦于它背后的设计原理,而非具体的界面及元素的视觉样式;前者是根本,而后者很可能会随着潮流而更迭。对我来说,站在交互层面,元素与界面的转场过渡方式对人机互动体验的影响作用才是最值得关注的。在如今的触屏设备上,人机互动方式越来越复杂,但真实的控制感却越来越低;怎样融汇诸多设计语言当中的精华,更自然、更有效的提升人机互动体验,这是最关键的。</p> <h4> Material Design会不会只是一种设计潮流?</h4> <p>对于任何一种设计风格,当我们审视它们背后的基本原理时,或多或少总会发现一些经得起时间考验的要素。Material Design是一种纯粹的数字化设计语言,随着时间而发展演变,这是它与生俱来的能力。我们今天所看到和谈论到的Material Design,在两年之后很可能已经发展成另外一种形态。不妨将这类设计语言看做某种有机体,它能持续的调整和进化,以适应外在环境。</p> <h4> 谢了,Jason!</h4> <p>本文相关内容:</p> <ul> <li> Jason的<a href="http://www.materialup.com/JasonZigrino">MaterialUp</a>、<a href="https://dribbble.com/JasonZigrino">Dribbble</a>和<a href="https://twitter.com/@JasonZigrino">Twitter</a></li> <li> StackOverlow上<a href="http://www.materialup.com/posts/stackoverflow-material-design-mobile-apps">关于在iOS当中运用Material Design的讨论</a></li> </ul> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/168" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Material Design</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 22 Aug 2015 14:47:58 +0000 C7210 757 at http://beforweb.c7210.info http://beforweb.c7210.info/node/757#comments Material Design背后的“点” http://beforweb.c7210.info/node/521 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.c7210.info/sites/default/files/article-thumbs/logo-icon-google-material-design-ux_0.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>明亮的周日,真的蛮亮的,知了在外面响个不停。</p> <p>日子稍显不好过,斑喵身体不好已经一个月了,食欲和精神状态仍在起伏;说快也快,说慢真的好慢,每天都在担心和茫然着,除了照顾饮食和保持观察定期复查以外,没有其他可以去做。上周怎样也没心思更新博客了,一周过去了,强迫自己做做事情,弄一篇关于Material Design的小文。不多说了,进入正文吧。</p> <p>Material Design的理念当中,很大一部份是关于怎样将不同设备上的交互体验无缝衔接在一起的。</p> <p>所谓不同设备间的体验衔接,举个例子,例如你正在桌面设备上写一封邮件,这时突然要离开办公桌,而邮件的编辑窗口依然打开着,内容也没有完成;接下来你可以在手机、平板甚至是手表上继续写,而不用担心之前是否将其保存为草稿了,是否需要同步,是否要手动找到刚刚写到的地方,等等。</p> <!--break--><p>另外一个例子:你回到家后,智能设备上推过来的前几封邮件都是来自朋友或家人,而不是工作方面的;Google有足够强大的技术能力去理解怎样避免你在家庭时间里被工作事务所打扰。</p> <p>与其说Material Design是关于UI的,不如说它更多的是关于怎样使设备的体验得到无缝衔接,怎样使设备更智能,怎样使我们的生活更轻松的。</p> <p><img alt="01-material-design-ux-ui.jpg" src="/sites/default/files/images/201407-1/01-material-design-ux-ui.jpg" style="width: 600px; height: 305px;" /></p> <h3> Material Design的UI</h3> <p>Material Design即将成为Google用户界面的基本设计主题,所以我们也有必要了解一些他们是怎样将其创造出来的。关于Material Design,很重要的一点是其与现实世界的关联。Google的Jon Wiley告诉Fast Company:</p> <blockquote><p>当你在现实中制造某种东西时,可能会继承人类在几千年当中积累下来的知识技能。而关于软件的设计则刚刚起步。</p> </blockquote> <p>这句话隐约显露出Google希望通过Material Design展现出的惊艳,不过他们也需要对那些可能为Material Design带来特定影响作用的事物做些认真的研究:</p> <blockquote><p>我们退后一步,看了各种软件的设计风格,然后问自己,这些界面都是由哪些东西构成的?</p> </blockquote> <h4> 卡片纸带给设计的影响</h4> <p>Google仍然希望将现实当中的物体融入到数字世界当中。如果你还记得,苹果曾经因为对拟物化风格的热衷而&ldquo;臭名昭著&rdquo;,而在Google的眼中,拟物化仍然是正确的路线,只不过它能被打造的更好些。Material Design当中没有花里胡哨的纹理图案,整个UI干净而简洁,与传统的拟物化风格相比反差巨大。那么卡片纸又是怎么回事?</p> <p><img alt="02-material-design-ux-ui.png" src="/sites/default/files/images/201407-1/02-material-design-ux-ui.png" style="width: 600px; height: 338px;" /></p> <p>卡片纸是Material Design的重要组成部分。Google的设计师们希望让数字化界面看上去尽量贴近现实物体的样式,例如将UI元素按层堆放,就像我们摆弄卡片纸那样。当然,界面层叠绝不是什么新的概念,只是Google又向前走了一步,通过阴影效果将界面打造的像是真正的卡片那样。现实世界是Google的设计师们希望在UI风格当中得以保存的。</p> <p><img alt="03-material-design-ux-ui.png" src="/sites/default/files/images/201407-1/03-material-design-ux-ui.png" style="width: 600px; height: 380px;" /></p> <h4> 研究真实的纸张</h4> <p>Google将&ldquo;纸&rdquo;作为Material Design的基础。负责Android设计的Matias Duarte向Fast Company解释,Material Design力图改进界面元素的形式,使它们能够根据设备屏幕的规格来响应式的调整其形状及层次。为了在数字世界中最大化的体现现实物体带来的体验,Google的设计师们对真实的纸张进行了充分的研究。他们用纸制作各种图标,每个图标都包含不同的层次,通过这种方式,他们能观察真实当中的阴影效果是怎样的。虽然真实的纸张无法像UI元素那样进行形变调整,但对于研究的辅助作用还是很明显的。</p> <p><img alt="04-material-design-ux-ui.jpg" src="/sites/default/files/images/201407-1/04-material-design-ux-ui.jpg" style="width: 600px; height: 290px;" /></p> <h4> 瞄准&ldquo;数字化物理&rdquo;</h4> <p>Material Design的设计原则之一就是在数字领域中创造出一种人造物理效应,即视觉表现和人际互动过程中的某种感知和关联。将数字世界中的对象与现实世界物体关联起来,这仍然很重要,原因很简单,&ldquo;符合直觉的设计&rdquo;并没那么容易实现,无论应用还是网站,生来都不是&ldquo;符合直觉&rdquo;的,设计师们仍然要依赖于某种已有的约定使界面更加易懂易用。而Material Design在UI方面的重要目标就是将界面元素与现实物体进行关联,使其更&ldquo;符合直觉&rdquo;,让用户觉得在认知和使用上更加轻松。微妙的动效、投影效果和颜色的搭配都是围绕着这一原则进行使用的,它们同时也能使Material Design充满更多的乐趣。</p> <h3> Material Design的点在哪里?</h3> <p>总而言之,Material Design就是Google用来统一不同产品和技术的设计手段,用来确保信息在不同设备之间无缝流通。想想如今在不同移动设备上完成常见任务的局面,单是邮件可能就会用到多种应用,它们有些还不能跨平台;其他方面譬如文件共享、拍照甚至短消息等方面也是如此。</p> <p><img alt="05-material-design-ux-ui.png" src="/sites/default/files/images/201407-1/05-material-design-ux-ui.png" style="width: 600px; height: 334px;" /></p> <p>如果信息可以在你的手机、平板、手表和电视上无缝的衔接,你的生活将变得轻松很多。作为用户,你根本不必担心消息或是文件有没有在不同设备间保持同步;此外你在闲暇时间也不会被工作邮件骚扰,反过来也是一样,前一晚派对朋友发来的照片也不会在工作时间打扰到你。</p> <p>Material Design远不止靓丽的UI(无论最终发布的版本有多靓丽),它的核心在于Google开始着眼于多设备时代的整体体验生态圈。</p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/167" typeof="skos:Concept" property="rdfs:label skos:prefLabel">跨平台</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/168" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Material Design</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/20" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 20 Jul 2014 05:34:23 +0000 C7210 521 at http://beforweb.c7210.info http://beforweb.c7210.info/node/521#comments