矩形圖示設計的三種變體

Job data forum discussion of job market trends and data.
Post Reply
mahmud211
Posts: 17
Joined: Wed Dec 04, 2024 4:21 am

矩形圖示設計的三種變體

Post by mahmud211 »

需要最多迭代的圖標
「設定齒輪」、「人工智慧幫助」、「資料綁定」和「變數」圖示可能是設計過程中最讓我害怕的圖示。我們的主要痛點是平衡與其他圖標的視覺重量,使其代表的內容超級清晰,並權衡簡單性和清晰度。

例如,一開始,我們希望「資料綁定」圖示能夠在某 亞美尼亞 電話號碼資源 種程度上與其他圖示區分開來。我們希望它給人一種特別的感覺,並且不僅僅是一個基本的加號圖示。想想蘋果公司的 Command 鍵符號——它具有多大的象徵意義,以及它如何創造自己的意義,而不是依賴現實生活中的物件。

Image

在使用了近 50 個概念圖示後,我們決定不再使用其中任何一個,並繼續使用加號圖示。為了確保每個圖標直觀並無縫地融入產品的整體設計語言,迭代是必要的。

圖示網格,其中突出顯示中心行。



不斷發展的設計系統
在我們的電子書中,了解專家為何投資可擴展的設計系統以及他們如何思考設計系統的未來。

立即閱讀↗
立即閱讀
未進入最終版本的收藏夾
我仍然喜歡我設計的擬物化“添加面板”圖標的概念。他們將我們的新組件與深度和陰影相匹配,但最終,它們很難快速迭代和理解。

這些擬物化設計與使用者介面的其他部分(例如具有複雜陰影的按鈕)密切相關,旨在創造更具觸覺和吸引力的使用者體驗。然而,複雜性往往使它們不太清晰,並使保持圖標集的一致性變得更具挑戰性。

被拒絕的圖標設計的集合。
確保圖標作為一個集合一起工作
圖示的整體形狀可以從圓形到正方形,或從高矩形到寬矩形。始終從以下關鍵線開始,以便所有圖示具有相同的視覺權重。此外,在整個集合中重複使用一些相同的元素(例如相同的箭頭大小和其他常見模式,如加號、十字和編輯筆)可以創建一致性。

我透過不斷地一起視覺檢查圖標並調整整體形狀、筆劃粗細、圓角和硬端來實現一致性。這種對細節的一絲不苟的關注確保了儘管圖標多種多樣,但它們都感覺像是一個有凝聚力的集合的一部分。

設計圖標時我牢記的技術考量
四個簡單圖示設計器的集合:正方形、圓形、垂直矩形和水平矩形。
三種圖示設計:帶有加號的人物圖示、帶有加號的資料夾圖示和帶有加號的頁面圖示。
像素完美

確保圖示易於閱讀,因為它們的尺寸很小,為 16x16 像素。

透明度

我們的一些圖標使用透明度。僅在必要時才應使用透明度,且不應使用超過 2 個陰影。透明部分使用相同的“文字/活動”可變顏色標記,因此圖標可以在我們的程式碼庫中使用。

顏色

預設情況下,圖示顏色應設定為「text/active」可變顏色標記。

命名

確保在發布之前將圖層命名為「圖示」並展平/合併所有相同顏色的路徑。此過程可防止設計人員在變更圖示顏色時出現任何混亂( Figma僅當圖層名稱相符時才會覆蓋樣式)。
Post Reply