最近通过对公司教育云产品的设计进行改版优化，又加深了对用户体验的理解。主要解决了下移动端教学资源模块的一些遗留问题，并在优化迭代中进行深度挖掘，提升产品体验。

为什么说是遗留问题，因为初版效果图出来的时候就发现了页面的一些问题，并立即和负责此模块设计的可爱的妹纸沟通叫其优化了一次。尴尬的觉得还是有些细节需要优化，但是我又一时给不出好的建议，所以就把问题遗留了。存在备忘录中，这几天抽时间就来解决了一下。。{打脸}是谁说的时间就像奶牛，挤一挤总会有的。

在页面设计过程中，总结了一些经验与方法，今天想拿来与大家分享交流一下。

0. 背景简述

此次改版的教学资源是公司教育产品移动应用中主打功能模块之一，是以资源为中心的共享平台。

用户在教学资源中的主要行为包括：

• 查看和收藏
• 浏览文件列表
• 通过关键字快速搜索文件
• 筛选文件
• 预览文件等

1. 存在的问题

总体来说就是：默认字体较小，列表显得有些拥挤，操作略显复杂，所以针对此次改版的主要目标就是提高用户的使用效率。

改版前页面

2. 改后的优点

• 更便捷易用

资源类型这个条件是一个比较常用的选择，放在筛选条件那一列展现会不易看到全部内容。针对这种情况，我决定将它移动到顶部占用搜索栏的位置，类型可左右滑动来选择。并将搜索移到右上角位置。
此处图片，为展示的更为直观，便去掉了多余的文字，用以灰调调来展示。

资源类型固定在顶部

灵感来源：设计离不开思考，也离不开参考。移到顶部并采用横滑的操作方式也是参考了诸多APP才如此设计。所以此处必须给一张页面截图，部分包括优酷、掘金、慧慧、驾考宝典（学驾校的必备神器，用后才发现里面的产品还是做得很不错的，功能还是还很强大的）、手机浏览器百度页等。

参考截图

2.内容更突出

下方左图整个页面顶部bar颜色太重，太抢眼，进入内页首先就会注意到顶部，会干扰到用户快速的查看页面内容。并且列表页的内容过多、上下间距不够显得有些拥挤。

做出的调整有，第一、去掉顶部bar的蓝色渐变换成无公害的惯用白色，有时候品牌色并不一定需要整个应用的顶部都用到，就像QQ在聊天、好友动态、传文件到电脑等的页面都会采用纯色作为大背景，来突出页面内容，。第二、列表高度从之前的200px缩小到188px，上下间距由24px加大到32px。把列表高度由原来的112px调整到132px，标题文字由30px调整到34px，精简文件类型图标等等。

本着“内容为王”的意念，坚定的进行着优化~~

改版后的列表页内容更突出、更聚集内容

3.更简洁

图标优化：改版前的文件图标略显复杂，占用面积过大，图形比较复杂。也因为当时没过多的花时间设计，直接套用的教育云Web端的图形。所以决定对简化图形、强化图标本身的形状。之前是根据文件类型本身的颜色去定义颜色的使用，但是颜色太深，所以整体采用了较亮色值的颜色，更加容易识别。
精简列表内容，隐藏收藏、评论等不常用操作。

精简列表内容

4. 结语

这次的改版让我对产品有了更深入的了解，更好的懂得以用户为中心来设计打磨一款产品。也懂得了根据用户的反馈及自测后的使用分析，来更好的指导设计工作。采用极简的排版，让用户方便快速的阅读内容，提升了用户体验。

设计是一个不断优化的过程，需要设计师们深入到产品之中细细打磨，持续挖掘产品的可优化点，提升产品的使用体验。