扁平化设计方案

扁平化 苹果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扁平化设计终极指南 扁平化设计终极指南