当前UI设计领域流行设计风格——什么是扁平化设计

W-design2017.09.14


扁平化设计概念最核心的地方就是拒绝特效,如阴影,透视,纹理,渐变等能做出3D效果的技法一概不用。

所有元素边界干净利落,没有任何羽化,渐变。

可以简单直接的传递信息,减少认知障碍。

简直就是初学者的福利啊,刚刚提到的技法我一个都不会。


先看看手机的发展:

扁平化还有什么可以用


没有了技法,没有了美图,还有什么能用?

还剩色彩 丰富颜色

还剩排版 优化排版


当然二维或平面的插画还是可以用的


Win8风格

信息平铺,直接展示内容

内容优于形式,注重信息而非界面


极简风格



用简单的元素来展现内容 简单却不简陋


一个极简主义设计将焦点正好放到正确的内容

更少的文字,更精准的排版

排版是重点


由于没有了障眼法,排版的重要性被显得更加突出。

在扁平化设计中,排版以前从未被作为一个设计元素显得这么重要过。

文字的风格和扁平化设计的外在表现需要是和谐共存的,同样需要强调的是字体的 简洁大方。


色彩是让人难忘的要素


花一点时间去看看一些扁平化设计的网页,你会马上发现,他们使用的色彩比那些非扁平化设计的网页更加明亮和充满活力。

扁平化设计可以溯源到调色板的使用。除了更加充满活力,他们通常使用更多的颜色。

例如,传统的色板通常使用2-3种颜色,扁平化设计可以使用多达8种颜色。

色彩是让人难忘的要素


纯色-没有渐变~

原色是很少见的,即正红、正蓝和正黄


纯色

复古色


这种色彩虽然饱和度低,但却是在纯色的基础上添加白色,以使色彩变得更加柔和。复古色经常以大量的橘色和黄色为主,但有时也有红色或蓝色。


在扁平化设计中,以复古色为主色调是很常见的,以为这种色彩能够使页面变得更加柔美、富有女性气质。



复古色的应用:

单色


在扁平化设计中,同类色正迅速成长为一种流行趋势。这种色彩往往以单一颜色搭配黑色或白色来创造一种鲜明且有视觉冲击的效果。


半扁平化?-扁平不平


有些设计师把某一项特效融入整体的扁平化之中

立体效果 镜面~


半扁平化?


折角~


拟物化设计:正好相反


它相反的设计手法:拟物化设计;


基本来说,拟物化设计的特点是通过把真实世界的触觉和物理感受和网页的设计结合起来。

在数码设备普及度不高的时代,使界面更直观,便于操作者理解。


扁平化网站运用


扁平化网站-大背景


清晰-蒙上一层暗色的大背景 配上 白色大字体


扁平化网站-大背景


见过高斯模糊的大背景 配上前景物体或文字


扁平化网站-

大背景 配上带着底色问题(底色半透明)

大背景

扁平化网站-色块


矩形图片 搭配 色块


扁平化网站-搭配ICON


精致的ICON带给人们想立即点击了解的冲动。

总结特点


1. 大面积色块对比

2. 较少的文字信息,加强文字对比

3. 较多留白区域


颜色搭配统一,纯色块运用,边界干净利落,精确到像素的线条

适当有阴影、渐变效果,但不影响整体扁平化风格

So…

扁平化不是极端的要求设计师不能使用渐变、阴影、高光等拟真效果,而是尽可能减少多余的视觉引导,使得设计引导更加纯粹。

作为设计师,千万不要为了扁平而扁平。




我们只做有价值的设计知识分享!

专注于设计师之间的互动交流!

这里是《设计来仪》!




网站制作首选华仕尊城设计http://www.w-vi.com

当前UI设计领域流行设计风格——什么是扁平化设计-网站建设

2017-09-14 22:29:00

您现在的位置:首页网站建设当前UI设计领域流行设计风格——什么是扁平化设计


扁平化设计概念最核心的地方就是拒绝特效,如阴影,透视,纹理,渐变等能做出3D效果的技法一概不用。

所有元素边界干净利落,没有任何羽化,渐变。

可以简单直接的传递信息,减少认知障碍。

简直就是初学者的福利啊,刚刚提到的技法我一个都不会。


先看看手机的发展:

扁平化还有什么可以用


没有了技法,没有了美图,还有什么能用?

还剩色彩 丰富颜色

还剩排版 优化排版


当然二维或平面的插画还是可以用的


Win8风格

信息平铺,直接展示内容

内容优于形式,注重信息而非界面


极简风格



用简单的元素来展现内容 简单却不简陋


一个极简主义设计将焦点正好放到正确的内容

更少的文字,更精准的排版

排版是重点


由于没有了障眼法,排版的重要性被显得更加突出。

在扁平化设计中,排版以前从未被作为一个设计元素显得这么重要过。

文字的风格和扁平化设计的外在表现需要是和谐共存的,同样需要强调的是字体的 简洁大方。


色彩是让人难忘的要素


花一点时间去看看一些扁平化设计的网页,你会马上发现,他们使用的色彩比那些非扁平化设计的网页更加明亮和充满活力。

扁平化设计可以溯源到调色板的使用。除了更加充满活力,他们通常使用更多的颜色。

例如,传统的色板通常使用2-3种颜色,扁平化设计可以使用多达8种颜色。

色彩是让人难忘的要素


纯色-没有渐变~

原色是很少见的,即正红、正蓝和正黄


纯色

复古色


这种色彩虽然饱和度低,但却是在纯色的基础上添加白色,以使色彩变得更加柔和。复古色经常以大量的橘色和黄色为主,但有时也有红色或蓝色。


在扁平化设计中,以复古色为主色调是很常见的,以为这种色彩能够使页面变得更加柔美、富有女性气质。



复古色的应用:

单色


在扁平化设计中,同类色正迅速成长为一种流行趋势。这种色彩往往以单一颜色搭配黑色或白色来创造一种鲜明且有视觉冲击的效果。


半扁平化?-扁平不平


有些设计师把某一项特效融入整体的扁平化之中

立体效果 镜面~


半扁平化?


折角~


拟物化设计:正好相反


它相反的设计手法:拟物化设计;


基本来说,拟物化设计的特点是通过把真实世界的触觉和物理感受和网页的设计结合起来。

在数码设备普及度不高的时代,使界面更直观,便于操作者理解。


扁平化网站运用


扁平化网站-大背景


清晰-蒙上一层暗色的大背景 配上 白色大字体


扁平化网站-大背景


见过高斯模糊的大背景 配上前景物体或文字


扁平化网站-

大背景 配上带着底色问题(底色半透明)

大背景

扁平化网站-色块


矩形图片 搭配 色块


扁平化网站-搭配ICON


精致的ICON带给人们想立即点击了解的冲动。

总结特点


1. 大面积色块对比

2. 较少的文字信息,加强文字对比

3. 较多留白区域


颜色搭配统一,纯色块运用,边界干净利落,精确到像素的线条

适当有阴影、渐变效果,但不影响整体扁平化风格

So…

扁平化不是极端的要求设计师不能使用渐变、阴影、高光等拟真效果,而是尽可能减少多余的视觉引导,使得设计引导更加纯粹。

作为设计师,千万不要为了扁平而扁平。




我们只做有价值的设计知识分享!

专注于设计师之间的互动交流!

这里是《设计来仪》!




网站制作首选华仕尊城设计http://www.w-vi.com

深圳网站建设首选华仕尊城  http://www.w-vi.com

W design values every chance to work with you.