在设计应用程序过程中,个人中心和个人主页很容易被混淆。个人中心是个人信息和功能的集合入口,通常叫“我的”,只有用户自己能看到。而个人主页是展示用户发布的动态等,其他用户可以看到。
很多UI设计师在做页面设计时都会有这样的纠结:这里要采用什么样式、什么布局呢?用在这里哪个样式更合适呢?做设计时想减少纠结的时间就需要平时长期分析总结,做多了自然就会明白。下面分享一些常见的APP个人中心界面设计案例,帮助你理清设计思路。
1. 个人信息的展示
个人信息区相当于是一个定位,用户进来首先需要看到的个人信息。其优先级最高,因此常常放在界面的开头。由于该界面的主要作用是强调功能入口和突出重要功能,因此不会使用大量的面积来对头部进行设计。
同时用很小的区域来展示头像信息,因此在个人中心中我们常常采用头像和信息左右摆放的方式进行设计,这样可以让空间展示效果最小,同时效果更好。
在设计时,个人信息区虽然受限于空间。但是由于功能区“太素”,因此这部分设计往往对其背景进行设计。这能起到视觉引导的作用,同时让整个界面更有层次感,背景可以加底纹、渐变、扁平化背景等。
当然,并不是所有个人信息都要设计得很紧凑。如果各种中心功能入口较少,为了版面更加丰富、视觉效果更好,也可以将这块区域设计得高一点,具体采用哪种方式从你的产品整体设计风格来定即可。
2. 功能入口设计
个人中心其核心模块其实就是功能入口,因此清晰、有层次的布局尤为重要,常见的功能入口有2种表现形式:列表式、宫格式。
•列表式
列表式是最常见的展现方式。其优势是层次展现清晰,灵活性高,方便信息后期扩展。其展现方式往往是图标+文字,图标主要根据产品整体图标风格而定。
列表式的缺点是,如果同级过多时,容易产生疲劳,视觉样式弱,视觉区分层级较差,只能通过排列顺序、颜色来区分各入口重要程度。

列表式的使用场景:多用于工具类和阅读类的APP中,不适合电商类功能模块较为复杂的APP中。
注意事项:当内容项过多时需要根据业务分类进行列表分组,将相关联的信息分为一组,让用户快速找到入口位置。
•宫格式
宫格式也就是将页面划分为若干相同的区块,相关联的可分为一个区块。其优势是可以强化功能操作,页面视觉效果更好。其缺点是在层次上不如列表式清晰简洁,会增加用户使用成本。另外不利于后期扩展,会出现一行只有一个功能入口的情况。

使用场景:由于宫格式的视觉效果好,可以强化功能操作。因此我们看到很多电商、外卖、团购、短视频等都采用该展现形式。同时对于一些功能入口较少的APP,采用宫格式也可以让整个界面效果更丰富。
注意事项:宫格式设计图标占比较重,所以在做图标设计时要多花一点心思。
3. 突出核心功能入口
每个界面都有它的核心功能,不会出现整个界面都是核心的情况。
尤其是当个人中心功能入口较多,同时还要加入运营等功能入口的时候。如果我们单独采用列表形式,会让整个界面过长。虽然层次清晰,但是视觉效果差,容易导致视觉疲劳。同时也不容易突出核心功能入口,那么我们可以怎么做呢?
•宫格+列表对比
将功能入口分为不同的模块,然后采用宫格式+列表式的组合方式来进行对比,能够很好的突出宫格里的内容。同时可以采用差异化图标、分块、以及差异化的颜色等来强调核心功能入口。

•差异化图标
采用差异化图标,也就是和原有的图标风格、大小等存在大的差异,这样即使同样的结构也能让核心功能入口脱颖而出。

•利用图片进行突出
图片相比于图标、文字是最容易引起用户点击的。因此如果你想特别突出你的功能入口,那么不妨试试采用图片的形式突出。

总而言之,在做个人中心页面设计时,UI设计师可以从个人信息展示区、功能入口设计和突出核心功能入口这三个部分进行思考设计。个人信息区的优先级最高,而重要性低,功能区展示需要结合产品及目标用户人群特点进行选择。最后对于突出核心功能入口可以采用列表+宫格对比、图标的差异化对比、图片的差异化对比等方式。