扁平化设计

扁平化设计 苹果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 扁平化设计:UI Kits(二)回顶部 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 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 Flat design flyer template ($6) Flat Design Flyer Template 能够将你的网站包装成适合打印的外观，CMYK防溢色。 图32 Flavor business card ($6) Flavor business card template 打造与网站风格配套的名片，试试这个吧。 图33 Pricing tables ($4) set of monotone tables使用Twitter Bootstrap构建，用来为网站增添价目表。 图34 5扁平化设计:WordPress主题(一)回顶部 WordPress主题 WordPress主题能够帮助网站迅速的实现风格化，而为建站者节省了大量的时间。一般来说，好的主题都要付费，现在有很多设计师在从事WordPress主题设计，如果作品确实好，付费吧。乱糟糟的页面会让用户感觉你的内容低质。所以尽量保持页面的清爽大方，切风格一致。付费主题不但好用，且能够立即使用。建议购买前最好列出一个需求清单，这样挑选就方便多了。不过如果是新手，免费主题也是个不错的选择，使用免费主题建站很简单，也很有意思。如果需求更进一步，对于选项、灵活度、支持要求更好，这时候可以考虑下付费版了。 Duena (free) this theme 明亮、冰激凌般的配色。 图35 Fizz (free) responsive flat-style theme干净的线条，明亮的用色。清爽而又略带材质感的背景。 图36 Current (free) Current 各个方面都不错，适合用来推广新产品。 图37 Attitude (free) s simple and professional theme 似扁平化设计，相较其他免费主题，自由度更高。 图38 Bloq (free) Bloq 扁平化的设计，扁平化的用色。 图39 Frontier (free) This flat theme极简主义风格的设计，可添加菜单和横幅。 图40 MetroBlog (free) MetroBlog 区块，明色——但也收啊少有一点渐变，因此我认为是似扁平化设计。 图41 Viper (free) Viper 适用于电商网站，清爽大气。 图42 SimpleCorp (free) this theme 似扁平化设计 图43 BirdFlat (free) flexible blog theme 非常灵活的一套主题。 图44 SympalPress (free) This free theme简单有形，似扁平化的图标，精心选择的字体。 图45 Tetris (free) Tetris区块式、卡片式布局，完美呈现图像的视觉效果。 图46 6扁平化设计:WordPress主题(二)回顶部 Argo ($40) Argo 小方块布局，无论是个人还是商用，都不错。线条清晰，按钮简约。 图47 Business Essentials ($45) This simple, yet classic theme 很适合商用 图48 Illustrate ($45) This theme 适用于个人作品展示。 图49 Modern Metro ($40) Modern Metro可定制，和Metro UI非常匹配，响应式。 图50 Shift ($35) Shift 可定制，色彩丰富，支持视网膜，响应式。 图51 Salmon & Cream ($75) This theme 线条分明。可定制，响应式，支持视网膜。 图52 Candy ($35) This fully-responsive theme 适用于个人作品展示。 图53 Alfie ($40) This theme 使用Bootstrap构建，代码精简，提供多种图标、背景色、布局的选择。 图54 Biggie ($7) this flat theme 用色是亮点，易于触控。 图55 Bonbon ($49) Bonbon 色彩明亮，内含的图标很棒，可定化。 图56 Flat ($39) Flat 柔和色色彩，而不是明亮，这使得这套主题很有个性。 图57 7扁平化设计:WordPress主题(三)回顶部 News ($45) news卡片式布局，照片+文字即可完成内容的传递，色彩鲜明，风格至简。 图58 Coffee & Cream ($40) Coffee & Cream ($40)可选项丰富，提供两个导航选项。完全响应式。 图59 Flat Admin ($18) this flat theme整合了多种表格、图表，用来展示数据非常不错，可定制。 图60 Sketch ($40) single-page theme 设计的充满能量感，鼓励滚动式浏览，可定制，内含社交网络链接功能。似扁平化设计。 图61 Showy ($35) Showy(华丽的)一点也不华丽，反而非常简单。 图62 Evolux ($45) Evolux ($45) 用来展示产品和设计非常棒。采用了超大图、简约的风格，和粗字体。 图63 Jobify ($55) Jobify 就业专用。扁平化风格设计。具有扁平化的字体、明亮的色彩、精准的网格线布局、响应式设计等特性，并可以和其它工作类套件整合。 图64 MetroFolio ($40) MetroFolio Metro化、卡片化布局，非常易用的用户界面，可定制化，可以用来进行设计师个人作品展示。 图65 FlatPack ($55) FlatPack多种模板和选项可供选择，主要是商用。 图66 Metrolium ($45) Metrolium ($45) 似扁平化设计，色彩块的使用非常棒。可实时预览，选项丰富。 图67 Flat Portfolio ($35) Flat Portfolio视网膜显示下效果很棒。定制化主题，响应式设计，可使用Google Fonts。 图68 8扁平化设计:WordPress主题(四)回顶部 Hypertext ($40) Hypertext 提供更高级的管理选项，且完全响应式设计，定制化高。 图69 Fuse ($45) Fuse 以滑动图片为设计核心，细节上采用扁平化设计。 图70 Mineral ($45) Mineral具备灵活的AJAX图库，响应式设计，多种外观选择。 图71 Ink ($49) Ink 巧妙了使用扁平化设计中图片的布局和色彩的应用，悬停动效非常酷。 图72 Amada ($40) Amada 简单线条，简单颜色，简单的字体，极简主义理念由此而生。响应式，视网膜显示支持，滚动会 有额外的惊喜。 图73 Glider ($45) Glider 能帮你解决图标问题。960套适量图标，支持多语言。 图74 Hexagonal ($40) almost flat theme 似扁平化设计主题，极简主义，看起来非常的专业。响应式设计，提供多种布局选择。 图75 Emerald ($40) Emerald 简单，令人印象深刻的滚动效果。 图76 Kumaon ($40) Kumaon 适合商用，包含300中扁平化图标和多种多样的表格。 图77 Anubis ($40) Anubis 极其有个性的字体选择和创造性的色彩。 图78 Red Star ($45) . The theme 可关闭的响应式设计，模版页很不错。 图79 Forest ($40) Forest 该主题看起来很棒，代码无懈可击。 图80 9扁平化设计:WordPress主题(五)回顶部 Panes ($40) Panes, 使用了扁平化设计中很流行的两种色彩——亮紫以及翡翠绿。单页设计，整合了谷歌地图，可自定义颜色和字体。卡片式滚动效果。 图81 Nova ($45) Nova 展示了如何在扁平化设计中使用新奇的字体。主题中所有的元素都使用较亮的色彩，简单的线条。 图82 Red Sky ($40) Red Sky 是不像主题的主题。高度注重视觉效果的布局，响应式设计，浓郁的色彩。这个单页主题采用了三栏式布局。 图83 Lambo ($45) Lambo 作为摄影主题，非常强调字体和色彩。简单的字体和亮彩给予了一种扁平化风格的感觉。 图84 Righter ($2) This theme 适合博客和文字类网站。超级简单，代码清爽，毫无修饰。 图85 DCJune ($29) grid-style theme 网格线风格主题，区块分割非常明显，能给于图片更多的展示空间。超级清爽的主题，响应式设计。 图86 FlatCo ($45) FlatCo theme 形式包装的很到位，内含300个扁平化图标，多种图表元素。 形式包装的很到位，内含300个扁平化图标，多种图表元素。 图87 Renova ($40) Renova 简单、美丽，具备扁平化设计的真谛。图标和形状非常的基本，可定制，包含简单的动效。 图88 Octavus ($40) Octavus外观上很追随潮流，使用了扁平化设计，但是浏览体验却并不“流行”。图像和色彩块的混合达到了一种易于使用的用户体验。响应式设计，支持视网膜显示。 图89 10扁平化设计:模板回顶部 模板 扁平化设计模板同时也大举进军设计业，就连最新手的网页设计师也能利用模板复制出简单的流行风格。 Hosting template (free) Hosting template (free) 可能需要你多花点功夫，但是包含了扁平化风格网站的基本框架。采用了流行的元素和色彩，可PSD下载，因此只需要一些后端经验就能将此转换成上线的网站。 图90 iPhone flat design UI template (free) iPhone flat design UI template (free)有着多种多样的扁平化风格iPhone模板，适用于应用界面设计。提供了你所需要的一切，包括:登录界面、用户个人资料、设置、滑动栏、活动窗口等。 图91 Delta flat mobile template ($8) Delta专门的扁平化风格手机模板，用色较单一，专供响应式设计。 图92 Flappster flat landing page template ($20) This landing page design 用来推广预启动的网站和预发售的应用。基于Twitter Bootstrap，这个引导页模板采用了滚动式面板。内含有多种多样的扁平化按钮和图标，定制化好。 图93 iLevel Bootstrap template ($15) iLevel Bootstrap template ($15) 关键词:响应式设计，扁平化风格，长投影设计。框架基于Twitter Bootstrap，30多个页面，4中可选择的配色方案。包含了一些非常实用的扁平化图标，插图和媒体插件。 图94 iOS7 app icon template ($4) This icon kit 包含了iTunes，iPad ,iPhone的图标标准格式。统一添加了网格线。 图95 11扁平化设计:配色方案回顶部 配色方案 颜色是扁平化设计的重中之重。颜色的明暗，色彩的醒目程度，配色方案是单调还是多彩，这都非常值得研究。扁平化设计一般综合运用多种配色手法来创造一种优秀的视觉体验。醒目明亮的颜色能够增加视觉元素的趣味性，看起来很有国际范儿。在色彩的饱和度、深浅、明暗上要下功夫。“单调”的配色方案在扁平化设计中很流行。通常会选择一些具有生气的颜色，然后在色调上进行调整。多彩风格是另外一种选择。不同的页面和面板使用不同的颜色，整体效果非常棒。呢个能达到整体的层次感和有序感。 Flat design color palette (free) pre-made code from Lucas Cobb.提供20种扁平化设计中常用的颜色。 图96 Flat UI colors (free) Flat UI colors非常简单的网站，展示了扁平化设计中最为流行的色调。用户点击便可以得到RGB和HEX色码。 图97 Adobe Kuler (free) Adobe's Kuler 的调色生成工具可以打造出多种多样的扁平化风格配色方案。 图98 ColourLovers (free) ColourLovers中的用户已经打造出多种多样的配色方案。用户可以评论、投票，可以从中获取设计的灵感，如果你不想使用比较陈旧的扁平化设计配色，那么来这里来看看吧。 图99 字体(Typography) 整洁的字体是扁平化设计的重要组成。因为扁平化设计注重简约，字体的选择也应该简单、干净。大多数设计师挑选简单的无衬线字体，使用一到两种字重。也有部分设计师尝试使用一些比较新奇的字体。一般来说，一个设计项目中，使用的字体种类不会超过两种。 在扁平化设计的字体选择上，最好能够与背景形成鲜明的对照。字体一般非黑即白，不带装饰和色彩。除 了字体的使用之外，界面中的语言组织也应该尽量凝练，以方便阅读，这样才能符合极简主义的意旨。 最终，要确保给予字体足够的空间。字母之间，之间都要留出足够的空隙。如果挑选的字体比较细，那么考虑放粗一点。比如像Helvetica Neue这种笔划比较细的字体，可能无法与背景形成鲜明的对照，这样读起来就不清晰。 Bellota (free) Bellota是一款无衬线字体，但是稍微加上了一点花哨的衬线，易于阅读，装饰的也不是太过分。有一种柔性的气质，因此需要对照鲜明的背景。 图100 Caviar Dreams (free) This super-round typeface现代感、简约感兼具。字母辨识度高，可读性好。笔划很细，需要对照明显的背景色的衬托才能方便阅读。 图101 Flex Display (free) iOS7上，细字体的使用引起了不少了争论，不可否认的是，某些情况下，细字体的效果很好。 Flex Display字体的笔划很细，能和那些粗字体形成明显的对比。 图102 Lato (free) Lato是一款非常简单的字体，效果不错，有着多种大小和字重可以选择。很多设计师都用这款字体，如果你像与众不动，那最好别用这款啦。 图103 Telegrafico (free) Telegrafico (free)，又一款全大写字体，较宽的笔划，当空间充裕时，显示效果极佳。尖锐的边角和较宽的字体，让整体有着一种现代感。 图104 Proxima Nova (from $29) Proxima Nova family 为设计师提供了多种多样的选择，简单而又优雅，无衬线的字体，这使得这套字体非常的便于使用。简单的几何风格一直延续其中。 图105 FF DIN (from $78 approx.) 简单，扁平，几何化， FF DIN按Geramn标准而来。在数字设计中非常实用。 图106 Montserrat (free) 圆角加上几何式的简化，让人有一种轻松的感觉，这使得 Monserrat 是个不错的选择。 图107 Primary Sans (free) 扁平化设计优点便是简洁，那么这款优秀的圆角字体Primary Sans (free)便具备了简洁的优点。 图108 Dense (free) 扁平化设计的核心特点就是简单不复杂，在字体设计上，这意味着可以适当采用几何结构，比如 Dense. 图109 Riona Sans (from $25) 如果想要一款商用的、严肃的字体，然后风格还想要符合扁平化美学，那么请选择 Riona Sans. 图110 Bariol (free) 图111 Canter (free on request) 现代主义与扁平化结合，在字体中便可发现现代主义的痕迹，这是Canter。 图112 Deco Neue (free) 向现代主义致敬的作品， Deco Neue ，字体效果非常惊人。 图113 Niveau (from $40) 对于扁平化设计来说，几何式简化是个不错的选择。 Niveau 就是个好榜样。 图114 原文地址:怒赞～2013扁平化设计终极指南 扁平化设计终极指南