视觉设计师跟平面设计_为开发人员设计视觉设计原理

视觉设计师跟平面设计

There is a preconceived notion that visual design is some mysterious process shrouded in hipster glasses, tight jeans, and tattoos. Design is a system. Based on rules and principles, the same as any engineering platform.

有一个先入为主的观念，视觉设计是时髦眼镜，紧身牛仔裤和纹身所笼罩的神秘过程。 设计是一个系统。 基于规则和原则，与任何工程平台相同。

Sure, there are less tangible qualities associated with design like aesthetics and “artistic talent”. But “talent” is just a natural aptitude in a given area. A talented engineer understands the construct of a system and applies their natural skill and creativity to develop solutions. The same can be said of design.

当然，与设计相关的无形品质(例如美学和“艺术才能”)较少。 但是，“才华横溢”只是给定地区的天生才能。 有才华的工程师了解系统的构造，并运用其自然的技能和创造力来开发解决方案。 设计也可以这样说。

As a Product Design Lead at BigCommerce, I work hand-in-hand with front-end engineers to build successful digital experiences. In this post, I’ll define the basic principles of visual design in the context of product development. I’ll bring together both design and engineer perspectives to help us establish a shared vocabulary and understanding when collaborating on digital product experiences.

作为BigCommerce的产品设计负责人，我与前端工程师紧密合作，以建立成功的数字体验。 在本文中，我将在产品开发的上下文中定义视觉设计的基本原理。 我将汇集设计和工程师的观点，以帮助我们在共享数字产品体验时建立共同的词汇和理解。

设计师和工程师 (Designers and Engineers)

I’m always struck by both the similarities and differences between designers and engineers. We are the “Freaks and Geeks” of the business world.

设计师和工程师之间的异同总是让我感到震惊。 我们是商业世界的“怪胎和怪胎”。

We are both “makers” and take satisfaction in the creation of something new. We enjoy complex puzzles, and pride ourselves on our creative problem solving skills.

我们都是“创造者”，并且对创造新事物感到满意。 我们喜欢复杂的难题，并以我们富有创造力的问题解决能力而感到自豪。

The archetypal designer and developer share a rebellious spirit as well.

原型设计师和开发人员也具有叛逆精神。

Engineers refer to themselves as “hackers” and “pirates”. They are romanticized in media like Mr. Robot and The Social Network for defining their own rules beyond the norms of society.

工程师称自己为“黑客”和“海盗”。 他们在机器人先生和社交网络等媒体中变得浪漫起来，因为他们定义了超出社会规范的自己的规则。

Similarly, designers are outsiders. We’re the slackers, the weirdos, the “freaks” to engineering’s “geeks”. The ones willing to eschew societal conventions in the name of self-expression.

同样，设计师是局外人。 我们是工程学的“怪胎”的懒散者，怪人，“怪胎”。 那些愿意以自我表达的名义避开社会习俗的人。

However, this rebellious nature is tempered with practicality. We have both found our place within the structured environment of the business world because, frankly, that’s where our talents are monetarily rewarded.

但是，这种叛逆的性质在实用性上得到了缓和。 我们俩都在商业世界的结构化环境中找到了自己的位置，因为坦率地说，这是我们的才能从金钱上得到回报的地方。

On the flip side, the differences between us can most easily be summarized by the “left brain / right brain” theory.

另一方面，我们之间的差异可以通过“左脑/右脑”理论轻松总结。

In overly generalized terms: engineers tend to be more left brain dominant. Utilizing logic, facts, linear thinking, and a methodical approach. Whereas designers tend to be right brain dominant. Relying on emotions, feelings, imagination, and a holistic approach to problem solving.

用过于笼统的术语来说：工程师往往更倾向于左脑。 利用逻辑，事实，线性思维和有条不紊的方法。 而设计师往往是右脑的主导者。 依靠情感，感觉，想象力和整体解决问题的方法。

These dualistic approaches complement each other in the product development lifecycle. When they are applied in equal parts, and in a collaborative environment, they produce far better results than either would working in isolation.

这些二元论方法在产品开发生命周期中相互补充。 当将它们平等地应用在协作环境中时，它们产生的效果要好于单独工作。

开发人员为什么要学习视觉设计？ (Why Should Developers Learn Visual Design?)

For the same reason designers should learn more about development. To create better product experiences.

出于同样的原因，设计人员应该了解有关开发的更多信息。 创造更好的产品体验。

The more developers and designers understand the systems the other is working within, the easier we can communicate, which in turn makes our experiences working together that much more effective, efficient, and fun.

开发人员和设计人员对其他人正在使用的系统的了解越多，我们就越容易沟通，这反过来使我们在一起工作的体验更加有效，高效和有趣。

Throughout history, visual design and engineering have been intrinsically tied together. From the pyramids and pictographs of ancient Egypt, through DaVinci’s Renaissance masterpieces, and up to modern day gadgets that blur the line between product and object d’art. Cultures that have furthered humankind have understood the connection aesthetics have to math and science.

纵观历史，视觉设计和工程本质上是联系在一起的。 从古埃及的金字塔和象形文字，到达芬奇文艺复兴时期的杰作，再到现代的小玩意，这些东西都模糊了产品与艺术品之间的界限。 促进人类发展的文化已经理解了美学与数学和科学之间的联系。

The most relevant point of entry for a developer interested in learning more about aesthetics is to begin with the principles of visual design.

对于有兴趣学习更多美学知识的开发人员来说，最相关的切入点是从视觉设计原理开始。

These are some basic rules and guidelines that User Interface (UI) designers utilize when creating page layouts. Most of them will seem like common sense. This is because they are reinforcing behaviors we have been taught our entire lives. For example: The color red means danger.

这些是用户界面(UI)设计人员在创建页面布局时使用的一些基本规则和准则。 他们中的大多数似乎是常识。 这是因为它们正在强化我们一生都被教导的行为。 例如：红色表示危险。

The role of a UI designer is not to “make things look pretty”. Effective product design should go almost unnoticed. The designers’ role is to guide the user on their journey, to help them complete a given task as quickly and easily as possible.

UI设计人员的作用不是“使事物看起来漂亮”。 有效的产品设计应该几乎没有引起注意。 设计师的作用是指导用户的旅程，帮助他们尽快，轻松地完成给定的任务。

6视觉设计原理 (6 Principles of Visual Design)

Before we discuss design principles, we should first touch on the Elements of Visual Design. This won’t be our focus, but they are the “building blocks” of our discussion, so let’s at least identify them.

在讨论设计原理之前，我们应该首先涉及视觉设计元素 。 这不是我们的重点，但它们是我们讨论的“基石”，因此至少让我们对其进行识别。

Design elements are the basic units of any visual design composition.

设计元素是任何视觉设计组成的基本单位。

Interestingly, there is no “one agreed-upon” list of what constitutes a design element. Definitions vary depending on the discipline. For the purposes of this article, we can refer to the following as design elements: Color, Type, Line, Shape, Point, Space, Form.

有趣的是，没有什么构成设计要素的“一个已达成共识”的清单。 定义因学科而异。 为了本文的目的，我们可以将以下内容称为设计元素： 颜色，类型，线，形状，点，空间，窗体。

Similarly, there is no “one agreed-upon” set of behaviors that govern these elements once they are combined into a composition. Definitions of design principles generally range from six to twelve depending on the use case and discipline.

同样，一旦将这些要素组合成一个组合，就没有一套“一致同意”的行为来支配这些要素。 设计原则的定义通常在6到12个范围内，具体取决于用例和纪律。

One could debate whether any specific design principle is more valid than any other. But for the purposes of this article, six feels like a good place to start.

有人可能会争论任何特定的设计原则是否比其他任何设计原则更有效。 但出于本文的目的，六个感觉是一个不错的起点。

Visual design is like the Matrix, some rules can be bent, others can be broken.

视觉设计就像矩阵，某些规则可以弯曲，其他规则可以被打破。

Let’s begin.

让我们开始。

1.余额 (1. Balance)

There are 3 types of balance. Symmetrical, Asymmetrical, and Radial.

有3种类型的余额。 对称 ， 不对称和径向 。

Symmetrical balance

对称平衡

This is what comes to mind first for most people when discussing “balance”. Both sides of an equation are equal.

这是大多数人在讨论“平衡”时首先想到的。 等式的两边相等。

When compositions are balanced they feel more ordered, more organized. Information becomes easier to digest.

当构图平衡时，它们会感觉更有序，更有条理。 信息变得更容易消化。

Asymmetrical balance

不对称平衡

Imbalance creates “visual tension” within a composition. The users’ eye is naturally drawn to it. As designers we use this to our advantage to create emphasis, which we will discuss later.

不平衡会在构图中产生“视觉张力”。 用户的眼睛自然吸引了它。 作为设计师，我们利用这一点来发挥自己的优势来强调重点，我们将在后面讨论。

Radial balance

径向平衡

This refers to a composition arranged around a central element. The “golden section” or “golden spiral” has been used by visual artists throughout the ages to curate the viewer’s attention.

这是指围绕中心元素排列的构图。 各个年龄段的视觉艺术家都使用“黄金分割”或“黄金螺旋”来吸引观众的注意力。

As product designers, we use the golden spiral to create a narrative for the user. A narrative is a tool designers use to help guide users through a journey. A good product experience tells a good story.

作为产品设计师，我们使用金色螺旋为用户创建叙述 。 叙述是设计人员用来帮助指导用户完成旅程的工具。 良好的产品体验可以说明一个好故事。

For example:

例如：

2.对比 (2. Contrast)

Contrast is a fairly straightforward concept in terms of visual design. The higher the contrast the more important an object. The lower the contrast, the less important.

在视觉设计方面，对比度是一个相当简单的概念。 对比度越高，对象越重要。 对比度越低，重要性越小。

As it pertains to product design at BigCommerce, contrast is extremely important to our efforts to become WCAG (Web Content Accessibility Guidelines) compliant for users with visual disabilities.

由于它与BigCommerce的产品设计有关，因此对比度对于我们努力使视力障碍者符合WCAG(Web内容可访问性准则)的努力至关重要。

3.重点 (3. Emphasis)

Emphasis refers to drawing a users’ attention to important aspects of the composition. For example, highlighting a primary call to action.

重点是指吸引用户注意构图的重要方面。 例如，突出显示主要的号召性用语。

Conversely, we can de-emphasize less important aspects, like the legal disclaimer at the bottom of a form. Emphasis is often determined by scale and contrast.

相反，我们可以不强调不太重要的方面，例如表单底部的法律免责声明。 重点通常取决于规模和对比 。

It is important to define what aspects of the composition deserve to be emphasized, and in what order of priority. A subject we will continue to discuss in Hierarchy.

重要的是定义应强调构图的哪些方面以及以什么优先顺序。 我们将在层次结构中继续讨论这个主题。

4.规模/比例 (4. Scale/Proportion)

Similar to contrast, scale and proportion are fairly straightforward concepts within the context of visual design. The larger an element in the composition, the more important. The smaller it is, the less important.

与对比类似，在视觉设计的上下文中，比例和比例是相当简单的概念。 成分中的元素越大，越重要。 它越小，重要性就越小。

When it comes to proportion the rule of thumb is: “Make it the same, or make it different.” What this means is, be purposeful in your use of proportion. Choose proportions that create enough of a contrast to be noticeable and have meaning.

就比例而言，经验法则是： “使其相同或不同。” 这意味着在使用比例时要有目的。 选择足以产生鲜明对比并具有意义的比例。

5.层次结构 (5. Hierarchy)

An important part of a visual designers’ job is creating a “priority of information” within a composition. As product teams we want to offer users a variety of choices so we can track user decisions and determine the value of features we build.

视觉设计师工作的重要组成部分是在构图中创建“信息优先”。 作为产品团队，我们希望为用户提供多种选择，以便我们可以跟踪用户决策并确定所构建功能的价值。

The problem is: When everything is important, nothing is important. In his book The Paradox of Choice — Why More is Less, psychologist Barry Schwartz argues that eliminating consumer choices can greatly reduce anxiety for shoppers.

问题是：当一切都很重要时，什么都不重要。 心理学家巴里·施瓦茨(Barry Schwartz)在他的《 选择的悖论-为什么要少花钱》一书中指出，消除消费者的选择可以大大减少购物者的焦虑感。

Similarly, when creating digital product experiences, a clear visual hierarchy can cue our users where they should focus their attention in any given composition. Thereby eliminating confusion and anxiety and creating a more effective experience.

同样，在创建数字产品体验时，清晰的视觉层次结构可以提示我们的用户他们应该将注意力集中在任何给定的内容上。 从而消除混乱和焦虑，创造更有效的体验。

6.和谐统一 (6. Harmony/Unity)

All of the topics we have discussed so far come together to create a harmonious and unified design.

到目前为止，我们已经讨论了所有主题，以创建一个和谐统一的设计。

Harmony is a scalable concept when it comes to product design.

当涉及产品设计时，和谐是可扩展的概念。

Basic design elements like type and color work together to become a button. A text field and a button work together to form a search pattern. Multiple design patterns combine to form compositions and then pages. Pages become experiences. Finally, all these disparate experiences unify to become our product.

基本设计元素(如类型和颜色)共同作用成为一个按钮。 文本字段和按钮一起形成搜索模式。 多种设计模式组合在一起形成构图，然后形成页面。 页面成为体验。 最终，所有这些不同的经历共同成为我们的产品。

This is the basis for the theory of Atomic Design by Brad Frost. Chemistry becomes a metaphor for the systemic approach to user interface design.

这是Brad Frost提出的原子设计理论的基础。 化学成为用户界面设计系统方法的隐喻。

This is also the basis for our Design Language System, BigDesign.

这也是我们的设计语言系统BigDesign的基础。

BigDesign is our holistic approach to user interface design at BigCommerce. We have a React Component Library and developer playground available now, and our design team is hard at work on a CSS style guide for teams working in other code bases. You can learn more about BigDesign and our process here.

BigDesign是我们BigCommerce用户界面设计的整体方法。 我们有一个React组件库 和开发人员游乐场现已上市，我们的设计团队正在努力为其他代码库中的团队编写CSS样式指南。 您可以在此处了解有关BigDesign和我们的流程的更多信息。

结论 (Conclusion)

With a better understanding of these visual design principles, engineers and product designers now have a shared vocabulary as they work and collaborate together. This alignment will help teams produce better results, communicate better, and create a product that best serves customers.

通过更好地理解这些视觉设计原理，工程师和产品设计师现在可以在工作和协作时共享词汇。 这种一致性将帮助团队产生更好的结果，更好的沟通以及创建最能为客户服务的产品。

I’d love to hear about how you incorporate design principles into your development experience. How do your teams work and collaborate together. Share your thoughts and comments with me below or reach out on Twitter at @bigcommercedevs.

我很想听听您如何将设计原则纳入您的开发经验。 您的团队如何合作和协作。 请在下面与我分享您的想法和意见，或通过@bigcommercedevs在Twitter上进行宣传 。

Cheers, and happy collaborating!

干杯，快乐合作！

You can learn more about BigCommerce design at design.bigcommerce.com and dribbble.com/bigcommerce

您可以在design.bigcommerce.com和dribbble.com/bigcommerce上了解有关BigCommerce设计的更多信息。

翻译自: https://medium.com/bigcommerce-developer-blog/design-for-developers-the-principles-of-visual-design-672f1fc1fc64

视觉设计师跟平面设计