首页 > 教程 > 关键词 > 网页设计最新资讯 > 正文

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

2016-01-12 17:35 · 稿源:飞鱼的声纳的网站

自从苹果放弃拟物化设计,采用扁平化设计以来,扁平化设计的龙卷风就全面席卷了整个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现有的网站,这里我们不做另外的创意。分栏信息部分的色彩我们通过调整图片的颜色,保持了以绿色为主色调,辅以灰色搭配的方法,这符合我们本来在页面色彩方案上的想法。

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

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

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

  • 相关推荐
  • 大家在看
  • i云保放大招“稳就业” 保险营销扁平化是关键

    保险行业“开门红”因疫情遭受重创后,目前已有序进入复工复产期。同时,来自各平台的保险人才招聘需求日渐旺,据不完全统计,截至目前已有多个保险业垂直平台积极发布数十家保险公司的人才招聘信息,招聘岗位多达1600多个,几乎涵盖集团各部门及旗下各类公司的各级机构,大有雨后春笋之势。与此相对的是,保险科技服务平台i云保积极响应中央“稳就业”的号召,凭借扁平化的组织架构、科技赋能从业者,使得平台保险代理人脱落率下?

  • 设计实战 赞扬设计服务带你探究LOGO设计

    我们都知道,每个公司都有着它自己的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师们才能基于它们来为这些公司企业进行LOGO设计。LOGO绝对是最能够直观的体现一个公司属性和风格的东西之一。专门设计一个独立的、与众不同的LOGO是一件很艰难的事,因为就目前市场上存在的公司企业和五花八门品牌LOGO实在是太多太多了。LOGO设计的独一无二,对公众而言,能够看一眼就能快速的想起某一?

  • 丐帮设计打造人人共享在线设计平台

    受疫情影响,互联网经济整体增速放缓,新的营销困境也随之而来。流量是企业的核心困境,而营销渠道是流量的新动能。丐帮设计率先打破了数字化营销的技术壁垒,通过强大的人工智能技术,研发出能随时满足用户需求的设计共享平台。人人都是设计师提到设计,我们会想到什么?是长城、金字塔那样的伟大建筑?是每年巴黎时装周的高定新款?还是埃舍尔的矛盾空间?是,却不止如此。工薪族如何做出精美被老板夸赞的PPT?自媒体人怎样作图?

  • 设计师的福音,超高颜值的ConceptD 3设计本

    对于众多设计师而言,一款专业的笔记本必不可少,但在笔记本市场上符合设计师需求,轻薄、性能、色彩与颜值都满足设计师群体的笔记本少之又少,如何选择选择一款适合创作的笔记本成了众多设计师们的难题。2019年,宏碁针对设计师群体推出了ConceptD系列设计本,在保持轻薄的同时拥有高性能,并为设计师们带来精准的屏幕色彩,提高创作效率,成为众多设计师的不二之选。并在今年618京东购物节之际,宏碁开启限时优惠,618期间购买Co

  • 设计好看就是可以为所欲为

    在汽车历史上有一款很神奇的车,它性能平平,做工粗糙,售价还很贵;它声名狼藉,恶评如潮,卖的也不好;它早早停产,却名留青史,成为一个象征未来的艺术符号。

  • 特斯拉正邀请中国设计师为其设计汽车 新车将面向全球销售

    【TechWeb】6月17日消息,据国外媒体报道,特斯拉正在为其小型版新电动汽车征集来自中国汽车设计师和业余设计师的设计方案。特斯拉是通过其官方微信发布的公告,邀请来自中国的汽车设计师和非汽车设计师为其新车提交设计。该公司将考虑中国设计师提交的设计方案,被选中的设计未来可能会在其上海超级工厂下线。外媒报道称,虽然这款车将在中国设计和生产,但特斯拉的目标是在全球销售。到目前为止,特斯拉及其CEO埃隆·马斯克都没

  • 特斯拉邀请中国设计师设计汽车!造“中国风”特斯拉

    随着特斯拉国产步伐的加快,特斯拉在中国市场变得越来越活跃。6月16日消息,据外媒报道,特斯拉正在邀请中国的专业汽车设计师和分专业设计师提交方案,制造出小型版新电动汽车。事实上,早在

  • OPPO主题设计大赛正式启动,招募优秀设计合伙人一起“绽放无边界”

    6 月 23 日,OPPO主题设计大赛正式开启招募。OPPO通过大赛招募优秀设计合伙人,共同探讨科技与艺术人文的智美融合,挖掘个性化主题设计与壁纸设计的艺术价值和商业价值,为OPPO用户打造独具一格的美学与交互体验。 OPPO主题设计大赛是由OPPO主办的一场设计美学盛会,旨在将“科技”与“艺术人文”的融合及畅想触达全球,让优秀设计师、插画师突破常规,施展创作灵感。本次大赛以“绽放无边界”为题,特邀知名插画师特浓TN、Lost7

  • 设计没灵感?使用免费的Billfish搭建个人灵感库试试

    设计师是一个“创意”至上的职业,很多设计公司的核心理念就是“无创意,不设计”,折射出的是设计师对创意,对创新的极致追求。然而,有很多设计师苦于自己的创意“贫乏”,在工作中苦苦的挣扎。我们经常在提倡创新,但其实内心最清楚,我们设计的很多作品只是在沿用以前的设计思维,特别是一些产量和产值为中心的设计公司。面对如此的市场环境,个人设计师如何快速的找到灵感,常用的方式便是借鉴于各大平台网站,久而久之很难形

  • 满足轻奢需求 一汽-大众CC设计清新又高档

    买车,舒适度是自己的,设计是给自己同时也是给别人看的,因为,人,都是有社会属性的,当然希望别人觉得你的选择有档次,又有品位,比如大众CC。优点:大众CC的 18 寸轮毂 245 的米其林轮胎,还有前后独立空调,全新触摸按键,真的没谁了。动力也是很不错的,只要敢给油,就有推背感,虽然不像美系车那么猛,但还是有的。油耗也很动人,买了车的第二天就开车去上班了,高速上居然开出了 4 点多的油耗。回头率真的超级高,比奥迪和

  • 我乐家居拯救糟糕睡眠的卧室设计,你不准备看看?

    你的睡眠被偷走了吗?如今,睡眠质量几乎成了一个社会性问题,防噪耳塞、枕边精油、蒸汽眼罩、褪黑素…………五花八门的新奇好物只为给人们一个安稳的睡眠体验。不过,这些方法虽然有效,但却治标不治本,想要拥有优质睡眠,还是得先从自家的卧室设计入手。今天,我乐家居就教你如何轻松get一间“高质量睡眠的卧室”。1、利用好色彩搭配研究证明,不太合适的卧室色彩设计往往会影响人们的睡眠质量;反之,好的卧室色彩设计则会平静

  • 哈弗大狗内饰首次曝光:从未见过的设计

    近日,有网友曝光了一张哈弗全新SUV——哈弗大狗的实车内饰图片。新车将基于哈弗全新平台打造,并由前路虎设计总监、现长城汽车全球设计总监兼副总裁菲尔·西蒙斯操刀设计。图

  • 苹果新iMac曝光:窄边框设计

    尽管从全行业来说已非主流,但苹果一直保留着iMac一体式电脑产品线。据国外爆料人消息,苹果可能会选择在今年6月22日举办的WWDC上推出新款iMac。首先是外形方面,iMac将参考iPad Pro的设计语

  • 全新宝马4系大鼻孔设计惊到网友!罗永浩表示“无语”

    和预想的一样,全新宝马4系发布后,其超大“鼻孔”设计引起了网友的热议,如今连罗永浩也加入了这场讨论。近日,网友@汽车营销分析在微博上曝光了一张全新宝马4系的实车图,不少网友

  • AEG开关插座-为高净值人群的安全倾心设计

    多年来,我一直在美国旧金山工作,从事室内装饰设计,为很多追求高品质的用户设计打造了他们喜欢的装修风格。对于德系高端品牌AEG,我最初了解到这个品牌,也是通过我的客户,有许多客户在我为他们设计装修风格时,都要求使用AEG的洗衣机、洗碗机、开关插座等,对于这个品牌我有了深刻的印象,之后去详细了解了这个品牌,确实如很多客户所说的那样,德系百年高端品牌,无论是家居电器系列,还是电气系列的产品,质感和品质都是屈指

  • 室内设计师的视频号逆袭之路

    ​我是一个室内设计师,做了 10 年的室内设计,有 6 年都是研究中式设计,在这里面投入大量精力和时间,客户很是认可。

  • 苏州凡伊乐品牌饭豆豆家居:让生活、设计与爱无限延伸

    给有限的生活以无限的张力,让生活、设计与爱无限延伸。有限的事儿是随时可以发生的:幸福的光阴不会无时无刻、蓬勃的生命力不会年复一年、天涯会在快乐的咫尺中缩短、童年的无忧无虑会在成长的烦恼中消失、一个设计作品的存在时空也不会永远......但是有限的瞬间也会产生永恒,从而无限延伸,我们的人生也会因为从有限中传递出来的某种无限让人无比眷恋。伟大的画家梵高就是在有限的生命时光里找到了自己永恒的绘画语言,他认为:“颜色

  • 多位明星的宣传+独特的精心设计 这样的天王表真香

    对于天王表在去年上新的X-MAN系列,相信很多人都不陌生,因为这款表在宣传上采用了特殊的方式,在质量过硬的基础上又采用了专利设计。众多明星为天王表做宣传去年8月5号,不老男神张晓龙现身国货领军品牌天王表举办的X-MAN系列新品发布会,与现场粉丝和腕表时尚爱好者一同领略了天王表X-MAN系列新品的潮流魅力。作为娱乐圈少有的学霸男神,张晓龙总是对他从事的每一个领域都保持着无限的探索热忱,时常破壁踏足更多的领域,身份标?

  • 钉钉经营范围新增广告发布 广告设计

    天眼查数据显示,近日,钉钉(中国)信息技术有限公司的经营范围发生变更,新增广告发布;广告设计、代理;广告制作等。钉钉(中国)信息技术有限公司成立于2018年3月,注册资本20亿元,法定代表人为钉钉CEO陈航,由DingTalk(Singapore)Private Limited全资持股。

  • 碰瓷大师!微佳汽车直接把蔚来车标“翻过来”用 网友:设计都请不起?

    由于资本市场的青睐,国内的造车新势力也如雨后春笋一般,近些年来也猛增了不少。不过,新增的大大小车企中,各家实力与造车目的也有不同,也难免会制造出不少“火花”来。近日,又

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议