UI 改版总是不如原图？这套组件重构思维你需要掌握！

周练的改版很多同学都没什么思路，只是在原有基础上做了一些小修小改，调整并不大。所以今天我们自己做个演示，分享适合你们这个阶段的设计方法。

一、改版的方式分享

改版是前期训练中除了临摹外最好的训练方式，可以快速提升UI水平。且不管你们有没有工作经验在作品集准备中都要做改版，因为真实项目往往会有非常多缺陷和瑕疵（比如广告放太多根本不适合展示），需要我们重新改版完才放进去。

而改版最基础的方式，就是围绕组件框架进行重构，然后再进行填图填色。

背后的原理就是组件的样式不会只有一种，不管我们看到任何组件都只是它呈现出来的其中一种结果，随时都可以把它替换成其它的样式，比如下面这些案例。

只要我们脑海里积累过足够多的组件样式，那么不管看什么样的界面只要你想都会挑得出毛病，可以从组件层面去替换出新的样式。

正所谓手里拿着锤子，看什么都是钉子。

所以改版的第一个着手点，就是围绕组件，把它们改成你认为更合理的布局样式，然后再去填充里面的色彩、配图、细节。

这个方式看起来很初级，但是并不简单，能不能做出有效的设计还需要应用到下面这些能力：

1. 基础规范和有效参数的掌握情况
2. 组件样式和布局的积累深度
3. 界面细节统一性管理的意识
4. 图标风格定义和绘制的能力
5. 相关配图选择和应用的能力

改版的结果可以反映你对这些能力的掌握情况，如果设计的结果还不如原图，那么就有必要系统去分析做的差得地方在哪里。

如果更进阶一点做改版，那么目标就不会只停留在组件框架的层面，而是要从产品、体验、业务、市场等多个维度入手去做 —— 系统分析。

这种做法虽然要求更高，但最终还是会落实到组件的设计环节中，因为你分析出问题并制定调整的方案，那组件大概率也会改动，最后一步还是进行组件的设计。

但如果不具备这种最初级的组件改版能力，那么即使你能做出非常有效的分析，最终动手能力也会跟不上自己的想法，输出的结果可能视觉效果比原图还差，那么不管你做了什么调整都不会太有说服力……

了解这个概念以后，下面就进入到具体的演示环节里。

二、改版的框架变更

首先我们看一遍原图，先理解这里面包含了哪些组件，都有什么作用。（没错，是我们上周的周练案例）

然后我们逐一去寻找每个模块组件更适合的设计样式。

首先是顶部的设计，包含了分页器、搜索栏、轮播图、操作图标，那我们可以按这个标准寻找案例，然后根据它的设计模式输出我们

接着做快速入口模块，这也是这个页面中最麻烦的一个模块，因为图标如果要换，那么找到整套适用的基本不可能，想要做好是离不开自己画的。

但我们先分析下里面的内容，第一行和第二行选项类型其实不一样，权重差异也不同，所以我们可以选择两行样式不一样的案例作为参照，上方结合封面图摆放，下方用基础一点的图标设计。一方面提高关键入口的吸引力，另一方面可以减少图标绘制的压力。

观念日历部分，做的调整不大，主要是整个组件卡片化，因为使用外置标题会和上方快速入口小标题有一定的冲突，同时我们也可以做个小调整，就是作为每天一更的卡片可以通过左右滑动来实现翻页。

之后最近更新模块，使用的样式变化不算大，但是每个章节增加在看用户太碎片，所以移除到下面做合并。

再往下的用户评论，虽然找了很多很“酷炫”的评论案例，但上下两个组件模块的样式都已经比较特殊了，所以这里要收敛一点，以微信阅读的想法卡片为参照，在下方添加读物而不是只放章节名。

底部节目上新模块，因为已经在很底部了，很容易被忽略。所以用了专题感更强的参考案例，来提升设计效果。

最后，底部导航的设计就很常规了，能很轻易找到更好的案例。

到这一步，我们就完成了框架的更新，实现了布局上的根本性变化，下面可以看看前后的对比。

三、改版的样式设置

框架确定了之后，就可以慢慢调节里面的样式了。而我们再把目光聚焦到原设计里，它的整体风格显然是想走传统国风，应用比较多的传统色调和宋体塑造“文化人”的那种氛围。

但风格控制得并不好，一方面是主色和辅助色的应用没有区分开，另一部分就是宋体应用是缺乏统一性的，这种风格适合使用锐角但又有不少圆角元素。除了风格外样式细节也有一些直观的缺陷，包括卡片的投影用的很局促，部分文本太浅难以看清，配图过于含蓄意图不明的问题。

如果你对风格情绪有更好的想法，可以推翻现有的做个新的方向。但本次改版我就没打算做这么激进的操作，直接选择更容易被你们理解的在现有基础上做改进的设置（即小改）。

首先我们先确定黄色为主色蓝色为辅助色，然后和品牌关联度高的元素上主要填充黄色，在价格、标签、链接等提示性元素上使用蓝色。

接着选择好宋体字体，然后确定应用的范围，我们固定成标题上使用，包括模块标题、下级书本的标题以及独立数字，普通正文部分不用。同时强化正文的显眼程度。

之后填充图片上，我们选择内容更清晰的封面，比如人物或是相关插画等，避免过度抽象的封面类型（毕竟不是冥想主题）。

之后，再处理其余的细节。比如给最近更新增加纸质的背景和折角的效果增加书面的质感，给搜索框、观念日历增加比较有空间感的投影，最近更新里面增加个内阴影等等（时间关系不加太多）。

这些优化完成以后，那么我们就可以看看最终的对比。

要声明这个改动离我们全力输出的水平还差很远，这是围绕你们现阶段水平制定出的最合理的练习方法。

尤其是之前做过这个改版的同学，应该非常清楚中间卡壳的问题在哪里，希望你们会有所启发。
只有这种练习做多了，你们才能积累出真正有效的思路，怎么从宏观层面出发来进行真正的独立设计。

结尾

做这种改版最容易出现“不如原版”的问题，这也极具参考价值的一点。那就是不管你怎么设计，只看图一定会有人有不同的意见，所以在真实项目中你要形成有效的设计思路去说服这些人。

即使在真实项目中，也必然会有推翻前面方案做改版设计的需求，届时不管你怎么看待前版，都得拿出新的设计，这就是你们不得不面对且具备的能力！

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」