扁平化设计面面观

扁平化设计#


以下内容由网络搜索整理,正文附部分原文链接。

1.什么是扁平化设计

扁平化设计:在进行设计的过程中,去除高光,阴影,羽化,表面质地等所有具有三维突出效果的风格和属性。主要因为微软的Metro,ios7的推动让这一设计大为风行。

rich design丰富设计风格:通过添加各种设计装饰,比如下落阴影、梯度等,让整体设计显得很丰富。

拟物化设计:通过模拟物理实物来让设计更加逼真。

2.为什么扁平化##

原文链接

一切都是为了需求

产品的所有设计不只是风格选择,都应该符合<strong>战略需求</strong>,扁平化也是其中之一。它不仅是视觉上的——只是最直接影响的是视觉而已——它包含了<strong>整个产品系列的逻辑和思路</strong>。

比如:

1.强化内容,而不是内容的载体(比如交互)。最终用户是消费内容的。掌握高质量内容的厂商就会利用这点来拉开差距。这方面差的,就强调别的好了。

1.Apple掌握大量高品质的第三方应用,但是从交互层面出发,他们家的光头哥的理念一直是:最好的设计是让人觉察不到的。所以应该在有限的空间里,更好的服务和展现内容。因此才有去掉按钮边框,显示图片时尽可能不要加边框等等,ios7的设计指导

2.而Android的设计思路完全不同,它的核心竞争力是信息本身,因此它想去APP化,在各个设备中用信息流来传达价值(所以他的设计语言更强调卡片化,甚至去视觉交互化,如google now)。

2.多场景适用性,比如车载系统,穿戴设备。这其中又包括了不同设备的性能处理,无数种类型的分辨率,以及不同场景下的视觉差异(比如日照情况)。对于有相关产品的厂商,就会推广更适合的设计方案,而扁平化是顺理成章能解决以上问题的方法。在有大量不同场景需求时,用拟物化是找死。比如锤子手机的生态圈只有手机,在相对独立的情况下,这个问题不会很突出的显示出来。到时候如果需要更整个Android生态建立更丰富的关联的时候——而这一天一定会到来——他也不得不采用扁平化【这是一个预言】。

3.更小的开发成本,第三方开发者生态环境。同一个产品,适配以上不同需求时的开发成本需要控制。生态环境越丰富的厂商,越看重这一点,因为给开发者制造麻烦,就意味着更糟糕的内容。扁平化在适应多种设备的时候,是最少成本和智能的解决方案。

3.扁平化的扩展,不只是一种视觉风格##

在管理学中很早就有扁平化组织的概念,在现在的网页,应用设计中,扁平化发展至今已经不仅仅指一种视觉风格,更核心的理念是产品功能的扁平化,信息内容的扁平化,即信息层级的扁平化

信息层级的扁平化代表着用户在第一层级界面只需要看到核心内容区,和最稳固最根本的功能。其他的内容是收起到第二层级第三层级甚至更深的。

那么如何去鉴定最稳固最根本的功能呢?

问自己,哪些东西是这个应用(或网页、软件)没掉了就没有办法用的?比如一个正在打电话中的界面,对方名字、对方头像、拨号盘、静音、挂断、通话时长等等哪些是没了就不行的?如果能分清楚这个层级,才能真的做出扁平化的设计。

4.扁平化的设计原则

原文链接

1.拒绝特效

顾名思义,扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮,再到导航栏都干脆有力,需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。

扁平化设计依赖于清晰的层次结构和元素布局,优秀的扁平化设计应该能帮助用户理解产品以及交互。


2.仅使用简单的元素

扁平设计中使用到很多简单的UI元素,比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状。元素独立。正角、直角、圆弧都非常常见。

UI元素应该在保持高可用性的前提下尽可能的简单,保证应用或网站直观、易用,无需引导。为了同时达到简单但直观的效果,你可以尝试为按钮填充深色,以鼓励用户点击。


3.注重排版
因为扁平化设计要求元素更简单,排版的重要性就更为突出了。字体的大小应该匹配整体设计,高度美化的字体会与极简设计原则相冲突。字形上可以应该使用粗体,文案要求精简、干练,最终保证产品在视觉上和措辞上的一致性。

字体选择上可以使用简单的无衬线字体,通过字体大小和比重来区分元素。同时你也可以使用新奇的字体作为点缀,但一定要记得不能过火。

排版的目的在于帮助用户理解设计。标签按钮等其它元素更注重增强易用性和交互性。


4.关注色彩

扁平化设计的项目拥有更多的色调。一般的网站很少会使用3种以上的色调,但是在扁平化设计中,平均会使用6-8种颜色。

扁平化设计的色调偏通常更有活力——色彩更纯。其主要、次要颜色通常都是非常大众化的颜色,然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。


5.“准”扁平化设计

在准扁平化设计中,基调仍然是扁平风格的,但会在设计方案中添加一种,且仅添加一种特效,无论是阴影也好、梯度也好……

这种设计风格比严肃的扁平化更加灵活。设计师们喜欢它,因为可以添加深度和纹理;用户喜欢它,因为它能有助于直观的交互。但反过来,也有设计师不喜欢它,因为“准”扁平风格是另两种风格的混合体,缺乏明确的定义,所以更难用好。


5.扁平化的问题#

设计就是把原本无聊的物品变得有趣。

扁平化最大的弊端是会逐渐同质化、单一化、无聊化,极少的元素,让应用很难个性化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 2017年初,咨询公司Nielsen Norman做了一项调研。 他们找来了71名用户,分别跟踪他们在浏览9组网站...
    北邮老土阅读 1,707评论 1 11
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,554评论 1 48
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 欲望是 个坑,它会让你一直受于躺下的诱惑中,直到你彻底躺下,你可以一直试着躺着,在你有足够意志力时但生活的真相是你...
    jieking阅读 382评论 0 0