2021-11-28 資深UI設計者
圖標在 UI 中扮演著重要的角色，并且已被證明是過去幾十年 UI 設計趨勢的象征。在圖形用戶界面的發展早期，圖標在計算機的顯示技術限制內盡可能仔細地模仿現實世界的物體；它們旨在將用戶體驗從現實世界鏈接到計算機世界。這可以從蘇珊·卡爾 (Susan Kare)為第一臺麥金塔 (Macintosh) 設計的圖標和微軟 (Microsoft) 在 Windows Vista 和 7 中的擬物圖標設計中看到。
當用戶界面從這種擬物風格轉變為 Windows 8 和 iOS 7 的“扁平”風格時，圖標設計也轉變為單色、線性風格。隨著 Android 12 的發布和谷歌新版設計系統—— Material You (或 Material Design 3) , 所有主要操作系統現在都使用這種風格。
但是為什么各大設計系統都使用這種風格的圖標呢？設計師意識到圖標不僅僅是風格統一、為功能補充說明的輔助圖形——設計師制作的圖標等同于印刷師制作的字體。 這讓設計師意識到圖標對于用戶體驗來說和字體一樣重要。
圖標的設計考慮與字體類似，并且經常出現在文本旁邊。
— Material Design 3 指南Iconography [旨在] 與 San Francisco 系統字體無縫集成。
— Apple 人機界面指南
Apple 的 SF Symbols 就是最好的例子：它的圖標與系統字體具有相同的九種權重，并與文本的大寫高度對齊。這也意味著圖標可以遵從用戶對更粗的 UI 文本的可訪問性設置。
Apple 的 SF Symbols 圖標集設計為與系統字體相同的九種權重。資料來源：蘋果
它們還與系統字體的大寫高度對齊，以更好地補充文本。資料來源：蘋果
Uber 的設計團隊也繪制了字體圖標來完善他們的 UI 字體 Uber Move，設置了三種不同的強調程度。
資料來源：優步
因此，為什么字體圖標是單色的并用輪廓繪制的原因就很清楚了：它們不是模仿物理對象，而是模仿我們的書寫系統。現代字母，尤其是拉丁字母，基本上是由線條而不是填充形狀組成的。他們從類似物理對象（如埃及象形文字）的象形文字到更抽象的物理對象表示進行了類似的轉變。例如，你不需要畫一只鳥來談論一只鳥；您只需寫一組表示“鳥”的字母或符號即可。
通過設計類似于字體的圖標，設計師認識到圖標是向用戶傳達信息的重要媒介。圖標可以打破語言障礙，而文本對于那些不熟悉圖標的人來說仍然是必不可少的。將兩者設計為看起來相似可以減少在閱讀文本旁邊的圖標時的認知負擔。
默認為字體圖標的另一個好處是填充的圖標現在可用于表示狀態或強調，如粗體文本。例如，Material Design 3 中的“活動狀態用填充圖標表示” ，Apple 在他們的人機界面指南中建議“使用填充變體來表示選擇”或“賦予符號更多視覺強調” 。Twitter 2021 年的重新設計更進一步，活動頁面僅通過填充圖標和粗體文本進行區分，沒有任何顏色變化。
Twitter 僅使用填充圖標和粗體文本來區分當前頁面。陪審團仍然不確定這是否足夠容易訪問。
未來不一定能夠被準確預測，但是看看字體系統的歷史，已經有了明確的關于什么圖形代表什么意思的規范：符號“a”總是表示“a”，字母“ant”表示螞蟻。這些符號的繪制方式仍然存在差異（大寫字母 A 可以有襯線或沒有襯線），但它們在不同字體中的外觀基本相同。
圖標似乎也朝著這個方向發展——上面的“添加文件夾”圖標在蘋果、谷歌和微軟的圖標集上具基本相同的設計：一個帶有“+”符號的文件夾。隨著圖標在 GUI 中變得越來越普遍，用戶對于什么符號代表什么意思的認知越來越趨同，就像字體一樣。
如何才能使用字體圖標？在您的應用程序中使用圖標時，您應該使用使用您正在使用的字體設計的圖標集：如果您使用的是系統字體，這很簡單，現在系統字體都具有系統圖標字體。但是，如果您使用另一種 UI 字體，則可能沒有專門為該字體設計的圖標集。使用普通的線性圖標集就足夠了，例如開源Feather 圖標或Iconic.app「1」。如果你像我們一樣使用 Material 圖標，你可以輕松切換到字體圖標。（似乎 Google 現在已將此樣式作為 Material Design 3 的默認樣式。）
個性化正在成為 UI 設計中越來越重要的元素。雖然自 20 世紀 90 年代以來就存在自定義壁紙和主題，但設計人員現在正在尋找更多方法來個性化整個系統的 UI，主要是用戶選擇的壁紙。谷歌的 Material Design 博客說得最好：“用戶在物理和數字世界中使用個性化的圖像定制他們的桌面，并提供舒適和快樂。” 壁紙是用戶首先看到的東西，并作為 UI 的背景。因此，讓 UI 的其余部分適應此元素是輕而易舉的事。
將壁紙融入 UI 的技術已經存在一段時間了，從 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜單到 Windows Vista 中的半透明窗口標題欄和 7 的 Aero Glass 主題。眾所周知，iOS 7 為其 UI 的許多部分帶來了模糊的背景，整個屏幕（如通知中心和控制中心）都使用了可以透出用戶壁紙的毛玻璃效果。
最近，墻紙開始影響幾乎整個 UI。當 Apple 在 macOS Mojave 中引入暗模式時，他們在基于壁紙的窗口背景中加入了一種色調，稱為桌面色調。根據人機界面指南，它“幫助窗口與其周圍的內容更和諧地融合在一起。”
后來他們在 Big Sur 的主要重新設計中擴展了這一點，將桌面著色也應用于光照模式：
Windows 11 在其 Mica material 設計系統中引入了類似的元素，他們的設計指南將其描述為“一種不透明的材料，它結合了用戶的主題和桌面壁紙，以創建其高度個性化的外觀。” 它還使用此色調作為當前活動窗口的標志。
將它提升到一個新的水平是 Android 12 中的 Material You，它為應用程序的背景、按鈕和其他控件的明亮強調色以及更中性的文本顏色著色。整個調色板由每個用戶的獨特壁紙生成。
這是他們新設計理念的一個關鍵元素，“如果形式跟隨感覺，而不是形式跟隨功能呢？” 這是對 UI 設計現狀的徹底拒絕，它尋求一種“通用”設計，具有技術上最先進的界面來滿足用戶需求。看看其他人是否效仿這種哲學會很有趣。
Material Design 團隊在他們的公告中遺漏的是他們如何做到了這一點，尤其是因為他們說他們“必須找到一種方法，讓任何顏色組合都具有可訪問的對比度 [...]，而無需對每一種顏色進行測試。”深入了解 GitHub 上最近發布的Material color 實用程序存儲庫，揭開所有謎團：
Material 團隊基于CAM16和CIELAB（或 LAB）顏色外觀模型構建了自己的顏色系統：“色調、色度、色調”或“HCT” 。CAM16 是 LAB 的繼任者，旨在匹配人類對顏色的感知方式。
這些模型的關鍵是“色調”或 L* 值，它描述了顏色的感知亮度或亮度，L* 值 0 表示黑色，100 表示白色。這在創建可訪問的調色板時非常有用，可確保顏色根據感知亮度具有足夠的對比度。
在網絡上，WCAG 2 指南規定正文的最小對比度為 4.5:1。直接使用感知亮度作為描述顏色的值使這變得更加直接，正如材料團隊解釋的那樣：“與對比度不同，測量 L* 中的對比度是線性的，并且計算簡單 [...] 50 的差異保證了對比度比率 >= 4.5。”
有了這些知識，剩下的就是生成具有不同色調或 L* 值的顏色調色板，并對其應用任何色調。然后為 UI 元素使用足夠對比的對。例如，一個按鈕可以有一個 L* = 40 的背景色和白色文本 (L* = 100)，它很容易通過最低對比度要求（L* 差異 > 50）。
這是一種輕松生成可訪問顏色的強大技術，但它不需要材質顏色實用程序。LAB 可以表示為 LCH（亮度、色度、色調），類似于 Material 的 HCT，其中 L 值可以用來計算對比度。（這比現有的 HSL 等表示更好，即使亮度值相同，HSL 的感知亮度也會有所不同。）您可以在本文中了解有關 LCH 的更多信息。
（此外，LCH 正在作為 CSS Color Level 4 的 一部分進入 Web 標準！因此您可以 lch (40% 44 49) 在 CSS 中編寫而無需將其轉換為 HSL 或 RGB，但目前僅在 Safari 中支持。Lea Verou，他編寫了上面鏈接的文章是 W3C CSS 工作組的一部分，正在開發這個非常標準。）
因此，您只需要一個起始顏色，將其轉換為 LCH，然后修改 L 值以制作調色板。然后使用一對亮度差為 50 或更多的顏色，以確保可獲得的對比度。
我們可以在下面的材質顏色系統中看到這種技術是如何使用的：調色板中的色調與 LCH 亮度值相匹配。（他們還修改色度（類似于飽和度）和色調略微跨色調。）我制作了一個小型網絡應用程序，顯示由材料顏色實用程序生成的調色板，以獲得下面的 LCH 值。
在 Material 的 HCT 之前，Lyft和Stripe的設計團隊探索了同樣的問題，Stripe 也最終使用了 LCH。我已經將他們的兩個探索聯系起來，這是極好的閱讀。
有一些工具可以在 LCH 之間進行轉換：
Lea Verou 制作了一個LCH 顏色選擇器，
在Colord網站可以讓你從LCH轉換為十六進制或RGB，
如果您有 Mac，Sindre Sorhus 的System Color Picker非常棒，而且
Accessible Palette使用 LAB/LCH 生成調色板。
我使用這種技術為Rowy添加主題，允許用戶選擇自己的強調色，同時保持可訪問性并為關鍵 UI 元素著色。源代碼具有我使用的確切 LCH 值。
當你想要設計一個帶圓角的“卡片套卡片” UI 時，內部的卡片應該具有較小的半徑，區別在于間距的大小。如果使兩者的角半徑相等，則內部卡片看起來不合適。這種技術在數字設計中已經有一段時間了，甚至是 CSS3 規范的一部分。
這也存在于硬件設計中：屏幕的圓角與iPad Pro和 iPhone X 設計上的設備框架相匹配。在帶有圓形屏幕的 iPhone 上，底座與屏幕的曲率相匹配——Apple 甚至在軟件中提供了精確的點大小。您還可以在視頻播放器中看到與屏幕曲率匹配的其他元素。
奇怪的是，這個原則不適用于使用單個圓角半徑的 UI 元素。在 Material Design 2 中，對話框和內部按鈕的圓角半徑都是 4dp，盡管它們之間有 8dp的間隙。macOS 在優勝美地時代的設計中類似，Windows 10 幾乎所有 UI 元素都使用方角。
但是，對于 Big Sur 和 Windows 11，通過增加較大 UI 元素的角半徑來近似這種效果。在 macOS 中，按鈕的圓角半徑現在為 5pt，對話框窗口的圓角半徑為 10pt，而且它們都使用“平滑角”來匹配 Apple 硬件的角。與此同時，Windows 11 以圓角以前的尖角而聞名，按鈕為 4 像素，窗口為 8 像素。
總體而言，用戶界面似乎也變得更加圓潤：
Big Sur 增加了圓角半徑，使用了平滑的圓角，看起來更圓潤；
iOS 15 引入了帶有全圓角的按鈕樣式；
Windows 11 移除了大多數 UI 元素上的尖角；和
與之前所有版本的 Material Design 形成鮮明對比的是，Android 12 增加了對話框、導航抽屜和完全圓角按鈕的半徑。
將最小的 UI 元素設置為某個基本圓角半徑，然后將較大的包含元素（如對話框）設置為更大的圓角半徑。嘗試使它們與較小元素之間的距離成比例，或將較小的角半徑加倍以進行簡化。這是它在我們的應用程序中的外觀，角半徑加倍：
最初開發字體時，它們是用金屬蝕刻的物理設計，具有固定的字體大小。當排版師為不同的尺寸設計相同的字體時，他們通過改變間距和比例等方面來將設計修改為最佳：這被稱為光學尺寸。您可以在本文中了解有關光學尺寸的更多信息。
可變字體是一種基于 OpenType 的新字體格式，允許設計人員自定義字體設計的特定“變化軸”（或變量），例如非固定粗細、傾斜和光學尺寸。您可以在這個優秀的可變字體入門 中了解有關可變字體的更多信息，它使用Roboto Flex，這是谷歌 Roboto 字體的可變字體擴展。
2021 年，所有主要操作系統現在都使用這種可變字體技術來實現 UI 排版中的光學大小：
Apple 的系統字體 San Francisco于 2015年發布，具有兩種光學尺寸：“顯示”適用于 20 磅及更大的尺寸，“文本”適用于所有更小的尺寸。2020 年，Apple 將這些字體發布為單一可變字體 SF Pro，以光學尺寸作為變化軸。Apple 的系統圖標 SF Symbols也使用可變字體技術。
對于 Windows 11，微軟將其系統字體 Segoe UI 重新設計為Segoe UI Variable，具有自己的光學大小軸。
作為 Material Design 3 的一部分，Google 引入了GS Text 和 GS Variable，這是其企業字體 Google Sans 的演變。
另外值得注意的是：這些字體都是不同風格的無襯線字體。舊金山是新怪誕的，Segoe是人文主義者，而Google Sans是幾何的。
可變字體是一項相對較新的技術，生產它們的成本很高，所以資源沒有那么多，尤其是在免費和開源領域。到目前為止，我發現的唯一具有光學尺寸的開源可變字體是Roboto Flex，但它似乎還沒有完成。Rasmus Andersson 被廣泛使用的 Inter 字體正在進行 OpenType 的 Bata測試。同時，為突出的標題使用更具表現力的字體可以提升您的設計。對于Rowy，我在小文本中使用 Inter 作為字體，在品牌表達的標題中使用 Space Grotesk。
扁平化設計已經存在了十多年，它的主要目標是通過剝離 UI 元素的雜亂和裝飾來專注于內容。在iOS的15設計指南狀態，“明快，漂亮的界面幫助用戶了解內容以及互動。”
最新的操作系統版本通過更少的層級來迭代這個概念。導航欄在iOS 15和Android 12 中是透明的，并在您滾動之前融入背景。
在桌面上，macOS Big Sur 混合了標題欄和工具欄，直到您滾動或懸停在欄上幾秒鐘。Windows 11 中的一些應用程序根本不區分標題欄，而是將內容放在一個獨特的卡片式層中。
這些元素都實現了相同的目標：減少周圍的視覺混亂并提升內容的視覺突出度。
如果您有一個停靠在邊緣的導航欄，請在不需要區分時將其混合到背景中，例如當用戶尚未滾動時。如果您有主要內容，請將其放置在與背景不同的微妙層中。我們使用了一個 React UI 庫 MUI，它使我們可以輕松實現導航欄僅在滾動時區分的效果：
同樣，更多的 UI 元素被插入，不再占據其容器的整個寬度。當 iPhone X 引入屏幕上的主頁指示器代替主頁按鈕時，Apple 更改了他們的指導方針，規定帶有圓角的嵌入式按鈕，避開iOS 7 中引入的全角按鈕。許多其他固定到的元素的最佳實踐已更改屏幕底部適應新的 iPhone 設計。
在 iOS 15 中，Apple 正在更多應用程序（如“設置”和“郵件”）中插入“表格視圖”。這似乎是為了應對 iPhone 屏幕尺寸不斷增長的情況，指南指出，“在緊湊的環境中，插入的分組表格可能會導致文本換行，尤其是在內容本地化時。”
在 macOS Big Sur 中，他們將此設計擴展到郵件中的列表，與iPadOS 設計一致。它也出現在整個系統的菜單中，包括菜單欄。請注意，點擊目標延伸到菜單的邊緣，就像之前的全角設計一樣。Windows 11 在其菜單和導航項中共享相同的樣式。Android 12 的系統 UI 和應用程序通常也遵循這種風格。
這種風格可以提高可訪問性，因為元素和它們的容器之間的分離現在擴展到所有四個方面，但我還沒有發現任何支持這一點的研究。當搭配和諧的圓角時，它可以使菜單看起來更現代。
設計師們正在添加更多的方式來顯示狀態，而不依賴于顏色，這對于色盲的人來說是無法實現的。以下是我注意到的一些例子：
Spotify 在 shuffle 和 repeat 按鈕下方添加了點，而不是在 2017 年僅僅依靠改變它們的顏色。
Material Design 3 顯示一個藥丸狀指示器，并在導航欄中為活動頁面使用填充圖標。
Windows 11 向列表和導航窗格中的選定項目添加了一致、獨特的行。
這決定了重新設計Rowy 的切換按鈕：
在 Android 12 中，開關現在在主要操作系統中具有相同的基本設計。這使用戶可以更輕松地在這些平臺之間切換并減少認知負擔。
我在所有這些設計決策中注意到的首要主題是設計師將用戶界面設計置于透視之中。他們敏銳地意識到數字界面在哪些方面適合人類體驗并與物理世界互動。
輪廓圖標模仿文本的融合認識到圖標在通信中的重要性。
越來越個性化的界面元素——尤其是你所采用的材料方向——承認人們喜歡用自己的方式制作東西，包括他們每天使用的技術。
和諧的圓角和插入元素的靈感來自實物和工業設計，因此我們的軟件與硬件更緊密地匹配。
使用具有光學尺寸的可變字體可以追溯到排版的起源，并且與顏色以外的差異化元素一起，它們提高了所有人的可用性，尤其是殘障人士。
更小的事情也有幫助：減少視覺混亂以提升內容使用戶能夠專注于他們想做的事情。并且使用標準的開關設計消除了確定 UI 元素功能所需的任何認知負擔。
這種思維背后的UI設計使我們很好地起來為下一代對AR / VR計算為中心的虛擬實境，在虛擬實境一經驗將不得不回答他們是如何改善人類的經驗和交互與物理世界。設計人員已經在研究如何使設計系統適應這種變化。看看上面的決定，應用色彩科學（Material 的 HCT 考慮到觀看條件）和提升內容的插入元素有助于這些 UI 元素從 2D 世界過渡到 3D 元世界。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務