* 視覺設(shè)計

動畫盔憨、顏色徙菠、深色模式、半透明郁岩、字體

* 圖標和圖像

圖像尺寸和分辨率婿奔、應(yīng)用程序圖標、自定義圖標问慎、多項目拖動圖標萍摊、系統(tǒng)圖標

macOS的視覺設(shè)計

一、動畫

如果要為應(yīng)用程序設(shè)計自定義動畫如叼，以用戶的感受為主冰木，提供清晰的反饋以響應(yīng)用戶操作，并引起人們對屏幕上特定位置的注意笼恰。

1. 追求現(xiàn)實主義踊沸。逼真的動畫可以幫助人們了解事物是如何運作的。

2. 避免將動畫用于頻繁發(fā)生的交互中挖腰。通常讓人們認為效率低下雕沿。

3. 增強反饋和可理解性。例如猴仑，最小化窗口時审轮，它可以從屏幕流暢地移動到Dock肥哎，以便用戶確切知道它的去向。

4. 在控件狀態(tài)之間平滑過渡疾渣。

5. 暗示結(jié)果篡诽。通過暗示操作結(jié)果來建立信任并減少操作失誤。例如榴捡，當將一個項目拖到Dock時杈女，其他項目會移到一邊，顯示放置新項目時將其駐留的位置吊圾。

6. 確保全屏模式過渡動畫流暢达椰。

7. 不要為了使用動畫而使用動畫。過多或不必要的動畫會使人感到困惑或迷茫项乒，特別是在無法提供沉浸式體驗的應(yīng)用程序中啰劲。

8. 使動畫效果可選。當首選項中啟用減少動畫選項后檀何，應(yīng)用程序應(yīng)最小化或消除應(yīng)用程序動畫蝇裤。

二、顏色

顏色是提供狀態(tài)信息频鉴、提供操作反饋和可視化數(shù)據(jù)的好方法栓辜。

1. 明智地使用顏色。例如垛孔，出于非關(guān)鍵原因在應(yīng)用程序中的其他位置使用紅色時藕甩，向人們發(fā)出警告的紅色三角形會變得無效。

2. 考慮在其他國家和文化中如何使用顏色似炎。

3. 避免使用讓用戶難以區(qū)別的顏色辛萍。

4. 在非中性或半透明的背景上顯示時，或在非常明亮羡藐，彩色的圖像附近使用時蘸嘶，顏色可能會失去其影響棒搜。

5. 在各種光照條件下測試應(yīng)用的配色方案躯砰。

6. 使用標準顏色面板進行用戶自定義顏色更改练链。標準顏色色板可以使用為自定義顏色，并允許用戶保存顏色到常用色板瘩扼。

# 色彩管理 #

1. 將顏色配置文件應(yīng)用于圖像谆甜。標準RGB（sRGB）顏色空間可在大多數(shù)顯示器上產(chǎn)生精確的顏色。

2. 使用較寬的顏色以增強兼容顯示器上的視覺體驗集绰。寬彩色顯示器支持P3色彩空間规辱，與sRGB相比，它可以產(chǎn)生更豐富栽燕，更飽和的色彩罕袋，以每像素16位（每個通道）使用Display P3顏色配置文件改淑，并以PNG格式導出圖像。

3. 在需要時提供特定于顏色空間的圖像和顏色變化浴讯《湎模可以在Xcode項目的資產(chǎn)目錄中提供不同的圖像和顏色，以確保在彩色顯示器和sRGB顯示器上的視覺保真度榆纽。

4. 在實際的sRGB和寬彩色顯示器上預(yù)覽應(yīng)用的顏色仰猖。調(diào)整以確保兩種類型的顯示器具有同等的視覺體驗。

5. 在具有寬彩色顯示屏的Mac上奈籽，可以使用標準顏色面板來選擇和預(yù)覽P3顏色并將它們與sRGB顏色進行比較饥侵。

# 系統(tǒng)顏色 #

macOS提供了一系列標準系統(tǒng)顏色，可以自動適應(yīng)半透明背景以及可訪問性設(shè)置的更改和環(huán)境的變化唠摹。

1. 始終使用系統(tǒng)顏色爆捞，不要在您的應(yīng)用程序中對系統(tǒng)顏色值進行硬編碼奉瘤。以下系統(tǒng)顏色的實際的顏色值會根據(jù)各種環(huán)境變量在而改變勾拉。

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/

# 動態(tài)系統(tǒng)顏色 #

macOS定義了一系列系統(tǒng)顏色，這些顏色與系統(tǒng)標準界面控件（例如按鈕和標簽）的配色方案動態(tài)匹配盗温。

1. 不要重新定義動態(tài)系統(tǒng)顏色的語義含義藕赞。為確保一致的體驗并適應(yīng)將來macOS的系統(tǒng)外觀變化，請使用動態(tài)系統(tǒng)顏色卖局。

2. 不要嘗試復制動態(tài)系統(tǒng)顏色斧蜕。

三、深色模式

1. 深色模式應(yīng)專注于界面的內(nèi)容區(qū)域砚偶。

2. 用戶可以選擇深色模式作為其默認界面樣式批销。

3. 分別在淺色和深色模式中測試界面視覺效果。

4. 半透明效果可增強前景色和背景色之間的對比度染坯，適應(yīng)這種效果使前景內(nèi)容更加突出均芽。

# 顏色 #

深色模式下的調(diào)色板包括較深的背景色和較淺的前景色。這些顏色不一定是它們對應(yīng)的顏色的反轉(zhuǎn)单鹿。例如掀宋，淺色和深色模式都使用深色線條作為分隔線顏色。

1. 當您需要自定義顏色時仲锄，可將顏色集資產(chǎn)添加到應(yīng)用程序的資產(chǎn)目錄中劲妙，并指定該顏色的明暗變體。

2. 自定義前景色和背景色時儒喊，爭取7：1的對比度镣奋。此比率可確保您的前景內(nèi)容從背景中脫穎而出，包括啟用“桌面著色”時怀愧。它還可以確保內(nèi)容更符合的可識別性原則侨颈。至少要確保顏色之間的對比度不低于4.5：1富雅。

3. 柔化白色背景的顏色，可選擇稍深的白色肛搬。

# 桌面著色 #

深色模式下運行的應(yīng)用程序得益于桌面著色没佑。“桌面著色”使窗口背景從用戶的桌面圖片中拾取顏色温赔。幫助窗口與周圍的內(nèi)容更和諧地融合蛤奢。

1. 在自定義控件顏色中包括一些透明度。透明度可讓您的控件拾取由窗口背景和桌面著色賦予的顏色陶贼，即使改變桌面背景啤贩。

# 圖像，圖標和字形 #

系統(tǒng)在深色模式下通常使用模板圖像拜秧。模板圖像是具有透明度痹屹，抗鋸齒并且沒有使用蒙版的單色圖像。深色模式還使用了許多優(yōu)化了對比度的全彩色圖像枉氮。

1. 盡可能使用模板圖像志衍。模板圖像可適應(yīng)深色和淺色模式的界面，并且可以充分利用半透明效果聊替。自定義的全彩圖像的自適應(yīng)性難以確定楼肪。

2. 必要時使用不同的字形以適應(yīng)淺色和深色模式的界面。在淺色模式下使用空心輪廓的字形惹悄，在深色模式下使用心填充形狀會更好春叫。

3. 如果在淺色和深色模式上看起來都不錯，請使用相同的組件泣港。如果只適應(yīng)其中一種暂殖，那么更改圖像或創(chuàng)建獨立的深色和淺色的組件。

# 文字 #

利用飽和度和增強的對比度來保持深色模式時文本的可讀性当纱。

1. 使用系統(tǒng)提供的文本標簽顏色呛每。主色，次色惫东，三級和四級標簽顏色會自動適應(yīng)淺色和深色模式的界面莉给。

2. 盡量使用系統(tǒng)控件填寫靜態(tài)文本。系統(tǒng)視圖和控件中的文本在所有背景上看起來都不錯廉沮，并可以自動調(diào)整颓遏。

四、半透明

macOS應(yīng)用程序通過使用視圖和控件來提示位于背景的內(nèi)容滞时，并使用半透明和模糊來體現(xiàn)深度感叁幢。還可以使用動態(tài)模糊效果，即通過謹慎地使用明暗技術(shù)來動態(tài)融合前景色和背景色的效果坪稽。這種效果有助于使前景內(nèi)容在任何背景下都能脫穎而出曼玩。

1. 準備使用動態(tài)模糊效果鳞骤。動態(tài)模糊會影響所有應(yīng)用程序，因為默認情況下某些功能（例如菜單）是動態(tài)的黍判。

2. 適當時在應(yīng)用中啟用和禁用動態(tài)模糊豫尽。對于自定義視圖和控件，可以選擇是否允許使用動態(tài)模糊顷帖。

3. 首選系統(tǒng)提供的元素和顏色美旧。有些視圖根據(jù)其顏色自動適應(yīng)動態(tài)模糊。

4. 使用模板圖像贬墩。

5. 半透明和動態(tài)模糊需在視圖層次結(jié)構(gòu)中展現(xiàn)視覺效果榴嗅。

# 背景混合模式 #

1. 窗口后混合。這種混合模式允許窗口后面的內(nèi)容顯示出來陶舞。某些界面元素（例如菜單嗽测，工作表和側(cè)邊欄表）會自動采用此模式，盡管您可以在必要時將其禁用肿孵。

2. 窗口內(nèi)混合唠粥。駐留在窗口上的元素采用此混合模式，并允許該元素后面的窗口內(nèi)容顯示出來颁井。工具欄通常實現(xiàn)此模式厅贪，并提示滾動在工具欄下方的窗口內(nèi)容。

# 材質(zhì) #

系統(tǒng)提供的材料定義了應(yīng)用于界面的半透明雅宾，模糊和動態(tài)值。

1. 材料名稱反映了它們的用途葵硕，因此請按預(yù)期用途使用材料眉抬。

2. 使用系統(tǒng)顏色和系統(tǒng)材料。使用系統(tǒng)提供的顏色時懈凹，無需擔心在不同環(huán)境中顏色看起來太暗蜀变，明亮，飽和或?qū)Ρ榷鹊汀?/p>

五介评、字體

SF是macOS的系統(tǒng)字體库北，提供合適的可讀性，清晰度和一致性们陆。

1. SF Pro Text用于文本19點或更少寒瓦，SF Pro Display用于文本20點或更大。當您在按鈕和標簽之類的標準控件中使用SF作為文本時坪仇，macOS會根據(jù)點大小和用戶的可訪問性設(shè)置自動應(yīng)用最合適的變體杂腰。

2. 使用字體的粗細、大小和顏色強調(diào)重要信息椅文。

3. 盡量使用單個字體的變體和大小喂很。

4. 確保自定義字體清晰易讀惜颇，如在品牌推廣或游戲沉浸式體驗中。

5. 使用標準的“字體”面板更改用戶字體少辣×枭悖“字體”面板是人們熟悉的，并且包含用于選擇字體和調(diào)整屬性（如字體漓帅，大小和顏色）的控件望伦。

6. 動態(tài)系統(tǒng)字體變體使您的文本具有與標準系統(tǒng)提供的控件中顯示的文本相同的外觀。使用這些變體可獲得與平臺上其他應(yīng)用程序一致的外觀煎殷。

macOS的圖標和圖像

一屯伞、圖像尺寸和分辨率

標準分辨率的顯示器具有1：1像素密度（或@ 1x），其中一個像素等于一個點豪直。高分辨率顯示器具有更高的像素密度和2.0的比例因子（稱為@ 2x）劣摇。因此，高分辨率顯示器需要有更多像素的圖像弓乙。

# 設(shè)計高分辨率作品 #

1. 以所需的最大尺寸制作插圖末融，然后按比例縮小以縮小尺寸。

2. 使用8px x 8px的網(wǎng)格暇韧。網(wǎng)格可以使線條保持清晰勾习，不需要太多的修飾和銳化，確保所有尺寸的內(nèi)容都盡可能清晰懈玻。將圖像邊界對齊到網(wǎng)格以最小化縮小時可能出現(xiàn)的半像素和模糊細節(jié)巧婶。

3. 始終以較低的分辨率預(yù)覽高分辨率圖像，在低分辨率時進行修改涂乌。

二艺栈、應(yīng)用程序圖標

美觀、吸引人的啟動圖標是macOS用戶體驗的基本組成部分湾盒，并且傳達應(yīng)用程序的主要目的湿右。

1. 考慮為您的應(yīng)用程序圖標提供逼真的，獨特的形狀罚勾∫闳耍可以使用圓形來繪制圖標，避免使用與iOS應(yīng)用程序圖標類似z的圓角矩形尖殃。

2. 設(shè)計一個識別性高的圖標丈莺。

3. 簡化圖標并 謹慎添加細節(jié)。

4. 設(shè)計帶有單個中心點的圖標分衫，該圖標可以立即引起注意并具有清晰的標識性场刑。

5. 如果要創(chuàng)建iOS應(yīng)用程序的macOS版本，請重新設(shè)計macOS版本的應(yīng)用程序圖標。

6. 明智地使用顏色牵现。不要只是為了使圖標更明亮而添加顏色,平滑的漸變通常比銳利的顏色輪廓更好铐懊。

7. 避免混合實際文本，假文本瞎疼，波浪線來暗示文字科乎。如果想在圖標中加入文字，但又不想把注意力吸引到文字上贼急，那就用實際的文字茅茂，通過縮小文字來提高閱讀的難度。這種方法仍可以在高分辨率顯示器上顯示更清晰的細節(jié)太抓。如果應(yīng)用程序是本地化的空闲，那么在特定的語言中，最好選擇偽文本或波浪線而不是實際文本走敌。

8. 避免包含照片碴倾，屏幕截圖或界面元素。如果要將圖標基于照片掉丽，屏幕截圖或界面元素跌榔，請設(shè)計理想化的版本，以強調(diào)您希望人們注意到的特定細節(jié)捶障。

9. 不要使用Apple硬件產(chǎn)品的副本僧须。Apple產(chǎn)品受版權(quán)保護，不能在您的圖標或圖像中復制项炼。硬件設(shè)計會經(jīng)常更改担平，使圖標顯得過時。

# 透視和紋理 #

1. 設(shè)計具有適當角度和逼真的陰影的圖標芥挣。通過面對對象驱闷，位于中心正下方并稍微向上傾斜的相機查看。攝像機的位置應(yīng)足夠遠空免，以使圖標接近等軸測圖，而不會出現(xiàn)失真盆耽。要獲得逼真的陰影蹋砚，想象一個也面向?qū)ο蟮挥谥行纳戏角疑晕⑾蛳聝A斜的光源。

2. 在渲染后旋轉(zhuǎn)圖標摄杂。少量旋轉(zhuǎn)可以幫助人們將您的應(yīng)用程序圖標與文檔和文件夾區(qū)分開坝咐。旋轉(zhuǎn)9度往往效果很好。

3. 在圖標的陰影僅使用黑色析恢。在深色背景下顯示時墨坚，如果圖標的投影使用黑色以外的顏色，則投影看起來更像發(fā)光映挂。

4. 準確地描繪真實的物體泽篮。逼真的圖標應(yīng)準確地復制織物盗尸，玻璃，紙張和金屬等物質(zhì)的特性帽撑，以傳達物體的重量和感覺泼各。

5. 考慮在圖標的邊緣內(nèi)部添加一點光暈。如果應(yīng)用程序圖標包含深色反射表面（例如玻璃或金屬）亏拉，添加內(nèi)部輝光以使圖標突出扣蜻，并防止其看起來溶解在深色背景中。

# 應(yīng)用程序圖標屬性 #

格式：PNG

顏色模式：sRGB

像素：@1x and @2x

形狀：方形畫布及塘、適當添加透明度

1. 不要以ICNS或JPEG格式提供應(yīng)用程序圖標莽使。

# 應(yīng)用程序圖標大小 #

https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

1. 簡化較小的尺寸的圖標。刪除較小的圖標中的不必要的特征并夸大主要特征笙僚，以保持識別性芳肌。任何變化都應(yīng)該是細微的，以便不同的大小的圖標在視覺顯示時保持一致味咳。

三庇勃、自定義圖標

如果你的應(yīng)用程序包含的任務(wù)或模式不能用系統(tǒng)圖標表示，或者系統(tǒng)圖標與你的應(yīng)用程序風格不匹配槽驶，你可以創(chuàng)建自定義圖標责嚷。

1. 簡潔的，可識別的設(shè)計掂铐。過多的細節(jié)會使圖標看起來很粗糙或難以閱讀罕拂。爭取設(shè)計一個大多數(shù)人能正確理解并且不會覺得冒犯的設(shè)計。

2. 保持圖標在視覺風格上的一致性全陨。

3. 避免在圖標中包含文本爆班。如果需要顯示文本，請在圖標下方顯示文字標簽辱姨，并放在適當?shù)奈恢谩?/p>

4. 不要使用Apple硬件產(chǎn)品的副本柿菩。

5. 提供圖標名稱的替代文本標簽。替代文本標簽在屏幕上不可見雨涛，但是它們可以讓VoiceOver以聽覺方式識別內(nèi)容枢舶，從而使視力障礙者輕松的導航。

6. 考慮將圖標創(chuàng)建為模板圖像替久。模板圖像是具有透明性凉泄、抗鋸齒，未使用蒙版來定義形狀的陰影的單色圖像蚯根。模板圖像會根據(jù)操作和用戶交互自動顯示適當?shù)耐庥^后众，包括著色，高亮顯示，包括按鈕蒂誉、分段控件教藻、側(cè)欄和工具欄。

7. 系統(tǒng)會自動縮放基于PDF的圖標以顯示高分辨率拗盒，因此您無需提供高分辨率版本怖竭。僅對于需要諸如陰影，紋理和高光之類的效果的復雜設(shè)計陡蝇，才建議使用PNG格式痊臭。

8. 如果您的圖標為PDF格式，則僅需要@ 1x大小登夫。如果您的圖標為PNG格式广匙，則同時需要@ 1x和@ 2x大小。

# 分段控件圖標 #

控制尺寸 圖標大心詹摺（@ 1x） 圖標大醒恢隆（@ 2x）

標準 17px×17px 34px×34px

小 14px×13px 28px×26px

微型 12px×11px 24px×22px

# 側(cè)邊欄圖標 #

1. 設(shè)計具有透明度和適當詳細程度的側(cè)邊欄圖標。側(cè)邊欄圖標應(yīng)該是精簡的小型模板圖像涣楷，比工具欄和控件圖標具有更多內(nèi)部細節(jié)和真實感分唾。

圖標大小（@ 1x） 圖標大惺ǘ贰（@ 2x）

16px×16px 32px×32px

18px×18px 36px×36px

32px×32px 64px×64px

# 工具欄圖標 #

- 工具欄中使用統(tǒng)一的控件圖標或獨立圖標绽乔，不能同時使用兩者。

- 大多數(shù)工具欄中首選控件圖標碳褒。獨立式圖標在首選項窗口工具欄中往往更為常見折砸。

- 設(shè)計簡潔且易于識別的工具欄圖標。最好的圖標使用熟悉的視覺隱喻沙峻，這些隱喻與它們發(fā)起的動作直接相關(guān)睦授。當圖標描述了一個可識別的、現(xiàn)實世界的對象或可識別的應(yīng)用程序任務(wù)時摔寨，它會向首次使用它的用戶提供有關(guān)其功能的線索去枷，并幫助有經(jīng)驗的用戶記住它。

- 使工具欄圖標清晰且協(xié)調(diào)是复。如果圖標很容易識別的話沉填，人們會很快記住它的功能和位置，通常以形狀和圖像的變化作為主要差異因素佑笋。整個圖標集中保持相似的透視圖，大小和視覺權(quán)重斑鼻。

1.? 工具欄控件圖標

- 盡可能使用系統(tǒng)提供的控制圖標蒋纬。

- 設(shè)計具有透明度和適當詳細程度的控制圖標。控件圖標應(yīng)為精簡蜀备、流暢輪廓的小型圖像关摇。根據(jù)需要使用直觀透視，抗鋸齒和透明度來繪制碾阁。

最大大惺涫（@ 1x） 最大大小（@ 2x）

19px×19px 38px×38px

2. 獨立的工具欄圖標

- 由于獨立圖標不需要放在控件內(nèi)脂凶，因此您有更多空間來表達概念宪睹。保持輪廓清晰并使用合適的顏色（不必統(tǒng)一），根據(jù)需要使用直觀透視蚕钦、抗鋸齒來繪制亭病。

- 盡管通常應(yīng)該對獨立的工具欄圖標使用直接的透視圖，但不要重新設(shè)計知名界面的工具欄控件嘶居。

- 提供PNG格式的全彩獨立圖標罪帖。包括@ 1x和@ 2x版本。

圖標大杏势ā（@ 1x） 圖標大姓（@ 2x）

32px×32px 64px×64px

四、多項目拖動圖像

通常佑吝，顯示系統(tǒng)通用的多項目拖動圖像坐昙，但您應(yīng)該用適合本應(yīng)用的設(shè)計風格的自定義圖像替換它。

1. 理想情況下迹蛤，應(yīng)顯示拖動內(nèi)容的實際堆疊效果民珍。

五、系統(tǒng)圖標

1. 按圖標定義使用系統(tǒng)圖標盗飒。

2. 提供圖標的替代文本標簽嚷量。

3. 如果找不到滿足您需求的系統(tǒng)提供的圖標，設(shè)計一個自定義圖標逆趣。

# 控件圖標 #

https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/system-icons/

1. 僅在帶邊框的控件中使用控件圖標蝶溶。

2. 通常，使用系統(tǒng)API而不是進入全屏模式和退出全屏模式圖標來支持全屏模式宣渗。

# 系統(tǒng)功能控制圖標 #

以下圖標代表系統(tǒng)權(quán)限抖所，例如網(wǎng)絡(luò)和用戶的計算機。在大多數(shù)情況下痕囱，這些實體沒有相關(guān)的動作田轧。但是，如果您需要表示一個動作（例如創(chuàng)建智能文件夾）鞍恢，則可以在智能文件夾圖標上添加加號傻粘。

https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/system-icons/