线框图设计工具
by Leon Barnard
莱昂·巴纳德(Leon Barnard)
如何在设计系统中使用线框 (How to use wireframes with design systems)
In my 10+ years as a UX designer, one of the most frequent questions I’m asked about wireframes is how much visual detail to put into them.
在我作为UX设计师的10多年中，有人问我关于线框的最常见问题之一是要在其中添加多少视觉细节。
There’s an attractive elegance to a simple black and white sketch, but it can sometimes lead to gaps in the shared understanding of what the final product will really look like.
简单的黑白草图具有吸引人的优雅气质，但有时可能会导致人们对最终产品的外观形成共识。
Wireframes shine during the early phases of product development when ideation and rapid iteration are most valued. But what makes them ideal for this phase also hinders them in the next phase, when pixel precision and visual details are called upon for implementation.
线框在产品开发的早期阶段发光，那时构想和快速迭代最受重视。 但是，使它们成为此阶段的理想选择的因素也阻碍了它们在下一阶段的工作，因为要求实现像素精度和视觉细节。
As a result, many people (I’ve been guilty of this) try to incorporate fine-grained and aesthetic details into their wireframes by tuning fonts, adding colors, and using other visual effects.
结果，许多人(对此一直感到内gui)尝试通过调整字体，添加颜色以及使用其他视觉效果，将细粒度和美观的细节纳入其线框。
This can often lead to confusion when these proto-high-fidelity wireframes are used as implementation specifications and sent “over the wall” to the development team. Most wireframing tools are not optimized for creating artifacts that look and feel like a finished product. Yet creating polished renditions of every screen or a high-fidelity prototype is time consuming and may not translate well to the final product anyway.
当这些原始的高保真线框用作实施规范并“无障碍地”发送给开发团队时，这通常会导致混乱。 大多数线框图工具并未针对创建看起来像成品的工件进行优化。 但是，为每个屏幕或高保真原型制作精美的副本非常耗时，而且无论如何也无法很好地转化为最终产品 。
But, is there another way?
但是，还有另一种方法吗？
There sure is! A way where you can keep your wireframes low fidelity, yet achieve that powerful shared understanding of the implemented look and feel.
肯定有 ！ 您可以使线框保持低保真度，同时又可以对实现的外观获得强烈的共享理解。
救援设计系统 (Design Systems to the Rescue)
An alternative to pushing wireframes beyond their limits is to keep them low fidelity and let another tool do the work of specifying the look and feel.
将线框推到其极限之外的另一种方法是使线框保持低保真度，并让另一个工具执行指定外观的工作。
In this article, I’ll explain why, for web applications and sites at least, an excellent tool for this job is a design system.
在本文中，我将解释为什么至少对于Web应用程序和网站，用于此工作的出色工具是设计系统 。
Before diving in, let’s define what a design system is.
在深入探讨之前，让我们定义一下设计系统。
Like their precursor, style guides, design systems define the application’s look and feel. They go one step further though, in that they often define behavior as well and are backed by working code.
像其前身，样式指南一样，设计系统定义了应用程序的外观。 但是，它们又走了一大步，因为它们通常也定义行为 ，并得到工作代码的支持。
Large companies have been using design systems for a long time. Until recently, they were too labor intensive for smaller companies, as they often required dedicated designers and developers working outside of the primary product teams.
大型公司已经使用设计系统很长时间了。 直到最近，对于较小的公司来说，它们还是劳动密集型的，因为它们通常需要专门的设计师和开发人员在主要产品团队之外工作。
Here is an example, from the IBM Carbon Design System, showing appearance and code for buttons.
这是一个来自IBM Carbon Design System的示例，显示了按钮的外观和代码。
The design system landscape changed after the Bootstrap framework was released in 2011. It is a free starter kit for web development that provides compliant, robust HTML templates and generally good-looking CSS styles that can be customized to your brand.
Bootstrap框架于2011年发布后，设计系统的格局发生了变化。这是一个免费的Web开发入门工具包，它提供兼容的，健壮HTML模板以及可以根据您的品牌定制的外观一般CSS样式。
It comes with its own grid and typography definitions as well as styles for buttons, forms, and more. In short, it takes a lot of the hard work out of starting a web project and making sure that it works across browsers.
它带有自己的网格和字体定义以及按钮，表单等的样式。 简而言之，启动一个Web项目并确保它可以在浏览器中正常运行需要花费大量的精力。
Bootstrap and other frameworks like it have been used as a foundation for design systems for smaller companies that don’t have the resources to build their own.
Bootstrap和其他类似框架已被用作没有资源自行构建的小型公司的设计系统的基础。
As you can see below, Bootstrap is very similar to corporate design systems like the one shown above.
正如您在下面看到的，Bootstrap与上面所示的公司设计系统非常相似。
实践中的设计系统+线框 (Design Systems + Wireframes in Practice)
The main advantage of pairing a design system with a wireframing tool is that it can free you from worrying about look, feel, and behavior when wireframing. Yet, they provide pixel-perfect renditions of the final product components.
将设计系统与线框图工具配对的主要优点在于，它可以使您免于担心在进行线框图时的外观，感觉和行为。 但是，它们提供了最终产品组件的完美像素再现。
When you already know what a button (or tab, menu, etc.) is going to look like and what its state transitions will be when you click it, then you don’t have to style it in your wireframe. Black and white and Balsamiq Sans is just fine.
当您已经知道按钮(或选项卡，菜单等)的外观以及单击时的状态转换时，便不必在线框中设置样式。 黑白和Balsamiq Sans都很好。
Having a design system to refer to can allow you to jump straight from wireframes to code without leaving the final vision undefined.
有一个设计系统可供参考，可以使您从线框直接跳到代码，而不会留下最终的愿景。
Here’s how you can pair them together. You’ll find that they get along quite well together!
这是将它们配对在一起的方法。 您会发现他们相处得很好！
If you already have a design system, great. If not, you can start with a customized download of Bootstrap or Foundation. The next step is to create a mapping between it and the controls in your wireframing tool.
如果您已经有了设计系统，那就太好了。 如果没有，则可以从Bootstrap或Foundation的定制下载开始。 下一步是在它与线框图工具中的控件之间创建映射。
A mapping basically means developing a shared agreement of “this means that”. You can do this by creating a document showing these mappings or by just having a meeting with the design and development teams around a screen to work it out.
映射基本上意味着达成“这意味着”的共享协议。 您可以通过创建一个显示这些映射的文档或通过与屏幕上的设计和开发团队开会来解决该问题来做到这一点。
Here’s an example of how you might map some Balsamiq controls to Bootstrap components (you could also start with the Bootstrap Wireframes To Go library).
这是一个示例，说明如何将一些Balsamiq控件映射到Bootstrap组件(也可以从Bootstrap Wireframes To Go库开始 )。
Note: It’s ok to use some color, but it should only be used as much as necessary to indicate states and selections, for example.
注意： 可以使用一些颜色，但是例如，仅应在必要时使用它来表示状态和选择。
Having this kind of mapping means that developers no longer have to wonder whether the colors in the wireframe are supposed to be used in their code. They can just translate in their head that a blue button in the wireframe actually means a green button in the UI (if that’s the color you use), and that breadcrumbs separated by the > character should actually be separated by the / character in the app, for example.
有了这种映射， 开发人员就不必再怀疑线框中的颜色是否应该在其代码中使用 。 他们可以在脑海中直译：线框中的蓝色按钮实际上表示UI中的绿色按钮(如果您使用的是这种颜色)，并且面包屑由& gt;分隔。 字符实际上应该用t分离h E /字符在该应用中，例如。
You can also extend your design system by creating your own Balsamiq controls as Symbols to map to other components in your library, like this:
您还可以通过将自己的Balsamiq控件创建为Symbols来映射到库中的其他组件，从而扩展设计系统，如下所示：
This mapping can evolve and grow over time as needs and design language change in your organization.
随着组织中需求和设计语言的变化，这种映射会随着时间的推移而发展和壮大。
Here’s a simple example showing what a completed wireframe could look like when built in conjunction with a design system.
这是一个简单的示例，显示了与设计系统一起构建的完整线框的外观。
Note: Blue in the wireframe doesn’t have to mean blue in the finished product.
注意：线框中的蓝色不一定表示成品中的蓝色。
Wireframe to working code with no additional design artifacts in between!
线框到工作代码，中间没有其他设计工件！
Having a design system also means that you’re reusing the same code across all parts of your application so that different developers produce the same UI which leads to better standards and consistency. And if the design system gets updated, the wireframes don’t have to change.
拥有设计系统还意味着您将在应用程序的所有部分重用相同的代码，以便不同的开发人员生成相同的UI，从而带来更好的标准和一致性。 而且，如果设计系统得到更新，则线框不必更改。
Finally, designers can rely more on the stock controls inside the tool rather than spending hours trying to replicate the look on their own, so both the design and development cycles are shortened.
最后， 设计人员可以更多地依靠该工具中的库存控制，而不必花费大量时间尝试自己复制外观，从而缩短了设计和开发周期。
摘要 (Summary)
Nothing works for everyone, of course. This approach isn’t guaranteed to work for all projects or organizations. For example, it is better suited to in-house teams.
当然，没有什么适合所有人。 不能保证这种方法适用于所有项目或组织。 例如，它更适合内部团队。
Clients outside your organization are more likely to want to see a high-fidelity mockup. Also, most of the starter design systems are for web-based products. Desktop and mobile application design system templates and examples are less common.
组织外部的客户更有可能希望看到高保真模型。 同样，大多数入门设计系统都用于基于Web的产品。 桌面和移动应用程序设计系统模板和示例不太常见。
Lastly, and perhaps most importantly, you should have good communication between design and development teams for this approach to work.
最后，也许是最重要的一点，您应该在设计团队与开发团队之间保持良好的沟通，以使这种工作方式有效。
Much of the shared understanding of the connection between wireframes and design systems is created by having a conversation about it. Announcing it over email or simply posting it on your intranet alone probably won’t work. Waterfall and distant remote teams trying this might not fare as well.
关于线框与设计系统之间的连接的许多共同理解是通过进行对话来建立的。 通过电子邮件宣布或仅将其发布在您的Intranet上可能无法正常工作。 瀑布和遥远的远程团队尝试这样做可能也不是一件容易的事。
That said, it does offer lots of advantages for many teams, such as:
也就是说，它确实为许多团队提供了很多优势，例如：
- Saves time when wireframing 节省线架时的时间
- No mismatch between wireframe and reality 线框与现实之间没有错配
- Good for Lean/Agile methodologies where deliverables don’t need to be so formal 适用于不需要正式交付的精益/敏捷方法
- Good for small teams and startups without many resources (especially when using frameworks) 适用于没有很多资源的小型团队和创业公司(尤其是在使用框架时)
- Different skillsets can be applied to different design areas (e.g., visual designers and developers for the design system, interaction designers or PMs for the wireframes) 可以将不同的技能集应用于不同的设计领域(例如，设计系统的视觉设计师和开发人员，线框的交互设计师或PM)
- Design processes (wireframes vs. design system creation) can be done independently, resulting in fewer bottlenecks 设计过程(线框与设计系统创建)可以独立完成，从而减少了瓶颈
- More UI consistency across the product 整个产品的UI一致性更高
更多设计系统资源 (More Design System Resources)
翻译自: https://www.freecodecamp.org/news/how-to-use-wireframes-with-design-systems-46f3040829b6/
线框图设计工具
3836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
