前言

面对线上的产品越来越多,逐渐产生了很多同质化界面.以及基础布局上的雷同.解决和了解设计中的同质化问题,是我们每一个设计师需要具备的能力.大声的说出来,我们不是执行层面的美工.下面文章和尝试是我们进行初次的探索.成长中的初次尝试.一起加油!

学而思网校是一款教育学习类应用，满足了家长为孩子选购在线课程、孩子在线学习课程、写作业、并与教师交流反馈的需求，亮点是大量优质师资和线上课程，通过直播授课的形式完成教学针对本产品的上课形态,用户-产品对使用、教师对产品对使用以及运行团队对整体使用和配合上.进行基本的流程构建针对我们产品的大众用户。

站在用户的角度帮助用户思考问题.合理的帮助用户解决 他需要的问题；我们对不同对人员和产品需要进行一个调研和走查。

本次分析选择了作业帮、猿辅导和有道精品课作为主要竞品，选择标准如下:

(1)应用市场排列靠前，体量较大，用户有主动安装的意愿

(2)发展较为迅速的，获得市场认可的产品，如作业帮、猿辅导

观察完线上的产品 我们对目前对产品进行一定同质化的分析与探讨从功能布局 视觉特征同质化 功能相似的三个模块进行分析与探讨。

2020 年流行的 6 大设计趋势，这些设计趋势也是伴随着外在关系一起存在的。比如 5G 来了，那么自然视频领域肯定是未来值得期待，这就是为什么微信公众号都开始流行小视频也是一个原因。硬件升级自然能支持更多的设计元素融入产品里面。

2.1留白设计

今年下半年观察到 Facebook 旗下的 Messenger 应用和前段时间雅虎更新他们家品牌语言的同时，也重新设计他们家所有产品。我们可以看到如下应用截图，基本去分割线，通过留白区分层级。这样的好处可以减少分割线对内容的干扰，界面呼吸感增强，达到简约设计的目的。

2.2苹果设计风格

苹果风一直盛行至今天，包括大圆角卡片设计、大标题、粗字体。苹果今年刚刚更新的 10513 设计语言同样的是增强了卡片设计。这种风格将会在 2020 年继续盛行，因此作为设计师我们更应该提前去对这种趋势熟练掌握。卡片设计作为承载内容的容器，其实更适用今天移动互联网的大方向，因为卡片可以作为一个容器封装复杂的内容，使得模块层级区分明显，适配性也是更强，更聚焦，来看下具体案例。

2.3 品牌渗透

为什么要说品牌渗透?Google 在系统设计语言里面增加图形特征模块，是什么？就是通过连接品牌元素到产品设计中。

到今天很多应用已经开始熟练掌握这种设计思路了，比如运用到图标里面或者界面设计中。苹果虽然没有很明确公开说明，但是我们可以从苹果家族设计语言可以看出，包括线下体验店、手机硬件、包装盒以及各种各种物料设计，都是一种白色语言设计风格。通过颜色与图形特征做品牌区分，苹果算是目前做的最好的，史无前例。那么这种趋势在 2020 将会一直保持。

2.4 网格化布局

网格化是一切设计系统的基础，Materials Design,Apple Design,IBM Design,Naver Design,等等这几家在设计语言基础上对网格研究与应用算是比较成熟的，Naver方形网格，Google的8px网格，IBM 2PX网格，苹果其实没有很强调他们家网格系数，其实我们可以细看他们的设计规范，已经提到8px Grid。因此网格化布局在2020将是非常重要的一个工具。

2.5 微动效

5G时代已经到来，加上目前硬件升级，动效的普及已经不再是难题。我们可以慢慢发现目前很多产品设计里面都开始加入动效，来提升产品体验，同时动效也有很强的指导性质。

在某些场景下，使用动效能够很好与用户进行互动交流，因此在2020年动效的使用将会越来越多。

2.6 包豪斯风格图形

几何图形设计是目前运用最多一个设计手法，今年发现一些比较抽象艺术化包豪斯风格几何图形，在UI设计中大量运用，且效果还不错。

这种图形带来好处就是记忆性强，应用广，它不仅可以拓展在品牌包装，品牌图形延展，还可以运用在UI设计中。

界面的同质化导致产品很难在众多竞品中脱颖而出。因此我们尝试从产品维度、用户体验维度及视觉维度三个方向进行走查，研究国内外产品逻辑，打破同质化走向，从而对学而思个人中心界页面进行改版。

产品功能既要满足用户需求，同时增加用户转化率，现有产品功能模块较多，增加用户使用成本，弱化非必要的模块，优化功能查找效率。如图所示：

改版后的功能层级呈现如下图：

对于用户来说，简约清晰的导航，能够让用户快速快速找到相应的功能，明白操作逻辑，迅速完成操作，获得良好的用户体验。

在目前学而思个人中心的界面虽然板块划分较为清晰，但作为主要功能的续报课程功能却不凸显，因此我们选择将主要功能的内容凸显出来，用户不必进入二级界面进行查看，简化了操作步骤。

3.3视觉维度

在视觉维度上，品牌化的概念是实现差异化的有效途径，例如MUJI的简约设计、苹果的大标题、卡片长投影设计，都让人印象深刻，形成品牌意识。在本次学而思个人中心界面的改版上，我们在页面的众多细节中融入了品牌IP形象，如默认头像、TAB图标、运营位插画等等。

4.1主色调定义

学而思本身的品牌色调是红色，在APP中的色值饱和度和明度都较高。虽然能很好的强化品牌意识，但红色也存在过于吸引眼球而导致功能信息被弱化的问题。在功能相对较多的个人中心页面，我们尝试重新定义页面颜色，使用象征自然的绿色作为页面主色调。

绿色本身是一种中性色，属于比较中庸的颜色，夹杂黄色则比较具有暖意，夹杂蓝色则偏向寒意，因此绿色的色彩性格更为平和、稳定。同样地，绿色是属于大自然的颜色，通常容易让人联想到生命、活力、生机勃勃等情绪。学而思目标用户为K12群体的家长和学生群体，绿色恰恰符合这一年龄段的产品用户色彩倾向。

另外，绿色能降低用户视觉疲劳度，营造出轻松、平和的氛围，增加阅读的愉悦感和轻松感。

4.2辅助色和点缀色

在确定主色调后，我们还需要根据产品的功能模块、排版等选择与之搭配的辅助色，在确定绿色为主色调后，我们选择了红橙色作为辅助色增加画面的色彩丰富度。

绿色+红橙色搭配，两者在色相环上互为对比色，视觉对比强烈，红橙色作为辅助色在绿色为主色调都的页面上，可以增加页面的活跃度，给人增加活力和积极的氛围。

另外，辅助色红橙色的使用，也符合功能色彩属性。

5-原型多稿试错

旧版问题分析：视觉层次不明显，功能不突出，查找功能耗时长，整体留白过多利用率较低。 

改版目的：提升屏幕利用率；主功能突出，提高查找效率；增加VIP卡片，提升开通会员转化率； 

 5.2原型多稿件对比 

在原型设计阶段，我们进行了三个方案的推导，一开始团队就给出了丰富的原型。在根据老师的建议和团队会议商讨后，在保有“脱离同质化”这一核心诉求的基础上，从实用性和设计感出发，重新完善并设计了多款原型，最终经讨论选择了原型三。

 原型三的特点，提升了屏幕利用率，信息层级清晰，呼吸感强，完善了结构分化和功能布局。在图标和组件的趣味性和交互性上有了很大的提升，提升了用户的参与感。

学而思的IP形象，以聪明好动的猴子为原型设计，名叫“爱豆(idol)猴”。IP形象为原本枯燥的网课学习增加了趣味性和品牌性，同时也拥有了更多的呈现可能和表现形式。

新版IP形象主体为绿色，绿色青春活力，体现了产品年轻向上的属性。 

这次设计，我们给“爱豆猴”增加了一副眼镜，增强了形象的记忆点和教育属性。面部表情换上了更具有感染力的笑脸，增加亲和力。主体颜色进行了微调，加入了渐变，增强品质感。整体形象传达给用户一种充满智慧、积极乐观、萌动可爱、进取向上的感觉。 

7-图标绘制

7.1 图标的品牌形象融入

图标icon根据各个功能属性提炼形态，融合品牌基因，使用品牌色及辅助色，提升品牌形象。提炼品牌，将学而思品牌色和形象元素相融合，提升品牌感，增加趣味性。

Tab bar 作为整个APP的第一触点，给用户传递的理念及信息在整个APP中具有不可替代的重要性。我们的第一感受是粗糙或是精致，都会通过这个简单的操作切换而得到。因此 tab bar 的设计，往往也检验着着整个APP设计是否精致的标准。

Tab bar图标动画的设计是多种多样的，包括有位移、划线、弹性、缩放、透明变化、抖动、填充等等，不同的方式表达出来的设计感受也会有差异。

图形延续圆角基因，让整个图标体系看起来更柔和，更圆润，更具亲和力，结合界面圆角卡片等元素，希望传达学而思的包容性。简化图标造型，用几何有规律的图形元素彰显现代感，结合升级的色彩体系，强化图形识别度和设计理念传承。

7.3图标的设计思路  

根据设计参考的分析，提取学而思的颜色应用思路，整体风格保持统一，设计上具有创意，凸显产品特点，融入爱豆猴的元素，更具有趣味性。 

 7.4图标的色彩焕新

色彩作为第一眼视觉，我们大量的应用了高饱和度渐变色，更加符合学而思网校聚焦“中小学生”群体的喜好，使图标能成为学而思界面上的点睛之笔，为产品氛围更添加一分活力。

学而思的标准字体是系统字体，无论是iOS的「苹方」还是Android的「思源黑体」，都拥有强大的字重系统，可以应用在不同触点中，满足页面中大部分信息层级的排版和信息可读性，在中文系统的设计升级中我们仍旧保留了这一标准，只在此基础上通过加大字号梯度和Light字重，来提升图文排版中的阅读效果。

其中变化较为显著的是，我们对英文及数字字体进行了字体升级。使用了系统自带的DIN alternate字体，相较于San Fransco的数字呈现，该字体更为清秀，精致，对于客户端整体气质的提升有很大帮助。

在对原型进行视觉设计的环节上，我们选择了三版主推原型，并进行视觉设计。这三版设计稿中，利用插画和微质感的融入，增强视觉时尚感和精致度。设置会员体系，增强用户粘性，提高屏幕利用率，增强模块吸引度，提升流量分发效率及品牌感，提高运营设计 效率。

所有设计图展示：

用户头像插画设计师准备了高中学生，初中学生和小学生的不同设计，为不同用户带来相应的个性头像。与此同时，我们的设计师为头像赋予了动效设计，明晰展现学习进度和用户等级。

个性化的头像设计，根据不同用户的身份为用户提供独特的头像形象。让用户在学习

的过程中趣味化更强。

会员卡不仅仅承载着支付功能，还可以获取更多福利信息和情感上的尊享感知，卡片气氛饱满品质感强，ICON颜色质感突出。

流畅的动效可以给人耳目一新的感受，让使用者感受到动效带来的愉悦性。从设计的角度来看，交互动效并不是锦上添花而是UI设计的必需品，它不应该被强调有或无，而应该被强调好或不好，好的交互反馈动效可以让整体的设计更加具有品牌调性。

为了让产品更有趣味性，可以在某些场合适当运用动效创造一些让人愉悦的动画效果。两点是需要注意的，一是动效时间要足够短，二是动效要足够流畅。这样做的好处是，中和了扁平的单调，在扁平风格和写实风格中间达到节奏的平衡。提升了页面的轻快感，学习不再是沉重乏味的，也可以像游戏和动画一样可爱活泼。

主界面：

邀请有礼：

一群心怀梦想的年轻人，有热血，有激情，为了共同的目标携手努力！在团队组长的带领下，对项目有规划有排期，我们的每个组员不管多晚都争取在排期内完成每一次任务！虽然过程是痛苦的，但结果也是值得欣慰的！

11.1项目排期

我们凭着对UI设计的热爱走到了一起，组成了一支有创意、有执行力的实力团队。这里，没有过多的抱怨和负面，只有知己相伴，共同成长.在轻松和谐的工作氛围共创价值，在梦想的道路上心照不宣。 

12-结束语

我们对学而思个人中心进行了最新趋势前沿的设计探索，从打破同质化的页面原型，大胆的配色尝试，结合最前沿设计风格的探索，最终把结果呈现出来。

综上，就是我们在学而思改版设计中融入的新探索和新沉淀，写下这些内容让大家更深入地了解我们在打破同质化产品中所做的努力和尝试，也希望能给身处行业中的设计师们一些帮助和启发，感谢大家

Powered by Froala Editor