联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

扁平化ui设计和拟物化ui设计的区别,扁平化ui设计的8个技巧

Time: 2021-07-06

ui设计是现在众多设计中的主要类型之一,随着人们对ui设计的要求越来越高,ui设计也有了很多新的变化,比如扁平化ui设计就是区别于拟物化ui设计的一种新的设计。今天就让faceui为大家介绍扁平化ui设计和拟物化ui设计的区别,扁平化ui设计的8个技巧。

  扁平化ui设计和拟物化ui设计的区别

  1、概念

  拟物化设计就是追求模拟现实物品的造型和质感,通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现(也可适当程度变形和夸张)。

  扁平化设计就是摒弃以上对效果(尤其是高光、阴影等能造成透视感的效果)的追求,追求通过抽象、简化、符号化的设计元素来表现。

  2、特点

  拟物化设计的特点,界面模拟真实物体的材质、质感、细节、光亮等;人机交互也拟物化,模拟现实中的交互方式。拟物设计的会让你认出这是个什么东西。

  扁平化设计的特点,界面上单色极简的抽象矩形色块、大字体、光滑、现代感十足;交互的核心在于功能本身的使用,所以去掉了冗余的界面和交互,而是使用更直接的设计来完成任务;扁平化设计则让你意会这是个什么东西。

  3、优点

  拟物化设计的优点是认知和学习成本低,各种按钮的视觉质感和按下去之后的交互效果强,比较人性化的体验。

  拟物化设计的优点是简约而不简单,扁平的设计搭配一流的网格、色彩设计,让看久了拟物化的用户感觉焕然一新;突出内容主题,减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰,让用户更加专注于内容本身,减少用户使用这类产品的负担,在扁平化的视觉和优秀的架构设计下显得非常简单易用;设计更容易,优秀扁平的设计只需要包含良好的架构、网格和排版布局,色彩的运用,高度的一致性,而不需要考虑更多的阴影、高光、渐变等等。

扁平化ui设计

扁平化ui设计(图片来自网络)


  4、缺点

  拟物化本身就是个约束,会限制功能本身的设计。

  扁平化设计需要一定的学习成本,且传达的感情不丰富,甚至过于冰冷。

  扁平化ui设计的8个技巧

  1、关于高光、渐变和投影

  网上所说扁平化风的三大要素:去高光、去渐变、去阴影。这么说是有点绝对了,小编认为应该是去掉过渡式高光、过渡式渐变、过渡式阴影。在这篇文章里,扁平化高光、阶梯式渐变以及所谓的长投影是允许的。

  2、使用扁平化图标

  使用有明确含义的图标可以让你的设计不那么单调并且耐看。

  3、色块的形状和颜色

  色块在扁平化设计中占据着很重要的地位,几乎我们看到的所有扁平化设计都离不开色块。关于色块的形状,基础形状有圆形、三角形、四边形、五边形以及六边形,注意不要用超过六条边的形状,这样人们就会开始数形状的边数而忽略掉你要传达的信息。

  4、色块的组合

  除了基础的形状之外,你可以由基础形状衍生出更多的组合形状。但是我建议不要超过三种不同的基础形状组合,这样会让你的设计脱离扁平化简约的初衷。

扁平化ui设计

扁平化ui设计(图片来自网络)


  5、字体的选择

  请选择无衬线体,常用的中文无衬线体有微软雅黑、黑体、幼圆、张海山锐楷体、方正智艺体等。

  6、注重排版

  扁平化设计中尤其要注意排版,在这里再次祭出设计的四大原则:对齐、亲密性、重复、对比。在你放好一个色块或者文字后,请务必检查一下是否满足以上四条准则。

  7、图片的使用

  扁平化设计中如果要用到图片,常见的处理方法有三种:普通的色块/文字+图片、压暗处理、模糊处理。

  8、使用不同色块组合做出伪立体感

  这是所谓“似扁平化”的部分,但是它仍然能给我们的设计带来一种简约而不失美感的感觉,像我们之前很火的lowpoly以及长投影设计都属于这一类。

  以上就是faceui为大家介绍的关于扁平化ui设计的相关内容。设计本来就是风格多样的,就像人一样,花有百样红,人的审美也是不同的。作为简单清爽的扁平化设计正在逐渐成为ui设计的主要类型之一。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开