苹果iOS 7将扁平化设计风格推向了一个顶点。目前，扁平化设计是当下最流行的设计风格。不少设计师或许都想要尝试一下扁平化设计，但却不知道该要如何开始。这里，我们就为大家搜集了一些扁平化资源，从UI套件到调色工具，再到字体选择和WP主题，从理论文章再到创意图库。我们将为大家呈现出体系化的扁平化资源，一起来看看：
不收藏都不好意思的扁平化设计终极指南
扁平化设计
对于设计师来说，扁平化设计是一种实打实的设计风格，不要花招，不要粉饰。从整体的角度来讲，扁平化设计是一种极简主义美学，附以明亮柔和的色彩，最后配上粗重醒目，而风格又复古的字体。扁平化设计简化了诸如按钮、图标一类的界面元素。
扁平化设计要求尽量避免使用凹凸、阴影、斜角、渐变、材质等装饰手段。对于那些页面不多或者用以推广移动应用的简单网站来说，扁平化设计非常符合他们的需求，因此广泛流行。扁平化设计同时也遭到了一些非议，批评者认为这种全面简化的风格无法更好的引导用户，用户界面太过简单，可能一些用户无法理解。
大图片取代了动效。在极简主义风格的设计中，设计师通常给予内容充足的空间以供传达，这样就能够简单、直接的讲述内容。从扁平化设计中又衍生出几个不同的小流派：“似扁平化设计”和“长投影设计”就是最近被反复强调的两个概念。
“似扁平化设计”（Almost Flat Design）是以扁平化设计为基础，但是添加了一些简单的效果，比如简单的投影，基本的渐变。“长投影设计”图标设计中使用较多，一般是一道45度角的阴影从图标中延伸而出，最近的图标设计，大部分都采用“长投影设计”。
扁平化设计强调了极简主义，提倡功能大于形式。提倡了一种少即是多，留白大于填充的美学。仅仅具有色彩、形状、线条等基本元素。字体选择上也务求简单、基本。
UI Kits
通过UI套件，我们可以初步了解扁平化设计。套件非常的节省时间——可以自由选择套件中的元素，然后进行自己的实验。大多数UI套件的格式是PSD，非常易于编辑。下面推荐的UI套件种类不一，从简单免费
的到复杂收费的，扁平化的UI套件可真是越来越多了；这里我们提供了一个推荐列表。
在选择UI套件时，不要对颜色太较真。大多数的套件都支持改变颜色主题，只需点击几下，就能全面修改，这样就不用一个一个手动修改了。
Featherweight UI （free）
Featherweight UI简约、支持视网膜（Retina），照片滚动箭头、按钮、简单的图标，什么都有。大小适中，颜色复古。
图01
Polaris UI kit （free）
Polaris UI kit （free）由Designmodo出品，黑暗风格，包含了多种按钮和面板，有点Win8的风格。而且扁平之中带点拟物风格。
图02
Erste UI kit （free）
This simple UI kit包含了一些非常实用的基本元素，比如社交网络登录按钮，菜单、媒体播放器，配色非常扁平化。
图03
FlatUI kit （free）
The kit designed by https://www.doczj.com/doc/233381995.html, for WebdesignerDepot 包含了从下拉菜单到导航条再到社交分享工具在内的大量元素。
图04
Flat UI （free）
free kit from Designmodo 色彩明亮，按钮，图标，菜单，什么都有点。
图05
Flat UI kit （free）
flat user interface widgets饶有趣味的一款套件，图标、播放器，计算器，任务转盘。这个套件做出了很好的榜样，教会我们如何将扁平化设计与复杂的元素相结合。
图06
Metro UI kit （free）
Metro UI kit多姿多彩，被WP使用，颜色和风格与WP也有所联系。多彩的区块，简单的字体。这款套件包括日历、状态栏、图标、图表、菜单和搜索栏等元素。
图07
扁平化设计：UI Kits（二）回顶部
Monotone flat UI kit （free）
简约的配色也可以非常出众。Monotone flat UI kit （free），相比前面几个，这款套件的用色算是一种进步。
图08
V ertical Infinity （free）
V ertical Infinity, 适用于视网膜的套件中，内容最为丰富的一款。下拉菜单、窗口、表格、按钮、社交网络
图标。什么都有点。正因为基本，所以适用面广。
图09
Lil UI kit （$6）
Lil UI kit （$6）18种元素。这款矢量套件定制化很高，可以用来进行风格简化、内容一致的设计。
图10
Flat UI kit （$19）
flat UI kit 图标，表格，按钮。元素搭配完美，色彩明亮，适用于简约风格的手机界面设计。
图11
Flat UI pro （from $39）
Flat UI Pro is Designmodo出品，适用于Twitter Bootstrap，含有去全套的PSD文件以方便定制。完全响应式设计。
图12
Flat UI PSD （$5）
Flat UI PSD （$5）有点“似扁平化设计”的味道，你看按钮中文本下的阴影，提供了更多的对比感
图13
Square UI （from $39）
Square UI 应用广泛，种类齐全，用色非常规。可定制化。支持视网膜。
图14
3扁平化图标回顶部
扁平化图标
扁平化设计的图标无处不在，资源也非常丰富。跟UI套件一样，大多数的图标采用PSD格式，这样可以根据个人情况进行修改。很多图标的设计非常的具有专业性，专门为某类应用而设计。这种图标，用来做按钮也很合适。当选择图标下载时，记得尺寸大小选择要合适。有的是矢量图形，而有的放大时会损失质量。
40 social media flat icons （free）
40 social media flat icons （free）用途广泛，涵盖了欧美几乎所有流行的网站，并采用了长投影设计。通过用色和投影上的细微差别，达到了不同图标之间的高辨识度。每种图标有4种大小——32,64,128以及256。
图15
Freebie PSD —flat icons （free）
This simple download包含了一些图形复杂的扁平化图标。比大多数的扁平化设计更具细节和风格。但是仅支持PC下载。
图16
12 flat SEO icons （free）
social media icons非常棒的作品，跟SEO相关的一些图标，扁平化+长投影，对于一些机构来说非常合适。
图17
Free flat icon set （free）
This small icon set用色非常的朴素，对比也比较低的一套图标。
图18
Flat file icons （free）
This quad of icon 上传、下载、设置、图表。
图19
Flat icons freebie （free）
Flat icons freebie （free）这套图标出来之前，扁平化设计中很少采用圆角。
图20
Flat social media icons （free）
Designmodo's kit 35款社交媒体图标。色彩选用明亮，且非常贴切。
图21
PSD flat social icons （free）
This set of 16 social media icons 长投影设计，图标设计不局限于方形，变化多种多样。
图22
IconShock flat icons （from $19）
IconShock flat icons （from $19）可能是最大的图标系列，3600款图标，每款3种大小选择。
图23
FlatIcons （from $30）
FlatIcons因其简单而用途广泛，定制度高。
图24
4其他类扁平化资源回顶部
其他类扁平化资源
Apple product templates （free）
想在苹果的设备上展示一下设计作品吗？试试Apple template from MediaLoot吧！
图25
E-comerce flat web elements （free）
电商网站中，扁平化设计并不多，因此this kit提供了一些简单的元素，来填补这份空白。
图26
Flat credit cards （free）
credit card icons 在设计的时候要考虑到一切细节，小小的信用卡，在网上支付时非常重要。
图27
Friends list UI （free）
整洁有序的列表，this UI PSD,为iPhone界面设计，使用了常用的珊瑚色，以及无衬线字体。
图28
Radial graph （free）
图表和曲线图大概是扁平化设计中最难以把握的元素了，让radial graph PSD教你吧。
图29
Sign-up form （free）
sign up form适用于预启动页，用其五彩的配色给予用户热情的欢迎。
图30
Flat browser frames （$5）
扁平化浏览器窗口，This kit 非常适合在其中展示作品
图31
扁平化设计的配色方案 扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。下面是带来的扁平化设计的配色方案，欢迎阅读! 1、确定色彩基调 扁平化设计并不局限于某种色彩基调，它可以使用任何色彩。但是大多数的设计师都倾向于使用大胆鲜艳的颜色。 那么，如何让扁平化设计在色彩上与众不同呢?设计师正在不断地增加色彩层次，将原本的一两个层次层加到三个、四个甚至更多。这些色彩的亮度和饱和度大都非常高。 在进行扁平化设计时，传统的色彩法则就不适用了，转而以彩虹色这种流行色来进行配色。 扁平化设计一般都有特定的设计法则，比如利用纯色，采用复古风格或是同类色。但并不是说这是唯一的选择，而是这种方式已经成为一种流行的趋势，也更加受大家欢迎。 2、纯色 提到扁平化设计的色彩，纯色一定首当其冲地出现在我们脑海里，因为它带来了一种独特的感受。纯粹的亮色往往能够与明亮的或者灰暗的背景形成对比，以达到一种极富冲击力的视觉效果。所以说，在进行扁平化设计时，纯色绝对是最受欢迎的色彩趋势。 3、从哪里开始? 前面设计达人网分享过Metro的配色方案，而 FlatUIColors.将扁平化设计中最受欢迎的色彩进行了一个，从宝蓝和草绿到明黄和
橘黄色，这些色彩概括出了我们现在能够看到的色彩趋势。这个网站将是进行扁平化设计的第一步，因为你能够下载任何你看中的色彩。 在扁平化设计中，三原色是很少见的，即正红、正蓝和正黄。 简单起见，在一个扁平化设计方案中，如果你想快速的配色，那就选择相似的色调和饱和度。另外，本文也将提供一些色彩样本。 样本：利用色彩进行一组扁平化设计的色彩配色。每一种色彩都能与背景形成最强劲的视觉冲击。 最受欢迎的色彩：蓝、绿、紫 4、复古色 在进行扁平化设计时，复古色也是一种常见的色彩方式。 这种色彩虽然饱和度低，但却是在纯色的基础上添加白色，以使色彩变得更加柔和。复古色经常以大量的橘色和黄色为主，但有时也有红色或蓝色。 在扁平化设计中，以复古色为主色调是很常见的，以为这种色彩能够使页面变得更加柔美、富有女性气质。 样本：在扁平化设计中，如果将复古色作为主色调，呈现效果最好。 最受欢迎的色彩：橘色、粉色或绯色和深蓝。 5、同类色(单色调) 在扁平化设计中，同类色正迅速成长为一种流行趋势。这种色彩往往以单一颜色搭配黑色或白色来创造一种鲜明且有视觉冲击的 效果。
扁平化设计五大原则 发表于2013-05-30 07:35| 41294次阅读| 来源CSDN| 51条评论| 作者王然 扁平化设计产品设计 摘要：这段时间以来，扁平化设计一直是设计师之间的热门话题。那什么是扁平呢？designmodo设计师Carrie Cousins总结扁平化的五大特点，并且介绍了“准”扁平化设计理念及其优缺点。 这段时间以来，扁平化设计一直是设计师之间的热门话题。每个人都有自己的独特认识，有的非常喜欢而有的人却恰恰相反。那什么是扁平呢？designmodo设计师Carrie Cousins在网站上介绍了扁平化的五大特点，以及“准”扁平化设计的优缺点。CSDN编译如下。Cousins表示他虽然对扁平化设计的感觉非常强烈，但并没有特别热爱或者特别讨厌扁平化设计。他认为好的设计不应当局限于某种设计风格，而需要更注重可用性、有用性。如果因为时尚的缘故，那就顺其自然吧。但该趋势并不适合一切项目，所以不能强求所有应用都遵从这一风格。 拒绝特效
顾名思义，扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮，再到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。 扁平化设计中的层次和其它的一一对应，但各个位面间没有交叉，不会明确区分背景图片、前景图片、按钮、文本、导航，等等。 那如何做好扁平化设计？扁平化设计依赖于清晰的层次结构和元素布局，优秀的扁平化设计应该能帮助用户理解产品以及交互。 现在，越来越多的网站开始应用扁平化设计，在App和移动设计中这一趋势更为明显。在小屏幕中，按钮和选项更少，也让扁平化设计如鱼得水。 仅使用简单的元素
扁平化风格在网页界面设计中的应用研究 发表时间：2019-08-08T15:33:50.780Z 来源：《知识-力量》2019年9月35期作者：刘定安王正阳 [导读] 本文将立足网页界面设计，探讨扁平化风格在网页界面设计中的应用，以期为有识之士提供参考，整个各个设计元素，使网页界面呈现出简洁大方的视觉效果 （大连工业大学艺术与信息工程学院艺术设计系） 摘要：本文将立足网页界面设计，探讨扁平化风格在网页界面设计中的应用，以期为有识之士提供参考，整个各个设计元素，使网页界面呈现出简洁大方的视觉效果。 关键词：扁平化风格；网页界面；界面设计 前言： 现代技术不断发展，网页界面设计突飞猛进，如何提高网页界面设计水平，成为各个设计师关注的重点。扁平化风格秉持“less is more”的原则，强调简单为美，更具当代特色，也更加符合当代人的审美需要。为了优化网页界面视觉效果，设计师应该把握扁平化风格的内涵，将其应用在网页界面设计中。 1扁平化风格概述 在视觉设计中，扁平化设计占据着非常重要的位置，扁平化设计强调事物的化简为零，强调去除一切装饰效果，追求设计元素最真实的美感，打破了元素的边界，放弃了复杂的设计手法。与传统设计相比，扁平化设计还原了设计元素的真实状态，观者在浏览设计作品时，会将着眼点放在作品信息上，而不是将着眼点放在作品形式上。扁平化设计的主要目的是突出设计内容，简化设计形式，达到内容与形式的完美契合，并突出设计主题，传递设计情感[1]。扁平化风格常常与“极简主义”这一类名词联系在一起，秉持“less is more”理念，并强调通过设计元素的精简搭配来再现信息。扁平化设计是最常见的设计风格之一，也是在世界范围内享誉程度最高的设计风格之一，其经久不衰，魅力恒远。在浏览扁平化界面时，用户可以迅速捕捉自己想要查询的信息，避免过度消耗时间和产生认知障碍。 2扁平化风格在网页界面设计中的应用 2.1应用图形 图形是最重要的网页界面设计元素之一，在开展扁平化设计的过程中，经常要应用图形，包括抽象图形等等。抽象图形是对图形元素进行高度概括和抽象处理之后形成的图形，这些图形具有明显的扁平化特征，能够直观地传递信息，深化用户对信息的记忆和理解。以“淘宝网”为例，对淘宝网进行分析，可以发现界面上的按钮并没有纷繁复杂的装饰物，其具有几何形轮廓，但又不是标准意义上的几何形，是抽象化的几何图形。鼠标移动到图形上方和未移动到图形上方，图形将呈现不同的视觉效果，依靠图形变化即可以区分鼠标的操作状态。在开展抽象图形设计的过程中，设计师需要把握这一图形所对应的的功能，并对具象的几何图形进行高度概括，填充几何图形的色彩、纹路、文字等等。在缺少辅助的情况下，应该保证几何图形仍然能够承担信息。 除了开展抽象几何图形设计之外，还可以采用去底方法，去除图片的背景，将图片单独剥离出来。“淘宝网”中的很多商品信息都是采用了去底方法，对原来物品进行了还原。在纷杂的背景中，用户很难在第一时间捕捉到主体信息，查看商品的外形、细节等，但是采用去底方法后，用户可以在第一时间找到主体商品。去底方法拓展了画面的空间范围，凸显了图片中的重要信息。图片在网页设计中必不可少，设计师在挑选图片时应该保证图片与页面主题的一致性，并对图片颜色、图片形状进行适当调整，对阐释性文字进行有效排列，使画面更加清晰可观。 2.2搭配色彩 在对网页色彩进行设计搭配时，需要考察颜色所代表的情感，或是颜色所代表的意象意境等。色彩设计需要和网页主题保持一致，设计人员需要遵循网页的主题基调，并注重发挥色彩的导向功能。以“豆瓣阅读”为例，“豆瓣阅读”网站是综合性图书阅读网站，其情感主题为“安谧”，因此设计人员在设计网站界面时，呈现给了读者一个安静、舒适的阅读环境，采用了赭石色和浅灰色相融合的方式。浅灰色为“豆瓣阅读”的背景色，赭石色为“豆瓣阅读”的主页色，二者相互搭配，营造了和谐的静谧氛围，拉近了用户与页面之间的距离。 色彩层级搭配在网页设计中非常重要，设计人员需要控制色彩的饱和度。扁平化设计一般采用大的色块，在色块上记录重要的文字信息。扁平化设计页面上的色块大多面积比较大，因此需要尽量选择低饱和度的色彩，扩展色彩所承载的空间信息。低饱和度的色彩主要包括以下几个：第一是黄色，黄色色块明艳简洁，大方得体；第二是蓝色，蓝色色块清澈静谧，洁净整洁；第三是红色，红色古典高贵，端庄高雅。除了应用低饱和度的色彩之外，还可以将低饱和度色彩、高饱和度色彩整合起来，如应用低饱和度的深灰色、高饱和度的暖黄色等。在混合搭配色块上承载的信息将得到凸显，吸引用户的注意力。 2.3设计文字 文字设计含括的内容比较广泛，具体包括字体设计、颜色设计、排版设计等等，在开展扁平化设计时，需要区分文字的主次信息，使文字交叠形成一种纵深感，平衡空间画面，突出重点信息。扁平化中的字体大多传递了设计者的情感，因此可以将字体作为用户与设计师的情感纽带。以宋体字为例，宋体字规整端庄，方方正正，得体美观，且占据的空间不大，在长段文字中非常适用，大多出现在网页界面的正文中。以黑体字为例，黑体字非常醒目，其干净利落，庄重肃静，占据的空间比较大，经常作为网页界面的标题。除了字体设计外，还需要改变文字的字号，如文字的大小、文字的粗细等等[2]。文字大小、粗细应该和图片一一对应，设计师在进行文字编排时要秉持简洁设计原则，直观突出文字内容。颜色设计也是文字设计的重要内容，颜色大多与网页界面的主题色彩相关。设计师应该注重字体色彩和背景色的协调性，字体不能过于突兀，也不能混于背景之中。排版设计大多与设计师的主观倾向、扁平化设计的个性化风格有关。以“中国风”设计主题为例，很多设计师偏好竖向的文字排版，认为竖向文字排版更具古风气息。 结论： 综上所述，随着时代的不断发展，我国设计领域取得了许多硕果。在网页界面设计领域，扁平化设计的应用范围广泛，扁平化风格已经成为时代之声，其迎合了当代人的审美需要，反映了社会的发展特征。为了优化网页界面设计，设计师应该汲取中外扁平化设计的经验，对图片、色彩、文字等元素进行优化设计。 参考文献 1]金燕飞.扁平化设计技术在网页设计中的具体运用——以中国民航飞行学院洛阳分院网站改版为例[J].艺术科技,2015,28(06):49. 2]叶成闻.扁平化设计的极简特性及其在电子商务网页中的应用[J].现代装饰(理论),2015(03):133-134.
网页设计创意解析 文章从网页设计创意思维和创意方法的角度出发，简单解析了网页设计创意的内涵，突出了网页设计创意对于网站建设存在性的重要意义。希望通过文章的分析，能够对相关工作提供参考。 标签：网页设计；设计创意；研究分析 引言 当前时代是一个互联网+爆发的时代，学习、生活、工作的方方面面都离不开互联网。用户、计算机、浏览器、应用软件、网络、服务器、程序员已经从过去人们并不熟知的专业词汇成为了家喻户晓的名词，而这种用户与程序员之间的“交流沟通”，也成为这个时代最频繁而又最不为人知的对话。在如此“繁华”的时代，网络作为这条沟通长廊的关键纽带，扮演着中间信息传递的媒介角色，至关重要。而网页又作为这一纽带中与用户交互的第一窗口，它的设计显得尤为重要。一个好的网站，其网页的设计自然不会松怠。一个独特的网页设计创意，就像一个独特的商业模式能造就一个商业奇迹一样，能让一个网站获取更多的用户访问量，这时网页不仅仅是信息传递的媒介，已然成为新时代的一种新的营销手段。因而，如何在数以亿计的网页中脱引而出，表达出网站中心意旨的同时吸引更多的目标用户，自然将网页设计创意的探索推向前沿。 1 网页设计创意思维 创——创新、创造，意——意识、思想，创意的字面意思即创新的思想。创意是对现存实物的理解及认知的基础上衍生出的一种新的抽象思维和行为潜能。创意思维是以新颖独特的思维活动揭示客观事物本质及内在联系并指引人去获得对问题的新的解释，从而产生前所未有的思维成果。 网页设计创意思维有以下几个原则： （1）审美原则。好的创意必须具有审美性，没有好的审美感受，就不会产生好的效果，这就要求我们设计的内容积极向上、生动形象、健康美好，符合大众群体的审美评判。 （2）目标原则。创意的目的是更好的反映主题、表现主题，而不是独立成为某个艺术表现形式，脱离创意的目标性。 （3）系列原则。创意的系列原则是指创意不是凭空创造的，它具有一定的系列性，在某种基础上演化发展，可能是连续的、渐变的、重复的等等，给人一种分散的统一性，寓多样于统一之中。 （4）简介原则。创意不能过于浮夸，喧宾夺主，本末倒置；错落有致，层
40个扁平化设计风格的网站作品 之前有为大家展示了黑色配色方案的网站作品，今天我们将整理使用流行的扁平化设计的网页设计给大家欣赏，国外很多网站为了增加更好的用户体验，多数网站使用响应式设计来兼容平板电脑、手机多平台浏览，而使用扁平化网页会更容易实现这些技术。 如果你是网页设计师，又想获得更多的设计灵感，那么最好最快速的方式就能参考高质量的网页设计了。 下面为大家整理40个使用扁平化设计风格的网页设计作品，这些网站制作使 用HTML5,css3,响应式设计技术，我想你就看看就能受益非浅哦！ Human Hubris 人类的狂妄自大–介绍可能即将灭绝于地球的动物。动物使用扁平化的多边形绘制，很好看。
Human Hubris A Guide to Making Things A Guide to Making Things Teamgeek 一个伟呼机服务类的机构网站设计。 Teamgeek
Poolhouse Poolhouse Fixed Digital Agency 一个设计服务网站，网站使用视差滚动设计，十分有特色。
Fixed Digital Agency MoonCamp Mooncamp 是一个和Basecamp 相关的应用，具体怎样没体验过…… MoonCamp Robby Leonardi 这个网站的设计看起来让我想去超级马里奥。 Robby Leonardi
NBAllstats 一个展示NBA球队的数据，数据从1970年就开始整理。 NBAllstats Brooklyn Brooklyn 是一个强大的wordprssed主题，功能十分完整，无论你用来做企业网站、博客、作品集展示、设计工作室网站都很适合。 Brooklyn
Rdio Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格，你很难找到使用了阴影、渐变等效果的界面元素。 Nest 在他们的网站中，实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体 当中，虚实结合，让访问者可以很容易的将注意力聚焦在产品上，而不会被网站界面上的视觉元素所干扰。
对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来，相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。 无论采用怎样的风格，优秀的界面设计都需要遵从一些共通的设计原则： 一致性 通过具有一致性的设计模式及视觉风格，为用户建立起完整一致的心智模型，使产品更加易用，提升整体体验。 对比 通过对配色、尺寸和布局的调整，使可点击的界面元素在视觉上与其他元素形成鲜明的对比。 布局 可以尝试使用960gs一类的网格布局为界面设定视觉规范，使用户的视线可以跟随内容本身所界定出的路径自然的移动，增强界面的视觉平衡。 层级化 最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来，简单的说，就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素，而将其他操作元素置于次要位置，这可以使界面得到最有针对性的优化和简化。
目标用户 不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格，而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。 反馈 当点击行为发生时，要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式，例如在用户执行操作后，使用旋转图标提示用户系统正在进行响应。 降低“摩擦力” 无论采用怎样的视觉风格，都要使界面尽量简化，减少用户完成目标所需执行的操作，打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本，增加功能的复杂度，进而降低转化率。 鼓励探索 了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能，并开始向“高级用户”的阶段进发时，要为他们的探索和学习行为进行必要的指引与“奖励”回馈。 原型 无论风格如何，界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作，特别是通过草图或线框原型进行的探索。识别出最核心的用例需求，使用原型不断尝试和验证，为接下来的界面设计工作打下坚实的基础。 人人都是产品经理（https://www.doczj.com/doc/233381995.html,）中国最大最活跃的产品经理学习、交流、分享平台
一、基本设计原则 1. 重点突出 列举页面所需的全部元素,按照重要性来编号 博客的白色区域 文本放在页面顶部,阐明意图 自上而下的浏览习惯 2. 对比 两个绿色按钮。上半部分的白底黑字与页面同宽,而底部正好相反。 搜索工具是主宰元素。自上而下越来越紧凑,让人感觉很顺畅,会迫切地想找到所需要的信息,达到目的。 3. 平衡 对称与不对称 4. 对齐 logo 的宽度与内容的宽度一致, 所有标题都是对齐,实现了完美的平衡。 三栏布局,而导航栏两栏。 5. 重复 视觉连续性 6. 流 二、 1.iphone 应用网站
2. 自由职业者网站 3. 乐队网站 4. 博客网站 5. 个人网站 6. 设计公司 7. 事件网站 8. 出行和旅游网站 9. 电子商务网站 10. 名片网站 11. 网上实用程序网站 12. 网络软件网站 13. 房地产网站 14. 作品集网站 15. 建设中的页面 16.T 恤网站 17. 目录型网站 四、设计元素 1. 宣传语 2. 灯光效果 3. 盛极一时的 iphone 4. 社会化媒体链接 5. 图片 6. 排字 7. 照片背景
四、风格和主题 1. 超清晰 2. 极简 3. 手绘 4. 拼贴画 5. 插画 6. 以文字为主题 7. 纯色 8. 布艺 9. 原木 五、结构样式 1. 非典型导航 2. 非典型布局 3. 伪 Flash 4. 水平滚动 5. 单页 六、结构元素 1. 选项卡 2. 按钮 3. 表单元素 4. 实用性网页
5.功能性页脚 https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html,/one https://www.doczj.com/doc/233381995.html,/blog https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, 6.首页幻灯片演示 https://www.doczj.com/doc/233381995.html,.au https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, http://www.blamomedia.ca https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, http://divita.eu https://www.doczj.com/doc/233381995.html, 7.404 页面 https://www.doczj.com/doc/233381995.html, http://www.carsonified https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, http://graphik.fi https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html, https://www.doczj.com/doc/233381995.html,
---------------------------------------------------------------最新资料推荐------------------------------------------------------ 国外40个出色的有创意的网站设计国外 40 个出色的有创意的网站设计对于设计师来说，使用不同的工具是非常重要的，使用不同的设计工具不仅仅是设计需要，也可以不断的给你提供些灵感。 所以这里我们整理了一些很棒很有灵感的网站，这些网站包括有创意的 CSS、 Flash、设计工作室、个人作品集等。 希望你会喜欢这些网站，它们的设计真的是超灵感的。 1. Ecto Machine 2. Owltastic 3. Sprout Box 4. Nicolas Will 5. Hugs For Monsters 6. Razorbraille 7. Boompa 8. The Toke 9. Lionite 10. Creative People 11. Julius Mattsson 12. Diego Latorre 13. Envira Media 14. Matt Mullenweg 15. RVLT 16. Leihu 17. Polar Gold 18. Feed Stich 19. Contrast 20. Shaun Inman 21. A Simple Measure 22. Foehn 23. Lennart Basler 24. Inner Metro Green 25. Dreamer Lines 26. Atebits 27. Icon-PR 28. Basil Gloo 29. Miller 30. Interactive And Design 31. Try Traingle 32. Dazonet 33. Island ECC 34. Jesus Rodrigvez 35. The Curtis 36. DibuSoft 37. Knoxville 38. Biola Undergrad 39. Colazione Damichy 40. Mplusz 1 / 1
网站界面（UI）设计2016年春考试真题（带答案） 一、多选题 1．关于扁平化风格图标的表述正确的有（ABCD） A、简约风格 B、有利于提高系统性能 C、不强调质感与细节的描摹 D、强调功能性 2．在开展设计工作之前，我们力求做到知己知彼，这里的“彼”指（ABCD ） A. 对所服务的客户的认知，和客户保持良好的沟通 B. 对网站目标用户的深入理解 C. 对竞争对手的了解 D. 对网站目标用户的深入理解 3．关于全局导航的描述正确的有（ACD ） A. 出现在网站所有的页面中 B. 位置一定在网页的顶部 C. 体现网站最重要的内容层次结构 D. 帮助用户在网站中迅速定位 4．对于用户导向原则在网站界面设计中的具体体现描述准确的是（ABCD ） A. 明确体现网站的核心功能和服务 B. 符合用户在使用网站时的心智模型和场景中的思维状态 C. 尊重人机交互中用户的生理特征 D. 符合用户的认知习惯 5．下列关于心智模型表述准确的有（ABCD ） A. 根据用户的心智模型来选择信息的组织方式是优秀网站成功的重要因素。 B. 人们通常基于自身经验和现有知识来理解新事物。 C. 有助于用户理解如何使用网站的设计属于符合心智模型的设计。 D. 重视情景因素对用户行为的影响。
6．文字图层中的文字信息哪些可以进行修改和编辑？( ABC ) A. 文字颜色 B. 文字内容，如加字或减字 C. 文字大小 D. 将文字图层转换为像素图层后可以改变文字的字体 7．建立有效布局的手段有（ABCD ） A. 有选择的展现信息，分清主次 B. 预先对信息进行科学的分类，整理好优先级 C. 遵循用户习惯，同时给予适当的引导推荐 D. 不同信息找到最合适的表现方式 8．下列可以帮助加强色彩对比的方法有（ABD ） A. 色相互补 B. 明度差异大 C. 色相临近 D. 饱和度差异大 9．如何让界面中的重要元素变得突出，下列处理手段合理的有（ABC ） A. 使用鲜艳的色彩 B. 注意周围的留白 C. 放在用户浏览网页视线中的重要位置 D. 越大越好 10．当选择“文件>新建”命令，在弹出的“新建”对话框中可设定下列哪些选项？（ABC ） A. 图像的高度和宽度 B. 图像的分辨率 C. 图像的色彩模式 D. 图像的标尺单位 11．下列哪些方法可以产生新图层？（BCD ） A. 双击图层控制调板的空白处，在弹出的对话框中进行设定选择新图层命令 B. 单击图层调板下方的新图层按钮 C. 使用鼠标将将图像从当前窗口中拖动到另一个图像窗口中 D. 使用文字工具在图像中添加文字
如何做出好的网页设计如何做出优秀的网页设计 如何做出有创意的网页设计 网页设计是最追赶时髦的行业，或者说，设计师也是时髦的制造者。我们一直敏感的感知着流行的设计趋势，然后将这些流行的新元素纳入我们的设计，这些新元素让我们网站变得妙趣横生。但是网页设计师也并不是一味地追求新奇和流行，有些技巧和观念，不管在什么时候都一样有用。 下面我们来看一下这些网页设计中不会过时的通用技巧。 1、多一点留白 一直都有人在提倡简约设计，这些年被狂热追捧的极简主义也印证了这个观点，从logo 到名片再到网站，每一处都展示着简约的魅力。 简约设计的一个重要技巧就是留白，似有似无，欲说还休，话说在没有着笔的地方，这无疑比100%的页面利用更吸引人。留白还有一种称呼叫做“负空间”，将负空间应用在web 设计中会产生很棒的效果，因为不需要将那么多元素都呈现在界面上，人们也在逐渐适应这一点。当我们访问网站时很清楚自己需要什么，希望不怎么搜索就能找到目标信息。 所以，不要总是想着怎样通过设计创造空间，有的时候“无招胜有招”，恰当的精简也能得到期望的设计效果。 2、大字号有大效果 如今，网页设计师们不仅设计传统的电脑显示屏，还有平板电脑和手机，即使是在巴掌大小的空间网站也要清晰可见，所以有很多设计师在进行web设计时都采用增大字号和图片的方式，但是这些方式在技术上还有所限制。随着技术的进步，电子终端的分辨率越来越高，支持的像素也越来越高，可以应用视觉吸引力更大的技巧了。 超大字体设计能够吸引人们的注意力，这和简洁设计有异曲同工之妙，这是让我们摆脱
平日里各种信息干扰的另外一种有效途径！ 我们已经尝试过大尺寸的图片，现在可以试试大小在64px到72px之间的文字。建议使用FitText这样的工具，这样文字就能自适应不同尺寸的屏幕了。 3、动态图片 随着各种技术的发展，在web设计中添加动态图片和视频变得越来越容易，这并不会占用很多空间，但是能达到静态方式达不到的效果，因此，在web设计中上述元素会逐渐成为一种常态。动态效果能够强有力地吸引人们的注意力，能让那些普通的图片和滚动条变得富有魅力。 想象一下下面两张图片中食物和人物的运动效果，是不是顿时觉得画面活泼有趣了起来？ 现在进行设计的时候设计师不仅可以使用静态图片，还能使用动态图片，这无疑为设计师开启了一片广阔的天地。 4、少用图片库 如今互联网上纷呈的各色图片无疑提高了人们的审美品位，人们早就不稀罕炫目的时尚大片了，他们希望看到真实的产品信息。而那种将产品照片叠在纯白背景上的单纯风格也已经过时，产品还要搭配到位的信息，人们想要了解产品的个性和背后的故事。 网站作为展示产品的平台，如何展示恰当的展现产品的真实性和个性就成了设计师们要考虑的重要问题，总用那些单纯的产品照片或者经过修饰的时尚大片并不是个好主意，要敢于使用展示产品真实面貌的图片并通过信息的整合来讲述产品设计背后的故事。 所以，可以买一部相机或者与一位摄影师配合，这样才能获得与web设计理念相匹配的图片，也能帮助公司提升产品销量。 5、善于利用背景
摘要： 目的：研究大数据技术影响下扁平化设计的创新特点，并推测出扁平化设计在未来设计中的创新趋势。方法：通过set因素分析法分析扁平化设计是时代趋势的产物，以及大数据技术对扁平化设计的影响，从而提出扁平化设计在大数据技术下的创新性。结论：建立扁平化设计在技术与现代审美观念和设计风格衍变的共同作用下可能产生的未来设计风格模型。 关键词： 大数据交互设计现代审美理念扁平化设计 近年来，随着大数据技术的发展进步，使其成为继互联网、云计算之后又一次颠覆性的科技革命，大数据的推广应用受到世界的普遍关注。基于大数据技术的交互、产品等设计更是上升到一个新的高度，可以说这场因技术而衍生的数据革命对应用设计和大众生活方式产生了深刻而广泛的影响，同时，也赋予了大数据时代的产品设计新特征，即转型成产品与产品、人与产品之间交互信息的传达。作为交互设计之一的界面设计更是融合到了人们的生活实际中，因而扁平化界面设计和层级结构设计在时代背景、科技因素、经济特点的共同作用下成为时代趋势的产物，并在设计应用中充分地发挥着自己独特的优势。 1.大数据对扁平化设计的影响和作用 新时代下，正在积极开展地智慧城市和智慧生活的建设体现了人机物三者之间的有效融合，这种融合使得信息科技渗透到经济和社会生活的方方面面。信息的关联渗透使我们的生活与创造都呈现出一种可量化、可推演的趋势，这种信息关联的变化趋势为大数据奠定了基础，大数据就是基于人们生产和生活中产生的数据。通过大数据对收集来的用户信息进行挖掘和分析，进而得出对于用户最有价值的信息，这可以为设计服务产业提供最有利的经验指导和理性分析，从而实现更好的智能高效的用户体验。大数据对扁平化设计的影响和作用的关系见图1，表明大数据推动了产业的智能化发展和交流，扁平化设计是作为视觉交互设计受到影响和作用的重要体现。 “交互设计”的概念最初是由英国著名的产品设计师比尔.摩格理吉（bill moggridge，1943-2012）在1984年的一次设计会议上提出来的。交互设计依托信息技术开展实施，目的是为了解决智能产品的使用问题。随着信息科技的发展与进步，由海量信息汇总形成的大数据开始逐渐渗透到现代社会的各个领域，数据成为信息化社会不可或缺的重要生产要素，人们的物质和精神生活也将构建在大数据之上，并与云计算、互联网形成新的并联形式的经济生活形态系统。这种并联系统模型，通过信息传感中心，将产品的信息结构连接成一个既相互融合又可不断向四周延伸扩展的整体，从而实现信息网络的全面覆盖。信息网络的全面覆盖便于收集来自生产、生活、社会等的信息，通过大数据技术能够深度挖掘用户的需求和价值机会，进而分析了解对于用户最有价值的信息。这对设计服务产业提供更加精准、深度的指导，以及更好的改善、提高和实现智能高效的用户体验。 扁平化设计是随着信息化时代的到来，依据大数据技术对交互设计的分析处理而应运而生的视觉交互界面风格设计。时代造就了一种风格特点的形成与发展，在信息化时代背景下，见图2，根据set因素分析扁平化设计所处的社会（s）、经济（e）、科技（t）特点，从而更好地理解扁平化设计是信息化时代趋势的产物。 2.大数据影响下扁平化设计的创新性 扁平化设计简约的抽象图形，鲜明的色彩搭配给人以深刻的印象和视觉冲击力，它没有繁琐的装饰，也没有逼真的视觉形象，但就是这种简单纯粹给人以干净简约的视觉和心理享受。在大数据的影响和作用下，扁平化设计呈现出区别于其他设计风格的创新性。 2.1抽象化的功能性表达 根据上述提到的set因素分析，抽象化的扁平化设计的出现是时代趋势的产物，同时也
扁平化设计风格 来源:亦锐营销策划 对于扁平化这个词，相信设计师们都不陌生。尤其从上一年开始，扁平化设计飞速流行。而所谓扁平化，就是去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D 效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。 扁平化的设计，尤其是手机的系统直接体现在：更少的按钮和选项，这样使得UI界面变得更加干净整齐，使用起来格外简洁，从而带给用户更加良好的操作体验。因为可以更加简单直接地将信息和事物的工作方式展示出来，所以可以有效减少认知障碍的产生。扁平化的设计，在移动系统上不仅界面美观、简洁，而且还能达到降低功耗、延长待机时间和提高运算速度的效果。 接下来就让我们先欣赏一组扁平化风格图标： 简单看了一些扁平化风格图标之后是不是瞬间被这种简洁明快的风格所俘虏了呢别着急，接下来再来膜拜一下大神们的扁平化插画： 看完这些是不是觉得又清新又简单呢，其实扁平化设计看似简单，对于设计师来说却也是不小的挑战，所谓越简单越难。想要做好扁平化，不仅要对图形有准确的把握，抓住主要特征化繁为简，还要对色彩搭配、元素关系有独到的见解，所设计的场景合理、画面简洁、配色明快。这些问题都是说起来简单，做起来难。想要成功，只有不断的练习，反复实践操作，才能出来好的作品。
看完这些元素、图形展现之后，让我们来看看扁平化风格在不同设计中的应用吧: 通过以上案例，不难看出，扁平化在UI、网页、ppt等方面都有广泛的应用，而扁平化作为一种新形式的视觉风格，也越来越成熟。如何将新事物良好运用，是设计师值得研究的事情。亦锐也正是聚集了这样一群敢于研究，勇于探索新事物的人。我们会用自己的努力，保证出品，对客户负责，对自己负责
名词解释和问答可以通过网页浏览器来访问网站，获取自己需要的资讯或精确的控制。②决定项目放置的位置。 ③将本地站点和远程站点设置为相同的结构。者享受网络服务。“补间”动画是制作好若干关键帧的画面，由位图也称为点阵图或像素图，计算机屏幕上的图位图：补间动画：④使用合理的文件名称。Flash模板：像是由屏幕上的发光点构成的。每个点用二进制数据来描实质上指创建其他文档的基础文档，可以使网站通过计算生成中间各帧，使得画面从一个关键帧过 2、请简述述其颜色与亮度等信息，这些点是离散的，类似于矩阵，Dreamweaver的功能。渡到另一个关键帧。和网页具有统一的结构和外观。①创建和编辑页面元素。用来制作可重复使用的，独立于主影片多个像素的色彩组合就形成了图像。影片剪辑元件：轨迹动画：是运动动画的扩展，指的是物体沿一定的路②编辑HTML。线进行移动，关键帧：关键帧就是在时间轴中记录动画画面变化的帧。通常需要两个图层，一个是轨迹层，用于确“时间轴”的动画片断。主页：就是进入网站后的第一个页面，也称首页，是进入定运动物体的移动路线；另一个就是被引导层，用于制作热点：所谓热点又称图象映像，是出现在Web页面上的③站点管理。 ④插入Fireworks文件和Flash动画。一个图形或一组图形。运动物体的运动动画。两个图层之间必须是相互关联的。网站中其它页面的“入口”。 ⑤启动和编辑媒体。是站点管理员和用户之间进行信息交流的一种主超媒体：超媒体是一种包含文字、影象、图片、动画、表单：超级链接：在本质上属于一个网页的一部分，它是一种3、Fireworks中的图象切割的优点有哪些？声音等媒体的图、文、声、像并茂的文件。要工具，是一个由文本和表单域组成的集合。允许我们同其他网页或站点之间进行连接的元素。主要由 ①可以单独优化图形的每个部分，从而使文件更小，装载HTML（即DHTML）是指与按钮元件：用于创建响应鼠标单击、移动或其他动作的HTML动态HTML：两部分组成：超级链接源和超级链接目标。动态速度更快。交互按钮。形变动画：指的是由一种图形逐渐转换为另外一种图形，特定的脚本语言的组合，用户可以使用该脚本语言更改②可以将图象的某个部分输出为（空虚拟链接：所谓虚拟链接实际上是一个未设计的链接GIF元素的样式或定位属性。HTML 文件，而将其他部末两个关键帧，创建形变动画只要确定首、然后再使用“形分输出为JPEG256Fireworks蒙版（）：所谓蒙版实际上是一幅色灰度图文件，从而获得更佳的图象效果。链接）生成中间帧。状补间”但是首、末两个关键帧的对象必须，利用该链接可激活页面上的对象或文本。③可以设计能重复使用同一图形中不同部分的页面，象，它必须与图层的基本内容配合才能发挥作用。其中，框架网页实际上包括了多个网页，一个是主改变框架网页：是形状。具有不同内容的切片。，黑蒙版中的白色区域为透明区（即完全显示基本内容）框架网页，该网页定义了各框架的名称、位置及尺寸等，交互式动画：交互式动画是指播放时支撑时间响应和交互用户也可以编辑和替换单个切片图形，而不必卸载一幅图象中的所有切片。它在浏览器中不显示；另外的网页则是页面设计网页。功能的作品，也就是说，动画播放时能够受到某种控制，色区域为非透明区（即该区域显示为白色），而灰色为半 ④可以利用切片创建滚动图象。表单：而不是像普通动画那样从头到尾进行播放。透明区。表单是网页中站点服务器处理的一组数据输入域。 4、简述允许把网站中需要重复使用或需要库项目：Dreamweave表格与层：表格是网页上的一行或多行单元格，用来组Flash中“时间轴”的主要用途。帧帧动画是将每一帧画面制作好，然后生成帧-帧动画：“时间轴”面板主要由于组织和控制影片中图层和帧的内织网页的布局或有系统地布置数据。存入库（如图像、经常更新的页面元素文本或其他对象）动画效果的动画。容，中用来鉴别网页元素使这些内容随着时间的推移而发生相应的变化。时间用于制作静态图象，以及附属于主影片“时图形元件：HTMLHTML HTML标记：标记是存入库中的元素就叫库项目。中，库项目实质上是网页中轴最重要的组织部分是帧、图层和播放头。的类型、格式和外观的文本字符串。间轴”的可重复使用的动画片段。代码。的一段HTML API插件：所谓站点地图，是指由系统自动按各网页之：是指在一幅图片上的不同位置创建不同的热点（热区）站点地图：插件也是程序，是用遵循一定规范的编写出从而是整个网站的组织间的链接关系生成的一个示意图，链接，添加交互响应的技术。Web浏览器能够直接调用插件代码。来的，锚记是网页内的定位标记，类似于书签，通过锚锚记：Flash Flash动画：一目了然。动画是建立在流式媒体技术上的动画格式，主要由矢量图形组成，但也可以包括输入的视频、是指具有超链接功能的文件，用鼠标单击记能够控制在同一网页内的跳转。超文本文件：矢量图也称为向量图，用一系列计算机指令来矢量图：GIF 位图图形与声音。它区别于动画的最大特点是具有便可得到该关键字的相关该文件中已经定义好的关键字，描述和记录的一幅图，一幅图可分解为一系列由点、线、解释。交互功能。矢量图记录的是对象的几何形状、面等组成的子图，所谓站点，可以看作是一系列文档的组合，这些线条站点：5、简述Flash 中“图层”设置的目的及特点。简答题粗细和色彩等。文档之间通过各种链接关联起来。①当用户在一个图层中进行绘画和编辑时，它不会影响其、如何规划站点结构？1的全称应该是层叠样式表。它CSS样式表HTML使用根据一定的规则，就是指在因特网上，网站：样式表：CSS 他图层的内容。①归类站点。背景和其他文图效果实现更加颜色、字体、用于对布局、人们等工具制作的用於展示特定内容的相关网页的集合。． ②图层是透明的，透过图层上没有对象的区域可以看到下件都可以有自己的“时间轴”、场景和完整的图层。档中的设计。中文本后，按下Ctrl+T键，在打开的快速标签编写器中输入marquee标签（或者直接在代码视图中写入相关标面图层上的对象。②实例是元件在场景中的具体应用，利用同一个元件可以②库用于存放页面元素，如图像、文本或其他对象等。这签），完成相关设置。些元素通常广泛应用于整个站点，并能够被重复使用或更③图层的数目仅受计算机内存的限制，并且增加图层的数创建出若干个不同颜色、大小和功能的实例。 17、试述新。Flash元件的类型及其作用。③当元件被修改时，场景中的实例也将随着被更新。量不会增加最终输出的影片文件大小。 ①图形元件。、在Flash中，对影片进行优化的方法有哪些？影片中使用声音有哪些技巧？10④用户在“时间轴”控制面板设置动画时都是针对图层而、在
扁平化设计在网页设计中的运用研究 发表时间：2020-02-27T15:54:03.653Z 来源：《建筑细部》2019年第17期作者：辛玮[导读] 就已经用到了简单的形状、清晰的排版以及亮丽的色彩对比，而且少了复杂的纹理以及细节方面的设计。 上海外服（山东）人力资源服务有限公司山东省济南市 250101 摘要：在互联网快速进步以及不断发展的时代背景下，人们对网站的依赖程度越来越高，不管是发布信息还是资料的查询，都需要借助网站来实现，然而，网页设计水平的高低会对用户的体验效果产生直接的影响，决定人们浏览网站的时间。最近这些年，在网页设计工作中，扁平化的设计使用越来越广泛，而且这种新的设计风格逐渐受到了越来越多用户的欢迎。起初，扁平化的设计方法主要是用来设计 手机网页，因此，在网页设计中运用扁平化设计方法，很多细节都需要加以完善，例如，在网页设计中运用扁平化设计的注意方法以及相关的注意事项等。鉴于此，本文就扁平化设计在网页设计中的运用展开探讨，以期为相关工作起到参考作用。 关键词：扁平化设计；网页设计；运用方法 1.扁平化设计的特征 扁平化设计，即去掉阴影、透明以及纹理等各种装饰，用符号化、抽象化以及简洁化的设计元素将其替代，从而展示相关信息使其成为一种设计风格。在对扁平化的信息进行组织的过程中，信息结构也主要是借助扁而宽的结构为主，风格上具有色彩丰富并且质朴的特点。在运用拟物化设计的基础之上，能够强化阴影、高光以及纹理等各种效果，和扁平化的设计风格相比，拟物化的设计风格具有一定的差别。通过分析目前扁平化的设计情况可以发现，扁平化的设计具有排版简洁易读、功能强大、形状以及元素比较简单并且细节受关注程度较高的特点。在用户界面设计（UI）中广泛应用扁平化设计，能够简化用户的阅读，从而有效避免产生阅读障碍的现象[1]。目前，扁平化的设计在手机领域的运用较为广泛，但是，网站设计工作中扁平化的设计趋势也逐渐发展起来，因扁平化的设计具有干净利落的特点，并且时代气息比较强，能够让设计师注重信息以及内容的打造，这也是扁平化设计逐渐被应用到网页设计中的关键原因。运用具有扁平化设计风格的产品，不仅具有简洁明了的特点，而且也不易过时。立足于扁平化的设计发展过程可以发现，这种设计理念主要来自于瑞士的一种服装设计。即使扁平化的设计主要以邮票、海报以及书籍装帧等形式展现，但是，使用扁平化的设计能够拓宽数字设计的范围，特别是将其运用到UI领域中，如今，扁平化设计让人最为熟悉的使用是将其用在微软电脑上，于2008在微软所推出的电脑设计中，就已经用到了简单的形状、清晰的排版以及亮丽的色彩对比，而且少了复杂的纹理以及细节方面的设计。 2.扁平化风格在网页设计中的运用 在现代的计算机领域中，网页设计是一项比较重要的设计内容，其不仅可以在视觉上实现语言的传导，而且能够立足于不同的排版以及对用户视觉视角的不同转变，确保用户在运用的过程中可以产生视觉特效，使其能够享受视觉特效，保障排版布局的合理性。 2.1布局排版 在排版的过程中，扁平化的设计需要编排首页的导航以及标识，通常情况下会在主要的视觉区选择首页的标示，并且对导航的内容予以简化，在设计的过程中，图片会放在大面积的排版中，并且在其中放置一些用户觉得有趣的内容，使用户在进入到主页的时候，可以直接接触到感兴趣的内容，从而帮助用户开展更加快捷的活动[2]。 2.2内容组织 在实施设计工作的过程中，扁平化风格的运用，并不是简化设计的内容，而是体现出设计工作的核心，在受到新的设计风格影响的基础之上，以网页设计的内容为主体，不管是外观如何吸引用户的视觉，但是从内容的设计上，仍然需要深入考虑，确保网页的内容可以在一定程度上能够吸引用户的注意。 2.3网页栏目 该项内容也就是对网页中的一些内容加以归类，并且突出网页中的一些核心内容，确保在用户进入到网站中之后，能够找出自身所需的内容，便于用户直接参与到体验中[3]。 2.4交互性动画 交互性动画即在鼠标停留在视频或者图片上的时候，可以直接将图片或者视频中所涵盖的信息显示出来，此外，还存在一种点、线之间的交互性设计，借助鼠标能够将点、线拖动，从而形成多样化的图形内容，从逻辑层面上而言，这种做法可以在一定程度上减少繁琐的层次，让用户在使用的时候能够更加快速简洁。 2.5首页设计 通常情况下，用户在浏览网页的时候，首先需要进入到网页的首界面，在此过程中，需要设计者确保首页界面能够及时吸引用户的视觉，确保用户在浏览网页的同时，能够找到自己所关注的内容。 2.6标识设计 这一方面的内容在网页中的特定位置有所展示，通常情况下，主要将其放置在网页的左上方位置处，为了能够便于用户寻找，同样也是很多网页开展设计工作的关键方式。 2.7导航设计 在实施导航设计工作的过程中，需要注重用户使用的便捷性，为了避免用户在使用的过程中出现迷路的现象，在对导航的功能进行设置的时候，就需要选择明显的地方使其作为导航的位置，与此同时，还需要去除导航的一些渐变性的效果，以简单的色彩为主要背景，并且在上面附加上导航的说明，以此来确保用户能够尽快对导航的标识予以识别。 2.8文本设计 为了确保使用者在运用的过程中可以快速提炼出有用的信息，在对这些内容进行设计的时候，就需要考虑到实用性的特点，并且借助扁平化的设计理念，对网页中的主要内容文字进行特殊的划分，只有这样才能够确保用户更加高效地分辨选择相关内容，从而达到提升用户使用效率的目的[4]。