首页 > 网页教程 > 设计分享 > 什么是扁平设计?如何创建扁平化设计风格?

什么是扁平设计?如何创建扁平化设计风格?

时间:2013-09-15    来源:oschina

扁平化设计或者说扁平化的UI风格,是今年最受关注的一个web和平面设计的发展趋势。而经常被拿来与扁平化做比较的是拟物化设计,两者的设计原则和设计风格完全相反。

设计师们或许会有疑惑,这究竟是一种能持续下去的设计趋势呢?还是只能是风行一时,昙花一现。暂且不谈未来和不管这些反对的声音,大多数设计师还是很想在自己的工作中尝试使用这一设计趋势。在这里,我们将深入了解什么是扁平化风格,追踪扁平化设计的历史根源,并介绍如何开始我们的扁平化设计。

在开始之前我必须给读者们一个提醒或者说警告:扁平化设计,可以用来设计非常漂亮而又简单的界面,但它不一定适合每一个项目。请用心想想你到底想实现什么样的视觉效果,你到底想要向用户传达什么。

什么是扁平设计?

顾名思义,扁平设计是根据平面的样式来定义的:通过移除额外的元素比如阴影,斜边,纹理和创建3D样式的梯度等等来简化界面。

这个想法用来创建一个完成好的图案,它只在二维空间上存在,没有遗弃任何"常规"界面提供的功能。扁平设计给设计师带来了一个新的挑战,因为去掉界面的装饰和效果,就很难在设计中定义主要行为和元素。

扁平设计源于希望创建更多的数字化界面,在数码设备上为界面改革创建更多开放的画布。在这里有一些很有名的MAC图标在自身的基础上被重新绘制为扁平版本。你可以很容易地看到图标是如何维持他们的样式和形状,尽管它们去掉了一些细节,阴影和纹理。

扁平化设计的演变

历史地看,设计的趋势像风格的趋势一样在复杂和简单之间不断地摇摆。这在可视化设计领域,尤其是web和多媒体界面设计领域表现地更加明显,在这个领域里设计持续地更加短暂,而且不像传统的印刷设计那样持久。

术语"扁平化设计"是由Allan Grinshtein在设计者的版本控制系统 LayerVault中创造和推广的。Allan说"优雅的界面是用最少的元素达到最佳的效果的界面"。这个理念是与更多修饰、更复杂的界面相比用最简化的界面更适合于界面的功能。社团在去年一直用仿真界面炮轰这个理念的基础上采纳了这个理念。

从那时起,扁平化设计得到了快速成长。大多数扁平化设计模式具有五个特征-不添加效果、简单的设计和UI元素,注重字体、注重色彩和总体最小化设计。你还可能需要下载 扁平化UI免费界面工具箱

扁平化设计与微软

扁平化设计的最大玩家并且第一个把扁平化设计风格带到一线的是微软。2006年,微软启动了Zune音乐播放器。它非常昂贵、而且把DRM应用到音乐文件,不过它是一次商业失败。然而即使Zune商业方面没有成功,它也是确定后续几年微软设计的第一步。Zune的界面非常简洁,并且是注重轻量和大的字体、没有多余的细节和元素的界面。

从2006年到今天,微软已经用Zune做为基础开发了图像和可视化界面,使它们更明晰化和更扁平化。微软的其他产品也受到这种风格影响,比如Xbox 360面板,使用了简单的图标和排版的基于矩形的界面。Windows 8的"Metro UI"可能是微软最大的界面修改之一。它的简单几何界面不久在Windows Phone 7,即比Windows 8 界面更小的和移动版本上得到了复制。

怎样创建一个扁平设计? 按钮

当使用边框,梯度和下阴影来创建一个按钮,就是使得这些元素在背景与内容中很显眼。这使按钮很好辨认为一个可以点击的元素。

当创建一个扁平的按钮,你就不能应用这些细节,所以我们的焦点应该放在布局的组织和颜色的差异上。当然,你只要你能保持按钮的扁平外观,你也可以使用斜边和阴影,但是你会想使这些控件变得尽可能的简洁。

表格

在扁平设计里,表格是一个关键的元素。文本区域,输入栏和下拉栏都不能按照它们默认的做法插入阴影。如果你想完全地控制这些元素,你可以使用一个支持主题的插件,比如uniformjs并应用你想要的主题样式,甚至可以自己创建一些主题。

字体

字体是扁平化设计里非常重要的元素。由于界面更加简洁,你可以使用字体帮你创建你期望的风格和基调。你可以对扁平化设计的框架只使用定制的并且特定的字体来设置基调。由于背景简单,字体就会突出并且本身就设置了风格。

色彩

设计界面的基础之一是定义调色板。扁平化界面设计所采用的色彩的模式与其他调色板相比倾向于更加醒目和更加明亮。扁平化UI色彩在思想上就是用这样的理念开发的,而且是下载今天扁平化设计里所用的某些最佳(和最流行)的色彩的好去处。

当你选择好调色板后,记住要想想色彩是怎样帮助用户对整个站点进行导航的。确保给站点的主要动作指定色彩:比如"提交"、"发送"、"更多"等按钮都应当是同一个色彩。理想情况下鲜明的色彩与背景形成了鲜明的对比。如果你的徽标或者商标采用主色的话,那么它应当是主要控制所使用的哪个色彩。不要自始至终过分的使用它,否则你将冒着在用户眼里这个色彩不太重要的风险。

你还应该选择按钮的辅助色彩,通常是浅灰色。这样的话你可以把两个按钮排成一行,例如"提交"和"取消","提交"作为主要动作而"取消"是辅助动作。在扁平化设计里色彩的选择尤其重要,因为当你使用扁平化按钮的时候,色彩将是帮助用户识别彼此的主要手段之一。

相关推荐
分析用户界面中扁平化设计的优缺点
另眼观看用户界面扁平化设计的不足之外
扁平化风格的网页设计案例欣赏
21个扁平化设计的动态创意链接交互样式欣赏
换汤不换药?看应用们如何“为iOS 7设计”
网页设计中如何运用圆形的搭配 让网页更出彩
界面设计教程:如何做好扁平化设计之交互篇
扁平化设计的前世今生:灵感或来自瑞士风格
扁平化:回归真实的设计
网页设计分享:如何预知未来的大势所趋?
设计完美极简风格网站的六个步骤分享
年度最佳!20个最优秀的网页设计案例欣赏
网页设计师必看:2015全球网站设计趋势推荐
扁平化设计与Material Design区别在哪里?
关于扁平化设计的五个要素
网页教程:扁平化设计的步骤和要点
扁平化设计的六点优势分析
进化中的扁平化设计还能玩出什么花样?
24款响应式和扁平化设计的后台管理界面欣赏
最新Web设计8个趋势:视差滚动 响应式设计等
Web设计师如何创建适合Retina显屏设备的图片教程
10个漂亮实用并附带源码的Web设计教程分享
2014年Web网页设计的10大发展趋势前瞻
最新的七个WEB设计趋势及其生存技巧预测
网页教程:响应式Web设计的9项基本原则
展望未来成为主流的Web设计七大趋势
网页设计已死?如何看待近几年网页设计发展前途?
Web后台设计易被忽视的组件技巧
Web页面中的表格设计如何才能做得更好?
高用户体验的表单设计该怎么做?
电商产品设计感想:你真的认识购物车吗?
交互设计:利用控制感,为用户体验加分
如何创建最佳的移动设计?七个用户体验设计小Tip
移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节

精彩推荐

热门教程