16、图像在应用设计中的运用与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/zero1/article/details/155266899

图像在应用设计中的运用与实践

1. 交互式图形

1.1 使用场景

配置物品时，如定制匡威运动鞋。
教学工具和教育游戏中，输入和反馈是吸引用户参与的关键。
演示和模拟中，让人们尝试某些操作。

1.2 设计要点

要点	说明
内容与控件平衡	成功的交互式图形需平衡引人入胜的内容和必要的交互控件，复杂内容可能使控件难以查找和使用。
使用标准控件	使用标准、有样式的控件，因为图形本身可能对用户来说不熟悉，熟悉的控件能帮助用户知道如何操作。
视觉反馈	高度可视化的反馈至关重要，若用户看不到反馈，会认为图形无法正常工作。
步骤引导	部分交互式图形界面呈现一系列步骤，有助于用户导航和使用图形。
恢复默认状态	能够恢复到默认状态很关键，用户必须能够轻松清除操作并重新尝试。

2. 地图

2.1 主要特征

基于数据的地图代表真实的地点，可以是抽象的、写实的或两者结合，依靠插图、摄影、文本和其他符号进行信息传达。

2.2 使用场景

人们需要前往目的地或可视化地点之间的关系时。
为地点提供视觉参考能增加意义、辨识度或上下文时。

2.3 设计要点

地图设计是一个专业领域。
除非受众熟悉或期望特定类型的地图，或地图样式对传达品牌特征很重要，否则任何地图软件或 API 都可以使用。
选择地图应用时，考虑地图的默认外观与界面和内容的整体搭配，功能相当时，选择与界面美学最相关的应用。
优化地图展示以与 UI 视觉融合，更改非地图图像本身的默认字体和颜色，但除非有更重要的艺术表达，否则不要更改地图上的颜色和字体。

3. 图案、纹理、背景和渐变

3.1 主要特征

类型	说明
图案	通常是图像的重复区域，重复图案可产生纹理效果。
纹理	改变屏幕表面的图像效果。
渐变	一种或多种颜色的区域，颜色深浅变化以营造深度错觉，是纹理的一种。
背景	内容后面的任何类型的图像或纯色，可创造深度。

3.2 使用场景

图案或纹理的内容能为内容增添意义时。
想要影响情绪时。
想要传达空间或深度感时。
区分内容部分时。
效果有助于传达个性和品牌时。
寻求跨平台和媒介连接视觉设计的方法时。

3.3 设计要点

始终测试背景上文字的可读性和对比度。
图案或背景越简单，干扰性越小。
图案和背景传达概念性而非字面特征时最为成功。

4. 拟物化：视觉隐喻

4.1 定义

拟物化是指设计用于参考真实物体的装饰元素，在界面设计中，是使用真实物体的图形图像、动作和声音，使事物看起来真实和熟悉。

4.2 发展与争议

早期在苹果用户界面历史中，拟物化用于设计一些功能，帮助人们快速理解屏幕功能与实体功能的相似之处。但如今，人们对此反应常为负面和主观，认为拟物化可能抑制界面设计的创造性。

4.3 与简约抽象的对比

简约的美学原则通常依赖于将形式提炼为抽象的基本视觉元素，以快速和普遍地传达信息。拟物化是对真实事物的字面表示，传达高度特定的视觉信息，与简约原则相悖。然而，在某些情况下，如引入新功能或为儿童设计时，使用拟物化可能是最有效的视觉传达方式。

4.4 案例

Zipcar 在其汽车共享管理应用中，提供汽车无钥匙进入控制的拟物化表示，让会员通过移动设备远程锁定和解锁汽车，甚至按喇叭。即使没有当前预订，会员也可以玩虚拟钥匙扣，系统提示帮助人们理解控制方式，同时强化了 Zipcar 的俏皮个性。

5. 在应用中使用图像的步骤

5.1 战略层面问题

应用的目的是什么？
应用将包含什么内容？
用户期望看到什么内容被描绘？
图像将扮演什么角色？
用图像区分应用的重要性如何？

5.2 战略/战术层面问题

个性的特点是什么？
哪些类型的图像有助于传达内容和个性？
图像应该代表什么？

5.3 战术层面问题

图像应如何呈现？放在哪里？
图像的特点是什么？大、小、详细、简单、具象、抽象、对比、支持等？

6. 案例研究：SuperTracker 应用

6.1 现有应用图像使用分析

启动屏幕

通过标志识别应用。
将应用与 MyPlate 倡议相关联。
通过背景图案传达统计或图表信息。
表明应用是面向家庭的。
与文本形成对比。
参考测量体重、创建和检查目标以及收集报告数据。

食物跟踪屏幕

通过图表显示状态和进度。
使用按钮中的图标使操作突出。
控制功能（日期选择区域的箭头）。
提供视觉兴趣（渐变）。

6.2 图像优化决策

库存照片传达的细节过多，且未增加个性，图标效果更好。
图表很重要，若使用 SuperTracker 调色板的色调着色，可作为与 MyPlate 计划的视觉联系。
新的标志有助于传达应用的个性。

6.3 标志探索

最初尝试用图标或象征手法传达 SuperTracker 作为食物和活动跟踪工具的本质。经过多轮设计，最终确定的标志不直接传达跟踪食物和活动的信息，而是依靠图表中的颜色和阴影微妙地参考 MyPlate 标志。

6.4 图标探索

定义图标在重新设计的 SuperTracker 中的作用：
- 吸引目光到操作和重要数据。
- 通过轻微表达传达个性。
- 为输入数据提供有吸引力的控件。

经过多轮设计和测试，确定了各种餐食图标和各部分的图标。

6.5 图表探索

考虑使用参考 MyPlate 标志的食物组图表，但最终认为传统条形图更清晰直接。定义图表的作用：
- 一目了然地传达用户满足每日食物组目标的情况。
- 作为对 ChooseMyPlate.gov 母网站和 MyPlate 倡议的视觉参考。

6.6 屏幕图像整合

最终的手机屏幕展示了图标、按钮处理和图表设计。图标设计经过精心处理，扁平、单色的设计有助于融入界面，同时与文本形成足够对比以增加视觉兴趣。

mermaid 流程图展示图像使用决策流程：

graph LR
    A[确定应用目的和内容] --> B[战略层面问题分析]
    B --> C[战略/战术层面问题分析]
    C --> D[战术层面问题分析]
    D --> E[设计图像元素]
    E --> F[测试和优化图像]
    F --> G[整合图像到应用]

通过以上对不同类型图像的介绍和 SuperTracker 应用的案例分析，我们可以看到在应用设计中合理运用图像的重要性和具体方法。在实际设计过程中，需要综合考虑各种因素，从战略到战术层面进行全面规划，以达到最佳的视觉效果和用户体验。

7. 不同类型图像在应用设计中的综合考量

7.1 各类图像的互补性

在应用设计中，交互式图形、地图、图案纹理等不同类型的图像并非孤立存在，而是相互补充，共同营造出完整的用户体验。例如，在一个旅游应用中，交互式图形可以用于展示景点的 3D 模型，让用户更直观地感受景点特色；地图则能帮助用户了解景点的位置和周边环境；而图案和纹理可以作为背景，增强应用的整体风格和氛围。

图像类型	作用	示例
交互式图形	提供互动体验，让用户参与操作	旅游应用中的景点 3D 模型展示
地图	展示地理位置和空间关系	旅游应用中的景点分布地图
图案纹理	增强风格和氛围，补充内容信息	旅游应用中具有地方特色的背景图案

7.2 图像与品牌的一致性

无论使用哪种类型的图像，都需要确保其与品牌的个性和价值观保持一致。以 SuperTracker 应用为例，其整体风格要体现出“Pepper”的个性，即时尚、科技感和趣味性。在设计标志、图标和图表时，都要围绕这一品牌个性进行，使图像能够准确传达品牌信息。

7.3 图像的适应性

随着移动设备的多样化和不同平台的特点，图像需要具备良好的适应性。例如，在不同尺寸的屏幕上，图像要能够清晰显示，并且布局合理。同时，不同平台的用户习惯也有所不同，图像的设计要考虑到这些因素，以提供一致的用户体验。

8. 图像设计的未来趋势

8.1 更加注重用户体验

未来的图像设计将更加注重用户体验，以用户为中心进行设计。这意味着图像不仅要美观，还要能够方便用户操作和理解。例如，在交互式图形中，更加简洁明了的交互控件和及时的反馈将成为趋势；在图标设计中，更加直观易懂的图标将更受欢迎。

8.2 增强现实（AR）和虚拟现实（VR）的应用

随着 AR 和 VR 技术的不断发展，它们在应用设计中的应用也将越来越广泛。通过 AR 和 VR 技术，用户可以获得更加沉浸式的体验。例如，在旅游应用中，用户可以通过 AR 技术查看景点的虚拟导览；在购物应用中，用户可以通过 VR 技术试穿衣服。

8.3 数据可视化的创新

数据可视化将继续成为图像设计的重要领域，并且会不断创新。未来的数据可视化将不仅仅是简单的图表展示，还将结合动画、交互等元素，使数据更加生动和易于理解。例如，通过动态的图表展示数据的变化趋势，或者让用户通过交互操作来探索数据。

9. 总结与建议

9.1 总结

在应用设计中，图像的运用至关重要。不同类型的图像，如交互式图形、地图、图案纹理、拟物化等，都有其独特的特点和使用场景。通过合理运用这些图像，可以增强应用的吸引力、传达品牌信息、提高用户体验。同时，在设计过程中，需要从战略和战术层面进行全面考虑，确保图像的设计符合应用的目的和用户的需求。

9.2 建议

在开始设计之前，明确应用的目的和用户需求，以此为基础确定图像的角色和类型。
注重图像与品牌的一致性，使图像能够准确传达品牌个性和价值观。
进行充分的测试和优化，确保图像在不同设备和平台上都能提供良好的用户体验。
关注图像设计的未来趋势，不断学习和尝试新的技术和方法，以提升设计水平。

mermaid 流程图展示图像设计的整体流程：

graph LR
    A[明确应用目的和用户需求] --> B[确定图像角色和类型]
    B --> C[战略层面规划]
    C --> D[战术层面设计]
    D --> E[图像设计与制作]
    E --> F[测试和优化]
    F --> G[应用上线与维护]
    G --> H[关注趋势与改进]

总之，图像在应用设计中扮演着重要的角色，通过合理运用图像和不断创新，可以打造出更加出色的应用，为用户带来更好的体验。希望以上内容能够为应用设计师在图像运用方面提供一些有价值的参考。