前天刚接到了一个需求，优化一下登录页面，老版页面已经用了很久了，而且现在的产品内容和原来的有一些出入，要加一点现在产品元素进去。一开始我是蒙圈的，因为以前从来没做过登录页面，去网上找了大量的参考和文章教程，最后做出来的效果是这样的。

此版本的优化我主要从4个方面入手

1.背景

2.图标

3.字体

4.按钮

一、背景  老版本的背景加了黄色且顶部加了彩色条纹，仅仅起到了装饰的作用，和产品并没有什么联系，而且背景黄色有一点土。优化首先把背景换成了白色，里面的内容换成和产品有联系的元素，再加上一点倾斜，大小排版对比，再把元素变黑白，透明度降低融进白色，背景搞定。

2.图标  图标之前更新过一版，所以直接用，但是就这样放上去又有点太单薄，所以用了主题邻近色做了两个底色在下面，即增加了图标的耐看性，而多色也暗示我们平台游戏的多样性（我们是做游戏的）。

3.字体

这里指的是图标下面的字体，这个方法是我跟网上的一位大佬学的。

  老版的字体颜色用了灰色，排版没有，字体偏小。改版首先把字号变大，颜色用黑色（这里不是纯黑），首尾加横线装饰，悠哈社区四个字加上粗细对比，这样更有节奏。最后在社区两个字下面加上色块强调产品的属性，颜色和图标下面的颜色相呼应，不突兀，形状用了圆形和方形，同样也是对比差异，如果只用两个圆形或方形效果会差很多，就像这样：这就是对比差异的重要性。

4.按钮

  首先颜色换成现在的主题色，包括微信登录四个字和图标大小的调整，按钮上下距离与字体图标宽度要有一些距离，这样会更加透气舒适。老版按钮圆角说它是方的又不方，说是圆的又不圆，很模糊，这里我用了轻微的8px小圆角，这样看起来就高级多了。

以上就是今天的总结，希望可以给到大家一些学习参考。

Powered by Froala Editor