拒绝廉价感！5 招教你拯救平平无奇的界面设计

有时候你会不会拿到一张平平无奇的页面或原型，找不到下手优化的地方呢？

来看看这张界面优化前后的对比，也许会给你新思路：

下面我们分步拆解优化的知识点。

往期干货：

一、头图加持

可以看到优化前的界面承载的信息较少，只展示文字信息显得单调枯燥，没有冲击力。

这个时候我们可以加一张头图，使界面丰富起来：

注意，每个页面头图的最佳高度要根据页面内容来定，比如这个界面，头图和整个页面占比大致 1/3，保证了主体信息完整展示，在视觉美感上也比较舒适。

此外，选择一张符合行业属性的头图也很重要。

二、标题设计

对标题“妙语生花”的优化设计，主要是把黑体替换成更具国风气质的宋体；放大字号；居中排版；颜色呼应整体配色，并融入透明设计；最后是点睛之笔：传承符号。

一下子就感受到了国风气质有没有？

三、卡片布局

优化前下面的内容采用了比较老派的多重卡片嵌套方式，不够大气，过于平庸。

我们在优化的时候把信息层级拆分成 3 类：引导语，主题文案和操作区，如下布局对比：

优化前的界面带给人的局促逼仄感，有了很好的改善。

四、卡片设计

为了丰富视觉元素，我们给主题文案卡片增加了些细节：比如卡片加了投影、文字符号修饰和叠层设计增强空间感：

增加这些设计细节后的卡片是不是就不那么单调了？

五、毛玻璃材质

最后，我们将副标题底板做成毛玻璃材质并加入小图标装饰，给页面增加一点点质感：

注意，毛玻璃材质的占比面积要慎重，太多反而会扰乱视线。

最后，再让我们来看下优化前后对比图：

希望以后当你再优化一张平平无奇的页面或原型时，就知道从哪里下手了。