"救命！為什么你的個人中心總被開發(fā)懟『沒設計感』？

發(fā)布日期：2025-04-01 07:44:58 瀏覽次數： 945 來源：菜心設計鋪

个人中心是我们ui设计师最常接触的页面触点之一，如果个人中心都做不好，那就没办法在ui岗位上混下去了，今天来一个个人中心页面的案例，看看咱们同学是怎么优化的！

首先来看下优化前后的对比图：

1.背景色优化

优化原页面时，可以先观察一下，整体页面使用的是绿色作为主色，但这个绿色太正了，不太好看，我们可以把绿色色相调整的更靠近蓝色，同时让绿色的饱和度不要过高，避免大面积使用时过于刺眼：

2.个人信息展示优化

原页面中，头像和右侧信息视觉比例失衡，头像过大，导致用户信息上下的负空间较多，整个模块看起来不够饱满，我们可以适当缩小头像，减少上下的负空间，让整个个人信息模块更饱满：

3.数据展示优化

原页面中的数据展示比较平，虽然有大小和颜色的对比，但对比还不够强，视觉效果可以更有冲击力一些，所以我们可以先把数字换成更有设计感的字体，然后选择比较粗的字重，并加大字号，和文案拉开层级，最后再把数据改的更真实一些，优化就完成了：

4.活动入口优化

原页面中活动入口设计的比较普通，除了破形之外没什么层次，那我们应该怎么改呢？

我们可以想方法加层次，首先可以先把文案拆成两行，标题放大加粗，次要文案缩小弱化，这样文案就能有两个层级：

再把按钮的背景颜色改为黑色，增大与背景的反差，同时调整按钮大小，让按钮更突出：

卡片内部调整好之后，最后再给卡片上覆盖一层半圆切割的背景，加上一层投影，让卡片更有空间感，整个入口的优化就做完了，来看下优化的前后对比吧：

5.动态卡片优化

个人中心展示的动态应该是用户自己发布的内容，所以卡片中的性别、与其他人的距离这些信息都可以去掉，减少干扰，不同的卡片用背景色分割，去掉投影，让页面更清爽，最后再优化下间距，整个卡片的优化就做完了：

6.导航栏优化

底部导航栏右侧的三个图标外轮廓都是圆形，我们可以把其中一个外轮廓改成方形，打破这种常规，让图标的变化更有节奏感：

再把未选中图标的灰色改为带有绿色色相的灰色，让图标更耐看：

最后我们再把底部导航栏的投影去掉，背景改成更通透、更有质感的毛玻璃，整个导航栏的优化就完成了：

7.总结

来回顾下我们都做了哪些优化吧：

1、颜色尽量不要用太正的颜色，比如正红，正绿等，可以往相邻的色相偏一些，颜色会更好看；

2、负空间过大会让模块看起来不饱满，缩小头像的尺寸可以减少负空间的面积，让模块看起来更饱满；

3、加大对比，与文案拉开层级，让用户一眼看到重点；

4、层级不够的时候，可以主动增加层级，例如拆分文案，增加文案的层级；调整按钮颜色、大小，强化按钮；增加遮罩和投影，增强空间感等；

5、用背景色分割，去掉投影，让页面更清爽；

6、把白色背景改为更通透的毛玻璃，让页面更透气，提升页面的品质感；

最后再来看下优化前后的效果图：

希望对大家有所帮助！

優(yōu)網科技，優(yōu)秀企業(yè)首選的互聯(lián)網供應服務商

優(yōu)網科技秉承"專業(yè)團隊、品質服務" 的經營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！

優(yōu)網科技成立于2001年，擅長網站建設、網站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網解決方案。優(yōu)網科技提供PC端網站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網、微信商城、企業(yè)微信）等一系列互聯(lián)網應用服務。