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

自从苹果放弃拟物化设计,采用扁平化设计以来,扁平化设计的龙卷风就全面席卷了整个UI设计界,自此之后,无论是网页设计还是APP设计,首要考虑的就是采用扁平化的设计。扁平化的设计似乎成为了有别于拟物化设计的一种全新的设计思维方式,完全颠覆了拟物化的设计风格,开创了一个UI设计的新时代。

扁平化设计风格带给受众的是一种干净、简洁的设计情绪。这样的一种设计风格在扁平化风格出现之前其实已经被大量应用,只是在设计手法上没有扁平化的设计更加极致。例如下面这个案例,是一个典型的扁平化时代之前的设计,但整体的设计风格与扁平化的风格类似,都是简洁、干净的设计风格。其实,如果我们将这个设计中导航条、搜索框等元素中的高光、阴影去除掉,将其中的图标元素更换为非拟物化的图标的话,在版式上再变化一下的话,这个设计马上就可以变为扁平化的设计。

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

在我看来,扁平化的设计如此的流行是因为它更加适应于移动终端设备的小尺寸屏幕。扁平化的设计风格更加适合在手机、平板电脑等小屏幕上进行操作。但把扁平化的这种优势放大到能够颠覆整个设计思维方式的话,无疑是夸大了它的影响。扁平化的设计也有它自身的缺陷,如果将其用在稍微复杂一点的界面中,扁平化设计会带来很多困扰。因此无论它应用的再广泛,扁平化也仅仅只是一种风格而已,在大尺寸的屏幕上,例如网页方面的设计,没有必要都采用扁平化的设计。

当然,这篇文章并非要对于扁平化与拟物化的设计孰优孰劣辩个是非,相反,作为一种设计风格,身为UI设计师,扁平化的设计风格如此流行,我们更加应该掌握这种设计风格的特点及表现手法。这篇文章我们就用上面HTC设计案例的改版来详细分析一下扁平化设计风格的设计要素,掌握扁平化设计风格的设计方法。

那么扁平化的设计有哪些设计特点,我们又该如何动手将这个设计改版为流行的扁平化风格呢?我大概梳理了一下,基本的步骤应该包括以下几个方面:

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

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

拿上面HTC手机页面中的信息来举例,Logo和导航的内容不用多说,导航作为网站信息组织结构的体现是非常重要的一个元素。HTC是一个生产和销售手机的企业,那么可想而知,首页上最重要的信息当然是最新产品的展示,其次是最新的专题活动以及特色产品的展示,其他的例如企业新闻、产品支持服务搜索等内容大可不必在首页中出现,因为这些信息相较于前面提到的信息来说,没有那么重要,完全可以在内页中体现即可。

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

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

网站的信息确定之后,我们就可以着手来制定更为详细的设计方案。首先需要确定的是版式,也就是网站的布局。在扁平化风格的设计中,由于设计中常使用特别简单的元素,所以排版就变得非常重要,成为了设计中出彩的地方。扁平化设计中常见的排版方法是用矩形来划分页面中不同的信息区域,例如下面的几个案例所示,可以看到无论是整体页面的划分或者分栏信息的划分,矩形在其中扮演了非常重要的角色。

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

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

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

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

以扁平化的设计风格来看,上面HTC首页的设计导航部分的创意显得过于复杂,将主要内容固定在一个宽度内的板式看上去也过于小气,所以我们将目前已有的版式更改为通栏的布局方式。放弃目前导航的设计,将导航文字直接放置于通栏的导航条上,banner部分的设计也做同样的处理,banner下方是最新的活动信息,各个活动信息区域用矩形划分开来。

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

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

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

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

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

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

我们取一下HTC的logo的颜色,发现这个纯度偏低,亮度较高的绿色正符合扁平化的设计风格,所以直接拿来用就可以了。在这个设计中,我们依然采用前面设计中的配色方案,白色的背景色、logo中的绿色作为主角色,不同层次的灰色作为配角色进行设计。

在设计的质感上,毋庸置疑,我们需要去除掉所有之前设计中拟物化的表现方法。例如高光、阴影、纹理、等等。这也是扁平化设计的概念最核心的地方:去掉所有冗余的装饰效果。让“信息”本身重新作为核心被凸显出来。字体选择方面,为了契合简洁、干净的设计风格,我们采用非衬线字体,微软雅黑作为正文字体,banner部分的设计可考虑尝试更为纤细的字体,例如方正兰亭超细黑简体。

至此,我们基本可以确定整个页面的感觉,初步做出来的设计应该和下图类似:

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

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

Banner下方的分栏信息部分,我们分别放置了手机配件、HTC如影摄像头、免费更换服务三个信息栏目,为了让分栏信息的排版不过于单调,我们将本来的四栏布局更改为三栏布局,将中间栏目的宽度放大,这样在版式上有所变化,看上去更灵活一些。分栏信息的设计创意全部来自于HTC现有的网站,这里我们不做另外的创意。分栏信息部分的色彩我们通过调整图片的颜色,保持了以绿色为主色调,辅以灰色搭配的方法,这符合我们本来在页面色彩方案上的想法。

再往下是页脚导航和版权信息,这部分的信息不是页面的重点,只要做到契合整体页面的设计即可。

下图是我们重新设计后的页面,对比改版之前的设计,我们就能对扁平化的设计方法有一个大概的了解。

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

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/47148.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
优化家优化家订阅用户
上一篇 2022年7月4日 00:33
下一篇 2022年7月4日 00:34

相关推荐

  • 专业网站设计公司的运营要点。

    专业网站设计公司运营要点: 运营要点:第一,要建立稳定的获客能力。 无论公司是什么行业,想要持续发展,销售是最重要的。只有公司有相对稳定的客户订单,才能支撑公司。专业的网站设计公司也不例外。只有建立稳定…

    2022年9月10日
    058
  • 网站排名怎么优化提升。

    “网站排名不稳定”,关于这个问题,不少站长经常问到百度是不是不正常了?昨天排名好好的今天一下子全都到30名以外了?我置信有相同境遇的站长不在少数,特别是百度最近频频更新算法的状况下,很多站长都是很苦闷。下…

    2022年7月1日
    0113
  • 一个被忽略的营销方式:空间营销。

    营销这条道路,随着人类的不断发展,内容也在不断丰富,从工业革命的传统广告牌再到现如今的互联网时代的网络营销,营销手段的多样化也让营销者们不断探索,不断发掘更好的营销能力,虽然现代移动设备发展迅速,但…

    2022年10月17日
    048
  • 分析定制型企业网站都有哪些特点和优势。

    随着互联网的发展,企业营销网站建设的技术也在不断发展。常用的模板建站技术逐渐被淘汰,随之而来的是定制网站。虽然定制网站越来越火,但是大部分企业并不太了解定制网站的特点,以及相对于模板网站的具体优势。…

    2022年9月10日
    068
  • 我来分享怎么选择网站建设的方式及网站建设类型。

    怎么选择网站建设的方式及网站建设类型?在互联网快速发展的时代里,很多公司都意识到了网站建设的重要性,想要通过网站展现出企业形象、产品、服务等等,但是在建站之前我们要先了解下网站的类型,这样才能够搭建出…

    2023年6月13日
    00
  • 营销型网站建设的思路。

    营销型网站满足于用户体验,满足于搜索引擎优化需求,满足了用户需求,能够留住客户深度浏览,挖掘转化更多的潜在客户,而符合搜索引擎优化规则,是为了能够提高营销型网站对于搜索引擎的友好度,以此提供营销型网…

    2023年2月25日
    00
  • 分享网站建设开发有哪些经常犯的错误。

    网站建设开发有哪些经常犯的错误? 用户的期望实现得越多,他们就越感觉是自己在控制整个系统,并且更加喜欢它。相反地,用户则会感到可靠程度不够。 网站建设开发有哪些经常犯的错误? 1、网站对搜索引擎不友好 搜…

    2022年11月14日
    00
  • 定制网站建设的优势有哪些。

    目前各行各业竞争激烈,做任何推广手段都会考虑投入成本,网站建设也是一样。所以很多企业主只看到目前的展示效果,会选择便宜的模板来搭建自己的网站,而忽略了后期的推广效果。为什么定制网站比模板网站贵?有什…

    2022年9月10日
    068

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息