• 回复: 0
shaoshuaivvv 发布于:2016-03-01 15:52:33

扁平化设计美学:以Facebook为例的设计趋势

在本文中,我将会商下什么是扁平化设计、回顾转头回想别的设计方式,并提供若何在你本身的设计中实现的一些技巧。
什么是扁平化设计
实际上,扁平化设计意味着在设计中不使用常用的渐变、像素美满的阴影,然后通常是比年来舒展的用来实现看起来“平面”的用户界面。
Layervault的Allen Grinshtein大概最初定义了“扁平化设计”。在一篇发表于HackerNews的文章中,他说:
如果你去看Layervault,它的美在于其简练,以致没有任何我们作为设计师通常会去费尽心血实现的特别的细节设计。体会和琢磨作为当前趋向来使用的渐变和别的样式是件蛮风趣的事情,这些渐渐在变化~~
扁平化设计实例
在新版Squarespace网站中,他们选择了一个几乎完全扁平的界面, 你可以估算出它们花在原型和设计UI上的时候,这个界面相称巨大,但是却非常易用。
只管我只看过而大来没有本身用过LayerVault,新的扁平化UI看起来真的很简练易用。
那么,如果立体、渐变、阴影只是见解的问题,那么如何实现一个好的设计?无论你是否要使用扁平化设计,用户界面和筹划相干。我相信扁平化设计使得辨认一个巨大的设计更加大致,由于在设计和它如何事情之间少了很多滋扰。
Facebook几乎不停拥抱扁平化设计美学——只是近来才参加一些轻微的立体化。
“Facebook是一个扁平化设计趋势的美满例子。它们的重要操纵按钮依然使用轻微的立体化,但大量的次要按钮采取了完全的扁平化设计。并且依据毕竟鉴定,它们大未变化过界面风格,它不停是这样的。“
只管它们在过去这些年不停被批驳要大改它们的界面,它依然是网上被使用最多的网站之一,嗯,用户是不会错的。。。
最新的Rdio的界面亦是如此扁安全寂静极简,它几乎完全没有阴影、渐变、以致是颜色。。。
在Nest上线之前,我很高兴为它贡献了一点儿前端代码,我被它所显现出的扁平化美学给迷倒了。
拥抱扁平化设计设计师们真的是发自内心的留恋它了。
“…作为交互设计师——我们应该在我们的事情中拥抱这种方式,并鉴定的避开我们身处的拟归天、阴影的泥淖。”
对拟归天设计的挑衅
就像上个世纪在构筑范围极简主义举动对太过装修的打击,扁平化设计大概是一个对已经被使用多年的太过设计、大概过于花哨的网站和界面的一个颠覆。一个典范的例子便是近来人们批驳Apple的拟归天设计的太过使用。
Wikipedia 这样定义拟归天:
一个产品的设计元素模仿其在原始产品设计中是需要成果,但是在新的设计中变为装饰的设计元素
比如,我们通常给元素用上渐变和阴影以至于看起来像按钮,由于实际世比赛按钮大都带有特征,只管它们在电脑用户界面的设置中是不需要的。
“以是一个使用玻璃温度计图片的天气app便是拟归天:玻璃在本来(实际中的温度计)是需要的,而在新设计中变为完全的装饰。“
在日历APP中使用皮革元素是否真的有需要呢?同样的,用渐变和立体边界来设计按钮是否也真的有需要?大概用户知道去点击它们么?有多少装饰是必须的?有么
“在实际世比赛,当一个按钮按下,你能感到感染到它的弹性和弹力,但是在手机大概屏幕上,有物理上反馈的天赋不够。你的意识知道物理性的存在而拟归天没有。以是至少对我来说,它毕竟膳缦慊有到达预期和让我失落望的时候。”
以是,扁平化设计大概是在界面设计中装饰被太过使用的一种颠覆,就和过去极简主义是脆而不坚的装饰风格的一种颠覆一样。
情势依照成果,拥抱扁平化
20世纪构筑范围的极简主义举动中,一些巨大的设计引用我们今天依然在评论辩论的“情势跟大成果(form follow function)”和“少便是多(less is more)”的理念。大致的来说,我喜好这句来自雕刻家Michaelangelo(米开朗其罗)在被问道它是如何创造标记性的大卫雕像的时间说到的话。
“很大致,你就削失落那些看起来不像大卫的石头就好了。“
)
网页中广受欢迎的产品通常都有一些沟通的设计美学,比如一些立体、内阴影、外阴影等。对设计师来说,他们会以实现这种“媚俗”的界面而感到高慢。但对我们,对别的的少数设计师来说,这样做很2。。。“
在用户界面设计,通常去失落真正将界面带入生活的那些东西。37signals的团队由于应用这个理念到它们的产品中——比如BaseCamp——而臭名昭著(但也很成功)。在扁平化设计的世比赛,少,真的是多。
为了实现扁平化设计美学,我们设计师必须专注于产品是干嘛的,而不是它们要看起来像什么。这是关键,也是线框对设计流程至关重要的缘故起因。
美学是见解的问题
“这和跑道时尚(runway fashion)并无二异——每个人都开始做同样的事情,当它到处都是时,要突出出来成为设计师,你就必须反其道而行。“
“说“拟归天是坏设计”就像说“紫色是一个邋遢的颜色”大概“在Web app中没有椭圆的地儿”。它没有任何意义。”
“为什么推广某种设计理念在别的理念之上而不去证明你推许的真的更好呢?难道更都雅比大概低落可用性更有代价?“
近来一个在网页和UI设计上渐渐增加的趋势是“扁平化设计”的使用,并且如今已经是一个非常热门的话题了。满大街的现场会商会以及大量的教程。我通常被吸引到极简主义设计中,以是扁平化设计是一种很天然的给我开导的设计美学,特别是在近来的一个项目标大头设计中。
设计便是好设计,无关美学头脑
这里是一些关于巨大的界面设计的一些技巧:
同等性
经过过程使用通用的UI元素和样式,你可以帮手用户体会什么是可以等待的,然后使得更方便使用你的应用。
可点击元素和非可点击元素之间要有得当的比拟。这可以经过过程颜色、大小、位置以及样式来实现。
布局
在我关于这篇文章的研究中,几乎没发现任何科学研究关于屏幕上的按钮看起来更像按钮实际上会更可点击。倒是有大量的证据支持比拟度、色彩、层级,但是我乐意赌博在一个得当的上下文中,一个橙色的扁平化按钮会像一个立体的橙色按钮一样有效。这里有一些来自于别的设计师的寓目法。
使用一个网格布局,比如960gs,是为你的设计创建一些可视的指南的好的方式。视线会天然的准大由内容建立的线条和比例,以是明白和使用一个网格是一个强化视觉均衡的好办法。
层级
比拟
我更偏向于将此明白为“用户举动”,我会写一篇关于这个话题的文章,但是实现最通用的用户举动(偶尔被称为用例)方便发现,而去失落不太通用的举动是简化用户界面大而使它更好用的好方式。作为通用准则,最重要的要比不太重要的更夺目。
为了防备你不太能明白它,回味一下:“扁平化设计意味着不用常用的渐变、像素美满的阴影,然后通常是比年来舒展的用来实现看起来“平面”的用户界面。”
我的经历是,扁平的大概逼真的没什么干系,重要的是,层级在快速欣赏以及用户方便的找到下矣闽操纵中很重要。
嗯,为了能让你更快的步入扁平化设计的潮流,今天我们网络了几个超赞的示例(以及一些Dribble截图),相信它们可以或许阐明网页设计中的“扁平化”之美。。。
Microsoft
SpellTower
Supereight Studio
Hundreds
译本身The Flat Design Aesthetic: A Discussion
原文:扁平化设计美学
扫一扫,关注设计动量,随时参与互动。
我要评论