扁平化设计-扁平化与拟物设计对比
扁平化设计-扁平化与拟物设计对比

扁平化设计Байду номын сангаас优点
1. 简约而不简单,搭配一流的网格、色彩设计,让看久了拟物化的用户感觉焕然一新。 2. 突出内容主题,减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰,让用户更加专注 于内容本身,简单易用。 3. 设计更容易,优秀扁平的设计只需保证良好的架构、网格和排版布局,色彩的运用和高度一致性 。
拟物化计的优点
1. 认知和学习成本低:外婆级的人也能看懂iO S里面几乎所有原生应用的图标。 2. 各种按钮的视觉质感和按下去之后的交互效果,养成用户对这类“东西”的统一认知和使用习惯。 3. 人性化的体贴:我相信有很多同学都非常喜欢ibooks的体验,用它来阅读确实是一种享受。
拟物化设计的缺点
大多数拟物化界面并没有实现功能化,只是花费大量时间在视觉的阴影和质感效果。 为何扁平化能够逆袭拟物化呢,主要原因有以下三点: 1.开发更加简单 数码设备普及度不高的时代,拟物化是有效果的,尤其对于孩子和老人来说拟物化设计更直观有趣
文章来源:Lofter 人人都是产品经理()中国最大最活跃的产品经理学习、交流、分享平台
扁平化设计-扁平化与拟物设计对比
史蒂芬说:自从2011年window 开始扁平化,到2013年IO S7开始扁平化,就突然变成了设计 潮流。我们来对比下扁平化和拟物化设计的优缺点。
什么是扁平化
摒弃高光、阴影等能造成透视感的效果,通过抽象、简化、符号化的设计元素来表现。界面上极简 抽象、矩形色块、大字体、光滑、现代感十足,让你去意会这是个什么东西。其交互核心在于功能 本身的使用,所以去掉了冗余的界面和交互。
。但是随着数码科技的发展,拟物化的好处会越来越少,随之带来的是开发成本增加。
2.使用更加高效 拟物化是时代过渡中的一个不得已。在未来人眼中,一个温度计的app要特地设计成实体温度计的 样子,一定傻透了。拟物≠高效,刻意拟物有时反而降低了效率。
扁平化ui设计和拟物化ui设计的区别,扁平化ui设计的8个技巧

ui设计现在众多设计中的主要类型之一,随着人们对ui设计的要求越来越高,ui设计也有了很多新的变化,比如扁平化ui设计就区别于拟物化ui设计的一种新的设计。
就让为家介绍扁平化ui设计和拟物化ui设计的区别,扁平化ui设计的8个技巧。
扁平化ui设计和拟物化ui设计的区别1、概念拟物化设计就追求模拟现实物品的造型和质感,通过叠加高光、纹理、材质、阴影等各种对实物进行再现(也可适当程度变形和夸张)。
扁平化设计就摒弃以上对(尤其高光、阴影等能造成透视感的)的追求,追求通过抽象、简化、符号化的设计元素来表现。
2、特拟物化设计的特,界面模拟真实物体的材质、质感、细节、光亮等;人机交互也拟物化,模拟现实中的交互。
拟物设计的会让你认出这个什么东西。
扁平化设计的特,界面上单色极简的抽象矩形色块、字体、光滑、现代感十足;交互的核心在于功能本身的使用,所以去掉了冗余的界面和交互,而使用更直接的设计来完成任务;扁平化设计则让你意会这个什么东西。
3、优拟物化设计的优认知和学习成本低,各种按钮的视觉质感和按下去之后的交互强,比较人性化的体验。
拟物化设计的优简约而不简单,扁平的设计搭配的网格、色彩设计,让看久了拟物化的用户感觉焕然一新;突出内容主题,减弱各种渐变、阴影、高光等拟真视觉对用户视线的干扰,让用户更加专注于内容本身,减少用户使用这类产品的负担,在扁平化的视觉和优秀的架构设计下显得非常简单易用;设计更容易,优秀扁平的设计只需要包含良好的架构、网格和排版布局,色彩的运用,高度的一致性,而不需要考虑更多的阴影、高光、渐变等等。
扁平化ui设计4、缺拟物化本身就个约束,会限制功能本身的设计。
扁平化设计需要一定的学习成本,且传达的感情不丰富,甚至过于冰冷。
扁平化ui设计的8个技巧1、关于高光、渐变和投影网上所说扁平化风的三要素:去高光、去渐变、去阴影。
这么说有了,小编认为应该去掉过渡式高光、过渡式渐变、过渡式阴影。
在这篇文章里,扁平化高光、阶梯式渐变以及所谓的长投影允许的。
重看图形界面“扁平化”与“拟物化”之争——关于设计思维的探讨

163设计艺术与理论丨学术平台丨背景介绍1美间年9月10日(年国时当地时间2013北京时间2013月11日),苹果公司在总部加州库比蒂诺发布移动操作系统9问世以来系统最大的一次升级。
iOS7,这被视为自智能手机iPhone 在其上百项改动升级中最为直观的变化就是全新的图标设计,有别于先前系统所倡导的立体效果和实物模拟,这次的图标变得更1(b)。
这是苹果公司在图形界面方面第一次为锐利和平面,图大张旗鼓地将拟物化设计(Skeuomorphism)转向扁平化设计(FlatDesign)。
对于上述改动,舆论众说纷纭。
表面上,这似乎是苹果公司首席设计师乔纳森·伊夫(Jonathan Ive)在“后乔布斯时代”抛弃乔布斯倡导的视觉仿真理念的一个冒进举动。
更在使用者和智能设备互动上被视为“不让人满意的巨大变化”。
在几乎被苹果公司把持的手持智能设备的设计领域,这样的变动带来其他厂商的质疑、批评或者仿效在此不表。
但随之而来的变化显而易见:使用安卓(Android)系统的手持智能设备厂商中的大部分在手机界面上提供了扁平化图标和界面的选择,与其他“拟物化”主题一起供使用者选择;而以锤子科技(Smartisan)为例的同业者坚,并将其标榜为公司产品拥有“情持“拟物化”的图标设计(图2)怀”之处。
在跟风和对立间,很难分辨两种设计手法的优劣。
对比分析“拟物”与“扁平”2细究拟物化和扁平化在设计上的不同和带来的效果。
iOS7之前的拟物化图标主要分为四层,包括处于最底部的阴影层、稍微靠上的图标信息层、再上方的光泽层和顶部的圆角层,通过叠加高光、纹理、材质、阴影等效果以模拟现实物品的造型和质感,对实物进行再现。
这样的设计会让使用者轻易辨别和猜测出程序的功能且模拟现实生活的交互方式。
似的对于图标和界面的认知和学习成本低,各种按钮的视觉质感和按下去之后的交互效果也养成用户对设备操作形成统一认知和使用习惯。
但是,大多数拟物化界面并没有在功能上拥有拟物的延续,只是在强调视觉的阴影和质感效果。
UI设计中的扁平化与拟物化视觉传达解析

UI设计中的扁平化与拟物化视觉传达解析随着移动互联网时代的到来,用户界面设计(UI设计)越来越受到关注。
在UI设计中,扁平化与拟物化是两种常见的视觉传达风格。
它们分别代表着设计中的两种不同趋势,都有着自己的特点和优势。
本文将分析扁平化与拟物化的设计风格,探讨它们在UI设计中的应用和优缺点。
一、扁平化设计1. 扁平化设计概述扁平化设计是指在UI设计中去掉繁杂的立体效果,将界面元素简化为二维平面,突出简洁、清晰、直观的设计风格。
扁平化设计在一定程度上遵循了“简约至上”的设计理念,强调简洁、明了的设计风格。
这种设计理念的提出来源于对用户体验,用户界面的关注和追求,要求设计师在设计界面时应当更注重用户体验。
扁平化设计最大的特点就是简洁和直观。
它去掉了繁杂的阴影、渐变、立体效果等,使得界面元素更加纯粹、简洁。
扁平化设计中的颜色和图标尺寸都相对较大,这可以使用户更容易地将注意力聚焦在重要的界面元素上。
扁平化设计侧重于图形和文字的表现,更多地强调了内容的价值和信息的传达。
扁平化设计的优点在于简洁、直观、便于理解和操作。
这样的设计风格使得用户更容易地找到需要的信息,提高了用户的使用效率。
扁平化设计也更适合移动设备,它的简洁风格可以使得用户在小屏幕上更方便地操作。
扁平化设计也存在一些缺点,比如界面元素缺乏层次感,容易导致用户在界面中丧失方向感。
加之扁平化设计对颜色、图标的运用要求较高,如果设计不当,可能会使得界面显得单调乏味。
二、拟物化设计拟物化设计是以模仿真实世界物体的形态和行为为目标而设计的。
在拟物化设计中,界面元素呈现出仿真的阴影、质感和动画效果,使得界面元素更具有真实的视觉效果。
拟物化设计的提出在一定程度上弥补了扁平化设计在层次感和真实感上的不足,也更符合用户对界面真实性的期待。
2. 拟物化设计的特点拟物化设计最大的特点就是真实感和层次感。
通过添加阴影、质感和动画效果,拟物化设计可以使得界面元素更加贴近真实世界的感觉。
扁平化3

装饰元素
立体、渐变、阴影 对比度、色彩
层次、纹理、质感 元素风格、
时代背景
光影、透视、反射 透明度……
扁平化设计的配色和用色
1、科技色—以蓝色、灰色、湖蓝、绿色为主,在一个色相范围里变化 2、亮彩色—以纯度很高的几个颜色搭配起来,背景多以黑或白色 3、淡浅色—以明度很高的几个颜色搭配起来,乳白色为主,高雅简洁 4、糖果色—色相丰富,且用色甜美可人,轻松愉悦 5、复古色—配色比较古典,且明度和纯度不太高,舒适有内涵 ……
WIN PHONE 7
ANDROID 4.0
IOS 7
扁平化产生的契机
1、设计界的流行趋势,屏幕越来越大 2、大量写实拟物标,造成视觉上产生疲劳 3、大量的纹理和高光阴影细节对基本功能进行干扰 4、写实的图标很难表现出一个抽象的概念
图标:分享 Share
必要功能
层级、布局、跳转 操作区域、功能提示 区块化、视觉引导线 文字、图形寓意 反馈/交互响应……
反馈
当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操 作后,使用旋转图标提示用户系统正在进行响应。
在设计扁平化界面的时候,容易犯的问题:
1、同类功能的图标风格不统一,用色不统一 2、功能块零碎,导致简洁的画面变得零碎 3、可操作的按钮等和背景区分不出来 4、操作后没有交互提示,层级跳转混乱 5、布局看起来很死板,图形没有亲和力,很简陋 6、做错了用户群体的定位 7、图形过于抽象化
为了实现扁平化设计美学,我们设计师必须专注于产品是干嘛的, 而不是它们要看起来像什么。
一致性
通过使用通用的UI元素和样式,你可以帮助用户了解什么是可以期待的,然后使得更容易使用你的应用。
UI设计中的扁平化与拟物化视觉传达解析

UI设计中的扁平化与拟物化视觉传达解析扁平化和拟物化是两种在UI设计中常见的视觉传达风格,它们分别代表了现代风格和传统风格,各有其独特的特点和应用场景。
首先来解析扁平化风格。
扁平化风格强调简洁、平面和直观的设计元素,它去除了过多的阴影、渐变和细节,使界面看起来更加干净和现代化。
扁平化设计风格通过利用明亮的色彩、简洁的图标和简单的图形来引导用户的目光,减少了视觉混乱,提高了用户的使用体验。
扁平化风格的主要特点包括:1.简约而干净的设计:扁平化设计注重简单的线条和形状,去除了多余的装饰和细节,使界面更加直观和易于理解。
2.鲜明的色彩:扁平化设计使用大胆明亮的色彩,强调对比和饱和度,使界面更加生动和吸引人。
4.响应式布局:扁平化设计使用响应式布局,自动适应不同的设备和屏幕尺寸,使用户在不同的平台上都能获得良好的使用体验。
扁平化风格适用于需要强调内容和功能的应用,例如移动应用、网页设计和系统界面等。
它的简洁和直观的设计元素能够更好地引导用户的注意力,提高用户的使用效率。
扁平化风格也存在一些挑战,例如在表达层次和交互反馈方面相对有限,需要设计者更加精确地使用颜色和形状等元素来传达信息。
接下来是拟物化风格的解析。
拟物化风格是模仿真实物体的外观和行为,使界面看起来更加真实和有质感。
拟物化设计通过使用阴影、渐变和纹理等视觉效果来模拟真实的物体和材质,使界面更加生动和吸引人。
2.丰富的细节:拟物化设计注重细节和纹理的表达,通过加入更多的阴影和渐变等效果来增加界面的层次感和深度。
3.物理现象的模拟:拟物化设计模拟真实物体的行为和交互,例如按钮按下后会有反馈效果、滑动时会有惯性等,使用户更加有身临其境的感觉。
4.熟悉的界面元素:拟物化设计使用熟悉的图标和界面元素,例如文件夹、按钮和开关等,使用户更容易理解和操作。
拟物化风格适用于需要强调真实感和沉浸感的应用,例如游戏界面、产品展示和虚拟现实等。
它通过模拟真实物体和行为来增加用户的参与感和互动性,提高用户的使用体验。
UI设计中的扁平化与拟物化视觉传达解析

UI设计中的扁平化与拟物化视觉传达解析扁平化设计和拟物化设计是现代UI(用户界面)设计中常见的两种视觉传达风格。
在进行UI设计时,选择何种风格取决于设计师的偏好以及设计项目的需求。
下面是对扁平化和拟物化设计的解析。
一、扁平化设计扁平化设计是一种视觉风格,强调使用简洁的图形元素,去除繁琐的细节和装饰,以平面化的形式呈现信息。
扁平化设计的主要特点包括:1. 简洁明了:扁平化设计采用简洁明了的图形元素和颜色,使界面看起来干净、整洁。
2. 强调内容:扁平化设计将重点放在内容上,尽量减少装饰性的元素和效果,使用户能够更专注于信息本身。
3. 色彩鲜艳:扁平化设计通常使用饱和度较高的颜色,使界面更加鲜艳、生动。
4. 平面化:扁平化设计强调平面化视觉效果,减少使用渐变和阴影等立体感效果。
扁平化设计的优点在于简洁、直观,能够提供清晰的用户体验。
它适用于移动应用、网页设计等需要快速传达信息的场景。
二、拟物化设计拟物化设计是一种模拟物体真实感的视觉风格,以模仿现实世界中的物体和材质为特点。
拟物化设计的主要特点包括:1. 仿真效果:拟物化设计通过使用阴影、渐变、纹理等效果,模拟物体的真实质感,使界面具有立体感。
3. 层级感:拟物化设计通过叠加不同的图层和阴影效果,使界面元素更具层次感,提供更好的用户导航体验。
4. 手势化:拟物化设计还强调通过手势和触摸等交互方式,增加用户与界面的互动性。
拟物化设计的优点在于增强了用户对界面的沉浸感和可信度,使用户更容易理解和操作界面。
它适用于需要模拟物理操作的应用,如游戏界面、电子商务平台等。
三、扁平化与拟物化的结合运用在实际的UI设计中,扁平化和拟物化并不是完全独立的两种风格,往往会结合使用。
设计师可以根据项目需求和用户体验考虑,在扁平化的基础上适当添加拟物化的元素,以增强界面的可视化效果和用户交互体验。
在一个旅游应用界面中,可以使用扁平化的图标和颜色方案,强调内容的直观性和信息的清晰性;在展示地图和景点介绍等部分,可以适当使用拟物化的效果,增加真实感和沉浸感。
UI设计中的扁平化与拟物化视觉传达解析

UI设计中的扁平化与拟物化视觉传达解析随着科技的不断发展,用户界面(UI)设计也在不断演化和改变。
在UI设计中,扁平化和拟物化是两种常见的视觉传达风格,它们分别代表着不同的设计理念和表现形式。
本文将对这两种视觉传达方式进行解析,探讨它们的特点、优缺点,以及在实际设计中的应用场景和注意事项。
扁平化设计扁平化设计是一种简洁、直观的设计风格,它强调简约、图形化和大胆的颜色。
扁平化设计最早是由微软在Windows 8操作系统中引入的,后来被Google和苹果等公司广泛应用于他们的产品和服务中。
扁平化设计的特点包括:1. 简洁明了:扁平化设计通过去除繁复的装饰和细节,强调简单的图形和颜色,使界面看起来更加清晰和易于理解。
2. 图形化:扁平化设计倾向于使用简单的图标和符号来代替真实的物体和材质,使界面更具图形化或抽象化的特点。
3. 大胆的颜色:扁平化设计喜欢使用鲜艳而大胆的颜色,使界面看起来更加饱满和生动。
扁平化设计的优点在于能够简化界面,降低用户认知负担,提升用户体验。
但在实际应用中,扁平化设计也存在一些挑战和问题,例如过于简洁可能导致信息传达不清晰,大胆的颜色使用可能会让部分用户感到不适。
拟物化设计拟物化设计(也称作真实感设计)是一种更加贴近真实世界的设计风格,它强调物体的真实材质和质感,使界面更具有真实感和触感。
拟物化设计最早是由苹果公司在iOS 7中引入的,它的特点包括:1. 真实感:拟物化设计力求使界面更加贴近真实世界,包括使用真实物体的材质和质感、动态效果和过渡效果等。
2. 触感:拟物化设计注重界面上的触感和交互效果,例如按钮的按下效果、图标的拖动效果等。
3. 细节丰富:拟物化设计追求细节的丰富性,包括阴影、光照、纹理等,使用户能够更加直观地感受到界面的真实性。
拟物化设计的优点在于能够提供更加真实和直观的用户体验,让用户更容易理解和操作界面。
拟物化设计也存在一些问题,例如过于注重细节可能会增加界面的复杂度,使用户感到困惑,同时也可能会增加界面的加载时间和性能消耗。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
2.使用更加高效 拟物化是时代过渡中的一个不得已。在未来人眼中,一个温度计的app要特地设计成实体温度计的 样子,一定傻透了。拟物≠高效,刻意拟物有时反而降低了效率。
3.缓解审美疲劳 论天下设计,繁久必简。拟物化设计的沉重感多少让人们开始审美疲劳,随着Windows 8的Metro 界面发布,设计变得更简约清晰,势在必行。
拟物化计的优点
1. 认知和学习成本低:外婆级的人也能看懂iO S里面几乎所有原生应用的图标。 2. 各种按钮的视觉质感和按下去之后的交互效果,养成用户对这类“东西”的统一认知和使用习惯。 3. 人性化的体贴:我相信有很多同学都非常喜欢ibooks的体验,用它来阅读确实是一种享受。
拟物化设计的缺点
大多数拟物化界面并没有实现功能化,只是花费大量时间在视觉的阴影和质感效果。 为何扁平化能够逆袭拟物化呢,主要原因有以下三点: 1.开发更加简单 数码设备普及度不高的时代,拟物化是有效果的,尤其对于孩子和老人来说拟物化设计更直观有趣
扁平化设计的优点
1. 简约而不简单,搭配一流的网格、色彩设计,让看久了拟物化的用户感觉焕然一新。 2. 突出内容主题,减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰,让用户更加专注 于内容本身,简单易用。 3. 设计更容易,优秀扁平的设计只需保证良好的架构、网格和排版布局,色彩的运用和高度一致性 。
扁平化设计的缺点
需要一定的学习成本,且传达的感情不丰富,甚至过于冰冷。 那为什么扁平化设计能战胜拟物化设计呢?看看以下这张图你就明白了。
什么是拟物化
模拟现实物品的造型和质感,通过叠加高光、纹理、材质、阴影等效果对实物进行再现,也可适当 程度变形和夸张,界面模拟真实物体,拟物设计会让你第一眼就认出这是个什么东西。交互方式也 模拟现实生活的交互方式。
文章来源:Lofter 人人都是产品经理()中国最大最活跃的产品经理学习、交流、分享平台
扁平化设计-扁平化与拟物设计对比
史蒂芬说:自从2011年window 开始扁平化,到2013年IO S7开始扁平化,就突然变成了设计 潮流。我们来对比下扁平化和拟物化设计的优缺点。
什么是扁平化
摒弃高光、阴影等能造成透视感的效果,通过抽象、简化、符号化的设计元素来表现。界面上极简 抽象、矩形色块、大字体、光滑、现代感十足,让你去意会这是个什么东西。其交互核心在于功能 本身的使用,所以去掉了冗余的界面和交互。