个性化设计

• 打造个体专属形象1：随着 “超级个体” 时代的来临，B 端设计不再只关注企业整体，更注重为个体赋能。如钉钉等平台开始为用户提供动态头像等个性化功能，让员工能在工作场景中展现独特个性。
• 满足个体情绪需求：通过色彩、插画等元素营造更具情感氛围的界面，比如 Teams 和 ONES 等产品利用色彩和插画设计，提升用户对品牌的情感认同，使工作不再枯燥。
• 

视觉设计创新

• 渐变色的广泛应用2：渐变色重新定义了 B 端视觉美学，许多 B 端产品将背景和元素转变为渐变色，如 Baklib 官网的淡色背景渐变，既传达现代感与科技感，又实现了不同内容间的自然过渡。
• 网格化布局流行2：网格化布局以其结构性受到青睐，像 Magnolia 与 Intercom 等企业的官网采用此布局，使内容分区明确，优化了页面可读性与逻辑性。

智能化融入

• 突出 AI 元素2：AI 已成为 B 端设计的核心元素，众多 SaaS 平台在官网上直接强调与 AI 相关的功能，甚至在 Slogan 中加入关键词，展示企业的科技实力，让用户感受到前沿的科技形象。
• 智能交互体验：借助 AI 实现智能提醒、自动推荐等功能，例如一些 B 端办公软件可以根据用户的使用习惯和工作流程，自动推送相关的任务和文件，提高工作效率。

交互设计升级

• 微动效与微交互2：适度的动画和交互效果能够吸引用户注意，增强网站互动性，如在时间轴上滑动的效果、功能版块的滚动折叠等，让界面更加生动有趣，提升用户粘性。
• 便捷的菜单导航2：折叠加展开的平铺菜单导航成为主流，清晰直观，方便用户快速找到所需信息，提高了信息获取的速度和便利性。
• 

沉浸式体验增强

数据可视化深化

跨平台融合优化

以下是兰亭妙微总结一些成功的 UI 设计公司助力 B 端业务流程优化的案例：

案例一：某大型制造企业供应链管理系统优化

企业背景与问题

· 这家制造企业规模庞大，其供应链涉及采购、生产、仓储和物流等多个复杂环节。之前的业务流程存在诸多问题，各个环节的系统界面独立且陈旧，信息传递滞后。例如，采购部门在下单后，生产部门难以及时获取准确的原材料信息来安排生产计划，导致生产进度延迟。仓储管理系统操作复杂，库存盘点效率低下，物流配送的调度也缺乏有效的可视化工具，经常出现货物配送延误的情况。

UI 设计公司的解决方案

· 整合系统界面：UI 设计公司构建了一个统一的供应链管理平台，将采购、生产、仓储和物流等模块集成在一个界面中。通过简洁明了的菜单设计和模块划分，员工可以方便地在不同功能之间切换。例如，采用了侧边栏导航，将各个主要模块清晰列出，点击即可进入相应的子功能页面。

· 优化信息展示与交互：设计了直观的信息仪表盘，采购部门下单后，生产部门能立即在仪表盘上看到订单详情、原材料需求等关键信息。对于仓储管理，引入了实时库存监控功能，以图形化方式展示库存数量和位置，通过简单的拖拽操作即可完成库存盘点。在物流配送方面，利用地图可视化技术，实时展示车辆位置和货物运输状态，调度员可以根据实际情况及时调整配送路线。

· 建立数据共享机制：建立了一个数据共享中心，确保各个环节的数据能够实时更新和共享。例如，当生产部门完成生产任务后，库存数据自动更新，物流部门可以立即安排发货，减少了人工干预和数据误差。

优化成果· 

· 生产效率提高了 30%，因为生产部门能够及时获取准确的原材料信息，提前安排生产计划，减少了等待时间。

· 库存盘点时间从原来的每周两天缩短到每天两小时，大大提高了仓储管理的效率。

· 物流配送准时率提升了 40%，通过实时的车辆位置监控和路线调整，减少了配送延误的情况，客户满意度显著提高。

案例二：金融机构信贷审批系统优化

企业背景与问题

· 某金融机构的信贷审批流程繁琐，涉及多个部门和多个系统。信贷员收集客户信息后，需要在不同的系统中录入和提交，这些系统界面复杂，操作步骤多，且缺乏有效的引导。审批人员在审核过程中，需要在多个页面之间切换查看不同的信息，如客户基本信息、财务状况、信用记录等，导致审批时间长，效率低下。而且，由于系统界面不友好，新员工需要经过长时间的培训才能熟练操作，增加了人力成本。

UI 设计公司的解决方案

· 简化操作流程：重新设计了信贷审批系统的操作流程，将信贷员的信息录入步骤整合到一个引导式的表单中，通过分步式的设计，信贷员只需要按照提示依次填写和提交信息即可。例如，采用了智能表单技术，根据信贷员输入的部分信息自动填充相关字段，减少了手动录入的工作量。

· 优化信息架构和界面布局：为审批人员设计了一个综合信息页面，将客户的所有关键信息集中展示在一个页面上，通过标签页、折叠面板等方式进行分类展示。审批人员可以方便地在一个页面上查看客户的基本信息、财务状况、信用记录等，减少了页面切换的次数。同时，对界面进行了视觉优化，采用了简洁的配色和清晰的图标，提高了信息的可读性。

· 提供培训和支持工具：为新员工设计了一套在线培训系统，通过模拟操作、视频教程和互动式的学习模块，帮助新员工快速熟悉信贷审批系统的操作流程。此外，还在系统中内置了实时帮助功能，员工在操作过程中遇到问题可以随时查看帮助文档或联系客服。

优化成果

· 信贷审批时间从平均 15 个工作日缩短到 7 个工作日，大大提高了信贷业务的处理效率，增强了企业在市场上的竞争力。

· 新员工培训时间从原来的两周缩短到一周，降低了人力成本，同时提高了员工的工作满意度。

案例三：电商企业后台管理系统优化

企业背景与问题·

· 一家快速发展的电商企业，其后台管理系统随着业务的增长变得越来越复杂。商品管理、订单处理、客户服务和营销推广等功能模块各自为政，界面设计混乱，操作逻辑不清晰。例如，在商品管理中，添加新产品需要填写大量的信息，且没有有效的分类和搜索功能，导致商品上架时间长。订单处理过程中，客服人员需要在多个页面查找订单信息和客户反馈，处理效率低下。营销推广模块缺乏直观的数据展示和分析工具，难以制定有效的营销策略。

UI 设计公司的解决方案· 

· 模块化设计与整合：对电商后台管理系统进行了重新模块化设计，将商品管理、订单处理、客户服务和营销推广等功能模块进行了合理划分和整合。每个模块都有独立的入口和清晰的操作流程，同时在主界面上提供了快速导航栏，方便用户在不同模块之间切换。例如，在商品管理模块中，通过分类标签和搜索功能，商家可以快速找到需要编辑的商品，添加新产品时，采用了分步式表单和预设模板，减少了信息录入的工作量。

· 数据可视化与分析：为营销推广模块设计了一套数据可视化工具，通过直观的图表（如柱状图、折线图和饼图）展示销售数据、流量数据和客户行为数据等。商家可以根据这些数据快速制定营销策略，如调整商品价格、优化广告投放等。在订单处理和客户服务模块，将订单状态、客户反馈等信息集中展示在一个页面上，客服人员可以通过简单的筛选和排序功能，快速处理订单和客户问题。

· 个性化定制与权限管理：考虑到电商企业内部不同角色的需求，设计了个性化定制功能。例如，仓库管理人员可以在商品管理模块中重点关注库存信息，而营销人员可以在营销推广模块中深入分析数据。同时，建立了完善的权限管理系统，确保每个角色只能访问和操作与其职责相关的功能和数据。

优化成果

· 商品上架时间从平均两天缩短到半天，提高了商品更新的频率，增强了电商平台的竞争力。

· 客服人员处理订单和客户问题的效率提高了 50%，客户满意度得到了显著提升。

· 商家通过数据可视化工具制定的营销策略更加精准，营销效果得到了有效提升，平台的销售额增长了 30%。

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

B 端设计更注重交互逻辑思维，设计解决方案的出发点需要建立在提升产品体验层面。一个很小的需求也需要更成熟的思考，这个思考过程如果有更多的集思广益定能探索出更好的设计，提升操作体验度。

组件设计是设计规范中最核心，工作量最大的一个环节。我们可以将它拆解成几个部分，先做出基础组件，再基于基础组件和业务需求抽象设计业务组件，最后抽象成页面模板。

B端应用往往涉及复杂数据，设计师需要创造清晰且有效的方式来显示这些信息。
对于B端产品设计中复杂的数据可视化需求，一个详细的解决方案需要从不同层面进行考虑和实施：
理解用户需求：
首先，进行深入的用户研究以理解不同用户的数据需求。这可能包括用户访谈、观察和问卷调查，以收集关于他们如何理解和使用数据的信息。
选择合适的图表类型：
根据数据类型和用户需求选择最合适的图表类型。例如，时间序列数据适合折线图，而比较数据则可能更适合条形图或饼图。同时，对于更复杂的数据关系，可能需要使用散点图、热图或树状图。

B端设计组件是企业级应用开发中不可或缺的一部分。通过合理设计和应用基础组件，可以构建出功能丰富、易用且可维护的用户界面。同时，组件化设计提高了开发效率、降低了维护成本，并增强了系统的灵活性和可扩展性。因此，在B端设计中，应充分重视组件的作用，并不断优化和完善组件库，以适应不断变化的市场需求和用户期望。

众所周知，B 端设计更注重交互逻辑思维，设计解决方案的出发点需要建立在提升产品体验层面。一个很小的需求也需要更成熟的思考，这个思考过程如果有更多的集思广益定能探索出更好的设计，提升操作体验度。

在当今时代，现代 UI 用户交互体验设计具有极为重要的地位。它绝非仅仅局限于单向的视觉设计，也不是单纯地围绕用户的可用性进行研究设计。实际上，如今的 UI 用户交互体验设计已经对视觉与可用性操作提出了更高层次的混合化要求。

对于现代的 UI 设计而言，我们需要从多个角度进行更进一步的深入解读。这不仅涉及心理学方面，去探究用户的心理需求和行为模式，以便更好地满足他们的期望；还涵盖视觉设计领域，通过精心打造的视觉元素，吸引用户的注意力并传达有效的信息；同时也不能忽视交互设计，确保用户在与界面进行互动时能够获得流畅、便捷的体验。

而将视觉思维理论应用于新一代的 UI 交互设计，则具有重大的意义。通过这种方式，用户能够凭借敏锐的视觉，灵敏地捕捉到屏幕上的信息轨迹。大脑可以快速地从不同抽象平面水平上获取意象，实现表象形态感知与抽象思维的紧密连接。这样一来，用户便能够高效地获取有效的视觉信息，从而提升整体的交互体验。无论是在工作场景中还是在日常生活中，一个优秀的 UI 交互设计都能够为用户带来极大的便利和愉悦感。

今天我们先介绍下理论知识，然后将产品设计案例结合（视觉思维分析模式的具体应用方法）来告诉大家怎么应用，希望可以帮助到大家。

 

开始话题前我们需要了解格式塔心理学是什么

我相信格式塔心理学大家都听过，主流对于格式塔心理学的观点是：格式塔心理学强调经验和行为的整体性，认为整体不等于部分之和，意识不等于感觉元素的集合，行为不等于反射弧的循环。它主张心理现象最基本的特征是在意识经验中所显现的结构性或整体性，反对构造主义心理学把心理现象分析为简单的元素，认为心理现象是一个整体，一种有组织的完整结构。

主要原则

1.接近性原则

在知觉过程中，距离相近的物体容易被知觉为一个整体。例如，在一张纸上分布着一些点，距离较近的点更容易被看作一组。

接近性原则图例

 

2.相似性原则

具有相似特征的物体容易被知觉为一个整体。比如，颜色、形状、大小等相似的图形更容易被组合在一起进行认知。

相似性原则图例

 

3.连续性原则

在知觉过程中，人们倾向于将具有连续性的物体知觉为一个整体。例如，一条曲线即使中间有部分被遮挡，人们也会倾向于将其看作是连续的整体。

连续性原则图例

 

4.闭合性原则

人们倾向于将不完整的图形知觉为完整的图形，即通过心理上的补充使图形达到闭合。比如，一个有缺口的圆形，人们往往会自动脑补出完整的圆形。

闭合性原则图例

 

对设计领域的影响

以上是大家所了解对的，而对于设计于界面设计、图形设计、用户体验设计都有影响：

1.  

   界面设计：在网页设计和移动应用界面设计中，格式塔心理学的原则被广泛应用。例如，通过合理布局元素，利用接近性和相似性原则将相关的内容组合在一起，使用户能够更快速地理解和操作界面。颜色的相似性可以用来区分不同的功能模块，提高界面的可读性和易用性。
2.  

   图形设计：设计师常常运用闭合性原则创造简洁而富有吸引力的图形。利用连续性原则可以引导用户的视线，创造出动态和富有节奏感的设计作品。
3.  

   用户体验设计：格式塔心理学有助于设计师理解用户如何感知和理解复杂的信息环境。通过创造整体的、有组织的设计，可以提高用户的满意度和使用效率，减少认知负担。

界面设计图例

 

鲁道夫・阿恩海姆的格式塔心理学理论中提出了四种 “力” 的概念，GUI 设计师对其在界面中的角色进行了深入阐释。

第一种力是由视觉对象的外在形状和构造所生成的力。

例如，独特的图标设计通过其具象的形态传达出明确的语意，让用户能够迅速理解其功能。这种力如同一个无声的向导，引领用户在界面中准确地找到所需的操作。

第二种力是物体间或物体各部分之间的聚合张力。

它虽有强度但没有特定方向，就像界面中各个元素紧密结合，形成一个有机的整体。各个组件相互呼应，共同营造出和谐统一的视觉氛围，增强了用户对界面的整体认知。

第三种力是在视觉对象中知觉到的有方向性的张力。

其载体具有一定的 “动力”，表现为具有方向标识性意识的标识及层级关系。比如，清晰的导航箭头或色彩渐变，引导用户在界面中进行有序的浏览和操作，确保用户不会迷失方向。

第四种力主要是指视觉式样本身及其组合所形成的视觉冲击力。

在界面中，涵盖引导性的动态效果可以吸引用户的注意力，激发用户的探索欲望。例如，微妙的动画效果或交互反馈，为用户带来更加生动的体验。

四种 “力” 的概念

 

这四种力是 GUI 设计中讨论视知觉的核心内容。

它们是形状、颜色和运动的固有属性，并非观赏者凭借记忆中的想象强加给知觉对象的。阿恩海姆将格式塔心理美学视为一种

“视知觉形式完形理论”

。

在 UI 设计中，以格式塔心理美学为指导，视觉上的 “完形” 形式生成机制发挥作用。用户在设计师精心构建的色彩图形语言引导下，无意识地进行目的性的视知觉形式达成。这种方式为无缝接入交互提供了卓越的解决方案。

在 UI 设计中运用格式塔心理学，为人机互动形式的形成和建构提供动力机制引导，让我们对格式塔心理美学有了全新的理解。它不仅提升了界面的美观度，更重要的是增强了用户体验，使界面更加直观、易用。通过合理运用格式塔心理学的原理，设计师可以创造出更具吸引力和功能性的 UI 设计，为用户带来更加愉悦的交互体验。

 

视觉思维

人类对于艺术的感知与生俱来，积极主动。对于现代优秀交互设计师而言，掌握并了解人类视觉的基本原理是必备素养之一。视觉思维与人类的生理和心理因素紧密相连。

1.生理方面看

这与我们的感官系统及其特性息息相关。人类的视觉系统犹如一条完整的视觉分析链，涵盖了眼球、大脑皮层以及它们之间的视觉传导路径。

视觉大脑皮层位于大脑后端，围绕枕叶的距状裂周围分布。其中，V1 区和 V2 区主要负责一系列特征处理，V4 区承担图案模式处理工作，而前脑叶和中脑则负责高层注意力的控制。信息由皮层 V1 通过两条线路进行输送。第一条路线为背侧流，即位置通道，从 V1 传输至 V2，再进入 V5，最后抵达顶下小叶，此段主要处理视觉的空间位置信息以及相关的运动和控制部分。第二条线路为内容通道，从 V1 到 V2 和 V4，最后进入下颞叶，用于物体的识别和长期记忆。

大脑皮层图例

 

2.心理方面看

视觉思维与人类的现有生存条件以及以往的生活经验紧密相关。生理与心理因素相互作用，形成了独特的视觉思维特性。

多年来，艺术、设计心理学家在对人脑及其视觉生理机制的研究上取得了显著进展。在视觉艺术作品中，一系列色彩、图形和空间关系的呈现，都是视觉艺术家经过反复斟酌的结果。他们思考着哪种颜色和图形会更加醒目，如何合理组织空间，以及在何种情况下应该用图像代替文字来表达概念。这样经过深思熟虑的作品，能够有效规避人类视觉的弱点，充分激发用户对主体的能动性和创造性认识，让观赏者和使用者获得愉悦的视觉体验。这种主动的视觉感知能够更好地传达作品所要表达的思想与内涵。

如果设计师能够深入了解并分析用户的视觉系统和心理，就能设计出更符合目标用户需求的 UI 交互产品。例如，通过对用户视觉注意力的研究，设计师可以在界面中合理布局关键元素，使其更容易被用户察觉。同时，根据用户的色彩偏好和心理预期，选择合适的色彩方案，营造出舒适的视觉氛围。此外，设计师还可以利用用户对图形的认知习惯，设计简洁明了的图标和界面元素，提高用户的操作效率。总之，对视觉思维的深入理解和运用，将为 UI 设计带来更多的创新和突破。

 

UI 设计中的视觉设计

人类的感知系统丰富多彩，主要分为听觉、味觉、视觉、触觉、嗅觉这五大类别。其中，令人惊叹的是，高达 90% 的感知竟然来源于视觉系统。这一特性使得界面产品的设计紧紧围绕着用户利用视觉刺激思维以及人机交互细处理模式来实现人机互动，进而达成传递或获取信息的目标。

比如当下流行的各类手机 APP，以其精美的界面设计吸引着用户。当我们打开一款音乐播放软件，绚丽的色彩搭配、简洁明了的图标布局，瞬间抓住我们的眼球，让我们能够快速找到自己想听的歌曲。这就是视觉设计在人机交互中的重要作用，通过视觉刺激引导用户进行操作。

在这个过程中，我们常常能听到界面产品的开发人员发出这样的抱怨：“我们讨厌交互设计。” 而交互设计师则会坚定地表示：“我们不需要图形。” 然而，视觉设计师却往往对来自各方面的意见持相反态度，显得一厢情愿。

但事实上，视觉设计绝非孤立的存在，它是在 UI 设计中可用性和交互设计研究的综合体现。例如一些知名的电商平台，其界面设计既考虑了用户的操作便捷性，又通过精美的商品图片展示和富有创意的页面布局，满足用户的视觉需求。用户在浏览商品时，流畅的交互体验和美观的视觉效果相辅相成，提升了用户的购物体验。

视觉思维，宛如一座神奇的桥梁，将感知与思维、艺术与科学紧密地结合在一起。它能够将人类本能的视觉感知、图形设计以及视觉可视化巧妙地联系起来。在满足使用功能设计的基础上，现代 GUI 设计已然成为一种辅助交互的强大力量，它不仅能满足用户的感知需求，还能迎合审美需求以及自我实现需求，成为功能性十足的视觉设计杰作。它就像一颗璀璨的明珠，在数字世界中散发着独特的魅力，为用户带来前所未有的体验。

计算机和用户

 

视觉思维在 UI 交互体验设计中的作用

在 UI 交互体验设计中，我们确实应当将这样的交互设计视作用户对品牌的认知工具和用于信息传递的重要渠道。

从处理平面图像的角度来看，人类的大脑具有强大的能力，能够在一定程度上通过思维进行心智图像的建立。想象一下，当我们在脑海中构思一幅美丽的风景或者一个复杂的场景时，各种元素在思维的画布上逐渐清晰起来。然而，当这些图像被纸张、荧幕等媒介物表现出来时，情况又发生了变化。我们能够把网页、图标、信息图表等可视化指令经过视觉思维的处理过程，快速地解决问题。比如，当我们浏览一个设计精美的网页时，清晰的布局、醒目的图标和直观的信息图表能够迅速引导我们找到所需的内容，让我们在短时间内获取关键信息。

而在 UI 交互体验设计中，“视觉思维” 手段更是发挥着独特的作用。它能够帮助用户提前整理视觉引导任务，为用户的交互之旅提供清晰的方向。不同的用户有着不同的需求和偏好，“视觉思维” 可以根据这些差异增加视觉注意力的多样性。对于喜欢简洁风格的用户，简洁明了的界面设计和少量但突出的视觉元素能够吸引他们的注意力；而对于追求丰富体验的用户，多彩的色彩搭配和动态的视觉效果则更能满足他们的需求。这样的差异化设计使得不同类型的用户都能在交互过程中找到满足自己需求的视觉引导。

同时，“视觉思维” 能使人类本能的认知线索在视觉图形语言处理中直接快速切换。在用户潜意识的情况下，利用用户自身的视觉引导去完成交互任务，大大缩短思考的时间。例如，在一款游戏应用中，巧妙的色彩变化和图形动画可以在用户不经意间引导他们进行操作，让他们在享受游戏的过程中自然地完成各种交互任务，而不会感到繁琐和困惑。

总之，在 UI 交互体验设计中，“视觉思维” 以其独特的优势成为了连接用户与品牌、实现信息高效传递的关键手段。通过差异化的设计和巧妙的视觉引导，它为用户带来了更加便捷、愉悦的交互体验。

 

成功运用 “视觉思维” 的 UI 交互体验设计案例

一、苹果 iOS 系统

苹果的 iOS 系统以其简洁、美观的界面设计而闻名。图标设计简洁直观，色彩搭配和谐，能够让用户一眼就识别出不同的应用功能。例如，相机图标是一个逼真的相机造型，让人一看就知道其功能。在交互过程中，动画效果流畅自然，如打开应用时的渐显效果、关闭应用时的收缩效果等，这些动画不仅增加了视觉吸引力，还为用户提供了操作反馈，引导用户的视觉注意力，让用户在操作过程中更加流畅和舒适。

二、Airbnb

Airbnb 的界面设计充满了故事性和吸引力。在首页，精美的图片展示了各种独特的房源，吸引用户的目光。图片的选择和排版都经过精心设计，能够让用户快速了解房源的特色。在搜索结果页面，清晰的布局和简洁的信息展示让用户能够轻松比较不同房源的价格、位置等关键信息。同时，地图视图的交互设计也非常出色，用户可以通过拖动地图直观地查看不同地区的房源分布，这种视觉引导方式大大提高了用户的搜索效率。

三、微信

微信的界面简洁易用，图标和文字的搭配恰到好处。绿色的主色调给人一种清新、舒适的感觉。在聊天界面中，不同类型的消息有不同的显示方式，如文字、图片、语音等，让用户能够快速区分。朋友圈的设计也充分运用了视觉思维，用户可以通过图片、视频等多种形式分享自己的生活，点赞和评论的互动方式也通过视觉效果进行了明确的提示，增加了用户之间的互动和交流。

 

用户交互体验设计过程中的视觉思维

为了更好地体现用户交互性能，我们确实需要在整个用户交互体验设计过程之中引入视觉思维分析模式来规范指导设计。这一模式就如同一位智慧的导航者，引领着设计的方向，确保每一个环节都能最大程度地满足用户的需求和期望。

对整个设计过程中一系列层级结构进行视觉归纳，是一项至关重要的任务。

从 UI 设计过程中最初的方案构架开始，就如同搭建一座宏伟建筑的基石，需要深思熟虑。设计师要以视觉思维为导向，考虑如何让方案构架既具有创新性又符合用户的使用习惯。草图阶段，则是将创意初步呈现在纸上的过程，此时要充分发挥视觉思维的作用，捕捉那些瞬间的灵感，用简洁而有力的线条勾勒出未来产品的轮廓。

动态 layout 的设计更是离不开视觉思维，它要让页面的布局在动态变化中保持流畅和自然，给用户带来舒适的视觉感受。而后期特效的安排，则如同为产品披上一件华丽的外衣，需要恰到好处地运用，既不能过于耀眼而分散用户的注意力，也不能过于平淡而无法引起用户的兴趣。

例如，如何使整个方案更符合目标用户的色彩定位，这是一个需要深入思考的问题。

不同的用户群体对色彩有着不同的偏好和情感反应。设计师要通过对目标用户的调研和分析，了解他们的文化背景、年龄层次、性别差异等因素，从而确定最适合的色彩方案。比如，对于年轻的用户群体，可能更倾向于鲜艳、活泼的色彩；而对于商务用户，则可能更喜欢稳重、大气的色彩。通过精准的色彩定位，能够让用户在第一时间对产品产生好感。

如何让复杂的层级关系在视觉上显示得更为简单且明朗化，也是视觉思维分析的要点之一。

结合设计认知心理学总结出一套适合当前项目的用户交互体验设计的视觉规范，是实现优秀设计的关键。设计认知心理学研究人类在设计过程中的认知和心理活动，它可以为设计师提供宝贵的理论支持。设计师可以借鉴设计认知心理学的研究成果，制定出符合用户认知习惯的视觉规范。比如，遵循简洁性原则，避免过多的视觉干扰；运用一致性原则，让用户在不同的页面和功能模块中都能保持一致的视觉体验；注重可读性原则，确保文字和图标易于识别和理解。通过建立一套科学合理的视觉规范，能够提高设计的效率和质量，为用户带来更加出色的交互体验。

下面介绍下我在过往项目中的实际案例，看看如何处理复杂的视觉层级

 

案例分享

首先我们了解一下背景：

盒马店仓拣货是门店仓储作业中的一个重要环节，员工需要用到PDA实时接收仓储系统分配的拣货任务，并为拣货员提供清晰的任务指引，包括商品的位置、数量等信息，它就像一个智能导航仪，指引拣货员快速找到目标商品，PDA中就需要进行界面设计，保证拣货员能高效的完成任务，但是实际仓的环境是极其复杂的，往往店仓环境较为昏暗且存在温差，同时拣货员往往是边走边拣货，整体过程是非常紧张和匆忙的，这就对视觉识别效率要求非常高。

拣货员的具体工作流程如下：

1.接收订单：当顾客在盒马 APP 上下单后，订单信息会同步传输到门店的仓储系统。

2.拣货任务分配：仓储系统根据订单内容，将拣货任务分配给相应的拣货员，并将任务信息发送到拣货员手中的 PDA（掌上电脑）设备上。例如，某顾客下单购买了苹果、牛奶和面包，系统就会指示拣货员去相应的区域拣取这些商品。

3.商品拣选：拣货员根据 PDA 上的指示，前往指定的货架区域。通过 PDA 扫描货架上商品的条形码或二维码，确认商品信息无误后，将商品拣选出来放入拣货篮或推车中。在拣货过程中，拣货员需要严格按照商品的数量和规格进行拣选，避免出现错拣、漏拣的情况。

4.复核与打包：拣货完成后，拣货员将拣选好的商品送到复核区，由复核人员对商品进行再次核对，确保商品的种类、数量、质量等与订单一致。复核无误后，根据商品的特性和订单要求进行打包，例如，对于生鲜商品需要使用特殊的包装材料和方式，以保证商品的新鲜度和品质1。

5.出货：打包完成的商品被放置在出货区，等待配送人员前来取货，进行后续的配送环节，确保商品能够及时、准确地送达顾客手中。

在这个过程中我们可以发现从“行为、感受、环境、设备”几个维度来看，我们需要关注的点是非常多的，如下面所示我们需从效率和步骤感入手，保证界面清晰无障碍的基础上对小小的屏幕进行占比的优化，同时加入情感化和温度感，这是最理想的设计目标。

设计前需关注的内容

 

提炼设计目标和原则

 

对目标用户群体进行深入调研，了解他们的年龄、性别、职业、文化背景等基本信息。

这些因素会影响用户对色彩、图形、布局等视觉元素的偏好。分析用户的视觉感知优势和弱势。例如，对于老年用户，可能需要更大的字体和更鲜明的色彩对比；对于视力受损的用户，可能需要高对比度的界面和清晰的图标。通过用户访谈、问卷调查、观察等方法，收集用户对现有产品或类似产品的视觉反馈，了解他们的喜好和不满之处，为后续设计提供依据。

色彩定位根据目标用户群体的特点和产品的定位，确定合适的色彩方案。

色彩可以传达不同的情感和氛围，如蓝色通常给人沉稳、可靠的感觉，红色则充满活力和激情。考虑色彩的对比度和可读性。高对比度的色彩组合可以提高文字和图标的清晰度，便于用户阅读和识别。同时，要确保色彩在不同的设备和环境下都能保持良好的显示效果。

 

设计规划阶段（视觉层研究）

方案构架运用视觉思维，从整体上规划产品的架构和布局。考虑用户的使用流程和场景，将功能模块进行合理的分组和排列，使界面简洁明了，易于导航。确定主要的视觉焦点和引导路径。通过大小、颜色、位置等方式突出关键信息和重要操作，引导用户的注意力，提高交互效率。

功能色视觉研究保证视觉可读性和清晰性

 

中性色研究 保证对比度清晰可读

 

字号字阶优化

 

设计实施阶段

特效应用谨慎地选择和应用特效，如阴影、渐变、发光等。特效可以增强界面的视觉吸引力，但过多或不当的使用可能会导致视觉混乱和性能问题。考虑特效对用户操作的引导作用。例如，使用特效来突出可点击的区域或提示重要信息，可以提高用户的交互体验。

通过视觉明确任务

 

时效思考

 

设计方案

 

测试评估阶段

1.  

   用户测试邀请目标用户进行用户测试，观察他们在使用产品过程中的视觉反应和行为。注意用户对不同视觉元素的关注程度、理解程度和操作效率。收集用户的反馈意见，了解他们对界面设计的满意度和改进建议。根据用户的反馈，及时调整和优化设计。
2.  

   数据分析利用数据分析工具，收集用户在使用产品过程中的行为数据，如点击次数、停留时间、页面跳转路径等。通过分析这些数据，可以了解用户的视觉注意力分布和交互习惯，为进一步优化设计提供依据。

方案调研

 

方案验证可行

 

组件沉淀

对设计组件进行沉淀和归纳，同时定义好设计样板间。

1.  

   组件识别，需要对已有的设计项目进行全面梳理，识别出其中重复出现的元素和模块。这些元素可以包括按钮、输入框、图标、导航栏、卡片等。例如，在一个电商网站的设计中，商品展示卡片、购物车按钮、搜索框等都是常见的组件。同时，也要关注不同项目中具有相似功能或外观的元素，它们可能经过适当调整后可以归纳为同一类组件。比如，不同页面的提示信息框，虽然在内容和位置上有所不同，但在风格和交互方式上可能具有共性。
2.  

   规范制定对识别出的组件进行规范制定，包括尺寸、颜色、字体、间距等方面的统一规定。例如，确定按钮的标准尺寸、颜色搭配和文字样式，确保在不同的页面和场景中都能保持一致的外观和交互效果。制定组件的使用规范，明确在什么情况下应该使用哪种组件，以及如何进行组合和布局。例如，规定导航栏的位置和结构，以及不同级别页面的导航方式。
3.  

   分类整理将规范后的组件进行分类整理，建立一个清晰的组件库。可以按照功能、类型或使用场景进行分类，方便设计师在后续的设计中快速查找和使用。比如，将组件分为界面组件（如按钮、输入框等）、交互组件（如弹窗、下拉菜单等）、布局组件（如网格系统、分栏布局等）。
4.  

   持续更新随着设计项目的不断进行，新的组件可能会不断出现，旧的组件也可能需要进行优化和调整。因此，需要建立一个持续更新的机制，定期对组件库进行审查和更新，确保组件库始终保持活力和实用性。

 

 

 

总结：

在现代的 UI 设计中，往往存在着众多的功能模块和信息层级。如果处理不当，就会让用户感到混乱和困惑。设计师可以运用视觉层次、分组、对比等手法，将复杂的层级关系进行梳理和简化。例如，通过不同的字体大小、颜色深浅、图标形状等方式来区分不同的层级，让用户能够轻松地理解和操作。

如何保证特效的使用恰到好处，不会引起用户的使用误解，同样需要设计师的精心考量。特效可以为产品增添趣味性和吸引力，但如果使用不当，就会适得其反。设计师要根据产品的特点和用户的需求，合理地选择特效的类型和强度。比如，在一些需要强调操作反馈的地方，可以使用适度的动画特效，让用户清楚地知道自己的操作是否成功；而在一些重要的信息展示区域，则要避免使用过于花哨的特效，以免干扰用户的阅读。

设计师不仅需要对人类视觉系统有一定的了解，同时也需要对目标用户视觉感知的优势和弱势进行分析和归纳。人类的视觉系统是一个复杂而神奇的系统，它有着自己的特点和规律。设计师要了解人类视觉的注意力机制、色彩感知、空间感知等方面的知识，以便更好地运用视觉元素进行设计。同时，不同的目标用户群体在视觉感知方面也存在着差异。比如，老年人可能对色彩的对比度要求更高，而视力有障碍的用户则需要更加清晰的文字和图标。设计师要通过对目标用户的视觉感知优势和弱势进行分析，制定出相应的设计策略，确保产品能够满足不同用户的需求。

谢谢！

 

 

作者：小鸡小小小小鸡
链接：https://www.zcool.com.cn/article/ZMTYzMzYzNg==.html
来源：站酷