如何系统的进行改版设计（下）

我们可以结合竞品的优点来进行我们的卡片设计，最后得到下图：

不过这只是自己主观针对视觉问题来做的优化，我们解决了颜色花哨抢眼及标签样式繁琐的问题，但实际工作中你还需要结合需求方的要求去进行调整，在这个过程中，沟通方式比较关键，恰当的沟通可以让你和需求方成为共同解决问题的战友，而不恰当的沟通方式也许会让你们成为互相排斥的敌人，所以很多时候心态和处事方法更加重要。

2.2 图标颜色花哨、风格陈旧

你也可以按照上面的步骤来进行优化，只不过说起来容易，真的想做得好还是需要经验的沉淀、审美的提高，只有不断地练习，才能做的得心应手。

由于工作内容不能拿出来分享，所以改版的图标都是临时在网上下载直接用的，大家可不能这样做哦!

虽然是下载的图标，但是基本的问题我们已经解决，例如视觉大小不一致，图标颜色过于抢眼等等，如下图：

优化前

CFDK4xBd1Y5ibW4Yuw/0?wx_fmt=png" data-ratio="0.6346863468634686" data-w="1897" src="http://upload.chinaz.com/2017/0417/201704170915246495.jpg" data-fail="0"/>

优化后

LOLEavLH4aHrWFbh0Rsl3qksL24icEfk6jUPpShyOibQGPmtU5NO6g/0?wx_fmt=png" data-ratio="0.6346863468634686" data-w="1897" src="http://upload.chinaz.com/2017/0417/201704170915247587.jpg" data-fail="0"/>

如果是刚入行的朋友，建议可以先从模仿，借鉴开始，因为如果没有经历过大量的临摹做基础，直接就想创新，是很难做到的。

但也不能照搬抄袭，这个度一定要把控好。

3.信息层级类问题

这一类问题为什么要单独拿出来说呢?

因为层级区分不明显是导致页面没有主次、混乱的最重要原因，我们在做设计的时候，一定要随时提醒自己，哪个是最主要的，哪些是次要的，当什么都重要的时候，也许做出来的效果就是什么都不重要了。

说几个例子：

1.布局层级问题

上图让我觉得重点是个人信息和 5 个图标，但其实最重要的是课程导航，针对这个问题，我们可以：

(1)隐藏个人信息，将其收在导航栏头像里面，鼠标经过时展示即可

(2)弱化图标(例如：使用线性图标或降低图标颜色的饱和度等)

最后得到结果如下图：

2.2  文字层级

我们的卡片标题与辅助信息对比不明显，解决方案就是加大标题，弱化辅助信息，最后得到结果如下图：

以上就是今天分享的内容，希望在思路上能给大家一点启发，菜心的说法不一定对，不过你可以用来参考，取其精华去其糟粕!

最后看一下改版后的首页界面，如下图：

(部分截图取自网络)

对了，为什么上一期的栅格问题没有说呢，因为栅格系统是一个很大的知识点，打算下一期单独写一篇来和大家分享，这回不留言我也写，哈哈!(你要非留言我也不拦你)

文章来源：菜心设计铺

注：相关网站建设技巧阅读请移步到建站教程频道。