扁平化设计终极指南

   苹果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 Freepik.com 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

  Monotone flat UI kit (free)

  简约的配色也可以非常出众。Monotone flat UI kit (free),相比前面几个,这款套件的用色算是一种进步。


  图08

  Vertical Infinity (free)

  Vertical 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

  扁平化图标

  扁平化设计的图标无处不在,资源也非常丰富。跟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

  其他类扁平化资源

  Apple product templates (free)

  想在苹果的设备上展示一下设计作品吗?试试Apple template from MediaLoot吧!


  图25

时间: 2025-01-20 13:44:26

扁平化设计终极指南的相关文章

扁平化设计与质感设计: 他们有什么不同?

  两种相似的设计风格,一个基于另一个.一个是新热事物,另一个,有人猜测,已经以自己的方式成为一种时尚.一个是自发的-适应设计的趋势,另一个却是有目标-专用的设计指导规范. 你可能明白了扁平化与质感设计之间的冲突了. 但是,他们之间不同是什么呢,本质上是一个比另一个更好?在某些用途上更好?实际上,一些人想知道它们之间的差别有多大,让我们从最基本的开始:拟物化设计的身影出现在每一个身上. 拟物化设计, 在这个背景下,设计是为了模拟真实的物理世界.通常,这需要设计的在线应用的形式看起来像他们的真实世

扁平化设计和MATERIAL DESIGN有什么不一样?

  两种相似的设计风格,一个基于另一个.一个是新热事物,另一个,有人猜测,已经以自己的方式成为一种时尚.一个是自发的--适应设计的趋势,另一个却是有目标--专用的设计指导规范. 你可能明白了扁平化与Material Design之间的冲突了. 但是,他们之间不同是什么呢,本质上是一个比另一个更好?在某些用途上更好?实际上,一些人想知道它们之间的差别有多大,让我们从最基本的开始:拟物化设计的身影出现在每一个身上. 拟物化设计 拟物化设计, 在这个背景下,设计是为了模拟真实的物理世界.通常,这需要设

扁平化设计美学:以Facebook为例的设计趋势

最近一个在网页和UI设计上逐渐增长的趋势是"扁平化设计"的使用,而且现在已经是一个非常热门的话题了.满大街的现场讨论会以及大量的教程.我常常被吸引到极简主义设计中,所以扁平化设计是一种很自然的给我启发的设计美学,特别是在最近的一个项目的重新设计中. 在本文中,我将讨论下什么是扁平化设计.回顾其它设计方式,并提供如何在你自己的设计中实现的一些技巧. 什么是扁平化设计? 实际上,扁平化设计意味着在设计中不使用常用的渐变.像素完美的阴影,然后通常是近年来蔓延的用来实现看起来"平面&

“类扁平化设计”时代到来

本文作者张悦是PICOOC公司创始人,PICOOC研发的第一款将于近期上市的智能设备是名叫Latin的智能秤,具体可见我们之前的报道.张悦之前还创办过移动应用开发培训公司博看文思. 前几天iOS 7正式版终于发布, 用户对其扁平化设计风格褒贬不一.其实我们早在三个月前就在 PICOOC 的 APP 上率先"痛苦地"决定了采用"类扁平化设计"(稍后会给出解释).基于 PICOOC 系列产品的特性,当时整个 App 的 GUI 上遇到了很多的问题和挑战. 比如Latin

扁平化设计技巧:中空的图标用户体验

文章描述:扁平化设计反思:"中空图标"很难被理解吗? 随着IOS7的发布,苹果的界面做出了有史以来最大的改变.IOS7的设计语言强调了高光.极简,包括所有的按键以及app图标. 这个改变使苹果的操作系统更加时尚.简单,同时也影响了人们对扁平化的理解.当然有人欢喜有人愁,一些人对此颇有微词,认为这一改变并没有使IOS系统向好的方面发展. 使用IOS7的用户都知道,这款操作系统中所有的图标都是简单的线条构成,也正是这种"过于简单化"的设计引起了重大争议.尽管现在这些图标

扁平化设计:扁平化UI套件推荐

文章描述:浅谈扁平化设计-– keep it simple. 2013可以说是扁平化设计的一年. 扁平化时代之前,设计师的作品往往非常的写实,非常的有立体感!但是现在即便是拟物设计的引领者苹果,也不得不转变设计思路,在iOS 7上开始着手扁平化设计的探索. 什么是扁平化设计? 对于设计师来说,扁平化设计是一种实打实的设计风格,不要花招,不要粉饰.从整体的角度来讲,扁平化设计是一种极简主义美学,附以明亮柔和的色彩,最后配上粗重醒目,而风格又复古的字体.扁平化设计简化了诸如按钮.图标一类的界面元素.

扁平化设计资源:适合扁平化设计的圆形图标

文章描述:Codrops 出品的 9款适合扁平化设计的圆形图标悬浮(Hover)效果,原demo效果在此.从这些效果中可以看到,即使在扁平化设计中,魔鬼依旧藏在细节里. Codrops 出品的 9款适合扁平化设计的圆形图标悬浮(Hover)效果,原demo效果在此.从这些效果中可以看到,即使在扁平化设计中,魔鬼依旧藏在细节里. 1. 填充色变换 2. 填充色收缩 3. 填充色闪换 4. 描边由实变虚 5. 图标飞入效果 6. 图标内部旋转 7. 描边阴影闪现 8. 边界呼吸效果 9. 描边扩展下

web设计发展趋势:深入学习扁平化设计

文章描述:扁平设计是根据平面的样式来定义的:通过移除额外的元素比如阴影,斜边,纹理和创建3D样式的梯度等等来简化界面. 扁平化设计或者说扁平化的UI风格,是今年最受关注的一个web和平面设计的发展趋势.而经常被拿来与扁平化做比较的是拟物化设计,两者的设计原则和设计风格完全相反. 设计师们或许会有疑惑,这究竟是一种能持续下去的设计趋势呢?还是只能是风行一时,昙花一现.暂且不谈未来和不管这些反对的声音,大多数设计师还是很想在自己的工作中尝试使用这一设计趋势.在这里,我们将深入了解什么是扁平化风格,追

网页扁平化设计的五个最典型的特征

文章描述:如今设计界最炙手可热的明星大概就是扁平化设计了吧,关于它的讨论至今都没有冷却的迹象.诸多设计师分成了泾渭分明的两个阵营,一边努力把扁平化做到极致,一面对其不屑一顾. Kryptoners:如今设计界最炙手可热的明星大概就是扁平化设计了吧,关于它的讨论至今都没有冷却的迹象.诸多设计师分成了泾渭分明的两个阵营,一边努力把扁平化做到极致,一面对其不屑一顾. 我是个骑墙派,不支持也不反对,在我看来,优秀的设计的定义就是好用,只要能设计出优秀的产品,我可以采用任何方式,扁平化也是其中之一.但是必