中国传媒大学-用户体验与UI交互设计-课件-知识点5.5 数字界面的三大风格

1、交互式界面设计西安邮电大学数字艺术学院知识点5.5数字界面的三大风格PART 01引言目录CONTENTSPART 02拟物化风格PART 03扁平化风格PART 04卡通、手绘风格01020304 引言01 引言拟物化风格扁平化风格卡通、手绘风格三大风格目前，我们按照艺术风格不同，将界面分成三大类。 引言 1984 年，苹果公司推出麦金塔电脑，首次将图形用户界面广泛应用于个人电脑，大大拉近了人们与虚拟世界的距离。拉近距离 拟物化的出现抽象的数字世界经过拟物化图形界面的演绎变得简单、亲切。抽象数字世界图形化简单大众 “拟物化”的出现源于计算机界面图形化的初始，它的出现符合人们当时对计算机界面的

2、认识现状，“拟物化”可以使人们快速有效的通过图形认识各种功能。 扁平化的出现在“拟物化”发展了几十年后，人们已经对各种电子设备非常熟悉，对于各种功能的心理认知已经达到某种可以轻松理解的程度，这个时候再简化、抽象，就不会影响我们的判断，反而鲜艳、明亮的色彩会给我们一些新鲜感。抽象简化 虽然，对于“扁平化”有一些争议，但存在即合理。 卡通手绘风格拟物与扁平化风格卡通手绘风格小众一些差异性较大个性选择 相对于拟物与扁平化风格来说，卡通手绘风格的界面要小众一些，差异性较大，但是能够满足不同人的个性选择。拟物化风格02 拟物化风格 拟物在文学中是一种修辞手法，当然我们对“拟人”更熟悉，与“拟人”不同的是

3、，拟物就是将人比作物，将抽象概念比作物，将此物比作彼物。拟物化是界面模拟真实物体的外形、材质、质感、细节、光亮等。 拟物化风格iBooks 翻动书页时也会有模拟真实场景的动画效果。这是界面整体设计的拟物化应用经典案例。这些表述利用了一种很巧妙的方法，那就是拟物。苹果iOS7.0之前 拟物化风格 拟物化设计有着鲜明的时代印记，不同时代的物品被模拟之后就得到了不同的形象。Windows95 系统Windows8Windows10细节越来越精致简洁，扁平化的趋势，但拟物没有改变 拟物化风格优点认知和学习成本低容易让用户养成统一的认知和使用习惯人性化的体贴设计优点 拟物化风格缺点坚持实物模仿，忽略了界

4、面交互特点限制了设计的整体感觉，不容易和其他元素混搭占据大量加载时间缺点扁平化风格03 扁平化风格 2013年后许多网页、APP、甚至系统界面，都开始改用色彩缤纷、简约的风格，就像把所有物件通通压扁在画面上，这就是红极一时的扁平化设计，新一代界面设计的趋势。2010年微软windows phone 2013苹果iOS 7可见，扁平化风格在UI领域的创始者不是苹果，而是微软，但却是一开始对其不屑一顾甚至抵触的苹果将其发扬光大、推向主流。 扁平化风格iOS 7iOS 6 通过对比ios 7和之前版本，我们不难看出扁平化设计主要表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“

5、内容”本身重新作为核心被凸显出来，同时在设计元素上，则强调了抽象、极简和符号化。 扁平化风格 扁平化设计并不意味着完全去掉立体效果。不过，既然叫扁平化设计，总体的趋势还是以简单和最少化为主。只不过不是明显的阴影，斜面浮雕，或者是轻易就能看出来的渐变。 iTunes 的图标从2012年到2015 年，短短四年的变化我们就能够明显的感受到扁平化带来的改变。2012年2014年2015 年苹果早期彩条图标 扁平化风格色块单纯、容易延伸拓展，有着自适应的特性；有很好的可读性和易读性；降低了文件大小和较佳的自适性可增加载入速度。需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。卡通、手绘风格04 卡通手绘风格 卡通手绘风格，就是用手绘的方法进行设计的一种风格。手绘的风格本身就很多，任何一种能够画出图案的方法都可能演变为一种风格，诸如素描、速写、水墨、涂鸦或游戏风格等。 手绘体风格的手机主题设计以及APP 图标设计也逐渐占据一定的市场。手绘风格可以具象，也可以抽象，有很大的创作自由度。 卡通手绘风格 卡通手绘风格的APP 图标在游戏应用中较为常见，多以游戏主要角色为元素进行表现。 卡通手绘风格需要注意考虑大多数用户的喜好提炼与加工是必不可少的工序增加图标的代表性与艺术效果注意