广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

实例讲解如何实施扁平化策划

发布时间:2016-03-20 发布作者:老直营威尼斯网址开户 查阅次数:1961次 标签:扁平化

自从apple放弃拟物化策划,采取应用扁平化策划以来,扁平化策划的龙卷风就全面席卷了整个UI策划界,自此之下,无论是网页灰子 茿PP的策划,首尾揣摩的就是采取应用扁平化的策划。扁平化的策划似乎成为了有别于拟物化策划的一种全新的策划思维方式,完全颠覆了拟物化的策划性状style,开创了一个UI策划的新时代。

扁平化策划性状style带给受众的是一种干净、简洁的策划情绪。这样的一种策划性状style在扁平化性状style出现之上莫过于已经被大量应用,只是在策划手法上没有扁平化的策划更好极致。 诸如下面这个案例,是一个典型的扁平化时代之上的策划,但整体的策划性状style与扁平化的性状style类似,都是简洁、干净的策划性状style。莫过于,如果吾们将这个策划中导航条、搜索框等圆素中的高光、阴影去除掉,将此道的图标圆素更换为非拟物化的图标的话,在版式上再改动一下的话,这个策划马上就可以变为扁平化的策划。

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

易于 这般,这篇文章并非要对于扁平化与拟物化的策划孰优孰劣辩个是非,相悖,作为一种策划性状style,身为UI策划师,扁平化的策划性状style如此流行,吾们更好应该把握这种策划性状style的特点及表现手法。这篇文章吾们就用上面HTC策划案例的改版来详细归纳一下扁平化策划性状style的策划要素,把握扁平化策划性状style的策划方法。

so扁平化的策划有哪些策划特点,吾们又该如何动手将这个策划改版为流行的扁平化性状style呢?我大概梳理了一下,基本的步骤应该包括以下几个关键:

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

按照网站鹄的和诉求梳理网站信息,这是无论做哪种性状style的网站策划都要做的第一步work。信息梳理的work非常要紧,它直接关系到一个网站的倾向能否达成,想想最要紧的信息由于缺乏整理没有在页面的要紧地位和视觉关键体现出要紧性,无论策划的再美观,也是无用的。但吾们经常所看到的环境却相悖,一个网站的老品牌威尼斯网址开户被要紧不要紧的信息塞的满满当当,每一个子页面的始末都要在老品牌威尼斯网址开户上占据一个地位,什么产品找子 尽⒀断⒈ǖ馈⒊<ase、专题活动都出Now老品牌威尼斯网址开户上,这样做的结果就是让次要的信息冲淡了要紧信息的比重,信息的主次得不到体现,访问者浏览过网站下似乎什么都看到了,但却没有留下深刻的印象。时刻要记取,策划不是为了漂亮,更不是为了炫技,而是为了便捷信息的沟通。信息的梳理work在扁平化的策划中显得更好要紧,因为扁平化的策划就是要体现简洁、干净的特点,页面上的信息太多,就不太匆子 侄米龀稣庋氖泳跣宰磗tyle来。

拿上面HTC手机页面中的信息来举例,品牌刺绣和导航的始末不用多说,导航作为网站信息组织结构的体现是非常要紧的一个圆素。HTC是一个生产和销售手机的集团,so可想而知,老品牌威尼斯网址开户上最要紧的信息易于 这般是最新产品的找子 荆僬呤亲钚碌淖ㄌ饣疃约靶宰床返恼易于 荆渌 诸如集团讯息、产品支持效劳搜索等始末大可不必在老品牌威尼斯网址开户中出现,因为这些信息相较于上面提到的信息来说,没有so要紧,完全可以在内页中体现即可。

th_2

二、细目策划Plan,具体落实版式、色彩Plan、字体、新意等始末。

网站的信息细目之下,吾们就可以着手来制定更为详细的策划Plan。起首需要细鹄的噬湘式,也就是网站的计划。在扁平化性状style的策划中,由于策划中常使用特别easy的圆素,以是排版就变得非常要紧,成为了策划中出彩的区域。扁平化策划中常见的排版方法是用矩形来计划页面中不同的信息区域, 诸如下面的几个案例所示,可以看到无论是整体页面的计划或者分栏信息的计划,矩形在此道扮演了非常要紧的角色。

3

4

5

6

以扁平化的策划性状style来看,上面HTC老品牌威尼斯网址开户的策划导航部分的新意显得过于复杂,将主要始末固定在一个宽度内的板式看上去也过于小气,以是吾们将目上已有的版式更改为通栏的计划方式。放弃目上导航的策划,将导航文字直接放置于通栏的导航条上,banner部分的策划也做同样的处理,banner下方是最新的活动信息,各个活动信息区域用矩形计划开来。

接着需要细鹄的是色彩Plan。在扁平化的策划中,多采取应用纯度低、亮度高的颜色。高亮色彩的使用让整体的策划性状style更好清新。看看下面这些案例的策划:

7

8

9

10

th_11

吾们取一下HTC的品牌刺绣的颜色,发现这个纯度偏低,亮度较高的Green正符合扁平化的策划性状style,以是直接拿来用就可夜闼。在这个策划中,吾们依然采取应用上面策划中的配色Plan,白色的背下色、品牌刺绣中的Green作为主角色,不同层次的灰色作为配角色进行策划。

在策划的质感上,毋庸置疑,吾们需要去除掉一切之上策划中拟物化的表现方法。 诸如高光、阴影、纹理、等等。这也是扁平化策划的概念最主要的区域:去掉一切冗余的点缀成果。让“信息”本身重新作为主要被凸显出来。字体决定关键,为了契合简洁、干净的策划性状style,吾们采取应用非衬线字体,微软雅黑作为正文字体,banner部分的策划可揣摩尝试更为纤细的字体, 诸如方正兰亭超细黑简体。

一举,吾们基本可以细目整个页面的感觉,初步做出来的策划应该和下图类似:

th_101

接下来吾们进一步细化策划Plan。banner部分的策划是整个页面策划的细节。它是整个页面中最要紧信息找子 厩颍拖裎崦窃谏厦嫣岬降模獠糠智蛴Ω糜美凑易于 咀钚碌牟罚允窃赽anner的新意上吾们计划将实实在在的产品找子 境隼础N崦蔷龆薍TC的HTC One M9手机作为banner部分的视觉主圆素。将其放置于banner区域,调整一下色相、亮度,然下再键入宣传语,搭配上相应的按钮和链接。

Banner下方的分栏信息部分,吾们分别放置了手机零配件、HTC如影摄像头、Free更换效劳三个信息栏目,为了让分栏信息的排版不过于单调,吾们将本来的四栏计划更改为三栏计划,将中点栏鹄的宽度放大,这样在版式上兼有改动,看上去更灵活一些。分栏信息的策划新意全部来自于HTC现有的网站,这里吾们不做其余的新意。分栏信息部分的色彩吾们通过调整图片的颜色,保持了以Green为主色调,辅以灰色搭配的方法,这符合吾们本来在页面色彩Plan上的想法。

再往下是页脚导航和版权信息,这部分的信息不是页面的细节,只要做到契合整体页面的策划即可。

下图是吾们重新策划下的页面,对比改版之上的策划,吾们就能对扁平化的策划方法有一个大概的了解。

th_re-design1

th_1


将PC站点转化为移动站要做哪些优化?

网站策划上卫与创新,简洁精致应是主流方向

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图