抓住“扁平化”

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

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

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

一、Facebook

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

二、Squarespace

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

三、Nest

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

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

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

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

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

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

时间: 2024-10-30 11:51:36

抓住“扁平化”的相关文章

扁平化设计:赶一种叫“简约”的时髦

人可以说是一种受感官支配的动物,我们被食物的香味吸引,被悦耳的音乐吸引,更容易吸引我们的是透过视觉看到的东西.因此人也可以说是一种视觉动物,我们很容易通过视觉来判断很多的东西,美丑甚至是善恶.再进一步来说,色彩是抓住我们视觉的核心. 互联网技术发达的今天,我们打开电脑.手机就能看到许多的网站.应用,最先吸引我们的应该不是它们的性能而是色彩.因此对于网站设计来说,界面色彩的设计也是不得马虎的重要环节. 说到设计,扁平化设计应该算是现下的设计热门词,无论是一个网站还是一个应用程序,扁平化和极简的设计

扁平化设计2.0

时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格.扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0. 扁平化设计特质 对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征: 1)没有多余的效果,例如投影.凹凸或渐变等 2)使用简洁风格的元素和图标 3)大胆丰富且明亮的配色风格 4)尽量减少装饰的极简设计 扁平化所追随的细节依然不变,然而这些"规范"开始松懈了

扁平化设计的历史

[摘要]"扁平化设计"是一种设计风格术语,它抛弃任何能使得作品突显3D效果的特性. 如今一提到网站设计,就会不可避免地碰到"扁平化设计"(flat design)这个词.近几年扁平化设计趋势风生水起,也受到很多大公司的青睐. 但扁平化设计来源是哪里?为什么它风靡网站设计?在设计中,我们只有知道一种风格和技术的来源以及它背后的历史,我们在使用这种美学风格时才能更加得心应手.下面让我们追根溯源,了解扁平化设计的前世今生. 究竟什么是扁平化设计 对于没接触过的人来说,&q

1.扁平化

对象 - 对象映射的一个常见用法是获取一个复杂的对象模型,并将其展开成一个更简单的模型. 您可以采取复杂的模型,如: 1 public class Order 2 { 3 private readonly IList<OrderLineItem> _orderLineItems = new List<OrderLineItem>(); 4 5 public Customer Customer { get; set; } 6 7 public OrderLineItem[] GetO

你认为扁平化模式好还是树形结构好?

我认为对于小公司来说,扁平化的模式更好一些.由于小公司的规模比较小,公司内的员工不多,所需要的管理层次不多.扁平化模式的决策层和操作层之间的中间管理层次少,这可以使企业能够快速地将决策权延至企业生产.营销的最前线,从而为提高企业效率.而且由于公司规模小,管理部门之间的信息资源的交流.相互调用不会太多,这样可以是决策者集中更多的精力在企业的市场对策和企业发展的战略问题上. 对于大公司来说,树形结构会更好一些.大公司的规模比较大,所要做的项目比较多,如果一个人负责多个项目会造成项目完成效率不高.在树

怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿?

怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿? http://www.zhihu.com/question/21274267/answer/62857878

android扁平化ProgressBar--progressWheel

ProgressWheel是git是一个开源项目,为开发者提供一个扁平化的ProgressBar,并可对其进行深度定制 1,将ProgressWheel的源码拷贝到项目中 public class ProgressWheel extends View { // Sizes (with defaults) private int layout_height = 0; private int layout_width = 0; private int fullRadius = 100; privat

扁平化设计发展

[PConline 欣赏]现在说起网页.UI设计,都会谈论扁平化设计(Flat Design)这个概念,一些大型公司和组织在网页设计都将风格偏向了它,而iOS 7又推上了一个高峰. 在苹果与微软的青睐与推动下,扁平化设计日益盛行,但是很少有人知道扁平化设计这个概念由何而来?为什么将这个概念用在了网页设计上?对于设计的新概念来说,搞清楚一个风格和一项技术的历史背景很重要,因为在我们觉得是否采用这个新的设计概念的时候,对它来由的了解可以帮助我们做出更明智的决定. 到底什么是扁平化设计? 对于那些从来

扁平化设计

扁平化概念的核心意义是:去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽象.极简和符号化. 例如:Windows.Mac OS.iOS.Android等操作系统的设计已经往“扁平化设计”发展.其设计语言主要有Material Design.Modern UI等. 扁平化的设计,尤其是手机的系统直接体现在:更少的按钮和选项,这样使得UI界面变得更加干净整齐,使用起来格外简洁,