最新APP项目设计总结

最新APP项目设计总结

概述

升学教育APP自上线以来,已为数以十万计的学员提供直播、做题等服务;但是一直以来只是作为满足学习的一款工具而存在。随着公司的快速发展及互联

网化,对产品的高品质和友好的用户体验也越来越重视;新产品的研发和老产品的升级也在齐头并进的进行着,而现有升学APP暴露的各种问题也让我们开

始考虑重构。

本次改版开始于2018年10月12号,将分三个阶段完成APP的改版和新需求的设计。

第一个阶段从学员使用最频繁的“直播”和“做题”两个主要模块开始设计,好包括了首页和学习计划的改版以及公开课、毕业预测等新需求的设计。近8个主要模块,共86个页面

第二个阶段对APP内的主要功能点进行改版,涉及登录注册、启动页引导页、修改密码、学习资料、我的工单、考前刷题、课后作业、报考查询和问卷调查等9模块,共93个页面

第三个阶段对APP剩余页面改版,包括学习记录、我的缓存、关于我们、成绩录入、报考录入等5模块,共32个页面

年前已经完成前两个阶段的研发,第三阶段的UI也已经设计完成。

此次改版是自上线以来第一次大改版,输出效果图数量200+

最新APP项目设计总结

改版方向

此次改版希望能够从视觉、交互两方面的升级来让APP更加互联网化、更加年轻化,界面的设计更加统一、扁平、现代,给人一种“简洁极致”的高级感;最终能带给学员更友好的学习体验。下面通过具体页面分析改版过程。

最新APP项目设计总结

一、视觉

通过大小、间距、重量等视觉手段来调整界面的层级和各元素之间的关系,让方便学员更便捷的浏览。

1.大小

通过调整大小,可以增大页面各元素之间的对比度 ,形成层次感,突出重要信息;从而避免用户的视觉疲劳。

最新APP项目设计总结
最新APP项目设计总结

2.间距

通过间距可以控制页面的留白,合理的留白不仅可以使页面更加简洁更有层次,还可以营造高级感、现代感。

最新APP项目设计总结
最新APP项目设计总结

3.重量

重量比大小更能强化信息的重要性, 通过字重可以有目的的引导用户的视觉;文字的重量和大小配合使用,可以使用户更有效的获取信息。

最新APP项目设计总结
最新APP项目设计总结

二、交互

本次改版在交互上也做了很大的优化,更便于移动端的操作;交互的调整主要体现在页面结构的变化上。

1.做题

改版前,答题卡、纠错、收藏、解析等功能分布在页面的各个角落,功能区和答题区混在一起,使页面看起来混乱,结构不清晰。

最新APP项目设计总结

通过调整之后,页面从上到下依次为答题区、功能区、答题卡;同时题目的对错直接在答题区显示,答错时自动显示解析,方便学员理解记忆;答题卡在底部,更方便学员操作,并且显示学员的答题情况。

最新APP项目设计总结

2.我的课程

改版前,直播课程跟直播轮次表述不够清晰,查看课程和进入学习以按钮的形式不符合移动端的设计语言,更像是PC端的表现方式,导致视觉中心被几个按钮吸引。

最新APP项目设计总结
最新APP项目设计总结

3.报考录入

改版前,选择报考科目和输入准考证号在同一个页面,而且准考证号输入框十分不明显,很容易忽略;复选框是单选框的样式,而且是红色;报考成功后的状态以标签的样式显示,标签一般是在标题下面做为辅助说明的,而报考状态在这里是最重要的信息,所以标签的使用在这个页面不是很恰当。

最新APP项目设计总结

调整后,把报考的功能放在右上角,点击编辑后,可以选择要报考的科目,在这个页面可以取消报考,在报考的按钮上显示已选择的科目数量;点击报考后提示用户输入准考证;报考成功后,在科目后面显示已报考的状态。这样每个步骤都很清晰,每个状态也很明确。

最新APP项目设计总结

4.登录页面

改版前,启动APP后直接跳到登录页面,完全是一个工具应用的模式,简单粗暴;作为一个互联网产品,我希望通过改版使登录体验能更专业化、品牌化、友好化。

最新APP项目设计总结

三、缺省页ICON

最新APP项目设计总结

四、页面欣赏

最新APP项目设计总结
最新APP项目设计总结
最新APP项目设计总结
最新APP项目设计总结
最新APP项目设计总结
最新APP项目设计总结



免费获得三圈儿课堂S币(积分)的途径:https://www.sanquaner.com/announcement/892.html


除非注明,否则均为三圈儿课堂原创文章,转载请注明本文链接。

本文链接:https://www.sanquaner.com/514.html

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论