实例讲解扁平化设计的步骤和要点

  • 时间:
  • 浏览:0
  • 来源:1分时时彩官网_1分时时彩正规平台_1分时时彩平台网址

自从苹果苹果放弃拟物化设计,采用扁平化设计以来,扁平化设计的龙卷风就全面席卷了整个UI设计界,自此前一天,无论是网页还是APP的设计,首要考虑的全都采用扁平化的设计。扁平化的设计似乎成为了有别于拟物化设计的并就有全新的设计思维土办法,删改颠覆了拟物化的设计风格,开创了一另两个UI设计的新时代。

扁平化设计风格带给受众的是并就有干净、简洁的设计情绪。曾经的并就有设计风格在扁平化风格老会 出现前一天觉得愿因着被少量应用,全都在设计手法上没哟扁平化的设计更加极致。累似 下面你你這個案例,是一另两个典型的扁平化时代前一天的设计,但整体的设计风格与扁平化的风格累似 ,就有简洁、干净的设计风格。觉得,愿因着亲戚亲戚朋友儿将你你這個设计中导航条、搜索框等元素中的高光、阴影去除掉,将其中的图标元素更换为非拟物化的图标语句,在版式上再变化一下语句,你你這個设计马上就可还都可不可以不能变为扁平化的设计。

在我看来,扁平化的设计没哟的流行愿因着它更加适应于移动终端设备的小尺寸屏幕。扁平化的设计风格更加适合在手机、平板电脑等小屏幕上进行操作。但把扁平化的你你這個优势放大到还都可不可以颠覆整个设计思维土办法语句,无疑是夸大了它的影响。扁平化的设计就有它自身的过低,愿因着将其用在稍微复杂一点的界面中,扁平化设计会带来全都困扰。让你无论它应用的再广泛,扁平化也仅仅全都并就有风格而已,在大尺寸的屏幕上,累似 网页方面的设计,没哟必要都采用扁平化的设计。

当然,这篇文章难能可贵要对于扁平化与拟物化的设计孰优孰劣辩个是非,相反,作为并就有设计风格,身为UI设计师,扁平化的设计风格没哟流行,亲戚亲戚朋友儿更加应该掌握你你這個设计风格的特点及表现手法。这篇文章亲戚亲戚朋友儿就用里面HTC设计案例的改版来删改分析一下扁平化设计风格的设计次要,掌握扁平化设计风格的设计土办法。

没哟扁平化的设计有什么设计特点,亲戚亲戚朋友儿又该咋样动手将你你這個设计改版为流行的扁平化风格呢?我为宜梳理了一下,基本的步骤应该包括以下2个方面:

一、梳理网站信息,剔除非重要的信息。

根据网站目的和诉求梳理网站信息,这是无论做哪种风格的网站设计就有做的第一步工作。信息梳理的工作非常重要,它直接关系到一另两个网站的目标可还都可不可以不能达成,想想最重要的信息愿因着过低下发没哟在页面的重要位置和视觉方面体现出重要性,无论设计的再美观,也是无用的。但亲戚亲戚朋友儿老会 所看一遍的情况却相反,一另两个网站的首页被重要不重要的信息塞的满满当当,每一另两个子页面的内容就有在首页上所处一另两个位置,什么产品展示、新闻资讯、常见问题、专题活动都老会 出现在首页上,曾经做的结果全都让次要的信息冲淡了重要信息的比重,信息的次要得只有体现,访问者浏览过网站后似乎什么看一遍一遍了,但却没哟留下深刻的印象。时刻要记住,设计就有为了漂亮,更就有为了炫技,全都为了便捷信息的沟通。信息的梳理工作在扁平化的设计中显得更加重要,愿因着扁平化的设计全还要体现简洁、干净的特点,页面上的信息很多,就不太容易做出曾经的视觉风格来。

拿里面HTC手机页面中的信息来举例,Logo和导航的内容前会多说,导航作为网站信息组织底部形态的体现是非常重要的一另两个元素。HTC是一另两个生产和销售手机的企业,没哟可想而知,首页上最重要的信息当然是最新产品的展示,其次是最新的专题活动以及特色产品的展示,一点的累似 企业新闻、产品支持服务搜索等内容大可难能可贵在首页中老会 出现,愿因着什么信息相较于前面提到的信息来说,没哟没哟重要,删改可还都可不可以不能在内页中体现即可。

二、选着设计方案,具体落实版式、色彩方案、字体、创意等内容。

网站的信息选着前一天,亲戚亲戚朋友儿就可还都可不可以不能着手来制定更为删改的设计方案。首先还要选着的是版式,也全都网站的布局。在扁平化风格的设计中,愿因着设计中常使用很重简单的元素,全都排版就变得非常重要,成为了设计中出彩的地方。扁平化设计中常见的排版土办法是用矩形来划分页面中不同的信息区域,累似 下面的2个案例所示,可还都可不可以不能看一遍无论是整体页面的划分愿因着分栏信息的划分,矩形在其中扮演了非常重要的角色。

以扁平化的设计风格来看,里面HTC首页的设计导航次要的创意显得过于复杂,将主要内容固定在一另两个深层内的板式看上去也过于小气,全都亲戚亲戚朋友儿将目前已有的版式更改为通栏的布局土办法。放弃目前导航的设计,将导航文字直接放置于通栏的导航条上,banner次要的设计也做同样的避免,banner下方是最新的活动信息,各个活动信息区域用矩形划分开来。

接着还要选着的是色彩方案。在扁平化的设计中,多采用纯度低、亮度高的颜色。高亮色彩的使用让整体的设计风格更加清新。看看下面什么案例的设计:

亲戚亲戚朋友儿取一下HTC的logo的颜色,发现你你這個纯度偏低,亮度较高的绿色正符合扁平化的设计风格,全都直接拿来用就可还都可不可以不能了。在你你這個设计中,亲戚亲戚朋友儿依然采用前面设计中的配色方案,白色的背景色、logo中的绿色作为主角色,不同层次的灰色作为配角色进行设计。

在设计的质感上,毋庸置疑,亲戚亲戚朋友儿还要去除掉所有前一天设计中拟物化的表现土办法。累似 高光、阴影、纹理、等等。这也是扁平化设计的概念最核心的地方:加进去所有冗余的装饰效果。让“信息”并就有重新作为核心被凸显出来。字体选着方面,为了契合简洁、干净的设计风格,亲戚亲戚朋友儿采用非衬线字体,微软雅黑作为正文字体,banner次要的设计可考虑尝试更为纤细的字体,累似 方正兰亭超细黑简体。

至此,亲戚亲戚朋友儿基本可还都可不可以不能选着整个页面的感觉,初步做出来的设计应该和下图累似 :

接下来亲戚亲戚朋友儿进一步细化设计方案。banner次要的设计是整个页面设计的重点。它是整个页面中最重要信息展示区域,就像亲戚亲戚朋友儿在前面提到的,这次要区域应该用来展示最新的产品,全都在banner的创意上亲戚亲戚朋友儿计划将实觉得在的产品展示出来。亲戚亲戚朋友儿选着了HTC的HTC One M9手机作为banner次要的视觉主元素。将其放置于banner区域,调整一下色相、亮度,让你再键入宣传语,搭配上相应的按钮和链接。

Banner下方的分栏信息次要,亲戚亲戚朋友儿分别放置了手机配件、HTC如影摄像头、免费更换服务另两个信息栏目,为了让分栏信息的排版不过于单调,亲戚亲戚朋友儿将曾经的四栏布局更改为三栏布局,将里面栏目的深层放大,曾经在版式上有所变化,看上去更灵活一点。分栏信息的设计创意删改来自于HTC现有的网站,这里亲戚亲戚朋友儿不做另外的创意。分栏信息次要的色彩亲戚亲戚朋友儿通过调整图片的颜色,保持了以绿色为主色调,辅以灰色搭配的土办法,这符合亲戚亲戚朋友儿曾经在页面色彩方案上的想法。

再往下是页脚导航和版权信息,这次要的信息就有页面的重点,我希望做到契合整体页面的设计即可。

下图是亲戚亲戚朋友儿重新设计后的页面,对比改版前一天的设计,亲戚亲戚朋友儿就能对扁平化的设计土办法有一另两个为宜的了解。

更多精彩文章请访问:飞鱼的声纳