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

交互式界面设计 西安邮电大学 数字艺术学院 知识点5.5 数字界面的三大风格 PART 01 引言 目录 CONTENTS PART 02 拟物化风格 PART 03 扁平化风格 PART 04 卡通、手绘风格 01 03 04 引言 01 引言 拟物化风格 扁平化风格 卡通、手绘风格 三大 风格 目前，我们按照艺术风格不同，将界面分成三大类。 引言 1984 年，苹果公司推出麦金塔电脑，首次将图形用户界面广泛应用于个人电脑，大大拉近了人们与虚拟世界的距离。 拉近距离 拟物化的出现 抽象的数字世界经过拟物化图形界面的演绎变得简单、亲切。 抽象数字世界 图形化 简单 大众 “拟物化”的出现源于计算机界面图形化的初始，它的出现符合人们当时对计算机界面的认识现状，“拟物化”可以使人们快速有效的通过图形认识各种功能。 扁平化的出现 在“拟物化”发展了几十年后，人们已经对各种电子设备非常熟悉，对于各种功能的心理认知已经达到某种可以轻松理解的程度，这个时候再简化、抽象，就不会影响我们的判断，反而鲜艳、明亮的色彩会给我们一些新鲜感。 抽象 简化 虽然，对于“扁平化”有一些争议，但存在即合理。 卡通手绘风格 拟物与扁平化风格 卡通手绘风格 小众一些 差异性较大 个性选择 相对于拟物与扁平化风格来说，卡通手绘风格的界面要小众一些，差异性较大，但是能够满足不同人的个性选择。 拟物化风格 02 拟物化风格 拟物在文学中是一种修辞手法，当然我们对“拟人”更熟悉，与“拟人”不同的是，拟物就是将人比作物，将抽象概念比作物，将此物比作彼物。拟物化是界面模拟真实物体的外形、材质、质感、细节、光亮等。 拟物化风格 iBooks 翻动书页时也会有模拟真实场景的动画效果。这是界面整体设计的拟物化应用经典案例。 这些表述利用了一种很巧妙的方法，那就是拟物。 苹果iOS7.0之前 拟物化风格 拟物化设计有着鲜明的时代印记，不同时代的物品被模拟之后就得到了 不同的形象。 Windows95 系统 Windows8 Windows10 细节越来越精致 简洁，扁平化的趋势，但拟物没有改变 拟物化风格优点 认知和学习成本低 容易让用户养成统一的认知和使用习惯 人性化的体贴设计 优点 拟物化风格缺点 坚持实物模仿，忽略了界面交互特点 限制了设计的整体感觉，不容易和其他元素混搭 占据大量加载时间 缺点 扁平化风格 03 扁平化风格 2013年后许多网页、APP、甚至系统界面，都开始改用色彩缤纷、简约的风格，就像把所有物件通通压扁在画面上，这就是红极一时的扁平化设计，新一代界面设计的趋势。 2010年微软windows phone 2013苹果iOS 7 可见，扁平化风格在UI领域的创始者不是苹果，而是微软，但却是一开始对其不屑一顾甚至抵触的苹果将其发扬光大、推向主流。 扁平化风格 iOS 7 iOS 6 通过对比ios 7和之前版本，我们不难看出扁平化设计主要表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“内容”本身重新作为核心被凸显出来，同时在设计元素上，则强调了抽象、极简和符号化。 扁平化风格 扁平化设计并不意味着完全去掉立体效果。不过，既然叫扁平化设计，总体的趋势还是以简单和最少化为主。只不过不是明显的阴影，斜面浮雕，或者是轻易就能看出来的渐变。 iTunes 的图标从2012年到2015 年，短短四年的变化我们就能够明显的感受到扁平化带来的改变。 2012年 2014年 2015 年 苹果早期彩条图标 扁平化风格 色块单纯、容易延伸拓展，有着自适应的特性； 有很好的可读性和易读性； 降低了文件大小和较佳的自适性可增加载入速度。 需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。 卡通、手绘风格 04 卡通手绘风格 卡通手绘风格，就是用手绘的方法进行设计的一种风格。手绘的风格本身就很多，任何一种能够画出图案的方法都可能演变为一种风格，诸如素描、速写、水墨、涂鸦或游戏风格等。 手绘体风格的手机主题设计以及APP 图标设计也逐渐占据一定的市场。手绘风格可以具象，也可以抽象，有很大的创作自由度。 卡通手绘风格 卡通手绘风格的APP 图标在游戏应用中较为常见，多以游戏主要角色为元素进行表现。 卡通手绘风格需要注意 考虑大多数用户的喜好 提炼与加工是必不可少的工序 增加图标的代表性与艺术效果 注意 在有些设计中