全部课程

全部课程分类

培训乐帮返利流程

关于扁平化的设计之美

2015-08-25 10:18    发布者:我的名字刚好有十一个字    评论:0    浏览:198
摘要:扁平化设计是今天一个非常热门的话题,在上次的文章《2013年网页及APP应用的设计趋势》中,我们说过扁平化设计将会是2013年设计趋势,在本文中,我将讨论下什么是扁平化设计、回顾其它设计方式,并提供如何在你自己的设计中实现的一些技巧。

实际上,扁平化设计意味着在设计中不使用常用的渐变、像素完美的阴影,然后通常是近年来蔓延的用来实现看起来“平面”的用户界面。

Layervault的Allen Grinshtein或许最初定义了“扁平化设计”。在一篇发表于HackerNews的文章中,他说:网页中广受欢迎的产品通常都有一些类似的设计美学,比如一些立体、内阴影、外阴影等。对设计师来说,他们会以实现这种“媚俗”的界面而感到自豪。但对我们,对其它的少数设计师来说,这样做很2。。。~ Allan Grinshtein (Layervault)如果你去看Layervault,它的美在于其简洁,甚至没有任何我们作为设计师常常会去挖空心思实现的额外的细节设计。了解和琢磨作为当前趋势来使用的渐变和其它样式是件蛮有趣的事情,这些慢慢在变化~~

扁平化设计实例

在新版Squarespace网站中,他们选择了一个几乎完全扁平的界面, 你可以估算出它们花在原型和设计UI上的时间,这个界面相当复杂,但是却非常易用。

尽管我只看过而从来没有自己用过LayerVault,新的扁平化UI看起来真的很简洁易用。

Facebook几乎一直拥抱扁平化设计美学——只是最近才加入一些轻微的立体化。

Facebook是一个扁平化设计趋势的完美例子。它们的主要操作按钮依然使用轻微的立体化,但大量的次要按钮采用了完全的扁平化设计。而且依据事实判断,它们从未改变过界面风格,它一直是这样的。

Ian Storm Taylor (Segment.io)

尽管它们在过去这些年一直被批判要大改它们的界面,它依然是网上被使用最多的网站之一,嗯,用户是不会错的。。。

最新的Rdio的界面亦是如此扁平和极简,它几乎完全没有阴影、渐变、甚至是颜色。。。

在Nest上线之前,我很高兴为它贡献了一点儿前端代码,我被它所展现出的扁平化美学给迷倒了。

拥抱扁平化设计的设计师们真的是发自内心的迷恋它了。

“…作为交互设计师——我们应该在我们的工作中拥抱这种方法,并坚定的避开我们身处的拟物化、阴影的泥淖。”

~ Daniel Howell (Howells)

对拟物化设计的挑战

就像上个世纪在建筑领域极简主义运动对过度装修的冲击,扁平化设计可能是一个对已经被使用多年的过度设计、或者过于花哨的网站和界面的一个颠覆。一个典型的例子就是最近人们批判Apple的拟物化设计的过度使用。

Apple收到了大量的来自于设计师对其在日历app中大量使用无用的皮革材质的批判。

Wikipedia 这样定义拟物化:

一个产品的设计元素模仿其在原始产品设计中是必要功能,但是在新的设计中变为装饰的设计元素

比如,我们通常给元素用上渐变和阴影以至于看起来像按钮,因为现实世界中按钮大都带有特性,尽管它们在电脑用户界面的设置中是不必要的。

所以一个使用玻璃温度计图片的天气app就是拟物化:玻璃在原来(现实中的温度计)是必要的,而在新设计中变为完全的装饰。

Sacha Greif

在日历APP中使用皮革元素是否真的有必要呢?同样的,用渐变和立体边角来设计按钮是否也真的有必要?或者用户知道去点击它们么?有多少装饰是必须的?有么?

在现实世界中,当一个按钮按下,你能感受到它的弹性和弹力,但是在手机或者屏幕上,有物理上反馈的先天不足。你的意识知道物理性的存在而拟物化没有。所以至少对我来说,它事实上没有达到预期和让我失望的时刻。

~ Allan Yu (svpply / eBay)

所以,扁平化设计可能是在界面设计中装饰被过度使用的一种颠覆,就和过去极简主义是华而不实的装饰风格的一种颠覆一样。

形式遵循功能,拥抱扁平化

20世纪建筑领域的极简主义运动中,一些伟大的设计引用我们今天依然在谈论的“形式跟随功能(form follow function)”和“少即是多(less is more)”的理念。简单的来说,我喜欢这句来自雕刻家Michaelangelo(米开朗其罗)在被问道它是如何创造标志性的大卫雕像的时候说到的话。

很简单,你就削掉那些看起来不像大卫的石头就好了。

~ Michaelangelo)

在用户界面设计,常常去掉真正将界面带入生活的那些东西。37signals的团队因为应用这个理念到它们的产品中——比如BaseCamp——而臭名昭著(但也很成功)。在扁平化设计的世界中,少,真的是多。

为了实现扁平化设计美学,我们设计师必须专注于产品是干嘛的,而不是它们要看起来像什么。这是关键,也是线框对设计流程至关重要的原因。

美学是看法的问题

在我关于这篇文章的研究中,几乎没发现任何科学研究关于屏幕上的按钮看起来更像按钮实际上会更可点击。倒是有大量的证据支持对比度、色彩、层级,但是我愿意打赌在一个适当的上下文中,一个橙色的扁平化按钮会像一个立体的橙色按钮一样有效。这里有一些来自于其它设计师的观点。

这和跑道时尚(runway fashion)并无二异——每个人都开始做同样的事情,当它到处都是时,要突出出来成为设计师,你就必须反其道而行。

Cemre Güngör (Branch)

说“拟物化是坏设计”就像说“紫色是一个肮脏的颜色”或者“在Web app中没有椭圆的地儿”。它没有任何意义。”

~ Sacha Greif

为什么推广某种设计理念在别的理念之上而不去证明你推崇的真的更好呢?难道更好看比可能降低可用性更有价值?

Geoff Stearns (formerly YouTube)

好设计就是好设计,无关美学思想

那么,如果立体、渐变、阴影只是看法的问题,那么如何实现一个好的设计?无论你是否要使用扁平化设计,用户界面和规划相关。我相信扁平化设计使得识别一个伟大的设计更加简单,因为在设计和它如何工作之间少了很多干扰。

这里是一些关于伟大的界面设计的一些技巧:

一致性

通过使用通用的UI元素和样式,你可以帮助用户了解什么是可以期待的,然后使得更容易使用你的应用。

对比

可点击元素和非可点击元素之间要有适当的对比。这可以通过颜色、大小、位置以及样式来实现。

布局

使用一个网格布局,比如960gs,是为你的设计建立一些可视的指南的好的方法。视线会自然的准从由内容创建的线条和比例,所以理解和使用一个网格是一个强化视觉平衡的好办法。

层级

我更倾向于将此理解为“用户行为”,我会写一篇关于这个话题的文章,但是实现最通用的用户行为(有时被称为用例)容易发现,而去掉不太通用的行为是简化用户界面从而使它更好用的好方法。作为通用准则,最重要的要比不太重要的更醒目。

我的经验是,扁平的或者逼真的没什么关系,重要的是,层级在快速浏览以及用户方便的找到下一个操作中很重要。

0 顶一下
更多>>
平面设计机构推荐
更多>>
平面设计课程推荐

  ¥80 ¥80

Flash平面动画

课程介绍:学习逐帧动画,运动动画,变形动画,遮罩动画,导向动画,音效动画,编程动画的制作技术及绘图技巧,加上独特的创意可以制作多媒体网页动画,贺卡,MTV,短剧,教学软件等。

学费:880   人气:563

  ¥80 ¥80

卓越计划包就业班(平面设计网页设计方向)

最近开班: 暂无
课程介绍:4.卓越计划包就业班(平面设计网页设计方向)课程简介:平面网页设计卓越计划采用革命性三维五段教学模式,全景式互动PPT教学,采用具有国家版权保护的设计课程教学。更可以先学习后付款,分期免费助学贷款,签

学费:电询   人气:137

  ¥80 ¥80

平面设计精英班

最近开班: 暂无
课程介绍:平面设计精英班学员对象:1.0基础转行2.在职设计师3.技能缺失人员4.想高薪就业学员。学习时长:10周,学不会可以免费重修,100%包学会。就职方向:平面设计师、广告设计师、书籍装帧设计师、淘宝美工

学费:电询   人气:211

  ¥80 ¥80

平面设计师培训班(春季班)

最近开班: 暂无
课程介绍:秋季班钜惠,报名送无线鼠标,报名优惠折 热开专业: 计算机应用基础类: 高级办公自动化、商务办公自动化、企业办公全能班、计算机等级二级辅导班、计算机职称考试辅导班.平面广告设计类: 高级平面设计班、平面广告实战班、平面设计高级研修班 室内设计类: AutoCAD软件设计班、3D MAX软件班、3D MAX效果图、室内设计短期班 学校优势:1 设施完善,教学环境优雅(写字楼);2 小班授课,手把手教学,保证人手一机;3 师资精良,授课与实践相结合,采用多媒体教学方式,保证最佳的学习效果

学费:电询   人气:109

  ¥80 ¥80

平面设计培训创意班

最近开班: 暂无
课程介绍:【课程概述】该班由经典创想首席主讲教师主讲苹果电脑操作和系统维护、管理等技术。 【课程内容】Mac OS X系统操作与管理;Mac OS X系统维护;Mac OS X系统结构与常见故障;Mac周遍设备应用;影象精度控制技术;扫描精度控制校色;Mac OS X程序安装等。

学费:电询   人气:95

平面设计相关文章
东莞平面设计培训学校就在万江天骄职校
东莞市学电工哪里就业最快,东莞考电工证哪里通过
东莞石滩2016学习平面设计软件的教材有哪些?
学习平面设计要从哪里学起东莞石滩2016
学习平面设计好吗?东莞石滩12016
平面设计主修课程东莞石排2016
东莞石排2016请问文化程度低学习平面设计有前
学习平面设计好找工作吗东莞石排2016
文化基础不好,石排可以学习平面设计吗东莞201
东莞平面设计哪里好万江天骄职校十四年老品牌
东莞樟木头2016学习平面设计要多少钱
平面设计师岗位要求东莞樟木头2016
平面设计培训班多少钱东莞茶山2016
东莞茶山2016我想学电脑平面设计?我应该从哪
文化基础不好,茶山可以学习平面设计吗东莞201
东莞平面设计要学多久?平面设计贵吗?平面设计要
东莞平面设计培训哪家学校比较专业?平面设计培训
东莞惠州石湾2016学习平面设计要多少钱
东莞惠州石湾2016哪里有专业正规的学平面设计
东莞惠州石湾2016没有学过平面设计可以学好吗


如果您要进行评论信息,请先 登录 或者 快速注册 。
评论总数:0

网友评论

为什么选择优训网
  • 贵就赔 报名价同班最低
    差价双倍返还
  • 顾问服务 培训最怕时间和钱花了,东西没学到
    专业顾问,给你内行建议
  • 点评返利 学完后分享点评,
    不仅能帮助别人,
    还能获得返利

服务热线:400-68-12568

扫一扫 就有礼!
关注优训网新浪微博
有价值的教育培训资讯 扫一扫 收听优训网微信