目录如下：

01 动效-创意点

首先我们来从有趣的界面动效讲起

我觉得经常看看国外落地的app，可以拓宽我们的眼界，提高我们的审美，也可以让我们看到更多的细节和创意。

这是我下载过一些国外的app：

1.1 空页面动效

空页面是每个app产品必须要都要设计的触点，有些产品比较的简单，有些产品做的比较有情感化，看了很多国外的app，很多空页面都做成了动态的，比如下面这个：

机器人在空箱子里看那个飞行的物体，十分可爱。

再比如：

一个流汗的表情，代表页面为空的尴尬无奈，而且这个图形是根据logo延展的，一套的：

这种轻量简洁的动态空页面还是蛮不错的。

1.2 交互动效

有时候我们觉得一个产品体验很棒，但是又不知道哪里棒，其实就是因为有很多隐形的细节在支撑着体验，比如像这种展开的动效：

都是分层展开的，显得非常生动有层次，很多app都是直接闪现的。

再比如下面这个滑动，toast的展现方式：

也都是有缩放细节的。

这些都是很小的体验细节，但推挤出来就会影响整个app的体验。

1.3 切换动效

再随便展示几个其他有意思的小点吧。

比如下面这个：

滑动圆点上面有一个形象再跳跳跳，那我们在做类似引导页，或者其他切换的时候，是否也可以做一些类似的效果呢。

再比如这种小转盘形式的操作体验：

也还是有点意思的。

1.4 精致的小动效

其实很多外国的app风格都是很简洁精致的，比如下面这个app：

我个人非常喜欢他们呢的风格，仔细观察，他们也很赶设计趋势，用了毛玻璃的效果：

还有小动效：

效果还是蛮不错的。

02 图标统一性

我们总说做图标要统一，但是到底要统一哪些要素？有没有一个完整的自检表呢？

以前我总结了5到6个要统一的要素，最近观察大家的练习之后，直接扩增到9个了，今天就以线形图标为例，看看我们需要统一哪9个要素！

2.1 大小统一

这个很容易理解，就是一组图标看起来大小是一致的。但是最近发现了一个比较重要的点，就是很多同学做一组练习，相邻的图标都差不太多，但是隔的比较远的图标放在一起就差很多了，比如下面这几个图标，就是逐渐变大的：

所以对于大小统一，我们必须要做到，一组图标里，任意两个图标拿出来都是大小统一的，否则就是不及格。

2.2 圆角统一

圆角统一也是比较好理解的点，无非就是圆角大小，像下面这两个图标：

如果圆角差很多，你很容易发现，因为都是差不多大小的矩形，但是我们很容易忽略一些细节，比如下面第一个图标的三角形，和旁边的日历相比，就过于尖锐：

这是图标里面很细的细节，所以容易被忽视，大家一定要重视。

2.3 语言统一

语言统一你可以理解为设计风格统一，如果一组图标里面出现了多种风格，那会显得非常不专业。

比如下面这组练习：

大体看似好像是一种语言，但仔细观察其实还是有很多细节不统一的，比如外轮廓上面有的有白色，有的没有，白色还分带描边和不带描边：

这就是在语言上不统一的案例，大家在做练习的时候，一定要想清楚你的语言是什么。

2.4 粗细统一

粗细统一就不用说了吧，基本就是用在线性图标线条粗的，比如像这种比较明显的粗细不一致，就不应该出现了：

这都是最最基础的问题，一般在星球里打卡超过5次还出现这种问题，那就实属不该了！

2.5 疏密统一

疏密统一其实是很多新人朋友容易犯的错，比如下面这一组图标：

大部分地方是比较透气疏松的，但是只有第二个比较密集，这样就会让人感觉比较突兀，整体不够和谐。

这就是疏密程度的统一性，一定要把握住节奏感，否则就会不舒服。

2.6 间距统一

这个点一般用在断线图标上，也就是你开口大小的统一性，比如一个开很大，一个开很小：

那就证明细节没有做到位。

2.7 比例统一

比例可以分很多种，比如颜色比例，像下面这个原作的颜色比例就没有太统一：

在小y优化临摹之后，达到了颜色比例的平衡：

再比如之前说的一个案例，粗细线条的比例：

第一个图标，粗线与细线的比例：95:5

第二个图标，粗线与细线的比例：70:30

第三个图标，粗线与细线的比例：100:0

在这样不统一的情况下，图标是一定不会精致的。

这些都是比例统一问题出现的实际场景。

2.8 正负形统一

正负形也是没那么容易看出来的，举个例子，下面这组周楠做的图标，乍一看没什么问题，但是仔细一观察，其实我们会发现，白色面积的重量其实是不统一的，那个消息上面的“#”会偏重一点：

当优化之后，我们再看：

整体就会比之前统一精致很多。

2.9 角度统一

角度，也是增加图标统一感的因素之一，最常见的角度统一方式就是按照一定的倍数来制定规范，比如30度的倍数：

再举一个角度其他方面的例子，在做下面这组图标的时候，最初没有考虑断线的规律：

所以看久了会觉得有些凌乱，于是我将断线处定为右下角45度，如遇到圆角拐角处，可挪动靠近拐角处进行断线：

这样我们就会看到所有的图标断线位置都大致出现在右下角的地方，最终效果如下：

很大程度上提高了图标的统一性，并且在延展执行的时候节省了大量的思考时间（思考在哪里断）。

但是对于断线的位置是否一定要规定其出现的角度，我觉得不一定，也可以从其他角度考虑，但最终的目的还是让整体统一和谐，且延展性高。

3 界面-利用率

在寸土寸金的移动端界面中，如何最大化的使用它？ 我来分享一下我的方法

3.1 y轴（高度）的空间节省

y轴，顾名思义，就是高度，我这里举三个例子来说明下：

第一个例子，我们来说说封面，我们看国内的漫画平台，比如快看，大部分是竖封展示：

但是国外的很多漫画平台都是横封展示居多：

二者单从高度占比来讲，横封会矮一些：

第二个例子，也是关于封面的，国内外都会有一些方形封面，但是国内的方形封面一般一排只有两个，而国外的会相对多一点：

单看高度，右边的会节约一些纵向空间。

第三个例子，我们还可以在一些信息上进行整合 比如，快看最近浏览这个模块，标题是放在上面，信息是放在封面下面的：

但是有一些产品比如波洞，标题是左侧的，而信息文字是放在封面上的：

信息也能看的清，相比之下，后者高度上节约了太多空间：

这也是合理节约高度空间的一种方法。方法还有很多，大家可以多多思考尝试。

3.2. x轴（宽度）的空间节省

x轴，就是宽度了，正常我们只是思考如何在屏幕内进行节约空间，那是否可以利用屏幕外的空间呢？

当然是可以的，国外有很多常规模块都有利用这一原理来进行展示作品，比如：

国内可能主要用在猜你在追，浏览历史这种模块多一点。是否可以在更多模块内使用这一展示方式，可以根据自身产品定位来尝试。

3.3 z轴（深度）的空间节省

z轴，那就是屏幕的前后景深了，也就是深度，不仅仅只是思考二维平面的宽高了，而是思考如何利用屏幕纵像的空间。

举个最简单的例子，想哔哩哔哩漫画这种：

就很好的利用了z轴的空间，物体不仅仅只是在二位平面内展示，而是延伸到屏幕里面，有了深度，相同平屏幕大小，展示更多空间的内容。

再比如，最早在韩国app看到的这种交互方式：

也是很好的利用页面纵向的空间，达成一定的亮点和空间利用率。

再再比如，下拉页面后，在页面的后面出现一些内容：

原理也都是类似的，当二维空间无法满足我们的内容摆放需求的时候，我们就可以想办法拓展维度，让我们的空间变得更广，利用率更高，还容易产生一定的创意！

以上就是我平时做界面是考虑的方方面面，希望可以给你在设计界面时有更多的灵感！