超級簡單的圖像學指南

設計一個自定義圖標平均需要多長時間？

幾分鐘？ 10分鐘？ 更長？ 如果我們向您展示如何在 10 分鐘內製作 10 個出色的圖標會怎樣？

圖標是一種增加品牌視覺語言的交流形式，因此自定義圖標集比簡單、通用的圖標集更有意義和引人入勝。 大多數設計師從不費心學習如何創建自定義圖標，主要是因為這是我們學習隊列中的另一門課程。

因此，我著手創建一個超級簡單的指南，幫助您在不到 10 分鐘的時間內學習肖像學的基礎知識（我是認真的）。

能夠創建自定義圖標將為您打開一個全新的世界，開始為您的項目創建複雜的形狀，這將使您與其他人群區分開來，為您作為設計師提供競爭優勢。

最初，我受到 Morgan Allan Knutson 的這個 GIF 的啟發來創建本指南，該 GIF 展示瞭如何在幾秒鐘內創建一個位置服務圖標。 我發現它令人耳目一新，聰明，快速。 它揭開了創建自定義圖標的過程的神秘面紗，並展示了它是多麼簡單。 圖標實際上是一種幾何形狀，它可以由基本形狀（例如正方形、三角形或圓形）的組合或變形產生。 標誌或圖標設計的經驗法則是保持簡單。

本文的目標是在 10 秒內創建 10 個圖標，每個圖標只使用簡單的形狀。

重要提示：我們將在這篇文章中使用 Adob​​e Illustrator，但您可以使用 Sketch 甚至 Figma 獲得相同的結果。 每當我們需要在形狀上添加或刪除點時，我們將使用“鋼筆工具 (P)”。 選擇和移動點將使用“直接選擇工具 (A)”完成。

眼睛圖標

如圖所示，將四個圓圈居中對齊，從大到小改變顏色。 在最大的圓圈上，朝後，將左右點從中心拉開。 最後，將最小的內圓移動到下一個的邊緣，以在虹膜上創建照明效果。

提示：不要使用白色圓圈，只需從它們下方的圓圈中減去（使用路徑查找器面板）兩個圓圈。 它在背景上創建更清晰的結果。

箭頭圖標

這都是關於在初始正方形邊緣添加這些額外點的位置。 提示：作為替代方案，您可以簡單地繪製一條形如箭頭的細線。

電池圖標

使用一個帶有筆劃的正方形和兩個帶有填充的正方形。 簡單地調整比例，同時將一個填充正方形包含在筆劃形狀中，並將第二個正方形保留在外面以形成電池尖端。

提示：使用筆劃粗細和填充來保持良好的視覺平衡。

項目符號列表圖標

從一個簡單的正方形開始； 將其複制一次到其右側； 並將其重塑為一個長矩形。 選擇整個事物，然後復制兩次，同時在兩者之間保留一個正方形大小的空間。

提示：用圓形替換正方形以創建更柔和的外觀。

雲圖標

畫三個不同大小的圓圈。 將兩個最小的圓圈底部對齊以獲得一個底部，並將最大的圓圈放在中間，在更高的位置。 通過變形其中一個小圓圈來創建雲的底部。

提示：使用不同的圓圈大小以獲得更有機的雲。

正向播放圖標

畫一個長方形。 向左邊緣中心添加一個點，並刪除頂部和底部點。 現在您有了一個三角形，只需將該形狀複製到右側一次即可完成圖標。

提示：要更快地做到這一點，只需從三角形而不是正方形開始。

漏斗圖標

從一個長矩形開始。 在左右邊緣的中心添加一個點。 現在，水平拉伸頂部邊緣，就完成了。

提示：將兩個正方形邊對邊放置，然後簡單地水平拉伸最上面的邊。

播放/暫停圖標

從三個平行的長矩形開始。 將最寬的矩形重塑為三角形。

提示：或者，簡單地畫一個三角形，然後畫兩個平行的矩形。

位置箭頭圖標

這是摩根的位置服務圖標的混音。 只需畫一個正方形，然後沿對角線方向拉左下角，向上移動直到通過相反的點。

提示：在 Illustrator 中，在拖動點的同時按住 Shift 鍵有助於在保持對角正確的同時保持對稱。

位置圖釘圖標

在更大的圓圈內敲出一個圓圈（使用路徑查找器面板）。 直線向下拖動最低點，並銳化形成的角度 - 切換到“鋼筆工具（P）”，然後按住“Shift”鍵，單擊該點。

提示：在該臨界點上使用圓角來柔化外觀 - 在選擇該點時調整“變換”選項面板中的“角半徑”值。

聲音圖標

就像漏斗圖標一樣，但旋轉了 90 度。

提示：只需複制並粘貼漏斗圖標，然後順時針旋轉即可。

波浪圖標

畫一條直線，並在其長度上等距離添加點。 向下拖動變化點，並將每個角落都弄圓到最大，直到一切順利。

提示：修整線條提示以獲得更平滑的外觀。

頂部圖標

這是獎金圖標。

用足夠粗的筆劃畫一個正方形。 使用剪刀工具，剪下右上角和左下角。 這會將形狀一分為二。 將下半部分向上移動，然後將整個物體逆時針旋轉 45 度。

提示：注意線條的粗細，以及標誌內部形成的空白區域。

一個圖標值 1,000 個字。

我們經常聽到，一張圖片值一千個字。 嗯，這非常適用於圖標，它取代了長句和單詞，以優化視覺空間、可用性和美感。 知道如何製作一組簡單有效的圖標可以大有幫助。 我們剛剛看到了通過觀察和利用一組基本形狀來實現它是多麼快速和容易。

總之，圖像學的 10 條主要規則是：

• 使其具有像徵意義和意義。
• 你聽說過：保持簡單。 風格不應影響易讀性。
• 要有意識和深思熟慮。 在你創造之前思考。
• 確保它適用於不同的尺寸。
• 牢記統一性。
• 僅限矢量圖，拜託！
• 僅在必要時使用顏色，並謹慎使用。
• 它有助於了解基本幾何。
• 考慮“可供性”以確保設計的圖標將有助於整體設計。
• 圖像學是一種應該通用的語言。
• 獎勵：字母表只是一組 26 個圖標。

一起玩，看看你能在 10 秒內想出什麼。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗