浅析扁平化风格网页设计-------------以公司官网为例_开题报告

文献综述

查找^范文相关文献，介绍本论题目前扁平化设计的现状与趋势，扁平化设计的流程与与设计方法，扁平化设计的设计手法等内容。

扁平化设计的风格现状与趋势

实际上是这一两年，我们可以发现越来越多的程序的GUI变得平面化了：google、Microsoft、facebook、甚至apple的首席设计师Jony Ive也说过苹果会开始适当扁平化一点，WWDC2013的新logo也能看出这个暗示了。 于是很多人都问，为什么会有这样的趋势了？

我认为扁平化是一个必然趋势。并不是单纯的因为审美疲劳导致的为了变化而变化，而主要是因为数码化程度越来越高的日常生活中导致的。随着时代的变化，一方面是拟物化作用越来越少而退出主流，另一方面是扁平化更适应新时代的需求。

   首先要明确的是：扁平化设计并不是为了拍扁而拍扁，它是一种设计理念，色块是它的外在表现形式。其次要明确的，也是很有争论的是：拟物和扁平到底是不是对立的？如果说扁平是一种极端，那另一个极端是什么？虽然这两者的出发点是不同但不完全相反，但似乎除了拟物没有更适合当扁平化的假想敌了，至少从实际流行度变化来看也确实是这样的。当然，我这篇文章也得基于「拟物和扁平是对立的」这个假设来写。不然就没观点，也没下文了。而至于字面上的反义词立体设计/浮雕效果，那又是没人去谈的。

有人说计算器的例子，win8的计算器拍扁了，但也是依然是拟物化，布局和实体计算器一个样，所以拟物和扁平是可以共存。初看是有道理的，但细想的话我觉得这个例子没有说服力。其实数字计算机本身就是个扁平化的计算器。就算不去想实体计算器，按照信息构架从0开始设计一个计算器，很有可能也会是那么类似的结果。更不用说数字计算器光字面上就是个有UI的计算机了，只不过这个UI很简单略复古和现在的UI的概念略有差别而不一定能被我们马上意识到是UI而已。有没有人记得算盘？一个珠子代表一或五的算盘，那估计算是拟物化设计的计算器了。而至于用色块画个温度计、用色块画个模拟时钟什么的，要我说那本质依然是拟物。而不是所谓共存。

同样的，拟物化也是不应该是为了拟物而拟物，立体是它的外在表现形式。

论天下设计，简久必繁，繁久必简。 GUI也不例外，不管是制作方还是用户，都会审美疲劳。就算不疲劳，有些产品需要标新立异，与众不同，也必然会走向另外一个极端了。未来的时代，人们的重心将会从「享受计算机」转变到「随心使用计算机」。GUI的设计也必然会慢慢会抛弃华丽的外皮，而专注于信息和任务本身。扁平化设计是非常适合这种需求的！

（二）扁平化设计的流程与设计方法

结合上述，我们可以了解GUI跟扁平化是分不开的。在用户界面设计的过程中，我们以扁平化风格定位，然后第一件事就是考虑用户体验，然后制定设计规范，设计规范是有一系列的理论跟思路，在【UI群英汇 用户体验交互视觉设计方法论】中，首先对用户体验分析的非常透彻！头脑风暴分析的讲解很详细。从设计图到原型的诞生，是一个有趣又复杂的过程。在头脑风暴讨论中，交互设计师要与产品设计师、需求分析师等一起参加设计图创建的讨论。在讨论中确定商业需求范围、产品需求逻辑、产品规范等，最后总结出一份过程文档，它可能是BRD或者FRD,它将是纸上原型的设计指导书。

当交互设计师拿到这个过程文档后，就可以创建设计图中逻辑构架图和任务操作流程图了。这里面讲解的流程是非常具体的，并且推崇纸上原型。纸上原型的设计不需要懂html,也不需要很强的手绘能力，一切都可以由快速原型生成工具来协助完成。对于大部分人来说，手绘能比软件绘制更多的界面。另外，纸上原型节省成本，工作效果高，能有效的保留初始的设计框架与原型。

在设计过程中，我们首先要梳理网站信息，剔除非重要的信息。信息梳理的工作非常重要，它直接关系到一个网站的目标能否达成，想想最重要的信息由于缺乏整理没有在页面的重要位置和视觉方面体现出重要性，无论设计的再美观，也是无用的。

但我们经常所看到的情况却相反，一个网站的首页被重要不重要的信息塞的满满当当，每一个子页面的内容都要在首页上占据一个位置，什么产品展示、新闻资讯、常见问题、专题活动都出现在首页上，这样做的结果就是让次要的信息冲淡了重要信息的比重，信息的主次得不到体现，访问者浏览过网站后似乎什么都看到了，但却没有留下深刻的印象。时刻要记住，设计不是为了漂亮，更不是为了炫技，而是为了便捷信息的沟通。信息的梳理工作在扁平化的设计中显得更加重要，因为扁平化的设计就是要体现简洁、干净的特点，页面上的信息太多，就不太容易做出这样的视觉风格来。

网站的信息确定之后，我们就可以着手来制定更为详细的设计方案。首先需要确定的是版式，也就是网站的布局。在扁平化风格的设计中，由于设计中常使用特别简单的元素，所以排版就变得非常重要，成为了设计中出彩的地方。

扁平化设计中常见的排版方法是用矩形来划分页面中不同的信息区域，例如下面的几个案例所示，可以看到无论是整体页面的划分或者分栏信息的划分，矩形在其中扮演了非常重要的角色。

扁平化设计表现手法

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

^范文提纲

1扁平化风格的发展历程

1.1 扁平化风格的设计背景

1.1.2 扁平化风格的现状

1.1.3 扁平化风格的发展趋势

1.2 大趋势下扁平化风格的设计理念

1.2.2 扁平化风格的设计手法

1.2.3 扁平化风格的设计流程

2 以公司官网为例分析扁平化在网页设计里的应用

2.1 扁平化风格网站布局形式

2.1.2 网站信息的删选

2.1.3 网站框架的制定

2.2 网站视觉设计规范制定

2.2.2 色彩搭配方案分析

2.2.3 字体设计方案分析

2.2.3 图标设计方案分析

2.2.4 创意部分设计方案分析

2.3 扁平化风格设计在网页中的实现

2.3.2 内容板块划分细节

2.3.3 纯度高亮的使用

3 综合论述扁平化风格优缺点

3.1 扁平化风格的优点

3.2扁平化风格的缺点

3.3设计扁平化风格网页的建议

徐海波.UI群英汇 用户体验交互视觉设计方法论[M].北京：清华大学出版社，2012：9-13

利恩得·卡尼.苹果首席设计师_乔纳森传[M].北京：中信出版社，2014.2

周翊.色彩感知学[M].吉林：吉林美术出版社，2011.1

伊达千代著(日).色彩设计原理[M].北京：中信出版社出版，2011.10

阿恩海姆（美）.视觉思维[M].北京：光明日报出版社，1987.7

伊达千代著(日).文字设计的原理[M].北京：中信出版社,2007.3

晋小彦.形式感网页视觉设计创意拓展与快速表现[M]北京：清华大学出版社，2014.2

郭鄂勇.思维导图的三招十八式[M].北京：电子工业出版社，2012.1

Smashing Magazin（美).众妙之门-网站UI设计之道[M].北京：人民邮电出版社，2010.1

罗伯特·布伦纳.至关重要的设计[M]北京：中国人民大学出版社