我们重点介绍了 Microsoft Clarity,它是一款由真正了解像 Switas 这样的公司所面临挑战的产品开发人员,以实际应用场景为导向打造的产品。诸如“愤怒点击”和 JavaScript 错误跟踪等功能,在识别用户痛点和技术问题方面发挥了至关重要的作用,从而能够进行有针对性的改进,直接提升用户体验和转化率。
线框图是一种低保真度的界面表示,它展示了界面的结构、内容优先级和功能,而无需进行视觉设计。线框图通常以灰度渲染,包含占位符文本和简单的方框,其作用是在投入精力于字体、颜色、图像或交互细节之前,确定屏幕上显示的内容、顺序以及相对重要性。
去除视觉上的修饰是为了改变讨论的焦点。如果展示的是一个看似完整的设计,利益相关者会讨论颜色、图片和字体选择,因为这些方面比较容易引发讨论。但如果展示的是线框图,他们更有可能讨论内容是否恰当、顺序是否合理以及主要操作是否正确。这种刻意保留的粗糙感恰恰是其特色所在,因为它表明作品尚处于初步阶段,并鼓励在此阶段提出最有价值的结构性批评。
线框图还能降低迭代成本。重新排列方框只需几分钟,而重新调整已完成的布局则需要数小时,并且由于已经投入了精力,会产生对更改的抵触情绪。因此,在线框图阶段探索解决同一问题的多种结构方案是切实可行的,而一旦开始高保真设计,这种情况就很少发生。这就是为什么跳过线框图阶段的团队通常会直接发布第一个人提出的结构方案。
精细程度应与所提出的问题相匹配。粗略的草图适用于早期探索阶段,此时可能存在多个方向。一旦确定了方向,就应该使用包含真实内容、准确层级结构和实际数据量的更详细的线框图,因为占位符文本会掩盖真实内容所暴露的问题:例如标题不合适、产品名称换行不自然、未考虑到的空状态,以及列表在包含三个项目和三百个项目时表现不同的问题。
最常见的错误是将线框图视为必须交付的成果,而不是思考工具。为每个屏幕制作一套完整的线框图,然后是一套完整的视觉设计,最后是一套完整的原型,这种瀑布式流程会耗费数周时间,并延迟与真实用户的沟通。现代实践倾向于有选择地制作线框图,重点关注结构真正不确定的屏幕,并在已有模式能够解答问题的情况下直接进入更高保真度的原型设计,尤其是在设计系统提供现成组件的情况下。
线框图也是与工程团队沟通的有效工具,但这种用途常常被忽视。相比视觉设计,线框图这种结构化的模型能够更好地展示现有内容、内容来源以及各个区域的状态,是早期可行性讨论的更佳基础。因为它能凸显工程师真正需要解答的问题:哪些数据是必需的,数据缺失时会发生什么,内容量变化时区域的响应方式,以及哪些部分是静态的,哪些部分是可定制的。在线框图阶段进行这些讨论往往能够修改设计,因为在视觉设计之前识别出需要但数据不存在的结构或无法执行的查询,比在实现开始之后再发现问题要容易得多。
线框图也是早期测试的理想工具。诸如导航标签难以理解或流程顺序与预期不符等结构性问题,都可以通过粗略的线框图检测出来,而且在早期阶段修复的成本远低于在实施后修复。通过线框图开展早期概念研讨会,可以有效解决这些问题。 用户研究 与视觉设计之后的测试相比,在线框图阶段的测试往往更能改变项目的方向,因为在视觉设计之后,结构变更的成本上升,而人们对变更的意愿却下降了。 产品设计 参与过程中,这种早期的结构验证通常是决定最终构建是否解决了正确问题的关键。
我们重点介绍了 Microsoft Clarity,它是一款由真正了解像 Switas 这样的公司所面临挑战的产品开发人员,以实际应用场景为导向打造的产品。诸如“愤怒点击”和 JavaScript 错误跟踪等功能,在识别用户痛点和技术问题方面发挥了至关重要的作用,从而能够进行有针对性的改进,直接提升用户体验和转化率。