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