基础设计原则：

一旦你能够说出什么东西的名字，就会很容易注意到它。你就会掌握它，拥有它，使它在你的控制之中。当我们没用听说过一些设计的概念，我们就很难会注意到一个设计作品上的问题、缺漏，更不可能做出良好的设计。

对比（Contrast）

Robin对比原则指出：页面上的不同元素之间要有对比效果，达到吸引读者的对比效果。

原理：

页面上的不同元素会存在关联性和差异性，对比原则倡导通过视觉元素的对比来表现这种差异性。对比原则要解决的问题是如何更好的吸引用户的眼球，以及如何更好的为用户展现不同信息的重要程度。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。对比能够让讯息更准确的传达，内容更容易的被找到、被记住。

对比不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在界面上指引读者，并且制造焦点。

样例：

比如：

又比如：

为什么暂停、上下曲目按键是白色实心button而其他button不仅小而且还是灰色的？QQ音乐使用这种对比突出button层级与重要性。而曲名与其余信息也有明显对比。

反面教材：

背景图片导致的hint文字看不清，两者对比度过低

总结：

要增加有意思的对比，最容易的方法就是实现字体对比）。不过不要忘记，还可以利用线、颜色、元素之间的间隔、材质等形成对比。如果你想让对比效果更明显，就一定要大胆，不要让两种颜色看起来好像差不错又不一样。当然也不要在同一个页面使用太多种字体。

重复（Repetition）

Robin重复原则指出：设计的某些方面需要在整个作品中重复。

原理：

重复的目的就是“一致性”，让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、材质、空间等。这样一来既能增加条理性，又能增加统一性，增强视觉效果。

不过呢，重复也不能泛滥，如果一个页面上全是一模一样的内容或者风格，那就违背了上面的对比原则。所以更推荐跳跃性重复。

应用技巧：

把已有的重复元素取出，让这些元素效果更强、更生动。通过把重复表现得更明显，这样不仅页面看上去更有趣，还能在视觉上增强其条理性和一致性。
即使在一个只有一页的文档中，重复元素也可以建立一种连续性，将文档“整个捆在一起” 。如果在创建一个多页的、作为一个精美包装一部分的文档，充分使用重复就很关键。
有时重复的项并不一定完全相同，而只是存在明确关联的紧密相关的对象。为了实现重复，完全可以为此增加一些全新的东西。或者，也可以选择一个简单的元素，然后以多种不同的方式加以使用，比如说指定不同的大小、颜色或角度。
通常还可以增加实际上与页面主题没有任何关系的重复元素。只要确保，作品看起来是有意为之，而不是乱七八糟就行了。
使用重复原则时，有时可以把一个元素从现在的设计中抽取出来，并根据这个元素创建一个新设计。
重复性元素并不必须是图形或者剪贴画。可以是空白、线、字体、对齐，或者任何你有意重复的东西。
有时，尽管只有重复元素的一点儿暗示，但这可能与使用整个元素有同样的效果。对于一个大家都熟悉的元素，可以尝试只包含其中的一部分，或者采用不同的方式加以使用。
要避免太多地重复一个元素，重复太多会让人讨厌。
技巧选自：https://blog.csdn.net/u010111837/article/details/118085567

样例：

其实这个名片也用到了对比，其实是对比与重复的结合。

再回到上面的QQ音乐，

所有灰色button的设计风格都是重复的，这使得整个界面很协调。

对齐（Alignment）

Robin对齐原则是指：任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。

原理：

页面上的不同元素之间会因为关联性不同而会有不同的物理距离，对齐原则倡导的是将这些不同元素建立视觉上的某种联系，而不是被随意的摆放，建立这种联系的方式就是为元素寻找某种对齐。

这样能够建立一种清晰、精巧而清爽的外观，提升可读性。避免一个页面上混用多种对其模式，也就是不要有一些置左，有一些置右。尽量避免使用居中对齐，除非是比较正式、稳重的设计（别动不动就让什么都居中，有些时候居中是一种很土的对齐方式）。

对齐性原则解决的问题是如何将要呈现的信息有秩序的展现在用户面前。

样例：

不建议初学者轻易使用居中对齐

如果文本为左对齐或右对齐，让文本联系在一起的那条看不见的线会更明确，因为现在有一条“硬”的竖边。这就使左对齐和右对齐的文本看起来外观更清晰、效果更分明。

居中对齐会创建一种更正式、更稳重的外观，这种外观显得更为中规中矩，但通常也很乏味。请注意你喜欢的那些设计。我敢保证，大多数看来精巧的设计都没有采用居中对齐。我知道，作为一个初学者，要完全摒弃居中对齐会很难，但你必须从一开始就强制自己避开它。

在得到更多培训之前，一定要坚持一个原则：只使用一种对齐方式。页面上只使用一种文本对齐，所有文本都左对齐，或右对齐，或者全部居中。

明显而有意为之的居中对齐效果最好。当对齐经过精心策划而又明确时，你就可以对其他元素充分发挥创造力，作品看起来仍然显得匠心独具，而这些元素也不会像是莫名其妙地散落在页面上一样。

页面上每一个项都应该与其他项存在某种对齐

在页面上放其他项时，一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放，则按其基线对齐。如果有多个单独的文本块，则对齐其左边界或右边界。如果有图片元素，将其边界与页面的其他边界对齐。

还是这张QQ音乐：

明显的对齐使得界面看起来非常规整。

总结：

倾听你的眼睛

眼睛看向哪里，路线是什么，这是最佳路径吗？重要的信息是否都归入了逻辑亲密性中？对齐是否对清晰的表达有帮助？

亲密性（Proximity）

Robin亲密性原则是指：将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。

原理：

如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。亲密性原则倡导通过物理距离来管理同一个页面上不同元素之间的关联性，相关性高的元素应该紧挨在一起，相关性低的元素之间应该保持一定的距离。亲密性（即紧密性）意味着存在关联。逻辑上关联紧密的项目在布局上也应该紧密，关联性不强的元素之间可以适当增加区隔。位置是否靠近可以体现出元素之间是否存在关系。

亲密性原则实现方法

在设计时，应该厘清哪些信息在逻辑上存在关联，那些信息应当强调，而哪些信息不用强调，然后可以通过分组形象地表现这种信息。利用亲密性原则合理的组织信息的效果可以从下面的对比中看出来，将需要表现的信息进行分组，从排版上就体现这种信息之间的关系。

亲密性原则要避免的问题

避免一个页面上有太多孤立的元素。
不要在元素之间留出同样大小的空白，除非各组同属于一个子集。
标题、子标题、图表标题、图片能否归入其相关材料？在这个问题上一定要非常清楚（哪怕只有一点含糊都要尽量避免）。
在有很近亲密性的元素之间建立关系。不同属一组的元素之间不要建立关系！如果元素彼此无关，要把它们分开。不要仅仅因为有空白就把元素放在角落或中央。

样例：

这个样例太过经典，不想多说。

还是说说QQ音乐，大致给界面元素分个组：

又及，亲密性的经典界面：

为什么要留白？直接大杂烩不好吗？显然不好。许多设置是相似的，放在一起并加以分组，能让界面更加条例清晰，用户感受更好。

总结：

亲密性的根本目的是实现组织性，避免一个页面上出现太多孤立的元素。 尤其在我们排版时要注意一点，就是小标题和其对应内容之间的距离要小于小标题和上文的距离，这样就能将他们之间的关系迅速绑定在一起。

PS.

色彩暂时不讲，可以看看这个[(23条消息) 颜色运用-CSDN博客

一些APP设计原则：

充分考虑用户的使用习惯

比如大多数人拿手机的时候是双手握还是单手握，单手握的时候是右手操作还是左手操作，操作的时候用哪个手指就能进行操作。考虑到用户的使用习惯有助于在设计时避开手指的触碰盲区。比如，button不要太靠近屏幕左边，对单手操作极其不友好。

尽量减少产品层级以及深度

在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。如果产品层级确实过深，考虑用一下几种方法扁平化你的层级结构：使用选项卡（tabs）结合分类和内容的展示；允许穿越层级操作，比如允许用户在第一层级对第二层级的内容进行直接操作。

设计要主次分明

将主流用户最常用的 20% 功能进行显现，其他进行适度的隐藏，越不常用的功能，隐藏的层级越深。例如：微信的扫本机二维码。要避免新浪微博广场的堆积式设计。确保主页看起来像主页（使主页有别于其它二三级页面）。

APP的导航尽量采用底部导航的方式，3-5个为最佳

自然过渡

界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

比如删除前的警告dialog，加载时的进度条，都是必要的。

色彩决定APP风格和用户使用感受

红色让人感到激情、活泼，而灰色等暗色调则让人感到压抑。合理选用色彩，让用户有更好的体验。

一些组件使用原则：

凡是涉及操作的组件都要做出视觉上的响应。
- 比如button按下变色或者一些其他特效，输入框获取\获得焦点时边框或者背景变色等等
适当的圆角有利于界面美化
- 尤其是在button和头像、cardview方面
过度绚丽的背景并不利于信息呈现
- 相反，更推荐纯色、相近色或者渐变色
巧妙的边距能事半功倍
风格一致性问题。
- 账号密码两个输入框背景颜色为什么要不一样？
- 登录注册两个button为什么要一大一小？
- 为什么从一个暗色调界面能一下子跳转到亮色调界面？
设计要人性化
- 为什么输入框那么短？
- 为什么button那么小？
- 为什么图片占据那么大的空间？
- 字号的大小要有区分，但不要标题太大而正文太小

MaterialDesign基础原则

实体感就是(通过设计方式来表达)隐喻

通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。与众不同的触感是实体的基础，这一灵感来自我们对纸墨的研究，但是我们相信，随着科技的进步，应用前景将不可估量。

实体的表面和边缘提供基于真实效果的视觉体验，熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果，但同时又绝不会脱离客观的物理规律。

光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系，以及单个物体的运动。

新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫，不但可以愉悦用户，而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。

Material Design 设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。

环境

三维世界（3D world）

Material 环境是一个三维的空间，这意味着每个对象都有 x ， y ， z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。