写给那些对个人中心设计充满兴趣，或者正在被它难住的设计师们。     

    开始喽～满满的干货，收藏下来一定用得到。

    大部分UI设计页面时，个人中心的设计，往往大都是以弱化，简化的方式去做，只关注该部分的共同点，忽略本产品的差异性，因此，往往抓不住中心思维，导致个人中心分类混乱，用户使用体验差劲，用户留存率受到影响。

    文章大纲：

    一.存在意义

    二.设计思考（超重要）

        I.前期思考

        II.制定目标

        III.全局考量

        IV.数据验证

        V.总结思考

    三.设计原则

    四.风格设计（最重要）

        I.分类方式

        II.对齐方式

        III.排列模式

        IV.icon设计

    五.写给设计师

一.存在意义

    个人中心是软件所有功能点的的集合入口，流量仅次于首页。

    用户使用软件功能时，除其他tab亮点功能外，个人中心的修改编辑个人信息，查看线上行为信息，设置app通用功能，掌握线上活动，商城订单，联系平台方等等都需要通过个人中心tab进行。

二.设计思考

    个人中心的功能点分析，逻辑交互，分布排列，对比总结等，对于UI来说，和产品分析同样重要。

    这里囊括为五大部分：前期思考，制定目标，全局考量，数据验证和总结思考。在面对不同产品时，为了更快适应市场，不断的改进总结对产品的思维方式，是进步的不二法门。

    I.前期思考

    主要从四大方面入手：分析用户，功能信息，竞品分析和行业经验。

    分析用户：所有产品设计都是以用户为核心，前期市场调研数据分析，用户期望产品效果总结，目前行业数据和市场容量等范围类信息。用户群体年龄，职业，收入，性别等具体化信息，都会成为设计素材融入个人中心。这里只为了产品设计更贴切市场，服务于目标用户。

    功能信息：了解产品背景，运作方式；掌握所有功能点，x-mind可以实现。

    竞品分析：帮助判断该产品/服务在市场中是否已经被实现，市场表现如何，从而明确如何打造差异化的竞争力。

    行业经验：从横向和纵向了解行业，达到与专业领域挂钩，设计才会更容易被市场接受，对于设计产品价值体现尤为重要。

   看一下哈啰出行和摩拜单车个人中心设计：整个产品的设计完全从这四个角度考虑，由于行业背景的不同，产品结构，营销模式，风格设计方式均不同。

    挑几点分析一下：

    1.头像：哈啰出行登陆时，当通过绑定支付宝手机号，蚂蚁信用实名，后台数据可获取用户性  别信息，男女性头像不同；而摩拜单车则通过手机号登陆，需用户编辑个人资料信息，头像一直沿用老版工业设计 ，美观度较哈啰弱一些，但其目的是让用户更换头像，以获取用户更多信息。

    2.购买套餐或会员升级模块：相比之下，摩拜单车占用首屏近1/3空间，促进用户购买。

    3.出行记录：哈啰出行运用插画，直接展示。哈啰采取tab切换查看。

II.制定目标

    以提供用户价值为目的导向，做商业和产品引导。B站顶部常用信息外，开通会员做了强化导向，用户浏览痕迹和创作中心作为主要数据核心展示。

III.全局考量

    拆分功能点做量化分类，在此基础上根据商业性质考量和个性化创意设计。Google-GSM模型，就是一个可判断目标量化的信号指标，有兴趣可以细细了解一下。

这里以喜马拉雅用户登陆前后为例子，功能点的量化处理就十分明显。

登陆前：利用新人礼标签，7天vip领取，vip会员卡片引导用户

登陆后：出现等级，积分领取，弹窗，包括会员卡片信息都发生变化，做黏性处理和引导

IV.数据验证

    用户体验质量衡量/结果评估，推荐Google的HEART指标。它包含愉悦度，参与度，留存率，接受率，任务完成率这5个重要指标，可通过监控每种类型下更详细的指标看出结果。

    如何监控？一般产品研发上线前，会根据功能需求进行埋点采集数据，准确分析用户的线上行为。

V.总结思考

    个人中心设计完成后，设计师需要全局总结，这里只说几个角度，根据实际情况分析经手的产品：

    1.产品需求实现程度；  

    2.用户满意度； 

    3.设计创意；

    4.功能分类；  

    5.产品服务的市场价值。

    从这5大方面分析设计稿的使用价值就可以很全面了。

三.设计原则

    不同行业和受众的产品，个人中心设计的风格不同。但“高效+简单+特色”，是不可或缺的三大要素。

    比如电商类APP，用户留存和转化才是关键，因此积分兑红包、三单有礼、天猫超市卡等采用了banner图片的方式来进行突出，用更多优惠，提升留存率；金融类APP，用户参与度和黏度是重点，签到打卡，任务管理等，用来提高用户日活。

   电商产品太熟悉了，举两个差异较大的金融理财的例子，感受一下设计。

四.风格设计

从设计分析，对齐方式，排列模式和icon设计四个方面入手，一个个突破。

I.设计分析

1.对比：元素不同，产生对比方式则不同。如果两个元素或功能点完全不同，则产生的对比是截然不同的效果，目的是为了增强页面的表现效果，助于页面信息组织。

2.重复：目的是为了增强页面效果的统一性。比如：线条粗细长度，卡片圆角和大小，方格划分。

3.对齐：任何功能和元素都不能是凌乱和随意的，存在和表现一定有其重要意义，设计视觉的对齐，一定有一个基准线。

4.组合：有序的功能组合，文案统一，必然促进页面的整洁性，阅读性。

II.对齐方式

    对齐方式一般分为三种：左对齐，右对齐，居中对齐。而头部或个人信息部分是最能体现的，其他都是小模块根据设计分析结果做差异性对齐。

    当然，设计时，为了奠定巩固设计基调和信息排布，头部设计除了对齐方式的处理，纯色背景，渐变背景，插画背景，磨砂背景，图案叠加背景等等都被广泛运用。

    根据产品特性选择合适方式表现。比如：系统默认，为用户创作自主上传，打造用户个性化背景墙；在等级制度模式下，不同VIP等级用户背景不同，参考爱奇艺，优酷视频，腾讯视频等都可以很明了；根据产品前期定调，选择性设计纯色背景，渐变背景或图案背景装饰等......

III.排列模式

    主要也是三种排列模式：列表，宫格，分类分区。但大部分个人中心设计，为了增强多元化和设计感，采用混合方式是最常见的，也是最推荐在设计时考虑的。

    在简单便携性的app中，列表展示时足够支撑的，但就目前市面上app产品而言，多元化是主流的产品研发方向，设计师面对产品时，为更好表达层级和分类，混合使用是最佳表现手法。

IV.icon设计

    icon设计在个人中心的占比绝对是除文字外最大的，做差异化的图标，不仅可以稳定支撑原有风格，在同样排列模式下，核心功能也会脱颖而出，功能优先级往往可以得到更好的体现，以引导用户点击使用。

    现在我简单把它分成三类：面性图标，线性图标和异性图标，感受一下，有兴趣我可以下次对图标专门出一期详细讲解。

面性图标：一般使用在一级页面，增强视觉重心，表现力强

线性图标：页面展示时，视觉感轻盈

异形图标：识别性最强，区分业务模块，划分视觉层次

五.写给设计师

    以上是我对于个人中心页面的分析和思考总结，喜欢就收藏下来～～～在设计中多些理论和实践的支撑，说服性和实用性一定很耐打。

    1.知行结合，页面设计不单单是功能点的堆砌，更是对设计师把控全局能力的考验。

    2.针对不同的需求，页面设计的方式是百变的，但是优先级的展示，弱化功能的排列，一定有其规律性。

   3.多分析好的产品，对比自己设计，不断总结，一起加油吧！

点个赞吧，给个鼓励，比啥都要强～

Powered by Froala Editor