个人中心设计的五大要诀！——背景篇

前言

个人中心作为 app 内仅次于首页的 tab 流量入口，重要性自然不言而喻。因而我们在设计时经常迷惑，纠结如何使页面更加合理，实用。

而个人中心设计中最难的就是页面背景的选择，背景往往奠定了 app 的基调和整个页面的信息排布。

那么我们应该如何设计个人中心背景呢？

在经过多重分析之后，我总结了五种背景设计方法和大家分享一下。它们分别是：用户自行上传、根据头像变化、根据用户等级、固定背景、无背景。

1.用户自行上传

用户注册登录后的 app 个人中心通常会提供一张默认背景图，用户可通过个人设置或者直接点击背景图来选择图片替换。

设计特点：

用户可根据个人喜好选择背景，提高了用户的参与度。同时这种设计方式突出了头部的个人信息区域，优先级相对高于下方的功能入口。

2.根据头像变化

根据上传头像的变化而变化，通常会使用虚化头像，然后叠加白色蒙层或者黑色蒙层的效果。

设计特点：

背景根据头像变化，这种设计方式使页面色调、风格与头像统一，整体相对和谐、不突兀，不容易出错。同时背景颜色的改变，也能将个人信息区和功能入口区分开。

3.根据用户等级

根据用户等级升降或者是否购买会员而更改背景颜色，意在打造用户之间的差异感。

左图是京东的 PLUS 会员，颜色从常规的红色升级成尊贵 vip 的黑金色 ；右图是淘票票的白银会员，根据消费背景会从青铜会员-白银会员-黄金会员-黑钻会员，不同会员享有不同权益。

设计特点：

提升了高消费用户和付费用户的尊贵感，同时意在为会员营造更优质的环境和更贴心的服务。

4.固定背景

固定背景，顾名思义就是不提供用户修改的入口，app 内部提供默认背景。

a.颜色背景

颜色背景是我们最常见的背景之一，各种纯色渐变色的 app 多不胜数，有时还会叠加几何图形，底纹等装饰。

左图是美团外卖的个人中心页面，使用了 app 的品牌黄色，点缀了外卖相关的元素；右图网易考拉也使用了其 app 的品牌渐变色。

设计特点：

使用主题色，让品牌概念在个人中心再一次得到强化，提高用户对于品牌的辨识度。颜色背景最大的特点是可以根据运营活动作出定制化头部，例如618大促，双11购物节等等，和首页的主题紧密相关。

b.卡通背景

卡通背景较少出现在日常 app 中，卡通形象受众用户相对较少，使用不当卡通背景会给用户带来低幼的感觉。

设计特点：

使用卡通形象，可以突出 app 的可爱调性，加深用户对品牌形象的认知。同时用户在使用的过程中，心情相对而言会轻松、愉悦一些。

c.图片背景

图片背景使用了一张固定图片作为背景，通常作为衬托，展示上相对比较弱化。

设计特点：

使用背景图片可以突出 app 的类别，烘托氛围，给予用户沉浸式体验。例如美图美妆，使用了女性最爱的粉色配以马卡龙作为背景图片；蚂蚁短租则使用了室内的家居图，体现 app 作为旅游住宿平台，立志让每位房客体验到家感觉的决心。

d.动效背景

动效背景我们以唱吧 app 为例，渐变背景从蓝色到紫色，再到红色的渐变。

设计特点：

虽然说渐变色背景现在比较普遍，但是动效渐变却能第一眼吸引用户注意力，能够让整个场景更加时尚，多变。

5.无背景

无背景也是我们最常见的背景之一，搭配用户信息和功能入口，整个页面干净整洁。

设计特点：

页面整体干净简洁、弱化了头部的用户信息，从而突出页面其他功能。例如左图的马蜂窝，强化了“记录你的旅行”功能；右图的闲鱼页面功能重要性相对平均，就突出了页面下方的发布按钮。

个人中心设计中最难的就是页面背景的选择，我们需要自设计的时候先了解整个页面中各元素的重要性，哪些需要突出或者弱化。

然后根据上述得到的结论，针对不同的页面选择不同的设计方式，有下面5种方式最为常见：用户自行上传、根据头像变化、根据用户等级、固定背景、无背景。

以上五种常见背景设计方法，只为给大家在设计时提供一些帮助建议，希望大家能根据使用场景选择最合适的。