码迷,mamicode.com
首页 > 其他好文 > 详细

抓住“扁平化”

时间:2015-02-13 11:47:26      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:扁平化 互联网 社交网站

谈到设计,无论是一个网站还是一个应用程序,扁平化和极简的设计已经成为新的趋势越来越多的网站设计在UI上走扁平化设计的路线,“扁平化设计”已是当下网页设计的流行趋势。那么,如何让自己融入到这个流行趋势中去

首先,小编就说说什么是扁平化设计。扁平化完全属于二次元,这个概念最核心的地方就是放弃一切装饰效果,诸如阴影,透视,纹理,渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落,没有任何羽化,渐变,或者阴影。尤其在手机上,更少的按钮和选项使得界面干净整齐,使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。

那么,如何将扁平化设计运用到自己的项目中去?下面小编介绍几个采用扁平化设计的例子。

技术分享

 

一、Facebook

Facebook是扁平化界面设计的绝佳案例。它们的主要操作按钮依然使用轻微的立体化,但大量的次要按钮采用了完全的扁平化设计,而且依据事实判断,它们从未改变过界面风格,它一直是这样的。它的界面简约而不简单,让人觉得清新干净。

技术分享

 

 

二、Squarespace

新版的Squarespace几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下就会发现,他们的产品在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后。

技术分享

 

三、Nest

在nest的网站中,实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体(网站本身)当中,虚实结合,让访问者可以很容易的将注意力聚焦在产品上,而不会被网站界面上的视觉元素所干扰。

看过上面一些经典的扁平化设计的案例,可能很多人会觉得实际操作起来,让扁平化融入到自己的网站中去还是比较困难。那小编接下来再介绍一个最近在开源中国上发现的一款框架用户中心,名为Open Center的用户中心,它采用的就是扁平化设计。我们来看看它是如何将扁平化设计融入到产品的界面设计中去。

小编认为,首先要了解自己产品的特点。OpenCenter的特性之一就是“轻量级”,OpenCenter只做用户中心。OpenCenter删繁就简,没有微博功能没有朋友圈,没有群组功能,没有资讯、没有专辑等功能,OpenCenter卸掉臃肿,轻松上阵。基于这点,OpenCenter的用户界面和后台管理界面都采用扁平化的设计,用户界面简洁清新。

 

技术分享

 

上面是Open Center的后台管理界面,清晰简洁。后台管理框架采用zui作为UI框架,图表绘制采用highChart。导航结构顶部为系统级导航,在顶部导航加入了两个便捷功能,清空缓存和打开前台。导航左侧为已安装的模块管理界面入口,点击底部更多可以进入到云平台的模块中心,也可以根据自身需要添加模块。右侧部分为主内容部分,主要统计当天的活跃度与最近N天的新用户注册数,一目了然,此处的N可以在后台配置。

小编认为扁平化设计可以在两个层面上展现:第一是在视觉图形上,如上面的OpenCenter的界面;第二是在信息结构上。视觉图形很容易理解,就是把这种拟物化的3D视觉风格给“拍平了”。信息架构扁平化以后意味着整个层级架构被“拍扁了”,只有单层。

采用扁平化设计可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。而且,它能以一个简单直白的方式来传递一个信息或者帮助一个产品以及思想变得更加深入人心。所以小编觉得,趁在下一个新的设计潮流到来之前,我们必须好好把握当前的设计趋势。

 

 

 

 

 


本文出自 “Zebra斑马斑马” 博客,请务必保留此出处http://01201012.blog.51cto.com/9882493/1614244

抓住“扁平化”

标签:扁平化 互联网 社交网站

原文地址:http://01201012.blog.51cto.com/9882493/1614244

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!