很多人普遍的认为，用户体验设计师是艺术家，可以从无到有地从一张画布上创造出美丽的界面。虽然产品的美感很重要，但视觉设计只是设计过程的一方面–在这个过程中，具有不同技能和专业知识的团队成员相互协作。
在《The Elements of User Experience》一书中，Jesse James Garrett为用户体验设计的各个环节提供了一个框架。虽然这个框架最初是为网站绘制的，但它适用于所有的数字应用，并且可以帮助明确视觉设计和用户体验设计之间的关系。这篇文章我们带大家来了解一下视觉设计和用户体验设计之间的联系。
Garrett眼中的用户体验要素
根据Jesse James Garrett，策略、范围、结构、骨架和界面这五个平面构成了用户体验的要素。
Garrett将用户体验的要素分解成5个平面，依次堆叠。堆叠的底部是最抽象的“策略”，越往上，要素则更具体，不再那么抽象了。最上面的是“表层”，是用户体验设计中最明显或最具体的方面，我们可以通过建筑的比喻来理解这个框架。
- 策略
假设你有一块土地，想用它来建一栋大楼。项目的前期决定包括：你为什么要建一栋大楼；是为了居住还是为了商业目的？谁想租用该建筑？地点对潜在的买家或租户是否有利？你咨询评估师和律师，以帮助你做出这些决定。通过这些问题，你确定了商业目标和用户需求。
- 范围
前期的策略影响着范围。关于该建筑，你会咨询专业人员，他们会检查土地，评估在上面建造什么才比较合适–一栋独立的房子、一栋公寓楼、一个办公空间或者可能是一个购物中心。项目的范围定义了价值主张、产品和满足商业目标及用户需求的特征。
- 结构
一旦决定了范围，建筑师就会创建蓝图，上面显示了不同房间的入口和出口、走廊、洗手间、电梯和楼梯。这就是结构–体现用户如何与产品的功能进行互动，如何体验产品的特征。
- 骨架
建筑师根据蓝图创建草图或3D模型，包括内部的细节。建筑师还会请人帮忙制作出建筑的部分全尺寸样本，并配有家具和配件，让你对空间有更真实的感受。在“骨架”层面，产品的界面变得清晰可见。
- 表层
最后，室内设计师出现并帮你决定各个房间的墙壁、地板、家具和配件的颜色。“表层”是用来作展示的地方。
数字“建筑”
现在，我们把上述框架运用到虚拟的数字产品上。
用户体验设计团队首先确定用户、他们面临的挑战以及用户目前如何解决这些挑战。团队会进行调查和访谈，并使用用户角色和客户旅程地图等工具。做完以上努力后，团队可能会发现，例如，自由撰稿人（潜在用户）发现很难维护账簿（挑战）。现有的APP不能满足他们服务的特定性质（机会）。
用户体验设计师经常与人有密切的商业合作，好实现相关策略活动和决策，有时还会借助商业模式画布来帮助他人理解企业是如何创造、交付和获取价值的。
团队通过头脑风暴来确定潜在的解决方案，然后对价值主张进行范围界定。比方说，团队决定为自由撰稿人提供一个免费的手机APP。他们确定APP的不同功能，并创建一个产品路线图，确定引入功能的优先次序。设计师们会咨询商业上的利益相关方以及技术团队来创建路线图。
随后，该团队开始进行APP的结构工作。这通常包括不同类型的流程图和地图，表明信息如何分类以及用户如何一步步体验产品。比方说，第一个要推出的是发票功能。团队对与发票相关的不同数据进行分类–签发日期、付款条件、到期日期等。可能还有其他数据，如客户名称、联系信息和付款方式。然后，该团队以合理的方式确定这些不同数据片断之间的关系。这项任务有时由称为信息架构师的专家来处理。
APP骨架是以线框的形式创建第一版图纸的步骤。线框是简单的线条图，通常只有标记过的盒子和线条，用来描述屏幕上的不同项目。这些线框图可能会进一步变成原型，方便设计团队提前感受APP的运行。
表面是所有视觉设计元素（颜色、排版、图标和插图）的展示画面，包括内容和微小信息，如标签、标题、信息和说明。
正如我们所看到的，用户体验设计是一门广泛的学科，不同学科的专家在这里都能发挥极大的作用，具体活动有研究、信息架构、视觉设计和文案等等。
视觉设计的作用
“视觉设计上若出现问题，用户的热情会被迅速浇灭。他可不会去细细体会你在导览或者交互设计上所花的心思。” – Jesse James Garrett
由于视觉设计是用户体验设计中最清晰可见的方面，刚进入用户体验设计领域的人通常认为视觉设计是自己工作中最重大的部分。然而，正如上文所述，视觉设计一般是设计过程中最后做出的决定之一，在“表面”之下，产品还包含很多东西。
虽然你可能拥有执行所有任务的实力，但你更可能是某个团队的一分子，而非单兵作战。在设计过程中，人多总比人少好（会有更丰富的点子！）。一个由设计师组成的团队能提供不同的视角，并能产生更多的想法，更不用说并行工作可以令效率更高。
用户体验设计也需要与商业和技术相关的决定，这就需要一个跨学科的团队来做决策，比如：
- 产品将如何产生收入？
- 我们应该在产品上运行第三方广告吗？
- 是否有可能与类似的产品合作/整合以提供更全面的体验？
所有这些决定都会在不同的方面影响产品–从功能集合（范围）到屏幕上的一个小图标（表面）。
在团队中从事视觉设计的专家被称为用户界面（UI）设计师。当你在招聘广告的工作描述中看到用户体验设计师将会负责用户界面/用户体验设计时，你就得知道公司正在寻找一个熟练掌握视觉设计以及研究、信息架构和线框的人。
然而，这并不意味着专门的视觉设计师不用了解用户体验设计的原则。作为与用户接触的首要接触点，视觉设计是极其重要的。如果用户不喜欢他所看到的东西，那么他可能根本就不会投入时间来探索产品。一旦用户决定探索产品，美学设计必须与底层架构保持一致，并遵守可用性原则，以提供令用户愉悦的体验。比方说：
- 表面上的购物车图标要使用户很容易理解产品的购买功能。
- 背景和前景颜色之间的高对比度使文本易于阅读。
- 如果一个屏幕上的互动元素被设计成一个按钮的样式，那么在所有的屏幕上都采用相同的样式，这样用户能很容易地识别互动元素。
迭代 迭代 再迭代
没有就迭代进行讨论，我们对用户体验设计的讨论将是不完整的。与我们最初提及的实体建筑项目不同，没有迭代环节，用户体验设计团队的工作就不算完成。在设计过程的每一个阶段，团队都会测试其假设和设计。团队还会对真实的用户进行启发式的评估，邀请他们进行可用性测试，以确定改进的范围和机会。
团队可能会问的问题有：
- 我们有多了解我们的用户？我们是否解决了正确的问题？(策略平面)
- 产品是否解决了问题？哪些功能可以帮助解决这个问题？(范围平面)
- 产品的功能是否容易使用？(结构、骨架、表面平面)
可用性测试的结果往往会对其他平面上的决策产生连锁反应。
用户体验设计是一门广泛的学科，它涉及多种活动和技能。按照抽象的顺序，用户体验设计包括在策略、范围、结构、骨架和表面五个平面上做出的决定。视觉设计是表面的一部分，是设计项目中最后做出的决定之一。
虽然用户体验设计师可以掌握与用户体验设计相关的所有技能，但用户体验团队通常会有专家负责设计过程中的一个或多个方面。视觉设计师，也叫用户界面（UI）设计师，是专注于用户体验中视觉方面的专家。一名用户体验设计师不一定要是优秀的视觉设计师，但一名视觉设计师必须理解用户体验设计的原则，以确保用户有一个无缝的体验。
原文链接：https://www.interaction-design.org/literature/article/the-relationship-between-visual-design-and-user-experience-design
翻译：马克笔设计留学
如果对于设计专业留学和作品集有任何疑问，可以随时和我们联系，微信：13718574833，知无不言言无不尽！
