为什么你的个人中心总被怼「没设计感」 ？
个人中心是我们 UI 设计师最常接触的页面触点之一 ，如果个人中心都做不好 ，被怼那就没办法在 UI 岗位上混下去了，没设今天来看个人中心页面的计感案例 ，看看咱们同学是人中怎么优化的 ！
首先来看下优化前后的心总对比图 ：
一 、背景色优化
优化原页面时 ，没设可以先观察一下 ，计感整体页面使用的人中是绿色作为主色 ，但这个绿色太正了 ，心总不太好看 ，被怼我们可以把绿色色相调整的没设更靠近蓝色，同时让绿色的计感饱和度不要过高 ，避免大面积使用时过于刺眼 ：
二 、个人信息展示优化
原页面中 ，头像和右侧信息视觉比例失衡，头像过大，导致用户信息上下的负空间较多 ，整个模块看起来不够饱满 ，我们可以适当缩小头像，减少上下的负空间 ，让整个个人信息模块更饱满 ：
三、数据展示优化
原页面中的数据展示比较平 ，虽然有大小和颜色的对比，但对比还不够强 ，视觉效果可以更有冲击力一些 ，所以我们可以先把数字换成更有设计感的字体 ，然后选择比较粗的字重 ，并加大字号 ，和文案拉开层级 ，最后再把数据改的更真实一些 ，优化就完成了 ：
四 、活动入口优化
原页面中活动入口设计的比较普通 ，除了破形之外没什么层次 ，那我们应该怎么改呢？
我们可以想方法加层次 ，首先可以先把文案拆成两行 ，标题放大加粗 ，次要文案缩小弱化 ，这样文案就能有两个层级 ：
再把按钮的背景颜色改为黑色 ，增大与背景的反差，同时调整按钮大小 ，让按钮更突出 ：
卡片内部调整好之后 ，最后再给卡片上覆盖一层半圆切割的背景 ，加上一层投影，让卡片更有空间感 ，整个入口的优化就做完了 ，来看下优化的前后对比吧 ：
五 、动态卡片优化
个人中心展示的动态应该是用户自己发布的内容 ，所以卡片中的性别 、与其他人的距离这些信息都可以去掉 ，减少干扰，不同的卡片用背景色分割 ，去掉投影 ，让页面更清爽 ，最后再优化下间距 ，整个卡片的优化就做完了 ：
六 、导航栏优化
底部导航栏右侧的三个图标外轮廓都是圆形，我们可以把其中一个外轮廓改成方形 ，打破这种常规 ，让图标的变化更有节奏感 ：
再把未选中图标的灰色改为带有绿色色相的灰色 ，让图标更耐看 ：
最后我们再把底部导航栏的投影去掉 ，背景改成更通透 、更有质感的毛玻璃 ，整个导航栏的优化就完成了 ：
总结
来回顾下我们都做了哪些优化吧 ：
- 颜色尽量不要用太正的颜色 ，比如正红 ，正绿等 ，可以往相邻的色相偏一些 ，颜色会更好看；
- 负空间过大会让模块看起来不饱满 ，缩小头像的尺寸可以减少负空间的面积 ，让模块看起来更饱满；
- 加大对比 ，与文案拉开层级 ，让用户一眼看到重点；
- 层级不够的时候，可以主动增加层级 ，例如拆分文案 ，增加文案的层级；调整按钮颜色 、大小 ，强化按钮；增加遮罩和投影，增强空间感等；
- 用背景色分割 ，去掉投影，让页面更清爽；
- 把白色背景改为更通透的毛玻璃 ，让页面更透气 ，提升页面的品质感；
最后再来看下优化前后的效果图 ：
希望对大家有所帮助 ！
作者 ：菜心设计铺
个人中心是我们 UI 设计师最常接触的页面触点之一 ，如果个人中心都做不好 ，被怼那就没办法在 UI 岗位上混下去了，没设今天来看个人中心页面的计感案例 ，看看咱们同学是人中怎么优化的 ！
首先来看下优化前后的心总对比图 ：
一 、背景色优化
优化原页面时 ，没设可以先观察一下 ，计感整体页面使用的人中是绿色作为主色 ，但这个绿色太正了 ，心总不太好看 ，被怼我们可以把绿色色相调整的没设更靠近蓝色，同时让绿色的计感饱和度不要过高 ，避免大面积使用时过于刺眼 ：
二 、个人信息展示优化
原页面中 ，头像和右侧信息视觉比例失衡，头像过大，导致用户信息上下的负空间较多 ，整个模块看起来不够饱满 ，我们可以适当缩小头像，减少上下的负空间 ，让整个个人信息模块更饱满 ：
三、数据展示优化
原页面中的数据展示比较平 ，虽然有大小和颜色的对比，但对比还不够强 ，视觉效果可以更有冲击力一些 ，所以我们可以先把数字换成更有设计感的字体 ，然后选择比较粗的字重 ，并加大字号 ，和文案拉开层级 ，最后再把数据改的更真实一些 ，优化就完成了 ：
四 、活动入口优化
原页面中活动入口设计的比较普通 ，除了破形之外没什么层次 ，那我们应该怎么改呢？
我们可以想方法加层次 ，首先可以先把文案拆成两行 ，标题放大加粗 ，次要文案缩小弱化 ，这样文案就能有两个层级 ：
再把按钮的背景颜色改为黑色 ，增大与背景的反差，同时调整按钮大小 ，让按钮更突出 ：
卡片内部调整好之后 ，最后再给卡片上覆盖一层半圆切割的背景 ，加上一层投影，让卡片更有空间感 ，整个入口的优化就做完了 ，来看下优化的前后对比吧 ：
五 、动态卡片优化
个人中心展示的动态应该是用户自己发布的内容 ，所以卡片中的性别 、与其他人的距离这些信息都可以去掉 ，减少干扰，不同的卡片用背景色分割 ，去掉投影 ，让页面更清爽 ，最后再优化下间距 ，整个卡片的优化就做完了 ：
六 、导航栏优化
底部导航栏右侧的三个图标外轮廓都是圆形，我们可以把其中一个外轮廓改成方形 ，打破这种常规 ，让图标的变化更有节奏感 ：
再把未选中图标的灰色改为带有绿色色相的灰色 ，让图标更耐看 ：
最后我们再把底部导航栏的投影去掉 ，背景改成更通透 、更有质感的毛玻璃 ，整个导航栏的优化就完成了 ：
总结
来回顾下我们都做了哪些优化吧 ：
- 颜色尽量不要用太正的颜色 ，比如正红 ，正绿等 ，可以往相邻的色相偏一些 ，颜色会更好看；
- 负空间过大会让模块看起来不饱满 ，缩小头像的尺寸可以减少负空间的面积 ，让模块看起来更饱满；
- 加大对比 ，与文案拉开层级 ，让用户一眼看到重点；
- 层级不够的时候，可以主动增加层级 ，例如拆分文案 ，增加文案的层级；调整按钮颜色 、大小 ，强化按钮；增加遮罩和投影，增强空间感等；
- 用背景色分割 ，去掉投影，让页面更清爽；
- 把白色背景改为更通透的毛玻璃 ，让页面更透气 ，提升页面的品质感；
最后再来看下优化前后的效果图 ：
希望对大家有所帮助 ！
作者 ：菜心设计铺
