翻译：浣熊君
原文作者：Javier Cuello
原文链接：https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/
本文由非科班设计翻译小组翻译
有时，我们倾向于将我们的设计看作是艺术品。但是如果我们以这种方式看待它们，这意味着它们没办法在面对“现实世界”的不确定条件时，保持实用性。一个能适应变化，适配性好的界面也可以很有美感。我们必须承认，界面确实会变化，并且时常变化。
在设计移动APP的时候，我非常享受把产品从初始概念，发展成型到后期微调和改进界面细节的过程。这可是一个步骤繁多的过程。在这个过程中，我和团队的其他几名成员（从调研人员，插画人员到开发人员）一起参与设计。但这也意味着在每一个阶段，我们都必须要做出大量决定，而其中一些并不有趣反而很棘手。
作为UX专家，我们有各种不同的出身背景，但视觉界面是我们花费最多的时间的部分（而这部分的成功也往往归功于我们）。我们是有火眼金睛的视觉思想家。这就是为什么有时候在开始一个新项目时，我们总想直接跳转到可视化界面设计阶段，这也是为什么我们有时候会认为其他任务无聊的原因之一。
这也意味着我们经常推迟（甚至更糟糕，忽略）我们工作过程和流程中的其他重要部分：定义用户需求和目标，绘制任务流程，处理信息和交互设计的所有细节等。这些部分同样是至关重要的，同时，对于许多人而言，它们更具抽象性，更难想象它们是如何成为最终产品的具体的部分的。
制作界面的细节时你也该问问自己，你为什么要建立它。（图片：Webshocker的天气APP）
当我们开展视觉设计时，所谓的像素完美哲学可能是陷阱，让我们花费更多不必要的时间来制作细节，直到页面中最小的细节也达到了“完美” 。这导致产生了一代使用Dribbble和Behance的设计师，他们在网站上主要是展示经过精心雕琢后的应用和网站界面，他们更关心设计“看”起来怎么样，而不是设计“用”起来怎么样。在现实世界中，事情往往不会像我们所期望的那样顺利。
或者，正如保罗·亚当斯（PaulAdams）所说：
我看到很多设计师在设计时只关注第四层次的设计，而不考虑其他方面。设计应该自下而上，而不是自上而下。如果其他三个层次的问题尚未得到解决，网格，字体，颜色和审美风格都是无关紧要的。许多设计师说他们会考虑其他方面，但事实是他们并没有这样做，因为相比起做出复杂商业决策，以及和意见相左的人商讨斡旋，有时候画出精美设计图和纠结于像素间更有趣。留在第四层也没关系，但你必须认清，这是艺术，而不是设计。你是使用数码工具的艺术家，而不是设计师。
就个人而言，我认为最好的设计（在用户界面设计领域）不仅要外观和感觉都不错，而且还能对多变的使用环境，甚至是不可预知的情况做出优雅的反应。
在构建一个产品的漫长的道路中，有些阶段需要设计师把更多精力放在协同合作，而不是视觉设计上。这也正是这篇不太长的文章（我可不想让你在键盘上睡着啦！）的重点了。在接下来的几段中，我将就如何测试正在开发的APP设计并检查它是否准备好被发布，提出一些建议和提示。
在不完美中寻找美丽
当我在大学学习平面设计时，他们教导了我平衡，对齐，比例和紧张的美感，以及如何在空间中放置元素，能使他们和谐和令人愉悦。有了这个知识以后，我的生活改变了，我开始用不同的视角观察世界。后来，我开始设计界面，我试图把这些原则运用到实践中——界面上的所有信息都应该形成让人非常满意的视觉效果。
如果你将这些原则应用于移动应用设计，那么我们会发现只有在我们显示适量的信息量时，视觉效果才好。例如，如果这个页面必须列出人物名称，设计师通常会选择一些简短且常见的名字，并将它们完美地排列在一起——而没有考虑不受人喜欢但可能出现的长名称。这样的长名称可能会破坏设计美感，或者使设计崩溃。
这种做法是基于这样一种假设，即混沌和不完美中不可能有美感——即使混沌和不完美在现实世界中经常出现。但视觉界面并不是静态的观赏性的艺术品;它们是动态的，功能性的空间，可以自适应每个用户，并为用户而改变形态。我们不应该屈服于纯美学设计的诱惑，因为我们根本不可能控制界面呈现（和提供）给用户的东西。
相反，我们必须为改变而设计！日本人把这称为wabi-sabi，“以接受短暂和不完美为中心的世界观”。
因为这个，我们以不同的方式思考和设计就显得很重要了：
-
尝试以多种方式在你的设计中呈现数据;
-
尽可能使用真实数据。
当你尝试以几种方式展示数据时，包括一些不可预测的数据，你将能够测试界面是否准备好处理超出设计“舒适区”的情况。此外，为极端情况（比如没有信息或有大量信息时）做准备，并尝试避免“中心情况”（一切看起来都很好，很平衡的情况）。
如果你已经发布了该产品，这将更容易，因为你可以关注真实的数据并将其用于你正在进行的设计中作为参考。但是，如果你正在开发一些新的东西，那么你将不得不深入挖掘，做一些研究，并了解信息将如何（以及什么样的信息会）被展示。你还可以和后端团队的开发人员讨论这一点，他能够更好地向你解释什么样的数据将被存储和呈现。
当使用得当时，scrim（浅遮罩层）能使文字在各种类型的图像上都便于阅读。这种技术确保了无论使用哪种（较亮或较暗的）图像，其顶部的文字都将始终保持清晰。
我会给你一个最后一个更加具体化，有图像的例子。我的一个开发者朋友把我的行为称为“漂亮朋友综合症”。当我们设计一个包含人物照片（如用户个人资料）的界面时，我们倾向于使用看起来很好看，和页面设计风格符合的照片。然而，当我的开发者朋友们看到这样的设计，他们说：“我倒希望我有这么帅的朋友。”
“完美”照片的替代方案可能是随机使用不同人群的人的照片。这样，你就可以测试不同背景上，层层叠叠的元素是否还合拍，对比度和易读性是否还能保留。
TinyFaces是一个免费的来源于群众的头像画廊（sketch插件），其中头像可用于个人和商业项目。
不要太乐观
我们很自然地就对APP的工作能力抱乐观态度。我们假设一切都会快速流畅地进行而不会中断，因为……为什么不呢？这样的态度导致我们有时会忘记设计和处理用户可能遇到的一些潜在的意外情况。
举几个例子，如果用户突然断网会发生什么？或者如果执行任务时浏览器尝试连接到API，但出现错误怎么办？如果连接速度太慢，会出现一个加载指示器（如微调器或进度条），还是在加载实际数据时（暂时）填充显示块的占位符？刷新APP中的某个界面时会发生什么？什么时候（在哪种情况下）这些可能发生？
Facebook在信息加载时同时显示。这样，你会感觉信息的加载速度比实际的要快。
正如你所看到的，我不是在谈论用户导致的错误（例如填写表单时出错），而是无法控制但还是会发生的错误。在这种情况下，更重要的是与开发人员沟通，明白和理解不同界面上可能出现的问题，然后设计一种可以使用户轻松摆脱困境的方法，让他们可以稍后再次尝试，或者执行不同的操作。
在任何情况下，识别触发每个错误的具体条件，并为每个案例设计一个能帮助用户的错误提示总是一个好主意。这些提示将有助于用户在各种情况下进行适当的回应，并了解解决问题的下一步。即使有时候我们会想偷懒，但也要不惜一切代价避免使用一个统一的错误提示。
了解流程
一个界面包括许多元素，它们一起形成了APP的整个布局。然而，当我们把整个用户界面作为一个整体看待的时候，我们经常会忘记，有些元素还有着一些小的，但服务于整体的任务目标。
说到目标，这就像足球。我是足球运动的大粉丝，就像我的故乡阿根廷的大多数人。为了使整个团队能够赢得胜利，教练要能预料每个球员的表现，并知道他们在不同时刻要执行什么任务——即使是其中一些人的能力不可预知（就像梅西的魔力），让这种预测更难时，也需要坚持。
Google地图的保存按钮有不同的状态：（1）初始状态，（2）正在执行操作时表示加载中的状态;（3）显示成功结果的最终状态。
我们继续往下并（尽量）忘记我的运动类比，让我们把它翻译成我们的设计案例。如果有一个触发某种交互动作的按钮或项目，请看看下一步：在执行操作时是否显示加载状态？有可能因为某些原因被禁用吗？如果用户长按按钮怎么办？会有什么反馈吗？就像整个页面有不同的状态，单个元素也会有不同状态。
此外，请记住要考虑产品的逻辑如何与用户的心理模型相匹配，帮助他们准确有效地实现目标，并以有意义的和可预测的方式完成任务。
解决所有这些问题的方法是停止正在做的任务，暂停，退后一步，通过一系列步骤和操作来查看多个界面和状态的整个流程，更宏大的全景。我会寻找导致一个问题的多个原因，以及解决它的多条路径。
你可以在使用原型时进行同样的操作，缓慢，认真而仔细。如果这对你来说太有挑战性——因为你以前可能已经做了好几次，现在就成为一种自动化的工作——你可以借用一些新鲜的眼睛（当然不是字面上的！），只需要一个同事，朋友或活跃用户来看看设计或原型。看到其他人使用和与你设计的界面进行互动，可能是很有启发性的，因为我们往往和它太靠近和太熟悉，所以常常忽略它。
为你的屏幕而设计
当我在设计时，我通常会把我的手机放在边上，以便我预览我的设计并进行实时调整。为了做到这一点，我会使用Mira，Crystal或Sketch Mirror，这取决于我是为Android还是iOS设计。
我认为这是一个很好的做法，但这样做也很容易忘记其他使用和你的手机不同型号的手机的用户。我们有许多不同的屏幕尺寸（特别是在Android平台上），应该考虑所有可能的变化。
了解从哪里开始的一个方法是检查你的真实用户使用哪些类型的电子设备。
当你想让你的设计适配各种屏幕尺寸时，可不能只是拉伸方框和重新定位元素。我们必须仔细考虑如何能让它适应各种情况，以及如何进行必要的调整，即使这意味着偏离原始设计。
Google日历的设计师在手机旋转时完全重新设计应用的布局，最大限度适应每种情况。
在这些情况下，我们之前讨论的原则仍然适用：不可预测的情况，不同种类的内容，多变的信息量，缺失的数据等等——你必须为各种可能的情况设计。不要陷入分割地，独立地设计界面的陷阱——它们都是息息相关的。
这不仅是对你有帮助，对你的开发者朋友也有帮助，他们需要了解各种可能的情况，以编写代码并准备接口来解决这些情况。
你今天需要的东西，可能明天也需要
你可能已经注意到，本文中许多要点的目的是减少没有准备的情况。即使如此，还是会有很多你不会有明确的答案的情况。开发者经常会问：“如果我这样做而不是那样做会发生什么？”——指出你以前没有考虑过的潜在结果。
如果发生这种情况，那么你只需要解决这一个特定问题，只需要画一个界面。但我们应该有全局观，考虑如何将这个特定页面设计得灵活，以便日后再次使用。
毕竟，这就是我们UX设计人员该做的，我们设计和定义一个灵活的系统，它能适应各种未知状态，环境和流程。将你的界面视为有生命力的，带有可移动，可改变的智能部件的生态系统，而不是单个像素块的集合。
Airbnb的设计团队制作了一系列组件，可以在整个应用程序中轻松重用。
在这部分过程中，你需要与团队中的开发人员紧密合作，为各种情况定义一组行为规则。但要保持良好的平衡——尽量不要过度设计，用一般常识设定自己的设计极限。你需要在功能性和一致性之间取得良好的平衡。请记住，一个好的设计系统是灵活的，并且在某些特定情况下能打破规则。
另一方面，想想你已经设计的元素可以如何调整，以适应新的情况。如果你创建一个设计组件库，这将会更清楚更明确。只需要大概浏览设计组件库，就可以了解你是需要重新设计一个组件，还是可以使用现成的东西。
最终提示和技巧
如果你想让你的设计能面对各种不可预知的情况，和主要开发人员好好相处吧，提前为他们准备好他们将需要的一切——下面给你一些提示。
与开发人员联系更加密切
迄今为止，我和开发者朋友（嗨，Pier！）在一起最棒的体验之一就是坐在他旁边。这是非常重要的，能带来巨大的改变，因为这会促进交流。你需要经常和他沟通，来更好地了解产品，其工作原理以及开发人员需要向你了解的内容。你还需要问，一遍又一遍地问，来从宏观上看清所有可能产生的结果。
参与你自己的设计
以有意识的，爱挑剔的方式参与自己的设计，注意细节和小的交互设计点，深度参与并奉献自己。在每一步中，想好设计每一个元素的目的，哪些交互动作触发它，以及在某个控件正常或非正常状态下，它会发生什么变化。
在不同的场景中测试
看看在你进行设计的环境，设计的舒适区之外，在不同的环境和情况下，你的设计将如何工作。离开你的工作台，和正在使用（或将要使用）你设计的APP的用户交流。而且，如果可能的话，最好和你的团队中的其他人一起去。这也非常重要——每个人都必须和现实世界保持联系，这样你们就都能更好地了解真实用户的情况。
避免无意义的流行语，进行良好沟通
良好沟通的关键是相互理解。有时候我们会说一些花哨的话，让我们听起来“更聪明”，来证明我们的工作是正确的，但对我们来说更重要的是团队中的每个人都在同一频道，能理解对方。相互理解是关键。
开发者有自己的行话，但大多数时候你们是在谈论同样的事情，只是用不同的表达。例如，你所说的“界面”对他们来说是“视图”，你所说的“按钮”对他们来说是“控件”等等。所以，尽量协调和统一你们将要使用的术语，使信息交流更加畅通。
当你与产品经理和业务合作伙伴交流时，这同样重要。设计人员需要“多语言”技能并能理解每个人的表达。
使用组件，设计系统和内部图案库
我是否提到我是设计系统的积极提倡者？使用组件库，我可以在仅仅五分钟内设计一个新界面（不要告诉我的老板！），因为我已经有了我组件新界面所需要的东西。你需要在这些组件第一次出现时定义保存它们，但以后在类似的情况中，它们就可以重复使用，而不仅仅是为了在紧急情况下节省时间。即使在开始时这看起来可能像是浪费时间，但是从长远来看，这样做你一定会得到回报。
注意：本文不是主要讲组件或图案库，但是这是一个很好的（非常详细的）拓展阅读。如果你想了解更多信息可以阅读这篇文章：“Taking PatternLibraries to the Next Level”。
通用电气的Predix设计系统（来源：“Taking Pattern Libraries to the Next Level”）
最后，除非你必须这样做，否则最好不要重新设计新的组件。通过利用操作系统和APP本身的常见模式和元素，你将设计得更快，开发人员将更轻松地构建界面，最重要的是，用户的学习曲线将不那么陡峭。
进行讨论时最好有实物
在知道这个想法是否可行之前，我们需要进行一些设计和原型制作工作，通过可演示的动态原型来展现你脑中的想法总是更好的。
回应一个看得见摸得着的建议，对于人来说总是比回应想象中的理论更轻松。不要太早地爱上你的点子，因为它很可能无法通过，但至少原型能帮助每个人看明白你在说什么。（我不久前就写了一些关于原型设计和原型设计工具的文章：“Choosing theRight Prototyping Tool”。）
结论
用基于设计系统的优雅设计方案解决定义明确的问题，将使我们的视觉设计部分更加有趣，因为我们可以专注于界面的细化，优化和其中乐趣，而不必无休止地反复设计。当我们太快进行到视觉效果的设计时，我们必须同时解决问题并制作界面，这往往会导致沮丧和倦怠。
改变你的工作流程可能在一开始很有挑战性，但很快你就会喜欢在这样的限制条件下进行设计，这也将改变你的思考方式。希望这能帮助你摆脱对视觉细节的关注。你将成为一个技能更全面，更加有能力的UX设计师，能提交适合的交付成果，而不仅是大量炮制无尽的视觉样机和作品流。
