尽管市面上充斥着大量的文章，但作为一名设计师，我发现这些文章要么只是触及表面，未能触及核心，要么只是生硬翻译googie sketch up80，缺乏消化吸收，尽管内容丰富，我却觉得有必要从全新的角度去审视这个领域。

背景资料

（之前的 Now）

内部代号称为“量子纸”的设计语言，于2014年6月25日的I/O大会上正式发布。该语言是在首次亮相于Now平台上的“card”（直译为“卡片式图案”）基础上进行扩展设计的。它显著增强了栅格化图层的使用、引入了响应式动画，并融入了光影变化、变形、叠化以及深度效果等多种视觉表现手法。设计师Matías对这种设计风格进行了解释：“我们并非在模仿真实的纸张，然而，我们的虚拟设计元素却能够智能地扩展与变化。这其中的含义是，设计中的元素并未严格遵循拟物设计原则，却带有某种实体物理属性，即物理性质的拟物化。真实物质具有物理表面和边缘，而接缝与阴影则能显示出你所触摸的是何物，设计的灵感正是源自于此。”说他们这个设计语言思路是来源于纸和墨，所以充满了物质性。

适用于1至v7版本，涵盖2009年及以后生产的所有实物设备。我们将延续一贯策略，通过拓展网页端和移动端产品线，逐步扩大我们的影响力，并向第三方开发者提供（APIs），以便他们能够了解并开发出类似风格的应用。

2015年，众多移动设备APP的界面已被其占据，囊括了Gmail、Drive、Docs、Maps、Inbox等，以及Play品牌旗下所有直接运营的应用，还包括了浏览器以及Keep等外设，甚至网页端的部分应用界面，如Drive、Docs和Inbox等。

该UI设计规范被称作“paper叠纸元素”（姑且如此称呼），其内容涵盖“层叠元素库”，在浏览器中，它通过“垫片”这一形式来呈现网页端额外的API组件，以此表明这些组件并非该软件自带的控件。

设计详解

这一部分的内容是 中文版的部分摘要和总结，在此表示感谢。

1.动画

在现实世界中，由于存在重力等带有加速度的力场，物体的运动速度通常并非呈线性增长，其斜率的变化可能更贴近二次函数的形态。因此，在进行动画制作时，必须首先遵循物理规律，确保动画的真实性。例如，当需要模拟虚拟的上抛运动时，初始速度应设定为最大值，以符合现实世界的物理规律。此外，还需关注惯性因素，试想一下为该物体设定怎样的质量和初始速度，这能助你制作出更佳的动画效果。

在现实世界中，若你尝试与水面互动，不论是抛掷石块还是用手指轻触，虽然效果各异，但都会激起相似的波纹。而在虚拟空间中，当你点击设计的交互元素时，也应产生类似的反应，即生成一种『涟漪』效果，并且紧接着，应当以你点击的位置为圆心，弹出一个新的界面。

在处理场景转换时，我们应当如同设想观众翻阅书籍一般，避免像观看电影时那样生硬地切换画面。在界面元素变动不大的切换过程中，我们需要设想新出现的元素、即将消失的元素以及需要保留的元素，它们应遵循何种路径和动画效果进行移动。所规划出的动画必须井然有序，即便涉及到物理动画的加入，也绝不能因此而造成混乱。

若前述工作顺利完成，UI动画的整体评分可达到九成，而剩余的十分则是源自于对细节的打磨。然而，在追求细节的同时，还需确保设计既简洁又充满感染力，若设计过于繁复且显得不协调，则宁愿舍弃。

2.样式

在大多数情况下，应大胆运用明亮的色彩，并确保其饱和度在色彩图中达到500，以达到最佳效果。糖果色调与撞色搭配构成了一个显著特点，挑选出两种对比鲜明的色彩，再各自挑选出三个不同饱和度的颜色，这样就能大致确定画面中的主要色彩（优秀的设计需遵循一套明确的视觉识别系统规范），其中一组色彩作为主色调，在关键控件的设计中起到引导视觉关注的作用，需谨慎运用。

自其问世之初，便在所有平台中占据着最规范的字体地位，经过多次更新迭代，其清晰度和特征愈发突出。其排版缩放通常遵循12、14、16、20和34号字体的比例，层级划分极为清晰易懂。在设计规范中，还包含了一项更为先进的规则，即对不同字号的颜色、间距以及换行进行适当调整，以避免因对比度过强而导致注意力分散。为了确保阅读体验的优质，建议每行文字控制在约60个字符。

图标设计包含一定的栅格标准，强调圆滑的边缘处理，避免使用过于尖锐的直角，并且在不同场景中均能展现出良好的大小和色彩匹配能力。

一套UI系统在日常工作中也需频繁应对图像与设计元素的融合。尽管图像品质始终受限于不可预控的因素，但在我们能够掌控的领域（例如APP的背景、登录页面、专辑缩略图等），通过提升与周边图层及控件的匹配度、巧妙运用遮罩效果，可以使设计更加符合人的使用习惯。插画与摄影的混搭能够增强视觉冲击力，但必须避免仅使用照片，甚至是仅依赖图片库中的素材。此外，像素需占满整个画面，若留白过多，将使得整体设计与图片显得不协调。同时，分辨率必须足够高，应避免随意使用滤镜，尤其是那些过于强烈的灰色半透明效果，这些做法都会影响画面的质感。

3.图层

整个设计的核心在于模拟“纸墨”的质感，因此，在设计过程中必须严格遵循印刷时代的栅格化原则，以此尽可能还原“纸质”的感觉（尽管我个人认为这一点主要适用于欧美印刷行业）。在图层布局上，各层之间存在着非常清晰的关联性，处于同一层的“纸张”只能相互“推动”，且始终保留一个“接缝”，而不得随意跨越到其他层级的纸张上。此外，纸张普遍具备弹性特性，尽管如此，它们仍存在一个特定的临界点。在设计和制作过程中，我们还需兼顾先前提及的物理定律。

在设计中，每一处衬线的运用都承载着特定的意义，绝不可随意滥用；其目的在于确保图层间的逻辑关系极为严谨。因此，当某些界面摒弃了标题栏时，这些衬线便成为了至关重要的图层组成部分。

每个应用程序都保持着极高的独立性，它们之间无法相互渗透至对方的图层。若某个应用程序内含有多个图层，其中将配备一些控件，专门用于连接这些图层，并且这些控件会始终保持在所有图层之上显现。还有一些规则需要遵守，例如系统提示总是位于图层的最上方，这便是所谓的“深度”效果。每个图层在三维空间中都具有“深度”，它们在Z轴上占据特定位置，并且每个图层上都有阴影来表明它们与最底层的Z平面之间的距离（尽管我认为有时这种处理方式过于夸张，尤其是当图层高度较大时，阴影显得尤为吓人）。

各种元素间的间隙大小均有既定且完善的尺寸标准，这些标准既适用于水平方向也适用于垂直方向。在这些固定尺寸之外，剩余的空间则由内容与空白共同填充，这部分的处理方式具有灵活性。即便是在平板电脑和个人电脑上，处理方法亦保持一致。面对难以处理的尺寸问题googie sketch up80，则可运用倍数计算法则来解决问题。

这里需要探讨的，是交互逻辑的更深层次内容。实际上，UI页面之间的联系可以分为三种：一种是一个屏幕就能完成所有操作，例如计算器应用；另一种是同一层页面，但通过不同的Bar进行切换，比如拨号界面可以直接展开或收起收藏夹等功能；最后一种是复杂的应用，涉及多层页面和数据量较大，例如具备分类功能的购物应用，以及包含预览功能的文件夹等。这种逻辑与不同应用之间的相似度极高，却又略有区别；在这种情境下，你需关注的不仅仅是单个页面的设计，还要全面考虑整个用户界面（UI）的设计，并且在整个设计过程中保持思维的清晰（此时你更像是一位导演或建筑师，纯美工朋友请忽略下述内容……），首先呈现的页面必定是用户最期待看到的。你需确保视觉上不产生混淆，避免屏幕上充斥着导航栏，否则用户会感到困惑（类似先前App版本打开时出现的众多Bar，显得非常不美观），此外，Icon的辨识度以及是否能够清晰展示直接访问路径的信息，这些因素同样至关重要。功能众多时，首要任务是进行精简，接着是平铺布局，最后考虑侧滑设计，力求减少用户不必要的操作步骤（当然，若是在制作动画，这一理念同样适用）。

若您的应用界面中存在众多并列的“纸张”，您可以考虑添加筛选栏或侧边栏来对这些繁杂的列表进行整理。不过，这需要您投入一定的学习精力，因为它们并非一打开就能立刻观察到。当然，在平板或电脑上浏览时，您可以适当调整布局，例如将工具栏固定在上方，而底部导航栏则可能不必要显示。通常情况下，手机上的侧边导航栏宽度是这样计算的：先从屏幕的总宽度中减去应用栏的高度，得到的数值即为导航栏的宽度。

工具栏的布局可能并非严格固定，有时甚至可以允许较大的调整空间，然而，其基础形态和等级划分必须极为清晰明了。

当然，在这些工具栏的设计上，也存在一定的尺寸规范，与之前在水平方向上的尺寸规定相仿；在工具栏、底栏以及边栏的布局中，内容和空白区域均可灵活填充，对于未被明确规定的部分，则无需严格遵守固定要求。

4.组件

选择某个特定内容（例如某人的联系方式）时，若可选操作的项目数量超过三项，则必须采用底部动作条这样的复杂控件，因为简单的包含两三个按钮的对话框无法满足需求。同时，这类控件的设计也需遵循一定的尺寸规范：

按钮是设备中不可或缺的关键部分，它并非仅仅是装饰性的元素。按钮类型多样，包括圆形图标式的FAB按钮以及带有背景色或无背景色的扁平文字按钮。尽管它们在点击时都会产生涟漪效果，但它们的功能却有着本质的区别：

选择这三者通常依照图层的层级来决定，你记得我之前展示的那个图吗？不妨仔细考虑一下，你打算把这个按钮放置在哪个3D图层上，以及它需要具备哪些功能（比如若需要展示推拉和弹出同一图层的信息，就应选用FAB；若是连续的卡片式或接缝式的图层，通常使用它；而伴随大量文字对话框的，一般则是Flat）。这样一来，你应该就能确定使用哪种按钮了。另外按钮的位置也是有尺寸标准：

按钮的操作过程中，其颜色会随着每一步的变化而有所不同，通常情况下，其参数设定如下：

Dark/Dark Color

宽度限制为88 dp，高度设定为36 do；在正常显示时，颜色为Color 500；当处于覆盖状态时，颜色变为Color 600；点击时，颜色升级至Color 700；若处于不可用状态，则颜色显示为10%的#ccc。

特殊页面上的按钮，其边界有时较为模糊，形态也可能出现变动，然而在操作时仍需关注其响应区域的大小。

在相应下拉菜单中，需特别注意一点，即切勿对先前图层造成分割，因此操作时仅能在边缘区域向下延伸，具体可参考上图所示。

下拉菜单的形式多样，其中一种是完全不显示任何内容；另一种则包含预设选项和操作按钮；而第三种不仅具备预设值和操作按钮，还能进行自定义编辑，并且这些菜单都具备相应的交互功能。当多种选项与下拉菜单结合使用时，还需遵循特定的布局规范，如图所示。

与大家预想的不同，实际上卡片内部还融入了微小的拟物化设计，其中圆角和阴影是不可或缺的元素。卡片所承载的内容类型各不相同，并且支持互动功能，比如评论和点赞等，但这些功能不宜过多，只需展现出卡片的基本功能即可（最好不超过两项）。

展示的网格设计应确保图片与文字清晰直观，排版需避免杂乱无章及阴影的过度使用。切记，图片下方不宜添加分散观者注意力的元素。

在布局上，也是有一定讲究，比如：

字体设计

如有侵权请联系删除！