最近通过对公司教育云产品的设计进行改版优化,又加深了对用户体验的理解。主要解决了下移动端教学资源模块的一些遗留问题,并在优化迭代中进行深度挖掘,提升产品体验。
为什么说是遗留问题,因为初版效果图出来的时候就发现了页面的一些问题,并立即和负责此模块设计的可爱的妹纸沟通叫其优化了一次。尴尬的觉得还是有些细节需要优化,但是我又一时给不出好的建议,所以就把问题遗留了。存在备忘录中,这几天抽时间就来解决了一下。。{打脸}是谁说的时间就像奶牛,挤一挤总会有的。
在页面设计过程中,总结了一些经验与方法,今天想拿来与大家分享交流一下。
0. 背景简述
此次改版的教学资源是公司教育产品移动应用中主打功能模块之一,是以资源为中心的共享平台。
用户在教学资源中的主要行为包括:
- 查看和收藏
- 浏览文件列表
- 通过关键字快速搜索文件
- 筛选文件
- 预览文件等
1. 存在的问题
总体来说就是:默认字体较小,列表显得有些拥挤,操作略显复杂,所以针对此次改版的主要目标就是提高用户的使用效率。
2. 改后的优点
-
更便捷易用
资源类型这个条件是一个比较常用的选择,放在筛选条件那一列展现会不易看到全部内容。针对这种情况,我决定将它移动到顶部占用搜索栏的位置,类型可左右滑动来选择。并将搜索移到右上角位置。
此处图片,为展示的更为直观,便去掉了多余的文字,用以灰调调来展示。
灵感来源:设计离不开思考,也离不开参考。移到顶部并采用横滑的操作方式也是参考了诸多APP才如此设计。所以此处必须给一张页面截图,部分包括优酷、掘金、慧慧、驾考宝典(学驾校的必备神器,用后才发现里面的产品还是做得很不错的,功能还是还很强大的)、手机浏览器百度页等。
2.内容更突出
下方左图整个页面顶部bar颜色太重,太抢眼,进入内页首先就会注意到顶部,会干扰到用户快速的查看页面内容。并且列表页的内容过多、上下间距不够显得有些拥挤。
做出的调整有,第一、去掉顶部bar的蓝色渐变换成无公害的惯用白色,有时候品牌色并不一定需要整个应用的顶部都用到,就像QQ在聊天、好友动态、传文件到电脑等的页面都会采用纯色作为大背景,来突出页面内容,。第二、列表高度从之前的200px缩小到188px,上下间距由24px加大到32px。把列表高度由原来的112px调整到132px,标题文字由30px调整到34px,精简文件类型图标等等。
本着“内容为王”的意念,坚定的进行着优化~~
3.更简洁
图标优化:改版前的文件图标略显复杂,占用面积过大,图形比较复杂。也因为当时没过多的花时间设计,直接套用的教育云Web端的图形。所以决定对简化图形、强化图标本身的形状。之前是根据文件类型本身的颜色去定义颜色的使用,但是颜色太深,所以整体采用了较亮色值的颜色,更加容易识别。
精简列表内容,隐藏收藏、评论等不常用操作。
4. 结语
这次的改版让我对产品有了更深入的了解,更好的懂得以用户为中心来设计打磨一款产品。也懂得了根据用户的反馈及自测后的使用分析,来更好的指导设计工作。采用极简的排版,让用户方便快速的阅读内容,提升了用户体验。
设计是一个不断优化的过程,需要设计师们深入到产品之中细细打磨,持续挖掘产品的可优化点,提升产品的使用体验。