平面設計師和ui設計師

Design is a very ancient practice, but graphic design really found its core principles post World War One. Games are also very ancient but video games are still finding their feet. I think graphic design has a few things to teach people who make games, so here are the big concepts every graphic designer learns. You should learn them too!

設計是一種非常古老的做法，但是圖形設計確實在第一次世界大戰后發現了其核心原則。 游戲也很古老，但是視頻游戲仍然可以站穩腳跟。 我認為圖形設計可以教給制作游戲的人一些知識，因此這是每個圖形設計師都學到的重要概念。 您也應該學習它們！

First, studying graphic design is about building the skill to see things other people just accept. More importantly, it’s learning to see and name things ordinary people just are annoyed or repulsed by but can’t say why. You can’t just read about it, you have to look at many examples and practice making them. Over time your eye and hand become smarter.

首先，學習圖形設計是要建立一種技巧，以了解他人剛剛接受的事物。 更重要的是，它正在學習看到和命名普通人只是被煩惱或排斥而無法說出原因的事物。 您不僅可以閱讀它，還必須查看許多示例并進行實踐。 隨著時間的流逝，您的眼睛和手變得更聰明。

Good graphic design makes games more trusted (increase sales) and more pleasurable to play (NPS) and when done right, fades into the background so players can focus on the game (higher DAU/MAU.)

良好的圖形設計使游戲更受信任(增加銷量)和游戲樂趣( NPS )，如果操作正確，它會淡出背景，以便玩家專注于游戲(更高的DAU / MAU) 。

This essay has instruction and exercises. We’ll be working with this game, Cheese or Font. It could use the help. Before you read on, please do two small exercises.

本文有指導和練習。 我們將使用Cheese或Font這個游戲。 它可以使用幫助。 在繼續閱讀之前，請做兩個小練習。

Identify all the elements of Cheese or Font. Label them as core, supportive or extraneous. Core is the parts you need for gameplay, supportive is things like hints and instructions, and extraneous are things you could remove.

識別“奶酪”或“字體”的所有元素。 將它們標記為核心，支持或無關。 核心是游戲玩法所需的部分，支持性的是提示和指示之類的東西，無關緊要的是可以刪除的部分。

Do a quick, small sketch of the game on a small piece of paper. Only use core elements. Small matters, because it constrains your ability to get fiddly. Standard 3x3 or 3x4 is good. If you must draw on an ipad, don’t zoom. Suck it up and stay small.

在一張小紙上快速繪制游戲小圖。 僅使用核心元素。 無關緊要，因為它限制了您變態的能力。 標準的3x3或3x4是好的。 如果必須在iPad上繪圖，請不要縮放。 吸起來并保持小巧。

I often draw a quick self portrait to help me get the document camera aligned correctly.我經常畫一張快速的自畫像，以幫助我正確對準文檔照相機。

In this video, I am only focusing on the most core to the game (it was made quickly so I hyper-simplified. You can use more core elements.)

在此視頻中，我僅關注游戲的最核心部分(它制作速度很快，因此我將其簡化了。您可以使用更多的核心元素。)

In design, this is called a thumbnail sketch (they can be even smaller!) It’s a way to quickly explore different layouts.

在設計中，這稱為縮略圖(它們甚至可以更小！)，這是一種快速瀏覽不同布局的方法。

https://medium.com/subform/better-grid-systems-in-ui-design-tools-495dc35c5791https://medium.com/subform/better-grid-systems-in-ui-design-tools-495dc35c5791

Come up with at least six more ways to arrange the most important elements. Read though the below to get ideas of more ways to redesign Cheese or Font. I’ve already used at least one technique in my short example!

提出至少六種方法來布置最重要的元素。 請仔細閱讀以下內容，以獲得重新設計Cheese或Font的更多方法的想法。 在我的簡短示例中，我已經使用了至少一種技術！

從視覺層次開始 (Start with Visual Hierarchy)

The Law of the Conservation of Complexity (sometimes called Tesler’s law) states that “for any system there is a certain amount of complexity which cannot be reduced” only moved to the user or the designer. It is the designer's job to make the complex clear for users and players.

復雜性守恒定律(有時稱為特斯勒定律)規定，“ 對于任何系統，都存在一定程度的復雜性，無法降低”，只能移交給用戶或設計者。 設計人員的工作是使用戶和播放器都清晰可見。

The designer must communicate what is most important in a design so that a player doesn’t have to think about anything but playing well. Visual hierarchy is a way to do that. Untrained designers tend to make things just look bigger, and graphic designers learn there are many ways to do this.

設計者必須傳達設計中最重要的內容，以便玩家除了玩得好之外無需考慮其他任何事情。 視覺層次結構是做到這一點的一種方法。 未經訓練的設計師往往會使事情看起來更大，而平面設計師則知道有很多方法可以做到這一點。

尺寸 (Size)

But let’s look at size. Don’t just make things bigger, make some things smaller also. When one elements changes, everything else should be reconsidered.

但是，讓我們看一下尺寸。 不僅要使事情變大，還要使一些事情變小。 當一個要素發生變化時，應重新考慮其他所有要素。

Visme.coVisme.co

How would the above look if the diver was huge and the whale tiny? Would it tell a different story?

如果潛水員很大而鯨魚很小，上面看起來如何？ 它會講一個不同的故事嗎？

EXERCISE: Make one element in a NEW thumbnail sketch HUGE. What else do you want to change? What can get smaller?

鍛煉：在新的縮略圖中添加一個元素。 您還想更改什么？ 什么可以變小？

Color and Contrast

顏色和對比度

Visme.coVisme.co

You may have noticed in the above image that the happy little guy is now a lighter blue. Did you also notice that by changing the background color to a dark blue and making the sad men a darker shade they fade into the background? This an example of what I mean when I say, if you change one thing, you have ot reconsider everything. It’s not enough to just change the happy blue man, though that does work (look at the photo below!)

您可能已經在上圖中注意到，快樂的小家伙現在變成了淺藍色。 您是否還注意到，通過將背景色更改為深藍色，并使可悲的男人變暗，它們會淡入背景中？ 這是我說的意思的一個示例，如果您更改一件事情，則必須重新考慮所有內容。 僅僅改變快樂的藍色男人是不夠的，盡管確實可以(請看下面的照片！)

Designs get better when you combine the elements in this essay.

當您結合本文中的元素時，設計會變得更好。

https://www.impactbnd.com/blog/15-golden-principles-of-visual-hierarchy-infographichttps://www.impactbnd.com/blog/15-golden-principles-of-visual-hierarchy-infographic

Below we see it in practice in Monument Valley, widely thought to be a truly beautifully designed game. Our protagonist almost disappears into the gray-scale, but the blue pops in a black and white world, despite being a light blue. As well the flat white of the word balloon, along with it having the only horizontal lines helps draw the eye to dialog.

下面我們在紀念碑谷的實踐中看到它，人們普遍認為它是一款真正設計精美的游戲。 我們的主角幾乎消失了，變成了灰色，但盡管是淺藍色，藍色卻在黑白世界中流行。 單詞氣球的純白色以及僅有的水平線也有助于吸引眼球。

EXERCISE: Try taking ONE color and using it in your thumbnail sketch along with black. You can also use gray and white, if you have the tools.

鍛煉：嘗試采用一種顏色，并在黑色的縮略圖中使用它。 如果您有工具，也可以使用灰色和白色。

版式 (Typography)

Visme.coVisme.co

Speaking of blending techniques, type is never just type. There is the font choice, but also the weight, size and alignment that shapes a successful design.

說到混合技術，類型永遠不會只是類型。 可以選擇字體，但可以決定成功設計的粗細，大小和對齊方式。

So what do you need to know about fonts?

那么，您需要了解什么字體？

Display Fonts: usually elaborate and often hard to read, they are best reserved for headlines or logos. Learn more Typography series: What is a Display font? Do NOT use them for body text or interface text; they will be miserable to read.

顯示字體：通常精巧且通常難以閱讀，最適合用作標題或徽標。 了解更多印刷系列： 什么是顯示字體？ 不要將它們用于正文或界面文本； 他們將很難讀。

https://www.threerooms.com/what-is-a-display-font/https://www.threerooms.com/what-is-a-display-font/

Pairing fonts: One trick I lean on is pairing a serif and a sans-serf. You are actually experiencing now; Medium.com uses serif for the body text and sans-serif for the headers. Serif has those little decorative elements you see below.

字體配對：我依靠的一個技巧是將襯線和無襯線配對。 您實際上正在體驗； Medium.com的正文文本使用襯線，標題使用sans-serif。 襯線有一些小的裝飾元素，您會在下面看到。

https://www.canva.com/learn/serif-vs-sans-serif-fonts/https://www.canva.com/learn/serif-vs-sans-serif-fonts/

Be careful in pairing fonts! They can clash like a plaid suit with a flower pattern shirt (also, please don’t wear a plaid suit.) Good rules of thumb

配對字體時要小心！ 他們會像花花襯衫的格子西服一樣發生沖突(也請不要穿格子西服。)好的經驗法則

• Chose two fonts in the same font-family.
  選擇同一字體家族中的兩種字體。
• Pick a serif and a sans-serif
  選擇襯線和無襯線
• Big personality for headlines, subtle for body text (or interface)
  大標題的個性，細微的正文(或界面)

Always consider size when picking fonts. If it’s going to be tiny type in a HUD, make sure the font has been designed for readability at small sizes (like Verdana.)

選擇字體時，請始終考慮大小。 如果它將是HUD中的小字體，請確保已將字體設計為在小尺寸下可讀(例如Verdana)。

One game that is spectacular in its font use is Device 6. Fonts can convey mood and set you in a place and time, as fonts change with fashion.

Device 6是一款字體使用非常出色的游戲。隨著字體隨著時尚的變化，字體可以傳達心情并將您置于某個地點和時間。

Device 6設備6

To learn how to pair fonts, play this game. It’s so fun! (at least for me.)

要學習如何配對字體，請玩此游戲 。 真好玩！ (至少對于我來說。)

Please watch We Use Way Too Many Fonts. There is a comfortable power that you can enjoy (as well as working faster) once you find font pairings that make sense to you. Then you can spend your time on creative type uses.

請觀看“ 我們使用太多字體” 。 一旦找到對您有意義的字體配對，便可以享受舒適的力量(以及更快地工作)。 然后，您可以將時間花在廣告素材類型的使用上。

EXERCISE: Make 3–4 thumbnail drawings that use type. Make it less about choosing a font and more about size, positioning and contrast. Typefaces will be important when you move to digital styletiles.

鍛煉：制作使用類型的3–4個縮略圖。 減少選擇字體的時間，而增加字體的大小，位置和對比度。 當您使用數字樣式時，字體將非常重要。

對齊和接近 (Alignment and Proximity)

Take a little time to look at this image.

花一點時間看這張圖片。

https://visme.co/blog/visual-hierarchy/https://visme.co/blog/visual-hierarchy/

You notice the ingredients are now aligned. But the type below the pan is also. Alignment not only organizes the page, it also leads the eye.

您會注意到成分已對齊。 但是平底鍋下面的類型也是。 對齊不僅可以組織頁面，還可以吸引眼球。

https://nicolamurphy17.wordpress.com/visual-literacy-2/research/the-swiss-grid-system/https://nicolamurphy17.wordpress.com/visual-literacy-2/research/the-swiss-grid-system/

Most design work uses grids to align elements effectively. Designing with grids is a huge topic, so I’ll just make a nod to them here, and say that they are a thing. An important thing.

大多數設計工作都使用網格來有效地對齊元素。 使用網格進行設計是一個巨大的話題，因此我在這里向它們致意，并說它們是一回事。 重要的事情。

Grid tl;drUse grids. Turn on the grid in your designing software and/or use grid paper to sketch on. You can also make your own grids with a pencil and a ruler (or side of a book). Align objects up to the edge, when you turn off the grid it will look <kissing fingers gesture.> You can do a lot with a grid.

網格tl; dr使用網格。 在設計軟件中打開網格和/或使用網格紙進行素描。 您還可以使用鉛筆和尺子(或書的一面)制作自己的網格。 將對象向上對齊到邊緣，當您關閉網格時，它將看起來像<手指觸摸手勢。>您可以對網格做很多事情。

https://amzn.to/3bny2rohttps://amzn.to/3bny2ro

Ok, so what about proximity? Gestalt principles(from gestalt psychology) state we assume things are part of a group when the are close to each other, and different when they are separated by space.

好吧，鄰近度又如何呢？ 格式塔原理(根據格式塔心理學)認為，當事物彼此靠近時，它們就假定它們是一個組的一部分，而當它們被空間分隔開時，它們就不同。

Looking at the image below, we assume the group on the left is one group, and the group on the right is actually made up of 3 groups. Now look at them for a bit longer. The bigger spacing between the left and the right makes one think one is seeing two examples… proximity and distance is a powerful way to message what goes together.

看下圖，我們假設左側的組是一個組，而右側的組實際上由3個組組成。 現在再看一會兒。 左右之間的較大間距使人們認為正在看到兩個示例……接近度和距離是一種傳達信息的有效方式。

https://www.toptal.com/designers/ui/gestalt-principles-of-designhttps://www.toptal.com/designers/ui/gestalt-principles-of-design

Even when the objects are very different, (see below) we assume they belong together because of the visual grouping.

即使對象非常不同(請參閱下文)，我們也可以根據視覺分組將它們歸為一類。

https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/

One of the single biggest mistakes young designers do is put buttons too far apart from the object they are effecting.

年輕設計師犯下的最大的錯誤之一就是將按鈕與他們要影響的對象相距太遠。

EXERCISE: explore proximity in your design. What should be grouped? What is different, and thus should be separated from gameplay?

鍛煉：探索設計中的接近度。 應該分組什么？ 有什么不同，因此應與游戲玩法分開？

最后 (Finally)

I have come over the years to believe one of the most important rules is

多年來，我相信最重要的規則之一是

“Same things should look exactly the same, different things should look very different.” Christina Wodtke

“相同的事物看起來應該完全相同，不同的事物應該看起來非常不同。” 克里斯蒂娜·沃特克(Christina Wodtke)

Amazon is not gorgeous, but they do know how to use visual design principles to communicate effectively.

亞馬遜并不出色，但他們確實知道如何使用視覺設計原理進行有效溝通。

When you’ve finished your thumbnails, go look at the Kerning game and see the choices they made. It’s deliciously designed!

縮略圖制作完成后，請查看字距調整游戲，并查看其做出的選擇。 設計精美！

學到更多 (Learn More)

GDC talk on negative space, a gestalt theory graphic design principle

GDC談論負空間，格式塔理論圖形設計原理

More way to differentiate from the delightful Stephen P. Anderson

區別于令人愉悅的斯蒂芬·安德森的更多方法

And from Designmantic

而來自Designmantic

(these are like Pirate rules; they are really more a suggestion)

(這些就像海盜規則；它們實際上更多是一個建議)

翻譯自: https://medium.com/game-design-fundamentals/graphic-design-for-game-designers-d752e5bece7f

平面設計師和ui設計師

總結

以上是生活随笔為你收集整理的平面设计师和ui设计师_游戏设计师的平面设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。