首页

动效设计在手机界面设计中的作用

蓝蓝设计的小编

在如今这个数字化的时代，手机界面的设计越来越精致和人性化，其中动效设计扮演着不可或缺的角色。

评论(0) 浏览(209)

无障碍设计原则在手机界面中的应用

蓝蓝设计的小编

在当今数字化的时代，手机已经成为人们生活中不可或缺的工具。然而，对于一些特殊群体，如视障者、听障者、老年人以及身体功能有障碍的人群，使用手机可能会面临诸多挑战。这时，无障碍设计原则在手机界面中的应用就显得尤为重要。

无障碍设计原则的核心是确保所有人，无论其身体状况如何，都能够平等、方便地使用产品和服务。在手机界面设计中，这意味着要从多个方面进行考虑和优化。

移动app设计 (8).png

首先，对于视障者来说，屏幕朗读功能是至关重要的。通过语音辅助，手机能够将屏幕上的文字、图标和操作提示转化为声音，帮助他们获取信息。同时，高对比度的色彩搭配也能让视障者更清晰地分辨界面元素。例如，使用黑白对比强烈的配色，或者为重要的按钮和文字提供醒目的颜色标识。

对于听障者，可视化的提示和震动反馈则是关键。当有来电、短信或其他通知时，除了声音提示，强烈的视觉闪烁和明显的震动能够确保他们及时察觉。

对于老年人和操作不灵活的人群，大字体和简洁明了的界面布局能极大地提高可用性。增大图标和按钮的尺寸，减少操作步骤，提供清晰易懂的图标和文字说明，都能让他们更轻松地使用手机。

此外，无障碍设计还应考虑到认知障碍人群的需求。避免复杂的操作流程和难以理解的术语，采用直观、易懂的设计语言，降低使用门槛。

移动app设计 (6).png

许多手机厂商已经开始重视无障碍设计，并取得了显著的成果。比如，苹果的 VoiceOver 功能，让视障用户能够通过触摸和滑动来操作手机，获取各种信息。

据统计，全球有超过 10 亿的人口存在某种形式的残疾，而无障碍设计能够让这部分人群更好地融入数字社会，享受科技带来的便利。

一个成功的无障碍手机界面设计案例是某款专门为老年人开发的手机应用。它的界面简洁大方，字体超大，图标清晰，并且提供了详细的操作指南和语音提示。老年人可以轻松地拨打电话、发送短信、查看天气等，极大地提高了他们的生活质量。

移动APP设计 (3).png

总之，无障碍设计原则在手机界面中的应用不仅是一种社会责任，也是提升产品包容性和用户满意度的重要途径。通过关注特殊群体的需求，我们能够打造出更加人性化、温暖且具有广泛适用性的手机界面，让科技真正惠及每一个人。在未来，随着技术的不断发展和社会意识的提高，相信无障碍设计将在手机领域发挥更大的作用，为更多的人创造更美好的数字生活体验。

评论(0) 浏览(208)

手机界面设计风格演变

蓝蓝设计的小编

在科技日新月异的今天，手机已经成为我们生活中不可或缺的一部分，而手机界面设计风格也经历了一系列引人注目的演变。

评论(0) 浏览(193)

打动用户的关键：用户体验地图实战攻略

ui设计分享达人

目录
一、  什么是用户体验地图？
二、  为什么使用用户体验地图？
三、  什么情况使用用户体验地图？
四、  用户体验地图的组成？
五、  用户体验地图的制作流程
六、  用户体验地图案例展示
七、  用户体验地图总结
一、  什么是用户体验地图？
打动用户的关键：用户体验地图实战攻略
 
 
用户体验地图（User Experience Map）是一种用于可视化展示用户在与产品或服务互动过程中所经历的各个接触点和体验的工具。它帮助团队深入了解用户的行为、情感和痛点，从而优化用户体验。
用户体验地图（User Experience Map）是产品设计前期——用户研究中很重要的一部分，视角化和图表的方式，从用户的角度来表现其和产品/组织/服务交互的过程，是连续的视觉时间和完整故事的多个互动点。
简单来说，在用户定义角色，搭配行为研究、表格调查和竞品分析等数据下，构思出这个角色在某个角色故事下要完成特定目标，以反应用户使用某个特定产品的真实特性，有助于我们评估现状、找出用户真正的痛点，与优化整体的体验流程（创造和谐的互动）。
二、  为什么使用用户体验地图？
打动用户的关键：用户体验地图实战攻略
 
 
使用用户体验地图（User Experience Map）在项目中有很多重要的原因，能够给团队带来显著的价值，例如：
1、全面理解用户旅程
可视化用户体验：用户体验地图通过图形化的方式展示用户在使用产品或服务过程中的所有步骤和接触点，使团队能够直观地看到用户的整个旅程。
识别关键时刻：帮助团队识别用户旅程中的关键触点和情感波动，理解用户在不同阶段的需求和行为。
2、发现用户痛点和改进机会
识别痛点：用户体验地图能够揭示用户在使用过程中的痛点和挑战，使团队可以针对这些问题制定解决方案。
挖掘改进机会：通过分析用户行为和情感波动，团队可以找到提升用户体验的机会，从而优化产品或服务。
3. 增强团队协作和沟通
统一理解：用户体验地图作为一种直观的沟通工具，使跨职能团队（如产品经理、设计师、开发人员和市场团队）能够共享对用户体验的统一理解。
促进协作：通过共同创建和讨论用户体验地图，团队成员可以更好地协作，提出建设性的意见和建议。
4. 驱动以用户为中心的设计
以用户为中心：用户体验地图强调从用户的角度出发，关注用户的需求、情感和行为，推动以用户为中心的设计和开发。
提升用户满意度：通过优化用户旅程中的各个触点和体验，团队可以提升用户满意度和忠诚度。
5. 支持决策制定
数据驱动决策：用户体验地图基于用户研究和数据分析，为决策提供可靠的依据，减少主观判断和猜测。
优先级管理：通过识别用户体验中的关键问题和机会，团队可以更好地确定优先级，集中资源解决最重要的问题。
6. 提高用户体验设计的效率和效果
明确目标和方向：用户体验地图帮助团队明确设计目标和方向，减少反复修改和沟通成本，提高设计效率。
验证设计假设：通过用户体验地图，团队可以验证设计假设和概念，确保设计方案符合用户需求和期望。
三、什么情况使用用户体验地图？
打动用户的关键：用户体验地图实战攻略
 
 
用户体验地图（User Experience Map）在多种情况下都可以使用，能够帮助团队更好地理解和优化用户体验。例如：
1.产品或服务的初期开发阶段
定义产品概念：在开发新产品或服务时，用户体验地图帮助团队理解用户需求和期望，确保产品设计符合用户需求。
设计用户旅程：通过用户体验地图，团队可以详细规划用户与产品互动的每个步骤和触点，确保用户旅程流畅且无障碍。
示例：
一家创业公司在开发一款新的移动应用时，通过用户体验地图了解目标用户的需求和使用习惯，从而设计出更符合用户期望的产品。
2.现有产品或服务的优化
识别和解决问题：当现有产品或服务存在用户体验问题时，用户体验地图帮助团队识别痛点并制定改进措施。
提升用户满意度：通过分析用户在不同接触点的情感和行为，团队可以找到提升用户满意度和忠诚度的机会。
示例：
一家电商平台通过用户体验地图发现用户在结账环节遇到的困难，优化了结账流程，显著提高了用户满意度和转化率。
3.跨职能团队的协作和沟通
建立共同理解：在涉及多个部门的项目中，用户体验地图帮助不同团队（如产品、设计、开发、市场）建立对用户体验的共同理解。
促进协作：通过可视化的用户旅程，团队成员可以更有效地讨论和协作，提出有建设性的改进建议。
示例：
一家大型企业在推出一项新服务时，通过用户体验地图让产品经理、设计师和市场团队共同参与，确保各团队对用户体验的理解一致，从而提高协作效率。
4.用户研究和测试阶段
记录用户反馈：在用户研究和测试阶段，用户体验地图帮助记录和分析用户反馈，发现用户在使用产品过程中的实际体验。
验证设计假设：通过用户体验地图，团队可以验证设计假设，确保设计方案符合用户需求和期望。
示例：
一家金融科技公司在测试新功能时，通过用户体验地图记录用户的使用体验和反馈，优化了功能设计。
5.制定产品战略和路线图
战略规划：用户体验地图帮助团队从用户角度出发，制定产品战略和发展路线图，确保产品的发展方向符合用户需求。
优先级管理：通过识别用户体验中的关键问题和机会，团队可以更好地确定改进措施的优先级。
示例：
一家健康科技公司在制定未来两年的产品发展计划时，通过用户体验地图分析用户需求和市场趋势，确定了重点开发的功能和服务。
6.营销和客户支持
提升客户支持效率：用户体验地图帮助识别用户在寻求支持时的痛点，优化客户支持流程，提高用户满意度。
优化营销策略：通过了解用户在不同阶段的情感和行为，团队可以制定更有针对性的营销策略，提升用户转化率。
示例：
一家SaaS公司通过用户体验地图发现用户在使用过程中遇到的常见问题，优化了客户支持流程，并根据用户行为调整了营销策略，提高了客户留存率。
四、  用户体验地图的组成？
打动用户的关键：用户体验地图实战攻略
 
 
组成用户体验地图（User Experience Map）可以分为八个部分，分别是：用户角色（Persona）、场景（Scenario）、阶段（Stages）、触点（Touchpoints）、用户行为（Actions）、用户情感（Emotions）、痛点（Pain Points）、机会（Opportunities）；组成部分整合到一张用户体验地图上，团队可以直观地看到用户旅程中的所有关键要素。帮助团队全面理解用户在整个体验过程中的行为、情感和痛点，从而制定更有效的优化策略，提升用户满意度。下面我们详细说明这八个部分：
1. 用户角色（Persona）
定义：用户角色是目标用户的详细描述，包括人口统计信息、行为模式、需求和痛点。
目的：帮助团队聚焦特定用户群体的需求和体验，使设计和决策更有针对性。
示例：
年龄：25-35岁
职业：城市白领
兴趣爱好：网上购物
需求和痛点：需要便捷快速的购物体验，不喜欢复杂的结账流程
2. 场景（Scenario）
定义：场景是用户在某一特定情境下与产品或服务互动的全过程描述。
目的：帮助团队了解用户的具体使用情境和目标，确保设计满足实际使用需求。
示例：用户在下班回家的路上，通过移动应用购买晚餐所需的食材。
3. 阶段（Stages）
定义：用户旅程的不同阶段，从开始到结束，包括用户在每个阶段的主要活动和目标。
目的：展示用户旅程的整体结构，帮助团队识别每个阶段的关键活动和目标。
示例：
发现（Discovery）、考虑（Consideration）、决策（Decision）、使用（Usage）、回访（Return）
4. 触点（Touchpoints）
定义：用户在每个阶段与产品或服务的具体接触点，如网站、客服、实体店等。
目的：识别用户与品牌互动的关键时刻，确保每个接触点的体验都得到优化。
示例：网站首页、产品页面、购物车、结账页面、客服
5. 用户行为（Actions）
定义：用户在每个触点上的具体行为，如浏览网页、咨询客服、购买产品等。
目的：展示用户的具体操作过程，帮助团队理解用户的实际使用方式。
示例：浏览产品、加入购物车、填写订单信息、支付、联系客服
6. 用户情感（Emotions）
定义：用户在每个触点上的情感体验，包括积极和消极的情感波动。
目的：帮助团队理解用户的满意度和痛点，确保在关键时刻提供积极的体验。
示例：
兴奋（浏览产品时）、犹豫（选择支付方式时）、沮丧（遇到支付问题时）、满意（收到产品时）
7. 痛点（Pain Points）
定义：用户在整个体验过程中遇到的困难和挑战。
目的：识别和解决用户体验中的问题，提升用户满意度。
示例：
结账页面加载慢、支付方式选择不便、客服响应慢
8. 机会（Opportunities）
定义：基于用户行为、情感和痛点，识别出改善用户体验的潜在机会。
目的：为团队提供改进用户体验的方向和具体措施，推动持续优化。
示例：
优化结账页面性能、增加支付方式、提升客服响应速度
五、  用户体验地图的制作流程
打动用户的关键：用户体验地图实战攻略
 
 
制作一份完整的用户体验地图（User Experience Map）需要多个步骤，使用的方法也有很多，不用担心，下面我们进行详细步骤拆解：
1.定义目标
目的：明确制作用户体验地图的目标和用途，比如改善特定功能的用户体验、优化整体用户旅程等。
示例：
一家电商平台希望通过用户体验地图识别用户在结账过程中的痛点，并制定改进措施。
2.收集用户数据
方法：
用户访谈：直接与用户对话，了解他们的需求、行为和情感。
问卷调查：通过问卷收集大规模用户数据。
用户观察：观察用户在实际使用产品或服务时的行为和反应。
可用性测试：测试用户在特定任务中的表现，发现使用障碍和痛点。
数据分析：分析网站或应用的使用数据，了解用户行为模式。
示例：
电商平台通过用户访谈和问卷调查收集用户在结账过程中的体验和反馈。
3.定义用户角色（Persona）
步骤：
基于收集的数据，定义主要的用户角色，描述其特征、需求和痛点。
示例：
用户角色A：25-35岁，城市白领，喜欢网上购物，重视便捷和快速的购物体验。
4.描绘用户旅程
步骤：
划分用户旅程的不同阶段，从开始到结束，包括用户在每个阶段的主要活动和目标。
示例：
发现阶段：用户在网上搜索和浏览商品。
考虑阶段：用户比较不同商品的特点和价格。
决策阶段：用户决定购买某件商品。
使用阶段：用户完成购买并等待商品送达。
回访阶段：用户收到商品后可能会再次访问网站。
5.识别触点和用户行为
步骤：列出用户在每个阶段的具体触点和行为，展示用户的操作过程。
示例：
触点：网站首页、产品页面、购物车、结账页面、客服。
用户行为：浏览产品、加入购物车、填写订单信息、支付、联系客服。
6.记录用户情感
步骤：描述用户在每个触点上的情感体验，包括积极和消极的情感波动。
示例：
用户在浏览产品时感到兴奋，但在结账时因页面加载慢而感到沮丧。
7.识别痛点和机会
步骤：基于用户行为和情感，识别用户在每个阶段的痛点，并找出改善用户体验的机会。
示例：
痛点：结账页面加载慢、支付方式选择不便、客服响应慢。
机会：优化结账页面性能、增加支付方式、提升客服响应速度。
8.创建可视化地图
步骤：将所有信息整合到一张可视化的用户体验地图上，使团队能够直观地了解用户的完整体验过程。
工具：
手绘草图：用纸和笔绘制用户体验地图。
数字工具：使用工具如Miro、Lucidchart、UXPressia等创建数字用户体验地图。
9.讨论和验证
步骤：
与团队成员共同讨论用户体验地图，验证其准确性和全面性。
基于讨论结果进行必要的修改和调整。
示例：
团队成员共同审查用户体验地图，确认所有触点和用户行为是否准确，讨论发现的痛点和改进机会。
10.制定改进措施
步骤：根据用户体验地图识别的痛点和机会，制定具体的改进措施和实施计划。
示例：
优化结账页面加载速度，增加多种支付方式，提升客服响应效率。
11.实施和跟踪改进
步骤：实施制定的改进措施，并持续跟踪用户反馈和数据，评估改进效果。
示例：
电商平台实施优化结账页面的改进措施，并通过用户反馈和数据分析评估效果，确保用户体验得到提升。
六、  用户体验地图案例展示
通过上面的介绍，相信你已经对用户体验地图（User Experience Map）有了一定了解，是不是已经想自己动手开始制作了，下面我们看几个案例：
案例 1：电商平台优化
背景：一家电商平台希望通过用户体验地图识别用户在结账过程中的痛点，并制定改进措施，以提升用户满意度和转化率。
 
打动用户的关键：用户体验地图实战攻略
 
 
用户角色（Persona）
姓名：张女士
年龄：30岁
职业：城市白领
兴趣：喜欢网上购物
需求：需要便捷快速的购物体验
痛点：不喜欢复杂的结账流程
触点和用户行为
 
1.  发现（Discovery）：通过搜索引擎和社交媒体广告发现平台
2.  考虑（Consideration）：浏览产品详情，查看用户评论
3.  决策（Decision）：将商品加入购物车
4.  购买（Purchase）：填写订单信息并支付
5.  回访（Return）：查看订单状态，联系客户服务
用户情感
发现：兴奋和好奇
考虑：谨慎和比较
决策：确定和期待
购买：焦虑和满足
回访：满意和信任
痛点和机会
痛点：结账页面加载慢，支付方式选择不便，客服响应慢
机会：优化结账页面性能，增加支付方式，提升客服响应速度
案例 2：健身App优化
背景：一家健身App希望提高用户的使用频率和忠诚度。
 
打动用户的关键：用户体验地图实战攻略
 
 
用户角色（Persona）
姓名：李先生
年龄：25岁
职业：程序员
兴趣：健身
需求：需要个性化的健身计划
痛点：课程选择不够个性化，计划制定过程复杂
触点和用户行为
 
1.  发现（Discovery）：通过朋友推荐和广告发现App下载并安装App
2.  考虑（Consideration）：浏览课程详情，查看评价
3.  决策（Decision）：选择并购买课程
4.  使用（Usage）：开始使用课程进行锻炼
5.  回访（Return）：查看锻炼记录，调整计划
用户情感
发现：好奇和期待
考虑：审慎和比较
决策：确定和信心
使用：满足和成就
回访：满意和忠诚
痛点和机会
痛点：课程选择不够个性化，计划制定复杂
机会：增加个性化推荐功能，简化计划制定过程
案例 3：银行在线服务优化
打动用户的关键：用户体验地图实战攻略
 
 
背景：一家银行希望优化其在线服务平台，以提高用户的操作体验和满意度。
用户角色（Persona）
姓名：王女士
年龄：45岁
职业：教师
兴趣：理财
需求：需要简单易用的在线银行服务
痛点：在线服务平台操作复杂，转账流程繁琐
触点和用户行为
 
1.  发现（Discovery）：访问银行官网，注册账户
2.  考虑（Consideration）：浏览平台功能和用户评价
3.  决策（Decision）：决定使用在线服务
4.  使用（Usage）：进行账户管理和转账操作
5.  回访（Return）：查看交易记录，继续使用服务
用户情感
发现：好奇和怀疑
考虑：审慎和信任
决策：确定和信心
使用：满足和便捷
回访：满意和忠诚
痛点和机会
痛点：操作复杂，转账流程繁琐
机会：简化操作流程，优化用户界面设计
 
七、  用户体验地图的总结
用户体验地图（User Experience Map）作为一种强大的工具，在理解和优化用户体验方面具有显著优势。然而，制作和维护用户体验地图也存在资源密集、复杂性和动态变化等挑战。团队在使用用户体验地图时，需要平衡其优劣势，合理分配资源，确保地图的准确性和实用性，从而真正提升用户体验和产品成功率。
优势
打动用户的关键：用户体验地图实战攻略
 
 
 
1.  全景视角
优点：用户体验地图提供了用户体验的全景视角，涵盖了用户与产品或服务互动的各个阶段。这种全景视角有助于团队全面了解用户旅程中的各个触点和行为。
案例：电商平台可以通过用户体验地图了解用户从浏览商品到完成购买的全过程，识别出所有关键的用户触点。
2.  用户共情
优点：通过记录用户在每个阶段的情感体验，团队可以更好地理解用户的需求和痛点，增强用户共情。
案例：健身App可以通过用户体验地图了解用户在制定和执行健身计划时的情感变化，从而设计出更具吸引力的个性化健身计划。
3.  识别痛点
优点：用户体验地图有助于识别用户在使用产品或服务过程中的痛点和障碍，帮助团队找到改进的机会。
案例：银行在线服务平台可以通过用户体验地图识别出用户在进行转账操作时遇到的困难，进而优化转账流程。
4.  跨团队协作
优点：用户体验地图作为一个可视化工具，可以促进跨团队协作，使不同部门（如产品、设计、开发和市场）能够共同参与讨论和改进用户体验。
案例：电商平台可以通过用户体验地图汇集市场、设计和技术团队的意见，共同制定优化措施。
5.  数据驱动决策
优点：用户体验地图基于用户研究和数据分析，使决策更加数据驱动，有助于制定科学合理的改进策略。
案例：健身App可以通过用户体验地图中的用户数据分析，调整课程推荐策略，提高用户满意度和使用频率。
劣势
打动用户的关键：用户体验地图实战攻略
 
 
1.  资源密集
缺点：制作用户体验地图需要大量的时间和资源，包括用户研究、数据分析和团队协作。
案例：中小型企业可能难以投入足够的资源来全面制作和维护用户体验地图。
2.  复杂性
缺点：用户体验地图可能变得非常复杂，特别是当用户旅程涉及多个触点和渠道时，可能难以全面和准确地记录所有细节。
案例：大型电商平台的用户旅程可能涉及网站、移动应用、社交媒体等多个渠道，制作一个全面的用户体验地图可能需要大量的精力。
3.  动态变化
缺点：用户行为和市场环境是动态变化的，用户体验地图需要不断更新和维护，以保持其有效性和准确性。
案例：健身App的用户需求和市场趋势可能随时变化，需要定期更新用户体验地图以保持相关性。
4.  主观偏差
缺点：尽管用户体验地图基于用户数据和研究，但在数据解读和情感记录上可能存在主观偏差，影响决策的准确性。
案例：银行在线服务平台在记录用户情感时，可能会受到研究者的主观影响，从而无法完全准确地反映用户真实感受。
5.  过于理想化
缺点：用户体验地图有时可能过于理想化，忽略了现实中存在的限制和障碍，导致制定的改进措施难以实施。
案例：电商平台在识别改进机会时，可能忽略了技术实现上的困难，导致优化方案无法落地。
参考文献：
https://medium.com/@michaeljiager/user-experience-maps-6184f4044e48
https://liviayang-ms.medium.com/%E4%B8%80%E5%88%86%E9%90%98%E8%AE%93%E4%BD%A0%E4%BA%86%E8%A7%A3%E7%94%A8%E6%88%B6%E9%AB%94%E9%A9%97%E6%AD%B7%E7%A8%8B%E5%9C%96-user-experience-map-e28a1b8817c0https://uxmastery.com/how-to-create-a-customer-journey-map/https://medium.com/art-marketing/incorporating-customer-and-user-experience-data-into-holistic-journey-maps-502ae12072ac
https://uxplanet.org/empathy-map-user-persona-and-user-flow-5299ada245c8https://medium.com/@myskill.id/persona-user-journey-map-ebd84c15ae2f​
U
 


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

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

WechatIMG27.jpg

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(440)

清晰展现关键信息，助力高效决策——数据图表

ui设计分享达人

合理使用数据图表可以帮助用户更好地理解复杂的数据，提高用户体验和数据的可读性。选择合适的图表类型并遵循最佳设计实践是确保图表有效传达信息的关键。
数据图表是一种非常重要的可视化工具，它能够
帮助用户更直观地理解和分析数据。
借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点：准确性、创新性、简洁性。
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 
清晰展现关键信息，助力高效决策——数据图表
 
 

 


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

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

WechatIMG27.jpg

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(212)

Web端设计语言库——数据可视化

ui设计分享达人

一、可视化原则
数据可视化是把相对复杂、抽象的数据通过可视化手段，表达数据内在的信息和规律，促进数据信息的传播和应用。
Dreawer Design 团队总结了以下四个可视化原则，供设计者参考及使用：
1. 准确
数据图表需精准、如实地反应数据信息的变化特征。
Web端设计语言库——数据可视化
 
 
2. 清晰
让设计服务于数据内容，给用户以最为清晰、明确、迅捷的数据展示。用户看到可视化图表时，应能在 5 秒内了解到它的用途，而不是花几分钟都不能理解各个数据的含义。
Web端设计语言库——数据可视化
 
 
3. 简单
可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
下面为图标类型与认知成本对比：
Web端设计语言库——数据可视化
 
 
4. 美观
优秀的数据可视化界面，会有一套非常严谨一致的版面。这里的一致性需要考虑到布局、结构和内容。
Web端设计语言库——数据可视化
 
 
二、图表解构
1. 构成元素
我们从标题、坐标轴、图例、标签、提示信息、数据图形这 6 个大类，对数据图表进行进一步元素拆解及阐述。设计过程中，需遵循可视化原则来精简数据图表，让用户快速获取图表中的关键信息，完成任务。
 
图表构成 6 大类，元素细分：
1. 标题：图表标题；
2. 坐标轴：X/Y轴线、刻度线、网格线、X/Y轴标题、X/Y轴标签；
3. 标签：数据点、引导线、（文本）数据值；
4. 提示信息；
5. 图例；
6. 数据图形：线、矩形、扇形、环形等。
下面为数据图表的基本构成元素示例（为了便于观察，某些字母做了大写处理）：
Web端设计语言库——数据可视化
 
 
除了以上的常规元素，还有常用于饼图、环形图中的“引导线”：
Web端设计语言库——数据可视化
 
 
2. 标题
标题是概括图表主题的说明文字，一个明确、精简的标题可以迅速让读者理解图表要表达的内容。
2.1 位置
一般位于数据图表卡片的左上方。
2.2 使用建议
标题需言简意赅、符合图表主题；尽量控制在 20 个字以内，标题宽度尽量不要超过卡片宽度。
Web端设计语言库——数据可视化
 
 
2.3超长处理
当标题超过长出卡片宽度时，省略标题中间的文字，保住首尾，如“我是...标题”。
Web端设计语言库——数据可视化
 
 
 
3. 坐标轴
3.1 坐标系
坐标轴包含在坐标系的概念里，因此，我们需要先了解坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。
 
数据可视化中，最常用的二维坐标系有两种：
笛卡尔坐标系：即直角坐标系，是由相互垂直的两条轴线构成。常用于柱状图、条形图、折线图、面积图等。
极坐标系：由极点、极轴组成，坐标系内任何一个点都可以用极径 r 和夹角 θ（逆时针为正）表示。常用于饼图、圆环图、雷达图等。
Web端设计语言库——数据可视化
 
 
补充说明：
1. 坐标轴由定义域轴（X 轴）和值域轴（Y 轴）组成。条形图中，定义域轴为 Y 轴，值域轴为 X 轴。
2. X轴为水平方向的横轴，Y 轴为垂直方向的竖轴。以下主要针对笛卡尔坐标系的坐标轴构成进行分析：
3.2 坐标轴
定义：坐标轴指二维空间中统计图表中的轴，是坐标系的构成部分，它用来定义坐标系中数据在方向和值之间的映射关系。
构成元素细分：X/Y 轴线、刻度线、网格线、X/Y 轴标题、X/Y 轴标签。
3.3 轴类型
根据对应变量是连续数据还是离散数据，可以把坐标轴分为：分类轴、时间轴、连续轴三大类。
Web端设计语言库——数据可视化
 
 
3.4 X/Y 轴线
颜色层级：X/Y轴线要比网格线层级高、颜色深，这样能让图表有主次区分。
使用建议：有网格线时，柱状图/折线图会隐藏 Y 轴线，条形图则是隐藏 X 轴线，以达到信息降噪、突出重点的目的。
Web端设计语言库——数据可视化
 
 
3.5 刻度线
轴刻度线是轴线上的小线段， 用于指示数值标签在坐标轴上的具体位置。轴刻度线有 3 种放置方式：置内、置中（即交叉方式）、置外。
位置建议：刻度线置中/置内时，可能会和网格线、数据图形重叠，所以建议将刻度线置于数值坐标轴外侧，以呈现最佳显示效果。
Web端设计语言库——数据可视化
 
 
显示建议：
折线图：刻度线、X/Y 轴标签、数据点需要保持在同一垂直线上；
柱状图/条形图：由于单个柱子有很强的对应关系，此时可以隐藏刻度线；
Web端设计语言库——数据可视化
 
 
 
3.6 网格线
定义：网格线是用来辅助图表优化映射关系的，我们需要弱化网格线的视觉效果，来增加数据的可阅读性。
作用：1. 延伸数值刻度至可视化对象中，以便观察数据值的大小；2. 增加可视化对象之间的对比观察度。
使用建议 1 ：使用网格线时，需遵从主次原则，以轴线为主、网格线为辅；样式上可采用实线或虚线；避免颜色过重、使用纯黑/纯白色。
Web端设计语言库——数据可视化
 
 
使用建议 2 ：网格线一般跟随值域轴的位置单向显示，柱状图、折线图等采用水平网格，条形图采用垂直网格。
Web端设计语言库——数据可视化
 
 
3.7 X/Y 轴标题
轴标题主要用于说明坐标轴数据组的含义，也可理解为“轴单位”。当可视化图表标题、图例、轴标签等已能充分表达数据含义时，可隐藏轴标题。
这样处理体现了奥卡姆剃刀定律：如无必要，勿增实体。
Web端设计语言库——数据可视化
 
 
3.8 X/Y 轴标签
轴标签是对当前某一组数据的内容标注，用于提高数据的可读性。
以下从 X 轴标签、Y轴标签两方面进行分析：
a.  X 轴标签
X 轴标签的设计重点在显示规则上。卡片宽度过窄、标签过多、名称过长时，X 轴标签便会出现显示问题（如标签重叠等）。
为了解决显示问题，我们从连续/时间轴标签（数值类）、分类轴标签（文本类）两方面进行分析：
 
  •  
    连续/时间轴标签
显示规则：建议等分抽样显示、旋转；不尾部省略。
建议等分抽样：连续/时间轴，通常由一组等差数列组成，具有规律性，缺失的数据用户会在脑海中自动补全。所以建议用等分抽样来避免标签的重叠问题。
注意：等分抽样尽量保留首尾数据标签；随机抽样没有规律，会影响用户的判断及辨认，不建议采取随机抽样显示。
Web端设计语言库——数据可视化
 
 
连续/时间轴标签是由“关键数值”组成的标注点，一般都明确精简，尾部省略会影响用户对关键数值的辨认。
为了保证标签的辨识度，我们可以将标签旋转 45°、 90° 。极端情况下（图表宽度极窄），可以同时进行旋转+抽样。
Web端设计语言库——数据可视化
 
 
  •  
    分类轴标签
显示规则：建议旋转显示；不建议抽样显示。
分类轴由几个离散数据标签组成，标签之间独立存在，无紧密逻辑关系，用户无法自动补全缺失信息。因此，不能采取抽样显示，应尽量展示全部标签的全部文本。
若标签横向展示空间不够（文字重叠），我们可以将标签旋转 45°、 90° 来达到预期显示效果。若通过旋转无法满足需求，可使用条形图，将分类轴放在Y轴。
Web端设计语言库——数据可视化
 
 
旋转方向说明：通常情况下，用户的阅读视线为从左至右、从上到下。因此，标签顺时针旋转 45° 更符合用户的浏览习惯。
Web端设计语言库——数据可视化
 
 
b. Y 轴标签
Y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度进行自适应缩放。
  •  
    轴标签的数量
使用建议：根据米勒定律（7±2 法则），Y 轴标签数量应控制在 5-9 个的范围内；Web页面中，Y 轴常用标签数为：6 或 7（含标签0）。
轴标签的数量越多，横向网格线就会越多。过多的轴标签及网格线会造成元素冗余，违背了清晰、准确的可视化原则，也不利于图表信息的表达及阅读。
对齐方式：右对齐
Web端设计语言库——数据可视化
 
 
  •  
    轴标签的取值范围
基准线： Y 轴标签取值应从 0 基线开始，以反映数据的真实性。如果展示被截断的 Y 轴数据，会导致用户做出错误的判断。
Web端设计语言库——数据可视化
 
 
  •  
    轴标签的数据格式
使用建议 1： 标签保留的小数位数保持统一。
Web端设计语言库——数据可视化
 
 
4. 数据标签
数据标签是对数据点对应数值的标注，用于直接观察每个数据点的具体数值。
若图表主要是用来看趋势变化、占比大小等，则不需要显示数据标签。若想精确了解每组数据的具体数值，则可以显示数据标签。
Web端设计语言库——数据可视化
 
 
4.1 位置
数据标签位于数据点的上方。
4.2 显示规则
在不同类型的图表中，数据标签的显示规则不同。我们可以根据数据图形、数据值的特性，选择合适的显示方式，提高图表的准确性。
a. 柱状图
  •  
    基础柱状图
    ：数据标签可显示在数据图形内部、外部。
数据标签在图形内部的显示规则：正常情况下，横向显示；数据标签超长时，旋转 90°；图形高度 < 数据标签高度时，不显示数据标签。
Web端设计语言库——数据可视化
 
 
  •  
    分组柱状图
    ：数据标签可显示在数据图形内部、外部。显示在内部的数据标签显示宽度不够时，解决方案同上。
Web端设计语言库——数据可视化
 
 
  •  
    堆叠柱状图
    ：数据标签显示在数据图形内部。
数据标签在图形内部的显示规则：正常情况下，横向显示；数据标签超长时，旋转 90°；图形高度 < 数据标签高度时，不显示数据标签。
Web端设计语言库——数据可视化
 
 
b. 条形图
数据标签在图形内部的显示规则：正常情况下，横向显示；图形宽度 < 数据标签高度时，不显示数据标签；条形图高度需 >= 数据标签高度。
Web端设计语言库——数据可视化
 
 
基础、分组条形图的数据标签也可以显示在图形外部：
Web端设计语言库——数据可视化
 
 
c. 折线图
数据标签显示在数据点的上方。
图表宽度过窄，数据点多且密时，相邻的数据标签会出现重叠的问题。此时，我们会采用抽样的方式显示数据标签。鼠标悬停数据点，显示隐藏的数据标签。
Web端设计语言库——数据可视化
 
 
d. 饼图、环形图
数据标签显示在图形内部、外部均可。
由于扇形有角度，且形状相对不规则，对数据标签的文本长度包容度较低，环形更是如此。所以，当扇/环形分割过多、面积较小时，建议将数据标签显示在图形外部。
Web端设计语言库——数据可视化
 
 
当然，我们也可以内外部结合使用：
Web端设计语言库——数据可视化
 
 
e. 数据标签颜色
数据标签显示在图形内部时，图形为背景，数据标签为前景。此时，数据图形作为背景色，会影响到数据标签的显色度及易读性。
为了确保良好的可读性，我们通过对图形颜色 HS 值的判断，来决定文字的颜色。这样对比度就在可控范围内，不会出现可读性低的问题。
Web端设计语言库——数据可视化
 
 
由于篇幅问题，剩余内容接下一篇文章展示
 


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

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

WechatIMG27.jpg

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(189)

从对话到嵌入：多元场景AI形态浅析

ui设计分享达人

前言
 
当我们一次次被AI技术带来的变革所惊艳，当ChatGPT一次次宣布其能力已经突破了人类的想象，你是否注意到现有产品与AI融合的新趋势？值得注意的是，新技术的出现也一定带来了新的交互体验。本文将以多种产品场景为例，梳理PC端多种主流的AI融合形态，希望能给大家带来启发。
 
 
多元场景下的主流AI形态
 
目前主流AI产品有如下3种主要形态，分别为沉浸式的AI智能体(Agent)、伴随式的AI副驾驶(Co-pilot)、嵌入式的AI场景化嵌入(Embedding)。这3种形态在能力、界面、操作体验和适用场景都上存在显著差异。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
 
一、沉浸式形态
 
AI智能体(Agent)—功能强大的AI伙伴
 
一个富有主动性的独立伙伴，输出的结果不完全依赖用户的输入，启动AI问询后有2种主流的形态：
 
①「对话智能体」 以对话流的形式展示信息，用户通过在当前语境下进行追问获取最终结果；
 
②「目标智能体」用户输入指令后，一次性给予用户“靠谱”的结果，配有侧边栏可进行多种辅助操作。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
1.对话智能体示例—Gemini
 
以谷歌Gemini产品为例，其作为对话流的智能体，为满足搜索场景，具有以下特征：
 
1）冷启页Prompt形象化
 
相较于2023年初Gemini冷启时的样式，最近改版中冷启的Prompt卡片变得形象化，当然我们也在其他Agent产品中观察到了这一变化。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
2）多模态内容
 
理解用户的文字意图，依据要求自主生成多模态卡片是对话智能体的主要特征之一，该功能可以极大地丰富AI反馈的多样性，并能提高信息传达的效率。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
3）信息索引的显示
 
信息索引的展示是提升AI回答权威性和透明度的关键因素。然而，直接在阅读内容中嵌入索引标签，可能在某些情况下影响用户的阅读连贯性。以Gemini为例，当前的设计允许用户在卡片下方手动启用索引信息，这种灵活性平衡了信息的可信度和阅读体验，适合多数日常场景。
 
当然，从设计角度考虑，某些情况下默认收起索引并非最佳选择。在用户高度依赖信息准确性的场景中，如金融或医学领域，索引的可见性将会直接影响信任感。对于深入研究或延展阅读需求较高的用户，即时查看索引能更高效地获取信息来源。
 
与之类似，在涉及多方信息传播的业务分发场景，清晰可见的索引有助于减少误解，提高效率。在这些情况下，索引的默认展开不仅强化了内容的可靠性，也更好地支持了用户的深入需求。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
2.目标智能体示例—Perplexity
 
Perplexity作为最近广受好评的AI搜索工具，相较于Gemini，它更注重给予用户最精准的答案。基于RAG技术的Perplexity为用户提供了一种新的“确定性”，而鉴于这种特征，Perplexity拥有双面板的形态，可以对当前确定性的信息进行深化处理。
 
1 ）输入即结果
 
相较于Gemini等对话智能体产品，AI Agent用户需要反复追问结果，而在体验Perplexity时的无对话场景感，更倾向于一次性给予用户“靠谱”的答案。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
2）侧分栏—信息补充
 
因为Perplexity一次就可以给予用户最“准确”的信息，用户可能没有追问的必要，但可能会有对于当前问答进行深度搜索的需求，这时会有右侧GUI分栏的出现，以便用户进行辅助搜索。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
3.思考：给予用户最佳答案的AI形态
 
在使用体验上，Gemini与Perplexity虽然走向两个不同的流派，但目的都是为了给用户呈现最佳的搜索结果。Gemini就像一位富有想象力的对话者，用户在对话中通过不断地追问来获得最佳的结果，而Perplexity更像一个AI版的知乎，它坚持“用户不会犯错”原则，冷静客观地为用户提供最精准的答案。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
 
二、伴随式形态
 
AI副驾驶(Copilot)—被动性的AI助手
 
这种形态下的AI更多扮演“副驾驶”的角色，为用户提供建议和帮助，依赖用户精准的指令对当前内容窗口进行操作，一般以侧边栏形式展示，目前的Office文档类产品多采用此类形态。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
1.AI副驾驶产品示例-Office
 
在近年的开发者大会中，微软提到最多的词就是“Copilot”，力推将AI技术快速融入到旗下应用中。其中，Office软件就融入了AI副驾驶的理念，该形态下的AI主要为用户提供产品的创作辅助、信息的查询总结等功能。
 
1）当前场景下的AI助手
 
AI的能力默认被限定在当前场景下，满足用户问询、信息检索、创作辅助等操作。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
2）被动性AI助手
 
Copilot无法自动执行操作去修改当前页面内容，需要用户确认后才可执行，用户执行操作后会在侧边栏内显示操作记录与撤销操作的入口。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
3）辅助Prompt
 
由于AI副驾驶的特性，常常需要准确的Prompt才能执行符合预期的操作，这对大部分用户来说门槛较高，因此在使用时需要及时给予用户合理的联想Prompt，辅助用户决策。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
2.思考：提高用户工作效率的AI助手
 
作为被动性AI助手，用户即使不使用也不会影响其在整体页面中的操作，AI更多承担的是提升用户工作效率过程中的辅助角色。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
 
三、嵌入式形态
 
AI场景化嵌入(Embedding)
 
嵌入式AI主要聚焦特定场景的AI辅助，如AI即时性地生成对当前评论的回复，此类交互无固定形态，AI会在用户进行高频重要操作时即时触发。
 
在多元化场景中，嵌入式AI的设计相较于前两类更加灵活和轻量，通常以LGUI(轻量化用户界面)为核心，强调用户与AI之间的无缝衔接与高效互动。
 
与对话式或结构化阿拉丁模式相比，嵌入式AI的设计思路更加通畅，摒弃了复杂的交互流程，更注重场景中的引导性和即时反馈，帮助用户在合适的时机获取所需信息。
 
从对话到嵌入：多元场景AI形态浅析
 
 
 
1.嵌入式AI示例—One Drive
 
以微软One Drive为例，嵌入式AI不仅会在用户整理文件时提供智能建议，还能在用户分享文件时根据历史记录和内容精准推荐分享对象。这种场景化的嵌入，展现了如何通过LGUI设计最大化提高效率，而非依赖传统对话或复杂交互。
 
场景一: 文件整理AI建议
 
在AI为相关文件创建新文件夹的情境中，执行完成后，它会主动询问用户是否需要将其他可能相关的文件一并移入到新建的文件夹中，以帮助用户进一步整理文件。AI能够基于文件内容的上下文，敏锐地判断出哪些文件可能属于同一类别，进而为用户提供便捷的一键整理服务。
 
场景二: 智能分享建议
 
当用户准备在One Drive中分享文件时，AI助手会根据文件内容和用户的历史分享记录，预测出最可能需要分享的对象名单，为用户精准推荐受众人员。智能分享建议可以极大地节省用户挑选分享对象的时间。
 
基于上述2个例子，我们可以对嵌入式AI有进一步的思考：
 
合理的嵌入式AI操作只在用户进行重要操作时被“激活”，能够在当前场景下即时给予用户建议；
 
嵌入式AI一般情况下点击大于录入，方便用户快速做出决定；
 
设计此类交互时，需要深度理解用户使用场景，AI的唤起不应干扰用户对于主流程的操作体验。
 
2.思考：效率导向的AI嵌入设计
 
对于普通设计师来说，容易在纯对话交互和结构化设计两端摇摆，可能忽视了效率也是设计的重要原则。嵌入式AI的设计启示在于“什么合适用什么”，既不过度依赖复杂的对话式设计，也不拘泥于结构化方案。关键在于聚焦场景需求，以最简便和有效的方式帮助用户完成任务。因此，在嵌入式AI的设计中，保持界面的简洁与流畅，同时结合轻量化的LGUI原则，才是提升用户体验的关键。最终目标始终是“效率”，无论采用何种形式，选择最适合当前场景的交互模式才是设计的核心。
 
 
未来的AI设计
 
多样化形态下的平衡与共生
 
随着AI技术的迅速发展，各种AI形态在不同场景中不断涌现，如上述讨论的沉浸式、伴随式、嵌入式等设计形态。无论是主动性强的智能体、辅助型的副驾驶，还是轻量化的嵌入式方案，每一种设计都展现出其独特的价值。
 
然而，在这些多样化的形态背后，我们仍需回归一个核心问题：什么样的AI设计才是理想的？
 
  •  
    首先，没有一种AI形态能够完美适用所有场景，真正成功的AI设计应始终围绕需求展开。在效率为先的原则下，设计师需要深刻理解用户在不同情境下的核心需求，并选择最适合的交互形态。复杂的对话式和高度结构化的设计并非万能，嵌入式AI的灵活性和轻量化设计则为平衡提供了启发—服务于效率与体验，简化不必要的交互，专注于解决用户的实际问题。
 
  •  
    其次，AI设计的多样性并不意味着割裂，而是指向共生与融合。未来，AI技术将进一步打破不同形态之间的界限，形成更加灵活、动态的交互模式。这种融合不仅依赖更智能的技术，还要求设计师在实际应用中敏锐捕捉用户需求，提供真正有价值的解决方案。
 
  •  
    最后，设计的核心原则是以用户为中心，强调合适性，而非追求炫技。无论是大型智能体的复杂场景处理，还是嵌入式AI的场景化介入，优秀的设计应始终聚焦用户需求，在不同场景中找到最优平衡点。随着技术的进化，设计师需要更加专注于如何将AI技术自然、无缝地融入用户的工作与生活，使每一次交互都变得更加高效和愉快。
 
在未来，AI的形态将会更加多元，但不变的仍是设计师对效率、用户价值和场景适配的持续探索。希望设计师在面对AI设计时，始终寻求既符合用户需求又能提升效率的最佳方案。


作者：百度MEUX
链接：https://www.zcool.com.cn/article/ZMTYzMzkxNg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(283)

用户体验一致性思考

ui设计分享达人

前言
在团队内部，我们已确立了一套设计规范，在日常项目中使用设计规范输出变的高效、统一。然而，在实际操作中，不可避免地会遇到一些特殊情况：某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此，深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时，灵活应对多变的需求，确保设计既保持统一和谐，又能满足特定场景下的独特需求，从而实现用户体验与品牌价值的双重提升。
 
用户体验一致性思考
 
 
用户体验一致性思考
 
 
在UI/UX设计中，雅各布·尼尔森的十条可用性原则中，一致性（Consistency and standards）位列第四。这一原则强调在界面和交互设计上需要遵循既定的规则，无论是在应用内部还是跨平台之间。
背后的心理学原理——重复定律，强调了信息重复对于巩固记忆的重要性。正如赫尔曼·艾宾浩斯通过“遗忘曲线”所揭示的，信息的有效保留离不开重复接触。一致性的应用正是这一原理的生动实践，通过不断重复统一的设计元素与模式，强化用户对产品的认知与记忆，从而提升整体的用户满意度与忠诚度。
艾宾浩斯遗忘曲线
艾宾浩斯遗忘曲线
 
用户体验一致性思考
 
 
用户侧
1、用户学习曲线：
一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时，他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑，提高了他们的效率和满意度。
2、提升可用性：
一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时，他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务，减少错误和迷失，提供更好的导航和流畅的体验。
3、品牌认可度：
一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格，品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性，从而增加品牌的信任和忠诚度。
4、用户满意度：
一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时，他们会感到更加舒适和自信。一致性传递了专业和质量的信号，让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度，并促使他们持续使用和推荐你的产品或服务。
 
用户体验一致性思考
 
 
产研侧
1. 降低设计成本，提高开发效率
无论是设计还是开发，复用已有的组件资源，保持界面的一致性可以有效地减少设计的投入，避免不必要的设计分歧点。
而在开发阶段，可以避免重复造轮子，提高开发的效率，保证落地效果，也可以减少上线前设计走查、测试的工作量。
2. 形成一致的设计风格
根据原子设计理论，通过原子组件的一致性，可以构建出统一的界面框架、布局，形成统一风格和用户交互认知，从而更好地保证用户体验质量。
 
用户体验一致性思考
 
 
色彩
色彩作为一种兼具物理属性与感官享受的复杂现象，其本质在于光波在人体视网膜上的特定波长被反射或吸收后，所引发的视觉感知结果。在设计领域，色彩的选择与运用不仅是视觉艺术的展现，更是品牌身份与个性的直接体现。诸如饿了么标志性的蓝色、美团鲜明的黄色、以及京东热情的红色等，这些品牌专属色彩不仅构成了品牌识别系统的重要组成部分，还通过其高度的一致性，在视觉层面上构建起强烈的品牌认知，营造出统一和谐的视觉体验。
色彩的一致性策略在品牌塑造中发挥着不可估量的作用，它能够有效增强品牌的记忆度与辨识度，深化品牌形象在消费者心中的烙印，进而提升产品的市场吸引力和用户忠诚度。同时，这种策略还促进了设计元素间的和谐共存，包括按钮、图标、字体、标签、背景、以及关键视觉元素如Banner等，均能在统一的色彩体系下实现视觉上的连贯与流畅，极大地提升了产品的可用性、无障碍性，以及用户在使用过程中的整体满意度与交互体验。
 
用户体验一致性思考
 
 
字体
字体作为设计中不可或缺的核心要素，其独特性在于能够精准地塑造文字的视觉形象，涵盖形状、尺寸、粗细、字间距等多维度特征。这些特征共同构建了一种独特的文字风格，不仅承载着信息的传递功能，更在无形中引导着用户的视觉流程，影响着信息的接收与理解深度。因此，在设计过程中，合理选择与应用字体显得尤为关键。
 
字体类型的多样性，如有衬线字体与无衬线字体的对比，不仅体现了风格上的差异，还隐含了不同的阅读体验与情感表达。字体的粗细变化（如细体、常规、粗体等）更是能够强调文本的重要性层级，增强信息的层次感与可读性。此外，字重的调整也是塑造视觉焦点、引导视线流动的有效手段，对于提升设计的整体美观度和信息传达效率具有不可小觑的作用。
 
然而，在实际的开发与实现过程中，若不加节制地使用多种字体，不仅会显著增加页面的加载时间，影响用户体验的流畅性，还可能因风格不统一而导致页面显得杂乱无章，破坏整体设计的和谐感。因此，制定一套统一、规范的字体使用策略显得尤为重要。这不仅有助于提升开发效率，减少后期更新迭代的复杂度，还能有效避免资源浪费，确保设计作品在视觉上的一致性与专业性。
 
用户体验一致性思考
 
 
图标
 
图标作为用户界面设计中至关重要的元素，风格直接影响到用户的使用体验与对产品的整体印象。图标以其简洁、直观且富有表现力的特点，在快速传达信息、引导用户操作方面发挥着不可替代的作用。在设计中，图标的设计与应用更是需要精心考量，以确保其既能够准确传达信息，又能够与整体设计风格保持一致，从而营造出专业、和谐且易于使用的界面环境。
 
设计中视觉上保持统一包括图标的大小、形状、色彩以及设计风格等多个方面，能够增强用户的认知连贯性，降低学习成本，提升使用效率。相反，如果图标风格混杂，不仅会让界面显得杂乱无章，还会给用户带来困惑和不安，进而影响其对产品专业性和安全性的信任。
用户体验一致性思考
 
 
按钮
按钮设计应统一于项目风格，无论是圆形、矩形、圆角矩形还是特定形状，保持一致性是关键。统一的按钮样式不仅彰显专业性，还能增强用户信任，确保体验连贯。过多变化的按钮样式会扰乱用户界面，降低操作直观性，甚至让用户误以为自己已离开应用环境。因此，精心设计的统一按钮样式对提升用户体验至关重要。
 
排版
设计中的排版一致性对于构建高效、用户友好的界面至关重要。一致的排版不仅能够让用户快速适应和理解界面的整体结构，大幅降低学习成本，还能在用户心中激发强烈的归属感和安全感。这种熟悉感使得内容更加易读，用户能够自然地依照既定的视觉动线流畅地浏览页面，迅速定位并获取所需信息，从而显著提升信息获取的效率。因此，在设计过程中，注重并维护排版的一致性，是提升用户体验和界面有效性的重要策略之一。
 
 
用户体验一致性思考
 
 
 
操作流程的一致性
标准化流程
：确保用户在执行相似任务时，如购买商品、搜索信息或提交表单等，能够遵循相同的操作流程。这有助于用户快速适应并高效完成任务。
逻辑清晰
：操作流程的每一步都应符合用户的认知习惯和行为逻辑，避免让用户感到困惑或不知所措。
用户体验一致性思考
 
 
交互元素的一致性
按钮和控件
：确保按钮、输入框、下拉菜单等交互元素的样式、位置和操作方式在整个应用或网站中保持一致。例如，所有按钮都应具有相同的视觉风格和触发机制。
导航和菜单
：导航栏和菜单的设计也应保持一致，使用户能够轻松地在不同页面或功能之间切换。
 
用户体验一致性思考
 
 
反馈机制的一致性
操作反馈
：当用户执行某个操作时，应用或网站应提供一致且及时的反馈，如加载动画、成功提示或错误消息等。这有助于用户了解操作结果并采取相应的行动。
状态提示
：对于长时间运行的操作或需要用户等待的场景，应提供明确的状态提示（如进度条），以减轻用户的不确定感和焦虑感。
 
 
 
 
 
 
在任何维度上，一致性不应成为设计的唯一导向。设计，这一融合了艺术与科学的复杂领域，要求我们在用户体验的细腻雕琢、功能需求的精准满足、美学价值的深刻体现及技术可行性的严格考量间游走。
 
“一致性”作为设计策略，其核心使命在于优化用户路径，降低认知门槛，确保用户在多元界面中穿梭时仍能感受到连贯与和谐。当我们在与设计团队（包括工程师、产品经理等）沟通时，仅仅提及“一致性”可能并不足以说明其必要性和价值。我们需要更深入地阐述为什么需要保持一致性，以及它如何具体帮助减少用户困惑、提高用户满意度和忠诚度。
 
同时，我们应清醒认识到，“一致性”并不是万能的。在某些情况下，为了追求极致的用户体验或解决特定的设计问题，可能需要打破传统的一致性规则。因此，设计师需要在保持一致性和创新之间找到平衡点，根据具体情况灵活调整设计方案。
 
实际落地执行时，要根据产品定位、用户场景，结合业务功能来确定设计方案，不能为了一致而一致。
当我们遇到一致性问题时，还是需要从以下3个方面深入思考，做出准确合理的设计决策。
用户体验一致性思考
 
 
真实项目
真实项目
 
在SaaS产品设计中，特别是面向B/G端（企业用户）时，满足不同用户角色（如普通用户与高权限领导）的需求是至关重要的。
管理端布局设计
普通简洁明了
：为普通用户设计的管理界面应简洁直观，聚焦于日常操作，如数据查看、统计和下载。
功能分区
：通过清晰的导航栏或侧边栏将功能区域划分开，如“数据概览”、“报表下载”、“任务管理”等，便于用户快速定位所需功能。
操作便捷
：确保常用操作（如搜索、筛选、排序）易于触达，减少用户点击次数和页面跳转。
 
首页版心定宽设计
固定宽度
：为首页设定一个合适的固定宽度（如1200px、1440px等），以保证内容在大多数屏幕上都能保持一致的阅读体验。
信息模块化
：将首页内容划分为多个卡片，每个卡片承载一个独立的信息单元（如数据报表、通知公告、项目进展等）。
视觉层次
：通过颜色、大小、阴影等设计元素区分卡片的重要性，引导用户视线，提高信息获取效率。
交互性
：为卡片添加交互元素，如点击展开、滑动查看更多等，增加用户参与度和页面活跃度。
 
用户体验一致性思考
 
 
位置差异性分析
根据「认知负荷>视觉负荷>动作负荷」理论，在页面中我们首先要让用户能够找到按钮，然后完成操作。
相对于弹窗，页面的空间更大，边界感偏弱，用户的视觉重心更容易停留在左侧表单内容区域。所以按钮应该紧随搜索条件，便于用户快速发现按钮。
区域用户已经形成下意识操作习惯,虽然区别于规范,只能打破,遵循客户需求
用户体验一致性思考
 
 
一致性是规则
“一致性”作为规则或手段，服务于提升用户体验的原则。规则与原则一致时，促进业务共识与用户价值；冲突时，原则优先。用户体验原则指导下的一致性，要超越表面控件统一，更在于产品决策与价值取向的一致。必要时，为更好的用户体验，可在规则上让步以实现原则统一。打破规则需慎重权衡，确保用户便利足以弥补理解成本，需长期全局考量。规则非僵化教条，而是引导我们谨慎创新的框架。
 
一致性的底线
无论从哪个角度，一致性存在的必要性都是毋庸置疑的。
对于关键的设计元素，如专有名词和颜色体系，保持一致性至关重要。这不仅有助于维护品牌形象，还能减少用户的困惑。
特定设计语言在特定场景下的变体应用，虽然可能带来一定的视觉新鲜感或针对性优化，但往往需要谨慎评估其潜在风险。一旦变体打破了整体设计的一致性，可能会破坏用户对品牌的熟悉感和信任感，甚至引发误解。因此，在追求设计创新的同时，必须确保这种创新是基于一致性的原则之上，以维持品牌的整体性和用户的良好体验。
 
拥抱复杂性
一致性确实不应成为设计师的避风港或限制创新的枷锁，而应是基于对业务深刻理解和多样化设计能力之上的价值选择。设计师的核心任务始终是满足用户的多样化需求和偏好，这需要他们细致入微地观察、理解并解决每个用户的独特问题。
 
在追求一致性的同时，设计师应保持“第一性思考”的能力，即回归问题的本质，从用户需求出发进行创新设计。多样性页面的产出，不仅体现了设计师的创造力和灵活性，也是提升用户体验、增强产品吸引力的关键。
 
一致性与创新设计并非相互排斥，而是相辅相成的关系。真正的一致性不应导致单调或拒绝创新，而应是在遵循品牌或产品核心价值的前提下，鼓励设计师在细节和体验上不断探索和突破。当设计师感到被既定规则束缚时，应勇于质疑并重新评估当前的规范，确保所谓的“一致性”不是刻板的伪命题，而是真正符合用户需求和品牌发展的价值导向。
 
因此，设计师应时刻保持开放的心态和敏锐的洞察力，不断探索和尝试新的设计方法和理念，以更加灵活和创新的方式实现一致性与用户需求的完美融合。
 
用户体验一致性思考
 
 
重要的设计原则
「一致性」作为设计领域中的一项基础性原则，其重要性不言而喻。它不仅为设计过程提供了稳固的基石，还显著促进了开发效率与产品体验的全面升级。在设计实践中，一致性确保了界面元素的统一性和连贯性，使得用户能够迅速熟悉并掌握产品的使用方式，降低了学习成本，增强了操作的直观性和便捷性。
灵活变通使用
一致性原则并非一成不变的强制规定，而是需要根据产品的具体定位和市场环境进行灵活变通的应用。不同的产品可能面向不同的用户群体，拥有独特的品牌调性和功能需求，因此在追求一致性的同时，也需充分考虑这些因素，确保设计既符合品牌特色，又能满足用户的实际需求。
 
提升用户体验是价值所在
一致性的真正价值在于其能够显著提升用户体验。通过遵循用户的认知和习惯，设计师能够创造出更加自然、流畅的操作流程，使用户在享受产品功能的同时，也能感受到品牌所传递的舒适与和谐。因此，在追求设计一致性的过程中，我们始终应以人为本，将用户的体验和感受放在首位。建设有兼容性和长期价值的的一致性框架，在一致性中做到有用户价值的设计，是设计师应该不断探索的命题。
 
 


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

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

WechatIMG27.jpg

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 
评论(0) 浏览(215)

打动人心的直觉设计

ui设计分享达人

前言
之所以对“直觉设计”产生兴趣还要源于我们每次的设计评审，在跟其他设计师还有我们的业务方沟通时，大家常常会问到的且令人印象深刻的问题是：
 
“用户怎么知道点哪里？”、“这符合用户直觉吗？”
 
类似的灵魂拷问涉及到用户使用工具产品行为流程的每一步操作。作为设计师大家有时也会心生质疑，“这么明显用户注意不到吗？这么简单用户不可能不会操作吧...”。
 
但是随着我们的”新手体验官活动“的逐步进行，当亲自站在用户面前观察用户是如何操作和理解工具时，我们渐渐意识到小白用户
 接触-认知-使用工具
的每一环都是至关重要的，即便是一个交互细节的设计都有可能带来认知和操作层面受阻，从而劝退用户。
 
因此，我们想去了解什么样的设计是符合用户直觉的，是易用的，同时也想去了解主流3D建模软件的核心建模逻辑（SU、Revit为代表）--于是开始了“直觉设计”的研究以及“建模课程”的学习。
打动人心的直觉设计
 
 
 
1、什么是直觉设计？
首先来看什么是直觉设计，直觉设计是指用户无需进行有意识的思考就可以立即理解并知道如何去使用产品。国外有不少的用户研究机构也专门定义过直觉设计：
 
“在特定任务的背景下，技术系统可以直观地使用，而特定用户能够有效地交互，而不是有意识地使用先前的知识。”– 用户界面的直观使用 (IUUI) 研究小组。一个由跨学科研究人员组成的团队，致力于探索如何定义直观的使用和界面。
 
为了方便大家更好的理解直觉设计，我们先来看几个例子：
打动人心的直觉设计
 
 
 
案例1-玩具收纳：小朋友在玩完玩具以后，把玩具摆的到处都是，如果发号施令告诉小朋友“去把玩具收拾起来”，小朋友通常不会去收拾。如果将收纳设计成为一种小游戏，小朋友会自然而然的参与其中并且会觉得非常有趣。
案例2-公共环境卫生：保持小便池的清洁，张贴告示语“注意保持清洁”大多是没有用的。荷兰的设计师在公共的男士小便池里设计了一个“苍蝇”，利用人们的嫌恶心理会发现小便时会不由自主的对准中心的位置，从而减少尿液四溅，维护公共环境卫生。
案例3-公共设施：设有传感器和扬声器的台阶，人们只要踩上去就能听到音乐声，从而达到鼓励人们爬楼梯的目标。
案例4-工业产品设计：很多耳熟能详的工业产品中也运用了直觉设计，例如深泽直人的CD播放器，Apple的Vision OS系统等等。
案例5-游戏设计：游戏中非常多的运用了直觉设计，比如超级马里奥，塞尔达，想必大家都深有感受。
 
通过上述案例我们发现其实直觉设计传达出来是信息包含两方面：用户看到就能够理解是什么，且能够不由自主地产生行动。
打动人心的直觉设计
 
 
 
看到这里，大家可能会好奇为什么会产生这种”直觉设计“？接下来让我们一起来看看直觉设计是如何产生的。
 
2、直觉设计如何产生？
人的直觉设计是怎么来的？是天生的吗？带着这样的疑惑，我们阅读了相关书籍和文章。
 
先天视觉和经验直觉
先天直觉，也可以说是”本我“，是最原始的”心理现实“，在个体从外部世界获得经验之前就存在的内部世界，不需要经过学习或训练。比如婴儿时期的特征，希望立刻得到满足、躲避痛苦、强大的求生意愿等。
 
经验直觉，巴普洛夫的实验想必大家都知道。有机体能够把已有的经验迁移到新的学习环境中去，从而扩大学习范围。
 
先天直觉一般对应于人类的第一信号系统，是建立在人的直接感觉上的，通过人的感觉（视觉、听觉、触觉等）而进行的一种思维活动；经验直觉（逻辑性直觉直觉）思维虽然利用了人类的感性认识（感觉、知觉、表象等）形式，但它绝不是仅仅停留在这一步上，而是超越了逻辑思维形式达到了更高一个层次上的思维。
 
从表面上看，逻辑性直觉的结果是以直观的形式表现出来的，实际上它已经在头脑中进行了逻辑程序的高度压缩，迅速地越过了“理性认识阶段”，是简缩了整个逻辑思维过程的一种思维形式。
所以，逻辑性直觉既源于感性认识，又高于感性认识，是一种常常能在极短的时间内完成，并能够对问题迅速作出回答的一种无意识的、跃进式的直觉形式。
 
构建直觉，现有研究指出，分析加工和直觉加工两者可能处于不断的相互转换之中。一方面，分析加工可以通过熟练化形成经验图式，从而减少认知资源的消耗，并由此转化为直觉加工；另一方面，当直觉加工无法通过已有经验解决新的问题情境时，又需要调动更多的认知资源并转向分析加工，直到形成新的经验图式。
 
先天直觉大家都容易理解，接下来我们重点看一下经验直觉是如何产生的？
 
经验直觉的产生与人生存的环境密切相关，所以这里包含两个关键点：物理世界（环境）和生活环境。
 
来自物理环境的经验
物理环境主要包括我们生存的自然环境，以及我们与物理环境的互动所形成的感官运动。人类在婴儿时期就开始体验和实验物理环境。这种体验建立在我们第一次拿着一个物体、第一次把它扔到地板上、第一次学会爬到我们最喜欢的玩具等时学到的基本感觉运动技能上。我们对物理世界的体验它已成为日常生活的一部分。经过物理环境互动所形成的直觉是跨越国界、且不会被遗忘的。
来自文化环境的经验
通俗的讲指社会文化环境。它包括人类通过其获得的知识和技术开发的所有物质文化元素。例如，房屋、村庄、城镇、公路和铁路网络、交通方式、工业单位、田野、医院、体育场馆、娱乐设施、市场、港口以及日常和特殊用途的物品。除此之外还包括价值观念、道德信仰、语言、符号、审美观念、风俗习惯等各种规范。
 
例如播放图标“►”是许多文化中的人们在年轻时学习符号的一个很好的例子。在任何可以使用媒体播放器的文化中，人们都知道 ► 图标的含义。它的直观性几乎与物理世界中的对象行为一致。
 
因此，在媒体播放器中，人们理所当然的希望可以延续“►”符号的含义。来自文化环境的知识也可以变得很直观，但是由于没有来自物理世界的持续提醒之后，很容易被遗忘。
 
因此在提供直觉设计时，应尽量符合用户从物理世界中获得的经验与技能。但如果我们的用户群体是具有相同文化背景下的人群，符合文化环境的知识与经验也可以作为直观设计的决策依据。
打动人心的直觉设计
 
 
 
3、为什么要符合直觉设计？
给用户留下良好的第一印象，助力产品赢得并且留下用户。
当我们开始使用某款产品时，用户往往在几秒内就会产生第一印象并且往往会保持不变，少则几分钟多则十几分钟用户就可感受到产品的价值。
 
渥太华卡雷顿大学的Gitte·Lindgaard和她的研究小组发现：人类对事物的初始印象在50毫秒内就会形成。研究小组准备了一批要么极易入眼要么混乱不堪的网页，让一批志愿者在快速变换中投票。虽然这些网页以50毫秒每张的速度一闪而过，但是研究发现他们的评价与长时间观察后的结果基本无异。
 
这就说明了用户的第一印象非常明确且重要，帮助用户判断出这是否是一个设计合理的网站。如果用户停留时间再长一点，那么用户足以判断出网站上的信息是否是满足自己需要的信息，从而影响用户是否继续停留下来去使用该网站。
 
更容易让用户达到心流状态、沉浸式的使用产品，并且持续吸引用户使用产品。
符合用户直觉的、熟悉的操作模式，作为用户直观使用的基础，更容易产生积极的审美评价。相反，如果用户的认知流畅性受阻，则不太会产生正面积极的评价。简洁有力的设计会促使用户再次使用产品，是保持产品吸引力的最佳方式。
 
4、如何使设计符合用户直觉？
因为工作中涉及到3D建模软件的设计，所以这部分将结合3D建模软件来探讨。
 
如果您接触过3D建模软件，一定用过SU、Rhino吧，我们在使用后不久，就能清晰的感受到它们的核心逻辑，比如SU的推拉，Rhino的曲面建模等，进而能够举一反三的学会相关功能，使软件的学习变得更简单更直觉。那么怎样的功能设计才能打造出软件的核心逻辑，让其在使用时更加符合用户的直觉？
 
为了得到以上问题的答案，我们进行了SU和Revit这两款建筑领域主流软件的使用，感受两款软件在直觉设计方面的表现，进而找到了一些设计原则指导我们在实际业务中应用。
 
充分了解你的用户
每个人在自己生活的世界里，都会形成自己的一些认知，这个前面也已经介绍过。所以要充分了解用户的知识、技能、经验，尽可能减少用户当前具备知识与完成目标所需具备的知识之间的Gap。当用户已具备的知识和完成目标需要的知识之间的差距越小，越符合用户的直觉，越容易实现目标。
打动人心的直觉设计
 
 
SU和Revit都是充分了解自己的用户，基于用户群体的知识、技能、经验等特点，去打造自己软件的核心逻辑，符合目标用户群体的使用直觉。
SU 
 ▽
SU的Slogan 是“3D for Everyone“，人人可用。他的用户群体非常广泛，所以它是一个业务属性较弱的工具，界面设计和操作使用上更简单，普适性和灵活性更强。使用面作为基本单元建模，推拉面成体，推推拉拉就可以快速完成建模。对于小白来说很容易上手。
 
Revit  
▽
Revit的用户主要是专业的建筑师，场景聚焦在建筑相关领域，所以它是一个业务属性较强的工具，将更多的业务场景包含在里面。比如标高、工作平面以及模块化的构件等，这样的设定对于建筑背景的用户来说，可以更符合他们的已有认知。
 
将从物理世界和文化环
前面反复提到过过，用户总是利用她在物理和文化环境中的经验来了解她通过界面可以采取哪些行动。因此我们需要熟知用户已有的这些经验，并考虑到设计中。
 
通过联想或类比，将物理世界的经验运用到数字产品设计中，使得全新的事物变得熟悉。
 
SU 
 ▽
SU的图标非常直观好懂，比如画笔、橡皮擦、油漆桶、量尺、放大镜、材质刷、垃圾桶等等，图标的语意和其在物理世界的功能是相符的，哪怕是第一次接触建模软件的人，只看图标也能大概猜出对应的功能。
打动人心的直觉设计
 
 
 
Revit  
▽
Revit将物理世界中房子映射到设计中。比如像墙、门、窗、柱、屋顶等，这是作为一个房子基本组成结构，对于建筑师来言，非常熟悉。所以在软件设计中，功能也是基于这种具象的构件分类的，在用户使用之前，内心已经有了房子的认知，从而也能在产品中找到对应的功能，理解成本很低。
 
打动人心的直觉设计
 
 
结合用户在已有的文化环境中获得的认知与经验：比如在类似产品中或你的产品所教给他的一些知识、经验，并保持这些经验的一致性。
 
SU 
 ▽
很好的匹配用户已经存在的认知。提及SU就会想到它的推拉交互，推拉面成体。一方面它底层的点线面逻辑是我们学习数学或绘画最基础的知识，几乎人人都知道；另一方面推拉的操作也是和我们已有的推敲形体的过程体验是一致的，我们在绘制草图时，会在纸上勾勾画画，涂涂抹抹，这跟在SU上推推拉拉有异曲同工之妙，我们使在用它时能够享受手绘一般的乐趣，很难忘记这个操作。
打动人心的直觉设计
 
 
Revit  
▽
同为Autodesk公司产品，Revit的用户与Autocad有着大量的重叠，因此在交互上也延用了不少CAD的固有逻辑，将用户在CAD获得的认知与经验沿用在这里。与AutoCAD一样 ，Revit快捷键
也
是该命令英文单词的第1个或前面2个字母，这使得用户无需再学习。
 
以及为了让用户切换软件成本最小，Revit中还支持一个指令可以设置多个快捷键，这样可以兼容喜欢自定义快捷键的高阶用户的习惯。例如在AutoCAD里习惯用Ctrl+1 呼出属性面板，而如果按 Revit 快捷键的逻辑则应该是"属性"英文取用 PP，对于已熟悉AutoCAD操作的用户来说，这么高频的指令改变会造成极大的不适应，默认兼容多个快捷键就是非常优雅的解法。
打动人心的直觉设计
 
 
用户认知和行为要足够简单
关于1+1=？，大家看到后会自然而然的想到答案；28×4=？，稍加思索也能给出答案；那么3927÷23=？，看到这个问题，可能几乎没有人想要解开了。有些问题无意识的解开了，有些问题看到就想放弃解答。由此可见改变人们行为方式的通常是能否足够简单和容易，当眼前的问题复杂时，人们不会试图解决它。
 
SU 
 ▽
吸附非常的自然。当我想移动到某个位置的时候，很自然将鼠标靠近目标对象，就会帮我精准的吸附到对应的位置
 
打动人心的直觉设计
 
 
补面非常简单。当形体发生破面的时候，自然的想要绘制线去补全，当我沿着要补全的路径绘制两个点的时候，整个面被补好了。
打动人心的直觉设计
 
 
 
5、实战：应用最佳设计原则
将我们在建模软件中学习到的有助于直觉设计的内容进行总结，得出几条原则，并将这些设计原则应用到实践当中，指导我们进行设计。
 
心理学中也提到，人的大脑处理不同的信息时所消耗的脑力资源是不同的，他们的排序是认知>视觉>行动。用户花费的脑力资源要多于点击按钮或移动鼠标时（动作负荷）。所以我们在设计的时候，首先要从认知上降低用户的认知负担，其次在行为上确保操作丝滑顺畅。
 
认知上，降低认知负担
提升信息的识别性。
比如位置、信息分组的逻辑、颜色、比例等的使用等。作为别墅设计软件，在进行功能分类时，要以用户使用的流程、场景，识别的效率等为依据进行合理分组。
打动人心的直觉设计
 
 
提高和用户已有认知的匹配。
作为别墅设计软件，设计要与用户已有的对别墅对房子的认知相匹配。比如檐口线、浮雕、墙裙等构件，人们在现实中的房子中都会见到，只是不熟知这些叫法。因此我们采用建造一个真实小房子的做法，当用户点击某个构件，对应的构件就会在房子上高亮，用户瞬间就会明白，哦原来是它，跟已有的认知匹配上了，会有一种恍然大悟的感觉。同时也让用户大概知道这个构件位于房子的哪个位置，对后续的操作有预期，知道要摆在哪个位置。
打动人心的直觉设计
 
 
 
保持医学认知的一致性。
任何产品都很难做到匹配用户已有的所有认知，总会有一些内容是需要重新学习获得的，那么就要保证我们教给他的这些认知逻辑始终一致，让用户能做到举一反三。作为别墅设计软件，用户要完成一个完整房子的建造，需要用到20+的构件模块，我们希望用户学会使用一个构件之后，就不需要再学习，能触类旁通的使用同类构件。因此归纳出通用操作流程，找到相对统一的方式，串联起我们用户的心智。
打动人心的直觉设计
 
 
行为上，让操作丝滑顺畅
提供场景化的行为设计，并将操作聚焦在手边。
在我们的别墅设计软件中，当用户要修改老虎窗和飘窗的时候，如果看到这个窗户的样式不是自己想要的，可能会想去绘制。按照我们现有的流程，用户要先去左侧面板找到自由绘窗入口，然后再选择要在哪个面上绘制，操作流程是有点绕的。后面我们就想，用户要修改这个窗子的时候，直觉上会去点击它，那么在选中这个对象的时候，在手边提供自由绘窗的入口，让他能够快速的绑定这个对象去绘制窗户，操作上顺畅了很多。
打动人心的直觉设计
 
 
一次只聚焦做一件事情，减少其他干扰。
我们现在的大部分操作，都是是激活命令后，左侧面板还在。观察到很多新用户在激活了功能后，不知道下一步需要干什么。因为界面上需要他关注的事情太多了。所以，我们尝试用户在激活功能后，将当前步骤中不需要他关注的面板隐藏，聚焦到他当前需要做的事情上面去。
打动人心的直觉设计
 
 
操作要足够简单，简单到不需要有太多思考，是一个自然而然的行为。
 
以下介绍的是我们的照片还原功能，对于外墙漆、门窗等用户，他们可以现场拍好房子照片，导入后基于照片还原出别墅方案，再进行后续的外立面和门窗设计。最初，我们需要用户手动摆放两组消逝线去确定透视角度、然后调整比例尺、在尺子上选取点划分楼层、拖拽点调整边界、通过输入开间数量确定开间。整个过程比较复杂，也涉及很多专业的概念，用户不知道该如何操作。
 
后面优化后，我们结合算法识别出照片中的房子，默认给一个box,用户通过拖动box上的角点和边线去调整整个形体。因为用户对box的概念是熟悉的，拖拽box去拟合背后的照片就变得容易的多。楼层和开间的划分也采用这种切豆腐块的方式，用户一下一下去切就好。不用再去输入数字，想象会是什么样子。而比例尺只需要用户输入他想要的1楼的高度即可确定。优化后，生成方案的转化率提升了将近20%。
 
打动人心的直觉设计
 
 
6、小结
直觉设计需要用户看到产品时产生一种熟悉感，但是这种熟悉感判断起来并不简单，其中一部分人熟悉并不代表所有人都熟悉。所以设计师需要充分了解他们的用户，了解产品的市场，并充分获取用户熟悉内容的信息才有助于作出符合直觉设计的决策。
 
做出符合直觉的设计是困难的，需要充分考虑用户在物理世界和文化环境中获得的知识和经验，并将其应用到具体的设计实践中，也就是用户的心智模型和产品概念模型达到基本吻合甚至去塑造与产品概念模型一致的用户心智模型。
 
苹果公司创始人兼前首席执行官史蒂夫·乔布斯解释说：“我们设计中最重要的是，必须让事情直观明显。
 
打动人心的直觉设计
 
 
建议每一位设计师同学也多去感受和认识自己的知道，尤其是首次打开某个网站时，要更加关注自己的视觉动线和心理感受、无意识产生的操作行为等。同时也不要让竞品变成你的直觉，始终去思索有没有体验更加友好、创新的交互方式。
 
当然，连续的直觉操作也可能会让用户觉得疲倦，可以适时考虑引入惊喜设计，为用户打造Amazing的感受。
  •  
    去认识和感受自己的直觉
  •  
    不要让竞品的设计变成你的直觉
  •  
    连续的直觉设计也可能也可能会给用户带来疲劳和厌倦，需要考虑在适当的时候给用户进喜设计。
 
本文在以下书籍和文章中予以引用，同时也推荐大家阅读，想必大家对直觉设计会有更加深刻的认知和理解。
 
注意：文中数据皆为演示数据，非业务真实数据
参考书籍：
  •  
    《创意选择》
  •  
    《福格行为模型》
  •  
    《一目了然-Web软件显性设计之路》
  •  
    《峰值体验-影响用户决策的关键时刻》
  •  
    《任天堂的体验设计-创造不知不觉打动人心的体验》
  •  
    《玄机设计学：改变人们行为的创意构思法》
参考文章：
  •  
    Intuitive UX design an approach beyond usability
  •  
    https://uxdesign.cc/the-power-of-intuition-designing-beyond-usability-2899cb37f98a
  •  
    https://www.interaction-design.org/literature/topics/intuitive-design
  •  
    Intuitive Web Design: How to Make Your Website Intuitive to Use
 
作者：蓝胖、瑶一
 


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

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

WechatIMG27.jpg

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 
评论(0) 浏览(189)

善用设计洞见，提升设计效用

ui设计分享达人

引言
善用设计洞见，提升设计效用
 
 
好的设计师不仅仅要有专业能力，更重要的是与产品达到同频，最终更好赋能业务指标达成。
目前设计行业的现状，大部分设计师还停留在设计思维的角度，存在一些和业务格格不入的情况，只关注好不好看，做一个交互原型的美化者...
自己做了很多，但是与实际脱节。出了很多个方案，产品（或运营/商务伙伴）觉得没什么变化；打磨了很多细节和创新点，产品却只想快速上线……
 
善用设计洞见，提升设计效用
 
 
 
设计师自己的工作被各种“非专业”的指导意见干扰；而其他职岗伙伴眼里，我们的付出，却变成了一种“设计师的自High”。
究其原因，还是把以用户思维去进行设计。
 
善用设计洞见，提升设计效用
 
 
 
想要改变这样的状态，最核心的是思维转变，从技能导向的思考方式变为价值导向的思考方式。
本文主要从讲述，如何通过方法，在项目进入期获得有效设计洞见，提高设计效用，带来客户价值（用户价值）。
 
什么是设计洞见？
先举一个例子：如何做一个新款剃须刀产品？
飞利浦这些大公司，给出的答案是 更好的刀头，更贴合面部，更安全和更容易清洗，一个黑灰塑料材质、工业风格的“更好用”的剃须刀确实诞生了。
但是有一个很有意思的公司，给出了另一份答案：极简造型、合金材质、超 mini 尺寸和丰富配色，最重要的是：
 
善用设计洞见，提升设计效用
 
 
 
于是 2019 年，这个疫情开始的时间，这家剃须刀横空出世。
这款产品获得成功的原因，本质上就是产品的设计者带着更高、更广的视角，洞见了“剃须刀不仅是一个工具，它更可以成为一种礼物”这个更深层次的客户需求，打破现有市场概念，获得成功。
——如果说，设计洞察是发现和理解问题的能力，是设计师在研究和解决问题时所产生的观察力和创造力。那么设计洞见可以帮助设计师更好地识别问题、提出创新解决方案，并为设计师提供思考问题和做出决策的指导。
Brown.Tim在《设计思考改造世界》中说："未来的设计师将扮演科技的诠释者（洞见能力）,人性的引领者（观察能力）,感性的创造者与品位的营造者（同理心）的角色"。
通过设计洞见，可以让我们看更高、想更全， 与业务贴合更紧密，让设计得到认可，产生业务共鸣，赋予用户/客户价值，才能让设计变的更有价值。
 
善用设计洞见，提升设计效用
 
 
 
如何获得设计洞见？
善用设计洞见，提升设计效用
 
 
接下来我们将通过一一探索获得洞见的三个阶段。
 
第一阶段：设计洞察
洞察阶段的核心，是获得现象背后的动因。是一个获得信息与问题的阶段
产品的设计产出是一个抽象到具象化的过程，在设计和迭代的过程中，会经历非常多的流程。而大多数的设计洞见有效过去在更前置的节点，才能产生更有效的价值。
所以我们首先做的是：“提升设计的主动性”，在项目的进入期最大化实现设计洞见的价值。
善用设计洞见，提升设计效用
 
 
 
 
项目进入期通常会有一个通病，即问题泛化，无法具象。在一个比较“泛”的问题下，挖掘目的/目标，找到问题最简单的办法就是“调查分析”：了解行业生态与业务背景，确定或推测自身产品的发展方向，分析定位与关注指向-Pointer（即当下会产生哪些具有指向性的任务方向）。
这个阶段，我们的主要目的是通过最初始的源头数据，正确的了解业务或者项目的背景，避免因信息传递所产生的认知误差，以免发生“指向”偏差。而要做到这一点，洞察就不能仅仅停留在表面的观察，询问，记录和数据分析，而要随时通过联想和反思来回归本质——客户（用户）和场景。调查中获得的数据只有放在合适的情境中才能获得准确的解读。
 
善用设计洞见，提升设计效用
 
 
 
1. 知识准备
了解各种市场调研的方法与过程，对调研方法进行分类。
如下图所示，（戴力农《设计调研》 ）横轴区分了该方法得到的数据是客观的（人们的行为）还是主观的（人们的目标和观点），纵轴区分了该方法的类型是定性的还是定量的。
 
善用设计洞见，提升设计效用
 
 
 
2. 选择正确的调研办法
不同的产品生命周期，对应不同的调研方法，根据产品的不同时期选择合适属性的调研办法。
 
善用设计洞见，提升设计效用
 
 
 
互联网设计师的常规调研手法，受困于资源，多是在桌面进行。我们通过二手资料研究、竞品和线上走查获得问题，进行虚拟对象的研究，极易发生偏差。
拓新场景和成长初期，通常资源紧张且缺乏具象客户，很难进行大样本调研数据挖掘。对于设计师来说，在了解业务信息，对称业务方向时可以依赖其他职岗提供的资料进行研究；但是对于设计息息相关的关键点，建议还是通过自己实地考察、焦点实验去获取真实的体验信息。
 
善用设计洞见，提升设计效用
 
 
 
成长后期与成熟期，关键在于保证和提高产品质量，缩短与头部产品之间的差距，实现产品的高增长 。大样本的用户与竞品调研可以帮助我们更可观的看到真实的客户需求。再输入到我们的日常桌面研究中去。
 
善用设计洞见，提升设计效用
 
 
 
3. 掌握信息收集、数据统计分析方面的知识
善用设计洞见，提升设计效用
 
 
 
4. 了解调研的流程
善用设计洞见，提升设计效用
 
 
 
确定调研目标 → 制定调研计划 → 准备调研材料&环境 → 邀请调研对象&执行调研过程 → 分析整理信息与数据 → 输出调研结果。
调研的实际操作流程在数据采集和调研分析方法中已经涉及的比较多了，也有很多好的执行案例可供我们学习与参考。
得到大量信息，进行吸收、理解和处理后，我们将收获大量的问题。接下来就是如何解决问题。
 
第二阶段：定位价值
定位价值是洞见的关键阶段，是能给业务带来价值的核心，是可以改变客户（用户）习惯和行为的关键博弈。
那么如何定位价值呢？
 
善用设计洞见，提升设计效用
 
 
 
1. 问题整合，提炼与确认指向
将调研获得的问题进行归纳与整理，如简单的 Card Sorting ，确认所有问题的核心指向（Pointer）。
 
善用设计洞见，提升设计效用
 
 
 
接下来就需要不停的切换指向，并深入每个关键 key 下进一步拆解，确定你收获的是否是一个真正且重要的 Pointer。
 
EG  海底捞 ▽
餐厅高峰期经常人满为患，排队体验差。常规餐厅的做法：约束更快的出餐、收台，拆分更多的餐位，引导拼桌服务等等等等..短期可能会带来改变，但是达到一个极限点以后，就很难再提升了。
类似的场景还有曾经的外卖小哥：30 分钟以内还能更快吗？答案是：很难。
那怎么让客人愿意多等待一点，或者不觉得“等待完全是无价值无意义的”？
海底捞选择在你排队等待的时候，提供免费美甲、护手、零食等等各种周到服务，让客人等待的过程中不至于无事可做。获得了认可，赢得了口碑。
如果你留心观察，你会发现海底捞的标志也是用了一个打招呼的气泡Hi，来强调服务为先的品牌定位，解决的是情感需求中的「过程体验」。
 
善用设计洞见，提升设计效用
 
 
 
2. PDS（问题-检测-研究）调查分析
善用设计洞见，提升设计效用
 
 
 
PSD 调查分析的核心思想，是调查客户（用户）与预期（行为/认知）的偏差，或不满与问题来发现洞见。
 
善用设计洞见，提升设计效用
 
 
EG  BBDO反烟推广 ▽
BBDO 的英国公司层接到过这样一个推广任务：是让年轻人，特别是十几岁的小女孩儿戒烟。
其实这个问题特别棘手。一方面，吸烟是一个生理上瘾的事情，要戒掉很困难；另一方面，吸烟最大的问题是有害健康，但是对于年轻人来说在这个角度的感触不深，很难起到效果。用常态的思考模式似乎很难找到正确的解决方案，但是借助洞见以后就不一样了。
通过了解更多事实，看目标群体关注什么，哪些问题对我们要实现的目标有影响。在这个案例里，BBDO的做法是派了一个年轻的女助理在购物区找了一家咖啡馆，连着5天坐在那里听那里的女孩儿在聊些什么。
结果这5天内她就发现，这些十几岁的女生大部分聊的是买衣服、做头发、选什么样的指甲油和减肥药，怎么整容等等。当女助理把这些内容列在自己的本子上的时候，洞见就自己呼之欲出了：原来对于这些无所事事，十几岁的年轻女孩而言，没有什么比她们看起来漂亮更重要了。
因此，你不需要告诉她吸烟可能缩短寿命，你只要告诉她一件事情：“吸烟会让你变得难看”，就足够让她戒烟了。
 
善用设计洞见，提升设计效用
 
 
 
 
所以，想要获得洞见，就去调研目标群体真正关注的事情。当你通过调研发现真正的问题时，洞见往往就会产生。
 
3. 规避技能导向
设计的职岗角色是单薄的。我们一定要带着指针与方案，多职岗评估价值与可执行度，这是一个设计前期任务的过程。它的输出可能为设计Demo、简单的笔记、方案的列表，或者是一个说明效果的故事版……不一定具备完整的落地性，但是可以让伙伴更好的理解你的观点。
 
善用设计洞见，提升设计效用
 
 
 
第三阶段：系统输出
设计的解决方案要从起心动念、贯穿至产、研、运营甚至上市宣传的全路径方案。
在分析阶段我们通过“3步走”的视角思维，明确了任务重点同时帮助我们明确不同指针的优先级。
善用设计洞见，提升设计效用
 
 
 
 
设计师要考虑的维度不仅仅在用户体验层面，更应在执行时候要考虑业务的实际需求，考虑上下游不同职能的工作内容，始终保持全局与系统的思维，要从客户价值出发，回落到企业成本中去。
通过设计洞见，从更本质的层面去洞悉问题，重新定义和设计任务。
与业务产生共鸣才是好的设计。
 
善用设计洞见，提升设计效用
 
 
让你的设计方案保持在更高、更广、更全局的维度。真正融入和助力业务，提升设计的效用。让“提升体验”这件事真正落地。
改变我们看世界的方式，亦改变世界看待我们的方式。
 


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

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

WechatIMG27.jpg

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(134)

分类

日历

链接

个人资料

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

存档