熟悉编码对设计师有很大的好处. 因此, 许多人已经开始学习如何使用代码(或者至少在某种程度上使用代码语言)，以便在与工程师合作时更有效. JavaScript, 可以说是网络上最受欢迎的脚本语言, 有一个强大的社区，正在用它正在制作的框架塑造网络的未来.

由于它们的结构和技术限制，框架喜欢 Vue.js, 反应.js, 材料界面 都很重要 设计师 考虑，因为它们充当健壮设计系统的构建块. 此外，了解代码的工作原理在促进时也会派上用场 数据驱动的设计 开发环境中的技术，如a /B测试.

在最近的一个项目中，一家初创公司创建了一个病人管理平台，将个人与心理健康专家联系起来, 我们发现，对我们的许多临床顾问来说，尽可能少地建立和管理患者账户是关键. 专注于为患者档案创建直观的浏览体验是至关重要的, 就像建立一个 最优用户流 为患者创建、编辑和分配健康活动.

与技术主管讨论项目, 这是从根本上决定的, 应用程序非常简单:临床医生需要能够创建和编辑患者档案, 查看健康活动库, 给病人上课.

团队决定将项目的设计与 材质UI框架, 利用弹出式模态等基本元素, 显示卡片, 活动/活动按钮, 手风琴列表, 以及一系列成功和警告通知. 一旦定义了构成基本元素的组件, 产品团队对应用程序的布局提出了不同的意见.

在讨论项目的UI设计时，开发人员解释了两者的区别 功能 和 显示 组件以及功能组件如何控制应用程序的数据流，而显示组件则与UI和布局相关.

简单地说, 显示组件定义了应用程序的可视化语言, 功能组件帮助它们活了起来.

这种结构提供了独特的可能性 设计师 因为, 通常, 与管理应用程序逻辑相关的代码被隔离到与控制UI布局的文件分离的文件中. 如果做得正确，这种软件设计方法可以确保 模块化和健壮的代码库 这使得测试驱动的过程成为可能.

是否可以用最少的工程工作量来测试不同布局中的相同功能? 答案是“是的。,，如果在过程的早期采用A/B方法, 它将被纳入精益产品开发生命周期. (精益产品开发是从日本的精益概念衍生出来的 改善, 对工作流进行增量改进的业务哲学, 实践, 技术, 在这里是生成物.)

埃里克•里斯, 连续创业者和作家, 在他的书中讨论了精益产品开发生命周期的实用指南 精益创业. 该方法遵循构建具有明确假设的产品的工作流程, 测试所构建的内容, 并根据所学内容进行迭代.

精益创业方法

定义A/B测试方法

A/B测试是任何经验丰富的游戏的核心组成部分 用户体验专业的工具箱. 它在软件开发生命周期中的作用是帮助提高应用程序的可用性. 结合热图数据, 团队可以获得对用户行为的有价值的洞察, 特别是当涉及到应用程序流程中的摩擦点时.

在开始A/B测试之前，以下是一些需要关注的问题:

• 如何在用户体验中使用A/B测试?
• 有哪些A/B分析方法?
• 为什么要在线框图时设计A/B测试?
• 我们在测试什么?

大规模A/B测试最常见的方法是A/B测试 分割测试 它为实时用户提供略有不同的应用程序或网站版本. 分割测试通常超出了初创公司或小型企业的范围和/或预算. 然而, 除了大规模的分割测试，还有一些更容易获得的替代方法，包括:面对面的访谈, 焦点小组, 以及在线服务，将你与测试用户网络连接起来.

A/B测试驱动设计

在 线框图流程, 从布局和导航角度考虑A/B测试的可能性是很重要的. 显示组件的简单变化可以很容易地改变信息的呈现方式. 基于组件的框架使您可以自由地试验内容的组织方式，而无需重新设计产品的核心功能.

像任何设计努力一样，有效的A/B测试应该遵循明确定义的方法. 首先，确定要测试的变量. 接下来，定义什么是成功. 通过评估数据并确定下一步应该做什么来结束.

例如，在一个案例中，测试了布局层次结构. 布局A由两列网格组成，屏幕左侧是患者列表组件，右侧是患者概要组件. 布局B有一个单列的患者列表，可以通过点击进入患者的个人资料组件.

我们的第一个测试是清晰度. 我们在面试中询问临床顾问，两种设计中哪一种感觉最有条理. 与内部假设相反, 单柱网格被强烈认为是更直观的设计方案. 我们的顾问认为，病人名单和个人资料在同一个显示器上的组合感觉“忙碌”和“混乱”.相比之下，用来描述单列网格布局的词语则是清晰和“干净”的.”

“组件盒模型”

对于这个web应用程序，我们使用 反应，一个基于状态管理和模块化组件概念的框架. 反应是一个用于构建用户界面的声明式、高效和灵活的JavaScript库. 它允许您从称为“组件”的小而孤立的代码片段组成复杂的ui.“在涉及开发人员和用户的产品中，这种模块化转化为灵活性 设计师.

我从HTML+CSS盒子模型中得到灵感，开始理解这个框架. 组件盒模型 提供一种组织方式，用于为应用程序创建构建块. 它特别适合为快速发展的项目开发设计系统.

保持 设计思考 敏捷, 可以遵循一组特别适合精益产品开发生命周期的设计原则.

• 第一个原则: 对相似上下文进行分组 和行动.
• 第二个原则:让信息体系结构提供帮助 简化“状态”的流程 组件之间的.
• 第三原则: 设计可扩展的视觉系统 简化开发人员理解和实现设计的方式.

对相似上下文进行分组

考虑你的用户 心智模型-根据“使用环境”对类似的结果和行为进行分组.“考虑用户是否需要创造, 读, 更新和删除每个上下文中的项, 如果你需要为他们的行为提供任何反馈. 在为特定的使用场景定义A/B测试时, 考虑布局, 如何访问输入和导航方法.

简化“状态”的交互流程

在反应, “状态”流指的是信息如何在应用程序中移动, 组件如何帮助组织数据以及如何显示数据. 通常，状态从充当容器的功能组件流入显示组件. 设计师可以通过预先概述功能组件如何通过改变显示组件的评估方式来改变应用程序的布局，从而为A/B测试做好准备.

开发健壮的设计系统

使用显示组件制定标准 视觉元素 像排版, 按钮, 输入, 情态动词, 卡片有助于为标准化的设计语言提供构建块. 健壮的视觉系统具有保持的灵活性 用户体验设计师 开发人员对线框图中引用的组件有相同的了解.

Summary

A/B测试驱动设计的成功取决于产品和技术团队之间的协同作用. 希望采用这种方法的设计师应该精确地说明 在哪里 和 如何 测试. 花时间建立一个假设，并确定你希望发现什么. 不要分心. 坚持下去——很容易偏离你的方法.

这个过程永远不会真正结束，并随着产品的增长而发展. 设计师 采用测试驱动的产品开发策略应该利用在产品开发生命周期中出现的学习机会.

组件, 很像设计系统, 是关于模式的模块化和可重用性的吗, 与布局或风格无关. 从设计师的角度来看, 测试的灵活性, 完善, 并通过A/B测试来改进产品可以帮助开发更以用户为中心的产品, 是什么最终导致了他们更大的成功.