我们能从Google的全新UI中学到的知识(图文)

2024-08-30 08:34:41

字体：大中小

来源：转载

供稿：网友

2011年网站变化最显著的就是Google，其一系列产品启用了全新的用户界面。这篇文章将探索决定Google用户界面设计背后的思维过程，或许我们能从中学到值得借鉴的方法和设计原则。
　　谷歌用户界面改革历程
　　1998
我们能从Google的全新UI中学到什么三联教程

　　谷歌原始主页
　　2012

　　更新后的界面
　　“Google 的使命是整合全球信息，使人人皆可访问并从中受益。”
　　统一Google体验
　　Google的网页从早期开始就发生了彻底的变化。用户的网页体验与以前相比有了更多途径，可以在不同的设备上观看并感受。Google已经做出了改变来反映这些变化。变化也被引用到统一谷歌一系列产品中，将这些产品整合，使得用户在产品切换之间有流畅的体验。Google的解释是：
　　“我们的目标就是带给您更加无缝一致的在线体验，无论您使用哪一种 Google 产品或在何种设备上使用，都将获得这种体验。”
　　Google带来的全新体验基于三个关键设计原则。让我们来看看这三个原则。 yixieshi
　　Focus——专注性
　　专注性即指让用户得以专注于其想要快速轻松解决的任务或工作。把杂乱的内容清除，将用户的重点内容和常用工具始终保持在最前方。同时，还加入一些简单的东西，例如利用鲜艳的颜色来突出或隐藏不用的导航功能。
　　通过这些方法，Google的用户界面能够帮助用户下意识地专注于他们正努力完成的工作，减轻用户的失败体验。
　　Elasticity——灵活性
　　自谷歌开始改变以来，最大的变化就是其用户访问网页的方式。
　　不仅在台式电脑上，我们更多的会将Google产品出现在移动设备中，例如智能手机，高分辨率的平板电脑及电视。“灵活性”的目的是让用户在转换使用不同的设备时能够保持一致的视觉体验。
　　Effortless——易用性
　　尽管Google使用的技术和产品相当复杂，他们不想在设计中描绘这一复杂性。“易用性”的理念是保持产品的简洁，干净和一致性。
　　“Google的新品牌将植根于信任，美观，技术和创新。”——Larry Page
　　Google导航栏

　　Google重新设计的中心是其新的Google Bar(导航栏)，取代了原有位于屏幕上方的“硬又黑”导航条。Google意识到这条东西占据了我们屏幕上宝贵的位置，所以决定配以新的设计原则，赋予新面貌。
　　新的菜单栏合并了Google的导航栏以及搜索栏、Google+工具栏。保留了搜索栏和导航栏中所有产品功能，同时产品之间还能进行简单的切换。只需简单滚动google的logo，一个下拉式的菜单便会出现，用户可以有效便捷的在Gmail， Docs， Maps， YouTube 以及其他产品之间转换。
　　Eddie Kessler(Google的技术负责人)解释道：
　　“统一，简化，告别旧的导航栏!让用户享受到超级简单的导航体验，是改变Google整体浏览体验的重要组成部分，也是我们努力的方向。这就是为什么对于此次改版，我们异常兴奋。”
　　Google +

　　左：由Alex Alex Patrascu 设计的Google+logo 右：Google+的菜单和界面
　　为了分析每个Google产品的UI是否完全达到其效果，在本文中我将选取几个最为突出的几个Google明星产品进行阐述。
　　Google的进行改版时恰逢遇上今年最关系的一个网络项目：Google +。比起其他Google的其他产品，Google +可能更好的展示了其新的设计原则。对于产品发布后的预期，如果有一个产品需要被用于吸引用户，那Google +首当其冲。它完美的展示了Google的设计理念，在我加入圈子的没几天，我发现自己已陶醉在其简单的设计中了。
　　Google Plus的部分设计是由Andy Hertzfeld 的UI/UX 团队完成。许多人会都会将Google与Apple的设计风格进行比较，如此争议或许是由于Andy在80年代曾受聘与Apple，并参与了 Macintosh Project项目。Andy在项目中所要做的就是和Joseph Smarr一起探讨‘circles’ 的概念。
　　Andy解释了其背后的想法：
　　“很明显这个想法的初衷是将用户分类。其次‘circles’ 的核心理念是能变得有趣，同时提高参与度，成为你愿意去做的一件事。由于会的变得乏味无聊，我们会对用户所做的采取奖励制度，在他们的脸上放上笑脸，试图让用户享受他们所作的一切。”
　　Google Plus如今是Google整体战略中不可分割的一部分。它将被整合进Google大部分的产品中，即使是在搜索结果中也能看到它的按钮。Google为我们的发现提供了超便捷的分享方式。“社交搜索”一词的意义比以往任何时候都具有价值，而且我相信搜索正引领着这个方向。Google这样说道：
　　“Google社交搜索帮助你从你的社交关系网中发现相关内容，建立一套你的在线好友和联系人的网脉。有时候，来自好友和熟人的内容，比来自素不相识的人更具有相关性和意义。例如，一份来自对于在线电影的影评或许很有帮助，但如果这份影评来自你的好友，这将更有益处。”
　　Gmail

　　Gmail的新layout
　　据CBS的报道，截止至2010年11月Gmail拥有1.933亿名活跃用户。为了挽留住这些用户，Google简化了Gmail的设计以此增强用户体验。他们对此作出了以下几项改变：
　　简化对话模式
　　Gmail中的对话模式被完全重新设计，当邮件归档时能更容易浏览。资料图片被添加进对话中，帮助用户更好的参与进对话中。同时有助于对自己所说的话进行追踪。区别于原有的UI，新的设计可以让用户专注于与同事和好友之间的沟通。
　　良好的导航性
　　左边侧栏导航被重新设计，并且可供用户自定义。用户可以根据自己的喜好更改聊天区域的大小，或者点击左侧栏下面的小图标，完全隐藏它。结合所有的新产品，用户可以以自己的方式通过Tab或箭头键浏览Google界面，再次为用户提供了最方便的导航方式。
　　增强搜索

　　重点突出了Gmail新增的搜索功能
　　Email对于web使用者来说是一个非常重要的工具。事实上，每天预估有294亿封电子邮件发送中。如何找到散落在我们收件箱的邮件成为了当务之急。Google为此提供了一种超越以往标准搜索的方式。现在，用户可以点击隐藏了高级搜索版面的下拉式列表，只需点击几下，即可创建搜索过滤器。
　　阶段性推出
　　无论你是否喜欢Google的新改版外观，无疑它已经取得了成功。在过去的几个月中，它成为了网络上的热门讨论话题，并且获得不少粉丝。其中成功的部分可能归功于Google已经做出的改变。Google选择阶段性的推出来取代一次性的上线，因为这通常取决于产品。通过此方法，他们可以实时收集用户的反馈意见，并决定什么是有效的，同时对下一阶段所要开展的项目进行重新评估。
　　阶段性的推出也有其他好处。通过几个月内，对于UI推出时间方面的消息，Google利用媒体对其UI进行了一定的炒作。从BBC到纽约时报，再到别家媒体，大家都在报道关于Google的变化，更何况是社区论坛中发表的众多评论。
　　深入了解Google UI
　　Google UI的用色

　　通过以上的颜色举例，我们可以发现Google一直保持其色调的着色限度。他们利用蓝色和红色突出重要的功能，这两者都是从Google logo的原型中延伸出的颜色。
　　按钮

　　Google的新按钮和icons设计
　　作为新设计战略的一部分，Google推出了一套新系列按钮。这些按钮清晰、简洁、简单并很清楚的呈现了Google的“焦点”式设计原则。他们使用了HTML5和CSS3技术进行创建。让用户感到吃惊的是，按钮并不是真正的按钮，也不是锚标记，而是在创建中使用了div实现的。这是用来表示一个通用的标记启着一个标准部件的作用。这对于利用屏幕阅读器等设备浏览网站的用户来说十分有帮助。
　　Google采用CSS3的实现圆角细腻渐变的按钮效果，同时在悬停按钮的底部添加一个微妙的阴影，带了额外的时尚感。按钮一般被分为两大类“独立”和“左、中、右”。每个类别有2个不同的尺寸“标准”和“大”。在其范围内选择这4个风格，Google为它的用户带来统一体验。
　　Comfortable， Cosy， Compact

　　在任何设计中提倡一个好的用户体验的其中以因素在于视觉吸引。Google允许用户对某些产品可以进行自定义屏幕显示密度。此项功能在Gmail、 Reader、Docs以及其他文字应用中都可使用。“Comfortable， Cozy 和Compact”这些选项取决于用户计算机的显示密度。随着媒体的热议，我敢肯定，这类型的屏幕显示密度选项将跨越其他网络产品，并开启新时代。
　　结论
　　在过去的六个月中对于Google新UI设计原则的研究相当激烈，我可以大家从他们以及实施的战略中我所观察和学习到的。最为互联网领域最大的品牌之一，他们已经清楚的了解领悟了简单和统一的体验是至关重要的。
　　“简单和统一的体验是关键。”(Simplicity and a unified experience is key)
　　它也亲自教会了我去降低UI元素的强度。阴影是否真的需要80%的不透明度?能不能只降低20%~30%?作为一个设计师，我们希望人们注意到我们所作出的额外努力，比如降低阴影的百分比，或是过渡突出，使其一目了然。有时，通过微妙的变化，可以实现更好、更顺畅的效果，无论是为了营造视觉效果，还是抓取用户视线，都能达到预期的设想。同样的原则也可以应用于边界半径，尝试将色调从平时的5或10px降到1，2或3px。当然，这些做法并不适用与每一个项目，但当你选择进行一个“干净”的设计是，它一定是至上之选。
　　同时，我们也了解到和以往相比，如今的网络是一个非常不同的地方。有关Internet Explorer的最新消息，IE将自动更新期浏览器，现在我们可以开始依赖于最新的网络技术，跨浏览器的开展工作。Google或许对此有了新的对策，而不是他们任何新产品的设计工作。现在我们可以在没有浏览器限制的情况下开展设计工作。现在我们应该重新调整时间创建跨设备兼容的网站和屏幕分辨率，最终带来良好的用户体验。

上一篇：25个CSS框架、工具、软件及样板分享

下一篇：谈谈网页设计中的Less和More(图)