网页设计扁平化特点

1、常见的几种网站设计风格

网站建设中网页布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，以下分别论述：

1、国字类型：也被称为同字型，顶部是网站的标题、横幅广告条，然后是网站的主体内容个，而左右分别是一些比较小的内容条，中间就是主要内容，最底部是网站的一些基本信息、联系方式、版权声明等。这也是现在网上见到的差不多最多的一种结构类型；

2、拐角型：这种类型其实与国字型很相近的，只是在形式上不一样，最上面的部分是网站的标题以及网站的横幅广告条，一种很常见的类型是最上面是标题及广告，左侧是导航链接；

3、标题正文类型：上面是网站的标题，或者是类似的东西，接着就是网站的正文内容，例如是一些文章或者是注册登录页面；

4、左右框架类型：这是一种左右为分别两页的框架结构，一般布局是：左边是导航链接，最上面有时是一个小的标题或标致，而右面就是主要内容，最常使用是论坛网站，企业网站中的内页有很多是采用这种布局方式的；这种类型的布局的特点是结构清晰明了；

5、上下框架类型：与左右框架类型类似，只是这种类型是上下两页的框架；

6、综合框架类型：其实就是左右框架类型和上下框架类型的结合体；

7、封面型：这种类型基本上是出现在一些网站的首页，多是精美平面结合小动画，再加几个简单链接或仅是一个“进入”链接或无任何提示；

8、Flash型：其实这与封面型结构是类似的，采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体；

9、变化型：即上面几种类型的结合与变化，但所实现的功能的实质是那种上、左、右结构的综合框架型；

2、类似dropbox这样的网页配图设计扁平化的重要特点有哪些

扁平化完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。界面干净整齐，使用起来格外简洁，扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。
Dropbox是一款非常知名的同步网盘，目前由于地区限制，国内用户尚不能使用。
坚果云是一款便捷、安全的专业云存储产品，通过文件自动同步、备份、共享功能，为用户实现智能文件管理，提供高效办公解决方案。因其简单易用的特性，被广大用户视作“Dropbox”的国内替代品。像Dropbox一样易用，却无墙的烦恼。

3、类似dropbox这样的网页配图设计扁平化的重要特点有哪些类似dropbox这样的网页配图设计扁平

扁平化完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。界面干净整齐，使用起来格外简洁，扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。
Dropbox是一款非常知名的同步网盘，目前由于地区限制，国内用户尚不能使用。坚果云是一款便捷、安全的专业云存储产品，通过文件自动同步、备份、共享功能，为用户实现智能文件管理，提供高效办公解决方案。因其简单易用的特性，被广大用户视作“Dropbox”的国内替代品。像Dropbox一样易用，却无墙的烦恼。

4、网站设计风格主要体现在哪几个方面

网站简单的可以分为：功能型和展示型

功能型：网站在美工设计上可能不适合大块图片，在数据功能上比较强，比如：搜索、会员注册。一般企业网、购物网、大型门户、交友网等。

展示型：追求视觉上的美丽，对功能要求不高，在美工上、设计上要有强烈的视觉感。这种网站一般属于：美容业、女性用品、服饰等。
可以是企业展示网站、企业宣传网站、门户网站、电子商务、社交交友、综合型网站等等。
1、将你的标志logo，尽可能的放在每个页面上最突出的位置。

2、突出你的标准色彩。

3、总结一句能反映贵站精髓的宣传标语！

4、相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

二、网页色彩的搭配 　

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。在此告诉大家一些网页配色时的小技巧。

1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2、用两种色彩。先选定一种色彩，然后选择它的对比色。

3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区： 　

1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。

2、背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

现在是眼球经济时代，什么都要靠包装。你的网站设计的不好看，也无法引起用户的兴趣。我想谁都不喜欢看那些乱七八糟的网站，进去之后看不到网站主题，看不到主要内容，也找不到我们想要的信息。成功网站的第一步，就是从设计开始做起。
一、确定网站的整体风格
网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站，在这里，提供给大家一些参考经验：
1、将你的标志logo，尽可能的放在每个页面上最突出的位置。

2、突出你的标准色彩。

3、总结一句能反映贵站精髓的宣传标语！

4、相同类型的图像采用相同效果。

二、网页色彩的搭配 　

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。在此告诉大家一些网页配色时的小技巧。

1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2、用两种色彩。先选定一种色彩，然后选择它的对比色。

3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区： 　

1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。

2、背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

5、简述网页设计的风格有哪些

一、首先从功能与设计目标来看， H5专网页主要有以下4大类型：

1.活动运营型

为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。

2.品牌宣传型

不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

3.产品介绍型

聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。

这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。

4.总结报告型

自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。

二．形式为功能服务

在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。

1.简单图文

简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

2.礼物/贺卡/邀请函

每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。

3.问答/评分/测试

问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。

4.游戏

从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。

三．为设计加分的4个要点

一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：

1.细节与统一

要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。

2.紧跟热点，利用话题效应

想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。

3.讲个好故事，引发情感共鸣

不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。

4.合理运用技术，打造流畅的互动体验

随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。

结语

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。

6、网站采用扁平化设计有什么好处

　一、风格简约的网站本身就给人一种耳目一新的感觉，现在的网站如此之多，如果想要被用户记住的话，那么简约风格的网站一定是首选。扁平化的设计风格刚好能够满足在这样的要求，它十分的简洁，能够从直观上给用户想要的事物，能够让用户一眼就记住。

二、扁平化设计能够很好的提高网站的加载速度，网站的加载速度越高，用户的体验感也会更好。如果一个网站的加载速度很慢的话，那么用户需要等待的时间会很久，久而久之，用户就会更换网站。扁平化网页设计可以很好的将网页设计的元素化，减少了很多减少网站速度的内容，有效的提高了网站的加载速度。

三、随着现在人们对智能手机以及平板的使用，人们浏览网站的习惯和工具已经发生了很大的变化，如果还是以前复杂的网站的话，那么用户的体验感是很差的。而扁平化设计可以很好的满足用户的需求，对于各种浏览器和终端的兼容性是很高的。

总的来说，如果大家不知道选择什么样的网页设计的话，那么选择扁平化的设计风格肯定是没有任何的问题的，并且不管时代怎么样变化，这样的网页设计都是很受欢迎的。

7、扁平化网页设计需要注意什么

这种风格对于像素级别的设计非常到位，对于色彩和空间的把控也非常棒。扁平化设计可以使网页更加耐看，不容易产生审美疲劳，但是也并不是说就可以万试万灵，也需要判定要设计的网站是否适合扁平化风格，并且在扁平化设计时要注意许多问题。
首先，也是大前提，客户认可扁平化网站。如果客户不满意，网站建设岂不是违背了初衷？
其次，网站内容与信息量庞大，需要简洁有序的设计风格时，扁平化设计无疑是一个非常好的选择。
第三，网站设计元素过于“散漫”，但又都不能舍弃之时，扁平化设计可以将其“串联”在一起，并不觉突兀。
第四，部分行业网站，例如IT界亦或是科技界等具有进步精神的行业网站就非常适合扁平化设计。反之像是旅游网站、儿童站点就不太适合。
第五，如果一个网站很依赖视觉形象展示又或是交互功能，那么扁平化设计也会使其受到一定的限制。
最后，扁平化与枯燥呆板完全不同，它只是提倡一种“Less is More”的设计理念，通过简洁让重要元素更加的醒目，布局上同样要下足功夫.

8、如何评价扁平化设计和非扁平化设计

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

9、什么是扁平化设计风格

扁平化完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

10、+互联网网站扁平化设计指的是什么？

网站扁平化设计是指抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉结果，打造出一种看上去更“平”的界面，其核心是去除冗余、厚重和繁杂的装饰效果。扁平风格网站的优点在于可以更加简单直接的将信息和事物的工作体例展示出来，削减认知停滞的产生，界面美观、简洁明了，达到降低功耗、延长待机时间和提高运算速度的效果。