I often discuss the topic of improving visual design skills with junior and mid-level designers. While there are a number of design principles the designers should learn and practice, one important skill that is not often considered and deliberately practiced is the ability to spot visual problems within a design. Over time, “an eye for detail” can certainly be acquired over time with UI challenges and design projects but the earlier a designer can develop the ability to catch common visual design mistakes, the sooner it is for the designer to level up his or her visual design quality.

我經常與初級和中級設計師討論提高視覺設計技能的主題。 盡管設計人員應學習和實踐許多設計原則，但不經常考慮和有意實踐的一項重要技能是能夠發現設計中的視覺問題。 隨著時間的流逝，一定會隨著UI挑戰和設計項目而逐漸獲得“細節眼”，但是設計師越早發現常見視覺設計錯誤的能力，設計師就越早提升自己的水平。視覺設計質量。

For this article, I put together a small list of questions with the intention to draw some awareness on the topic of training an eye for visual details. Below are seven questions that represent a sample of the most common visual mistakes I encountered over the years.

在本文中，我整理了一小部分問題，目的是使人們對訓練視覺細節的主題有所了解。 以下是七個問題，這些問題代表了我多年來遇到的最常見的視覺錯誤的示例 。

These questions are not very difficult especially for more seasoned designers. Hopefully, this will be a fun activity to jog your mind a bit or warm-up your focus. Note that the answer and explanation are listed at the bottom of this post. Without further ado, let’s get started with the quiz.

這些問題并不是很困難，特別是對于經驗豐富的設計師而言。 希望這將是一個有趣的活動，可以讓您稍微動一下腦子或使您的注意力更加集中。 請注意，答案和解釋列在這篇文章的底部。 事不宜遲，讓我們開始進行測驗。

問題1 (Question #1)

Let’s start with a warm-up. Which button text is not visually aligned?

讓我們從熱身開始。 哪個按鈕文本在視覺上 不 對齊 ？

問題2 (Question #2)

Which one of these icons has a different size than the rest of the set?

這些圖標中的哪個圖標的大小與其余圖標不同？

問題＃3 (Question #3)

Below are two text paragraph, which one is less readable?

以下是兩個文本段落，哪一個可讀性較差 ？

問題＃4 (Question #4)

Below are two cards with a combination of background, image, and text. Which one has a visual issue?

以下是兩張包含背景，圖像和文本的卡片。 哪一個有視覺問題 ？

問題5 (Question #5)

Here are two screenshots with the same elements. Which of these contains elements that are arranged less consistently?

這是兩個具有相同元素的屏幕截圖。 以下哪項包含的元素排列不一致 ？

問題＃6 (Question #6)

Let’s turn it up a notch by not hinting at what you should be looking for. Which one of these is less visually consistent?

讓我們通過不暗示您要尋找的內容來提高它的檔次。 其中哪一個在視覺上 不太 一致 ？

問題＃7 (Question #7)

Between the two designs below, which one is less accessible?

在以下兩種設計之間，哪一種比較不易獲得 ？

接聽鍵 (Answer keys)

問題1：哪個按鈕文字未居中。 (Question #1: Which button text is not centered.)

The answer is B. The ‘sign up’ text is screwed to the right.

答案是B。 “注冊”文本固定在右側。

This is a super common error that can happen when resizing, positioning, or editing the text content of a layer. You should try to develop the habit to use the alignment tool often and train your eyes to catch these alignment issues.

這是一個超級常見的錯誤，可能會在調整大小，放置或編輯圖層的文本內容時發生。 您應該養成經常使用對齊工具的習慣，并訓練您的眼睛以捕捉這些對齊問題。

問題2：這些圖標中的哪個圖標的大小與其余圖標不同？ (Question #2: Which one of these icons has a different size than the rest of the set?)

The answer is the pink money icon, which is smaller in size than the rest of the icons.

答案是粉紅色的錢圖標 ，它的大小比其余圖標小。

When using icons from different sources, it’s possible that the icons are not sized consistently. In this case, take the extra step to ensure the icons in your design are all fitted to a standardized bounding box.

當使用來自不同來源的圖標時，圖標的大小可能不一致。 在這種情況下，請采取額外的步驟以確保設計中的圖標都已安裝到標準化的邊框中。

問題3：以下是兩個文本段落，哪一個段落可讀性較差 ？ (Question #3: Below are two text paragraph, which one is less readable?)

B is the less readable paragraph because of the line-height being smaller than the size of the font.

B是可讀性較差的段落，因為行高小于字體的大小。

Establishing a good vertical rhythm can help with the readability of the content. Try to at least match the line-height either equal to or ideally a certain percentage larger than the baseline font size.

建立良好的垂直節奏可以幫助提高內容的可讀性。 嘗試至少使行高等于或理想地大于基線字體大小的某個百分比。

問題＃4：哪個人有視覺問題 ？ (Question #4: Which one has a visual issue?)

A is correct. The Earth image is a bit distorted compared to the other option showing a perfect square.

A是正確的。 與顯示完美正方形的其他選項相比，地球圖像有些失真。

This type of error can often happen when resizing image assets within the design. Try to lock the layer dimension or use the image fill feature to prevent distortion when re-scaling images in your design tool.

在設計中調整圖像資源大小時，經常會發生這種類型的錯誤。 在設計工具中重新縮放圖像時，請嘗試鎖定圖層尺寸或使用圖像填充功能以防止變形。

問題5：以下哪個元素的排列不一致？ (Question #5: Which of these contains elements that are arranged less consistently?)

The correct answer is A because the spacing between the icon row has various margins in-between the icons.

正確答案是A，因為 圖標行之間的間距在圖標之間具有各種邊距。

Spacing inconsistency can be subtle but these issues can add up to hurt the overall polish fo the design. When possible, utilize the auto spacing distribute feature or the stack feature to ensure consistent spacing across your designs.

間距不一致可能很細微，但是這些問題加起來會損害設計的整體效果。 如果可能，請利用自動間距分配功能或堆棧功能來確保整個設計之間的間距一致。

問題6：以下哪一項更一致？ (Question #6: Which one of these is more consistent?)

The answer is B because the email field is slightly shorter than the rest.

答案是B，因為電子郵件字段比其他字段短一些。

It’s easy to accidentally misalign UI elements when layers are moved around or resized. Always helpful to double-check the size and alignment of layers with every move.

在移動圖層或調整圖層大小時，很容易導致UI元素意外對齊。 在每次移動時仔細檢查圖層的大小和對齊方式總是很有幫助的。

問題＃7：哪一個比較不方便 ？ (Question #7: Which one is less accessible?)

B is less accessible because the contrast of the download link is low.

B較難訪問，因為下載鏈接的對比度較低。

To ensure your visual designs meet sufficient contrast, use tools like the contrast checker to ensure at least WCAG AA standard.

為了確保您的視覺設計具有足夠的對比度，請使用諸如 對比檢查器 確保至少達到WCAG AA標準。

Accessibility is very important and there is a lot more than just maintaining sufficient contrast. To learn more about accessibility in visual design, here are some helpful resources:

可訪問性非常重要，并且不僅要保持足夠的對比度。 要了解有關視覺設計中可訪問性的更多信息，這里有一些有用的資源：

• https://usabilitygeek.com/6-principles-visual-accessibility-design/

  https://usabilitygeek.com/6-principles-visual-accessibility-design/

• https://www.uxbooth.com/articles/accessibility-visual-design/

  https://www.uxbooth.com/articles/accessibility-visual-design/

• https://www.w3.org/WAI/standards-guidelines/wcag/glance/

  https://www.w3.org/WAI/standards-guidelines/wcag/glance/

Hope you find this post helpful and somewhat entertaining. If you are interested to learn more about improving visual design skills, I wrote another post in the past that touched on this topic.

希望您發現這篇文章對您有所幫助，并有所娛樂。 如果您有興趣了解有關提高視覺設計技能的更多信息，我過去寫過另一篇文章，涉及該主題。