网页设计 » 视觉设计 » APP为什么要改版?“百词斩”Redesign经验分享

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

发表于: 视觉设计. 评论
Sponsor

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

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

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

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

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

一、了解APP用途及特点

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

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

特点是:

1、网红背单词的APP

2、可以离线实用

3、0流量背单词

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

二、分析用户群体及需求

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

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

三、了解改版的原因

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

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

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

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

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

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

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

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

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

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

四、制定改版内容

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

五、确定设计风格

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

图标

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

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

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

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

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

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

解决方案:

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

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

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

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

字体

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

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

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

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

色彩

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

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

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

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

版式

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

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

卡片

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

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

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

六、体验升级

框架优化

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

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

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

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

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

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

操作优化

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

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

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

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

七、建立框架

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

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

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

八、组件库

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

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

九、改版分析

首页

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

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

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

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

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

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

解决方案

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

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

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

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

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

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

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

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

记单词

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

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

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

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

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

解决方案

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

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

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

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

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

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

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

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

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

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

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

单词详情

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

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

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

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

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

解决方案

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

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

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

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

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

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

复习

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

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

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

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

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

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

解决方案

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

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

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

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

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

发现

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

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

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

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

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

圈子

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

子的强社交性体现出来;

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

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

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

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

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

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

我的

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

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

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

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

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

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

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

深色模式

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

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

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

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

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

全部界面

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

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }