实例讲解扁平化设计的步骤和要点

我们取一下HTC的logo的颜色，发现这个纯度偏低，亮度较高的绿色正符合扁平化的设计风格，所以直接拿来用就可以了。在这个设计中，我们依然采用前面设计中的配色方案，白色的背景色、logo中的绿色作为主角色，不同层次的灰色作为配角色进行设计。

在设计的质感上，毋庸置疑，我们需要去除掉所有之前设计中拟物化的表现方法。例如高光、阴影、纹理、等等。这也是扁平化设计的概念最核心的地方：去掉所有冗余的装饰效果。让“信息”本身重新作为核心被凸显出来。字体选择方面，为了契合简洁、干净的设计风格，我们采用非衬线字体，微软雅黑作为正文字体，banner部分的设计可考虑尝试更为纤细的字体，例如方正兰亭超细黑简体。

至此，我们基本可以确定整个页面的感觉，初步做出来的设计应该和下图类似：

接下来我们进一步细化设计方案。banner部分的设计是整个页面设计的重点。它是整个页面中最重要信息展示区域，就像我们在前面提到的，这部分区域应该用来展示最新的产品，所以在banner的创意上我们计划将实实在在的产品展示出来。我们选择了HTC的HTC One M9手机作为banner部分的视觉主元素。将其放置于banner区域，调整一下色相、亮度，然后再键入宣传语，搭配上相应的按钮和链接。

Banner下方的分栏信息部分，我们分别放置了手机配件、HTC如影摄像头、免费更换服务三个信息栏目，为了让分栏信息的排版不过于单调，我们将本来的四栏布局更改为三栏布局，将中间栏目的宽度放大，这样在版式上有所变化，看上去更灵活一些。分栏信息的设计创意全部来自于HTC现有的网站，这里我们不做另外的创意。分栏信息部分的色彩我们通过调整图片的颜色，保持了以绿色为主色调，辅以灰色搭配的方法，这符合我们本来在页面色彩方案上的想法。

再往下是页脚导航和版权信息，这部分的信息不是页面的重点，只要做到契合整体页面的设计即可。

下图是我们重新设计后的页面，对比改版之前的设计，我们就能对扁平化的设计方法有一个大概的了解。

更多精彩文章请访问：飞鱼的声纳

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!