《交互数字内容设计》课件——第九章 交互界面元素设计.pptxVIP

;9.1图标设计;9.1.1图标设计的意义1.图标设计是交互界面视觉设计的重要组成部分，用于提示与强调功能和信息；2.图标设计使产品的功能更为具象，用户更易理解与操作；3.图标设计使产品界面更具有吸引力，富含娱乐性与人性化；4.图标设计可以形成产品的统一特征，给用户以信赖感，便于功能的记忆；5.图标设计能拉开产品间的个性与差异，起到装饰性作用；6.图标设计是一种艺术创作、能提高产品的品味；7.图标设计的表现方式灵活自由、可以传达不同的产品理念；8.图标设计是在屏幕上展示产品的最佳方式。

;9.1.2图标的类型图标按照功能属性、表现形式与设计语言可大致分为3类。1.按照功能属性分类

（1）启动图标

（2）功能图标

（3）装饰性图标

2.按照表现形式分类

（1）字符图标（2）像素化图标

（3）手绘图标（4）拟物化图标

（5）扁平化???标（6）线性图标

（7）立体图标;3.按照设计语言分类;9.1.3图标的风格;?(2)硬朗的气质

一些格调应用或者偏男性的应用会刻意塑造一种不一样的棱角感。所以一般会采用直角设计。塑造一种严谨安全的感觉。如下图

;1.独特的设计语言

强调应用图标的独特性，突出产品的核心特征和属性。;2.简洁的设计形式

简洁的图形设计形式也会提升图标的设计品质。;3.准确的产品属性传达

应用图标代表的是一个产品的属性和功能作用。一个高品质的应用图标应该能够让用户在第一眼就能够感知到这个应用的属性和功能。

图标设计应当高度提炼产品特色找到最能代表产品属性的图形元素，并对这个元素进行突出设计。;4.统一的设计规范

为了更好的统一应用图标的设计样式，苹果公司专门精心设计了ios图标栅格作为设计参考。;5.品牌形象的延续

充分的利用已有的品牌形象加以运用。让品牌的深厚积淀继续发挥作用并且让品牌形象延续从而赋予品牌更强的生命力。;6.避免使用照片

在应用图标设计中应该尽量避免直接使用照片作为图标使用。;7.艳丽的色彩

鲜亮明快的色彩搭配能够为应用图标带来更多的关注度。

;8.多场景测试

在设计应用图标的时候也要考虑到应用图标的展示场景，避免图标不能完美展示的情况。应用图标不仅仅是展示在各种尺寸的手机屏幕上，也会在应用市场、设置栏、手机状态栏等多处进行展示。在不同场景下应用图标需要根据需求做相对应的设计优化。;9.避免使用大量文字

应用图标看起来拥挤用户也很难看清楚信息

大大降低应用图标的设计美感;2.图标设计的过程（1）需求分析——头脑风暴

在进行图标设计之前，应先仔细分析该任务的各项指标，包括：市场定位、竞品分析、用户群体、功能特色、价值体现等。;（2）搜集素材——构思风格

（3）设计定位——绘制草图

当我们把一切前期工作准备妥当后，便可开始进行设计风格定位、色彩定位、图形提取、草图绘制的阶段了。;（4）细节调整——规划制图;（5）反馈修改——加减设计

一套图标绘制好了之后还是在放在一起看一下整体的感觉，最后通过加减法适当的修修补补，对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡；对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大，来增加它的视觉丰满感。

;3.图标设计规范;9.2界面构成元素设计除了上面讲述的图标设计外，界面卡片、界面导航、按钮以及其他构成界面的元素都要进行仔细的设计。

;卡片式界面就是一个包含着丰富的图片和文字内容的小矩形，在实际应用中，它常常是作为详情页的入口使用。由于这种形式跟我们现实世界的卡片极为相似，所以用“卡片”这个词形容最合适不过了。;卡片是一个小的信息容器。简单点理解就是卡片是一个相对完美的处理信息集合。;视觉上由：内容层+承载层组成。

承载层我们可以理解为承载内容的容器，而内容层则是我们设计时的必要元素。;内容层多数为图片、文字、按钮等元素。;b.功能分析

卡片最大的作用就是作为功能入口的存在。;2.卡片的特点;（2）.卡片设计能够突出重点内容

卡片具有很强的独立性，具有空间感。在页面设计中，我们可以通过卡片与周围环境的差异，来突出我们想要展现的内容。例如转转：;（3）.卡片设计能够区分不同维度的内容与归纳相同维度的信息

由于每张卡片的操作互相独立，互不干扰，有利于区分不同纬度的内容；同时也可以利用卡片来讲相同纬度的信息进行归类。

;（4）.卡片能让用户更加专注当前内容

卡片的圆角设计更容易吸引人的目光，并且通过卡片营造的空间感以及视觉层级的优先级，卡片能够更加吸引我们的注意力，让我们更加专注当前内容。例如appstore;（5）.卡片设计可以提高空间的利用率

卡片可以利用横（X）轴交互来提高空间的利用率，将部分内容隐藏在横