个人中心设计技巧

释放双眼,带上耳机,听听看~!

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

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

    大部分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

人已赞赏
交互设计

报班学习的人还有多少?

2020-8-12 20:56:59

交互设计

H5怎样更具趣味性?

2020-8-12 21:05:34

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索