HCDE 351 | A3：激光切割原型——手机纸面原型框架
这篇过程记录记录了一个手机纸面原型框架的设计：用户可以用它向参与者展示、测试自己手绘的线框图。
Antares Yuan
产品概述：
这篇过程记录记录了一个手机纸面原型框架的设计：用户可以用它向参与者展示、测试自己手绘的线框图。这个设计的目标是提升实用性和易用性：在帮助用户测试线框图用户流程的基础上，我也让用户能借助这个产品顺畅、直观地进行用户测试。在这个项目里，我探索了怎样用设计更好地回应用户测试线框图的需求（或者说，我自己就是这个产品的用户，因为我经常自己做用户测试），同时练习了制作 2.5D 产品的技能：把产品拆成若干部件来设计，再用插接等结构组装成足够结实的立体产品，不用任何胶水或其他粘合材料。
在这篇记录里，我会讲我如何基于明确的用户需求进行头脑风暴、如何依据自己制定的评估标准做设计决策、如何收集用户和同学的反馈，以及找出了哪些需要改进的地方。我也会记录关键决策背后的理由，以及这些选择如何更好地服务目标用户。
构思：
这个设计的目标，是做一个手机线框图原型的框架，用在早期的用户测试中，为主持测试的访谈者和参与测试的受访者都建立一个直观的用户流程。在这一节，我会讲我如何在不同的想法之间迭代，让方案更贴合设计目标。
我先回想了自己主持用户测试、或作为受访者参与测试时的痛点。我想到了这些：
作为访谈者：
- 我没法向参与者展示用户流程（或者说，我拿不到关于用户流程的好反馈，因为他们盯着满是框框和乱七八糟箭头的线框图，看不太明白流程是什么样的）。他们得花很多时间去理解线框图里的用户流程。
- 用户能同时看到所有线框图，而真实的应用并不是这样。知道了下一步是什么，用户很容易反推出自己该怎么操作才能到下一步，这让我很难测试出所有交互在真实场景中是否足够直观。
作为受访者：
- 线框图用户测试时的指引总是不清楚。访谈者也许会给我一些提示，但我拿到最多的，是写在线框图上含糊又凌乱的句子，让我很难跟上。
- 做用户测试时，我没有手里拿着一部手机的感觉。他们总是只给我几张画着线框图的纸。
- 想对线框图提反馈时，我很少能找到我要找的那部分，因为它总是不够有条理。
在从 Pinterest 上找灵感、思考怎样用设计回应这些点之前，我先制定了原型评估标准，并依据这些标准做了一些设计决策。
原型评估标准：
1. 可行性纸面原型框架应该能单手握持，并能容纳 5 英寸宽的纸面屏幕，手持使用时不会弯折或塌掉。2. 易用性在没有说明的情况下，用户应该能在每屏 3 秒内完成纸面屏幕的插入、取出和替换。3. 吸引力握着框架时，用户应该会觉得，比起看桌上散放的纸，这更像在用一部真实的设备。4. 影响这个框架应该让可用性测试在主持人尽量少介入的情况下进行（不需要解释方向，或该看哪里）。
设计决策：
框架为单手、竖屏使用而设计，模仿典型的手机交互。框架面向 6 英寸宽的纸面屏幕，与现代手机尺寸一致。整体外观应该像一部边框很窄的真实移动设备，同时保持足够的材料厚度，确保结构稳定。屏幕的插入和取出方式（从顶部、侧面或背面）会通过草图来探索，权衡速度和稳定性。手的摆放位置和握持示能会在画草图时研究，以支持舒适的单手使用。主要的测试场景是由主持人引导的演示测试，优先考虑快速换屏和使用过程中尽量少的解释。
明确了要设计什么产品之后，我开始画草图。
草图 1–4、7：
草图 1
草图 2、3
草图 4、7
在草图 1–2 里，我试着检验第三条设计决策的答案。两者的主要区别是框架的边框：草图 1 的原型框架边框比草图 2 窄得多。草图 2 更宽的边框也许能减少误触中间画面的可能（不过说实话，这无所谓，反正只是一张纸），也更好握，但它抵消不了一个缺点：线框图的尺寸被大大压缩，也更不像一部手机（现在的手机边框都没有那么宽）。所以在后面的草图里，我都用了窄边框。草图 3 的开口方式和前两个不同：顶部有一个开口用来插入线框图，底部还有一个开口，用完之后线框图可以从这里落下去。这是对第四条设计决策的检验，我喜欢它在一张张线框图之间切换得很快。草图 4 和 7 里的原型用的是另一种线框图：像老式的翻页漫画书，所有画面以讲故事的方式连在一起。草图 4 的原型像一台胶片相机，线框图就是“胶片”，显示线框图的框就是胶片曝光的位置。它的缺点是，我没法确保参与者能转到完整显示线框图的“正确”角度。草图 7 的原型用的是折叠起来的纸质线框图，用户要拉动底部的纸，每次只展开一张，其他的保持折叠。这比其他方案复杂太多了。
草图 5–6、8–11：
草图 5–6、8–11
这些草图是我的试验场，我在这里尝试了插入和抽出纸张的不同方式，以及握持产品的不同方式。我选择用草图 1 和草图 3 来做低保真纸面原型，因为回看我的痛点、评估标准和设计决策，我认为这两个最贴合设计目标。（所以说，并不总是选最后一版，对吧？）
原型：
在上面几节里，我讲了我如何制定评估标准、明确要做什么产品，然后探索不同的想法，并按照设计目标决定用哪两个来做纸面原型。这一节我会简单讲讲制作两个可测试的低保真纸面原型的过程，再用它们迭代出保真度更高的原型（用矢量编辑器和激光切割机），并展示它的样子。
左：草图 1 的纸面原型；右：草图 3 的纸面原型
左：草图 1 的纸面原型；右：草图 3 的纸面原型
在草图 1 的纸面原型里，我做了一些细微的改动：改变了各部件的连接方式，看看会不会更稳。草图 1 的纸面原型结构上有问题：框架正面和背面的中间没有任何部件连接，拿在手里时框架会左右晃动。草图 3 的纸面原型也有类似的问题：中间有连接，但四个角没有，所以四个角会动，稳定性更差。我还从第二张草图里得到了灵感，决定在中间做多块插板，放在桌上，方便在不同的线框图之间切换。我记住了这一点，结合两个纸面原型的连接结构，做出了最终版。
在 Inkscape 中矢量化的设计
激光切割
最终设计
这就是我的最终设计：它贴合设计目标，通过了评估标准，也满足了我的设计决策。插板上有两个切槽。下面那个用来固定线框图；它上面那个小一些的，可以给参与者留提示和指引。访谈者先把线框图固定好，再在上面留一些说明，比如“点击 XXX 可以进入这一页”，或者这一页该怎么操作。访谈者要确保这两者位于插板的两面。然后访谈者把插板翻过来，对用户隐藏线框图，让用户从手机原型框架中间把插板抽出来，下一块翻好的插板等着被插入。这样，我列出的所有痛点都被解决了，操作起来也依然简单。
反馈：
课上，我和同学三人一组进行了一轮评图。轮到我时，我把原型交给他们，自己保持沉默，让他们自己摸索怎么用。以下是我收到的反馈：
哪些地方做得好？
- 原型稳固、结构结实，不用外力支撑就能立住。
- 主要部件可以轻松地插入和取出，基本交互顺畅、省力。
- 整体的实体结构让人觉得牢固可靠，用户拿在手里很有信心。
哪些地方可以更好？
- 放评论便利贴的部分在抽出时可能会卡住，反复使用时会有阻力，可能影响长期的易用性。
- 放评论便利贴的小切口让人困惑，看不出它的功能，也不知道该怎么用。
- 有些用户一开始误解了交互的方向，说明示能不够一目了然。
- 这个形态让人觉得它由多个框或多层组成，如果结构没有讲清楚，可能会增加认知负担。
收获：
同学和助教的反馈都表明，我的设计确实贴合了设计目标，回应了痛点，也通过了基于设计决策的评估标准。但这个设计还有一些小问题，可能会、也可能不会影响它的功能。如果做到下面几点，它会更好：
- 让示能更清晰，让交互方向更直观。
- 重新设计放评论便利贴的部分，减少阻力，避免卡住。
- 简化小部件，让它们的功能更容易理解。
致谢：
特别感谢我的组员、助教 Nichole Sams 和授课老师 Brock Craft 给出的宝贵反馈。
感谢阅读！: )
技术附录：
AI 使用说明：
- 我用 ChatGPT 修改语法和错别字；
- 我用 NotebookLM 帮我整理用户反馈；
- 我和 ChatGPT 讨论了根据收到的反馈，应该改进哪些地方。
写作参考：
- 这篇博客的整体结构参考了我上一篇博客，其中有一些我自己写的句子是相同的（部分过渡句和用词）。
- 参考的博客在这里：https://antaresyuan.site/blog/hcde-351-a2-soft-goods-prototype-shoulder-bag-design/
灵感参考：
https://www.pinterest.com/pin/833869687282567882/
