趋势无论是在网页设计或者移动端的设计方面都已经蔓延开

扁平化设计—这个早在多年前非常流行的设计领域-又再一次卷土重来了。许多新网站以及需要重新设计的网站都纷纷采用了扁平化设计的方案,这种趋势无论是在网页设计或者移动端的设计方面都已经蔓延开了。

随着融汇了扁平化设计美学的windows8以及新版谷歌的推出,以及其他人气网站纷纷采用这种扁平化的主题设计,这种扁平化的趋势将很有可能受到更加多的亲睐。

你是否考虑过?你能够把它运用到你的项目当中吗?这种设计方案是否能够给你带来更加轻松的工作体验?

扁平化设计具有着一种让人心醉的美丽.没有大量的修饰,它能以一个简单直白的方式来传递一个信息或者帮助一个产品以及思想变得更加深入人心。所以说,趁在下一个新的设计潮流到来之前,我们现在就必须好好把握当前的设计趋势。

什么是扁平化设计?

扁平化设计正是通过放弃任何附加效果的方式,创建了一个“零”3D属性的设计方案。在这里,没有drop shadows阴影效果, bevels斜角, embossing浮雕, gradients渐变等其他方法来帮助lift元素产生相对于屏幕的凹凸效果。不带有羽化边缘以及阴影效果的图标和UI元素也都是看起来非常鲜明。

扁平极简 就是Flat design的灵魂所在。

Flat design并不是彻底放弃效果。它只是不存在那些能让人产生立体感觉的深度depth 和维度dimension.我们什么甚至可以这样认为,更多的设计倾向于“准扁平化”的范畴,这时候我们从产品的大体角度来看,仍然存在很小一部分的效果。

技术

忘掉所有的修饰元素.它们不是扁平化设计要关注的地方。

在这里我们需要把注意力放在色彩上。扁平化的设计方案经常使用许多鲜明的色彩。从色块,色形以及色调来看,色彩确实是提升扁平化设计一个不可或缺的组成部分。在你的logo上的用色方面多加斟酌,能够使得你的网站引人入胜。在扁平化方案上仅仅使用白色和黑色就能够产生不错的效果,但你想着这效果要更进一步,那也可以采用更多的色彩。

注意字体.文字是必不可少的-他们提供了信息,它作为了一个工具在你的网站上引导你的用户该做什么。使用一些有趣且独特的字体来修饰文字,当然了,在这里你就不要再想着Arial(微软字体).挑选出字体来配合你所要表达的信息.记住扁平化方案的要旨是极简,因此在字体的运用中,我们应该考虑其如何切合这个要点.简单的sans serif 类字体在这个方案中可应用的种类非常广泛.或者我们不妨做出一点稍微“越轨”的处理方法,考虑更加在一个扁平化设计方案中选择一个新奇的字体作为美术元素,这必定比简单的字体的运用更加夺人眼球。

做到惜字如金。许多扁平化设计同样也运用了少量文字来营造一个简约的风格。因此,因此,我们要确保表在每个字中都能发挥出重要的作用。

简约的用户界面 和UI元素。用于被点击的按钮不需要过于复杂的设计。只要这些风格要素有了明确的定义,就不会阻碍他们成为“称职的”按钮。这些要素包括颜色,轮廓,框架或者甚至是不同字体或者形状。

创建层级.在扁平化设计中,即便在被点击的区域中使用了shadows阴影, gradients渐变, bevels斜角等其他效果来进行特别注明,一些人还是感觉这些用于被点击的区域表现得还不够明显。这足以说明,创建一个明显的层级结构在任何一个网站上是极其重要的。我们要明确地让用户做到对你的网站一目了然。如果链接本身就拥有不同的色彩或者独立被包含同一个区域中以供用户点击,那么链接也应该要清晰地表现出来。

Flat Design的命名

围绕着“flat design.”(这里译者翻译为扁平化设计)这个名字存在着诸多争论.现在你说看到的这个名称“flat design.”也不是被大家绝对地认可。

不同的公司团体都尝试用过其他名称,例如minimal design, honest design,而微软公司甚至称它作 “authentically digital”。

对此你的看法是什么呢?让我们在Branch集思广益吧。

Flat Design启示

很多人都说扁平化设计只是刚刚在设计/开发的 团体中开始流行。下面请你借鉴下这些来自Pinterest and Dribbble的一些关于flat design 优秀资源,并以此考虑你的下一个项目该能怎么用得上他们)(我们需要注意的是:Pinterest本身不采用扁平化设计方案.

Flat UI Design Pinterest board by War Marc

Flat UI Pinterest board by Marco Heutink

Square UI elements on Dribbble

Santa tracker icons on Dribbble

Flat UI on Dribbble

Square UI on Dribbble

Haraldur Thorleifsson on Dribbble

Bobby McKenna on Dribbble

Griffin Moore on Dribbble

Kyee on Dribbble

总结

得益于它自身简单的特性,扁平化设计方案才能够在信息和产品当中表现得如此突出.简单,整洁,直接。这种样式设计在小屏幕上得到了更好的表现,尤其是在手机移动端上,不过许多人觉得其在大屏幕的表现同样抢眼,安卓平台以及微软手机同样在他们的操作平台上采用了扁平化设计方案。(苹果是一个与之相对例外,它采用的的是skeuomorphic scheme)

在扁平化设计上进行添加相对来说相对困难,因为再也没有那些shadows修饰效果来隐藏你设计上的不足,在这里,每一个细节,你都必须要用心顾及。扁平化设计同样在多色彩的方案中有不俗的表现。无论是艳丽的色彩,还是黑白灰都能够在扁平化的设计当中找到一席之地。在另一方面,在平面的某些设计当中仅仅设置黑白两种颜色当然无可厚非.但如果整个页面设计都是如此的话,那么确实也让人看起来有点吓人,在这个时候,我们也许能考虑采用一个“准扁平面方案”,为此保留少量的效果以作修饰。

时间: 2024-10-28 17:31:11

趋势无论是在网页设计或者移动端的设计方面都已经蔓延开的相关文章

2016年最值得关注的移动端APP设计趋势

  不论移动端网页和APP之间有着怎样的争论,移动端APP的快速发展都是不争的事实,各种客户端的开发和接入已经成为常态.用户对于自己喜欢的品牌和服务,总期待官方能推出客户端,也正是在这种期待和需求之下,催生出越来越多的APP. 事实上,有APP分析机构的研究表明,用户每天耗费在手机和平板上的平均时长为158分钟,其中127分钟是耗费在各类APP中,而仅有31分钟是花费在浏览网页之上.且不去深究这个数字是否适用于不同的国家和地区,但是总体的趋势大家都看的很明白.用户的需求越来越多,如果开发者和厂商

给网页设计师的移动端网页设计简明指南

  早在几年前移动端的数据流量就已经超过桌面端了,手机和平板占据主流,而融合两者优势的巨屏手机更是大行其道.对于现在的设计师而言,真正的第一屏到底是桌面还是移动端界面,真的很难说了.也许"移动端优先"的说法并不准确,但是"移动端屏幕为主"的说法和实际状况已经非常接近了.打造优秀的小屏用户体验,已经是当今设计师深入骨髓的本能了. 那么造就优秀的移动端用户体验,最重要的是什么?精细的图片?雅致的图标?还是细致入微的UI界面?如果你经常浏览移动端网页,你最期待的应该还是无

十大令人振奋的移动端APP设计趋势

  从移动端兴起,主流设计风格定型,再到Uber.Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境.促成这一切的影响因素很多,比如社会发展趋势的变化.共享经济的大热.新技术的积累,等等等等.这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来. 同样的,今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备. 随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多.查看邮件.预订酒店.叫外卖都有赖于各种应用,而诸如Airbnb和

2013网页设计新趋势:扁平化网页设计

文章描述:这里简单介绍下关于扁平化的概念,所谓"扁平化设计"一词所指的是抛弃那些已经流行多年的渐变.阴影.高光等拟真视觉效果,从而打造出一种看上去更"平"的界面.善于用颜色去鼓励用户探索. 随着互联网的高速发展,我们可以看到质感厚重,图层样式繁多的网站越来越少,反之各种轻质感,布局大胆.创意新颖.的网站慢慢进入了大家的视野,人类发展至今,人们的审美.时尚标准总是无时无刻不在改变,互联网也是这样,下面这篇文章将要给大家谈谈2013网页设计新风向 "扁平化设计

网页设计:加入购物车按钮设计与可用性

"加入购物车"按钮非常小,但每个在线购物网站都离不开它.按钮上的文字通常直接呈现在长方形的按钮控件上,有时五彩缤纷的可点击元素会将产品和购物车相联系起来,并有延伸品牌的功效.因此在购物车按钮的设计中,很重要的一点就是将你的一些想法代入到你所设计的产品中. 我们自2006起,从各个顶级在线零售网站已经收集了超过100个"加入购物车"按钮,这些按钮会带给你一些设计的灵感.此外,我们也总结了一些针对"加入购物车"设计的可用性指南共设计者参考.好吧,实际

响应式设计如何做出效果 移动端专题设计也可以很出彩

移动端的市场越来越火热,这是有目共睹的.对于网建者来说,先做PC版页面还是移动端页面成为一个难以抉择的问题.网站专题设计进入一个新阶段,新领域.专题网页设计的优势在与短平快,在短时间内能取得较好的效果. 移动端网页所要考虑的因素并不亚于PC端,若是直接将PC端的设计搬到移动端上,在不同设备屏幕分辨率和网速的影响下,效果并不尽如人意,造成视觉限制.响应式设计是大势所趋,但需要考虑在不同分辨率下的响应效果,投入的时间.金钱和精力是专题网页设计的多倍.高效而有力的方法还是运用专题网页设计. 1.适应主

网页制作最常见问题:怎样设计网页

设计|网页|问题 怎样设计网页 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了-- 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作.正所谓"功夫在诗外",网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制作的水平上,在于我们自身的美感以及

Dribbble无线端交互设计GIF动态图案例

文章描述:无线端交互设计(Dribbble GIF动态图实例). 盘点Dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟:) [1] [2] [3] [4] [5] [6]  下一页

Web端的设计:让我们的web端产品跟上时代的脚步

文章描述:如今,随着智能手机.平板电脑等移动手持设备的普及,越来越多的Web网站都在向这些平台做兼容.同时,这些移动设备上的视觉设计与交互设计也在影响着Web端的设计. 如今,随着智能手机.平板电脑等移动手持设备的普及,越来越多的Web网站都在向这些平台做兼容.同时,这些移动设备上的视觉设计与交互设计也在影响着Web端的设计. 所以,现在我们的设计是不是要变得更加的popular一点呢?是不是可以总结出一些方法让我们的web端产品跟上时代的脚步呢?