7

京东健康金刚区重构

 3 years ago
source link: https://www.ui.cn/detail/583769.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
京东健康金刚区重构-UICN用户体验设计平台
京东健康金刚区重构
138.6°
原创文章 / 经验/观点 / / 举报

2021-03-30



本文基于个人理解,欢迎交流



3681982.png一、前言

金刚区图标在整个首页设计中占据了非常重要的位置,图标同质化与层级不清晰导致用户无法快速的找到急需的入口,基于以上问题点,我们针对京东健康首页金刚区进行了概念版重构,使其更好的迎合了主要用户群体,在保证符合产品特性的同时增添了差异性,我们在这里将前期调研、图标设计过程分享出来,供大家参考。3681985.gif

二、互联网医疗行业特征

因为工作忙、看病难等原因,互联网医疗成为解决这一大痛点的“迫切需求”,京东健康用户主要是集中在一二线城市的中青年群体,这些群体对新鲜事物接受速度快、消费能力较高。3681996.png

三、用户画像

通过分析我们得出京东健康用户群体普遍集中30-39岁且19-29岁人群有上升趋势,发现用户对软件功能和质量要求高,希望快速安全的解决各类突发需求。3682004.png

四、竞品分析

为了更好的贴近行业,我们找到了在互联网医疗中比较突出的产品进行对比,提炼出行业共性并分析出不足点加以优化。3682007.png

竞品分析总结

通过分析发现主流医疗健康产品金刚区的问题:同质化严重识别度低、功能入口过多导致用户不能快速进入需要的功能入口。通过竞品分析,得出京东健康首页金刚区图标存在的问题和优化方向。

3682012.png

3682047.png

五、风格推导

情绪版

通过产品衍生出关键词,进而运用关键词推导出符合产品情绪的视觉图片,确定产品调性。

3682048.png

图标风格定义

3682050.jpg

灵感来源

图标设计贴近生活,避免用户认知偏差,减少用户理解成本,降低用户在首页的停留时间,从而快速找到自己想要的功能,我们做了如下的推导:

3682055.png

六、图标排序

通过数据调研和用户画像分析,使用十字交叉分析和席克定律对图标主次层级进行梳理,并站在产品和用户两个维度综合考虑,突出高频功能,提高查找效率。3682057.png

七、设计过程

多稿产出

为了更好的完成设计目标,我们进行了多搞件产出,从中选出最符合产品定位和用户需求的方向。3682061.jpg图标尺寸规范

在图标的整体设计中,遵循图标规范,利用图标盒子进行视觉大小及重心的统一,保持图标的透气性及容错性,避免图标切图的时候出现明显的切割痕迹。3682093.png

图标拆解

最终稿设计采用内阴影配合描边反光效果再利用高斯模糊体现出轻拟物效果,贴近现实光影,在保证符合产品属性定位的前提下提升了设计的差异化。3682098.jpg

视觉展示及应用场景3682104.png

3682105.png

八、颜色可用性走查

图标的业务性质是否符合色彩情绪?3682106.png

经色彩情绪走查,图标的业务性质符合色彩情绪。

整体色调在视觉上是否平衡?

3682117.png

经色调视觉平衡走查,图标区颜色饱和度范围≤30、颜色明度范围≤5;整体色调视觉平衡。

图标色彩是否适合视觉障碍用户阅读?

据统计,患有色觉识别障碍的人群占比1.8%,作为一款面向大众的医疗类产品,在提升普通用户使用体验的同时,也要尽量满足有视觉障碍的用户,使产品更加贴心与人性化。

3682125.png针对色觉识别能力较弱人群,模拟出三种主要色觉障碍下的图标色彩,保证视觉障碍用户阅读图标时能清晰辨识。

九、数据复盘

改版后分级区分明显,把操作频次最高的入口优先排序,图形贴近功能,方便用户快速找到自己想要的功能。根据图标查找测试,检验图标改版后用户使用效率。

3682139.png

十、总结

历时20多天,通过这次合作对整个项目的前期分析、中期设计、后期包装,从多个纬度对产品进行优化,最终产出文章,感谢小伙伴们的努力。

3682188.png


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK