首页

数据图表:多领域信息可视化的核心工具

ui设计分享达人

 
 
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 
——————
结语

情绪价值在体验设计中的应用

ui设计分享达人

近两年“情绪价值”这个词,相信每个人应该或多或少都有过接触,从商业空间的营销场景到后来渗透到每个领域、每个行业。 
 
先说下这个词的概念,它源于心理学和社会学, 本意为:“它指的是一个人或事物对他人情感状态所产生的积极影响和价值。这种价值不仅仅体现在短暂的愉悦感受上,更包括长期的情绪稳定、心理满足和精神支持。” 
无论是在网红还是在新型电商行业中,许多品牌强调的已经不是单一的产品功能价值,而是增加了强调在消费体验中为消费者带来的快乐、满足、归属感等等一些积极的情绪。这足以说明,无论是品牌、产品还是服务越来越注重为消费者提供情绪价值。 
 
而用户体验设计的本质其实就是让人在使用产品的过程中有非常愉悦的感觉,这一点与“情绪价值”这个词的核心也有点不谋而合。 
 
情绪价值在体验设计中的应用
 
 
相信我们都有这样的疑问:情绪价值在体验设计中重要吗,有什么具体的关系?在设计工作中的情绪价值到底重要吗?情绪价值对产品使用的提升有哪些,具体要怎么做?相信看完下面的内容,你应该会对上面的问题有答案的。 
 
一、情绪价值对用户体验的影响
首先我们可能需要了解情绪价值能给用户带来什么?申晨老师在一次分享会上有提到过情绪价值的三个方向:愉悦感、保障感、专享感。三者由浅入深影响着用户在使用产品时的情绪变化,对应到体验设计中是这样的: 
  •  
    愉悦感→影响用户的满意度
  •  
    保障感→影响用户的容忍度
  •  
    专享感→影响用户的忠诚度
 
提升用户满意度
积极情绪的诱导
 
当产品或服务能够提供情绪价值时,会引发用户的积极情绪。如下图,三种UI会给用户不同的情绪反馈,积极的情绪(右图)往往会让用户驻足停留的更长一些,即便没有需求,也会更愿意去花费一些时间去深入了解,进而带来一些拉新、浏览转化等等数据的提升 
情绪价值在体验设计中的应用
 
 
满足情感需求
 
许多产品和服务通过满足用户的情感需求来提供情绪价值。用户在使用这些产品时,会因为产品所承载的情感因素而感到满足,进而提升对产品体验的满意度。例如: 
  •  
    社交媒体的分享被赞,是一种被关注、被认可的情感需求;
  •  
    直播平台app的互动效果,也是一种渴望互动的情感需求,以此刺激观看者送出礼物。
改善用户对负面体验的容忍度
情绪缓冲作用
 
当产品或服务出现一些小问题时,之前积累的情绪价值可以起到缓冲作用。例如: 
  •  
    在使用某工具产品时,友好的客服系统会给用户比较积极的情绪积累,从而选择包容一些比较小的错误;
  •  
    还有很多错误页面的情感化设计,目的亦是如此。
引导解决问题的积极态度
 
如果用户对产品或服务有情感上的依赖,当遇到问题时,他们会更积极地寻找解决办法,而不是抱怨和放弃。例如: 
  •  
    当产品或服务偶尔出现卡顿现象时,其用户社区氛围很好,用户之间可以互相交流使用经验和解决方案,并且软件开发者也会积极回应用户的问题。这种情绪价值会让用户愿意配合开发者解决软件卡顿问题,而不是直接卸载软件。
 
情绪价值在体验设计中的应用
 
 
增强用户的忠诚度
能够在用户和产品 / 服务之间建立起情感纽带
 
  •  
    以苹果产品为例,苹果公司通过简洁、易用的设计,以及高效的客户服务,为用户提供了良好的情绪体验。用户在使用苹果产品的过程中,会逐渐对品牌产生信任和喜爱。这种情感纽带使得用户在下次购买电子产品时,更有可能继续选择苹果产品,忠诚度较高。
  •  
    一些会员制度也注重通过情绪价值来增强用户忠诚度。例如,酒店的会员计划会为会员提供优先入住、免费升级房间、生日惊喜等服务。这些措施让会员感受到特殊待遇,产生一种被重视的情绪,从而增强了用户对酒店品牌的忠诚度。
推动口碑传播
 
当用户从产品或服务中获得了高情绪价值,他们更愿意向他人推荐。例如: 
  •  
    用户在一家餐厅用餐,餐厅的服务人员热情周到,菜品的呈现方式也很有创意,让用户在享受美食的同时获得了愉悦的情绪体验。这种用户很可能会将这家餐厅推荐给朋友、家人,通过口碑传播为餐厅带来新的顾客。
  •  
    在线游戏如果能为玩家提供丰富的社交互动功能,让玩家在游戏中结交朋友、组队作战,获得团队合作的快乐和成就感等情绪价值,玩家就会积极向周围的人宣传这款游戏,扩大游戏的用户群体。
 
 
二、什么产品适合通过创造情绪价值提升使用体验
 
C端产品:在创造情绪价值的应用策略下,更容易获得显著成果
情绪价值在体验设计中的应用
 
 
 
创造情绪价值这种有效的策略,尤其在面向个人用户产品时,可以更显著提升其使用体验。例如: 
  •  
    社交类产品
    如微信、微博等,通过提供社交互动和情感连接,增强用户的归属感和幸福感 
  •  
    内容类产品
    如视频平台、音乐应用等,通过提供丰富多样的内容,满足用户的情感和娱乐需求 
  •  
    娱乐类产品
    如游戏、盲盒等,通过游戏性和不确定性,激发用户的兴趣和情感投入 
  •  
    交易类产品
    如电商平台、在线购物等,通过营造购物氛围和提供个性化推荐,增加用户的购物愉悦感 
  •  
    工具类产品
    如效率工具、健康管理应用等,通过提供情感化的设计和反馈,提升用户的使用体验和满意度 
 
那么 B 端产品是否同样适用呢?答案无疑是肯定的。随着企业数字化转型的迅速推进,B 端产品在各个行业领域当中得到了广泛的应用,用户体验的重要性越发显著。 
 
 
B端产品:创造情绪价值更有利于提高忠诚度
 
情绪价值在体验设计中的应用
 
 
创造情绪价值的方式
 
  •  
    情感设计:通过设计元素和交互方式激发用户的情感共鸣,增强用户对产品的认同感和忠诚度。例如,通过微动画、个性化推荐和人性化提示,设计师可以为用户创造愉悦的使用体验
  •  
    个性化服务与定制化解决方案:了解客户的独特需求和痛点,提供个性化的建议和支持,帮助客户解决实际问题,带来更多情感上的满足感
  •  
    优化用户体验:注重产品设计和交互体验优化,提供良好的客户服务和多种使用方式,不断优化产品功能,以提升用户的整体使用体验
 
 
创造情绪价值的重要性
 
  •  
    提升用户满意度和忠诚度:通过创造情绪价值,产品可以显著提升用户的满意度和忠诚度,从而促进续费和口碑传播
  •  
    增强产品的市场竞争力:在功能相似的产品中,提供卓越的用户体验可以成为SaaS产品的核心竞争力,帮助企业在市场中脱颖而出
 
 
三、体验设计师如何提升产品的“情绪价值”
我们可以从设计核心的三大阶段(用户研究阶段、设计阶段、测试与优化阶段)入手,来创造与提升产品的情绪价值 
 
用户研究阶段
情绪价值在体验设计中的应用
 
 
 
深入了解用户情感需求
开展定性研究
:通过用户访谈、焦点小组等方式,挖掘用户在使用产品时的情感期望。例如,在设计一款健身APP时,与健身爱好者进行深入访谈,了解他们在健身过程中的情绪变化。可能会发现,用户在完成一次具有挑战性的训练后,希望得到即时的鼓励和成就感,这就为产品设计提供了情感方向。
 
进行定量研究
:利用问卷调查等手段,收集用户对现有产品情绪体验的数据。比如,询问用户在使用某电商平台时,购物流程是否让他们感到焦虑或愉悦,以及在哪些环节有这种情绪。通过数据分析,找出用户情绪的痛点和兴奋点。
 
构建用户画像与情绪场景
 
创建用户画像
根据用户研究的结果,构建详细的用户画像,包括用户的性格、生活方式、价值观等因素,并且添加情绪维度。以一款旅行APP为例,其中一个用户画像可能是“年轻的探险爱好者,性格乐观,追求刺激,在旅行前会充满期待和兴奋”。这样的画像有助于设计师站在用户的角度思考情绪体验。
描绘情绪场景
:针对不同的用户画像,描绘他们使用产品的情绪场景。比如,对于上述旅行APP的用户,在规划行程时,他可能会在APP上查找小众景点,此时的情绪是好奇和兴奋;在旅途中使用导航功能时,希望得到精准的指引,情绪是焦虑或安心,取决于导航的准确性。这些情绪场景为后续设计提供了具体的目标。
 
 
设计阶段
情绪价值在体验设计中的应用
 
 
视觉设计方面
色彩运用
:色彩对情绪有着强烈的影响。例如,暖色调如红色和橙色通常传达活力、热情的情绪,适合用于激发用户兴趣的界面元素,如促销活动页面;冷色调如蓝色和绿色则给人冷静、可靠的感觉,可用于数据展示或需要用户集中注意力的区域。在设计金融产品界面时,使用蓝色为主色调可以让用户感到安全和信任。
图形设计
:简洁、易懂的图形能够快速传达信息并引发积极情绪。在图标设计上,要符合用户的认知习惯。例如,在社交产品中,使用微笑的表情图标表示点赞或喜欢,用户很容易理解并产生愉悦的情绪。同时,利用有趣的插画或动画可以增加产品的趣味性。如在儿童教育产品中,用生动的动画来讲解知识,能够吸引孩子的注意力并让他们感到快乐。
排版布局
:合理的排版可以提升用户的阅读体验和情绪。清晰的标题和正文层次,适当的文字间距和行高,能让用户感到舒适。在新闻类产品中,采用模块化的排版,将不同的新闻内容清晰划分,使用户在浏览时不会感到混乱,从而减少烦躁情绪。
 
交互设计方面
反馈机制设计
:为用户的操作提供及时、明确的反馈可以提升情绪价值。例如,当用户点击一个按钮时,按钮会有短暂的变色或动画效果,让用户知道操作已被接收。在加载页面时,使用有趣的加载动画代替单调的进度条,如旋转的小图标或者跳动的小球,能够缓解用户等待的焦虑情绪。
操作流程优化
:简化复杂的操作流程,减少用户的认知负担和操作失误。在移动支付产品中,尽量减少支付步骤,让用户能够快速完成支付,避免因流程繁琐而产生烦躁情绪。同时,可以增加一些引导性的交互,如新手引导教程,帮助用户轻松上手产品,提升用户的自信心和满意度。
个性化与定制化设计
:根据用户的喜好和行为习惯,提供个性化的交互体验。例如,音乐产品可以根据用户的收听历史推荐相似风格的歌曲,用户会因为产品的贴心而感到愉悦。并且允许用户对界面布局、主题等进行定制,让用户有更多的掌控感,满足他们的自我表达需求。
 
内容设计方面
文案撰写
:使用友好、易懂的文案可以拉近与用户的距离。在产品提示信息中,避免使用生硬的专业术语,而采用亲切的语气。例如,在一款智能家居产品中,当设备连接成功时,显示“哇,您已经成功连接啦,现在就可以享受智能生活啦”,这样的文案会让用户感到轻松和愉快。同时,文案的风格要与产品的定位和目标用户相匹配。
内容策略
:提供有价值、有趣的内容可以提升情绪价值。在知识付费产品中,确保课程内容不仅有深度,而且讲解方式生动有趣。对于内容社区产品,鼓励用户分享积极向上的内容,如生活中的小美好、励志故事等,营造一个充满正能量的社区氛围,让用户在浏览内容时感到愉悦和鼓舞。
 
 
测试与优化阶段
情绪价值在体验设计中的应用
 
 
可用性测试与情绪评估
进行可用性测试
:在产品原型阶段,邀请用户进行可用性测试,观察用户的操作行为和情绪反应。例如,在测试一款办公软件的新功能时,注意用户是否能够顺利使用,以及在使用过程中是否出现困惑、烦躁等情绪。可以通过用户的面部表情、言语反馈等方式收集情绪信息。
情绪评估工具
:利用情绪评估工具,如情感化可用性量表(UEQ)等,对用户的情绪体验进行量化评估。UEQ可以测量用户对产品的吸引力、易用性、可靠性等维度的情绪感受,通过数据分析,找出需要优化的情绪体验点。
 
根据反馈优化设计
迭代设计
:根据用户测试的反馈,对产品的视觉、交互和内容设计进行迭代优化。例如,如果用户在测试中表示某个界面元素的颜色让人感到刺眼,设计师可以调整颜色方案。如果用户对某个操作流程不理解,就优化操作引导。
持续关注情绪反馈
:产品上线后,持续收集用户反馈,关注用户情绪价值的变化。随着用户需求的变化和市场环境的改变,不断调整产品设计,以保持和提升产品的情绪价值。例如,在节日期间,对产品界面进行节日主题的装饰,为用户提供新鲜感和节日氛围带来的愉悦情绪。
 
四、情绪价值是否具备量化条件
可以通过以下方法对其进行量化计算
 
情感化可用性量表
情绪价值在体验设计中的应用
 
 
原理:UEQ是一种广泛用于量化用户对产品情绪体验的工具。它通过一系列的问卷题目来测量用户对于产品的吸引力、易用性、效率、可靠性和刺激度等多个维度的感受。例如,在吸引力维度上,会询问用户对于产品外观、风格是否感到喜欢;在易用性维度,会涉及用户操作产品时是否感到轻松、方便等问题。 
 
应用:在一款产品/功能的用户体验测试中,使用UEQ可以收集用户对该应用在不同维度的情绪评价。通过对大量用户反馈的数据统计,得出该应用在各个维度的量化得分,比如吸引力维度得分较高,说明产品在视觉等方面能引发用户积极情绪,而如果易用性维度得分较低,则可能表示产品的操作流程等会让用户产生负面情绪。 
 
 
净推荐值(NPS)与情绪关联量化
 
情绪价值在体验设计中的应用
 
 
 
原理:净推荐值是通过询问用户“您是否愿意将这个产品推荐给其他人”来衡量用户忠诚度。虽然NPS本身不是直接对情绪价值的量化,但它与用户的情绪体验密切相关。当用户体验到较高的情绪价值,如愉悦、满足等,他们更有可能成为推荐者,NPS得分就会升高。 
 
应用:通过定期收集用户的NPS数据,并且结合用户对功能使用体验的详细反馈(包括对产品、服务、售后等环节的情绪感受),可以间接量化情绪价值对用户忠诚度的影响。例如,如果发现NPS得分高的用户在评价中经常提及购物过程中的快乐情绪和优质服务体验,就可以推断出情绪价值在提升用户忠诚度方面起到了积极作用。 
 
 
 
  1.  
    生理指标测量
 
情绪价值在体验设计中的应用
 
 
原理:情绪会引发身体的生理反应,如心率、皮肤电导率、瞳孔大小等变化。通过专业的设备可以测量这些生理指标,以此来推断用户的情绪状态。例如,当用户感到兴奋或紧张时,心率会加快;当他们感到好奇或专注时,瞳孔可能会放大。 
应用:在用户体验实验室中,测试用户在使用虚拟现实(VR)游戏的情绪体验。通过佩戴可以监测心率和皮肤电导率的设备,观察用户在游戏不同场景下的生理指标变化。如果在某个刺激的战斗场景中,用户的心率明显上升,皮肤电导率也增加,就可以推断用户处于兴奋或者紧张的情绪状态,从而量化游戏场景对用户情绪的激发程度。 
 
虽然有量化方法,但也只有部分可被量化,完全精准量化还存在一定的挑战 
 
 
难以完全量化的原因
情绪的复杂性和主观性
个体差异:不同用户对同一产品或体验的情绪反应存在很大差异。例如,对于一款具有挑战性的游戏关卡,一些玩家可能会因为克服困难而感到兴奋和满足,而另一些玩家可能会因为觉得太难而产生沮丧情绪。这种个体差异使得很难用统一的标准来量化情绪价值。
文化背景影响:文化因素也会对情绪价值的感受产生影响。在某些文化中,含蓄的情感表达是常态,而在另一些文化中,人们可能更倾向于直接的情感反应。比如,在日本文化中,用户可能对产品的精致、细腻的设计有更深刻的情感共鸣,而西方文化中的用户可能更看重产品的创新性和个性化带来的情绪体验。
 
情绪与情境的动态变化
使用场景的多样性:用户在不同的使用场景下对产品的情绪价值感受不同。例如,一个音乐播放软件,用户在运动场景下可能更关注节奏强烈的音乐带来的激励情绪,而在睡前场景下则更看重舒缓音乐营造的放松情绪。这种随场景变化的情绪体验难以用固定的量化指标来衡量。
 
时间因素:用户对产品的情绪体验也会随着时间而变化。最初接触产品时的新鲜感可能会带来积极情绪,但随着时间推移,如果产品缺乏更新或出现问题,情绪可能会转变为消极。而且情绪的产生和消退过程很难精确量化,例如很难确定用户从感到满意到产生厌烦的具体时间节点。
虽然难以量化,但情绪价值在实际应用中发挥的作用还是很大的。 
 
 
结束语
在体验设计的广阔领域中,情绪价值犹如一股无形的力量,悄然影响着用户与产品之间的每一次互动。它不仅仅是愉悦感、保障感和专享感的简单叠加,更是用户在深层情感层面与品牌建立起的稳固纽带。通过精心设计的用户体验,我们能够触动用户的情感,激发他们的共鸣,从而在用户心中留下深刻而持久的印记。


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

以用户为中心的交互设计思维

ui设计分享达人

聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维


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

产品设计如何利用心理学

ui设计分享达人

产品设计的成功除了依赖设计方案和技术实现,还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的,但其实用户行为经常是非理性,会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为,优化产品体验,提高用户的粘性、留存率和转化率,从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


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

“好的设计组件”在搜索设计场景中的定义

ui设计分享达人

 
 
关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整,如何高效赋能业务设计交付的相关内容,但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务,每一个微小的设计细节都有可能影响各个业务的数据指标,一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范,完成合规的设计,从这个角度而言它应该比较
「好懂」
 
而作为服务于整个设计团队的公用设计组件库,面对每月数以万计的调用次数,它必须保障最基本的易用性,应该非常
「好用」
 
同时,面对频繁迭代,“好的设计组件”还需要保持最快的更新速度,为各个横向团队提供正确的样式,从这个角度来说它还要
「好维护」
 
因此,
「好懂、好用、好维护」
是搜索设计语境下,对一个“好的设计组件”的定义。
 
关于设计组件库,我们有一些新思考
 
 
 
接下来,我们将从这三个「好」入手,分享搜索设计组件库在升级过程中的一些思考,希望能和大家共同探讨。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
“万丈高楼平地起”,我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先,在搭建组件时,我们可以考虑采用
多层嵌套
的方式,即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作,甚至还能在解绑组件时,通过选中内部的子组件图层进行解绑,大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下,我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样,能够支持大部分的状态切换,而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示),以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步:
场景收集和分析、搭建基本变体组、拓展高阶变体组
 
我们将通过视频组件搭建的生动案例,具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库,使得组件本身既足够灵活,又能起到足够的约束作用。
 
关于设计组件库,我们有一些新思考
 
 
 
在着手搭建某类组件时,我们首先通过规范确认和场景遍历,广泛收集各类变体。随后,从我们能想到的所有维度出发,对这些变体进行细致定义。这样,我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等,而第一行则罗列出各种维度,如宽度、比例等。通过这种方法,我们可以将原本零散、杂乱的组件变体描述,系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库,我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体,这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致,常见特性则涵盖了最常见的分类性质,如宽度、高度、数量和优先级等,而业务特性则与具体业务紧密相关。
 
在搭建组件时,我们可以遵循
「共性-常见特性-业务特性」
顺序,这样的顺序有助于降低理解成本,因为最符合心智的分类被置于外层,同时底层的组件又保持了足够的灵活性,便于切换各种变量。对于业务特性,我们可以根据实际情况灵活处理,既可以将其作为基本组件的延展,也可以不将其纳入组件范畴。
 
以视频组件为例,我们从表格中获取的信息如下:
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择;
  •  
    播放状态是所有变体的共有性质;
  •  
    自动播放情况与业务相关,但不一定需要在组件库中呈现;
  •  
    高阶组件仅涉及少部分尺寸的组件,应在完成基本组件搭建后再进行。
 
据此,我们可以轻松梳理出视频组件搭建流程的优先级:
 
  1.  
    播放状态作为共性,应首先搭建;
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择,应紧随其后;
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是,“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则,我们将其插入到搭建播放状态之前。因此,视频组件的最终搭建流程为:
 
  1.  
    封面槽位;
  2.  
    播放状态;
  3.  
    基本组件尺寸和组合;
  4.  
    高阶组件。
 
关于设计组件库,我们有一些新思考
 
 
 
完成对视频组件搭建的分析,我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件,再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知,但仍需格外注意,如配置项的设置要力求合理,也可以融入设计规范和使用规范,同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项,我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程,一个达到及格线的视频组件就诞生了。据统计,优化后每次调用视频组件将节省至少10步的点击操作!
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了一个基本组件的搭建后,我们可以转换视角,从使用的角度来审视并检查这个组件。
 
我们期望,从插入组件变体、切换组件配置,再到最后的解绑组件,整个流程都能纵享丝滑且稳定可靠,确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库,我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件,据观察,通常有三种方式,①在左侧的资产面板(Assets)中直接找到对应组件并插入;②通过查阅设计规范,锁定所需的变体后复制粘贴;③选中一个不需要的组件,通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显,在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库,我们有一些新思考
 
 
 
为了提升搜索精度,我们可以从组件命名入手,采用中、英、数字结合的方式,实现模糊匹配;也可以在发布时隐藏不希望被调用的组件,以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的,我们可以添加“Preferred”子组件,这样在切换时会优先展示这些子组件,这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师,我们增加了更多实际使用的正误案例,这些案例直观展示了组件变体的正确选择和使用方式,进一步降低了规范的理解成本,有效辅助设计决策。同时,我们专门维护了一个固定区域,用于平铺展示所有组件变体。为了确保能够轻松点选,我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体,从而快速选择所需的组件。
 
关于设计组件库,我们有一些新思考
 
 
 
在组件配置阶段,有三项注意点能让组件更加易用,即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库,我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯,我们应避免使用过于复杂的分组方式。相反,应更注重组件的样式展示,并尽量简化组件的层级结构。这样,设计师在使用时能够更直观地看到组件的外观,而无需深入复杂的层级去查找。
 
另外值得注意的是,Figma会默认用组件集合中最左上角的组件生成预览样式,因此应当把视觉上最有代表性的变体放在左上角,这个效果在切换变体(Swap instance)时很重要,因为目前在该面板中没法查看组件细节,只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库,我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究,业界有组件库为了实现C2D2C,从源头上将设计组件和前端组件的配置项打平,这是不错的思路,但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境,我们还是选择了从「规范理解」角度去设置组件的配置项,将所有允许自定义的配置尽可能外露,并清晰地说明修改限制,如字数限定、选项个数等,这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率,建议对选项和选项之间,以及外层的不同配置项,都按照一定的逻辑顺序进行排序。
 
关于设计组件库,我们有一些新思考
 
 
 
最后一点,我们称之为
“贴心地保存修改”
机制,这个针对的是文字修改的场景。
 
在实际操作中,使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时,已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要,它能够记忆并保存修改过的文字内容,从而免于重复输入。
 
还有一些情况是,某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值),用户切换后就会发现组件完全变了,只能撤回。为了避免这类情况,建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了组件的搭建和检查,接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开,一是依托中台的日常数据监控进行维护,二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设,在本文中我们不做更多展开,重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径:View libraries-Analytics),看板中展示了各个组件的调用数和解绑数数据,这些数据不直接反映组件的优劣,但如果我们观测到某个组件解绑率偏高,我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库,我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享,包括搜索业务对于“好的设计组件”的诉求,以及一些搭建和优化组件的实用思路,核心是探讨如何从组件库建设的角度入手,成功助力团队提升设计资产消费效率。
 
关于设计组件库,我们有一些新思考
 
 
 
当前我们已经完成设计资产工程化的前序环节,我们对设计资产的升级和探索并没有结束,未来我们将持续探索设计系统工具化的形态、与AI大模型结合的机会,通过丰富消费途径,实现在业务交付的不同阶段下全方位提效。这部分内容后续有机会也将会和大家见面,请大家期待!
 
感谢阅读,以上内容均由百度MEUX团队原创设计,以及百度MEUX版权所有,转载请注明出处,违者必究,谢谢您的合作。申请转载授权后台回复【转载】。


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

B端基础 | 弹窗设计基础知识

天宇

建筑设计师尤哈尼·帕拉斯玛说、简约并非简单,它是通过深思熟虑后对事物本质的准确把握。知其然、知其所以然。这次文章会尽量简洁一点。
 
奔跑的日子、总是希望优秀的你和我一起同行。让我们一起在艺术的环境里生菌、知识的海洋里狗刨~
 
B端基础 | 弹窗设计基础知识
 
 
第一部分 | 弹窗基础知识
如果你只是想了解一下弹窗的基础知识,那么看这部分就够了。只需3分钟无痛、来去自如不影响上班哦。
弹窗定义;弹窗来历;弹窗拆分;弹窗分类;弹窗尺寸;
B端基础 | 弹窗设计基础知识
 
 
1、弹窗定义
弹窗是用户和系统交互信息的容器
。(在网上搜了一些文章看,他们的弹窗定义写的基本都是各写各的)我的这个定义绝对靠谱。站的维度高,从人机交互工程出发。这定义没错的妥妥的。说出去基本不会有人反驳你(如果有人敢反驳你把我的名字告诉他,反正我他也不认识我哈哈哈)
 
2、弹窗来历
弹窗最早的起源可以追溯至上世纪90年代。当时,互联网广告的投放形式主要是将广告嵌入在页面内容中,但这种方式存在一些问题。广告商担心消费者在浏览负面内容时,会将广告与负面信息联系在一起,从而对品牌造成不利影响。因此,网页托管网站trippod.com利用网页脚本程序,发明了一种在新开窗口发布广告的方法,这就是网络弹窗的起源。
B端基础 | 弹窗设计基础知识
 
 
3、弹窗拆分
整体的去分析、在大部分的弹窗类型里都会包括
关闭、内容区、模态层
(非模态类别的没有个元素)
B端基础 | 弹窗设计基础知识
 
 
3.1、模态层
模态层通常是搁在原页面和弹窗之间的半透明黑色。其主要的作用是1、降低用户在操作中被强打断的不适和跳出当前页面的恐慌感。让我们的用户更加的聚焦弹窗内容。
B端基础 | 弹窗设计基础知识
 
 
我个人在设计时模态层基本都是50%的纯黑,但并不是一定要用50%的纯黑,要结合自己的平台业务、设计风格等方面去制定。偷偷的告诉你这个模态层加入一点微微的色彩倾向在视觉上往往会更好一点。
3.2、关闭
弹窗的关闭是用户退弹窗的重要途径、一般都会在弹窗内容右上角。弹窗关闭按钮也有在弹窗范围外的。我们要保证弹窗关闭的清晰明确,来方便用户操作。
在弹窗中、关闭弹窗的途径除了叉掉。还可能有其他的。如取消按钮。
3.3、内容区
内容区的内容是根据弹窗类型的不同,内容就会有所不同。什么都可能有、图标、确认信息、选择框、输入框。只要是页面上能出现的都可能会出现在弹窗的内容区域。
B端基础 | 弹窗设计基础知识
 
 
4、弹窗分类
弹窗的分类从交互形式差的差异。我们可以将其分为
模态类和非模态类
。这两个大类就比较好区分,看看有没有那层模就行了。常见弹窗类型表单弹窗、抽屉、警告提示、全局提示、通知提示、气泡确认等。
B端基础 | 弹窗设计基础知识
 
 
4.1、模态类
模态是目前我们比较常见的类型、模态类弹窗打断用户的操作行为,用户必须对其进行操作才能解散弹窗,否则不能进行其他操作。模态类最常见的就是、
表单弹窗、确认弹窗
。当然还有其他的文件选择、信息展示、等等。
B端基础 | 弹窗设计基础知识
 
 
4.1.1、表单弹窗
这弹窗在B端设计里是最最最常见的一种弹窗。虽然我们现在的系统大部分是很智能的。但是复杂的业务就意味着你会和系统产生大量的交互信息的交换。所以这表单可太常见了哪哪都是他。(烦死个人)不过在你制定好一套规使用规范后。基本这样的弹窗是不太需要设计介入的,产品和FE两人一对使用模版就上了。
4.1.2、确认弹窗
这种弹窗就比较好理解了。承载较为紧急的信息,让用户快速处理;如:用户未保存,就点击离开当前页面,通过对话框让用户做出选择。在执行一个重要信息的删除时,通过二次询问引起用户的注意,让用户再次做判断;这类弹窗;
4.1.3、优点/缺点
优点:
强不会让用户忽略或跳过,确保信息的交互响应;引导用户操作;增加用户的参与度,可以提升用户的活跃度和参与度。
缺点:
01、会中断用户的操作流程,打断用户的思路或行为。
02、可能会影响用户体验,因为用户需要等待关闭弹窗后才能继续其他操作。如果弹窗内容过多或过于复杂,用户可能会感到困惑或不知所措。
03、如果过度使用模态类弹窗,例如频繁弹出广告或无意义的信息提示,用户可能会对其产生反感甚至抵制使用相关软件或平台。
4.2、非模态
可以不打断父应用程序,无需停止进度,用户仍可以对父级内容进行交互。大部分应用于信息的反馈和提示。常见的非模态类弹窗大概有、警告提示、全局提示、通知弹窗、气泡确认框;
B端基础 | 弹窗设计基础知识
 
 
4.2.1非模态优点/缺点
优点:
不打断操作流程;不会干扰用户操作用户体验更好;常用于轻量级的信息或提示。
缺点:
可能会被忽略,导致信息传递不畅;不适合展示重要信息;形式通常比较单一,不能满足复杂的展示需求
4.3、其他
林子大了什么鸟儿都会有,一定会有我没有接触到的前沿交互方式。所以这个其他留给未来更优秀的我们去发现。
5、弹窗尺寸
弹窗的尺寸和电脑屏幕分辨率是有关系的。主流的分辨率1920*1080像素。其他的还有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在设计界面是一般用的是1440*900的设计尺寸。在做弹窗的时候已经不考虑1366*768分辨率以下的屏幕了。多以弹窗的安全高度要小于600px
弹窗的宽度还是要根据自己业务需求去定义的。比如我们的业务最宽的弹窗1280像素。像站酷的查看作品他是整屏的宽度。
模特还怪好看的
模特还怪好看的
 
我在我们平台定义的表单弹窗宽度虽然很不严谨、好像也没有什么理论支撑。但是确一直再用。尺寸分别为、400、600、800、1000、1280。之后还是要细化的。这样的定义弹窗尺寸导致的结果是,开发还原想过不是太好。
B端基础 | 弹窗设计基础知识
 
 
第二部分 |弹窗2.0项目里
承载内容、为什么会有这么多的弹窗类型。问题不在于弹窗,而在于合适的承载内容和交互类型。
B端基础 | 弹窗设计基础知识
 
 
1、弹窗、抽屉、界面
在项目里我们应该怎么去选择这三种内容呈现方式呢。如果你只是设计师大部分时间你也不用选。你只有建议的权利没有决定的权利。如果产品原型是弹窗、你给做了个抽屉。你可以从下面几方面去找支撑点去和产品撕逼、干翻他的原型用你的效果图。
AI的提高画面质量还是有待提高呀
AI的提高画面质量还是有待提高呀
 
1.1、内容
弹窗和抽屉或界面他们承载的内容量是不一样的。所以在选择用那种交互方式时可以从我们业务需要展示的内容量来考虑。简单的确认或通知适合用弹窗、需要展示大量内容或进行复杂的功能时就适合用抽屉或者界面了。
1.2、体验
我们可以从用户体验方面出发、如页面的空间感、考虑空间大小和布局。操作流程上、考虑用户在界面上被打断进程的成本。一致性、确保与其他业务模块交互方式保持一致,为用户提供一致的体验。
1.3、效率
考虑到用户的使用成本、B端设计中效率的提升优先率老高了。考虑系统的加载速度、确保我们使用的交互方式不会影响整体的性能和体验。
 
本身弹窗、抽屉或者界面的使用选择是需要很综合考虑的。总的来说核心是提升效率、保证我们用户好的体验。
2、弹窗交互优缺点
当涉及到B端弹窗的交互方式时,有以下几点核心优缺点:
B端基础 | 弹窗设计基础知识
 
 
2.1、优点
提供及时反馈
弹窗可以快速向用户显示重要的信息或请求,使用户能够即时了解系统的状态或需要执行的操作。
简化操作流程
对于某些复杂的操作或任务,弹窗可以提供直观的界面和简化的步骤,使用户更容易完成目标。
吸引用户注意力
通过使用弹窗,可以确保用户在操作过程中不会被其他界面元素分散注意力,从而更专注于当前的任务。
提供额外的信息或功能
弹窗可以包含更多的详细信息或额外的功能选项,使用户能够更深入地了解或操作某个特定内容。
2.2、缺点
干扰用户操作
过度或不合适的弹窗可能会干扰用户的正常操作,打断用户的工作流程,影响用户体验。
误导用户
不清晰或误导性的弹窗信息可能会使用户产生困惑或误解,导致错误的操作或决策。
影响性能
弹窗的弹出和关闭可能会增加系统的负担,影响性能和响应速度。
不符合用户习惯
对于习惯于传统界面的用户来说,过于复杂或与众不同的弹窗交互方式可能会造成使用上的困扰和不适应。
3、我的一些设计
我们项目里把升级弹窗做成了模版、广告弹窗也是模版。当然像二次确认这样的弹窗是组件,上货看东西。
B端基础 | 弹窗设计基础知识
 
 
这个是系统的一个展示弹窗、和一个从弹窗形式优化到抽屉的模块界面。
B端基础 | 弹窗设计基础知识
 
 
这个就是一个在线聊天界面。是从SaaS里跳转新建页面。
大概是想了想、平时做的项目确实比较碎、最近也没做整理盒复盘。所以界面的展示就不放太多了。而且有的信息页模糊了。不是我不信家人们。是我不信自己、朦胧也是一种美吧。哈哈哈
 
B端基础 | 弹窗设计基础知识
 
 
最后
我大学设计史陈老师告诫过我们。她说同学们,我其实不怕你们眼高手低。我怕的是你们眼都不高。和优秀的人一起前行、希望和优秀的你们一起去经历设计、生活、工作的美好。
期待你的加入、我们的大伐木累。我可以作品集指导反正闲着也没事不要钱。我和群里的小伙伴都是多年一线设计师来自于天南海北,不乏有互联网大厂设计师。再次
期待你的加入...
 
参考
优设网:4个方面层层递进,分析如何设计B端产品的弹窗
知乎:B端设计指南04-弹窗
知乎:运营弹窗的设计要点拆解
知乎:浅谈B端产品弹窗一级设计方法
人人都是产品经理:WEB端弹框掌握着几天就够了
 


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

设计的两面性:理性决策与感性表达

天宇

引言
设计应该是感性的还是理性的?设计是感性重要还是理性重要?此类问题一经出现便会引起争议无数,每个人对此都有自己的见解与理由,还有些人主张“理性与感性需要平衡”“既要理性也要感性”,此类观点看似正确,却缺乏任何实质性的指导价值。
实际上,很多人都没注意到问题本身存在的多义性。究竟什么是“设计”?有些人认为是设计决策的过程,而有的人则认为是最终产出的设计作品。大多时候,理性和感性两种观点看似针锋相对,实际上是站在设计的不同层面进行讨论。
设计的两面性:理性决策与感性表达
 
 
 
01|设计决策
从设计决策的角度来看,感性设计指的是设计师在设计过程中主要依靠个人情绪或情感进行创作。许多人误认为,只要在设计时能与用户产生共情,理解其情绪波动,并将这些喜怒哀乐、喜好厌恶融入设计作品,就算是感性设计了。然而,共情并不等同于感性。共情是一种能力,理解他人处境与情感,并善于换位思考。而感性则是自己对外界事物产生的直接感受和情绪反应,强调的是个人视角。
在艺术领域,感性占据主导地位,但设计并非艺术。设计的主要目标是解决问题和满足特定需求,而艺术更多地关注自我表达和情绪传递。设计始终受到客户需求、商业目标、市场趋势和技术可行性等一系列的限制与约束。由于这些条件的存在,直觉与天赋这些感性力量只能得到极其有限的发挥。这也是设计与艺术的显著区别。
设计的两面性:理性决策与感性表达
 
 
站在感性“对立面”的理性,将设计视为一项工程或科学,力求流程化和系统化,讲究方法论,注重各方面的调研,一切动作因问题存在而起,以问题解决而终
。甚至在实际场景中持续观察作品表现,以期得出可复用的设计模型或定律,为后人更加高效地解决类似问题提供帮助。
所以,从解决问题的本质属性出发,理性应该才是设计的底色。数据驱动、方法论支撑、可用性测试、竞品分析、用户研究等都属于理性思维的具象化体现。
由于大部分设计师的出身多以艺术打底,所以一旦设计与艺术的界限在心中变得模糊,会习惯性地
将产品看作自己的"作品",而非用户的"解决方案"
。如此一来,当面对来自各个方向的边界与不确定性,本能的反应就不是思考了,而是抵触,尤其是“完美”的方案已在脑中形成,如果突如其来的新要求打乱了这一切,哪怕假以用户之名也要选择怼回去,并不断美化、合理化自己的设计理念。对设计师来说,这是一种自私、不负责任和缺乏职业素养的表现。
设计的两面性:理性决策与感性表达
 
 
接下来,想象一下你的手中有一把枪,准备射击某个目标。你的第一个动作是什么?大概率是瞄准。因为大家都知道,射击前通过瞄准镜或者准星,先对目标位置进行瞄准校正,射击时才能提高命中率,这也正是理性对于设计的重要性所在。
理性在设计中的作用类似于瞄准动作,它帮助我们在设计过程中做出科学的决策,确保设计方案的准确性和可执行性。未经理性思考的设计,就像是不瞄准就立即开枪,其结果往往难以预测。当然也可能会击中目标,这基本上取决于两个因素:
  1.  
    目标远近:
    近处的目标,即使不瞄准,也很容易击中;但对于远处的目标,命中率则必然大幅下降。我们可以把目标远近理解为设计需求的难易程度,对于简单需求,不用过多的理性分析,直接设计也能完成任务,但面对复杂的设计项目,如果不进行充分的理性分析上手就画,大概率就要偏离产品目标了。
  2.  
    个人经验:
    经过反复练习,可以练就不瞄准也能远射的本领,随着经验积累还能不断提升距离值;在经验不足的情况下,还不瞄准,就只能选择一些近距离的射击目标了。设计也是这样,对于某类产品的设计经验较多,不用太多理性的分析决策,也能达成设计目标;缺乏经验时,还凭借直觉草率地进行设计,再简单的项目也可能会搞砸。
设计的两面性:理性决策与感性表达
 
 
所以,没有理性支撑而完全依赖直觉经验的设计,一个致命性的问题就是
不稳定
!日常工作中,设计师的有效输出和稳定输出至关重要。
 
02|设计表达
假设经过瞄准后的射击都能顺利击中目标,那么接下来要关注的是什么呢?子弹的冲击力和杀伤力!这里的子弹就是我们最终输出的设计作品。在这一环节,理性设计指的是方案完全围绕产品功能来呈现,追求效率与极简认知,较少运用装饰性设计元素,即使使用,也大多兼具辅助内容理解的功能性目的。
而感性设计,我并不太愿意使用“感性”这一措辞,正如在上一段中的定义,感性强调的是个人出发的情绪表达。其实,“情感化设计”才更负荷大家口中常说的“感性设计”所想表达的含义,相比“理性”的设计作品,情感化设计更具有“一击必杀”的效果。
在满足基础功能需求的基础之上,通过色彩、排版、图像、动画等元素给予用户充分的情感体验,也可以利用叙事、对话、情景、微交互等策略引发共鸣。丰富多样的情感化设计策略,让用户与产品之间更容易建立情感连接。
设计的两面性:理性决策与感性表达
 
 
在设计决策的阶段,理性确保了我们更高的命中概率,而情感的注入让我们的设计表达具有深入人心的穿透力和影响力。典型设计案例如Apple、Tesla等产品设计无一不是理性决策和感性表达的充分结合。因此,回到开篇提出的问题,设计应该是感性的还是理性的?我的回答是:
作为设计师,要
坚持理性的设计决策
,同时
追求感性的设计表达
设计的两面性:理性决策与感性表达
 
 
 
03|两者关系
很多人认为,不同的设计领域对理性和感性的要求有所不同,在B端产品中,理性占据主导地位,而C端产品更强调感性。从设计最终所呈现的效果来看,这种观点在一定程度上是合理的。B端产品多用于生产场景,追求的是可用性,是克制和效率;C端产品面向普通大众的各种生活场景,因此关注体验的愉悦感受。两者往往在风格调性上差异化很大。
但是,对于设计决策来说,无论C端、B端还是G端,都属于设计项目,都要进行理性的需求分析和策略制定,即使某些产品类型最终选择了偏感性的或情感化的表达手法,也是
基于理性决策后的一种选择
,是实现目标的一种手段。
所以我想说的是,理性和感性两者既不是对立关系,也不是并列关系,而是先后关系或嵌套关系:
理性是设计的基础和第一步,感性则是在理性之上的选择和展开
 
最后的话
作为设计师,对于设计中的理性与感性之问,不应停留在非此即彼或既要也要的简单认知里,任何深入的思考都是有意义的。在这个存在分歧的问题上,希望我的观点可以为你提供一点点启发,也希望各位设计师既能够通过理性的分析制定出有效的设计策略,又能够通过感性的表达手法创造出动人的设计作品,不断提升自身的设计价值,与产品实现共赢


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

动效让这些设计更惊艳

天宇

微动效在产品设计中的运用已经非常普及了,无论是在图标还是界面场景中,都运用得很普遍。通过动效的辅助不仅可以提升设计情感化,也能解决更为复杂的交互场景,让设计更惊艳。
 
最近在体验一些产品的过程中,黑马哥也发现了几个借助动效表达的设计方案,效果十分的惊艳,分享出来和大家一起学习一下。
动效让这些设计更惊艳
 
 
 
 
目录
一、3D 动效呈现会员等级
二、情感化 IP 提升搜索关注度
三、结合场景的情感化动效
四、3D 空间感的 Banner 设计
五、通过动效引导用户操作
六、微动效引导 VIP 续费
七、动态还原实时天气
八、动态 IP 引导按钮设计
九、微动效赋予品牌活力
 
 
 
一、3D 动效呈现会员等级
会员中心通常会通过 3D 图标来助力会员等级设计,除了静态的表达也会通过动效和新颖的交互形式呈现,以此提高会员中心的视觉表现力。
 
最近在体验腾讯视频 APP 时,会员专区在表现用户会员等级的设计中,没有使用传统的徽章形式,而是以 3D 数字结合动效的形式表达。3D 动效的设计使得会员等级区别于常规形式,更有吸引力。 
动效让这些设计更惊艳
 
 
 
 
二、情感化 IP 提升搜索关注度
IP 形象是成就品牌的关键因素之一,被广泛运用到产品感官体验的设计中,带来的情感化共勉也是显而易见的。
 
在使用悟空浏览器 APP 时,启动产品进入首页后搜索框上方出现悟空的 IP 形象,悟空呈现出左右环顾、上下打量,最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度,也使得产品设计更具情感化。
动效让这些设计更惊艳
 
 
 
 
三、结合场景的情感化动效
根据不同的业务场景进行设计表达,可以更好的服务目标用户,而情感化的设计提升,可以拉近产品与用户之间的亲和力。
 
为了降低用户等餐过程中出现的负面情绪,饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达。无论是快餐还是冷饮等,都针对性地设计了微动效的元素,以此来表现当前状态。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
四、3D 空间感的 Banner 设计
通过突出设计、交互、布局结构等的创意性,可以使得 Banner 具备更强的差异化,以此来突出 Banner 的存在感。
 
腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案,比如之前体验到一个结合 3D 空间感营造的设计案例,就非常有吸引力。通过动态过度到立体空间,再恢复到默认形式,这个动态的过程演变就能让用户过目不忘。
动效让这些设计更惊艳
 
 
 
 
五、通过动效引导用户操作
针对一些使用频次不高或者过于隐藏的功能,为了提高用户的操作概率,会通过一些特殊的设计表达来提升用户的关注度,引导用户进行相关操作。
 
比如麦当劳 APP 首页中,为了吸引用户下拉进入二层楼,通过动效的形式设计了一个摇摆的铃铛,以此来吸引用户的注意力。用户看到像是随风飘动的铃铛,就会忍不住去拉动,这就达到了引导用户操作的目的,提高了二层楼内容的曝光度。
动效让这些设计更惊艳
 
 
 
 
六、微动效引导 VIP 续费
针对一些无法通过占比面积进行突出的元素,运用微动效的形式设计是常见的设计手法。
 
网易云音乐 APP “我的”板块中,为了突出 VIP 续费按钮,黑胶唱片以动效的形式在按钮中来回滚动,以此强化续费按钮的关注度。
动效让这些设计更惊艳
 
 
 
 
七、动态还原实时天气
天气类产品从简单的静态预告升级为动态实时还原,可以让用户更加直观的判断天气变化,也能提高界面设计的感官体验。
 
比如 iPhone 自带的天气 APP,以动态还原实时天气作为界面背景,不仅便于用户识别天气,也使得产品设计更具情感化体验。
动效让这些设计更惊艳
 
 
 
 
八、动态 IP 引导按钮设计
按钮设计样式可以发挥的空间很大,除了在造型、配色、空间感等方面突出设计以外,也能通过按钮微动效或者动态引导等形式强化。
 
比如智行火车票 APP “抢票”板块中,为了突出“添加抢票”按钮的存在感,以动效 IP 引导进行设计。不仅使得按钮更突出,设计感也显得俏皮可爱,凸显亲和力。
动效让这些设计更惊艳
 
 
 
 
九、微动效赋予品牌活力
立足于品牌做设计是突出产品差异化的关键,这也是产品设计未来的演变趋势之一,如何提高品牌的曝光度和记忆度,成为设计师不断探索的方向。
 
最近在使用夸克 APP 时,微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段,夸克也会以动效的形式赋予品牌更多变化,不仅使得产品更具年轻化属性,也能更好的传递品牌基因。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
小结
动效使得产品具备更多的变化,也能辅助解决更多复杂功能的交互场景,探索动效的场景运用可以提升设计灵感,希望本期的分享可以带给大家更多设计灵感。本文描述属于个人体验总结,不足之处我们努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


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

7大色彩技巧让你界面更吸睛

天宇

色彩在我们日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,感觉在自己的设计生涯中,大部分都是在与色彩的博弈中度过的,虽然客户可能不懂色彩原理,可是客户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了客户,所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。
 
7大色彩技巧让你界面更吸睛
 
 
 
目录
一、 色彩的定义
二、 色彩的三属性
三、 色彩的三种常见模型
四、 色彩的语意及它的应用
五、 不同场景下的色彩应用
六、 色彩在B端设计中的作用
七、 B端色彩设计使用的原则
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
一、色彩的定义?
1、物理学角度
色彩是光的属性,当光波通过物体时,物体会吸收某些波长的光,而反射或透射其他波长的光,这些被反射或透射的光波长度决定了我们看到的颜色。
 
2、心理学角度
色彩是人脑对光波长的视觉感知,不同的波长刺激视网膜上不同类型的感光细胞,进而产生不同的色彩感觉。
 
3、 艺术学角度
色彩是艺术创作的重要元素,它不仅关乎视觉感受,还与情感、文化、象征意义相关联。
 
4、 设计学角度
在设计领域,色彩是传达信息、影响情绪和创造美感的关键工具。
 
5、 计算机科学角度
在数字图像处理中,色彩通常通过颜色模型(如RGB、CMYK等)来定义,这些模型通过不同比例的原色或色料混合来表示各种颜色。
 
 
 
二、色彩的三属性
1、色相
色相是指不同颜色之间的差别,即不同颜色的表象和名称,每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示,人的眼睛可分辨出的色别有180种左右。
7大色彩技巧让你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情况下,不同色别的明暗程度不同。如黄色光比红色光更明亮,而红色光则比青色光要明亮。
同时,同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下,会呈现不同的明暗变化和差异。
7大色彩技巧让你界面更吸睛
 
 
  
 
3、饱和度(纯度)
饱和度(纯度)是指同一色别的纯净度和鲜明度的变化。从色光的角度而言,光的波长单一程度越高,饱和度就会越高;不同色别所达到的饱和度不同,一般情况下,红色的纯度可达到最高,绿色的则相对较低;同一色相深浅不同的颜色有不同的饱和度;黑白色光的渗入会导致饱和度和明度发生变化;通常,照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
三、色彩的三种常见模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即颜色的种类;S代表饱和度,即颜色的纯度;B(V)代表亮度,即颜色的明亮程度。
 
这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型,如果在同色系中如果只想让他们有细微的变化,我通常会通过调节S和B的百分比数值来达到自己想要的目的。
7大色彩技巧让你界面更吸睛
 
 
以上就是我在设计项目中,运用该色彩模型做的一个实战,项目中用到了一个图形,需要用同色系来表达,我保持了H色值的不变,让S值和B值都发生着微妙的不同,于是就产生了四五种同色系的绿色,该色彩模型特别的好使,也鼓励大家多在实战中运用这样的色彩模型,简单实用。
 
H色相:Hue,以角度(0°-360°)表示
S饱和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于三者亮度之总和,越混合亮度越高,即加法混合。
 
红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。
7大色彩技巧让你界面更吸睛
 
 
R红:Red,以数值(0-255)表示
G绿:Green,以数值(0-255)表示
B蓝:Blue,以数值(0-255)表示
7大色彩技巧让你界面更吸睛
 
 
 
 
3、CMYK模型
虽然RGB模型色彩更加的丰富,但是很多颜色不能完全打印出来,于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑,通过颜料反射和吸收光线来显色。
 
记得之前自己从事平面工作的时候,就经常要用到CMYK模式,因为印出来的效果偏差是最小的,是最靠近设计效果图的。
7大色彩技巧让你界面更吸睛
 
 
通过对比,我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些,而CMYK的色彩模型颜色显示上就黯淡了不少,但是要印刷的话,就必须转化为成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品红:Magenta,以百分比值(0%-100%)表示
Y黄:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的语意及应用
1、红色的语意及应用
红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力,也常与兴奋、热烈的情绪相关。
著名的快餐品牌肯德基,在自己的网页及店铺装修中都运用了红色,因为红色是所有颜色中最容易引起人们注意的颜色,也是很容易刺激人们食欲和购买的颜色。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、橙色的语意及应用
橙色传达温暖、欢快和积极向上的情感;它常与乐观、友好、创造力联系在一起,给人以活力充沛和充满希望的感觉。
百度网盘的这个登录界面就运用了橙色,给人阳光、向上、热情的感觉,通过色彩的运用一下让界面有了温度。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、黄色的语意及应用
黄色象征快乐、开朗和乐观;它能带来明亮、愉悦的情绪,代表着阳光、温暖和智慧。
叫叫阅读是一款非常著名的儿童阅读软件,整个色调采用的是非常有活力的黄色,这与儿童处于好奇与活力的阶段相符合,这种高亮的黄色,饱和度和明度都非常的高,特别容易抓住儿童的目光,同时它是一种快乐的颜色,也是一种能激发孩子创造力和想象力的颜色,特别符合儿童成长的需求。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、绿色的语意及应用
绿色代表平静、和谐与生机。绿色常与大自然相关,给人带来安宁、放松的感觉,也象征着成长、希望和新生。
青椒云的目标用户是吸引年轻用户和创意工作者,绿色这种富有活力和创意的颜色更容易吸引他们的关注,同时绿色也代表着健康、可持续发展的企业形象。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、青色的语意及应用
青色寓意清新、宁静和沉稳,它给人一种冷静、理智的印象,同时也带有一丝清新的活力。
青色是一种带有蓝色和绿色的颜色,因此青色既有蓝色的专业感、信任感,也有绿色的生机感、希望感。
以下是日本某牙医品牌的官网首页,病人希望在这里带来健康与复苏,也希望获得专业、可靠的治疗,而青色就成了很好传递这种情感的品牌色。 
7大色彩技巧让你界面更吸睛
 
 
 
 
6、蓝色的语意及应用
蓝色代表冷静、忠诚和信任;它常与沉稳、深邃的情感相关,能带来宁静、平和的心境,也象征着智慧和理性。
123云盘使用了蓝色,蓝色符合社会的普遍审美认知,接受度比较高;其次,蓝色给人安全的感觉,也符合云盘的初衷,给用户安全的存储服务。
7大色彩技巧让你界面更吸睛
 
 
 
 
7、紫色的语意及应用
紫色象征神秘、高贵和浪漫;它常给人一种优雅、奢华的感觉,同时也带有神秘莫测的氛围,与梦幻、创造力等情感相关。
美柚的主要用户是女性,紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质,这些特质与女性的审美和情感需求相契合,能够吸引女性的关注。
7大色彩技巧让你界面更吸睛
 
 
 
 
8、白色的语意及应用
 
白色代表着纯洁、神圣、信任、安静、朴素和雅致,是一种充满纯洁的颜色,它可以跟任何颜色和谐的共生。
以下是熊掌ID的登录界面,颜色用了大量的白与灰,简洁又不失大气,传递出了一种质朴、雅致的感觉。 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
五、不同场景下的色彩应用
 
1、商场的色彩为什么总是多彩热烈的?
 
❶ 吸引顾客注意力
在众多商业场所中脱颖而出,色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来,吸引过往行人的目光,激发他们的好奇心和探索欲。
 
确实多彩的颜色更加容易引起我的关注,这不看到商场的美图,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧让你界面更吸睛
 
 
 
❷ 增强可见性
即使在较远的距离或在繁忙的街道上,多彩热烈的配色也能让商场更容易被发现,提高商场的知名度和曝光度。
多彩的配色,让我远远的就被商场美轮美奂的插画吸引,大大增加了商场的可见性。
7大色彩技巧让你界面更吸睛
 
 
 
营造愉悦氛围
色彩可以激发积极情绪,明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时,会感受到一种愉悦和轻松的氛围,从而更愿意在商场中停留和购物。
星沙永旺城的美陈设计很好,墙面采用极具诱惑力的颜色与美食,把小小实物十倍放大,增加了视觉看点,让人忍不住过去拍照晒一下,大大增加了愉悦性。
7大色彩技巧让你界面更吸睛
 
 
 
缓解压力
在现代生活中,人们常常面临各种压力。走进一个多彩热烈的商场,可以暂时摆脱日常的烦恼和压力,享受购物的乐趣。
特别可爱夸张的插图设计,引发了丝丝童趣和欢乐,让人短暂忘记压力,远离烦恼。
7大色彩技巧让你界面更吸睛
 
 
 
引导消费行为
商场通常会使用不同的颜色来区分不同的区域,如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域,提高购物效率。
突出重点商品,对于一些重点推荐的商品或促销活动,商场可以使用鲜艳的色彩来突出展示,吸引顾客的注意力,引导他们进行购买。
7大色彩技巧让你界面更吸睛
 
 
 
塑造品牌形象
6.1 传达个性和风格
不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合,商场可以传达出自己的个性和风格,吸引与之相符的顾客。
 
6.2 增强品牌记忆度
独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象,提高品牌的记忆度和辨识度。
 
芙蓉区的龙湖天街主要面向中等收入新兴家庭,是一个区域型的购物中心,集购物、餐饮、休闲、娱乐等多业态于一体,为消费者提供一站式商业综合体,它在餐饮区采用了大量的吃喝玩乐的插画,来引导用户消费。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、为什么蓝色在B端设计中广泛应用?
❶ 视觉特性方面
1.1 稳定性
蓝色给人一种沉稳、可靠的感觉。在B端产品中,用户往往需要处理重要的业务数据和进行复杂的操作,蓝色的稳定性可以让用户感到安心,增强对产品的信任感。
7大色彩技巧让你界面更吸睛
 
 
 
1.2 专业性
蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户,需要传达出专业、高效的形象,蓝色正好符合这一需求。
 
❷ 心理影响方面
2.1 减少焦虑
相比鲜艳、刺激的颜色,蓝色较为柔和,不容易引起用户焦虑和紧张的情绪;在B端使用场景中,用户可能需要长时间使用产品,蓝色的舒缓效果有助于提高用户的使用体验。
 
2.2 提高专注度
蓝色具有一定的沉静作用,能够帮助用户集中注意力,专注于工作任务。对于B端用户来说,高效完成工作是首要目标,蓝色的这一特性有助于提高工作效率。
 
B端产品在心理上追求的是类似如下图的这种宁静式的体验,跟教育有着异曲同工之处,就像这个易贝乐少儿英语一样,用大面积的蓝色,希望孩子在这里能很快的安静下来学习、专注自己的事情。
7大色彩技巧让你界面更吸睛
 
 
 
❸ 行业习惯方面
3.1 科技行业引领
许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色,逐渐形成了一种行业习惯。其他企业在设计B端产品时,也会倾向于选择蓝色以符合用户的认知和期望。
 
3.2 传统与延续
在过去的设计中,蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时,也不断优化和创新蓝色的运用方式,使其更符合现代设计趋势和用户需求。
 
嘉为科技是一个有着20多年技术沉淀的科技公司,它的官网和产品风格一直是沿用着科技蓝的风格,应该也是基于传统的沉淀吧。
7大色彩技巧让你界面更吸睛
 
 
 
❹蓝色可以提高产品的复用率
很多用户都能接受蓝色的B端界面,当面对有差不多需求客户时,同一套UI,可以多次复用,可以减少开发成本和设计成本,这也是自己通过长期实战观察发现的。
 
一个UI风格,用在了两个项目中,不同的用户,趋向同样的风格,说明蓝色在大家心目中的接受度是非常的高,用蓝色可以促进设计的多次复用。
7大色彩技巧让你界面更吸睛
 
 
在日常的项目中,我看到的B端UI界面是千篇一律的稳重,不追求过于刺激的颜色搭配,通常都比较的干净简洁,不像商场里面的美陈背景设计,色彩对比非常的强烈,比较的吸引人眼球。
 
有一次我厌烦了常规的稳重风,探索一种大胆的色彩风格时,虽然风格比较新颖,可是发出去客户的接受度不高,觉得太不稳重了,然后重新按照以往习惯进行设计时,就很好,客户一致认同。
 
可见每个领域都有自己的色彩运用习惯,商场需要吸引人眼球、刺激消费,越大胆越好,可是B端设计需要提供一个让人平静去处理工作事项的环境,它需要安静,不需要过于刺激的颜色搭配。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
六、色彩在B端设计中的作用?
1、通过色彩向用户反馈操作结果及当前状况
比方在日常设计当中,红色代表流程失败,绿色代表流程成功,橙色代表信息有告警,蓝色代表着链接,同时不同的按钮颜色也可以很好的区分按钮状态,在反馈结果和状况方面,色彩起着非常重要的作用。
 
下面这个IDC运营的监测平台,它就是通过颜色来区分不同的告警级别的,可见颜色在B端产品中的重要性。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
2、可以很好的进行品牌传达
B端设计中大面积使用品牌色,可以强化品牌形象,使用与品牌标志风格相近的色彩,可以帮助用户快速识别和记住品牌,在不同的B端产品界面中使用统一的色彩方案,有助于建立品牌的连贯性和一致性,增强用户对品牌的信任。
 
例如我给湖南高速设计的一套B端界面设计,用户强烈要求改变传统的蓝色风格,要求整套界面设计要用湖南高速品牌色-绿色,说明在追求大流和品牌色之间,客户更加倾向品牌的传达。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
3、颜色可以很好的进行信息区分
在B端界面设计中,颜色在帮助信息区分起着非常重要的作用,通常可以通过不同的色彩来区分功能区域,可以让用户更清晰地了解界面的结构和布局,例如,导航栏使用一种特定的颜色,而内容区域则使用另一种颜色。
 
我设计的天翼写作,就是这样的设计思路,导航栏和内容区的颜色完全不一样,这里颜色起到了很好的区分作用。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、舒适的色彩搭配可以提升用户体验
选择合适的色彩对比度可以增强文本的可读性,减少用户的视觉疲劳。例如,黑色文字在白色背景上通常比较容易阅读。
 
选择适当的色彩可以营造出专业、高效、舒适的工作氛围,从而影响用户的情绪和感受,提高用户的使用体验。
 
我参与的这个后台界面,就是通过合理的色彩搭配来引导用户使用的,当用户已经完成的环节都是用绿色表示,没有走完的流程就会是灰色的,寓意指示非常的鲜明,很好的解决了用户不知道清晰进程的卡点,提升了用户体验。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、色彩可以传递性格
人的性格有活泼的、文静的、沉稳的、深邃的,其实色彩也是有性格的,不同的色彩也有不同的性格,当我们对色彩的性格有足够多的了解,在面对不同的客户时,我们对色彩的拿捏以及设计需求的把握时,会更加的游刃有余。
7大色彩技巧让你界面更吸睛
 
 
 
我们平常确实是在做设计,但是我们更多的是在与人打交道,我们更好的聆听,会帮助我们更快的抓取到客户的喜好,快速做出满足客户需求的设计,少受加班之苦。
比方说我之前给云门户设计的一套UI,客户的决策层是男性,且年龄偏大,他们就偏爱深沉的UI风格;而我负责的天翼云电脑专家,客户的决策层是女性,且年龄偏年轻,她每次就喜欢轻盈、明快的UI色调,不同的决策层客户,就会带来不同的设计结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
七、B端色彩设计使用的原则
1、B端设计中,色彩设计应遵循6:3:1原则
在这个登录页面中,我就是运用的6:3:1原则,60%的主色,30%的次要色,10%的点缀色;使用了大面积的蓝色和蓝灰色,最后使用一点点的橙色,这样的配色会显得高级。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、文字、卡片背景色和边框都使用无彩色
为了保证画面风格的统一、干净整洁,文字颜色、边框颜色、以及边框背景色都需要用到无彩色,通常通过颜色的深浅来区分信息的层级关系。
 
比方说我参与的星辰大模型AI文档生成能力的应用,里面无论文字颜色还是底色都是运用的无彩色,只是通过了色彩深浅变化来做了层级区分,因为无彩色可以起到很好的降噪作用,既传达了信息,又不会显得界面凌乱复杂。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、需要凸显的内容,用明度和纯度比较高的色彩
比方说,日常我们设计的卡片都是用的白色,而底色我们用的是灰色,因为卡片里面的内容都是比较重要的信息,需要用一个亮度比较的高的颜色,让内容往前走,而灰色的背景通常就往后走的感觉,这样能跟卡片形成一个一前一后的对比,更好的帮助内容进行传播。
 
比方说我设计的这个IT运维监控平台的首页,物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的,所以他们的图片底色用了纯度比较高的有彩色来标识。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
4、设计前一定要有定色调的意识
作为设计师,我们的设计工作其实就是在设计一种感觉,一种情绪,设计前定调的意识真的太重要了,感觉对了,什么都就对了。
 
比方说我前段时间接到了一个B端的大屏可视化需求设计,客户说之前的大屏设计不喜欢,希望重新出一个新的设计,然后公司的需求对接人员在给我下达需求时,真的就只是给我下达了这几个字,让我重新出一个设计试试。
 
以我的职业直觉,感觉这个需求是不够细化的,于是我就多问了几句,我问客户是想要常规的蓝色调的还是别的?果然一问,客户说不希望再用常规的蓝色的,希望新的设计要用他们的品牌色绿色,刚听到这几个字的时候,我以为这次我把握住需求了,在收集参考图的时候,我发现常见的绿色大屏有深色的和浅色的,根据自己以往的作图习惯,我觉得深色会更加的受欢迎一些,我自以为是的朝着深色的方向去出图,出到了一半的时候,我内心有些许的忐忑,我于是找了一深一浅的参考图,让同事跟客户确认一下,客户是想要深色的感觉,还是要浅色的感觉,这次沟通又给了我深深的一击,客户不按常理出牌,说希望按浅色的风格来出图。
 
在出稿之前,通过自己反复的沟通确认,发现设计前的定调意识真的太重要了,要不是有出图前一波三折的反复确认以及需求的细化,就不会有后来的一遍过稿。
7大色彩技巧让你界面更吸睛
 
 
 
5.设计的灰色尽量使用带有色彩偏向的灰
不管我们设计什么色系的界面,都避不开用到灰色,在设计中用跟主视觉相符的灰,会使得界面更加的高级、协调与美观,注意好了这个小细节,会给我们的设计加分不少。
 
下面是我日常体验到的两个界面,上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应,灰色没有向蓝色倾斜,界面看起来就没那么美观;下面通义千问的灰色设计就非常的注重细节,灰色偏紫,整个界面看起来浑然天成,毫无违和,美感、档次瞬间提升好几个等级。
 
一个微小细节的在意,在无形中拉高了设计的高度,十个细节乃至更多细节的在意,就会带来更多意想不到的结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
总结:
以上就是我最近对色彩的一些顿悟、感受和学习收获,在不断的复盘总结中,我们总会收获一些新的认知,通过这次色彩的复盘之旅,发现色彩对设计师真的太重要了,希望我的分享对大家有启发,不足之处也欢迎大家留言交流。


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

以用户为中心的交互设计思维

天宇

 
聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维


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

日历

链接

个人资料

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

存档