飞车作图吧 关注:21,799贴子:44,767

【转载】扁平化设计&扁平化设计技巧。

只看楼主收藏回复

扁平化的概念最核心的地方就是放弃一切装饰效果,诸如透视,纹理,渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落,没有任何羽化,渐变。尤其在手机上,更少的按钮和选项使得界面干净整齐,使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。英文名为“flat design.”(扁平化设计),这个概念2008年由Google提出。但围绕着“flat design.”这个名字存在着诸多争论。现在你所看到的这个名称“flat design.”也不是被大家绝对地认可。不同的公司团体都尝试用过其他名称,例如minimal design, honest design,而微软公司甚至称它作 “authentically digital”。


1楼2014-12-23 19:24回复
    优缺点
    一、扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。二、随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。在扁平化设计中目前最有力的典范是微软的windows 8以及windows phone和windows RT的metro界面,不得不说Microsoft不愧为扁平化用户体验开拓者,如此大胆的尝试与实现,不得不让人佩服。与扁平化设计相比,在目前也可以说之前最为流行的是skeuomorphic设计,最为典型的就是苹果IOS系统中拟物化的设计,让我们感觉到虚拟物与实物的接近程度,如今IOS7也已在向扁平化改变。正如很多设计一样,扁平化设计也有缺点,比如需要一定的学习成本,传达的感情不丰富,甚至过于冰冷。


    2楼2014-12-23 19:25
    回复
      设计技巧
      对于设计师来说,如果你观察微软的 Windows Phone 的平台,你可能会发现一个特别的现象:那就是难看的应用不多,但令人印象深刻的应用也不多。应用很有统一感,但是很难张扬个性,以至于有的开发者感叹,它们看起来都 是一个样子。设计师 Johnny Holland 将 Metro 语言比作是包豪斯风格,并且指出,“因为去除了装饰,使得个性化的空间很小”,这可能给人以“缺乏生命力”的感觉,所以要想设计做出好的扁平化设计,也是非常需要技巧的。简单的设计元素扁平化完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了。这个概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。强调字体的使用字体是排版中很重要的一部分,它需要和其他元素相辅相成,想想看,一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子,无衬线字体家族庞大分之众多,其中有些字体会在特殊得情景下会有意想不到得效果。但注意,过犹不及,不要使用那些极为生僻的字体,因为保不齐它就把你带进坑里了。关注色彩扁平化设计中,配色貌似是最重要的一环,扁平化设计通常采用比其他风格更明亮更炫丽的颜色。同时,扁平化设计中的配色还意味着更多的色调。比如,其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到八种颜色。另外还有一些颜色也挺受欢迎,如复古色浅橙、紫色、绿色、蓝色等。简化的交互设计设计师要尽量简化自己的设计方案,避免不必要的元素出现在设计中。简单的颜色和字体就足够了,如果你还想添加点什么,尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大,它能很有效的把商品组织起来,以简单但合理方式排列。伪扁平化设计不要以为扁平化只是把立体的设计效果压扁,事实上,扁平化设计更是功能上的简化于与重组。比如,有些天气方面的应用会使用温度计的形式来展示气温,或者计算应用仍用计算器的二维形态表现。在应用软件当中,温度计的形象则纯粹是装饰性的,而计算器的计算方式也并不是最简单直接的。相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来。


      3楼2014-12-23 19:25
      回复
        业界对微软Windows8操作系统全面采用Metro界面风格的作法褒贬不一,但在一切还没有定论之前,苹果的iOS和Android 安卓系统却立即跟进,一时间扁平化设计风格风靡全球。于是一夜之间,好像所有的东西都被拍扁了,网页、软件、海报等各种界面都刮起一阵扁平化的暴风。实际上,扁平化风格并不是什么新鲜的事物,早在几十年前,设计界就有极简风格的流行。另外像传统的平面媒体,比如交通、公共场所指示系统等,也一贯采用的是扁平化的设计风格。对于设计师来说,其实扁平化风格要比传统的拟物化风格更容易实现,特别是更容易矢量化,这也是为什么当前UI设计偏爱扁平化风格的重要原因,因为这种风格可以适应在不同分辨率的屏幕之上。当然要设计出一款精美的扁平化风格产品,也不是容易的事情,这需要一些技巧和方法。下面讲述的技巧可以有助于设计师快速构建出美观的界面元素。


        4楼2014-12-23 19:26
        回复
          工具/原料
          平面图形处理软件
          矢量图形设计软件
          设计灵感
          敏锐的颜色感


          5楼2014-12-23 19:26
          回复
            方法/步骤
            什么是扁平化设计
            扁平化设计是一种极简主义的美术设计风格,通过简单的图形、字体和颜色的组合,来达到直观、简洁的设计目的。扁平化设计风格比较常见于传统媒体,比如杂志、公交指示牌等处。随着计算机网络技术的发展,扁平化设计风格越来越多应用于软件、网站等人机交互界面,以迎合使用者对信息快速阅读和吸收的要求。与扁平化设计风格相对的是偏向写实的拟物化设计风格。要设计出好的扁平化界面,必须抛弃所有拟物风格的技巧。我们可以通过一张图来了解拟物化设计的主要特点,把这些特点统统扔掉,就是扁平化设计的特征:


            6楼2014-12-23 19:26
            回复
              极简的元素
              扁平化设计追求的是一切极其的简洁、简单,反对使用复杂的、不明确的元素。在设计扁平化风格界面时,特别是在图标的设计时,应该遵循极简原则。复杂的、含义模糊的元素将会造成使用者的困扰,这与扁平化设计风格直观、简洁的总原则是相违背的。只有采用足够简约的设计元素,才能达到最好的展示效果。


              7楼2014-12-23 19:27
              回复
                贴切的图标
                在设计图标时,必须使用与所对应功能紧密关联的图标元素,并且这个元素应是通用的、广为人知的,基本不受地域、种族、文化、语言等因素影响。绝对禁止使用一些定义模糊,寓意不清的元素,或者某些行业特有的,某些领域专用的元素。比如在下面这张图中,如果设计师要表达的是“分享”这一功能,那么显然右侧的图标更具有通用性:


                8楼2014-12-23 19:27
                回复
                  更多的圆角
                  在产品设计中,设计师经常会采用圆角设计,以防止在产品使用过程中对使用者造成伤害,这种人性化的设计深受使用者的欢迎。同样的道理,在用户界面设计过程中,使用一些圆角图案,不但会使设计更具亲和力,也会让使用者更容易接受设计者的设计意图。这也符合大众追求圆润、圆满的心理需求,下面的图例就可以充分表明这一情况:


                  9楼2014-12-23 19:27
                  回复
                    中性之美
                    在扁平化设计中,色彩的应用极为重要。由于抛弃了拟物化设计风格的渐变、高光等特效,只能使用纯色块来进行设计,那么在色彩的搭配和选择上就极有讲究。为了能让使用者舒适的阅读、使用设计者的作品,不造成眼睛疲劳或者其它不适感,设计师应尽量选择中性的颜色。也就是说,要避免使用饱和度过高的纯色,比如纯红、纯绿、纯蓝等颜色,因为这些颜色在展示的时候会非常刺眼,严重影响使用者的视觉体验。同样可以通过下面的图片来对比两者之间的差异:


                    10楼2014-12-23 19:27
                    回复
                      鲜明的对比
                      在色彩的应用中,要注意颜色之间的对比,只有通过鲜明的颜色对比,才能迅速抓住使用者的眼球,让设计师的意图表现的更加明确。通常的技巧是,通过亮度、色温、对比色、互补色等等手段来实现颜色的对比,应尽量避免使用参数相近的颜色,这样的颜色搭配会使阅读困难,甚至会造成使用者的极度不适。可以通过下面的这张图来体会其中的奥妙:


                      11楼2014-12-23 19:28
                      回复
                        字体的选择
                        在扁平化设计风格中,因为追求极致的简洁,力求最快速、最直观的表达设计者的意图,所以在字体的选择上,也是以简洁、清爽为标准。应采用通用的、笔划清晰的字体,避免使用字迹不清的字体,比如草书,特殊字体等,也应该避免使用已经不再流通的字体,比如古代甲骨文、篆体字等等(特殊用途除外)。对于中文字体来说,诸如雅黑、幼圆或者细黑等字体都是不错的选择。英文字体也是同样的道理,如下图所示:


                        12楼2014-12-23 19:28
                        回复
                          善用灰色
                          黑色、白色和灰色在扁平化设计中至关重要,由于采用了大量的色块,难免给用户以眼花缭乱的感觉。所以在有的时候,设计师为了突出重点,可减少色块的使用,而转由使用一种或者二种主要的颜色来突出主体,其它部门则通过灰色来表达。由于灰色与任何颜色都不冲突,所以在设计时,巧妙的使用灰色,将起到意想不到的效果。正确的使用灰色,将使主体更明确和突出,更容易被使用者接受。


                          13楼2014-12-23 19:28
                          回复
                            拟物设计的转型
                            对于原有的拟物设计风格,如果要向扁平化设计转型,那么只需要将原来设计风格逐一抛弃,分别去除描边、阴影、渐变、高光等等特效,让设计回归本原,用最简洁的几何图型和最清晰的颜色来表达设计者的灵感。当然扁平化设计虽然有许多的优点,但也并不是万能药,并不是所有场合都适用扁平化设计,设计师要根据情况选择正确的设计风格,从而达到最佳的设计效果。


                            14楼2014-12-23 19:28
                            回复
                              注意事项
                              与任何平面艺术一样,扁平化设计也非常注重留白的运用,要给使用者充分的呼吸空间。
                              扁平化设计中的排版设计同样非常重要,整齐有序、条理清晰的排列将使设计事半功倍。


                              15楼2014-12-23 19:29
                              回复