恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

个人中心设计技巧与法则

原创文章 分类: 经验/观点 版权: 举报
1218 43 117 11
2020-08-06
20.7
编辑推荐

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


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


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

Destiny元

坚持是一种品格(微信:designer_destiny)

134粉丝/4关注

小有见解首页新秀话唠原创小生
哆啦盲盒图标全面认识与使用

Destiny元

Destiny元

坚持是一种品格(微信:designer_destiny)

小有见解首页新秀话唠原创小生

你确定要举报个人中心设计技巧与法则

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年08月06日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN