改版设计被人喷？来看看有效的改版设计思路！

往期干货：

又到了分享界面改版优化的时候了，这次是近期C端学员做的体育场馆预约平台，主要用于在线预约羽毛球、网球、篮球等场馆。

下面是目前的设计图例：

学员作业

还是老规矩，我们从原设计的问题入手，然后逐步完成对它的改版优化。

问题分析：

问题的分析从不同维度入手，这里分享个最简单的分析方式，先从基础样式分析，再分析组件设计。

基础样式包含规范、字体、色彩、图片四个要素的分析，而组件设计则是检查样式的合理性为主。

一、基础样式分析

首先基础样式的规范应用上，顶部状态栏和底部指示器、导航是没有太大问题的，所以我们可以直接进入下一个环节。

在字体应用上，问题就多起来了，主要还是特殊标题使用太多，且广告中的标题也和下方 UI 元素标题没有拉开差距，看起来就很别扭。而且大粗黑字体使用过多，使得信息权重被分散掉，没有对比性。

有问题的部分截图

在色彩层面，蓝色虽然是主色，但是使用过于频繁，且其它色彩的应用数量也过多，画面充斥了让人眼花缭乱的色彩，尤其色彩多的情况下图片色彩也丰富，外加一系列渐变色块，让场面变得更“错综复杂”。

使用的色彩过多

最后图片应用上，主要问题出在广告图里，图例和文字排版看起来很有年代感，加上瓷片区内的素材用图，和整体主体的关联性并不好。这里着重强调， 3D 拟人类图片素材的使用最好局限在特定运营活动物料里，不要作为正式的 UI 元素进行引用，怎么做效果都不会好。

二、组件样式分析

接着分析组件样式，因为这次案例框架很简单，我们不用太多考虑组件排序依据还是产品问题，只需要每个组件孤立出来分析即可。

1 .首页顶部组件

主要问题就是广告图的设计，不符合当前应用的设计标准，字体用图排版都很简单。

2.快速入口组件

快速入口上下两排权重完全不同，虽然有大小的差异但依旧对比不够强烈，且色彩使用混乱。

3.瓷片区应用

两个页面都有瓷片区，布局过于接近，且没有实质性的内容全是装饰素材，非常影响点击欲望和观感。

4.常去场馆卡片

属于问题相对较小的模块，但标签的应用色彩不合理，而且标题也露不全，实际空间利用率没有必要的低。

5.列表卡片

列表卡片的主要问题还是和主色按钮有关，过于强调按钮的同时又要突出其它信息元素，就让卡片看起来非常聒噪，信息之间是会起冲突的。

6.底部导航

底部导航设计过于普通，且一般选项选中凸起只适合在首页选项中使用。中间添加按钮的尺寸过小，和两侧选项看起来不对齐，重心偏移。

以上就是对问题的简单总结，实际上改版就是围绕这些问题做出调整，你先分析得出问题，才能聚焦到具体设计的过程和细节。

三、开始界面优化

基础规范是整体，而我们设计过程中大多从细节出发，所以我们对优化的内容解释就要反过来从组件开始。

1.顶部模块设计

首先调整顶部模块的设计，优化图例，使用比较突出的字体标题和更有冲击力的配图，符合运动类应用的主基调。同时因为之前主色用太多，这次顶部直接不加主色类背景。

2.快速入口的设计

快速入口设计上使用两种图标体系，上方用偏扁平插画型的风格（素材示意），下方用面性图标风格，弱化它们的权重。同时第二个页面的快速入口使用摄影图型图标，避免一直出现不同风格的图标。

3.瓷片区设计

瓷片区做大就需要有内容展示，但这些主体值得展示的内容并不是太多且需要那么大空间，所以缩小尺寸不会让设计那么难处理，也让画面更精致一点。

4.其它模块设计

因为首页上方已经有很花哨的模块了，所以常去场馆就不应该再花哨下去，可以务实点的设计，不再用复杂的外边框套娃。

第二个页面其它模块相对简单，拼团功能又重要所以可以突出它用包边型的组件设计。

5.列表模块设计

两个页面下方的列表模块，都移除原来主色的按钮，只保留关键信息，让卡片视觉看起来更简约和谐一点。

6.底部导航栏设计

放大中间的按钮，同时优化第一个选项选中的设计，可以更突出（时间够就做LOGO进去了）更强调选中。

完成这些处理以后，最后合并起来可以整体再调整一番进行最终输出。我们可以看看下面改版前后的对比，你们可以自己感受是否有差异：

这是纯视觉方向的优化，在新手阶段，不要过度去使用色彩和字体，实现样式的落差要通过组件样式和图片、素材应用的差异来塑造。

我们下篇再贱~

🔥我的新课《C端UI/UX 体验设计全能班》助力高薪就业！

1️⃣ 实战课程体系：从0到1掌握UI/交互/动效/AI设计，对标大厂工作流，手把手带你完成高质量实战项目

2️⃣ 超强就业辅导：专注输出高水平独立作品集，往期学员斩获美团、字节等大厂Offer，薪资涨幅可观

3️⃣ 保姆级服务：直播授课+无限回放，赠送完整课程笔记&海量素材库，享受老师1V1作业精细批改

课程原价5080元，秒杀价仅需3980元，投资自己就是最好的回报👉 https://pro.uisdc.com/