恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
做好扁平化设计-视觉篇(腾讯cdc)
0.0°
2015-02-09 好文转载 经验/观点 原作者: 原作者 举报 2250 47 16 0

注微信分享UI设计干货+UI交互设计书籍+达内UID视频课程 微信daydayup7857

一些关于扁平化设计的做法,这里主要偏视觉侧


1.去掉特效

  先来看一组对比图片

2

  同样是镜头的设计,在扁平化中去祛除了渐变,阴影,质感,等各种修饰手法,仅用简单的形体来表达,显的干净利落。

  做减法,这第一步应该是最容易的。


2.简化提取

  首先我们来看看做简化和提取的一个典型例子

  毕加索画的牛

3

 一头牛从最初的写实到最后仅仅只用几根线条来表示,整个简化的过程也经历了好几个步骤,当然这里对设计师观察和提炼能力要求很高,要充分了解对象物的本质,懂得巧妙的取舍,用极简的要素,在没有更多特效装饰的情况下表达清楚内容,在界线与轮廓的高对比下,表现出物体的美感。

设计师资料库(UI,交互,平面,摄影,后期)课程总有你需要的http://v.vdian.com/vshop/1/CPC/item.php

3.巧用色彩

  在扁平化设计中,色彩运用的是否到位,无疑是这种设计风格中很重要的一个环节,看很多作品,在色彩上更多的强调更亮 、 更鲜艳。

11

  在以往的设计中,大多数情况下设计一个作品更专注在两三种颜色之间,而扁平化设计的色彩往往在6到8种。

  以下收集了一些颜色使用频率比较高的,蓝,绿色,裸色(粉色),杏,灰色,紫色

  这里除了颜色的搭配还有一点就是,在很多时候扁平化的视觉设计中,是很少有线条出现的,更多是用色块来表现各种关系。(怎么用色块表现,这里应该也可以有一个专门的分享)

17

181

  当然也有一些是走复古风,同色系,和低饱和度⋯⋯等等的

  重要的是各种调调放在一起看起来要和谐

20

 

4.排版很重要

  由于在扁平化设计中采用的都是极简的元素,所以,排版就显的尤为重要。

首先是字体:在扁平化设计风格种,字体的设计显的很重要,一种新奇的字体用来作为设计元素会发挥极其重要的作用,但是要小心,不能因为字体太新奇,而影响到了信息的传达。字体更多时候采用的是无 衬线 (sans serif)字体类型

22


其次是大图

  一张好看的图片能吸引大家注意力和点击的欲望,在加上适当的排版,再配合扁平界面,瞬间设计感倍增,上档次了有木有

1380160333_61

再来是半透明

使用这些设计方式最大的好处就是创造对比,可以让设计师通过色块,图片上的大字体或者多种颜色层次来创造视觉焦急,传说中的大气应该有这样一种效果,哈哈

  这种效果如果运用得当的话,效果会非常震撼,但是使用这种效果必须谨慎,因为这种效果很难处理得当,有一些原则需要掌握:

  1. 只有图片和文字都可以读时,半透明效果才有意义,
  2.   在决定半透明位置的时候,你要知道遮挡了什么内容,这些遮挡是否合理
  3.   透明度的使用错误会影响到整体的设计效果和阅读性,
  4. 出于可读性考虑不要在对比强烈的图片上放置半透明元素(比如黑白对比或互补色)
  5.   不要同时运用过多半透明效果

27

 

5.其他风格和细节

  谁说扁平化就是单色平涂,扁平化也可以有其他风格和细节,我们来看看

 

  1.   装饰画风格

30

 (素材来源dribbble)

 

 2.  立体感

   谁说扁平化设计就是色块堆积,来看看扁平化也可以有细节

   色块间的变化呈现出凹凸感

30

3.光感,长投影和阴影/高光

32


4.动感

  看下面的例子,当时钟在转动的时候,画面下方的图标(汉堡/饮料等)也有一个相应的动态表现,饮料也能看上去象是在杯子里晃动。

33

 

其实还有很多⋯⋯


小结

做好扁平化设计,并不是简单的去掉拟物设计的各种修饰效果,需要设计师更多的去观察,提炼。可以从古今中外的各种艺术表现形式上找到共同点并加以运用。

扁平化设计也不是简单的单色平涂,它可以有很多细节,也可以作出质感和动感,这需要设计师们耐心的去发现。

设计师资料库(UI,交互,平面,摄影,后期)课程总有你需要的http://v.vdian.com/vshop/1/CPC/item.php

转自腾讯cdc

http://cdc.tencent.com/?p=7844

更新:2015-02-09

收藏

47人已收藏

分享好设计

接私单交流,v信:2422836284

  • 90

    作品

  • 523

    粉丝

  • 33

    关注

  • APP设计师必知:用户体验十大原则
  • 做设计到30岁,还能做下去吗?
  • 借鉴别人的海报?得先学会这个平面构成分析法!
  • 资深设计师深度解读!网络简洁设计的缘起和未来!
相关标签

    猜你喜欢

      2015-02-09 好文转载 经验/观点 原作者: 原作者 举报 2250 47 16 0

      做好扁平化设计-视觉篇(腾讯cdc)

      0.0°

      你确定要举报做好扁平化设计-视觉篇(腾讯cdc)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年02月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      47
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录