您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

扁平化设计终极指南

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   苹果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 应用广泛,种类齐全,用色非常规。可定制化。支持视网膜。

不收藏都不好意思!扁平化设计终极指南
<