加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

扁平化设计的五大原则(转载)

(2014-01-10 14:21:19)
标签:

扁平化设计

it

分类: Web前端
一、拒绝特效
     扁平化这个词来自己于这种设计所使用的样式和形状,它完全属于二次元世界, 一个简单的形状加没有景深的平面。

     这个概念是核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净余俐落,没有任何羽化、渐变或者阴影。
     这一设计趋势极力避免任何拟物化的元素,这导致这一设计风格在其它平台有时候显得突兀,前景图片、按钮、文本和导航栏与背景图片格格不入,各成一派。
     这种设计有着鲜明的视觉效果,它所使用的元素之间有着清晰的层次和布局,这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格,尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使用界面干净整齐,使用起来格外简单。

二、界面元素
    扁平化设计通常采用许多简单的用户界面元素,诸如按钮或者图标之类。设计师们通常坚持使用简单的外形(矩形或者圆形),并且尽量突出外形,这些元素一律为直角(极少的一些为圆角)。
    这些用户界面元素可以方便用户点击,这能极大的减少用户学习新交互方式的成本,因为用户凭经验就能大概知道每个按钮的作用。
    此外,扁平化除了简单的形状之外,还包括大胆的本色。但是需要注意的是,扁平化设计不是说简单的搞些形状和颜色搭配起来就行,它和其它设计风格一样,是由许多的概念与方法组成的。

三、优化排版
    由于扁平化设计使用特别简单的元素,排版就成了很重要的一环,排版的好坏直接影响视觉效果,甚至可能间接影响用户体验。
    字体是排版中很重要的一部分,它需要和其他元素相辅相成。如下图是一些扁平化网站使用无衬线字体的例子,无衬线字体家族庞大分枝众多,其中有些字体会有特殊得情景下有会意想不到的效果,但注意,过犹不及,不要使用那些极为生僻的字体。
    如何使用字体也是一门学问,要学会让不同的字体表达不同的概念,通过字体告诉用户这某一设计/功能的含义,努力使字体成为你简化设计的有力武器。

四、如何配色
    扁平化设计中,配色是重要的一环,通常采用比其它风格更明亮更炫丽的颜色,同时,扁平化设计中的配色还意味着更多的色调。比如,其它设计最多只包含两三种主要颜色,但是扁平化设计中会有平均六到八种颜色。
    而且扁平化设计中,往往倾向于使用单色调,尤其是纯色,并且不做任何淡化或柔化处理(最受欢迎的颜色是纯色和二次色)。另外还有一些颜色也挺受欢迎,如复古色(浅橙、紫色、绿色、蓝色等)。

五、最简单方案
    要尽量简化自己的设计方案,避免不必要的元素出现在设计中。简单的颜色和字体就足够了,如果还想添加点什么,尽量选择简单的图案。
    扁平化设计尤其对一些做零售的网站帮助巨大,它能很有效的把商品组织起来,以简单但合理方式排列。

另:伪扁平化设计 

    还有一种趋势,一些设计师把某一项特效融入整体的扁平化之中,使其成为一种独特的效果,比如,在简单的按钮加一点点渐变或阴影,从而使这种风格成为其特色,产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性。
    







0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有