15、图像类型及其应用指南

图像类型及其应用指南

1. 图像使用的一般性考虑

在新的显示分辨率标准统一之前，根据不同设备类型提供不同图像是常见的解决方案。研究表明，信息类网站上的通用图像难以吸引用户的注意力。例如，在一个投资信息网站上，人们直视镜头的照片无法给人留下可靠的印象。这意味着，摄影图像只有在主题明确且与文本内容直接相关时才具有价值。

2. 视频

2.1 主要特点

视频具有动态性和真实性的特点。与文本描述和静态图像相比，视频能够帮助人们更快地理解复杂的过程、情况和概念。它还能跨越距离限制，例如观看会议演讲的视频比查看演讲幻灯片更有身临其境的感觉。此外，视频的声音功能使其成为一种强大的听觉传播工具，视频的内容、音质与画面展示的信息同样重要。

2.2 使用场景

• 解释过程时 ：比如烹饪应用程序可以通过视频展示蛋糕的制作和装饰技巧。
• 描述通过动态更易展现的细节时 ：例如Zappo’s提供的视频展示了人们走路时鞋子的样子。

2.3 细节注意事项

• 尺寸并非越大越好 ：即使视频以较小的尺寸展示，也能帮助人们更清晰地理解过程的要点，比静态图像更具优势。
• 质量至关重要 ：对于专业应用，业余质量的视频可能会产生负面影响。

以下是视频使用的决策流程图：

graph LR
    A[是否需要解释过程或展示动态细节] -->|是| B[考虑使用视频]
    A -->|否| C[不使用视频]
    B --> D[确定合适尺寸]
    B --> E[确保视频质量]

3. 插图

3.1 主要特点

插图具有抽象、夸张、简化和富有想象力的特点。它可以展示已知但难以直接观察到的事物，如科学现象，是描述思想和概念的主要工具，也是进行说服的有力手段。

3.2 使用场景

• 展示真实但抽象的概念或事物时 ：例如光合作用或人体系统的插图，能使信息传达更清晰。
• 展示新的产品概念等想法时 。
• 表达无形的品质时 ：如Clothia的插图。
• 夸张有助于传达信息时 ：能唤起照片或视频无法捕捉的情绪。

3.3 细节注意事项

• 选择合适的风格 ：插图本质上具有表现力，选择能恰当代表你想传达给受众信息的风格至关重要。
• 考虑风格的时效性 ：插图风格会随时间变化，提前考虑插图的使用寿命，选择具有持久影响力和符合趋势的风格。

4. 动画

4.1 主要特点

与应用图像相关的动画有两种类型。一种用于呈现内容，通过抽象和动态来传达细节和个性；另一种涉及屏幕上界面元素的动态，用于揭示信息、提供反馈和强化关系。

4.2 使用场景

• 回顾概念时，信息要点比具体细节更重要 ：如Structures应用中的动画。
• 与不同文化背景的受众交流时 ：确保信息清晰易懂，避免细节干扰或无法翻译。
• 强调个性时 ：动态能更有效地传达个性。
• 需要另类的交流方式时 ：例如静态图像无法充分展示细节，或需要新颖元素来吸引注意力。

4.3 细节注意事项

• 选择合适的风格 ：动画有多种风格，如卡通、黏土动画、3D渲染等，选择能表达你想传达的信息且符合个性的风格。
• 考虑风格的时效性 ：动画风格也会流行和过时，提前规划动画的使用寿命，选择具有持久影响力的风格。
• 谨慎使用动画 ：合理使用动画能使交互清晰且特别，过度使用则会显得花哨。可以通过以下问题来判断是否适合使用动画：
• 添加动画是否有助于人们理解你想解释的概念？
• 添加动画是否能以不分散注意力的方式传达个性？
• 动画能否立即加载？
• 动画在多次观看时是否仍受欢迎？

5. 标志

5.1 主要特点

标志通常具有抽象性，作为组织或产品的象征进行符号化传达。它们需要具有记忆点，并且在大小尺寸变化时都能正常发挥作用。

5.2 使用场景

• 产品标识 ：每个产品都需要一个以简单、有表现力和显著方式标识产品的标志。
• 代表产品 ：在应用程序购物时，图标是传达应用本质的关键部分，需要在拥挤的移动设备屏幕上脱颖而出。
• 品牌服务标识 ：应用程序模糊了产品和服务的界限，两者都需要标志来帮助人们识别。
• 作为子产品或服务隶属于母公司时 ：考虑使用母公司的标志，但要评估其是否能通过关联增加意义，以及是否会造成干扰或混淆。

5.3 细节注意事项

• 术语定义 ：通常所说的标志可以是符号、文字或两者结合，但仅使用文字（无符号）的标志正确术语是字样标志。
• 标志与品牌的区别 ：标志是传达品牌信息的符号，但不是品牌本身。
• 设计原则 ：标志应暗示与所代表的产品、服务或组织相关的想法、感觉、原则或描述。设计标志时应避免追逐潮流，其表达特质应具有经典性，利用对称性、高度组织化的布局和简洁的形式。具有多种用途的标志更具灵活性，更有可能长期使用。

以下是标志设计的要点表格：
|要点|详情|
|----|----|
|术语|包含符号、文字或两者，仅文字为字样标志|
|与品牌关系|是品牌的符号化传达，非品牌本身|
|设计原则|避免潮流，具有经典性，利用对称等|
|用途|多种用途更灵活持久|

6. 图标

6.1 主要特点

图标具有简单性和抽象性，是事物的简化图像。它需要与所代表的事物相似，以便易于理解，并能替代文字或更详细的图像。

6.2 使用场景

• 用简单图像替代文字以增加视觉多样性时 。
• 标准要求使用图标时 ：如应用商店或启动屏幕。

6.3 细节注意事项

• 颜色选择 ：图标可以是单色或多色。
• 特征强调 ：为了更好地传达信息，图标可能会夸张定义特征。
• 清晰传达信息 ：图标需要向受众清晰传达其含义，若含义模糊，应搭配文字说明。
• 设计差异 ：设计应用程序图标与应用内代表任务和概念的图标有所不同。应用程序图标应具有独特性和记忆点，而应用内图标应熟悉且明显。设计应用程序图标前，需确保符合设备标准。
• 图标组设计 ：应用中使用的图标通常以组或系列形式创建，同一组图标需要具有相似的风格。不同图标组在同一应用中可以有不同的样式，但应具有一些共同特征，以保持相关性。

7. 符号

7.1 主要特点

符号代表对象、动作或想法，但不像图标那样需要与所代表的事物相似。例如，旗帜是国家的象征，箭头和形状等具有特定的上下文含义，字母和数字也是符号。

7.2 使用场景

• 传达受众普遍理解的信息时 ：如在美国，红十字是美国红十字会灾难救援机构的象征；在欧洲，绿十字是药店的象征。
• 有通用符号可代表特定概念时 ：例如圆形中的三角形常用于播放视频。

7.3 细节注意事项

• 含义因上下文而异 ：符号的含义会根据上下文和使用方式而变化。例如，五角星在太空中代表大质量等离子球，但在列表中可能表示偏好或重要性。
• 含义由文化决定 ：符号的含义由使用它们的文化赋予，因此含义可能会发生变化，并非固定不变。
• 单一含义原则 ：符号最好传达单一的想法，避免随意组合符号创造新含义，除非有意定义一种新的视觉语言。
• 颜色影响含义 ：颜色会影响符号的含义和解释，如红十字和绿十字代表不同的机构。

8. 数据可视化

8.1 主要特点

数据可视化可以是动态的（与数据库连接并自动更新）或静态的。数据通常以图表和图形的形式呈现，以揭示模式和显示状态。文字、数字、符号、形状、线条、颜色、布局和有时的照片结合在一起，帮助人们理解交易、事件或行为的抽象表示。设计成功的数据可视化需要理解数据及其意义，然后决定合适的形式来表达含义，并应用视觉可用性原则帮助人们理解。

8.2 使用场景

• 有事实或定量数据需要可视化以增强理解时 。
• 比较多组数据以快速了解它们的差异时 。

8.3 细节注意事项

• 使用标准形式 ：使用标准的数据可视化形式，如条形图、饼图和折线图，人们无需解读不熟悉的格式。
• 选择合适的形式 ：不同的形式展示不同的内容，应根据数据和目的选择合适的图表或图形类型。
• 与应用风格匹配 ：设计图表和图形时，要使其与应用的视觉风格有一些共同的视觉特征，决定匹配程度并选择合适的工具以实现适当的对比度。
• 消除不必要元素 ：图表或图形中的每个元素都应增加其含义并有助于解释，消除所有不必要的元素。
• 应用设计原则 ：布局、颜色和字体的原则适用于图表和图形的设计，如内容和文本的一致对齐，根据视觉强调选择颜色，使用与应用其他部分相同的字体（除非有合理的对比理由）。
• 颜色使用原则 ：在图表和图形中使用颜色时，要传达含义、区分内容类型、突出重要区域，同时保持与应用整体调色板的一致性，避免使用视觉隐喻和不恰当的处理方式，如能用二维图形就不用三维图形，保持视觉焦点在数据上。设计动态图表和图形时，要基于代表性的数据量和类型确保样式与实时数据兼容。使用多种图表和图形可以使数据展示更有趣，但形式必须有效。

以下是数据可视化设计的步骤列表：
1. 理解数据及其意义。
2. 选择合适的可视化形式。
3. 确保与应用视觉风格匹配。
4. 消除不必要元素。
5. 应用布局、颜色和字体原则。
6. 合理使用颜色。
7. 设计动态图表时考虑实时数据。
8. 多样化使用有效图表形式。

9. 信息图

信息图是一种插图，可能还包含数据可视化和交互式图形的元素。纯插图形式的信息图是基于对数据的解读设计的静态图形，通常包含有限的内容以提供上下文。更复杂的信息图结合了基于数据集的动态可视化，可能包括动态或交互性。由于信息图属于插图的一种，因此插图的特点、使用提示和注意细节同样适用于它。当引入动态或交互性时，还需遵循交互式图形的使用提示。

10. 交互式图形

10.1 主要特点

交互式图形可以作为独立的应用程序，也可以嵌入到其他应用程序中。它们可能包含多种图像形式，如摄影、视频和插图，需要结合成功图像设计的原则以及合适的控件设计和展示。

10.2 总结

不同类型的图像在不同的场景中具有独特的优势和用途。在实际应用中，需要根据具体的目的、受众和内容来选择合适的图像类型，并注意各种图像类型的细节要求，以达到最佳的信息传达和用户体验效果。例如，在解释复杂过程时优先考虑视频；在展示抽象概念时选择插图；在传达普遍理解的信息时使用符号等。同时，无论是哪种图像类型，都要注重其质量、风格和与整体应用的协调性。

11. 图像类型对比总结

为了更清晰地对比各种图像类型的特点、使用场景和注意事项，我们可以通过以下表格进行总结：
|图像类型|主要特点|使用场景|细节注意事项|
|----|----|----|----|
|视频|动态性、真实性，可跨越距离，声音辅助传达信息|解释过程、展示动态细节|尺寸非越大越好，质量至关重要|
|插图|抽象、夸张、简化、富有想象力|展示抽象概念、新想法、无形品质等|选择合适风格，考虑风格时效性|
|动画|呈现内容或实现界面元素动态交互|回顾概念、跨文化交流、强调个性等|选择合适风格，谨慎使用，考虑多次观看效果|
|标志|抽象性，符号化传达，大小尺寸适应性强|产品标识、代表产品、品牌服务标识等|避免潮流，具有经典性，多种用途更持久|
|图标|简单性、抽象性，替代文字或详细图像|替代文字增加视觉多样性、符合标准要求|颜色选择、特征强调、清晰传达信息，注意设计差异和图标组风格|
|符号|不与代表事物相似，代表对象、动作或想法|传达普遍理解信息、有通用符号的概念|含义因上下文和文化而异，单一含义原则，颜色影响含义|
|数据可视化|动态或静态，以图表图形呈现数据|可视化数据增强理解、比较多组数据|选择标准形式，匹配应用风格，消除不必要元素，合理使用颜色|
|信息图|可能包含数据可视化和交互元素，基于数据解读|提供数据上下文，复杂信息展示|遵循插图和交互式图形相关原则|
|交互式图形|多种图像形式结合，需合适控件设计|独立应用或嵌入应用|结合图像设计原则和控件设计展示|

12. 图像选择决策流程

在实际应用中，如何选择合适的图像类型是一个关键问题。以下是一个基于不同需求的图像选择决策流程图：

graph LR
    A[有数据需要可视化?] -->|是| B[考虑数据可视化]
    A -->|否| C[需要展示抽象概念或想法?]
    C -->|是| D[考虑插图或动画]
    C -->|否| E[需要展示动态过程或细节?]
    E -->|是| F[考虑视频或动画]
    E -->|否| G[需要标识产品或服务?]
    G -->|是| H[考虑标志或图标]
    G -->|否| I[需要传达普遍理解信息?]
    I -->|是| J[考虑符号]
    I -->|否| K[其他情况，综合考虑需求和图像特点选择]
    B --> L[选择合适的图表形式]
    D --> M[选择合适的风格和表现方式]
    F --> N[确定合适的尺寸和质量]
    H --> O[设计具有记忆点和适应性的标志或图标]
    J --> P[注意符号含义和文化差异]

13. 图像应用案例分析

13.1 烹饪应用案例

以烹饪应用Hello, Cupcake!为例，它使用视频来演示纸杯蛋糕的制作和装饰技巧。视频的动态性和真实性让用户能够更直观地学习复杂的过程，即使视频以较小的尺寸展示，也能帮助用户清晰地理解每个步骤的要点，比静态图像更具优势。同时，该应用注重视频质量，确保专业的展示效果，提升用户的学习体验。

13.2 投资信息网站案例

在投资信息网站上，研究发现通用图像和人们直视镜头的照片效果不佳。这表明摄影图像需要主题明确且与文本内容直接相关才能吸引用户并建立信任。网站可以考虑使用数据可视化来展示投资数据，如折线图展示股票走势，让用户更清晰地了解市场动态；或者使用插图来解释复杂的投资概念，如资产配置的原理，帮助用户更好地理解。

13.3 数据可视化案例

MailChimp的电子邮件报告使用了多种数据可视化形式，如条形图、表格、旗帜和地图，使报告看起来更具吸引力。不同类型的图表结合使用，既展示了数据的多样性，又遵循了选择合适形式展示不同内容的原则。同时，报告的图表设计与应用整体风格相匹配，颜色使用合理，突出了重要信息，让用户能够轻松理解报告内容。

14. 图像设计的未来趋势

随着技术的不断发展和用户需求的变化，图像设计也呈现出一些未来趋势：
- 增强现实（AR）和虚拟现实（VR）图像应用 ：AR和VR技术将为图像设计带来全新的体验，用户可以更沉浸式地与图像互动，如在虚拟环境中展示产品、体验场景等。
- 人工智能辅助图像设计 ：人工智能可以帮助设计师更高效地完成图像设计任务，如自动生成图标、优化图像布局等，同时也能根据用户数据提供个性化的图像推荐。
- 动态和交互式图像的普及 ：用户对动态和交互式内容的需求不断增加，未来更多的图像将具备动态效果和交互功能，以提高用户参与度和体验感。
- 跨平台和多设备适配 ：随着移动设备和各种智能终端的普及，图像需要在不同平台和设备上都能保持良好的显示效果和用户体验，这对图像的设计和优化提出了更高的要求。

15. 总结与建议

15.1 总结

不同类型的图像在信息传达和用户体验中都扮演着重要的角色。视频适合展示动态过程，插图擅长表达抽象概念，标志和图标用于产品标识，数据可视化帮助理解数据等。在选择图像类型时，需要综合考虑具体的需求、受众和应用场景，同时注意各种图像类型的细节要求，确保图像的质量、风格和整体协调性。

15.2 建议

• 明确目标和需求 ：在使用图像之前，先明确想要传达的信息和目标受众，根据这些来选择合适的图像类型。
• 注重用户体验 ：考虑用户的感受和需求，确保图像能够清晰、准确地传达信息，避免过于复杂或干扰性的设计。
• 跟上技术发展 ：关注图像设计的未来趋势，适时引入新的技术和方法，提升图像的吸引力和交互性。
• 进行测试和优化 ：在实际应用中，对图像进行测试，收集用户反馈，根据反馈进行优化，以达到最佳的效果。

通过合理选择和运用不同类型的图像，我们可以更好地传达信息，提升用户体验，使应用和产品在竞争中脱颖而出。希望以上内容能为你在图像设计和应用方面提供一些有价值的参考。