扁平化设计五大原则

[http://www.csdn.net/article/2013-05-29/2815475-flat-design-principles]

扁平化设计五大原则

发表于 2013-05-30 07:3533656次阅读| 来源 CSDN50 条评论| 作者 王然
allowtransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?url=http%3A%2F%2Fwww.csdn.net%2Farticle%2F2013-05-29%2F2815475-flat-design-principles&type=3&count=&appkey=&title=%E8%BF%99%E6%AE%B5%E6%97%B6%E9%97%B4%E4%BB%A5%E6%9D%A5%EF%BC%8C%E6%89%81%E5%B9%B3%E5%8C%96%E8%AE%BE%E8%AE%A1%E4%B8%80%E7%9B%B4%E6%98%AF%E8%AE%BE%E8%AE%A1%E5%B8%88%E4%B9%8B%E9%97%B4%E7%9A%84%E7%83%AD%E9%97%A8%E8%AF%9D%E9%A2%98%E3%80%82%E9%82%A3%E4%BB%80%E4%B9%88%E6%98%AF%E6%89%81%E5%B9%B3%E5%91%A2%EF%BC%9Fdesignmodo%E8%AE%BE%E8%AE%A1%E5%B8%88Carrie%20Cousins%E6%80%BB%E7%BB%93%E6%89%81%E5%B9%B3%E5%8C%96%E7%9A%84%E4%BA%94%E5%A4%A7%E7%89%B9%E7%82%B9%EF%BC%8C%E5%B9%B6%E4%B8%94%E4%BB%8B%E7%BB%8D%E4%BA%86%E2%80%9C%E5%87%86%E2%80%9D%E6%89%81%E5%B9%B3%E5%8C%96%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5%E5%8F%8A%E5%85%B6%E4%BC%98%E7%BC%BA%E7%82%B9%E3%80%82&pic=&ralateUid=&language=zh_cn&rnd=1416108485504" width="22" height="16"> 摘要:这段时间以来,扁平化设计一直是设计师之间的热门话题。那什么是扁平呢?designmodo设计师Carrie Cousins总结扁平化的五大特点,并且介绍了“准”扁平化设计理念及其优缺点。

这段时间以来,扁平化设计一直是设计师之间的热门话题。每个人都有自己的独特认识,有的非常喜欢而有的人却恰恰相反。那什么是扁平呢?designmodo设计师Carrie Cousins在网站上介绍了扁平化的五大特点,以及“准”扁平化设计的优缺点。CSDN编译如下。

Cousins表示他虽然对扁平化设计的感觉非常强烈,但并没有特别热爱或者特别讨厌扁平化设计。他认为好的设计不应当局限于某种设计风格,而需要更注重可用性、有用性。如果因为时尚的缘故,那就顺其自然吧。但该趋势并不适合一切项目,所以不能强求所有应用都遵从这一风格。

拒绝特效


顾名思义,扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮,再到导航栏都干脆有力,需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。


扁平化设计中的层次和其它的一一对应,但各个位面间没有交叉,不会明确区分背景图片、前景图片、按钮、文本、导航,等等。

那如何做好扁平化设计?扁平化设计依赖于清晰的层次结构和元素布局,优秀的扁平化设计应该能帮助用户理解产品以及交互。

现在,越来越多的网站开始应用扁平化设计,在App和移动设计中这一趋势更为明显。在小屏幕中,按钮和选项更少,也让扁平化设计如鱼得水。

仅使用简单的元素


扁平设计中使用到很多简单的UI元素,比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状。元素独立。正角、直角、圆弧都非常常见。

UI元素应该在保持高可用性的前提下尽可能的简单,保证应用或网站直观、易用,无需引导。为了同时达到简单但直观的效果,你可以尝试为按钮填充深色,以鼓励用户点击。


记住,简单的元素并不意味着设计起来很简单,恰恰相反,扁平化设计理念的复杂度可以与任何其他设计风格相提并论。

注重排版


因为扁平化设计要求元素更简单,排版的重要性就更为突出了。字体的大小应该匹配整体设计,高度美化的字体会与极简设计原则相冲突。字形上可以应该使用粗体,文案要求精简、干练,最终保证产品在视觉上和措辞上的一致性。

字体选择上可以使用简单的无衬线字体,通过字体大小和比重来区分元素。同时你也可以使用新奇的字体作为点缀,但一定要记得不能过火。

排版的目的在于帮助用户理解设计。标签按钮等其它元素更注重增强易用性和交互性。

关注色彩


色彩的使用对于扁平化设计来说非常重要。你可能已经发现了,扁平化设计的网站、应用色彩明显要更加鲜艳、明亮。此外扁平化设计的项目也拥有更多的色调。一般的网站很少会使用3种以上的色调,但是在扁平化设计中,平均会使用6-8种颜色。


扁平化设计的色调偏通常更有活力——色彩更纯。其主要、次要颜色通常都是非常大众化的颜色,然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。

极简主义


扁平化设计生而简单,整体上趋近极简主义设计理念。设计中应该驱除任何无关元素,尽可能地仅使用简单的颜色与文本。如果一定需要视觉元素,你可以添加简单的图形。

“准”扁平化设计


最近,越来越多的设计师开始赞同准扁平化的设计。在准扁平化设计中,基调仍然是扁平风格的,但会在设计方案中添加一种,且仅添加一种特效,无论是阴影也好、梯度也好……


这种设计风格比严肃的扁平化更加灵活。设计师们喜欢它,因为可以添加深度和纹理;用户喜欢它,因为它能有助于直观的交互。但反过来,也有设计师不喜欢它,因为“准”扁平风格是另两种风格的混合体,缺乏明确的定义,所以更难用好。

原文链接:designmono

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值