APP为什么要改版？“百词斩”Redesign经验分享

Sponsor

前言：想必UI设计师也接过客户的APP改版任务，当客户或产品经理列出改版需求后，又要怎样去分析和解决呢？今天以背单词APP“百词斩”为案例，为大家分享为什么要改版、改版需要注意些什么，以及它的解决方案。这是不错的APP设计复盘学习案例，同学们一起来学习吧！

这次百词斩的重设计，关于几个主要界面的改版，也是一次更深入的探索发现问题、分析思考到解决问题是需要长期积累和试错的积累。

改版设计一点不比从头构思一个产品轻松，都得从用户体验五个层面去梳理问题当然有考虑不周的地方，不过这只是一次个人的尝试，相对自由一些，不代表该产品官方团队。

一、了解APP用途及特点

百词斩是一款帮助用户背诵单词的APP，软件设置了中考词汇、高考词汇、六级词汇等一系列词典，用户可以选择词典并制定学习计划以决定每天背诵的单词量，还可以同其他人PK…

特点是：

1、网红背单词的APP

2、可以离线实用

3、0流量背单词

二、分析用户群体及需求

用户需求是复杂的，要了解他们是谁以及他们的需求是什么？

三、了解改版的原因

改版之前先明确一下进行改版的目的是什么，总体来说包含这两点:

1.视觉设计不美观，进行一次品牌升级，跟进新的设计趋势。

2.产品功能难用，体验不佳，重新梳理交互逻辑。

打开百词斩依次可以看到5个主要页面:首页、复习、小讲堂、开学季和圈子。

1.颜色搭配上，采用蓝色为主色，没有辅助色的运用，略显单调。整体页面灰色面积太大。

2.首页信息冗余，过多的不重要的信息堆砌在一起，导致层级混乱且影响用户浏览效率。

3.设计规范不严谨，导致页面各自为营，有很强的割裂感。

4.缺乏品牌调性，毫无设计感的产品气质难以给用户带来记忆点。

5.产品功能结构单一，缺乏可玩性。用户体验不友好，交互逻辑不清晰。

四、制定改版内容

五、确定设计风格

经过缜密思考的设计风格能反应产品的内在气质，此次通过图标、字体、色彩、版式、卡片这五个层面来构建—套拥有鲜明产品气质的设计风格。

图标

在图标设计上，原设计有几处明显的问题:

1.整体图标没有设计感，没有体现产品的气质;

2.线性图标粗细大小不一致，圆角也不统—;

3.面形图标尺寸太大，颜色单调，图形复杂且过于同质化;

解决方案：

1.提取品牌断开的视觉元素，运用到图标设计上，在每一个图标中也加入断点的处理，形成一套风格独特有品牌记忆的图标;

2.统一图标尺寸48PX和64PX，前者为线性图标（2PX)，后者为面性图标;

3.面形图标缩小尺寸，通过简单的几何图形，组合出简单清晰的图标。辅助色的搭配，让图标变得丰富生动。

字体

做为一个记单词的产品，文字清晰易读是基本的诉求。中文字体用系统自带Ping Fang，数字字体是兼具几何风格和人文情怀的Avenir。

大标题作为一种流行趋势，相比小标题，它更加醒目直观，可以快速吸引用户注意力。此次设计中运用留白安排大标题完美呈现出来。

色彩

原设计中饱和度和明度都不高的蓝色略显陈旧，此次设计中重新进行了色彩搭配，同时以蓝色为主色下调配出两种邻近色作为过渡色，让色彩搭配变得丰富鲜活。

60%主色用于主要操作按钮及主要信息设计上，30%辅助色用于图标插图设计上，同时，界面用色中远离纯黑和纯灰色，在黑白灰中都加入了与主色调一致的低饱和度蓝色，让界面看上去柔和自然。

版式

版式上采用更加轻量化的设计，去掉所有分割线，仅通过大间距和文字的对比来构建清晰的视觉层次。去除与内容无关的装饰性元素，突出内容本身，提升浏览效率。

卡片

原设计虽然也运用了卡片式设计，不过在信息区分上并没有发挥出卡片的优势;此次设计中充分发挥了卡片设计的优势，有效组织重组了混乱的信息，避免分类不清晰的状况，

让界面呈现出干净整洁的视觉效果，给用户一个清晰的视觉层次。同时悬浮的卡片可以吸引用户注意力，也增加了页面的精致感。

六、体验升级

框架优化

对产品结构和功能分析整理:

1.把小讲堂和周边合并为一个TAB——“发现”。小讲堂主要内容是关于学习英语的延伸内容，周边是关于百词斩的周边商品，尴尬的是点击TAB直接跳转到淘宝，没有形成一个商业闭环，体验上也导致操作中断。

这里把周边产品直接提升到一级页，有效增加产品曝光量，用户点击更多可进入完整的商品分类列表。

2.把个人中心入口移至标签栏，依然保持原来5个主页面的结构。随着大屏时代的到来，手机尺寸的变大让单手操作变得更加吃力，左侧边栏的操作要慎用。

操作优化

1.将主要操作的功能放在屏幕下半部分，可以帮助用户轻松自然高效的进行操作，提升用户体验;

2.配合IOS手势操作，在屏幕左侧边缘向右滑动可以让页面返回，在部分类似模态页面，从页面顶部下滑也可以返回上一页;

3.底部浮动按钮方便用户点击，鼓励用户进行操作，在圈子页面就将浮动按钮居中放置，扩散阴影将按钮从背景中脱离出来;

七、建立框架

网格系统是为页面信息排版而服务的，在APP设计中，合理利用网格系统让界面的信息结构非常清晰明了。

新设计中，以8为最小单位，全边距为48，列间距为32，标题下间距为24，文字行间距为16…简单的规则让界面看上去干净整洁清晰。

八、组件库

组件的强复用性为设计效率提供了有效支撑。一个完善的设计系统在产品之初就显得尤为重要，可以为后续开发升级提供理论依据。保证多人协作效率，保持产品体验的一致性。

九、改版分析

首页

1.原设计在排版布局较混乱，层次不清晰，过多的不重要的信息挤满了各个角落，导致页面非常零碎;

2.卡片圆角不一致，按钮尺寸大小不一，小按钮形状与主按钮视觉不一致;

3.整个页面偏灰，背景色和前景卡片都是灰色，大面积的灰色使得页面毫无生机;

4.字号过多，导致页面凌乱，主要数字字体太普通;

5.图标按钮文字的描述累赘多余;

解决方案

1.页面内容信息重新组织安排，把不必要的功能去除，化繁为简。学习计划放置在导航栏，根据使用场景，昼夜切换需求更主要。原有的搜索和日历变更为搜索和昼夜，方便用户切换;

2学习进度图表化，显示一周的学习状态，滑动可查看每天的学习成果。原的下载单词包收进单词表里;

3.今日学习计划的信息有点重复，删除减轻页面信息过载;

4.规范卡片和按钮尺寸，间距，统一圆角大小，控制字号级别;

5.背景用带有蓝色调的浅灰色，卡片白色，整体干净简约;

为了方便操作，图表滑动触摸区域宽度为88PX，也是IOS最小可点击范围。

记单词

1.返回首页的按钮被周围的信息淹没，不仔细看不知道从哪里返回;

2.头部信息太密集，显得很拥挤;

3.单词图片选中效果不明显，还没看清选择项就跳转下一个了，同样的问题还有单词列表;

4.底部灰色按钮感觉不可点击，也没有点击态，间距太近容易误触﹔

解决方案

1.把返回按钮放置在页面底部左侧，单独用蓝色背景，更醒目，提升用户体验;

2.重新布局页面顶部辅助信息，保持页面整洁;

3.单词图片选中叠加黑色半透明遮罩，加上微动效稍延长停留时长;

4.单词列表选中文字变色，蓝色为选对，红色为选错对勾也同样颜色出现;

5.底部按钮加上白色背景，调整间距，增加点击态度;

单词详情

1.原设计过多的分割条严重切割了整个页面，导致界面看上去非常零碎;

2.这个页面主要是看单词解释，太多的信息干扰了视觉浏览;

3.如果页面过长，在最底部的添加笔记就会挤到下一屏，增加了交互成本;

4.右上角的收藏功能位置太远，不方便操作，报错文字按钮太突兀;

解决方案

1.去掉分割条，调整列表内容间距，无框化设计使得界面干净整齐;

2.把不重要的信息折叠，保持页面简洁清爽，优化排版布局;

3.把单词笔记和收藏统一成记单词页的样式，更方便操作，保存按钮融合到键盘里;

4.优化操作体验，页面以模态视图呈现，页面下拉即可返回单词页，也可以点击继续做题返回单词页;

复习

1.原设计卡片间距和全边距一样大，过于松散不紧凑﹔

2.栏目标题和卡片没对齐;

3.单词TV和单词电台栏目在这里出现有点突兀;

4.面形图标尺寸太大不精致，单色调搭配略显单调;

5.卡片信息排版凌乱，层次对比不清晰;

解决方案

1.规范调整卡片间距，让内容更聚焦;

2.单词他TV和电台栏目移至发现页;

3.图标重绘，统一为64PX，利用辅色改善图标的单调;

4.重新布局卡片信息，统一改为左对齐，保持一致;

发现

全新的板块，由原来的小讲堂和周边合二为一;原设计内容层级太深，导致一级页面可看性太少，浪费资源;

新改版主要栏目有单词TV、单词电台、英语延伸学习、学习专题以及周边等栏目的多样性丰富了产品内容，提升了用户体验;

圈子

1.原来的圈子由发现和好友组成，业务和视觉上都非常单一，没有把圈

子的强社交性体现出来;

2.兴趣小组，小班，单词PK这些活动层级太深，用户难以发现;

3.好友模块只能加好友看别人的学习计划，没必要放这么重要的位置;

我的

个人中心页是承载个人信息的集合，原设计存在以下两个问题:

1.个人中心入口在左侧边栏里，在大屏时代这样的交互变得难以操作;

2.列表灰色线性图标毫无特点，消失在背景里;

新设计通过结构框架的优化把个人中心入口安排在标签栏最后一个TAB，降低用户学习成本，将原来单色图标改为双色设计，调整列表内容间距，

延续卡片化设计，把列表归纳分组在卡片里，无框化设计使得界面呈现出一种极简的设计感。

深色模式

通过用户走查得知，很多用户习惯在晚上记单词，因此暗色主题在光线暗的环境中变得必要，减少眼睛疲劳，根据当前照明条件调节亮度，并在黑暗环境中促进屏幕使用–同时节省电池电量。

深色模式并不是直接用亮色反转，应避免出现纯白和高饱和度的颜色，会产生光晕引起视觉疲劳。改变颜色搭配，由600到200，不饱和的颜色更易于浏览。

全部界面

以上就是今天分享的百斩词APP改版案例，其中的很多思路都是值得学习的，若本文对您有帮助，请分享本文支持作者继续创作！

作者 | Fyin印迹
来源 | 站酷 | fyin818.zcool.com.cn

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。