神译局是36氪旗下的编译团队，关注科技、商业、职场、生活等领域，重点介绍外国的新技术、新观点、新风向。

　　编者按：如今，谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。本文作者Danny Sapio，原文标题“10 Key Takeaways from Google’s Material Design Guidelines”。

　　这里的声音特指“Hero sounds”，用于衬托一些喜庆的、重要的高光时刻，它们常被用来激起用户的情感，或烘托一种喜悦的气氛，从而塑造产品或品牌在用户心中的形象。以下场合适合使用Hero sounds：1.庆祝用户进行了某项操作 2.欢迎用户使用新的应用程序或体验 3.确认用户成功使用某款产品。——《谷歌声音设计指南》

　　声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到，Hero sounds出现的次数不应该频繁，否则无法突出其重要性。通过在同样的环节提供同样的声音特效，久而久之用户会将这种提示音与成就感挂钩，从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音特效，或者每次待办事项标记为完成后就会出现庆祝的提示音。

　　不管我们是否注意到这一点，我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音，还是MacBook的废纸篓在清空时发出的揉纸的声音，都在某种程度上影响着我们的情绪，也帮助我们更加了解用户界面上发生的一切。

　　触觉特效可以和声音特效配合使用，也可以单独使用。举个例子，在手机黑屏的时候，触觉是唯一一种可以对用户提供反馈的方式。和其他特效配合使用时，触觉特效应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

　　除了声音之外，触觉设计（如震动）也是一种刺激感觉的好方法，可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后，我们将会对产品的某些功能有更加深入的了解。

　　举个例子，如果某个用户通过APP进行付款，但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动，对用户进行错误反馈。当用户熟悉了这种震动模式之后，下一次再感受到这种震动，就会立刻知道付款出现了问题。

　　产品设计师很容易忽略声音和触觉这两个板块，而过度专注于画面。但这两个板块却也扮演着非常重要的效果，可以为用户体验锦上添花。

　　动图可以增加用户的好感，在互动中为用户增加个性化体验，也可以表现品牌独特的风格。——《谷歌手势设计指南》

　　动图是我自己设计的产品Confetti中一个非常重要的因素，这是一款运动追踪APP，是为那些追踪自己生活习惯的用户设计的。在设计这款产品时，我希望可以为用户创造出一种满足感，鼓励他们培养好习惯。在这款APP中，我大量使用切换功能，通过不同的手势，界面或进程可以平滑过渡，使用起来非常便捷。当一个好习惯完成时，还会出现彩屑动画飞舞的特效，加强用户的满意度。

　　动图可以强化两种元素之间的联系，实现快速切换，迅速解决特定的任务。动图可以让用户专注于眼下最重要的事，不被其他因素所干扰。——《谷歌手势设计指南》

　　在2020年，你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《用户体验设计中动画使用的终极指南》中指出的那样：“众多研究发现，界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别，而超过1秒的动画则会造成一种延迟感，让用户感到不舒服。”

　　通过动图及产生的动画效果（如切换）可以改善用户体验，同时保证可以迅速找到需要的版面，而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间，又不能改善体验，那么这种环节就没有必要存在。

　　我们或多或少都有这样的体验：打开一个界面，里面充斥着太多文字和太少的图像。在用户体验设计中，展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品，而是希望通过图像对一款产品进行直观的视觉理解。

　　你所选择的图像应该能够清晰地展示产品特点，不管是用户自己上传的图片，专业摄影师的图片，还是插画风格的图片，它们都应该能直观展示产品外观，反应产品的特点。——《谷歌图像设计指南》

　　APP里的插图和所有的视觉元素一样重要，好的图片可以让用户界面更加生动，使用户体验更加完善。恰当的图片还能展示品牌风格，成为无声的“故事讲述者”。

　　我们应当有目的地使用图像，作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息，如产品外形、风格，APP的用途，状态等。媒体界有这么一句线个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

　　用户界面设计中应该关注产品的像素密度，让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

　　像素密度（PPI）是用来衡量每物理英寸的像素数。另一个常用的单位是DP（Density-independent pixels，有时候简称为DIP）。像素密度=屏幕宽度或高度（以像素为单位）/屏幕宽度或高度（以英寸为单位）。

　　在设计界面时，我们不应该只关注像素，还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放，以适应不同屏幕的尺寸。

　　举个例子，我们现在有一个按钮素材资源，大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示；在一个320ppi的屏幕上它就会扩大成400 x 100 px，相当于原始素材的两倍大。

　　通过以上例子我们可以了解，在像素密度不同的屏幕上，素材呈现的状态是不一样的。在实际应用中，素材可以会被放大三倍甚至四倍，如果素材不够清晰，就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎，尝试在不同设备上打开并检查。

　　素材密度如何适应屏幕尺寸？举个例子，iPhone XS Max的屏幕是414 x 896 pt，注意这里的尺寸是物理尺寸pt，而非像素。如果以像素为单位计算，那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时，我会首先考虑用414 x 896 pt的素材，然后在输出素材时将其乘以3。

　　离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用，你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

　　离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用，但是在能联网的时候，最好还是主动提示用户，推荐他们连接网络。

　　如果有可能的话，要提前告知用户下载相关信息，以便脱机访问。最常见的例子就是Spotify等音乐应用程序，它允许用户下载歌曲，以便在没有网络的时候也能继续听歌。

　　假如你的产品不像Spotify或者Netflix那样需要下载具体内容，你可以发挥创意来设计在线、离线两种模式。

　　谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子（在谷歌浏览器连网的过程中，离线画面会出现一只霸王龙，按空格键或者向上的箭头就能控制霸王龙——译者注）。这个小游戏填补了用户等待连线的时间，将消极体验转变成了积极体验。

　　我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外，我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导，在这一领域进行更深入地探索。

　　36氪 今日值得看，为你盘点每天所有读者「最喜欢」、「值得看」的文章。今日最热文章【36氪首发 专注于在线 英语培训，「阿卡索」再获亿元级 C3 轮融资】......其它热门推荐【真实数据告诉你：医美行业有多暴利？】【在这 7 个方面投资自己：读书、享受独处、记录想法等】【创业者复盘：为什么品牌一定要慢慢做？】