CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化

[1.原型保真度 Fidelity in Prototyping](#1.原型保真度 Fidelity in Prototyping)

[2.维度 Dimensions](#2.维度 Dimensions)

2.1视觉（Visual）

[2.2 交互（Interaction）](#2.2 交互（Interaction）)

[3.物理设计Physical Design](#3.物理设计Physical Design)

[3.1菜单设计 Menu design](#3.1菜单设计 Menu design)

[3.2图标设计 Icon design](#3.2图标设计 Icon design)

[3.3屏幕设计 screen design](#3.3屏幕设计 screen design)

[3.4信息显示 Information display](#3.4信息显示 Information display)

[4.原型设计的技巧Tips for prototyping](#4.原型设计的技巧Tips for prototyping)

4.1原型设计方式类型

4.2原型设计各个阶段

[4.3注意事项 Cautions](#4.3注意事项 Cautions)

4.4讨论：

1.原型保真度 Fidelity in Prototyping

低保真原型还是高保真原型没有明确的划分 about low- or high-fidelity prototype, There is no clear separations

·不过我们确实可以从不同角度进行衡量。

保真度是一个谱系， fidelity is a spectrum
定义保真度的水平define the level of fidelity

从中权衡 compromise

·这两种情况本身并没有绝对的好或坏。Neither of these is inherently good or bad

·在任何维度上提高或降低保真度都会带来成本和取舍。 There are costs and trade-offs with raising or lowering fidelity in any dimension.

·作为设计师，从第一张图片到最后一张图片的路径，由你来决定。The path you take as the designer to get from the first image to the last is up to you to determine.

重要性：

·对保真度的模糊描述会导致时间和精力的浪费。wasting time and sanity with imprecise language about fidelity.

·可能会错误地验证当前的方案，而错过未来更好的方法。We might falsely validate the current solution and miss out on a better approach in the future.

·团队容易过早地过度设计原型，从而造成资源浪费。Teams are prone to over-engineering a prototype prematurely, leading to wasted effort.

·即使原型整体是低保真的，某个关键维度可能需要接近生产级别的质量和保真度来进行有效验证。Even if the prototype is low-fidelity overall, a crucial dimension may require near-production quality and fidelity for effective validation.

2.维度 Dimensions

原型设计中的五个维度从不同的角度衡量原型的保真度和完整性。

2.1视觉（Visual）

定义：视觉维度关注原型的外观，即它看起来有多接近最终产品。

·这指的是在视觉界面和物理对象设计中投入的专注度和细致程度。Refers to the devotion and granularity put into the design for visual interfaces and physical objects

>在早期阶段，视觉保真度相对较低，因此用户会更关注动作、流程和概念...... In early stages, the visual fidelity are rather low, so users will focus on the actions/procedures/concepts.

>在后期阶段，视觉保真度应该更高，以便测试可访问性、触感和视觉细节......

In later stages, it should be higher to test the accessibility/touch/visual details...

特征：视觉是用户对原型最直接的感受维度。It is the most direct dimension that user feels about the prototype
- 问题：在设计过程中过早地跳到高视觉保真度。 The issue is jumping to high visual fidelity too early in the design process.

·保持较低的视觉保真度，可以促进更好的沟通和反馈。 Keeping visual fidelity low can facilitate better communication and feedback.

衡量标准：

·低保真：使用简单的线框图或黑白草图，界面元素非常抽象，没有细节。

·中保真：界面有基本的布局和颜色，但可能缺乏完整的视觉设计。

·高保真：界面看起来非常接近最终产品，有完整的视觉设计、颜色、图标和字体，细节丰富。

重要性：视觉保真度影响用户对产品的第一印象和感知。高保真的视觉设计可以帮助更好地评估产品的用户体验和视觉吸引力。

2.2 交互（Interaction）

定义：交互维度关注用户与原型之间的互动，即它在使用时的感觉。

·这指的是能够重现真实世界交互的精确程度。 Refers to the objective degree of exactness with which real-world interactions can be reproduced

>用户可以点击、轻触和滑动屏幕，从而获得真实的感受。 Users can click, tap, and swipe through screens and get the feel

>它使团队能够快速且低成本地测试数百种变体。It allowed the team to quickly and cheaply test hundreds of variations.

衡量标准：

·低保真：静态页面，用户无法与之交互。

·中保真：简单的交互，如按钮点击、页面跳转等基本功能。

·高保真：复杂的交互，如动画、过渡效果、动态内容加载等，用户可以像使用真实产品一样与之交互。

便捷软件：

·InVision 让任何人都可以将屏幕拼接在一起以提高交互保真度。InVision lets anyone stitch screens together to increase interaction fidelity.

·Balsamiq 具有屏幕链接功能，可以与低视觉保真度的组件库结合使用。Balsamiq has screen-linking capabilities that combine with a low-visual-fidelity component library

重要性：交互保真度直接影响用户体验。高保真的交互可以帮助发现潜在的用户体验问题，并优化产品的交互设计。

2.3广度（Breadth）

定义：广度维度关注原型覆盖的功能范围，即它是完整的系统还是只是部分功能。

·简单来说，它指的是所涵盖的功能数量。Simply speaking, it refers to the number of features covered.

衡量标准：

·窄广度：只包含核心功能或特定模块，其他部分可能不存在或未开发。

·宽广度：覆盖了产品的大部分功能，用户可以体验完整的流程。

重要性：广度决定了原型的完整性和测试的全面性。宽广度的原型更适合进行整体的用户测试，而窄广度的原型则适合快速验证特定功能。

2.4深度（Depth）

定义：深度维度关注在给定的广度下，用户在每个功能或模块中的操作自由度。

·简单来说，它指的是功能的程度。 Simply speaking, it refers to the degree of functionality.

衡量标准：

·浅深度：用户只能进行有限的操作，很多功能是固定的或预设的，无法深入探索。

·深深度：用户可以自由探索每个功能，进行各种操作，就像在真实产品中一样。

示例：假设这次我们正在为语音助手（例如Siri、Alexa）制作原型。并且，我们将语音助手原型的广度限制在一个单一领域：天气。 Imagine that this time, we're prototyping a voice assistant (e.g., Siri, Alexa). Pretend we limited the breadth of our voice assistant prototype to a single domain: weather.

·如果我可以询问任何与天气相关的内容并得到回应，那么这就是高深度保真度------换句话说，它是深入的。 If I can ask about anything at all related to weather and get a response, that's high depth fidelity --- in other words, it's deep.

·如果我只能询问主要城市的天气预报，那么深度就较低。如果我只能询问当前所在位置的温度，那么深度就更低了。If I can only inquire about forecasts in major cities, that's less depth. If I can ask only about my current location's temperature, that's even lower.

重要性：深度影响用户对产品的探索和测试的深度。深深度的原型更适合进行详细的用户测试，以发现潜在问题。
vs广度：

2.5内容（Content）

定义：内容维度关注原型中使用的数据和信息的真实性，以及这些内容是否与用户相关。

·这指的是内容的真实性程度。 Refers to the degree of realism for the content.

>内容的保真度会影响用户反馈。The content fidelity will impact on the feedback from users

>想象一下，你的原型是一个严肃的招聘应用，但使用了像海绵宝宝（SpongeBob）这样的虚构名字。Imagine your prototype about serious recruitment apps with fake names as SpongeBob

衡量标准：

·低内容保真度：使用占位符文本、虚构数据，内容不完整或与实际场景无关。

·高内容保真度：使用真实的数据、内容与实际场景紧密相关，用户可以更容易地理解和使用。

重要性：内容的真实性和相关性直接影响用户的理解和接受度。高保真的内容可以帮助用户更好地评估产品的实用性和价值。

2.6其它维度

自主性：Autonomy

·独立运行 vs 需要"监督" operates alone vs requires "supervision

平台： Platform

·临时实现 vs 最终实现interim vs final implementation

重要教训：

采用模块化的原型设计方法。 modularity of prototyping
每种原型设计工具都有其优势和劣势，在某些原型设计维度上可能比其他工具更高效、更有能力。Each prototyping tool has strengths and weaknesses may be better (more efficient and capable) for some of these prototyping dimensions than others.
在设计的生命周期中，你可能需要使用多种工具。you may need multiple tools throughout your design's life cycle.

3.物理设计Physical Design

从概念化转向具体化 Getting concrete (vs. conceptual design)

·更多地考虑设计界面的具体、详细问题

Considers more concrete, detailed issues of designing the interface

·物理设计与概念设计之间的迭代 Iteration between physical and conceptual design

物理设计的指导原则 Guidelines for physical design

·尼尔森的启发式原则 Nielsen's heuristics

·施奈德曼的八条黄金法则 Shneiderman's eight golden rules

·风格指南：商业、企业级的风格指南决定了你的小部件的"外观和感觉"，例如，图标、工具栏等Styles guides: commercial, corporate decide 'look and feel' for your widgets prescribed, e.g., icons, toolbar

具体化设计 Getting concrete

·不同类型的界面元素（对话框、工具栏、图标、菜单等） Different kinds of widget (dialog boxes, toolbars, icons, menus etc.)

>菜单设计 menu design

>图标设计 icon design

>屏幕设计 screen design

>信息显示 information display

菜单的长度
菜单项的顺序排序
菜单的结构

·例如，何时使用子菜单、对话框？

分组菜单项的类别
表示分组的方式

·例如，使用不同的颜色、分隔线？

菜单数量
术语选择

·需求分析的结果会指示这一点，记得那个关于攀岩的项目！

适应物理限制的方式

·例如，移动电话？

3.2图标设计 Icon design

良好的图标设计是困难的
图标的含义是文化相关且受上下文影响的 Meaning of icons is cultural and context sensitive
建议：

·总是借鉴现有的传统或标准 always draw on existing traditions or standards

·具体的物体比动作更容易表示 concrete objects or things are easier to represent than actions

3.3屏幕设计 screen design

屏幕间布局

·在多个屏幕之间分配内容 Splitting functions across screens

·在屏幕内和屏幕间移动时，每个屏幕展示多少交互？是串行风格还是工作台风格？

单个屏幕设计 Individual screen design

·空白区域：在信息量/交互性与清晰度之间找到平衡 white space: balance between enough information/interaction and clarity

·将项目分组：使用方框、线条还是颜色进行分隔？grouping items together: separation with boxes? lines? colors?

在多个屏幕之间分配功能 Splitting functions across screens

·以任务分析为起点 Task analysis as a starting point

>每个屏幕是否只包含一个简单的步骤？ Each screen contains a single simple step?

>如果屏幕过多且步骤过于简单，可能会让用户感到沮丧 Frustration if too many simple screens

·保持信息的可用性 Keep information available

>同时打开多个屏幕multiple screens open at once

单个屏幕设计 individual screen design

·引导用户关注重点，例如，通过使用颜色、动态效果或框线（可见性？） Draw user attention to salient point, e.g., colour, motion, boxing (Visibility?)

·动画效果非常强大，但也可能分散注意力 Animation is very powerful but can be distracting

·良好的组织有助于：分组、物理邻近性 Good organization helps: grouping, physical proximity

·在稀疏布局和过度拥挤之间需要权衡Trade off between sparse population and overcrowding

3.4信息显示 Information display

始终提供相关信息 Relevant information available at all times
不同类型的信息意味着需要不同的显示方式 Different types of information imply different kinds of display
纸张显示与屏幕数据输入之间的一致性Consistency between paper display and screen data entry

4.原型设计的技巧Tips for prototyping

4.1原型设计方式类型

抛弃式原型 throw-away

·原型仅用于引发用户反馈 prototype only serves to elicit user reaction

·必须快速创建原型，否则成本过高 creating prototype must be rapid, otherwise too expensive

增量式原型 incremental

·产品作为独立组件（模块）构建 product built as separate components (modules)

·每个组件分别进行原型设计和测试，然后加入最终系统 each component prototyped and tested, then added to the final system

演化式原型 evolutionary

·原型会根据设计变更进行修改 prototype altered to incorporate design changes

·最终演变为最终产品eventually becomes the final product

4.2原型设计各个阶段

构思阶段：低保真纸质草图 Ideation: Low fidelity paper sketches
概念设计阶段：低保真纸质草图、故事板 Conceptual design: Low fidelity paper sketches, storyboards
中间设计阶段：低到中保真的线框图 Intermediate design: Low to medium fidelity wireframes
详细设计阶段：高保真的线框图、编程原型 Detailed design: High fidelity wireframes, programmed prototypes

4.3注意事项 Cautions

合理权衡成本与价值 Rationalize cost-value tradeoffs
不要过度承诺------避免承诺无法实现的功能，确保开发的完整性Do not oversell - capabilities that can't be delivered, development completeness
不要过度构建------"够用就好"作为原型的原则Do not overbuild -- "good enough" as a prototype
尽早决定是采用探索性原型还是演化性原型Decide early on exploratory or evolutionary prototypes

4.4讨论：

针对你们自己的项目，讨论以下问题：discuss the following questions for your own projects:

·你们的原型主要旨在解决哪些问题？ what are the main challenges that your prototype means to solve?

·你们的原型需要达到什么样的保真度？what fidelity seems right for your prototype?

·你们需要考虑哪些维度？ what dimensions you need to consider?

·你们项目可能使用哪些工具？各自的权衡是什么？what are some possible tools for your project? what are the tradeoffs?