“个人中心”怎么设计:背景篇

  • A+
所属分类:经验思维

本文来源: 颜川(公众号-海盐社), 共 1558 字

个人中心作为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种方式最为常见:用户自行上传、根据头像变化、根据用户等级、固定背景、无背景。

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



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: