5.5 案例实战

设计之前

交互原型搞定之后，接下来便是视觉设计的工作。那么，如何进行视觉设计呢？

在之前已经做过竞品分析，但现在主要是视觉风格的参考和对比。

明显看出，大部分天气 app 都共同使用了文字+ icon 这样的方式去展现天气。这样的方式便于我们快速理解和获取信息。

针对温度或者天气类型，多数 app 使用了比较大而且醒目的文字。

从视觉风格来看，主要有以下几类：扁平化、拟物化、卡通化、真实图片。

首屏以较大面积去展示当前的信息状况，布局上疏密有致，透气。各有卖点。

在分析了这么多的应用之后，不难发现，在扁平化风格的这一类型中，除了布局稍微不同，图标等等视觉元素是相似的。拟物化的图标，一方面有点过时，另一方面绘制难度大和周期长。卡通化的也是难度大，真实图片涉及到版权。

那么，如何设计可以体现这个小而美的天气应用呢？

我选择的是“差异化”。

最近在UI界流行一种 icon 风格，简称为“ MBE ”。

据我所知，这种流行仅仅是设计师在练手和概念稿上面多一点，鲜有在 app 上大量实现，所以选择这种好看有有趣新奇的 icon 将会吸引不少用户的注意力。

在字体方面，因为最近开始了解日本设计和 MUJI 的设计风格，所以希望能使用日式的字体排版。

有了这样的灵感之后，当然是做一下实验，看看效果如何。于是有了下面的设计稿。

做出来之后，感觉效果还不错。于是继续按照这个风格完善其他页面。鉴于篇幅，就不放上来了。