从整理看视觉设计（网易云课堂我的学习中心－微专业视觉优化）

此文已由作者张玲滢授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

最近又重新看了《佐藤可士和的超级整理术》，这本书介绍了在信息处理阶段的一些思考方法。从实物整理、信息整理、思维整理三个层面阐述了这一思考方法和其自相似性。 思维整理和实物整理在方法上没有太大差别：分类，排列，删减，根据自己的需要重新把他们放到合适的空间。自认为没有办法把生活过得像他那样井井有条。但想学习面对需要解决的问题时，如何在各种复杂混乱的信息中，把重要和关键的信息梳理出来，最终得到一个满意的问题解决方案。

整理术中讲到了几点方法论：1、明确具体的目标  2、根据关联性对所有资料进行分类  3、确认并保留重要内容  4、排除无用以及关联不大的部分。那么如何运用到我们平时做视觉稿中呢？我尝试着去做了，虽然还不成熟，但是感觉会比以前考虑更多面对问题时的处理方式，有新的领悟。个人认为最难的在于舍弃和推翻固有的思维重新组建。

以下分享一个我在设计云课堂我的学习微专业模块视觉样式的一些心路历程吧～下图是我的学习微专业模块改版的交互稿：

拿到交互稿之后我开始逐步分析：

1、明确具体的目标：微专业作为成体系的课程组合，在添加后被分散成单课后加入到“我的课程”中，使这些课程之间的联系丧失了。因此希望微专业可以作为一个整体被加入到“我的学习”中，保留组合课程所有的逻辑联系，同时也减少“我的学习”中的无用信息，减少用户的筛选成本。

2、根据关联性对所有资料进行分类：根据交互稿中的信息提炼了页面需要呈现的内容

根据内容，对交互结构进行了优化，把所有的元素根据整体网站的风格和网格，合理的分布在页面中。根据线上真实数据，舍弃了交互稿中轮动展示课程的体验，把课程全部铺出来，方便用户一目了然的看清楚需要学习的课程。

从而有了第一稿视觉稿（如下）：

做完之后我问自己，好吗？满足目标需求么？所有的元素都是必要的吗？页面设计可用性高吗？……

我重新审视了最初的目标，“微专业作为成体系的课程组合，在添加后被分散成单课后加入到“我的课程”中，使这些课程之间的联系丧失了。因此希望微专业可以作为一个整体被加入到“我的学习”中，保留组合课程所有的逻辑联系，同时也减少“我的学习”中的无用信息，减少用户的筛选成本。“策划反复强调了” 为了促进学习，要有升级打怪一样的体验。“

而我第一稿中，一是，虽然把每一门微专业包起来了，但整体感不够，没有微专业体系化教学模式的感觉，更像是一个课程包，一眼看到的还是单门的课程。二是，没有进阶性，没有促进用户学习的元素。

其实在整理的过程中我们往往只会做到前面两点：粗略的分析目标和分类已有的信息，而忽视了最重要的：确认并保留重要内容，排除无用以及关联不大的部分。

于是我重新梳理了内容信息：

1、增加了微专业的课程图片和减去了单课课程卡片，削弱课程的概念而增强微专业体系化的教学服务模式。

2、增加整体的学习进度，突出教学模式，激励用户完成学习。

3、卡片做了开课和未开课的区分，未开课中间的锁，增加游戏解锁的趣味性，同时也是突出整个微专业的学习顺序和进度。卡片课程标题字放大，突出学习模块，增加了学习按钮引导用户进入学习。进度条和整体进度统一，完成后用打勾的形式满足用户的成就感。

4、默认第一个展开，其余收起，为了提升用户沉静式的学习。增加了置顶功能，方便同时学习多个微专业之间的操作。

得到了第二稿，有没有好一点呢？可能还不够完美，但自认为比第一稿好很多。突出了微专业整体性和

在整体的过程中，不断地删除，不断的重组，不断地问自己“什么是最重要的”，可能是我们在遇到瓶颈时可以做的一些事吧～

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 django项目在uwsgi+nginx上部署遇到的坑
【推荐】 为什么我打的jar包没有注解？
【推荐】 如何从“点子”落地到“执行”？—完整解析1个手游传播类mini项目的进化