来源视频：
高级大气的网页动效设计，设计师必看系列！_哔哩哔哩_bilibili
https://www.bilibili.com/video/BV13Z4y1T7DS?
目录
1 纯色背景图
依然是以图片平铺来作为背景，大面积的占位，要想不产生过于花哨的视觉效果，重点在于所选的图片主体要大且明确单一、背景要尽量是素色。底部图片的标题采用了作为流行趋势的粗字体，颜色选了能与图片形成较大对比感的白色，给人简约大气的视感。底栏用白色和黑色进行拼贴构造，总体风格其实靠近简约风。用黑白这俩百搭色和一个固定的暗色以及一个变化的亮色进行搭配，让画面拥有丰富且有效的视觉信息。再加上百叶窗的切换动画，这个页面又被赋予了动画的魅力。
总之，适宜数量且和谐的色块如果能够巧妙搭配的话，能够起到1+1=4的设计效果。
2 纯色图层堆叠
我很喜欢这个网页里图片间叠加起来的设计。将要展示的图片叠加在最上方，并且在图片中提取的黑色和比图片背景的饱和度更高的橙色来作为下两层纯色的图层的颜色。在叠加的顺序上，把与背景拥有大差异的颜色作为橙色和图片之间的那一层，避免了相似色之间带来过于鲜艳的视觉疲劳。同时，它又很巧妙地将最低的图层作为放置在右侧的导航栏，在上面安置了功能键来巧妙地优化设计空间，让装饰色块更有意义。
不难看出，这依然是一个偏向于极简风的网页设计。在我看来，极简风是一款成本相对于要低的百搭方案，但是要如何在极简风格里找到文字与图片之间的平衡是很重要的，毕竟留白正是衡量一套极简风格能否成功的重要标准。 可以发现、包括上一张图，这个页面里的留白空间很多，并且标题的字体大且粗，而文本内容却很小，并且有效文字框部分也并不宽，与其他区域都保留了相当的留白，让页面看上去更平衡，更简约，更和谐。
所以，在绘制简约风格的UI里：
1 标题与文本的字体大小和粗细要明确地拉开。
2 不要吝啬留白，距离产生美。
3 文字框不需要太宽，可以窄一些。
4 段落之间的距离可以拉大。
3 左右格局
左右分界是很多UI网页里会出现的格局。将一边充满图片，而另一边用来放相关的内容，并且随着右边翻页，左边的内容会跟着改变。
这同样也是一种让页面看上去简约大方的好方法。我在实验室的UI稿设计中也采用了这样的格局。
需要注意的是：
1 文字区域不宜填充过多的文字，一两句点到为止的简介即可，过多则会产生一种冗杂的效果。
2 在图片区域已经携带了丰富的颜色信息的情况下，文字部分不宜采用花哨的颜色来增加视觉压力。
综上，这种格局适合做导航简介。
4 多色块的和谐搭配
看到这个我的第一反应就是新闻页面。这个网页实际上能够堆放大量的标题式信息，很适合做引导首页。让这个网页极具设计感的原因就是色块的有效提取和恰到好处的堆放设计，它把多张图片里的颜色提取起来，并且恰到好处地拼贴起来，再以万能的黑色作为辅助色在这之间过渡，让整个画面在具有多种颜色的情况下依然能够给人和谐的视觉氛围。
划重点了。
1 要提取图片内包含的主体色里的有效颜色，做到色块与图片之间有关联感。
2 颜色种类不宜过多，尽量控制在四种以内。
3 调用一种万能色作为过渡色（黑白灰）。
4 控制色块的面积，记得留白。
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
