网站图片jpg

　　2001年电影Zoolander中的场景1：情报局。时尚大亨JACOBIMMUGATU的宫殿办公室（WILLFERRELL饰演）MUGATU非常想聘请DEREKZOOLANDER（本斯蒂勒饰演）。MUGATU准备了一份ZOOLANDER无法拒绝的工作机会。穆加图穿过他巨大的办公室，来到一个覆盖着红色天鹅绒窗帘的小展示台。穆加图废话不多说，我给你。。。穆加图拉开窗帘，露出建筑物的比例建筑模型。穆加图DerekZoolander儿童阅读中心！ZOOLANDER进入检查模型。他用他特有的噘嘴仔细检查模型。穆加图和他的助手托德站在附近，紧张地期待着。动物园（突然生气了）这是什么？ZOOLANDER期待地盯着MUGATU。没有听到回答，ZOOLANDER爆发了，把模型扔到房间对面，把它打碎了。穆加图和托德一脸懵逼。动物园（大喊，指着破损的模型）蚂蚁的中心？！穆加图和托德都震惊了。他们在混乱和恐惧的混合中僵住了。穆加图什么？动物园（难以置信）如果他们甚至不能适应建筑物，我们怎么能期望他们教孩子们学习阅读呢？穆加图德里克，这只是一个小。。。动物园（在盲目的愤怒中）我不想听你的借口！该中心必须至少。。。ZOOLANDER看着损坏的模型，计算着。动物园。。。比这大三倍。托德焦急地看着穆加图。穆加图慢慢转过身来配合托德的目光。穆加图（对托德，大声）他是完全正确的。动物园（深信不疑）谢谢你。我有一个愿景。
　　如果你设计数码产品，这个场景可能有点离家太近了。这是ClientsFromHell的一个更相关的版本：
　　我：由于最终副本尚未获得批准，我们已将其替换为拉丁文，因此我们可以专注于设计而不会被消息所困扰。
　　客户：嗯，我什么都看不懂。我们怎么可能批准这个？
　　像这样的想法很容易摆脱谈话，我的客户怎么会如此密集？但我曾与陷入同样刻板印象的聪明人一起工作：抱怨他们无法点击jpg中的链接建议他们在（2005年时代）智能手机上查看（桌面）模型时字体太小在批准实施之前要求查看各种用户配置文件状态的50多个边缘情况
　　拥有这种经验的不仅仅是设计师。开发人员必须向他们的利益相关者描述拜占庭概念，而不会遗漏细微差别或淡化风险。产品经理通常在单页文档或15分钟的会议中总结业务价值、用户需求、团队速度、技术债务、法律陷阱和个人野心的错综复杂的网络。
　　这令人沮丧。我试图通过在演示上花费大量时间来应对。我解释了loremipsum是什么，在所有模型上贴上大的FPO贴纸，记录下每一个可能的警告，以备不时之需。但无论我做了多少准备，几乎总会有一个蚂蚁中心的时刻。
　　这项工作产生了一系列未达到的期望、错位的激励和基本的误解。
　　为了改进我自己的实践并希望为其他设计师提供一些启发我想深入研究，尝试解开这个结。
　　我使用模型和原型与我的利益相关者、我们的同行和我们的合作伙伴进行沟通。它们是不断摩擦的来源。这是为什么？我该怎么做才能让他们变得更好？
　　当我还是一名产品设计师时，人们会问我以什么为生，有时我会回答我画网站图片。2
　　当然，我可以说我设计网站。确实如此。我工作的最终结果是（希望）一个网站看起来更好，运行得更好，或者产生更好的结果。
　　但是我一天中的大部分时间都没有花在查看网站上，或处理网站代码上，或以某种方式直接操作网站上。它花了FIGMA或草图，绘制图片的我是怎么想的网站的外观和工作。
　　通过某种炼金术，我画的图片对完成的网站产生了影响。但它们并不完全相同。图片有不同的用途：
　　有些图片是只为我。它们是思考过程的一部分，是我对可能结果的疑问的答案。我将与我的同龄人分享它们，以获取他们对我正在解决的问题的意见。称这些照片是发现。
　　一些图片，如Mugatu的模型，旨在将想法或计划形象化，以便于查看某些决定或一组决定如何导致网站的外观。让我们称它们为定义。
　　其他图片用于向构建网站的人提供非常精确的指示。这些图片经过双重和三次检查，然后涂上一层技术语言。这些，可提供图片。
　　发现、定义、交付。这是我的网站图片的三项工作。改进每一个、减少混淆和误解、提高我们的效率和消除浪费的工作的关键是问：使它们工作的每一个的品质是什么？我怎样才能教我的合作伙伴区分？
　　网站的图片不是网站。再说一遍。网站的图片不是网站。一直说，直到它开始变成一首歌，一首你在脑海中萦绕的小曲子，也许是一首海小屋或一首叮当声。
　　网站图片不是网站。。。
　　有时，图片看起来与网站完全不同，没有人会感到困惑它都是白板上的标记图，当然它不是网站。但其他时候，图片看起来很像一个网站。它可能在浏览器窗口中，可能是动画，或者当您在手机上查看它时，它可能有一种巧妙的方式来显示不同。这可能是我和我的利益相关者之间最常见的混淆来源。
　　但它仍然只是网站的图片，而不是网站：图片无法记住你对它做了什么它没有连接到数据库，这是使网站如此有用的原因之一。图片会在瞬间凝固，因此它可能很快就会因我们的知识或理解而过时。图片是一个人对网站的看法；它无法向您展示每个人如何看待该网站。
　　图片与网站差异的技术原因非常复杂。
　　要向外行解释比如说，一个对图片和网站只有非常粗略的经验的人为什么你不能点击看起来像链接的东西，你必须解释图片可以出现的各种文件格式以及计算机软件如何读取和可视化文件包含的代码。你必须解释一下，链接是为了连接互联网上的文档而发明的，当互联网发明时，网络浏览器甚至无法显示图片，所以没有人想过在图片中放置链接。顺便说一句，聪明的人稍后会弄清楚，但那时旧的常见文件格式（如jpg）已标准化并实现，因此每个人都只使用没有链接的图片。
　　在我们向人们展示的模型中，隐藏着许多技术复杂性的地方。通常，没有人知道甚至不知道提出解决差异所需的技术问题。
　　这就是为什么我们在准备演示文稿时应该更加慎重：专注于图片的目的，您可以避开一些隐藏的复杂性。
　　发现的图片可能最容易定义和改进。
　　发现图片的目的：探索可能设计的广阔空间。可视化替代现实。玩。
　　这些存在于Figma、Sketch或AdobeXD等设计工具中。我喜欢把它们放在一个文件夹、画板或标题为发现或未来探索的页面中，以防有人潜伏在我的作品中。
　　一旦探索完成，发现的图片通常是凌乱的、未完成的、废弃的。它们是笔记本中的草图、充满屏幕截图的情绪板以及Figma中未标记的画板。
　　照片由西格蒙德上Unsplash
　　在某些方面，这些图片的混乱是现代设计工具将您的作品的许多副本并排保存的一种症状。这是一种绝妙的时间旅行方式，创造了许多现实分支，您可以在其中探索设计决策的可能性。但是这些工具通常无法组织或管理您的工作副本。
　　他们仍然专注于定义的图片，我们稍后会讨论。
　　设计师乔恩戈尔德（JonGold）写了一篇关于发现图片的出色的推测性设计小说。3在描述现代设计工具的问题时，他引用了JCRLicklider的开创性人机共生：
　　我的思考时间主要用于本质上是文书或机械的活动：搜索、计算、绘图、转换我选择尝试什么和不尝试什么，在很大程度上取决于文书可行性的考虑，不是智力。
　　Gold继续想象一种工具，可以将设计师从文书工作中解放出来。这是一个可能性机器：输入一个单一的设计理念，定义可能改变的东西，可能性机器完成所有艰苦的工作，包括创建副本、进行更改，并以鼓励探索的方式组织它们。
　　Gold的设计工具将设计过程本身可视化，使每一步成为自己的明确文档，保留您所走的道路，就像一个掉在面包屑上的童话人物。
　　您可以在此处尝试可能性机器的原型。虽然它仅限于几个测试用例，但不难看出它与我们的行业标准设计界面有何不同。
　　随着我们的设计工具的发展，以及我们接受人工智能和机器学习，我们的发现图片看起来更像是Gold的原型，而不是Photoshop。
　　目前，我们能做的最好的事情就是在向利益相关者或合作者展示这些发现的图片时非常小心。它们是可能性的愿景，充满了未经检验的假设和信念的飞跃。为了充分表达他们背后的想法，或者他们提出的问题，我们需要画一种不同的图画：定义的图画。
　　定义的图片都是关于交流的。
　　定义图片的目的：将知识和理解放入一个有意义的框架中。
　　这些图片没有传达设计的是什么像素、颜色、字体而是为什么权衡、策略、长期维护以及如何交互、响应大小、边缘情况、可访问性和国际化。
　　有时团队称这张图片为产品需求文档。它阐明了网站或应用程序功能的目标，将团队就范围和功能做出的决定用文字和图片表达出来，并且通常开始塑造团队为实现功能而必须做的工作。
　　传统上，这种文档是产品经理的领域。但在我与产品经理的工作中，我们的战略和战术决策的图片是必须的。那是因为当我们想象我们的计划时，我们所有的假设和理解都是第一次满足现实。错失的机会变得显而易见。不正确的假设跳出页面。战略的图片通常比它来自的描述段落更善于沟通。
　　Atlassian的产品需求模板
　　今天，这些图片通常看起来很像这篇文章。主要是文字，加上一些图片。有时，它们是幻灯片形式的演示文稿。在我们制作的图片类型中，这些是最适合破坏的。
　　最新一波独角兽生产力应用程序由Notion领导，它最近的估值超过了20亿美元都是关于创新文档。Abstract是一款作为设计版本控制推出的产品，目前正转向专注于设计的智能文档。GoogleDocs和DropboxPaper每天都在添加功能，以使他们的文档更具动态性和交互性。像Pitch和Mmhmm这样的新演示工具有望彻底改变幻灯片，而像Loom这样的异步视频工具则提供了无需写字即可生成文档的方法。
　　赋予这些工具如此巨大潜力的是它们为思考提供背景的能力。这就是定义图片的全部意义所在。即使没有实时更新的嵌入式设计文件、视频评论、超链接、工具提示和嵌套数据库，如果设计文档能够传达设计的原因和方式，它也可以非常强大。
　　定义的图片必须采取鸟瞰图。包含太多细节，您可能会冒着利益相关者失去森林的风险，专注于这里的字体或那里的颜色。为了传达细节什么我们需要另一种类型的图片。
　　提供的图片可能是信息最密集和最准确的。
　　传递图片的目的：向建筑商提供有关如何实现设计的详细说明。
　　如果您看过这类图片，就会知道为什么它们通常被称为红线。
　　红线，由JazzmennM
　　这些惰性图表曾经是设计人员和开发人员之间日常协作的一部分。为了构建模拟网站，开发人员需要了解页面上每个元素的大小、间距、字体名称、十六进制颜色、阴影值等，适用于用户可能拥有的每种屏幕尺寸。
　　制作这些照片很乏味。然而，在过去的五年里，有进取心的设计师开发了一些工具，使定义图片更具交互性、自动化程度和信息量。Zeplin、Abstract、Figma和Invision等应用程序具有检查模式，可从设计师的模型中动态绘制红线。这种自动化所节省的时间和产生的价值令人难以置信。
　　从渠道的另一端挖掘，开发人员已经创建了工具和框架，完全不需要单独的设计和工程规范。Storybook、Modulz和Framer等工具承诺将代码直接交给设计师我们制作的图片更像是由我们正在绘制的网站的真实部分构建的被子。
　　设计令牌是另一个难题。这些是设计的原子位，以对我们使用的设计工具以及我们正在设计的网站和应用程序的代码库有用的方式制定。如果设计者和开发者都使用相同的设计标记，则不再需要查找特定蓝色阴影的十六进制值。
　　尽管用于绘制定义图片的工具过多，但总会有红线。那是因为这些图片的重点，它们的力量之源，是尽可能清晰、密集和技术上正确。消除所有歧义，您可以保证快速实现，像任何错误一样无错误（也就是说，总是有一些错误）。
　　一张图片不可能同时擅长发现、定义和传递所有内容。
　　这对我来说是一粒苦药。几乎每个项目都需要这三者。我真的有必要画这么多图吗？
　　我可以回放最近几次我在设计过程中遇到的小问题，看看每个人是如何部分由于图片类型错误而造成的。我向利益相关者发送了早期探索，但没有提供我的决定的方式和原因，导致误解和沮丧。我没有探索就直接跳到高保真模型，开发了一些盲点并错过了机会。我给了开发人员一个模型，但没有解释某些元素需要新的交互模式；当它建成时，已经太晚了。
　　这些只是我搞砸的一些方法。如果你和我一样，你可以立即变出一些你自己的。
　　但是马特，你可能会说，为什么我必须做所有的工作来纠正人们对设计的误解？他们不应该更努力地理解设计过程吗？
　　你好朋友；这就是设计。我们有责任与我们的合作者和利益相关者会面。如果我们向他们展示了错误类型的图片，或者没有提供重要的背景信息，或者没有明确表明他们正在查看网站的图片，而不是网站，我们将继续为蚂蚁。
　　好消息是，有了所有的技术和自动化，一个设计师就可以设计一个复杂的网站，数百万人每天都依赖它。我们在同行中有一种独特的影响力，因为我们可以顺利而确定地走上从概念到愿景到计划再到执行的道路。
　　拥抱图片。抽签。弄清楚每个人做什么工作，并让他们变得更好。