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

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

设计目标

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

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

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

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

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

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

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

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

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

设计流程

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

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

在年龄上：

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

在性别上：

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

在地域上：

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

*数据来源：艾瑞指数

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

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

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

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

确定页面功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看电影功能：

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

书影音记录的三种状态：

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

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

视觉表现

1.提高用户决策效率

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

3.可控的配色数目

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

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

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

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

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

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

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

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

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

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

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

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

图标设计

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

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

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

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

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

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

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

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

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

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

Powered by Froala Editor