您当前的位置:首页 > 电脑百科 > 软件技术 > PS/设计

什么是扁平化设计?

时间:2019-09-06 10:31:59  来源:  作者:

扁平化设计是相对于拟物化设计(Skeuomorphic Design)而提出的。拟物化的用户界面设计看起来就像是真实的物体,如图1-1所示,在用户界面中能反映出真实世界中音频压缩器的外观和功能。在初期,这样的设计可以让人们更快地接受和明白设计的用途。

什么是扁平化设计?扁平化设计的崛起

图1-1

拟物化设计起始于20世纪80年代,其初衷是帮助用户从真实世界向计算机界面平滑过渡。直到最近,作为拟物化设计忠实的拥护者,苹果公司把这种设计理念运用在了公司所有用户界面和界面设计指南中。从IOS 7开始全部换成扁平化设计,尽管当时有很多人批评。苹果公司的拟物化设计与扁平化设计的对比如图1-2所示。

什么是扁平化设计?扁平化设计的崛起

图1-2

其实笔者认为扁平化设计是设计发展的必然规律,就如几千年来文字的发展。最初人们用图画文字(象形字)来记录,这是一种最原始的造字方法,把想要表达的物体的外形特征描绘出来,慢慢地演化到繁体,再到现在的简体。现在的扁平化设计也正在遵循这样一个从繁到简的发展规律,从写实拟物到抽象扁平。

1.扁平化设计的三大特点

》做减法

同样是镜头的设计,在扁平化中去除了渐变、阴影、质感等修饰手法,仅用简单的形体来表达,显得干净利落。做减法这一步应该是最容易的,如图1-3所示。

什么是扁平化设计?扁平化设计的崛起

图1-3

因为扁平化设计有着鲜明的视觉效果,它所使用的元素之间有清晰的层次和布局,这使得用户能直观地了解每个元素的作用及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格,尤其在手机上,因为屏幕尺寸的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净、整齐,使用起来格外简单。

》精致的颜色

扁平化设计中,配色貌似是最重要的一环,扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时,扁平化设计中的配色还意味着更多的色调,例如,其他设计最多只包含两三种主要颜色,但是扁平化设计中平均会使用6~8种。而且扁平化设计中,往往倾向于使用单色调,尤其是纯色,并且不做任何淡化或柔化处理(最受欢迎的颜色是纯色和二次色),另外还有一些颜色也比较受欢迎,如复古色(浅橙、紫色、绿色、蓝色等),如图1-4至1-6所示。

什么是扁平化设计?扁平化设计的崛起

图1-4


什么是扁平化设计?扁平化设计的崛起

图1-5


什么是扁平化设计?扁平化设计的崛起

图1-6

》极简的排版

由于扁平化设计使用的是特别简单的元素,排版就成了很重要的一环,排版的好坏直接影响视觉效果,甚至可能间接影响用户体验。

字体是排版中很重要的一部分,它和其他元素相辅相成。想想看,一款花体字在扁平化的界面中是非常突兀的。图1-7至1-9所示是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大,分支众多,其中有些字体会在特殊的情景下产生意想不到的效果,但注意,过犹不及,不要使用那些极为生僻的字体,不能因为字体的新奇而影响了信息的传达。

什么是扁平化设计?扁平化设计的崛起

图1-7


什么是扁平化设计?扁平化设计的崛起

图1-8


什么是扁平化设计?扁平化设计的崛起

图1-9

2.扁平化设计的未来

作为一名普通的设计师,可能不能去预测乃至引导设计的趋势和方向,但可以从设计的发展史中找到一些答案。建筑设计和平面设计作为设计的分支,都经历过类似从拟物化设计到扁平化设计的发展,也许可以为我们提供一些参考。

用版式设计来举例,版式设计的发展大概分为5个阶段。

第1阶段:西方历史中最早的排版出现在古巴比伦,基本没有排版的概念只需要字排列整齐、方便阅读即可。

第2阶段:在古埃及,这时候已经有图文绕排的概念,也有了装饰的尝试。

第3阶段:到中世纪欧洲文艺复兴时期,华丽装饰达到极致,无论是文字还是配图都非常精致,甚至一个句号都装饰得相当华丽。

第4阶段:包豪斯设计兴起,也是现代主义的诞生,网格法排版出现,人们察觉到内容才是根本,设计或排版是为内容服务的,所有的装饰性元素统统被去掉,图案变得扁平,跟Metro的想法一样,用内容装饰内容是这个时期的一大特点。

第5阶段:人们对千篇- -律的简洁设计感到乏味,版式设计向着多元的方向发展,既有简洁、以内容为中心的版式设计,也有华丽装饰、渲染气氛的版式设计出现。版式设计完全取决于需求方的需求。

从版式设计的发展史来看,现在的扁平风格大概属于第4个阶段,而网页设计或UI设计将会像版式设计一样,向多元的方向发展,也就是第5个阶段。市场上既会有简洁、扁平化的风格,又会有拟物、精致的风格,以及更多意想不到的风格出现。每种风格都会有自己的市场,每个人都能在市场上找到符合自己审美和习惯的风格,这种多元化的萌芽已经开始出现,例如,锤子手机,如图1-10所示。

什么是扁平化设计?扁平化设计的崛起

图1-10


 


Tags:扁平化设计   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
扁平化设计是相对于拟物化设计(Skeuomorphic Design)而提出的。拟物化的用户界面设计看起来就像是真实的物体,如图1-1所示,在用户界面中能反映出真实世界中音频压缩器的外观和...【详细内容】
2019-09-06  Tags: 扁平化设计  点击:(189)  评论:(0)  加入收藏
▌简易百科推荐
【简介】大家好,我是不二何(68ID:何旭阳),很荣幸受邀此次的68Design专访! 目前我是一位自由设计师,平时除了承接一些商业项目之外,也会更新视频号、小红书等短视频平台。其中小红书...【详细内容】
2021-12-27  68Design    Tags:PS   点击:(2)  评论:(0)  加入收藏
Retouch Pro是一款优秀的图像修饰插件,帮助ps用户更快地进行图像照片的修饰。 由于其强大的人工智能系统,您可以轻松就获得专业的效果,并且比以往的手动更快,效果更好,操作更简单...【详细内容】
2021-12-27  设计师臭豆腐    Tags:Ps   点击:(7)  评论:(0)  加入收藏
早在 2015 年,就有报道称,到 2022 年底,仅英国的创意产业就需要 120 万名新工人。当然,世界与 2015 年的情况大不相同——但如果任何事物都需要比预期更多的创造力,而...【详细内容】
2021-12-22  Adobe国际认证    Tags:Adobe   点击:(11)  评论:(0)  加入收藏
最终效果 1、新建文件打开PS软件,按Ctrl + N 新建文件,尺寸为1920×1308像素,分辨率为72像素/英寸,如下图,然后确定。 2、导入房间素材打开素材包中的房间素材,用移动工具...【详细内容】
2021-12-22  PS教程240PS    Tags:PS   点击:(5)  评论:(0)  加入收藏
经常和大家分享PPT技巧,不知道大家有没有进步?今天直接来个重磅分享。你知道,一些大厂的路演、发布会PPT的设计师,平时浏览什么设计网站吗? 作为PPT设计师,平时也会看一些创意设计...【详细内容】
2021-12-15  旁门左道PPT    Tags:设计师   点击:(21)  评论:(0)  加入收藏
今天来说使用CAD梦想画图软件绘制一个CAD小白基础题。操作工具操作系统:Windows10CAD软件:CAD梦想画图步骤1.先画一个半径为100的圆,如下图所示:画圆 2.接着使用多边形命令(POL)画...【详细内容】
2021-12-15  CAD梦想画图    Tags:CAD   点击:(17)  评论:(0)  加入收藏
详情页是消费者进店后决定是否购买产品的页面,是电商产品重要的落地点。在消费者找到自己心仪的产品后,详情页满足了消费者了解产品的所有信息的诉求,就像一个经验丰富的售货员,对产品的每细节娓娓道来。定义好产品属性后...【详细内容】
2021-12-15  设计智造    Tags:详情页   点击:(10)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计) ▲音乐学校创意 ▲轮胎创意 ▲啤酒创意 ▲糕点创意 ▲旅游公司创意 ▲抵制家庭暴力公益宣传 ▲食品创意 ...【详细内容】
2021-12-15  设计智造    Tags:广告设计   点击:(11)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计)启动画面是在APP启动时全屏展示的简单占位图,其作用是用户打开APP,程序在运行时可能因为网络、程序本身等原因需要加载几秒钟的等待...【详细内容】
2021-12-15  设计智造    Tags:界面设计   点击:(26)  评论:(0)  加入收藏
Don Tuch 是一家位于墨西哥城的快餐店。其源自于Yucatán半岛的美食传统,是以一种令人难忘的独特方式融合了正宗风味的食品概念。Don Tuch以一种有趣和轻松的方式向Yuc...【详细内容】
2021-12-15  致美设计    Tags:包装设计   点击:(13)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条