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

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

UI前沿趋势探索之豆瓣个人中心页面重构

原创文章 分类: 经验/观点 版权: 举报
11250 216 366 34
2020-09-10
91.0
首页推荐

阅读需要5-7分钟左右,后面有视觉展示的部分,相关的部分还会持续优化。

前言

面对越来越多的同质化设计,我们重新去思考设计的价值在哪?仅仅只是为了做不出错的设计?只是为了跟随大众审美?还是为了彰显不同而不同?都不是,在保障产品可用性的基础上,我们为看到与众不同的app和它独特的交互而感到惊喜。

改版案例:豆瓣app个人中心页面

设计目标

个人中心的首要目标就是提高页面查找效率,

其次要减少用户的认知负荷,降低理解和操作门槛,并提升品牌感。

风格探索

明确了设计目标后,在设计前,我们便开始了对设计趋势、设计风格的探索,为这次的视觉设计做准备。

豆瓣是一个偏向于文艺风格的产品,因此在页面设计的过程中需要把控文艺类用户的心理特征,并在这个基础上进行设计。希望这次改版能更符合豆瓣自身的定位,吸引更多的年轻用户群体,提高日活量。

对于风格应该是一个难以准确定义的问题,因为设计服务于所需要表达的信息,会根据不同的诉求,选择最合适的设计语言和视觉元素来传达信息。往往一个设计作品会融合多种不同的视觉风格,有时它们又不属于任何风格。

以视觉传达为目的,风格服务于视觉传达。

观察发现,包豪斯风格在现当代依然十分流行,包豪斯思潮设计常常运用抽象几何图形,其思潮影响下的建筑顶部常常是半圆形状,很像一个字母D;其次比较流行的风格是运用毛玻璃,Microsoft广告常常运用这种风格,从而涌现了大量此种风格的追波概念稿,并受到广泛欢迎。

豆瓣现有个人中心页面问题

与此同时,简单的对豆瓣个人中心页面的问题进行了一次总结:

由此发现,页面的主要问题是缺乏品牌调性,没有赏心悦目的感觉,辨识度上有欠缺,在此基础上,规划出一个大概的设计流程。

设计流程

关于豆瓣

每天,豆瓣为至少300万活跃用户提供服务,并且用户量以一个很小的倾角保持每年增长。每当有新电影上线时,或者热门网剧被热议时,豆瓣评分会在很大程度上决定用户是否为这部作品买单。

许多热爱读书的人通过豆瓣分享思考的成果。越来越多的年轻人通过豆瓣小组和许多陌生人对话。很多人可能并不会每天打开豆瓣,但是却很难失去豆瓣。

在年龄上:

由图表可见,豆瓣的用户群体还是集中在20-29岁的年轻人当中,超过一半,占了67.5%的比重,其次就是30-39岁的人群,其他年龄段的总共占10.6%的比重。

在性别上:

豆瓣内容偏文艺,无性别倾向,因此男女占比持平。 

在地域上:

豆瓣使用区域占比沿海城市更高。推测原因,沿海经济发展较好,基建完善,人口集中,信息流通快,对接收多元信息的需求较强。

*数据来源:艾瑞指数

这些数据为运用何种年龄段、何种设计趋势打下了一定的基础。


寻找竞品

在找出了豆瓣原界面基本问题点后,我们与市面上定位较为相似的一些产品进行了对比。在做豆瓣的个人中心,其实不仅仅只是做这款产品的其中这一个页面,更不仅仅只是做好看,而是从整个产品、与竞品之间的不同点的角度上考虑。

没有争议的是这款产品和其他竞品是与众不同的,它有着自己的不可替代性。基本上没有一个同类竞品,能够把书影音评分,以及小组的功能,像豆瓣儿这样很好的融合起来。我们需要将它的不可替代性、为用户提供的精神价值、以及核心功能点在个人中心页面更明确,使用户更为方便的查找。比如知乎它不仅限于电影书籍音乐同城和小组讨论,知乎更关注的是宇宙的任何大大小小的问题。而豆瓣的专注性使得它的书影音同城、小组功能可以做的更加出色,可以体现在个人中心页面。

除了知乎,我们也对竞品简书、贴吧进行了同样的,产品分析层面、视觉风格上的研究。

简书/知乎/百度贴吧

确定页面功能

KANO模型分析


究竟什么功能要留下?什么功能要加上?什么功能要删去?哪些功能更重要?

由东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的方法,是本次改版的研究方法之一,以分析用户需求对用户满意度的影响为基础,体现了产品性能和用户满意之间的非线性关系。 我们最终得出夜间模式、我的小组、用户信息/个人主页/我发布的这几项功能需要做的明显些,而其他使用并不太频繁的功能可以相对弱化。

此次个人中心界面改版涉及一部分的体验优化,体验优化来源于KANO模型对需求进行分类和排序的梳理,根据KANO模型对需要改版的点进行分析。

WH场景分析

4W场景走查:什么人who、什么时间when、什么地点where、什么事情what;

场景分析=设计师的侦探思维=还原事故现场;

让我们更清楚知道用户会怎么使用我们的产品,明确产品目标 。

用户画像

当我们在讨论产品功能、用户体验、使用场景的时候,究竟是在围绕着谁讨论?我们把用户抽象成几个确切的人物,抓住他们的痛点,尝试深切的解决真实场景中的很多问题。

根据用户画像特点,以及产品偏文艺的风格,在颜色上我们选取较为明亮、鲜艳的绿色。

用户体验地图

从APP评价一条一条往下看,不难看出一些用户有着相似、共同的感受,结合我们自己使用这款软件想要吐槽的点,逐渐把心理过程透明化,详细刻画用户内心使用这款软件的感受,找到合理的设计机会点,这样做的目的是要让设计改版建立在使用软件真实感受的基础上。

用户不知道怎么选,想看、在看、看过一时间分不清,可能会成为用户纠结的主要因素。

这时候帮用户理清方向也许可以减轻用户的焦虑情绪。

改版方向

结合以上分析得出三个改版方向:

1、提升视觉精细度,让用户使用起来更加舒适。

2、增加品牌元素的融入,让人一看就知道这是那款产品。

3、优化页面交互,目前书影音模块的交互体验对新用户不太友好,存在不知道如何操作的困扰,但又不能过度的改变用户现有的操作习惯。

原型试错

为了使整个页面更加统一,让用户专注内容,减少理解难度,提升用户体验。

在这个基础上产出了三版原型:

第1版:图标区增加了一些功能,把原本的二级页面常用功能放到了一级页面,用户使用起来更加方便。

第2版:个人信息模块增加了书影音档案的统计内容和领取徽章,算是页面中的一个魅力型因素。

第3版:屏幕利用率更高,基本上一屏内可显示所有内容。

综合分析后,最终选择了第二版。

在内容框架的制定上,对原有框架的布局稍作调整,将夜间模式置顶,保留个人信息,重构书影音档案,重构列表流的排序,以提升书影音部分的用户点击量。

精简栅格,将原本复杂细碎的书影音操作区简化,方便用户操作。

调整屏幕的留白区域与间距,希望能达到更好的用户体验。

试错过程

针对最新的视觉趋势,使用毛玻璃的效果,背景选取了豆瓣的D字母进行背景的点缀,提升品牌感,书影音开启部分设计了不同的样式,而最新流行的的毛玻璃效果对于整个页面刚好显得不会很突兀,交互方面也在一步一步寻找更为舒适的交互体验。

书影音部分体验优化

看电影功能:

此部分功能没有做删减,但此部分内容与书影音合并,在众多影片中添加可看。提供片源,优化体验。

书影音记录的三种状态:

现书影音功能存在理解门槛高、操作复杂的问题,于是我们提供一种解决方案:

在看、想看和已看的状态功能智能排序,优先展示想看,其次是看过和在看。

最终定稿

视觉表现

1.提高用户决策效率

2.减少装饰给用户带来的干扰

3.可控的配色数目

4.空状态插画提示用户添加内容

5.和豆瓣风格相近的图标风格

文字系统

字体层级:在字体大小、粗细、颜色上做了区分,提升信息层级,提高用户阅览效率。

颜色系统

使用情绪板来分析文艺类用户的视觉偏好。整体色调都是偏清新淡雅的感觉。

豆瓣原有的绿色,饱和度和亮度都比较低,很难调动用户的视觉记忆,而且,豆瓣的主流群体是一群青春,文艺的年轻人,在原有的基础上做了颜色的微调和渐变,搭配上辅助颜色,让页面整体看起来更偏向于清新和年轻的基调。

层次分明

分隔明确,信息直观,提高了屏幕利用率,整体界面做了层级上划分,方便用户更清晰明了的查找信息。

改版之前只能显示部分的收藏内容,改版后的书影音板块,能更直观的看到收藏的类目。更方便用户点击。

改版前:收藏的图只能看到第一本收藏的内容,看不到之后新收藏的。不同类目信息一起展示会让版面看上去很乱,信息不清晰。

改版后:优化后相同内容能更多的展示,并且可以直接通过点击到相关支持播放页面;不同内容可以同时展示,方便用户切换方便。

间距

新版的书影音模块,采用大留白分割,页面呼吸感更强,相比于原版的模块分割方式,改版后的样式能让用户情绪放松,而且视觉效果更好。

 标签栏的间距也做出了调整,选到的标签放大加粗,并且改变了原本一条线的常规交互,与头部呼应的几何图形体现出了与其他产品不同的感受。

交互

改版前需要点开相应的类目(即-影视-图书-音乐)才能看到收藏的内容,改版后可以直接在当前页面看到部分收藏的内容,做到了交互减步长,而且在交互的过程中增加了趣味性。

图标设计

图标的风格起初是模糊的,只要是好看、流行,都想去做尝试,甚至是辨识度不太高的毛玻璃风格。确定了品牌色不做大的变化后,绿色的点缀会是一个很好的方案。改版前图标配色过多,整个界面给人一种很花哨的感觉,于是,开始适当的控制配色数目,并精简线条。单纯线性显得单薄辨识度不够,面性的话视觉比例过重,所以折中选择线面结合。

以下是最初尝试的三稿:第一稿配色较多,第二版风格较活泼,第三版线面结合比较而言更加规范,简约,符合豆瓣的品牌调性。

列表栏作为一个用户经常会使用的功能,他的品质感必不可少,同时在一定程度上能显示出整个APP的风格基调和品质。

采用线面结合的基础图形设计,用有规律的几何元素强化图标的辨识度。

适当加入渐变色,有明暗虚实的变化,这种轻量化的设计提升整个图标的品质感。

适当加入品牌色,加强品牌形象,为页面增加细节。

手持热区

大屏手机的普及程度还在快速增长,更大的屏幕正在重塑我们这个时代,尽可能的将常用功能往下排列,根据手持操作热区图,把经常操作的功能放在容易点击区,降低用户操作成本,提升用户使用感。

交互动效

对于交互动效的思考,参考了不少国内外优秀的交互案例,对于书籍影音类的APP,交互是其中很重要的一环,好的交互能提高产品的趣味性和品质感,既不能过于打破用户一直以来的操作习惯,又要清晰直观,因此采取的是滚动轮播的形式,用户不需要点击进入二级页,只需要在一级页左右滑动就可以看到大部分内容。

夜间模式

晚上是豆瓣用户活跃的高峰期之一,针对夜间场景使用痛点以及业界的趋势。夜间模式定位是希望更护眼舒适的为用户提供更人性化体验。和传统的白底黑字相比,这种黑底白字的模式通常被认为可以缓解眼疲劳,更易于阅读。不管是为了“不打扰身边熟睡的人”“还是为了“保护视力”,都是让屏幕整体的亮度和夜间环境更接近,从而减小对自己或他人眼睛的刺激。开启夜间模式,即使在凌晨两三点刷豆瓣,也不会觉得特别刺眼,给用户提供更完善舒适的夜间体验。

总结

两个星期的产出走了不少弯路,其中有许多不完善的地方,整个过程所经历的每个步骤都是经过了各种权衡思考和尝试得出的。欢迎大家指正,谢谢!



Powered by Froala Editor

推荐人:

UI中国
6
pony马腾腾

豆瓣是偏向Material Design设计风格的,你改完全是跳出整个豆瓣去改了。用色和图标着实得花功夫修改下。

精彩!

你确定要举报UI前沿趋势探索之豆瓣个人中心页面重构

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

0/200

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

点击上传附件

对谁可见:

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

您确认要推荐?

该作品发布时间:2020年09月10日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

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

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

投票

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

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

登录

账号或密码错误

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

登录

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