老板让我用AI做设计，我拒绝了，因为它考虑的没我细节！

前段时间做了一个项目，里面有一些UI知识点想要和大家分享一下，希望看完后大家都能有所收获，将其运用到自己的工作中。

1. 模块化信息和主次梳理

2. 页面排版节奏

3. 降噪处理、视觉优化、排版工整

最开始一版的设计稿是这样的：

可以看到，还是有很大的优化空间，有几处还可以更好。目前存在的问题如下：

1. 信息分布零散、不工整

2. 信息传达的节奏感不是很好

3. 彩色面积太多，让人感觉不耐看

那针对这些问题，在经过调整之后，最后页面定稿图如下：

就让我们一起来看一下，前后究竟经历了什么吧～

01 模块化信息和主次梳理

针对信息分布零散、不工整这个问题，我觉得有两个方法可以解决，分别是模块化信息和信息主次梳理。

1. 模块化信息

在排版时我们一定要带着 模块化 的思维去处理页面。让页面一个模块一个模块的整合在一起，同类信息是聚合的。

常见的划分模块的方式有卡片、分割线，这两种经常用于划分页面大模块、大结构。

除了大的模块划分之外，大模块里包含的小模块也可以进行划分，它也许没有用到分割线或者卡片，但是你也能明确感知到这是几个小模块。

看第一版设计稿页面，你会觉得它很散的原因在于它的模块划分不是很整体，都小块小块的分布在页面上。

所以我们需要先把大模块划分好，在这个页面上，根据信息的关联度，可以划分成上下两大块，我们用卡片去分割。

再近一步把大模块里的信息分割成一个个小模块，现在头部大模块里有这三个信息：

模块分出来了，但是排版信息很乱，这时候就要学会将页面信息就行主次梳理。

2. 信息主次梳理

大家心中一定要知道信息的权重级，我们先看头部模块，在这里我认为权重级是标语(模块a)>参与活动的数量(模块b)=我的成就按钮（模块c）

目前这一版的权重级就极不明显，想要凸显的信息没凸显出来，反而是小插画和icon很抢镜。

我们需要把权重级高的标语重新处理，标语很重要 就把它加粗放大，作为标题一样处理：

其次就是数字信息的强调处理，不推荐直接拿过来加粗放大改颜色，这样做就太粗暴了：

如果可以，我们尽量采用另外一种方式，这种方式排版层次更丰富，更有设计感。

如果有多个数字信息需要凸显时，也可以并排放置：

02 页面排版节奏

观察页面排版时，会明显感到模块B的信息密度太高了，文字信息全都堆积在右侧。

我们可以把一些信息转移到其他位置，在这里我就把「已捐信息」换了个位置。

这样放置也让信息排版结构更丰富了，使单纯的左右结构转变为有左右也有上下的结构。

这样的排版在整个页面中也会呈现的更有节奏：

03 其他优化小点

1.页面降噪

现在页面的排版已经完成了，我们看整体颜色，其实用色有些多，显得有些浮躁、不耐看。

不需要用那么多强调的颜色，适当的把一些颜色从彩色改成无彩色，会让页面更耐看。

2.头部视觉优化

现在头部的视觉还是比较简单，我们给它做一点视觉设计，让页面更好看精致。

3.设计工整的小细节

在排版的时候一定要注意对齐，像之前一版就完全没有这种意识，导致排出来工整度差了很多。

在处理之后，这些细节都要注意到：

总结

以上就是关于这次改稿的全部过程啦，希望你能有所获，最后总结一下这些知识点：

1. 模块化信息：带着模块化的思维去处理信息能够让页面不分散。

2. 页面排版节奏：如果通篇都是左右的排版，可以考虑加入上下的排版，让排版更有节奏。

3. 降噪处理：适可而止的用色，可以在彩色和无彩色之间多试一下。

再来看下页面前后对比吧：