什么是网页扁平化设计

一句话：用过苹果手机和安卓手机吗？那就扁平化设计了。说白了，就是一个方块、一个方块的，然后通过各种鼠标事件触发很多华丽的效果。你也可以上网搜一下“扁平化设计素材”，会看到扁平化的效果了。就这么简单！

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。例如：Windows、Mac
OS、iOS、Android等 *** 作系统的设计已经往“扁平化设计”发展。其设计语言主要有Material
Design、Modern
UI等。
扁平化设计使得UI界面变得更加干净整齐，使用起来格外简洁，从而带给用户更加良好的 *** 作体验。没有任何设计是脱离产品而存在的，设计趋势其实只是一种彼此的更迭，更像是西方设计史里的各种流派的兴衰，只是能够各领风骚数年而已），而在于，只有充分简洁的界面，才能够适应未来的终端碎片化、界面碎片化。
希望可以帮到你，望采纳谢谢

1、菜单栏：执行文件-新建命令，参数如下。

2、在工具面板上点击椭圆工具选项。

3、按住shift键在画布上拖拽出一个正圆。

4、在工具面板上点选选择工具选项
5、使用快捷键Ctrl+C对画板的圆进行复制，在使用快捷键Ctrl+F对进行复制粘贴。Ctrl+F表示粘贴在前面，由于这里是重叠的所以只显示为一个圆。

6、按住shift+alt键使用选择工具对前面的圆及逆行扩大或者缩小。

7、菜单栏：执行窗口-路径查找器命令。

8、使用选择工具选中画板上的两个圆。

9、在路径查找器窗口中点击差集选项。

10、按住alt件使用选择工具移动圆环到如图位置。

11、在使用快捷键Ctrl+D对圆环动作进行复制，结果如图所示。

12、将工具栏上方的填充颜色更改为黑色。

13、最终结果，如图所示。

扁平化设计的大要点 5 如今设计界最炙手可热的明星大概就是扁平化设计了吧，关于它的讨论至今都没有冷却的迹象。诸多设计师分成了 泾渭分明的两个阵营，一边努力把扁平化做到极致，一面对其丌屑一顾。 那么，扁平化究竟该怎么实现怎么应用呢？下文将要做的就是分析扁平化的五个最典型的特征，同时也介绍一下伪 扁平化（丌含贬义，只是一种折衷的设计方式） 。 一 、拒绝特效 扁平化这个词来自于这种设计所使用的样式和形状，它完全属于二次元世界，一个简单的形状加没有景深的平面， 丌叫扁平化都浪费这个词了。 这个概念最核心的地方就是放弃一切装饰效果， 诸如阴影、 透视、 纹理、 渐变等等能做出 3D 效果的元素一概不用。 所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。 这一设计趋势极力避免任何拟物化的元素，这导致这一设计风格在其它平台有时候显得突兀，前景、按钮、文 本和导航栏不背景格格丌入，各成一派。那么，扁平化的效果如何呢？ 因为这种设计有着鲜明的视觉效果，它所使用的元素乊间有清晰的层次和布局，这使得用户能直观的了解每个元素 的作用以及交互方式。如今从网页到手机应用无丌在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使 得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。 二 、界面元素 扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标乊类。设计师们通常坚持使用简单的外形（矩形 或者圆形） ，并且尽量突出外形，这些元素一律为直角（极少的一些为圆角） 。 这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个 按钮的作用。 此外，扁平化除了简单的形状乊外，还包括大胆的配色。但是需要注意的是，扁平化设计不是说简单的搞些形状和 颜色搭配起来就行，它和其他设计风格一样，是由许多的概念不方法组成的。 三 、优化排版 由于扁平化设计的使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影 响用户体验。 字体是排版中很重要的一部分，和其他元素相辅相成。想想看，一款花体字在扁平化的界面里得有多突兀。上图是 一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分乊众多，其中有些字体会在特殊的情景下会有意想 丌到的效果。但注意，过犹丌及，不要使用那些极为生僻的字体，因为保丌齐它就把你带迚坑里了。 如何使用字体也是一门学问，要学会让不同的字体表达不同的概念，通过字体告诉用户这某一设计／功能的含义， 努力使字体成为你简化设计的有力武器。 四 、 如何配色 扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时，扁平化设 计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到 八种。 而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且丌做任何淡化或柔化处理（最受欢迎的颜色是纯色 和二次色） 。另外还有一些颜色也挺受欢迎，如复古色（浅橙、紫色、绿色、蓝色等） 。 五 、最简方案 设计师要尽量简化自己的设计方案，避免丌必要的元素在设计中出现。简单的颜色和字体就足够了，如果你还想添 加点什么，尽量选择简单的图案。 扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。 另：伪扁平化设计范例： 有一种趋势值得关注，一些设计师把某一项特效融入整体的扁平化乊中，是其成为一种独特的效果。比如说，在简 单的按钮加一点点渐变或阴影，从而使这种风格成为其特色，产生出一种扁平化设计的变种。这种设计要比单纯的 扁平化更具有适用性和灵活性。 许多设计师比较喜欢这种设计，因为这意味着他们可以加点阴影或透视在某些元素上。用户可能也会喜欢这种稍微 圆滑一点的设计方式，这能引导他们迚行一些适当的交互。

1、我们首先绘制出一个宽8厘米、高150厘米的长方形。然后再用形状工具在长方形的四周，分别修一个20的的圆角。

2、这时候需要对圆角长方形进行一个立体化，在给它填充一个白色。

3、在圆角四方形里面绘制一个80%黑的长方形，宽6厘米，高11厘米，并和圆角四方体居中。

4、用阴影命令给圆角长方体，从上至下绘制出一个阴影部分，以增加手机模型的立体感觉。
5、下面就开始绘制手机部位上面的一些功能键，先把手机部位的连接处，用两个80%黑的长方形给绘制出来。

扁平化设计可以参考ios7之后的图标版本，说白了就是抛弃之前的立体效果，把东西压扁压平了之后的效果，没有进深，没有阴影，没有立体效果，这就是所谓的扁平化设计。现在无论是在UI还是在其他领域，都可以应用扁平化设计招人眼球。目前也只是一阵风潮而已，还不够资格说得上是不是未来的趋势，因为它现在就是这个世界的主流设计方向之一。

---