1. Sketch UI设计网——产品UI设计学习交流平台首页
  2. 教程
  3. APP设计

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

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

前言

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


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


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

原文始发于微信公众号(海盐社):个人中心设计的五大要诀!——背景篇

文章来自互联网,转载请注明:https://www.sketchui.net/3978.html

发表评论

电子邮件地址不会被公开。