Be For Web - 扁平化 http://www.beforweb.com/taxonomy/term/129 en ⌈随笔⌋ 风格策略取决于产品语境 http://www.beforweb.com/node/1040 <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://www.beforweb.com/sites/default/files/article-thumbs/icon-s-ux-sketching-pencil-wireframe-prototype-user-experience-ll.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>说起来也是难以在身边再组什么新团了;承载着故事与情感的时光是和这些老朋友一起度过的,其中的快乐和寄托远超过练团这件事本身。况且我还是这些人当中最年轻的,这么好的事现在上哪找去?</p> <p>不过排练当中偶尔会开小差,盯着音箱与效果器,琢磨些有的没的。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201905/IMG_5536.jpg" style="width: 450px; height: 600px;" /></p> <p class="figure-caption">吉他音箱(功放)与效果器</p> <p>这些串联在一起的设备,抽象描述起来,就是通过一系列参数设置,将弹奏者输入的吉他讯号进行修饰和放大,形成最终的输出。</p> <p>盯着它们的时候我在想,这些漂亮的面板、模块、金属拉丝旋钮和脚踏开关,如果用二维用户界面(UI)来呈现,应该是怎样的形态呢?</p> <h3> 抽象到本质</h3> <p>年复一年,我们越发习惯于更为&ldquo;数字化&rdquo;的设计思路,即相信用户已经被拟物化的视觉与交互风格教育多年,对于数字设备特别是触屏设备的使用方式已经轻车熟路,因此可以逐渐抛弃那些必须依赖厚重的视觉效果及实体化的交互方式才能呈现出的现实隐喻设计,以更为轻快,更为数字化、抽象化的交互逻辑及视觉样式进行取代,从而最大程度地突出信息与逻辑本身,而非装饰性的视觉元素。</p> <p>自然而然,我也会设想以我们最为熟悉的界面控件来实现上述设备的界面化呈现。以我的 DS-2 失真效果器为例,实体如下图:</p> <p><img alt="" src="/sites/default/files/images/201905/boss-ds2_1.jpg" style="width: 450px; height: 450px;border:none;" /></p> <p>通过以下控件组合足以体现其功能逻辑(我使用了自制自售的 WireframeKit 组件库):</p> <p><img alt="" src="/sites/default/files/images/201905/UI-A.png" style="width: 375px; height: 812px;" /></p> <p>一个开关,三个滑块,一组列表单元用于单选。抽象到本质,无非如此,三种原生控件即可搞定,不存在任何认知与使用障碍,用户对于这些控件的操作方式早已形成直觉。</p> <p>然而如此形态的模拟软件,即使再经过一轮视觉打磨,也不会让我有一丝一毫想要去用的欲望,满眼只有违和、蹩脚和不确定,无论功能逻辑有多准确,交互成本有多低廉。</p> <h3> 隐喻还是抽象,取决于产品语境</h3> <p>这里的&ldquo;隐喻&rdquo;同时涵盖模拟现实对象的交互形式与外观样式,而非单一的拟物化视觉风格。</p> <p>为什么同样是以系统控件构成的参数设置类界面,当产品语境是我们日常使用的绝大多数 app 时,却不会带来任何违和的感知呢?</p> <p>在那些常规的&ldquo;数字化产品&rdquo;当中,参数设置与主要功能/内容更像是彼此独立的。无论产品本身是工具类、社交类、娱乐类,即便其主要功能/内容与现实有着高度的关联,其参数设置仍然从属于&ldquo;数字化&rdquo;的那一部分,用来帮助用户对数字化功能的逻辑或样式进行控制。</p> <p>而以前文为例的设备模拟类产品,那一系列设置项原本就是被模拟的现实对象当中的一部分;譬如音量、增益、均衡、混响等等,这些设置就是核心功能与内容,就是我们要模拟的对象本身。在这类产品中,过于抽象化、数字化的交互逻辑与外观样式,势必会给习惯了现实对象的目标用户带来强烈的认知冲突。</p> <p>即,一名吉他手在使用日常 app 的设置功能时,不会对数字化风格的表现形式与操作方法产生质疑;但在使用设备模拟类 app 时,所期待的则是更贴近于他所熟悉的实体设备的外观及使用方法。</p> <p>回头看看如今的 iOS 人机界面设计规范,相比于6年前,也不再片面抵制隐喻设计,而是强调针对不同的产品类型采取不同设计风格的策略,鼓励设计师将用户在现实中最为熟悉的视觉样式及操作方法映射于界面设计当中。</p> <p><img alt="" src="/sites/default/files/images/201905/0.jpeg" style="width: 600px; height: 365px;border:none;" /></p> <h3> 并非脑洞</h3> <p>然而这些有的没的也并非脑洞,市面上真正存在着一大票吉他设备模拟类产品。仍以失真效果器为例,我们来看老牌产品 Amplitube 是如何实现的:</p> <p><img alt="" src="/sites/default/files/images/201905/0-1.jpeg" style="width: 375px; height: 812px;" /></p> <p>若是第三方产品仍然缺乏说服力,那么再来看苹果官方的 Garageband(库乐队):</p> <p><img alt="" src="/sites/default/files/images/201905/0-2.jpeg" style="width: 600px; height: 277px;" /></p> <p>很庆幸他们依然会如此设计这类产品。接上吉他,在屏幕上摆弄着这些漂亮的小模块,捣鼓着各种声音,会感觉自己像是回到了二十几岁那样,开心极了。</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 450px; height: 116px;border:none;" /></p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/130" typeof="skos:Concept" property="rdfs:label skos:prefLabel">拟物化</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/80" typeof="skos:Concept" property="rdfs:label skos:prefLabel">隐喻</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/170" typeof="skos:Concept" property="rdfs:label skos:prefLabel">音乐</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/253" typeof="skos:Concept" property="rdfs:label skos:prefLabel">随笔</a></li></ul> Tue, 14 May 2019 11:22:01 +0000 C7210 1040 at http://www.beforweb.com http://www.beforweb.com/node/1040#comments 要扁平化,也要可用性 http://www.beforweb.com/node/379 <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://www.beforweb.com/sites/default/files/article-thumbs/icon-s-logo-flat-minimum-design-ui-ux-user-interface-web-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>现在是周五晚间。莫名其妙的又到周末了,好像刚刚上了两天班的样子。</p> <p>正在看阿拉蕾,哇啦哇啦的可开心了;话说高中的时候电视台还在放,若是放学能早回家,第一件事就是打开电视看。一直以来都很想成为企鹅村的居民,每一天都傻乎乎的过着开心的日子,周围是各种有趣的人,还有会说话的小动物。</p> <p>然后回来说正事。这周末要上新两篇,都不是很长,轻轻松松读一读的那种。那么,正文之前先祝各位周末愉快吧。</p> <p>这里进入译文。扁平化风格不意味着设计工作本身可以得到简化,更不意味着界面可用性的衡量标准可以被降低。本文将与各位分享一些tips,希望可以帮助你在打造扁平化设计方案的同时提升界面的可用性。</p> <!--break--><h3> 定义信息架构</h3> <p>扁平化风格最让我欣赏的一点就是对内容的突出。曾几何时,我们过分聚焦在界面元素的拟真风格上,内容反而成为次要。在扁平化风格的界面中,那些零七八碎的会牵扯用户注意力的元素被去除,这很好,但你必须当心,不要使其成为破坏信息结构的双刃剑。</p> <p>要确保扁平界面的可用性,你首先要梳理清楚内容的层级结构,尤其是在网站的前期规划及线框稿阶段。抛开界面元素风格不谈,你的内容本身是否有着易于视线扫描的结构?用户可以找到最重要的交互对象吗?无论视觉风格是扁平还是拟物,坚实的信息架构都是最重要的基础。</p> <blockquote><p>&ldquo;内容应当先于设计。缺乏内容的设计算不上设计,最多算装饰。&rdquo; - Jeffrey Zeldman</p> </blockquote> <p>相关阅读:<a href="http://www.beforweb.com/node/374">易用性与转化率的提升 - 打造良好UI的32条建议</a></p> <h3> 强化交互元素</h3> <p>说到扁平化界面的可用性,一个比较关键的设计挑战就是怎样让可交互元素看上去是&ldquo;可交互&rdquo;的。扁平风格意味着视觉表现形式上通常只有两个维度可以使用,以往用来构建&ldquo;可点击&rdquo;效果的渐变与阴影成为了历史。</p> <p>扁平风格并不意味着简单粗暴的将原先的拟真元素拍平然后丢到界面当中。扁平化与拟物化各自擅长解决的问题是不同的,如果你决定使用扁平风格打造产品界面,那么必须以新的思路来解决设计上的问题。</p> <p>试着通过提升对比度来增强交互元素的表现力。这里所说的对比度包括配色、字号、位置布局等方面的要素。另外,要为交互元素提供必要的视觉线索及反馈效果,帮助用户建立认知,例如当鼠标悬停在元素上,或是用户点击、触摸这些元素的时候,其视觉形式需要有所变化,以体现出元素的交互特性以及用户行为所产生的结果。</p> <p><img alt="01-exposure-hover-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/01-exposure-hover-flat-design-usability-ui-ux-user-experience.jpg" style="height: 347px; width: 600px;" /></p> <p class="figure-caption"><a href="https://exposure.so/">Exposure</a>只用了很细的线框来界定首页上两个最重要的Call to Action,但在鼠标悬停时提供了足够强大的对比反馈来提示元素的可交互性。</p> <p><img alt="02-focuslabs-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/02-focuslabs-flat-design-usability-ui-ux-user-experience.jpg" style="height: 469px; width: 600px;" /></p> <p class="figure-caption"><a href="http://focuslabllc.com">Focus Labs</a>通过配色和元素布局关系来提升交互元素的对比度;鼠标悬停时还会有CSS动效来增强视觉反馈。</p> <p><img alt="03-th-calltoactions-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/03-th-calltoactions-flat-design-usability-ui-ux-user-experience.jpg" style="height: 469px; width: 600px;" /></p> <p class="figure-caption"><a href="http://teamtreehouse.com">Treehouse</a>使用明亮、饱满的颜色来定义界面元素的交互特性,使它们与普通的内容构成了鲜明的对比。</p> <h3> 人性化</h3> <p>由于那些非内容性的、模仿现实物体的元素被剥离,所以扁平化界面时常会让人感觉冰冷而无趣,缺乏亲切感及品牌个性。虽然这不会直接降低界面的可用性,但对于产品的整体体验来说依然有着重要影响作用。</p> <p>要让扁平化界面带来更加积极的体验,你需要在设计中与用户建立起情感和人性上的关联(相关阅读:<a href="http://www.beforweb.com/node/103">为产品赋予人格 - 情感化设计的组成要素及实践案例</a>)。试着使用更多的图片作为&ldquo;有机&rdquo;内容,来抵消掉扁平化元素的&ldquo;数字感&rdquo;。图片&mdash;&mdash;无论是图标、插画还是照片,都可以在扁平化环境中创造出更具&ldquo;人性&rdquo;和&ldquo;深度&rdquo;的氛围。</p> <p><img alt="04-mailchimp-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/04-mailchimp-flat-design-usability-ui-ux-user-experience.jpg" style="height: 469px; width: 600px;" /></p> <p class="figure-caption"><a href="http://mailchimp.com/">Mailchimp</a>在扁平化的整体风格当中通过图标、插画和真实照片来创造深度,塑造产品个性。</p> <p><img alt="05-squarespace-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/05-squarespace-flat-design-usability-ui-ux-user-experience.jpg" style="height: 469px; width: 600px;" /></p> <p class="figure-caption"><a href="http://www.squarespace.com/stories">Squarespace</a>通过代入感极强的大幅照片作为扁平风格界面元素的环境背景,与目标用户建立起明确的关联。</p> <p><img alt="06-ohbaby-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/06-ohbaby-flat-design-usability-ui-ux-user-experience.jpg" style="height: 469px; width: 600px;" /></p> <p class="figure-caption"><a href="http://www.obabyapp.com">ohbaby</a>将模糊化的照片作为背景,在扁平环境中有效的创建出了纵深。</p> <p><img alt="07-th-human-flat-design-usability-ui-ux-user-experience.jpg" src="/sites/default/files/images/201401-1/07-th-human-flat-design-usability-ui-ux-user-experience.jpg" style="height: 469px; width: 600px;" /></p> <p class="figure-caption"><a href="http://teamtreehouse.com">Treehouse</a>通过大幅真实照片为界面构造深度,并定义品牌的气质与性格。</p> <h3> 小结</h3> <p>如果你决定使用扁平风格打造下一个产品,那么一定要特别留意设计当中那些会对体验产生影响的方方面面。扁平化风格绝不仅是从现有界面中抽掉一个维度那么简单,面对它所带来的一些可用性方面的问题,你可以试着从本文当中介绍的几个方面入手加以解决,包括构造良好的信息架构、强化交互元素的视觉特性、为界面增加人性化元素等<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-303" class="node node-related-books" about="/node/303" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="怦然心动:情感化交互设计指南" src="http://beforweb.com/sites/default/files/images/products/49.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">怦然心动:情感化交互设计指南</a></h4> <p><a href="http://www.amazon.cn/怦然心动-情感化交互设计指南-安德森/dp/B007HWLYSQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书精彩地阐述出了当人们访问网站,打开软件,购买实体产品和被某人吸引时的心理状态,并且非常深入地用心理学的方法解释了刺激和触发人类行为的因素。书中提供的众多方法,让我们可以创造出更加持久和深刻的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/130" 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> Fri, 03 Jan 2014 14:53:55 +0000 C7210 379 at http://www.beforweb.com http://www.beforweb.com/node/379#comments 扁平化设计与最小化设计不是一回事 http://www.beforweb.com/node/367 <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://www.beforweb.com/sites/default/files/article-thumbs/icon-s-logo-flat-minimum-design-ui-ux-user-interface-web-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>首先向给推推祝福、给我鼓励的各位朋友说一声谢谢了,我觉得很暖,推推也会感觉到的。</p> <p>还没到周末,临时插播一篇小文,要表达的东西都在标题里了,纠正了一些认知上的混淆,提出了一些小建议,大致是这样。茶余饭后可稍作阅读,可能有益消化吧,我不知道。看正文喽。</p> <p>这里进入译文。如今,到处都是&ldquo;扁平化设计&rdquo;了,但是似乎很多人将这个潮流与&ldquo;极简设计&rdquo;或是说&ldquo;最小化设计&rdquo;搞混淆了。其实这是两个完全不同的概念,根据具体项目不同,它们甚至还会彼此互斥。</p> <!--break--><h3> &ldquo;扁平化&rdquo;并非&ldquo;最小化&rdquo;</h3> <p>我们通常所说的&ldquo;扁平化设计&rdquo;属于视觉美学方面的概念。你可以将其理解为一种不会对信息的组织架构产生非必要影响作用的特定的视觉表现形式。你的网站或应用可能非常复杂,到处都是菜单、按钮、Call to Action,但它在视觉呈现方式上可以是扁平风格的。这种情况下,产品也就是看上去会比传统的数字化界面更简洁,更美观一些。</p> <p><img alt="01-flat-v-minimal_01.jpg" src="/sites/default/files/images/201312-1/01-flat-v-minimal_01.jpg" style="height: 263px; width: 600px;" /></p> <p>而&ldquo;最小化设计&rdquo;,则是一种设计哲学。以最小化方式设计出的网站或应用可以让用户很轻松的导航和使用,纵使它可能是由笨重、不优雅的视觉元素所构成。</p> <p>对于这两个概念的区别,我们可以拿食物打个比方。如果说扁平化设计是时尚餐厅中的流行新配料,那么最小化设计就是资深大厨手中的经典烹饪指南,每当他们有什么新菜肴想法时,都会拿来参考借鉴。</p> <div class="embed"><article id="node-298" class="node node-related-books" about="/node/298" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一目了然:Web和移动应用设计通识方法(第2版)" src="http://beforweb.com/sites/default/files/images/products/44.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一目了然:Web和移动应用设计通识方法(第2版)</a></h4> <p><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书深入阐述了如何设计出简单易用的基于Web的软件,以帮助读者理解、掌握显性设计的精髓。作者从软件开发初期谈起,一直到软件设计后期,分析诸多案例并论证了自己的见解或设计原则...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 最小化设计很重要吗?</h3> <p>看具体项目了。诚然,这个概念对于设计领域整体来说很重要,但具体到特定的产品项目时,还是需要你去考虑一些东西的。首先,你的网站或应用确实适合最小化设计吗?没人会指望亚马逊或eBay去做&ldquo;最小化&rdquo;,其他很多耳熟能详的大网站也是一样的道理。</p> <p>相关阅读:<a href="http://beforweb.com/node/85" target="_blank">最小化可用性设计(Minimum Usable Design)</a></p> <p><img alt="02-less-is-more-flat-v-minimal_02.jpg" src="/sites/default/files/images/201312-1/02-less-is-more-flat-v-minimal_02.jpg" style="height: 263px; width: 600px;" /></p> <p>其次,你要考虑最小化设计是否会破坏网站或应用目标用户的体验。对于多数项目来说,我个人始终是&ldquo;少即是多&rdquo;的拥护者,但不管你信不信,有种东西叫做&ldquo;过小&rdquo;。如果设计的最小化程度已经会对产品的可用性造成阻碍,那么有些设计元素必须被添加回去,以保证最基本的、最有意义的产品体验。</p> <p>推荐阅读:<a href="http://beforweb.com/node/325" target="_blank">设计师与“少即是多”</a></p> <div class="embed"><article id="node-297" class="node node-related-books" about="/node/297" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="简约至上:交互式设计四策略" src="http://beforweb.com/sites/default/files/images/products/43.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">简约至上:交互式设计四策略</a></h4> <p><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍交互式设计的技术与技巧,讲述如何从目标用户的需求和期望出发,结合人类本身的心理特征和行为特点,用最简单的方法创建易用、有效而且让用户愉悦的设计。书中阐释了合理删除、分层组织、适时隐藏和巧妙转移这四个令交互式设计成果最大程度简单易用的策略...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 扁平化设计只是潮流吗?</h3> <p>没人能告诉我们扁平化设计的现象只是一股风潮还是一种力量强大到可以常驻的设计运动。iPhone和iPad引发了移动设备领域的革命,这个效应很可能是永远的,它们的软硬件设计已经影响到数字产品设计的各个方面。</p> <p>某个潮流能否持久,很多时候要看那些响应该潮流的知名设计师是否知道自己在做什么。举个例子,如果你是个厨子,你也许会选择在自己的主打菜当中添加一种异国风味的配料,但同时,你一定不会忽视优秀厨艺当中其他那些最重要的原则和方法。如果一名设计师对设计基础原理有着较为深刻的理解,那么无论他们制造出怎样的流行风格,这些终将成为某种标准,而不只是潮流。</p> <p>相关阅读:<a href="http://beforweb.com/node/142" target="_blank">关于扁平化界面风格的设计美学讨论</a></p> <h3> 你应该加入扁平化的阵营吗?</h3> <p>很多公司都已经跳上扁平化的顺风船了,不难想象,很快就会出现一些反冲现象,这主要来自于那些不想让自己的作品看上去太雷同于他人的设计师。如果有一天你的老板或客户突然大声疾呼想要扁平化的设计方案,而你已经决心使用非扁平风格,那么状况会非常闹心,你必须在坚守自己设计理念与保住饭碗之间进行抉择。</p> <p>就是论事,如果老板或客户想要扁平,那么只基于一个风格提供一版UI稿未必是好主意。通常,你会发现自己很难与老板或客户沟通清楚,他们虽然明确自己想要干净、扁平的界面,但当稿子摆在他们眼前时,他们才知道自己的心仍然坚定的站在拟物化风格上。对于最终方案,建议你要么保持全部扁平风格,要么干脆不要扁平;不伦不类的混搭方案会对品牌识别造成负面影响。</p> <p><img alt="03-design-ux-ui-interface-flat-v-minimal_03.jpg" src="/sites/default/files/images/201312-1/03-design-ux-ui-interface-flat-v-minimal_03.jpg" style="height: 263px; width: 600px;" /></p> <p>建议你从用户体验的角度与老板或客户就这一点进行沟通,让他们知道混合风格会带来不良体验。当用户看到风格怪异、缺乏统一性的界面时,他们对产品的信任感及满意度会大打折扣。此外,混合风格也容易造成混淆,你很难让用户自主的将两种视觉风格和同一个品牌进行关联。</p> <div class="embed"><article id="node-302" class="node node-related-books" about="/node/302" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:抓住访客心理的网页设计" src="http://beforweb.com/sites/default/files/images/products/48.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:抓住访客心理的网页设计</a></h4> <p><a href="http://www.amazon.cn/众妙之门-抓住访客心理的网页设计-德-Smashing-Magazine/dp/B00CD6TTKG/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了主要的Web设计心理学知识和理论成果,结合实例介绍了目前主要的可用性指导原则,分享了设计师如何在初创型企业更好地体现自身价值,介绍了色彩理论,并结合实例介绍了具体的配色方案...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/124" typeof="skos:Concept" property="rdfs:label skos:prefLabel">最小化</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/49" 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> Thu, 05 Dec 2013 03:02:37 +0000 C7210 367 at http://www.beforweb.com http://www.beforweb.com/node/367#comments 别再说iOS7是扁平化设计了,好吗? http://www.beforweb.com/node/320 <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://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-ios-7-human-interface-design-guideline-document-ui-ux-apple.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>好短暂的周末,在一天当中压缩了很多事情。学车、照料喵、做博客、看书,还睡了个很久没那么舒服了的午觉。眼下已经快到晚上11点,发好这篇早点躺倒了。</p> <p>仍然有很多朋友在关注关心着小喵推推的健康情况,我在这里再次向各位表示真心的谢意了;目前情况仍算稳定,看上去每天6、7个小时的照料还是有些正面反馈的;明天带去医院复查一下。想到上周有天下午实在困的不行,在桌前趴了会,很快就开始做梦了,梦到自己中午回到家里照顾推推,累了便睡会,突然想到下午要上班,要赶紧回公司;然后便惊醒了,发现自己就在公司;各种穿越和失真的感觉。</p> <p>说正经的,来看本周更新吧。又是议论文一篇,简短而明了;正好前几天和老同事聊到这方面的事情,很共鸣,拿来分享给大家。</p> <p>这里进入译文。苹果发布iOS7之后,我们听到最多的流行用语就是&ldquo;扁平化设计&rdquo;了。显然有不少人认定,iOS7特定的视觉美学使其看上去比iOS6要更平,因此,人们也应该以这种方式来设计应用。</p> <p>问题在于,iOS7从本质上讲并不扁平。实际上,它是非常细腻且具有层次的;那些使用&rdquo;扁平化&ldquo;一词来描述iOS7的人,他们无非是在重复那些从一开始就这样误解iOS7的科技名人的话。道理何在?我们一起来看看。</p> <!--break--><h3> 不必要的标签</h3> <p>这一切开始于拟物化的概念被乔布斯时代的苹果发扬光大。我(英文原文作者)回忆不起这个词是从什么时候开始变得如此流行的,只是记得这个概念从OS X Lion以及iPad开始变得越来越像回事。对于iPad来说,这个概念意味着把应用的外观和感觉设计的像现实当中的物体一样。因此,备忘录应用看上去就像真实的记事本,日历应用看着就像真实的日历,等等。媒体将此称为&ldquo;拟物化&rdquo;,然后这个说法就被人们一年一年的重复着;即使我自己也这样说过很多次。</p> <p>这种设计习俗逐渐开始招来一些反对的声音。例如OX X Lion当中,日历应用顶部的纸张撕扯效果(在Moutain Lion当中也是如此)显得相当怪异;而iOS的Game Center那绿绿的整体感觉就像苹果并不真正了解人们是怎样进行游戏的一样。这些都很差劲。</p> <p>因此,人们开始寻找一些替代品。Windows带来了Metro UI,那些科技媒体们看上去相当喜欢它,虽然他们当中没有多少人能够宣称自己真正拥有这样一台设备。几乎所有人都喜欢安卓的UI,不过这也仅仅取决于设备上运行的究竟是哪个版本的系统,以及各厂商预装了哪些臃肿的应用。</p> <h3> 解决方案及问题所在</h3> <p>解决方案便是iOS7,这个自从iOS问世以来最最彻底的重新构思版本。看过第一眼之后,人们彻底惊讶于它所表现出来的&ldquo;扁平化&rdquo;程度。突然间,流行语产生了变化&mdash;&mdash;现在的iOS7变成了&ldquo;扁平化UI&rdquo;,多极端的分化&mdash;&mdash;几乎所有人都开始这样讲了;看上去就没人能够真正把情况搞清楚,无论是谁。</p> <p><img alt="01-ios7-not-flat-design-ui-accessibility.jpg" src="/sites/default/files/images/201310-2/01-ios7-not-flat-design-ui-accessibility.jpg" /></p> <p class="figure-caption">如果iOS7是扁平的,那么你是不会看到毛玻璃底下的层面的。</p> <p>我个人并不是设计师,也不是UI专家。但事实就是,iOS7并不扁平,丝毫不是。要弄清楚这一点其实很简单,只需拿起装有iOS7的iPhone进行使用,你立刻就会明白。</p> <h3> 微妙的细节</h3> <p>观察任何一款iOS7应用,从内置的联系人到Facebook,你会发现它们的精粹在于不同层面的内容以及这些层面之间的互动。举个例子,如果你打开了视察效果,那么就会在前后倾斜iPhone或iPad的时候看到界面中不同层面之间的移动效果。当你在Facebook的feed界面中滚屏时,可以看到一篇内容当中的文字会进入另一篇的底部。而Siri、控制中心和通知中心则位于毛玻璃效果的层面上,其底部的内容可以透过毛玻璃模糊的呈现出来。即使在锁屏界面上,如果你足够注意,也会发现视差效果带来的层面效应。</p> <p>但关于&ldquo;扁平化&rdquo;的争议可能会产生于图标的设计上。系统内置的&ldquo;设置&rdquo;就是个很好的例子。你可以在iOS6及之前版本的&ldquo;设置&rdquo;当中看到带有质感和高光效果的图标,而在iOS7当中,图标的外观完全没有了深度。看来,这就是大家所指的扁平化设计了,恩?</p> <p><img alt="02-ios7-not-flat-design-ui-overview_features.jpg" src="/sites/default/files/images/201310-2/02-ios7-not-flat-design-ui-overview_features.jpg" /></p> <p>再次强调,&ldquo;扁平化&rdquo;可能是苹果在这些地方所采用的设计方式,但这并没有成为其他应用的设计准则。MLB At Bat仍然在背景中使用了渐变效果,而iOS7内置的音乐应用也是如此。Safari本身呈现出扁平的效果,但它的应用图标仍然具有深度。这些非扁平的效果虽然都很细微,但却是实实在在的。</p> <p>所以,人们之所以用&ldquo;扁平化&rdquo;一词来描述iOS7,更多的只是基于一些原生图标的设计样式而产生的宽泛概论。鉴于整个新系统当中有太多微妙的变化,&ldquo;扁平化&rdquo;一词完全无法精确的概括iOS7的UI。再次强调,iOS7是具有丰富层次的,它并不扁平。</p> <h3> 值得注意</h3> <p>这里还有另一个因素。虽然iOS7在如今是这样的,但事情总是在变化的。第三方应用的设计师们会逐渐将它们的产品设计的越来越像苹果官方的风格,另外他们还会在iOS7风格的普遍适用性方面进行更多的尝试。在iOS7之前,人们花了很长时间来学习系统当中的设计特性与原则;如今,iOS7已经正式发布,人们同样需要时间来继续探索。</p> <p>总结下来,这一切就是关于极端的版本更迭。在iOS7之前,拟物化设计风格曾经疯狂生长,几乎所有的图标、界面和布局都倾向于呈现出真实物体的外观样式。如今我们有了iOS7,它强烈的倾向于另一个极端,这使它更容易给人们带来一种扁平的感受。与iOS6及之前的版本比较起来,它确实很扁平;至于将其称为&ldquo;扁平化设计&rdquo;?还是算了吧,事情不是那样的<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </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/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/130" typeof="skos:Concept" property="rdfs:label skos:prefLabel">拟物化</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/145" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Redesign</a></li></ul> Sun, 13 Oct 2013 14:36:05 +0000 C7210 320 at http://www.beforweb.com http://www.beforweb.com/node/320#comments iOS7体验报告 - 关于视觉风格、界面结构、字体、动效和可用性 http://www.beforweb.com/node/232 <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://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-ios-7-human-interface-design-guideline-document-ui-ux-apple.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>最近似乎在<a href="http://weibo.com/c7210">微博</a>上念叨过多次,我开始爱上iOS7了,爱上它的各种细节,当然不包括那些过分艳丽、缺乏坚决的内置应用图标。今天这篇文章的性质,印象里在Beforweb这边还真没有先例;从前所有文章都是关于怎样做某些事情,而这篇纯粹是作者的体验报告。个人感觉还算中肯,我能在里面找到一些共鸣;不知其他朋友会有怎样的体会。正文走起吧。</p> <p>这里进入译文。新版本的iOS进行了彻底的重设计。相比于过去栩栩如生的拟物化界面风格,它走向了另一个极端&mdash;&mdash;光洁的令人震惊。一向以精益求精著称的苹果,这次似乎无法履行自己的诺言了。乍看上去,应用图标有些令人难过,用户界面缺乏结构,所有东西都给人一种未经打磨的感觉。</p> <p>实际上,iOS7并不那么差劲,远远不是。</p> <!--break--><p><img alt="01-iphone5-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/01-iphone5-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>作为设计师,我们必须记得自己是在为用户而设计。我们要有同理心(相关阅读:<a href="http://beforweb.com/node/181" target="_blank">八个小方法,帮你成为更具同理心的设计师</a>),要能驾驭更加现代化的设计风格。这在如今就意味着我们要把那些来之不易的、精心打造的视觉风格拍扁;这似乎有些戏剧性。我们当中的多数都是<a href="http://skeu.it">复杂化和拟物化</a>的受害者,而现在,到了考验我们适应能力的时候了。</p> <p>关于iOS7,到目前为止,我在WWDC、<a href="http://www.macrumors.com/2013/06/10/apple-announces-ios-7-with-major-design-overhaul/">MacRumors</a>、<a href="https://news.ycombinator.com/item?id=5856398">Hacker News</a>和<a href="http://daringfireball.net/2013/06/ios_7_signature">John Gruber的文章</a>当中所看到的,都是压倒性的正面反馈。没错,设计师们是会泪奔的,可是谁能责怪他们呢?他们毕竟都曾接受过同一个公司的教育,而如今,这个公司又要重新教育他们了。现在的苹果是一块空白的石板,拿着凿子与斧头的是同时掌管软、硬件设计的Jonathan Ive长官。</p> <h3> 视觉设计</h3> <p>它非常平,比我当初所能预想的还要平很多。对于那些习惯了iOS界面设计规范和OS X的设计师们来说,新风格是令人震惊的;这种震惊甚至会让你怀疑自己是否还属于最酷的一代。这不太像苹果过去的风格,现在它似乎正在跟随Google、微软甚至是雅虎的步伐。无论是日历、邮件还是天气应用,你都能看到这些公司相关产品的影子。</p> <p><img alt="02-weather-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/02-weather-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>不过,这种变化注定是要发生的。扁平化设计风格强烈的依赖于文字排版与配色,而不是通过渐变、阴影或纹理质感使内容得到突出。要更好的理解这一点,你需要把眼界放宽些,思考一下Google、雅虎、微软等公司是怎样走上这个方向的。是的,你会发现最根本的原因还是在于苹果。iPhone风格的UI模式以及Helvatica Neue Light这样的优秀字体都是苹果在现代移动设计的时代之初所宣扬的实践方式。所以,与其花时间去琢磨苹果是不是在copy其他平台的风格,还不如回头看一看历史&mdash;&mdash;正是各个平台间的互相影响共同造就了真正意义上的现代移动设计风格;这种风格所面向的,是在科技方面受过良好教育的一代用户,他们并不那么熟悉拟物化风格所模仿的现实对象,例如盘式磁带、皮革封面的行事历或是扑克牌桌。</p> <p><img alt="03-skeumorphism-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/03-skeumorphism-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>iOS7的视觉呈现方式是有深度的,而非漫无目的的。实际上,它在很多方面都做的很正确。1像素的线条、细字体、白色的整体UI,现代感十足。与安卓的暗色/灰色UI或微软的黑白UI不同,苹果明确而优雅的使用着白色,感觉非常干净,且具有禅意。</p> <p><img alt="04-white-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/04-white-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <h3> 视觉结构和缺乏一致性的地方</h3> <p>在iOS7当中,有时你会觉得很难分辨界面头部与内容之间的分隔,因为它们使用的背景色几乎相同,一个略灰一些,一个更白。按钮看上去不再像是按钮了,它们现在只是一段蓝色的文字。但同时,你又会在切换控件上看到强烈的阴影效果;更奇怪的是,在提醒事项应用中,你仍然可以看到纸质纹理的样式,另外iBooks也依然在使用木质外观。</p> <p>另外Spotlight功能确实不容易被发现。从前是在首屏向右滑动进入Spotlight搜索模式,而现在是在首屏向下扫。另外当你在搜索框中输入了一些文字之后,也不大容易发现怎样退出Spotlight界面。</p> <p><img alt="05-structure-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/05-structure-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>另外某些配色在半透明的控件上表现的并不理想,甚至缺乏必要的对比度。确实不大像苹果的作风。</p> <p><img alt="06-color-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/06-color-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <div class="embed"><article id="node-316" class="node node-related-books" about="/node/316" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/Photoshop智能手机APP界面设计-狸雅人/dp/B00ANRUI5W/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="Photoshop智能手机APP界面设计" src="http://beforweb.com/sites/default/files/images/products/61.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/Photoshop智能手机APP界面设计-狸雅人/dp/B00ANRUI5W/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">Photoshop智能手机APP界面设计</a></h4> <p><a href="http://www.amazon.cn/Photoshop智能手机APP界面设计-狸雅人/dp/B00ANRUI5W/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书第1章介绍了APP用户界面基础,包括什么是UI设计、手机UI与平面UI的区别和UI设计工具等基本概念和思路;第2章介绍用Photoshop制作各种智能手机UI常用元素,第3章则是3大类型UI设计的实战练习;附录还推荐了不少有用的UI设计网络资源和辅助工具...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 半透明界面</h3> <p>iOS7当中的模糊背景效果是我所见过的运用的最棒的,在任何内容背景下都表现不错,不会影响可读性和趣味性。其实如果预先设置几种固定的背景色的话,这种效果还是很普通的,但是在iOS7当中,所有的模糊背景效果都是基于实际界面内容生成的,而且是动态的可互动的。我确实琢磨过他们使用的是怎样的混合模式,Screen还是Overlay?</p> <p><img alt="09-Translucent-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/09-Translucent-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>在短信应用中,你可以透过键盘看到下面模糊化的对话气泡;控制中心的背景是一层白色毛玻璃一样的面板,而通知中心则是暗灰色的,非常有现代感,整体效果看上去甚至有些像信用卡上的激光防伪标签。从某种程度上讲,这可以说是摒弃了多余的纹理和质感效果的、更具现代感的、以内容为中心的拟物化。</p> <h3> 字体</h3> <p>纤细的字体表现还算良好。这种风格来自于杂志,通常字号会较大,所以可读性不错。由于iOS7当中的按钮基本都是以文字的形式出现的,所以字号也略大。平心而论,这些文字形式的按钮还是具有很强的自解释性的;相比之下,倒是Windows 8当中的文字按钮由于空间占用方面的问题而显得有些夸大其词。</p> <p><img alt="07-wallpaper-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/07-wallpaper-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>在可访问性方面,iOS7为大号字体提供了更好的支持。有意思的是,当你和&ldquo;老一代&rdquo;iOS用户谈起这方面的问题时,你会发现他们所提出的主要问题之一,就是怎样增大字号。所以iOS7的这点变化应该会受到欢迎。在WWDC上,苹果同时还宣布了一些在这方面令人兴奋的功能,例如自动布局(Auto Layouts)等等。</p> <p><img alt="08-accessibility-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/08-accessibility-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <h3> 动画效果</h3> <p>动画效果是我最新欢的部分,特别是当你点击应用图标后,应用界面直接从图标处放大呈现出来的过程&mdash;&mdash;非常符合直觉,因为你的视线可以很自然的跟随这样的运动。另外控制中心和通知中心的展开过程也很自然,不会突兀地让你失去上下文环境感。当通知中心完全展开后,你甚至能看到仿真的碰撞和弹跳效果。</p> <p><img alt="10-Notifications-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/10-Notifications-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>从锁屏状态进入系统界面时的动效也很吸引人,你会看到应用图标一排排的&ldquo;落&rdquo;到它们应该在的位置上。设备的倾斜还会使系统界面产生视差效果,从技术角度讲,就是背景图片朝着设备水平位置较高的一个侧面进行简单的移动。这不是个足以改变业界游戏规则的重大视觉效果,但可以取悦用户。</p> <p><img alt="11-home-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/11-home-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>在短信应用中,随着内容的滚动,你也可以看到视差效果,感觉非常自然,而且很有意思。</p> <p><img alt="12-message-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/12-message-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>层级化的界面在前后切换时的动画,也由从前简单的&ldquo;推进&rdquo;效果进化成为精巧的页面覆盖叠加的效果,感觉更加光滑顺畅。</p> <p><img alt="13-BackButton-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/13-BackButton-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <h3> 解决问题</h3> <p>在WWDC,我和6000名开发者坐在同一间屋里看着Keynote演示,兴奋点此起彼伏,有个家伙甚至喊出了&ldquo;我爱你&rdquo;。因为从根本上来说,iOS7非常漂亮的解决了很多问题。</p> <p>你可以在整个锁屏界面上执行滑动解锁,感觉比以前容易多了。</p> <p><img alt="14-lock-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/14-lock-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>从底部滑出的控制中心可以让人们快速访问亮度、Wi-Fi、蓝牙等控制功能,甚至还包括拍照、计算器和新的手电筒功能。这不是什么随随便便的花招,所有这些功能都是用户最常用的。</p> <p><img alt="15-control-center-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/15-control-center-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>如今的文件夹可以收纳不限量的应用,在内部左右滑动就可以浏览全部。</p> <p><img alt="16-folder-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/16-folder-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>App Store在搜索方面进行了比较大的改动,并且增加了一个非常漂亮的下载动画。另外,在iOS7当中,应用可以在后台自动更新了。</p> <p><img alt="17-app-store-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/17-app-store-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>在iOS7当中,从屏幕左边缘向右轻扫便可以回到前一个界面,很有效地解决了返回按钮与单手操作可用性的问题。(相关阅读:<a href="http://beforweb.com/node/213">谈导航栏返回按钮的替代方案</a>)</p> <p><img alt="18-safari-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/18-safari-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>还有用起来感觉很赞的多任务控制功能。</p> <p><img alt="19-multi-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/19-multi-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>新的Safari在导航栏的隐藏和最小化方式上很像Pinterest的做法。另外,新的标签页的设计很聪明,在数量上也不再受限制。</p> <p><img alt="20-safari-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/20-safari-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>新的相机应用内置了滤镜功能,照片可以按照时间和地点整洁的组织起来<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="21-camera-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" src="/sites/default/files/images/201307-3/21-camera-ios7-redesign-flat-transition-ui-ux-user-interface-iphone.png" /></p> <p>像这样的解决方案列表还可以继续下去。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 小结</h3> <p>这就是我,一名WWDC的出席者以及花了一整天时间测试iOS7 Beta版的用户所得出的体验报告。我真心觉得你会越发爱上iOS7,但同时,我也认为苹果真的应该换掉那些丑陋的应用图标。</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="/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/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/130" typeof="skos:Concept" property="rdfs:label skos:prefLabel">拟物化</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/106" typeof="skos:Concept" property="rdfs:label skos:prefLabel">动画效果</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 28 Jul 2013 05:30:23 +0000 C7210 232 at http://www.beforweb.com http://www.beforweb.com/node/232#comments 关于扁平化界面风格的设计美学讨论 http://www.beforweb.com/node/142 <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://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-flat-interface-design-metro-style-Skeumorphism-ui.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>我个人对这方面的话题是蛮关注的,偶尔在<a href="http://weibo.com/c7210">微博</a>上弱弱的念叨两句,也会有不少朋友来发表各自的看法,确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的,其中有些比较公允务实,有些则比较偏颇;所谓偏颇,也就是片面表达某种风格一定比某种风格更好,以及好在哪里。说真的,都有一定的道理,都能看出发表论调的设计师的思考和激情。</p> <p>有人说了你怎么这么没节操呢,你到底觉得哪种好呢?我要说的是叭,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题;脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立。</p> <p>说的具体些,远的不讲,单说<a class="eLink" href="http://beforweb.com">Beforweb</a>这边的视觉风格,除了每篇文章的图标以外,可以说是彻彻底底的扁平化了(当然,细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框,这个不算数...),但如果有人说我是扁平风格的卫道者的话,我会很不开心,因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面,最典型的包括语音备忘录、iBooks、iPad里的日历等等,它们的界面让我觉得亲切自然,让我可以在冰冷的电子设备当中找到现实生活的真实感,就这么简单。</p> <!--break--><p>下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒,我着实在这些东西上花掉不少钱,但如果它们的界面没有采用如此逼真的拟物化设计,如果他们只是干巴巴的功能和数据陈列或是Metro风,我是绝不会在它们身上花半毛钱的。</p> <p><img alt="a-amplitube-ipad-interface-irig.jpg" src="/sites/default/files/images/201212-3/a-amplitube-ipad-interface-irig.jpg" style="width: 640px; height: 381px;" /></p> <p><img alt="b-s-amplitube-ipad-record.jpg" src="/sites/default/files/images/201212-3/b-s-amplitube-ipad-record.jpg" style="width: 640px; height: 319px;" /></p> <p><img alt="c-2-logic-pro-amp-designer-pedalboard.jpg" src="/sites/default/files/images/201212-3/c-2-logic-pro-amp-designer-pedalboard.jpg" style="width: 640px; height: 400px;" /></p> <p>之前看到过一句话,大意是,Metro风格让人看到未来,而拟物化则让人感觉像是回到家里一样。说的挺不错的;人不可能一直呆在家里,也无法始终飘逸洒脱的在外面寻求新鲜与未来感。我喜欢听真人使用真实乐器演奏的音乐,但这不妨碍我偶尔听听电子的东西。</p> <p>今天自己念叨的有点多了,我们还是进入译文的正文叭。作者从扁平化风格出发,慢慢引出了相对&ldquo;公允&rdquo;的看法,我个人觉得比那些单纯强调某种风格的文章要有点意思。走着。</p> <p>如今,关于&ldquo;扁平化&rdquo;与&ldquo;拟物化&rdquo;孰优孰劣的争论在圈子里此起彼伏的。我(英文原文作者)个人总是会被极简设计所吸引,所以扁平化的界面设计风格确实是我的菜。</p> <h3> 什么是扁平化设计</h3> <p>在实际当中,&ldquo;扁平化设计&rdquo;一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更&ldquo;平&rdquo;的界面。</p> <p><img alt="01-layervault-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/01-layervault-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>Layervault的设计师Allen Grinshtein曾经在HackerNews的一篇文章当中说:</p> <blockquote><p>&ldquo;长久以来,网站的界面风格似乎都在遵从着同一种设计美学,大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说,制作这类&lsquo;可爱&rsquo;的元素简直变成了行规甚至是荣誉。不过对于我们,以及为数不多的其他一些设计师来说,这种惯用的方式并非一定正确。&rdquo;</p> </blockquote> <p>去<a href="http://layervault.com/">Layervault</a>看上几眼,四处转转,你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着,也是蛮有意思的事情。下面是其他一些例子:</p> <h4> Squarespace</h4> <p><img alt="02-squarespace-new-version-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/02-squarespace-new-version-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" /></p> <p>新版的<a href="http://www.squarespace.com/">Squarespace</a>几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现,其实他们的产品在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后,你真的可以从中隐约感受到其设计团队付出的心血。</p> <p>相关阅读:<a href="http://beforweb.com/node/57">简洁至上的Web设计 - 创意要素及设计技巧</a></p> <div class="embed"><article id="node-298" class="node node-related-books" about="/node/298" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一目了然:Web和移动应用设计通识方法(第2版)" src="http://beforweb.com/sites/default/files/images/products/44.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一目了然:Web和移动应用设计通识方法(第2版)</a></h4> <p><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书深入阐述了如何设计出简单易用的基于Web的软件,以帮助读者理解、掌握显性设计的精髓。作者从软件开发初期谈起,一直到软件设计后期,分析诸多案例并论证了自己的见解或设计原则...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> Facebook</h4> <p><img alt="03-facebook-homepage-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/03-facebook-homepage-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>另外一个大家所熟悉的例子就是Facebook了。</p> <blockquote><p>&ldquo;Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色,至少我们可以说这种设计风格对于Facebook来说是完全适用的。&rdquo; - <a href="http://ianstormtaylor.com/">Ian Storm Taylor</a>(Segment.io)</p> </blockquote> <h4> Rdio</h4> <p><img alt="04-rdio-player-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/04-rdio-player-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格,你很难找到使用了阴影、渐变等效果的界面元素。</p> <p>相关阅读:<a href="http://beforweb.com/node/85">最小化可用性设计</a></p> <h4> Nest</h4> <p><img alt="05-nest-product-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/05-nest-product-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 334px;" /></p> <p>我曾经作为前端工程师参与过<a href="http://www.nest.com/">Nest</a>的网站开发,现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中,实际的产品及相关的应用环境照片作为&ldquo;真实&rdquo;元素融入到扁平风格的媒介载体(网站本身)当中,虚实结合,让访问者可以很容易的将注意力聚焦在产品上,而不会被网站界面上的视觉元素所干扰。</p> <h4> Beforweb</h4> <p><a class="eLink" href="http://beforweb.com">本小站</a>乱入...译者<a href="http://weibo.com/c7210">C7210</a>注</p> <div class="embed"><article id="node-297" class="node node-related-books" about="/node/297" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="简约至上:交互式设计四策略" src="http://beforweb.com/sites/default/files/images/products/43.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">简约至上:交互式设计四策略</a></h4> <p><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍交互式设计的技术与技巧,讲述如何从目标用户的需求和期望出发,结合人类本身的心理特征和行为特点,用最简单的方法创建易用、有效而且让用户愉悦的设计。书中阐释了合理删除、分层组织、适时隐藏和巧妙转移这四个令交互式设计成果最大程度简单易用的策略...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 对拟物化的逆袭</h3> <p>正如20世纪建筑界当中的极简主义运动,扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭;尤其是最近一段时间,苹果一直以来的拟物风格被诟病的蛮犀利的。</p> <p><img alt="06-apple-ios-ipad-ical-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" src="/sites/default/files/images/201212-3/06-apple-ios-ipad-ical-Flat-Design-Aesthetic-Skeumorphism-style-interface-discussion-which-better.png" style="width: 640px; height: 436px;" /></p> <p>Wikipedia对拟物化(&ldquo;<a href="http://zh.wikipedia.org/wiki/%E4%BB%BF%E5%88%B6%E5%93%81">仿制品</a>&rdquo;、&ldquo;<a href="http://en.wikipedia.org/wiki/Skeuomorph">Skeuomorph</a>&rdquo;)的定义是:</p> <blockquote><p>原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,以使新的外观让人感觉熟悉和亲切。</p> </blockquote> <p>举个例子,我们通常会为界面当中的按钮添加渐变和投影效果,因为现实当中的按钮就是具有这些视觉特征的,即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中,这种实体的存在是必需的,而在应用软件当中,温度计的形象则纯粹是装饰性的。</p> <p>日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D质感,用户是否还知道它们可以被点击?有多少装饰性的元素是真正必要的?</p> <blockquote><p>&ldquo;在现实生活中,当按钮被按下时,你可以清楚的感受到它的弹性,但在桌面设备或移动设备的显示屏上,你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应,至少对我来说这是一种很蹩脚的、不符合预期的体验。&rdquo; - Allan Yu (svpply / eBay)</p> </blockquote> <p>相关阅读:<a href="http://beforweb.com/node/92">从iOS到Metro - 重新设计应用的交互模式</a></p> <h3> 形式服务于功能</h3> <p>20世纪建筑界的极简主义运动当中提出了一些著名的口号,包括&ldquo;形式服务于功能(form follows function)&rdquo;、&ldquo;少即是多(less is more)&rdquo;等等,直到今天我们依然会谈到这些。此外,我个人非常喜欢米开朗基罗在被问到他是怎样创作大卫雕像时回答的:</p> <blockquote><p>&ldquo;很简单。我只要凿去多余的石头,留下有用的。&rdquo;</p> </blockquote> <p>对于界面设计来说,也是同样的道理;37signals的家伙们在这方面的本事是有目共睹的。要在实际当中卓有成效的实现扁平化风格的设计美学,作为设计师,我们本质上最需要关注的是产品功能如何运作,而不仅仅是考虑视觉呈现方面的问题。</p> <h3> 扁平还是拟物?只是个选择的问题</h3> <p>至少我没有见到任何研究报告表明拟物风格的按钮会带来更多的点击量。的确,有足够多的理论和实践结论可以证明在视觉上能产生更强对比效果的交互元素可以更好的引起用户的注意,但我相信,在某些上下文环境中,一个扁平化的橘色按钮所带来的对比效应会高于具有凸起质感的按钮。所以,上下文,也就是具体产品的具体界面环境,是这里的一个关键要素。我们来看看其他设计师的一些看法:</p> <blockquote><p>&ldquo;这件事和时装时尚有些类似。当某种风格被全面普及之后,作为设计师,要想脱颖而出,你就得反其道而行之。&rdquo; - Cemre G&uuml;ng&ouml;r (Branch)</p> </blockquote> <blockquote><p>&ldquo;如果有人告诉你&lsquo;拟物化是不好的设计&rsquo;,这就相当于在说&lsquo;紫色是丑陋的颜色&rsquo;,没有任何意义。&rdquo; - Sacha Greif</p> </blockquote> <blockquote><p>&ldquo;为什么要在没有任何实际证据的情况下贬低某种设计风格,同时抬高另外一种?忽略产品的实际功能与整体体验而单纯追求某种设计风格,这并不是一件令人兴奋和愉悦的事。&rdquo; - Geoff Steams (YouTube)</p> </blockquote> <h3> 设计的好坏不是&ldquo;美学&rdquo;可以决定的</h3> <p>对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。</p> <p>无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则:</p> <h4> 一致性</h4> <p>通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使产品更加易用,提升整体体验。</p> <h4> 对比</h4> <p>通过对配色、尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比。</p> <h4> 布局</h4> <p>可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡。</p> <h4> 层级化</h4> <p>最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来,简单的说,就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素,而将其他操作元素置于次要位置,这可以使界面得到最有针对性的优化和简化。</p> <blockquote><p>&ldquo;我个人的经验是,无论扁平化还是拟物化都没什么所谓,最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系,并且很容易的知道接下来应该做什么。&rdquo; - Caroline Keem</p> </blockquote> <h4> 目标用户</h4> <p>不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格,而其他更加&ldquo;普通&rdquo;的用户则更容易接受相对传统的拟物化界面。</p> <h4> 反馈</h4> <p>当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操作后,使用旋转图标提示用户系统正在进行响应。</p> <p>推荐阅读:<a href="http://beforweb.com/node/98">为用户的成功操作提供正面反馈</a></p> <h4> 降低&ldquo;摩擦力&rdquo;</h4> <p>无论采用怎样的视觉风格,都要使界面尽量简化,减少用户完成目标所需执行的操作,打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本,增加功能的复杂度,进而降低转化率。</p> <p>相关阅读:<a href="http://beforweb.com/node/143">表单设计与转化率的提升</a></p> <h4> 鼓励探索</h4> <p>了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能,并开始向&ldquo;高级用户&rdquo;的阶段进发时,要为他们的探索和学习行为进行必要的指引与&ldquo;奖励&rdquo;回馈。</p> <h4> 原型</h4> <p>无论风格如何,界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作,特别是通过草图或线框原型进行的探索。识别出最核心的用例需求,使用原型不断尝试和验证,为接下来的界面设计工作打下坚实的基础。</p> <blockquote><p>&ldquo;扁平化风格的逐渐盛行固然有它的道理,但本质上它只是设计美学当中的一种;与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信息架构及交互模式为基础。&rdquo; - Mike Cuesta (carecloud)</p> </blockquote> <p>推荐阅读:</p> <ul> <li> <a href="http://beforweb.com/node/24">产品早期的原型设计与用户测试</a></li> <li> <a href="http://beforweb.com/node/124">移动应用设计案例 - 打造初创型产品的用户体验</a></li> <li> <a href="http://beforweb.com/node/100">十个方法,让你的线框原型更具沟通能力</a></li> </ul> <div class="embed"><article id="node-277" class="node node-related-books" about="/node/277" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><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"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="原型设计:实践者指南" src="http://beforweb.com/sites/default/files/images/products/21.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">原型设计:实践者指南</a></h4> <p><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">原型设计是用于沟通设计意图的清楚而高效的理想方式,可以帮助设计师洞察设计想法,测试产品预设条件和收集用户反馈意见。本书向我们表明一点:“原型不只是一种设计工具,它还可能帮助我们进行产品推广,赢得更多内部支持,并有机会和开发团队一起测试产品的可行性。”...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </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/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/129" typeof="skos:Concept" property="rdfs:label skos:prefLabel">扁平化</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/130" typeof="skos:Concept" property="rdfs:label skos:prefLabel">拟物化</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/109" typeof="skos:Concept" property="rdfs:label skos:prefLabel">一致性</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 22 Dec 2012 15:10:33 +0000 C7210 142 at http://www.beforweb.com http://www.beforweb.com/node/142#comments