首页

学会这个核心工具,你的可视化设计一定差不了!

蓝蓝设计的小编

数据图表是一种非常重要的可视化工具,它能够帮助用户更直观地理解和分析数据。借助于图形化的手段,清晰、快捷有效的传达与沟通信息。从用户的角度,数据可视化可以让用户快速抓住要点信息,让关键的数据点从人类的眼睛快速通往心灵深处。
 
⭐️
PART 1 ——————
数据图表的概述
数据图表是将复杂的数据集转换为图形或图像的过程,旨在通过视觉化的方式简化信息的理解和分析。它不仅是一种技术手段,更是一种沟通工具,能够帮助人们更有效地解释数据、发现模式、做出决策并传达见解。
数据图表:多领域信息可视化的核心工具
 
 
「核心价值」
·  简化复杂信息:数据图表通过图形化的手段简化了大量数字或文本信息,使读者能够迅速抓住关键点。
·  促进理解与学习:利用人类大脑对图形和色彩的敏感性,数据图表加速了信息处理过程,支持教育和培训。
·  辅助决策制定:数据图表为管理层或其他决策者提供了有价值的商业智能,支持快速决策。
·  提升沟通效果:促进了跨部门协作和公众传播的效果。
 
「核心要素」
·  数据:来源可以是数据库、API或文件,类型包括定量和定性数据。
·  图表类型:根据数据特性和分析目的选择最恰当的图表类型。
·  设计原则:确保图表清晰易读、准确无误、风格一致且具备视觉吸引力。
 
「核心目标」
·  简化复杂信息:使大量数字或文本信息变得直观易懂。
·  促进理解与学习:加速信息处理过程,支持教育和培训。
·  辅助决策制定:提供有价值的商业智能,支持快速决策。
·  提升沟通效果:增强跨部门协作和公众传播的效果。
·  探索数据关系:发现隐藏模式,验证假设。
·  监测与跟踪进展:实时监控关键指标,规划项目管理。
 
⭐️
PART 2
——————
应用标准指南
数据图表:多领域信息可视化的核心工具
 
 
设计有效的数据图表不仅需要选择合适的图表类型,还需要遵循一系列设计要点以确保图表既美观又实用。以下是应用数据图表时需要注意的标准指南:
 
1. 明确目标与受众
·  理解需求:明确你希望通过图表传达的信息是什么。
·  考虑受众:了解你的目标受众是谁,他们的知识水平和兴趣点在哪里。
2. 简洁性与清晰度
·  去除冗余:避免不必要的装饰元素,保持图表简单明了。
·  突出重点:通过颜色、字体大小等方式强调最重要的信息。
·  易于解读:确保图表中的每个元素都有其明确的意义,并且容易被理解。
3. 数据准确性
·  精确无误:保证所使用的数据是最新且经过验证的。
·  透明度:注明数据来源,增加可信度;如果适用,提供数据获取方法或计算公式。
4. 合理使用颜色
·  色彩心理学:根据情感联想选用颜色,例如绿色通常关联增长,红色常用来警示。
·  对比度:使用足够的颜色对比来区分不同的数据系列或类别,同时考虑到色盲用户的需要。
·  一致性:在多个图表中保持颜色方案的一致性,以便于比较。
5. 标签与注释
·  完整标签:为所有轴、图例和其他重要元素添加清晰的标签。
·  必要注释:对于特别重要的数据点或异常情况进行说明,帮助用户更好地理解图表内容。
6. 图表标题与描述
·  简洁标题:用简短而准确的语言概括图表的主要信息。
·  辅助文本:如有必要,可以添加副标题或简短描述来补充背景信息或解释图表含义。
7. 交互性(如适用)
·  工具提示:当用户将鼠标悬停在某个数据点上时,显示详细信息。
·  动态更新:对于实时数据,设计允许自动刷新的图表。
·  筛选与排序:提供选项让用户根据自己的兴趣过滤或重新排列数据。
8. 响应式设计
·  适应多平台:确保图表能够在不同设备(桌面电脑、平板电脑、智能手机)上良好显示。
·  可缩放:允许用户放大特定区域或滚动查看超出初始视图的数据。
9. 避免误导性表示
·  比例尺的选择:合理设置Y轴起始值和增量,避免夸大或缩小差异。
·  避免三维效果:除非绝对必要,否则不要使用三维效果,因为它们可能会扭曲感知比例。
10. 故事讲述
·  逻辑连贯:构建一个从开始到结束逐步理解数据背后意义的故事线。
·  引导视线:通过布局和视觉层次引导观众关注最重要或最有趣的部分。
11. 测试与反馈
·  用户测试:邀请真实用户测试图表,收集反馈以改进设计。
·  持续优化:基于用户反馈和技术进步不断调整和完善图表设计。
 
遵循上述标准可以帮助创建出既美观又功能强大的数据图表,从而更有效地支持决策过程并促进信息交流。
 
⭐️
PART 3
——————
图表构成元素
想准确的将图表与所要表现的数据进行对应,需要了解图表本身所包含的基本元素。
数据图表:多领域信息可视化的核心工具
 
 
在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域。
 
· 标题
(Title)
简明扼要地说明图表的内容和目的。
标题应位于图表上方居中位置,使用清晰易读的字体和大小。
 
· 坐标系(Coordinate System)
定义图表的X轴和Y轴,以及数据点的位置。
坐标轴应清晰地标记,包括刻度线和刻度值。确保刻度间隔合适,易于阅读。
 
· 时间范围(Time Range)
告知用户图表数据覆盖的时间段。
如果图表显示的是时间序列数据,时间范围可以放在标题下方或者图表底部的X轴标签旁边。
 
· 图形主体(Graph Body)
定义图表的X轴和Y轴,以及数据点的位置。
坐标轴应清晰地标记,包括刻度线和刻度值。确保刻度间隔合适,易于阅读。
 
· 图例(Legend)
解释图表中不同颜色或图案代表的数据系列。
图例应放置在图表的边角位置,不妨碍图表的主体内容。图例中的颜色或图案应与图表中的一致。
 
· 提示信息(Tooltip)
允许用户选择不同的数据系列或时间范围。
切换选项可以是按钮或下拉菜单的形式。应放置在图表的一侧或顶部,不影响图表主体的可视性。
 
· 切换选项(Toggle Options)
允许用户选择不同的数据系列或时间范围。
切换选项可以是按钮或下拉菜单的形式。应放置在图表的一侧或顶部,不影响图表主体的可视性。
 
· 值域(Value Range)
允许用户调整坐标轴的范围,以聚焦于特定的数据区间。
值域调整通常出现在坐标轴附近的小控件中,例如滑块或输入框。
 
⭐️
PART 4
——————
常见的数据图表类型
数据图表:多领域信息可视化的核心工具
 
 
在C端(消费者端)应用中,数据图表是一种非常重要的可视化工具,它能够帮助用户更直观地理解和分析数据。
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
 
⭐️
PART 5
——————
选择合适图表的关键因素
数据图表:多领域信息可视化的核心工具
 
 
挑选最佳图表类型是一个综合考量数据集特点、应用场景需求以及目标受众理解能力的过程,是确保数据有效传达的关键。以下是选择图表类型时应考虑的几个重要要点:
 
1. 数据性质
·  定量 vs 定性:确定你的数据是数值型(如销售额、温度)还是分类型(如性别、地区)。数值型数据通常适合柱状图、折线图等;分类型数据可能更适合饼图或条形图。
·  时间序列 vs 非时间序列:如果数据随时间变化,如股票价格或天气预报,则折线图和面积图可能是最佳选择。如果是静态数据,如人口统计信息,则可以考虑柱状图或饼图。
 
2. 比较需求
·  类别对比:如果你需要比较不同类别的数量或比例,柱状图、条形图和饼图是很好的选择。
·  趋势分析:对于展示随时间或其他连续变量的变化趋势,折线图和面积图更为合适。
·  相关性探索:当你要研究两个变量之间的关系时,散点图可以帮助你发现潜在的相关性或模式。
 
3. 数据量与复杂度
·  少量数据:对于简单且数据点较少的情况,饼图、条形图等可以直接清晰地传达信息。
·  大量数据:面对大量数据或高维数据集时,热力图、气泡图、树状图等能够更有效地处理复杂信息,并帮助识别模式。
 
4. 用户目标与受众理解能力
·  决策支持:如果目的是辅助快速决策,那么应该选择易于解读、直观明了的图表类型,如子弹图、漏斗图等。
·  教育或解释:针对教育目的或需要详细解释的数据,可以选择更具互动性的图表,如带有工具提示或动态更新功能的图表。
 
5. 图表的功能性
·  强调差异:如果你想突出显示异常值或显著差异,可以选择箱线图、瀑布图等。
·  构成分析:为了展示各部分占整体的比例关系,饼图和堆叠柱状图非常有用。
·  分布展示:直方图和密度图能很好地展示数据的分布情况,包括集中趋势和离散程度。
 
6. 可视化效果与美观性
·  视觉吸引力:某些图表不仅传递信息,还能增强视觉美感,如玫瑰图、雷达图等,适用于报告封面或演示文稿中。
·  空间效率:在有限的空间内传达更多信息,子弹图、仪表盘等紧凑设计的图表是不错的选择。
 
7. 行业惯例与标准
·  领域特定:不同的行业可能有其偏好使用的图表类型,例如金融领域常用蜡烛图,地理信息系统常用地图可视化。
·  遵循规范:遵守所在领域的图形表示规范,确保图表的专业性和可接受性。
 
通过综合考虑上述要点,你可以为特定的数据集和应用场景挑选出最合适的图表类型,从而最大化数据的价值并促进有效的沟通。选择图表时,务必结合实际需求和用户背景,确保最终呈现的信息既准确又易于理解。
 
⭐️
PART 6
——————
使用场景
数据图表:多领域信息可视化的核心工具
 
 
「健康类应用」
健康类App通过使用多样化的数据图表,不仅让用户对自己的健康状况有了更直观的理解,同时也激励用户采取积极的生活方式改变,从而改善健康状况。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如每日步数、卡路里消耗等。
·  视觉层次分明:使用不同的颜色、字体大小和对比度来区分关键信息和次要信息,最重要的数据一目了然。
·  一致性:整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
 
2. 互动性
·  深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的锻炼记录或饮食摄入情况。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月)、运动类型等进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片或CSV格式的功能,便于打印或分享给教练或朋友。
 
3. 个性化
·  用户定制:根据用户的个人健康目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定训练方案的效果。
·  目标跟踪:类似于健康管理目标设定,允许用户设定并跟踪自己的健身目标,如减重、增肌等。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估进展,并为用户提供有针对性的反馈和建议。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的健身数据,如实时监测的心率或运动进度,这对于及时调整训练计划尤为重要。
·  同步与整合:与其他健身设备或平台无缝对接,自动同步来自各种来源的数据,如智能手环、跑步机等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设目标或需要特别关注时,及时向用户发送通知或提醒,鼓励持续参与。
 
5. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的健身数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让用户之间可以交流经验和支持,增加互动性和动力。
 
综上所述,健身类APP图表运用的设计特点不仅强调了清晰易读、互动性强、个性化定制和实时更新,还特别注重用户体验和社区互动。这些特性共同作用,可以帮助用户更有效地管理和理解健身数据,从而促进更好的健康管理和运动效果。
 
「医疗辅助应用」
医疗辅助应用的数据图表设计特点可以从健身类APP的设计特点中汲取灵感,但同时也需要考虑到医疗行业的特殊需求和严格标准。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  专业术语解释:确保图表本身清晰易读的同时,提供必要的术语解释或简短说明,帮助非专业人士理解复杂的医学概念。
·  视觉层次分明:使用不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:保持整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
 
2. 互动性
·  深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的测量结果或特定治疗阶段的效果。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月)、病患群体、疾病类型等进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为PDF、CSV等格式的功能,便于打印或分享给其他医疗专业人员。
 
3. 个性化
·  患者定制:根据患者的健康状况、治疗计划或个人偏好调整图表内容,例如突出显示关键指标的变化趋势或特定治疗方案的效果。
·  医生建议:集成医生推荐的图表视图或设置,方便医生快速评估病情进展,并为患者提供有针对性的反馈。
·  健康目标跟踪:类似于健身APP中的目标设定,允许患者设定并跟踪自己的康复或健康管理目标,如血压控制、体重管理等。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的健康数据,如实时监测的生命体征或实验室检测结果,这对于紧急情况下的决策尤为重要。
·  同步与整合:与其他医疗设备或系统无缝对接,自动同步来自各种来源的数据,如可穿戴设备、医院信息系统等,确保数据的完整性和准确性。
·  通知与预警:当某些关键指标超出正常范围时,及时向患者和相关医护人员发送通知或警告,以便采取必要的干预措施。
 
5. 隐私与安全
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保患者信息的安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如HIPAA(美国健康保险流通与责任法案)或其他国家/地区的疗数据保护法规。
 
6. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的健康数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让患者之间或患者与医生之间可以交流经验和支持。
 
综上所述,医疗辅助Web应用的数据图表不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注隐私保护和安全性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助医疗专业人员和患者更有效地管理和理解健康数据,从而促进更好的医疗服务和健康管理。
 
「金融类应用」
金融类应用的数据图表设计需要特别关注清晰性、互动性、个性化和实时更新,同时还要考虑到金融行业的特殊需求如安全性、合规性和专业性。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如股票价格走势、投资组合表现等。
·  视觉层次分明:不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
·  术语解释:提供必要的术语解释或简短说明,帮助非专业人士理解复杂的金融概念。
 
2. 互动性
· 深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的交易记录或市场波动情况。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月、年)、资产类型(股票、债券、基金等)进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片、PDF或CSV格式的功能,便于打印或分享给财务顾问或同事。
·  情景模拟:提供情景分析工具,用户可以调整变量(如利率、通胀率)来预测不同市场条件下的投资表现。
 
3. 个性化
·  用户定制:根据用户的个人投资目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定投资策略的效果。
·  风险偏好匹配:基于用户的风向承受能力,推荐适合的投资组合配置,并展示相应的风险与回报图表。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估投资进展,并为用户提供有针对性的投资建议和反馈。
 
4. 实时更新
· 即时反馈:确保图表能够迅速反映最新的金融市场数据,如实时股价、汇率变动等,这对于及时调整投资策略尤为重要。
·  同步与整合:与其他金融平台或服务无缝对接,自动同步来自各种来源的数据,如银行账户、证券账户等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设阈值或需要特别关注时,及时向用户发送通知或提醒,帮助用户抓住投资机会或规避风险。
 
5. 安全与合规
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保用户隐私和资金安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如GDPR(欧盟通用数据保护条例)、SOX(萨班斯-奥克斯利法案)等,确保数据处理符合法律要求。
 
6. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的金融数据和图表背后的意义。
·  社区交流:创建一个专业的社区平台,让用户之间或用户与金融专家之间可以交流经验和支持。
·  客户支持:提供在线客服或热线电话,确保用户在遇到问题时能够得到及时的帮助。
 
综上所述,金融类应用的数据图表设计不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注安全性和合规性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助用户更有效地管理和理解金融数据,从而做出更加明智的投资决策。
 
「信息记录类应用」
另一类比较常用图表的 App 是信息记录类 App,这些 App 通常会统计用户主动输入信息的频次或频率,依此生成一段时间周期内的统计图表。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如每日情绪波动、月度费用支出等。
·  视觉层次分明:不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:保持整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
·  术语解释:对于不太常见的记录类别或指标,提供必要的解释或简短说明,帮助用户理解图表内容。
 
2. 互动性
·  深度探索:允许用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的记录详情或特定事件的影响。
·  多维度筛选:提供灵活的筛选选项,让用户可以根据时间范围(日、周、月、年)、记录类型(如费用分类、情绪标签)进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片、PDF或CSV格式的功能,便于打印或分享给朋友或顾问。
·  情景模拟:在适用的情况下,提供情景分析工具,用户可以调整变量(如预算分配)来预测不同情况下的结果。
 
3. 个性化
·  用户定制:用户的个人目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定习惯养成的效果。
·  目标跟踪:类似于健身APP中的目标设定,允许用户设定并跟踪自己的记录目标,如每月节省金额、每周阅读书籍数量等。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估进展,并为用户提供有针对性的反馈和建议。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的记录数据,如实时更新的情绪评分或新添加的费用条目,这对于及时调整计划尤为重要。
·  同步与整合:与其他相关平台或服务无缝对接,自动同步来自各种来源的数据,如银行账户、健康监测设备等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设阈值或需要特别关注时,及时向用户发送通知或提醒,帮助用户保持记录习惯或抓住改进机会。
 
5. 隐私与安全
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保用户的个人信息和敏感数据的安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如GDPR(欧盟通用数据保护条例),确保数据处理符合法律要求。
 
6. 教育与支持
· 学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的记录数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让用户之间可以交流经验和支持,增加互动性和动力。
·  客户支持:提供在线客服或热线电话,确保用户在遇到问题时能够得到及时的帮助。
 
7. 历史回顾与趋势分析
·  长期趋势:提供长周期的趋势分析图表,帮助用户回顾过去一段时间内的变化和发展,如年度费用总结、多年情绪变化等。
·  模式识别:通过可视化手段帮助用户发现隐藏的模式或规律,如消费习惯、情绪波动周期等。
·  里程碑标记:在图表中标记重要的里程碑或转折点,如重大事件发生的时间、重要决策做出的时刻等,增强回忆和反思的价值。
 
综上所述,信息记录类应用的数据图表设计不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注隐私与安全性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助用户更有效地管理和理解记录的信息,从而促进更好的自我管理和行为改变。
 
⭐️
PART 7
——————
结语
数据图表:多领域信息可视化的核心工具


作者:ppone_
链接:https://www.zcool.com.cn/article/ZMTY0NjY2NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI设计公司分享:大数据可视化设计技巧的前沿趋势

蓝蓝设计的小编

UI 大数据可视化设计技巧正朝着智能化、沉浸式、动态交互、数据融合以及情感化个性化的方向迅猛发展。这些前沿趋势将深刻改变我们对数据可视化的认知和应用方式,为各个领域带来更加高效、直观和富有创意的数据呈现与分析解决方案。无论是在商业决策、科学研究、教育教学还是日常生活中,大数据可视化都将发挥越来越重要的作用,成为我们理解世界、探索未知的有力工具。作为 UI 设计师,我们应密切关注这些趋势的发展,不断学习和掌握新的设计技巧与技术,以适应时代的需求,创造出更加卓越的数据可视化作品,为用户开启数据驱动的精彩旅程。

从用户体验角度出发,原来可视化设计如此简单

蓝蓝设计的小编

在大数据可视化设计中,以用户为中心的视觉叙事策略能够将数据转化为有价值、有情感、有互动性的信息呈现,帮助用户更好地理解数据、发现数据中的规律和价值,从而为决策提供有力支持。通过深入了解用户需求、构建清晰的叙事框架、运用可视化元素打造叙事场景以及提供丰富的交互功能,UI 设计师能够创造出具有强大吸引力和实用性的大数据可视化作品,让数据在用户面前生动地讲述自己的故事,引领用户在数据的海洋中畅游,探索无尽的知识与智慧宝藏。

UI设计思维分享:UI 大数据可视化关键技巧

蓝蓝设计的小编

布局、色彩与图标在 UI 大数据可视化中并非孤立存在,而是相互协同、相辅相成的关系。通过合理的布局搭建信息框架,运用恰当的色彩赋予数据情感与意义,借助简洁直观的图标进行数据的符号化表达,设计师能够创造出具有强大视觉冲击力和高效信息传达能力的大数据可视化作品,帮助用户在海量数据中快速洞察关键信息,做出明智的决策。这便是布局、色彩与图标协同的视觉炼金术的魅力所在,它为 UI 大数据可视化设计开启了一扇通往无限可能的大门,让数据不再是冰冷的数字,而是充满生命力的视觉故事。

专业UI设计公司分享:设计的真需求

蓝蓝设计的小编

设计师的成长离不开对自身需求的深刻反思。只有坦诚面对自身的局限,专注于长期的积累与价值创造,我们才能在职业道路上走得更远,在设计中找到真正的意义与从容。这不仅是《真需求》理念的实践,更是设计师的生活态度。设计的未来,除了技术创新和形式变化,更在于设计师如何通过真需求的思考,让设计为社会和个人创造更加美好的可能性

如何在APP界面设计中平衡创新与用户习惯?

蓝蓝设计的小编

设计简洁的界面可以减少用户的认知负担,同时也为创新留下空间。去除不必要的元素和复杂的设计,让用户能够快速理解界面的功能和操作流程。例如,在工具类 APP 中,将核心功能以简洁明了的图标形式呈现在首页,避免过多的文字说明和广告干扰。在创新方面,可以在简洁的基础上,通过动画效果或微交互来增添趣味性和功能性,如在用户点击图标时,以简洁的动画展示工具的启动过程。

用户体验设计公司:如何重塑传统企业的数字化服务流程

蓝蓝设计的小编

用户体验设计公司凭借其专业的洞察力、创新的设计理念、精湛的技术整合能力和持续优化的方法论,为传统企业的数字化服务流程重塑注入强大动力。在这个数字化转型的关键时期,传统企业与用户体验设计公司的紧密合作将开启全新的发展篇章,共同迎接数字化未来的无限可能。

超全!APP 图标设计指南:从创意构思到视觉呈现的完美转化

蓝蓝设计的小编

APP 图标设计从创意构思到视觉呈现是一个系统而细致的过程,需要设计师充分理解应用的内涵与目标受众,挖掘独特的创意元素,并运用精湛的设计技巧将其转化为具有强大视觉吸引力和品牌传达力的图标作品。只有这样,才能在竞争激烈的移动应用市场中,让我们的 APP 图标成为吸引用户的第一道亮丽风景线,为应用的成功推广和用户留存奠定坚实的基础。

UI 设计公司教你快速入门 HMI 设计

蓝蓝设计的小编

快速入门 HMI 设计需要从多个方面入手,全面理解其概念与范畴,深入研究用户与场景,精心打造信息架构与交互流程,注重视觉设计与品牌一致性,并通过原型制作与用户测试不断优化完善。希望以上分享能够为 UI 设计师们开启 HMI 设计的大门,助力大家在这个充满挑战与机遇的领域中创造出优秀的设计作品,为用户带来更加卓越的人机交互体验。

UI设计公司分享:交互设计基础深度解析

蓝蓝设计的小编

当我们谈论交互设计(Interaction Design)时,可能有人会疑惑:在体验设计(User Experience Design 简称UX Design)为主流的今天,为什么还要关注交互设计?
 
其实,交互有广义和狭义之分,
广义的交互不仅仅是指互联网企业中的交互设计岗位,也包含从人机交互、人因工程等发展而来的大交互学科
(各大院校的交互设计专业)。而用户体验设计和UI设计只是互联网发展中形成的职业类别:
万字长文:交互设计基础深度解析(一)
 
 
所以说,无论是体验设计、UI设计甚至是服务设计,它们都建立在交互设计的基础之上。交互设计具备的学术背景和理论深度,是连接理论与实践的桥梁,它帮助我们从执行任务的“匠人”,变成能够深入理解背后的逻辑和目的的“设计师”。
 
很多同学虽然非常熟悉信息架构、任务流程和页面搭建等工作,但他们仍然感到困惑,无法将这些内容串联起来,也不清楚底层逻辑,就是因为他们缺乏对交互设计学科背景的深入理解。只有掌握了交互设计的学科知识,设计师才能在职业道路上走得更远,更好地理解和应用设计原则。
 
今天我们就以“学科+职业”的方式,真正系统地介绍一下广义交互设计的基础知识。主要包括以下几部分:
 
第一章  交互设计概述
什么是交互设计,为什么会有交互设计;
第二章  交互设计依托的学科理论基础
这门学科的背景是什么,理论依据在哪里;
第三章  交互设计的基本流程与方法
介绍最通用的交互设计过程与方法;
第四章  交互设计基本原则
介绍设计中必须遵循的几大原则;
第五章  交互设计常用的方法论
成套的装备,可直接使用的成体系方法。
 
第一章 交互设计概述
1.1 什么是交互?
“交互”这个词是从Interaction意译的,词义为“相互作用”,从中文来说,即交流、互动。在人与人之间,相互的打招呼、交流,就算是最简单的交互。那么人和机器之间的交流互动是什么样的呢?举个例子,如果你想给朋友发一条信息,交互过程可能是:
 
打开微信 → 打开对话框 → 输入文字 → 点击发送
 
在这个过程中,每一步的操作,手机都有所反馈,比如点击微信icon,就会进入主界面,点击“发送”,信息就会发到对方微信,一系列的操作和反馈就构成了交互。
 
所以简而言之,当人和一件事物(无论是人,机器,系统、环境等等)发生
双向的信息交流和互动
,就是一种交互行为。这种交流和互动必须是双向的,如果只有一方的信息输出,而没有第二方的参与,就只是信息展示而不是交流互动。来而不往非交互。比如我们平时看到的平面广告,只是信息呈现,没有交互性,而下面的广告设计,就具备了交互的属性:
有人抽烟就“咳嗽”的广告牌
有人抽烟就“咳嗽”的广告牌
 
上图是一个戒烟产品广告,一般状态下,画面中的男士神态正常,当有人在附近吸烟时,画面中的男士就开始咳嗽。这个广告牌会根据外界的变化而呈现不同的反馈。
 
1.2 什么是交互设计?
既然“交互”是交流、互动,那么“交互设计”简单来说,就是设计如何交流如何互动,让交流和互动更加自然更加顺畅。
 
交互设计有广义和狭义之分。从广义上说,人与外物的所有交互都是交互设计的范畴,比如一个人要开门,是用门把手还是直接推,需要钥匙还是指纹,这属于广义的交互设计。而狭义的交互设计,就是特指人与互联网产品或智能产品的交互,在这里主要讨论后者。所以我们之后所说的“产品”主要就是指运行在各种联网终端(手机、电脑、Pad、电视等)上的网站、应用等产品,或者是可联网并具有交互性的智能设备,如智能汽车,智能机器人,智能音响等。
 
另外从职位角度来看,交互设计专门指在互联网产品设计过程中确定了产品功能之后、视觉设计之前这一段,主要包括功能架构的搭建、用户流程的设计和界面元素的排布等方面,众多的交互设计培训班就是在做这部分的培训。比如一个APP的登录注册,打开登录页是开始,登录成功是结束,这个过程如何进行,期间遇到各种问题如何解决,就是职业交互设计的范畴。
万字长文:交互设计基础深度解析(一)
 
 
而从学科角度来看,交互设计是
定义、设计人与人造系统如何关联的设计领域
。学术角度,对于交互会有更多偏研究的内容,而不仅仅像职业交互设计师一样去解决用户需求,还要考虑很多基础性的问题,比如人与环境的关系、人与人造物的关系等。
 
1.3 交互设计的发展历程和价值
交互设计是由IDEO的一位创始人比尔·摩格理吉(Bill Moggridge)在1984年一次设计会议上提出的。后来它逐渐综合了人机交互,人因工程,认知心理学等领域的知识,形成了专门用于解决产品在使用和体验方面问题的学科领域。
 
那么到底为什么会出现交互设计这个领域呢?
 
以前的产品,其实并不需要交互设计,比如较早的洗衣机(下图左),只需要一个开关就足够了,但是后来,有了双桶、半自动、全自动洗衣机,操作越来越复杂,这时就需要交互设计师去研究用户的使用流程与操作方式,
让用户能够与复杂功能和平相处
万字长文:交互设计基础深度解析(一)
 
 
这是实体产品的例子,计算机方面,比如以前的DOS系统(下图左),一个命令对应一种结果,只需要记住就行,也不需要交互设计,后来有了
图形界面(下图右),有了鼠标,操作就变得复杂,就需要交互设计师和界面设计师来定义软件系统。
万字长文:交互设计基础深度解析(一)
 
 
所以说,
交互设计是顺应时代需求而产生的
,当工程师无暇处理人与机器的交流互动问题时,交互设计师便应运而生了。
交互设计的发展历程
交互设计的发展历程
 
在短短30多年的发展中,交互设计已经涉及方方面面,从最初的网页设计,app设计,到智能设备、自然界面设计,甚至是服务体验,都可以通过交互设计的方法找到解决方案。当前交互设计的研究重点已经放在了多模态(多通道)、多媒体交互,虚拟交互以及人机协同等方面。
万字长文:交互设计基础深度解析(一)
 
 
第二章 交互设计学科理论基础
新学科基本不会凭空诞生,一般都是从已有学科发展过渡而来,
往往是当已有学科无法解决新出现的问题时,就会在他们的基础上诞生新的学科
。而交互设计就是在工业设计、人机交互等学科的基础上,借鉴人因工程,认知心理学等领域研究结果,逐渐融合而成的一门交叉学科。下面这幅图基本展示了交互设计的学科结构,但并不全面:
万字长文:交互设计基础深度解析(一)
 
 
这里由于篇幅原因,只简单介绍与交互相关性较大的几个领域:工业设计、人因工程、人机交互与认知心理学。
 
2.1 工业设计
对于工业设计(Industrial Design)大家应该相对比较熟悉,很多大学都开设了工业设计专业。它与交互相关性很高,所以大量的工设毕业的学生都从事了交互设计职位(主要是薪资差别太大哈哈)。
 
从设计对象上来看,交互设计的对象比较偏网站、APP之类的虚拟产品,而工业设计主要针对实体产品,比如电脑、吸尘器、交通工具之类的,所以会更多的考虑产品的外观、材质、内部结构设计等。当然对于电视、音响等操作较为复杂的产品,工业设计师也会考虑很多人与产品交互的问题,比如电视遥控器的设计就是一个经典题目。不过交互设计的对象会更加的集约化、系统化和精细化,所以对于设计分析和方案实现方面,有了更高的要求。
工业设计与交互设计的融合
工业设计与交互设计的融合
 
另外,工业设计与交互设计在很多方面都是相通的。特别是当前市面上很多智能设备,都需要工业设计师和交互设计师紧密配合才能做出即好用又好看的产品。在漫长的工业设计发展史中,涌现的很多设计思考和方法,都可以为交互设计带来养分,比如一直以来都在讨论的“形式与功能”的问题,是形式追随功能还是功能追随形式或是功能形式各自独立,其实跟交互与UI的关系很像,历史总是在不断的重复。
 
2.2 人因工程
人因工程(Ergonomics)又称为人机工程、人体工学等,主要是探讨和应用人类行为、能力本能极限和其它的特性等相关信息来设计器具、机器、设备、系统、任务、工作及其相关所属的周遭环境,以增加生产力、安全性、舒适感和效率,进而提升人类的生活品质。
人因工程对交互设计较大的贡献主要有两个方面:
一是人体测量。
首先是下图所示的各种人体尺寸、活动范围的测量,这些在实体产品中运用很广泛。除了这些测量以外,还有对于记忆极限、注意力极限等的测量,对于交互中的可用性易用性提高都有很高的参考价值。
人因工程中的人体测量
人因工程中的人体测量
 
二是以人为中心的设计观念。
现在各个设计领域都在提倡以人为中心,其实这个理念最早是由人因工程提出的,这种理念使设计师开始关注人的操作过程、人的感受,使得各种产品都有了巨大的进步。
 
2.3 人机交互
很多人把交互设计和人机交互混为一谈,其实这是不同的两个领域。
 
简单说来,
人机交互主要是为交互设计提供技术支持
,比如多点触控、手势交互等,都是人机交互的学科范畴。它研究人与机器之间进行信息传递的理论、技术和设备,既包括技术研究(包括算法、硬件技术等),也包括心理学研究;而
交互设计相对来说,是属于设计中的一个领域,是一种实践方法,
通常为了解决特定使用场景下特定人群的使用过程中,人与机器(或软件、网站)如何更方便简单地「对话」的问题。
 
当然两者也有比较大的交汇,比如人机交互研究中发现的一般规律可以指导交互设计或提供参照,人机交互研究中还包括对交互设计方法论的研究,而交互设计实践中遇到的挑战和难题也能够促发新的人机交互研究。
 
2.4 认知心理学
在介绍交互设计的定义时,我们提到它是“定义、设计人与人造系统如何关联的设计领域”,如何关联当然很重要,但在让他们更好的关联之前,我们需要深入的了解自身。而在交互设计领域,我们不可能专门研究人,所以就可以直接运用相关的研究结果了。在大量的研究人的领域中,认知心理学是跟我们的设计息息相关的学科,因为人与人造系统要很好的关联,必须综合运用人的感知系统。下面从几个最基础的方面进行简单的介绍:
 
2.2.1 感知融合
感知融合是指人对外界的感知与反馈是系统性的过程,这个系统由视觉、听觉、触觉、前厅感觉(运动和重力觉)、整体位置及躯体感觉等等一起组成,它们在反馈机制的作用下互相制约,互相协调,从而使人可以在日常生活中能够感知事物和适应环境变化。所以
在设计过程中,对于视觉、听觉、触觉等感知系统进行综合考虑,不能孤立的看待
人的信息处理工作系统(感知融合)
人的信息处理工作系统(感知融合)
 
 
2.2.2 视觉
人类接收信息80%是通过视觉,而交互设计产品,整个交互过程基本都要紧密依赖于人的视觉系统,所以了解视觉系统就非常有必要了。视觉系统具有主动性、动态建构等特点。视觉认知分为色彩认知、运动认知、形状认知、控件认知等方面。这些认知特点与界面设计都有很大的相关性,比如其中的形状认知包括相似性、接近性、连续性、简洁性和完整性等特点。而且很多设计原则都是从人类视觉特点中来的,在这里不做展开,以后有机会专门做介绍。
 
举个简单的例子:
某平台购物车改版前后对比
某平台购物车改版前后对比
 
上图左边是某购物平台的旧版购物车,右边是新版,他们为什么要做这样的改进呢?我们可以看到左图中元素与元素之间间距都差不多,我们无法较快的区分信息的归属,比如满赠的商品是属于上面的商品还是下面的;而右图中间距进行了调整,可以一眼就能分辨出赠品是属于上面的产品。
 
可能有的同学这时会说:“这不是很基础的UI原则嘛,跟人的视觉有啥关系?”,其实主要就是因为人的视觉有之前提到的接近性的特点,所以才会有这样的原则。什么是接近性呢?请看下面这张图:
视觉接近性原则
视觉接近性原则
 
左边的九个菱形,横向间距小,竖向间距大,所以人眼会认为每一排是一个整体;右边图里,横向间距大,竖向间距小,所以人眼会认为每一列是一个整体。这就是人眼睛看事物做判断的特点,各种设计都需要遵循这些特点。所以去学习那些别人总结出来的设计原则,不如直达根本,了解认知学理论,你也可以创造出自己的设计原则!
 
2.2.3 注意
除了视觉之外,认知学里还有一块非常重要,就是注意。有句话说,
现代互联网之战基本上就是注意力之战
,那打好这场仗,必然得了解人的注意是怎么回事。
 
简单说来,人的注意有三个特点:
一是选择性:
注意是主动选择的过程,也就是说,人要是把注意力集中在某个地方,需要主动做出选择,不像听觉和嗅觉,可以被动接受。所以,在设计过程中,需要通过一些方法,让重点内容成为被注意对象。比如在新消息到达时,通过弹窗、小红点等形式提示用户,就是典型的影响用户注意选择的方法。
二是集中性:
正在集中精力所在的最多只能有一个实体,无论它是一个对象、一个特征、一个记忆还是一个概念。因为这个特点,在设计中就应该避免过多干扰注意的内容,尽量让用户集中注意在重点内容、重点任务上。
三是注意分配:
虽然集中精力所在只能有一个,但整体的注意资源还是可以得到有限度的分配。但也取决于并行活动的性质、复杂程度以及熟练程度。比如左手画圆右手画方,是很难做到的,但是同时走路并看手机,就没有问题,主要就是因为走路这个动作我们非常熟练,只需要分配很少的注意力资源。所以在设计过程中,需要关注用户同时进行的任务,是不是会对注意造成压力,合理进行注意管理。
万字长文:交互设计基础深度解析(一)
 
 
上图是Evernote从2008年到2020年的UI设计变化史,这里我们可以很明显的看出一个趋势,就是简单化和扁平化,那为什么会有这种趋势呢,只是因为人们的审美发生了变化吗,肯定不是这么简单。
 
早年间,苹果手机将屏幕分辨率一下子提升了不少,这让众多手痒的设计师们终于有了发挥余地(以前那种可以看到一个个像素的屏幕实在没啥可做的),所以他们对于图标和界面无所不用其极,描绘的美轮美奂。当然,一开始之所以这样,另外一个原因也是为了沿用现实中的心智模式,让用户可以在屏幕上迅速理解,但是这两者之间的成分,我觉得还是前者更多。然后到了一定的阶段,人们发现这些精美的图标和控件很大程度上吸引了用户的注意力,真正重要的东西反而不容易看到,当然也是物极必反吧,终于在iOS7当中,苹果彻底做了大革新,全部扁平化,提出内容至上的原则,其实就是对于注意力资源的重新考虑。
 
 
2.2.4 记忆
在人的认知系统中,记忆也是一个神奇的东西。
 
人的记忆分为短期记忆和长期记忆。短期记忆也称工作记忆,是为了完成任务而临时储存的信息。工作记忆的容量有限,大约是7±2,即我们能够同时记住的互不相关的东西的数量在5~9之间。此外,工作记忆还非常不稳定,如果我们将注意转移到新事物上,之前工作记忆中的内容就可能遗失。所以在设计中,需要考虑用户的记忆压力,尽量避免过多过长的记忆。
 
 
2.2.5 习惯
《上瘾》中关于习惯是这么说的:“所谓习惯,就是’在情境暗示下产生的无意识行为’,使我们几乎不假思索就做出的举动。如今,我们习以为常的那些产品和服务正在改变我们的一举一动,而这,真是产品设计者的初衷。”
 
产品设计者的初衷一定是要改变用户的习惯吗?到底应该引导用户习惯还是顺从用户习惯呢?其实都不一定,要视情况而定。比如手机设计从物理键盘到触摸屏,大势所趋,需要引导习惯;而触摸屏上键盘的字母排布,就需要顺从用户习惯了。
万字长文:交互设计基础深度解析(一)
 
 
 
 
小结:
第一部分和第二部分介绍了什么是交互设计,以及这门学科出现的原因和发展历程,然后介绍了它的一些学科理论基础,因为篇幅原因,这里只是点到为止。要是想深入了解,还是需要自己深入到相关学科中,不但可以拓宽视野,也能够对交互有更加深入的理解。


作者:觉之设计
链接:https://www.zcool.com.cn/article/ZMTY0MTU0OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档