APP“个人中心”设计案例分析

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

本文来源: 兔子(知识星球APP:我们的设计日记), 共 1731 字

什么是个人中心

个人中心是APP中所有功能点的集合入口,在这里可以查看个人资料、个人相关信息、以及其他相关功能界面等。是个人信息和功能的集合入口,我们通常叫“我的”,只有用户自己能看到。

常见应用

主流电商类APP应用

APP“个人中心”设计案例分析

电商类APP的个人中心页面通常有一个较重的头部,用产品主题的颜色(渐变色),背景元素等,凸显出个人信息。用较深色背景设计会员卡信息,引导用户始终能注意到该模块,引导用户加入会员。采用宫格形式将各个功能的入口展现出来,简单,层级浅,避免层级太深的操作。

宫格+列表形式的应用

APP“个人中心”设计案例分析

这类的模式在APP中应用其实很常见,宫格重点突出重要功能,列表用图标+文字的形式依次列出其他较不重要功能,通过排列组合,间距等分组,区分等。常见于工具类,阅读类,理财类等APP页面。

在侧边栏上的应用

APP“个人中心”设计案例分析

侧边栏是APP最常见的导航方式之一,很多必须但又不常用的功能导航都可以收缩在侧边栏里,不影响常规操作又能在必要时快速我到。将个人中心设计在侧边栏中,方便用户随时可以进入快速找到目标需求。通常都是左侧侧边栏设计,也有直接覆盖全屏,做为页面的形式而存在。这类设计,通常需要功能简单,层级不是很深的APP,比如工具类,打车软件,阅读类APP,旅游类,小众社交类APP等。

个人中心精选

APP“个人中心”设计案例分析

▲好在哪里

线条小清新,头部会员卡,放在个人信息顶部,小圆角,纯色背景,右侧用深色线条来凸显出二维码,吸引用户将目光聚集到此处,让用户能在第一时间找到二维码。采用宫格和列表结合的方式,突出了我的订单的功能,同时层级明显。

设计建议

运用场景:小众资讯类APP,高端轻奢产品APP,家居家具类电商等。

需要注意:直线色块和产品调性是否匹配,如何根据产品的性格来更改图形。

APP“个人中心”设计案例分析

▲好在哪里

极简风、简约风设计,大留白,直角设计,运用线条和色块分隔对象,栅格设计,色彩克制。用大字体,层级明显,一目了然。

设计建议

运用场景:杂志,工具类APP,轻奢大牌表单设计等。

需要注意:了解产品的调性,极简并不是全能的。又因为设计元素克制,对颜色,字体,栅格排版的把握要求更加严格。

APP“个人中心”设计案例分析

▲好在哪里

卡片大圆角设计,加之背景色,使卡片呈现外凸的视觉,区别于平直卡片的单一维度。头部色彩,使视觉重心停留在头部,加强头部信息的利用率。

设计建议

运用场景:相册,日历等。

需要注意:色彩的搭配,以及信息的呈现。

APP“个人中心”设计案例分析

▲好在哪里

通过区分白底和灰底的设计,拉开了整个界面的层次感。头部金刚区利用深色卡片,重点突出了数据。颜色搭配很清爽,信息虽多,但是整个页面看起来很干净,简洁。小箭头的设计方式更简洁,显得页面干净利落。

设计建议

运用场景:数据类型的APP,金融页面,运动数据等一些APP。

需要注意:多练习对信息较多的场景的各种表达方式。

APP“个人中心”设计案例分析

▲好在哪里

色彩:暗色主题设计

背景图设计使用了暗色主题设计,黑色和金色的搭配,在大面积的黑色背景下,更能突出金色部分的功能。用色少,利用色彩的明暗,来区别功能层级。

另外单色调的背景图,在暗色背景下隐约可见,高光处凸显了运动员的动作线条美,让整个页面更加有质感,同时符合整个APP“运动”的调性。

设计建议

运用场景:数据类型的APP,金融页面,工具类,小众电商类服务平台类,阅读资讯类等。

需要注意:色彩的把握,在暗色主题下对色彩明暗的把握。

APP“个人中心”设计案例分析

▲好在哪里

头部使用渐变的圆形“卡片”的样式设计,圆润,饱满,线条流畅,吸引用户的视觉焦点,同时右边的卡通设计(IP),即引入了品牌概念,让用户对品牌的印象更有亲近感,记忆力,同时平衡了头部的左右重心,使整个页面看起来比较协调。

APP“个人中心”设计案例分析

▲好在哪里

圆形元素:头部右侧运用了圆形(环)元素的背景,平衡了左边头像带来的往左偏的不协调感,让整个头部比较稳定,头像下面的阴影,把头像往外凸显出来,呼应背景元素,让整个页面更加有空间感,增加了趣味感。

设计建议

运用场景:头部元素较少的个人页面, banner,海报设计等。

需要注意:添加背景元素,应注意整个页面松弛有度,避免杂乱。

APP“个人中心”设计案例分析

▲好在哪里

渐变色图标,微质感,色彩

情侣恋爱日记的个人中心,色彩是偏浪漫的紫色蓝色,卡片区的成就icon,微质感,利用光影(高光),渐变,将扁平化的图标呈现出偏写实的风格,很形象。整个卡片在整个页面中很突出,引导用户对“恋爱成就”等级的持续关注度。



发表评论

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