我们能从Google的全新UI中学到什么？
jopen 12年前
<div id="news_body"> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/1e4c8ac42e9abc4b4adbaf0b8cf45459.jpg" width="550" height="305" data-pinit="registered" /></p> <p> 2011年网站变化最显著的就是 Google，其一系列产品启用了全新的用户界面。这篇文章将探索决定 Google 用户界面设计背后的思维过程，或许我们能从中学到值得借鉴的方法和设计原则。</p> <p> <strong>谷歌用户界面改革历程</strong></p> <p> <strong>1998</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/fa1487829dc8a715354d7b1257020123.jpg" width="550" height="317" data-pinit="registered" /></p> <p> <strong>2012</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/4e9fae4c545b77dc8c7ca1f61793dcd7.jpg" width="550" height="314" data-pinit="registered" /></p> <p> “Google 的使命是整合全球信息，使人人皆可访问并从中受益。”</p> <p> <strong>统一 Google 体验</strong></p> <p> Google 的网页从早期开始就发生了彻底的变化。用户的网页体验与以前相比有了更多途径，可以在不同的设备上观看并感受。Google 已经做出了改变来反映这些变化。变化也被引用到统一谷歌一系列产品中，将这些产品整合，使得用户在产品切换之间有流畅的体验。Google 的解释是：</p> <blockquote> <p>“我们的目标就是带给您更加无缝一致的在线体验，无论您使用哪一种 Google 产品或在何种设备上使用，都将获得这种体验。”</p> </blockquote> <p> Google 带来的全新体验基于三个关键设计原则。让我们来看看这三个原则。</p> <p> <strong>Focus——专注性</strong></p> <p> 专注性即指让用户得以专注于其想要快速轻松解决的任务或工作。把杂乱的内容清除，将用户的重点内容和常用工具始终保持在最前方。同时，还加入一些简单的东西，例如利用鲜艳的颜色来突出或隐藏不用的导航功能。</p> <p> 通过这些方法，Google 的用户界面能够帮助用户下意识地专注于他们正努力完成的工作，减轻用户的失败体验。</p> <p> <strong>Elasticity——灵活性</strong></p> <p> 自谷歌开始改变以来，最大的变化就是其用户访问网页的方式。</p> <p> 不仅在台式电脑上，我们更多的会将 Google 产品出现在移动设备中，例如智能手机，高分辨率的平板电脑及电视。“灵活性”的目的是让用户在转换使用不同的设备时能够保持一致的视觉体验。</p> <p> <strong>Effortless——易用性</strong></p> <p> 尽管 Google 使用的技术和产品相当复杂，他们不想在设计中描绘这一复杂性。“易用性”的理念是保持产品的简洁，干净和一致性。</p> <blockquote> <p>“Google 的新品牌将植根于信任，美观，技术和创新。”——Larry Page</p> </blockquote> <p> <strong>Google 导航栏</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/3870d6a15a78b41efcedf061f0f3eac3.jpg" width="550" height="314" data-pinit="registered" /></p> <p> Google 重新设计的中心是其新的 Google Bar（导航栏），取代了原有位于屏幕上方的“硬又黑”导航条。Google 意识到这条东西占据了我们屏幕上宝贵的位置，所以决定配以新的设计原则，赋予新面貌。</p> <p> 新的菜单栏合并了 Google 的导航栏以及搜索栏、Google+ 工具栏。保留了搜索栏和导航栏中所有产品功能，同时产品之间还能进行简单的切换。只需简单滚动 google 的 logo，一个下拉式的菜单便会出现，用户可以有效便捷的在 Gmail, Docs, Maps, 油Tube 以及其他产品之间转换。</p> <p> Eddie Kessler (Google 的技术负责人)解释道：</p> <blockquote> <p>“统一，简化，告别旧的导航栏！让用户享受到超级简单的导航体验，是改变 Google 整体浏览体验的重要组成部分，也是我们努力的方向。这就是为什么对于此次改版，我们异常兴奋。”</p> </blockquote> <p> Google +</p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/d47ff50ca9ab1c034379693eb3f4d491.jpg" width="550" height="314" data-pinit="registered" /></p> <p> 左：由 Alex Alex Patrascu 设计的 Google+logo 右：Google+ 的菜单和界面</p> <p> 为了分析每个 Google 产品的 UI 是否完全达到其效果，在本文中我将选取几个最为突出的几个 Google 明星产品进行阐述。</p> <p> Google 的进行改版时恰逢遇上今年最关系的一个网络项目：Google +。比起其他 Google 的其他产品，Google + 可能更好的展示了其新的设计原则。对于产品发布后的预期，如果有一个产品需要被用于吸引用户，那 Google + 首当其冲。它完美的展示了 Google 的设计理念，在我加入圈子的没几天，我发现自己已陶醉在其简单的设计中了。</p> <p> Google Plus 的部分设计是由 Andy Hertzfeld 的 UI/UX 团队完成。许多人会都会将 Google 与 Apple 的设计风格进行比较，如此争议或许是由于 Andy 在 80 年代曾受聘与 Apple，并参与了 Macintosh Project 项目。Andy 在项目中所要做的就是和 Joseph Smarr 一起探讨‘circles’ 的概念。</p> <p> Andy 解释了其背后的想法：</p> <blockquote> <p>“很明显这个想法的初衷是将用户分类。其次‘circles’ 的核心理念是能变得有趣，同时提高参与度，成为你愿意去做的一件事。由于会的变得乏味无聊，我们会对用户所做的采取奖励制度，在他们的脸上放上笑脸，试图让用户享受他们所作的一切。”</p> </blockquote> <p> Google Plus 如今是 Google 整体战略中不可分割的一部分。它将被整合进 Google 大部分的产品中，即使是在搜索结果中也能看到它的按钮。Google 为我们的发现提供了超便捷的分享方式。“社交搜索”一词的意义比以往任何时候都具有价值，而且我相信搜索正引领着这个方向。Google 这样说道：</p> <blockquote> <p>“Google 社交搜索帮助你从你的社交关系网中发现相关内容，建立一套你的在线好友和联系人的网脉。有时候，来自好友和熟人的内容，比来自素不相识的人更具有相关性和意义。例如，一份来自对于在线电影的影评或许很有帮助，但如果这份影评来自你的好友，这将更有益处。”</p> </blockquote> <p> <strong>Gmail</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/8b7230a4a3e7594f279cbeb605775177.jpg" width="550" height="314" data-pinit="registered" /></p> <p> 据 CBS 的报道，截止至 2010 年 11 月 Gmail 拥有1.933亿名活跃用户。为了挽留住这些用户，Google 简化了 Gmail 的设计以此增强用户体验。他们对此作出了以下几项改变：</p> <p> <strong>简化对话模式</strong></p> <p> Gmail 中的对话模式被完全重新设计，当邮件归档时能更容易浏览。资料图片被添加进对话中，帮助用户更好的参与进对话中。同时有助于对自己所说的话进行追踪。区别于原有的 UI，新的设计可以让用户专注于与同事和好友之间的沟通。</p> <p> <strong>良好的导航性</strong></p> <p> 左边侧栏导航被重新设计，并且可供用户自定义。用户可以根据自己的喜好更改聊天区域的大小，或者点击左侧栏下面的小图标，完全隐藏它。结合所有的新产品，用户可以以自己的方式通过 Tab 或箭头键浏览 Google 界面，再次为用户提供了最方便的导航方式。</p> <p> <strong>增强搜索</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/b74895a9c7f5045a6477c1a2ec6af077.jpg" width="550" height="314" data-pinit="registered" /></p> <p> Email 对于 web 使用者来说是一个非常重要的工具。事实上，每天预估有 294 亿封电子邮件发送中。如何找到散落在我们收件箱的邮件成为了当务之急。Google 为此提供了一种超越以往标准搜索的方式。现在，用户可以点击隐藏了高级搜索版面的下拉式列表，只需点击几下，即可创建搜索过滤器。</p> <p> <strong>阶段性推出</strong></p> <p> 无论你是否喜欢 Google 的新改版外观，无疑它已经取得了成功。在过去的几个月中，它成为了网络上的热门讨论话题，并且获得不少粉丝。其中成功的部分可能归功于 Google 已经做出的改变。Google 选择阶段性的推出来取代一次性的上线，因为这通常取决于产品。通过此方法，他们可以实时收集用户的反馈意见，并决定什么是有效的，同时对下一阶段所要开展 的项目进行重新评估。</p> <p> 阶段性的推出也有其他好处。通过几个月内，对于 UI 推出时间方面的消息，Google 利用媒体对其 UI 进行了一定的炒作。从 BBC 到纽约时报，再到别家媒体，大家都在报道关于 Google 的变化，更何况是社区论坛中发表的众多评论。</p> <p> <strong>深入了解 Google UI</strong></p> <p> <strong>Google UI 的用色</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/8539291b0869b969f096accc3910571d.jpg" width="550" height="314" data-pinit="registered" /></p> <p> 通过以上的颜色举例，我们可以发现 Google 一直保持其色调的着色限度。他们利用蓝色和红色突出重要的功能，这两者都是从 Google logo 的原型中延伸出的颜色。</p> <p> <strong>按钮</strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/2322a836f571eac88ca972a5a39cb43c.jpg" width="550" height="314" data-pinit="registered" /></p> <p> 作为新设计战略的一部分，Google 推出了一套新系列按钮。这些按钮清晰、简洁、简单并很清楚的呈现了 Google 的“焦点”式设计原则。他们使用了 HTML5 和 CSS3 技术进行创建。让用户感到吃惊的是，按钮并不是真正的按钮，也不是锚标记，而是在创建中使用了 div 实现的。这是用来表示一个通用的标记启着一个标准部件的作用。这对于利用屏幕阅读器等设备浏览网站的用户来说十分有帮助。</p> <p> Google 采用 CSS3 的实现圆角细腻渐变的按钮效果，同时在悬停按钮的底部添加一个微妙的阴影，带了额外的时尚感。按钮一般被分为两大类“独立”和“左、中、右”。每个类别有 2 个不同的尺寸“标准”和“大”。在其范围内选择这 4 个风格，Google 为它的用户带来统一体验。</p> <p> <strong>Comfortable, Cosy， Compact </strong></p> <p style="text-align:center;"><img alt="我们能从Google的全新UI中学到什么？" src="https://simg.open-open.com/show/922ef6699420a890bea9bcad2e886c5c.jpg" width="550" height="314" data-pinit="registered" /></p> <p> 在任何设计中提倡一个好的用户体验的其中以因素在于视觉吸引。Google 允许用户对某些产品可以进行自定义屏幕显示密度。此项功能在 Gmail、Reader、Docs 以及其他文字应用中都可使用。“Comfortable, Cozy 和 Compact”这些选项取决于用户计算机的显示密度。随着媒体的热议，我敢肯定，这类型的屏幕显示密度选项将跨越其他网络产品，并开启新时代。</p> <p> <strong>结论</strong></p> <p> 在过去的六个月中对于 Google 新 UI 设计原则的研究相当激烈，我可以大家从他们以及实施的战略中我所观察和学习到的。最为互联网领域最大的品牌之一，他们已经清楚的了解领悟了简单和统一的体验是至关重要的。</p> <blockquote> <p>“简单和统一的体验是关键。”(Simplicity and a unified experience is key)</p> </blockquote> <p> 它也亲自教会了我去降低 UI 元素的强度。阴影是否真的需要 80% 的不透明度？能不能只降低 20%~30%？作为一个设计师，我们希望人们注意到我们所作出的额外努力，比如降低阴影的百分比，或是过渡突出，使其一目了然。有时，通过微妙的变化， 可以实现更好、更顺畅的效果，无论是为了营造视觉效果，还是抓取用户视线，都能达到预期的设想。同样的原则也可以应用于边界半径，尝试将色调从平时的 5 或 10px 降到1,2或 3px。当然，这些做法并不适用与每一个项目，但当你选择进行一个“干净”的设计是，它一定是至上之选。</p> <p> 同时，我们也了解到和以往相比，如今的网络是一个非常不同的地方。有关 Internet Explorer 的最新消息，IE 将自动更新期浏览器，现在我们可以开始依赖于最新的网络技术，跨浏览器的开展工作。Google 或许对此有了新的对策，而不是他们任何新产品的设计工作。现在我们可以在没有浏览器限制的情况下开展设计工作。现在我们应该重新调整时间创建跨设备兼容的 网站和屏幕分辨率，最终带来良好的用户体验。</p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958341402551301972" target="_blank">www.damndigital.com</a> </div> </div>