一斧拍、三大基本設(shè)計(jì)主題

清晰（Clarity）

縱觀整個(gè)iOS系統(tǒng)雀扶，清晰意味著，每種尺寸下的文本都應(yīng)該是易讀的肆汹，所有圖標(biāo)都應(yīng)該是精確易懂的愚墓，每一個(gè)裝飾都應(yīng)該是精心恰當(dāng)?shù)模覒?yīng)該本著功能驅(qū)動設(shè)計(jì)的原則昂勉。利用留白浪册，顏色崎岂，字體请祖，圖像以及其它界面元素來共同巧妙地突出重點(diǎn)內(nèi)容且表達(dá)其不同的可交互性兼犯。

遵從（Deference）

干凈美觀的界面和清晰流暢的動態(tài)效果有助于用戶去理解界面內(nèi)容并與之進(jìn)行交互誊垢，從而避免給用戶帶來干擾。而如果當(dāng)前的內(nèi)容占據(jù)了整個(gè)屏幕時(shí)刽辙，可以利用半透明以及模糊處理等方式來暗示用戶其更多內(nèi)容的存在勺爱。盡可能少的使用邊框促煮，漸變以及陰影可以讓界面更輕迫吐，從而突出更多的內(nèi)容库菲。

深度（Depth）

鮮明的視覺層級以及生動的動態(tài)效果可以對界面有更深層次的表達(dá)，賦予了界面活力也更有助于用戶去理解志膀。易于發(fā)現(xiàn)且易于觸發(fā)的界面元素能夠提升用戶的體驗(yàn)愉悅感蝙昙，而用戶在成功觸發(fā)相應(yīng)功能或獲得更多內(nèi)容的同時(shí)也掌握了當(dāng)前所在位置的由始至終（可以理解為PC端的面包屑）。因此當(dāng)用戶在瀏覽內(nèi)容的同時(shí)梧却，流暢的過渡其實(shí)便體現(xiàn)出了一種縱深感。

二败去、黑暗模式（Dark Mode）

尤其這次更新中深色模式非常重頭放航，“從 iOS 13.0 開始，人們可以將系統(tǒng)全局的外觀樣式設(shè)置為深色視覺風(fēng)格圆裕，即“深色模式”广鳍。

在深色模式中，系統(tǒng)會為所有界面吓妆、視圖赊时、菜單、控件等等調(diào)用一套更深的背景色方案行拢，同時(shí)通過更多的半透明虛化效果使前景內(nèi)容更有效地從深色背景當(dāng)中突顯而出祖秒。深色模式同樣支持所有的可訪問性設(shè)計(jì)標(biāo)準(zhǔn)。

人們可以將深色模式設(shè)置為系統(tǒng)的默認(rèn)外觀模式，也可以讓設(shè)備在光照條件較弱的環(huán)境中自動切換至深色模式竭缝。

使用黑暗模式的原因

• 查看照片等媒體內(nèi)容會更加清晰房维，生動
• 在夜晚等光線較暗的模式下可以更舒適的瀏覽
• 很多用戶覺得深色模式很酷

如何設(shè)計(jì)黑暗模式

• 專注并聚焦內(nèi)容：深色模式可以將焦點(diǎn)集中于界面當(dāng)中的內(nèi)容區(qū)域，使內(nèi)容本身得以突顯抬纸，而周圍的界面元素則會隱退于背景之中咙俩。更高效地給用戶呈現(xiàn)內(nèi)容。
• 在明亮和黑暗的外觀下測試您的設(shè)計(jì): 需要在app界面設(shè)計(jì)時(shí)充分考慮在深色與淺色兩種模式下的內(nèi)容依然清晰可讀性湿故。在某一種模式當(dāng)中表現(xiàn)良好的設(shè)計(jì)方案阿趁，在另一種模式當(dāng)中很可能出現(xiàn)問題。檢視界面在兩種模式下的表現(xiàn)坛猪，進(jìn)行必要的調(diào)整脖阵，使其能夠良好適配于每一種模式。
• 調(diào)整對比度和透明度：請確保在黑暗模式下的內(nèi)容保持清晰易讀砚哆。在黑暗模式下独撇，您應(yīng)該單獨(dú)測試，并一并打開“增加對比度”和“降低透明度”來測試您的內(nèi)容躁锁。

三纷铣、具有語義化的顏色（Semantic Color）

顏色是一種傳遞活力，提供視覺連續(xù)性战转，傳達(dá)狀態(tài)信息搜立，響應(yīng)用戶操作提供反饋以及幫助人們可視化數(shù)據(jù)的好方法。

在選擇淺色和深色背景下單獨(dú)和組合的應(yīng)用色調(diào)顏色時(shí)槐秧，請查看系統(tǒng)的配色方案以獲得指導(dǎo)啄踊。

明智地使用顏色進(jìn)行交流

當(dāng)謹(jǐn)慎使用時(shí)，提高注意重要信息的顏色力量會增強(qiáng)刁标。例如颠通，當(dāng)出于非關(guān)鍵原因在應(yīng)用程序中的其他地方使用紅色時(shí)，警告人們關(guān)鍵問題的紅色三角形變得不那么有效膀懈。

在整個(gè)應(yīng)用中使用補(bǔ)色：

應(yīng)用中的顏色應(yīng)該很好地協(xié)同工作顿锰，而不是沖突或分散注意力。例如启搂，如果粉彩對于應(yīng)用程序的樣式至關(guān)重要硼控，請使用一組協(xié)調(diào)的粉彩。

選擇與您的應(yīng)用徽標(biāo)協(xié)調(diào)的有限調(diào)色板

微妙地使用顏色是傳達(dá)品牌的好方法胳赌。

考慮選擇色調(diào)顏色以指示整個(gè)應(yīng)用程序的交互性

在Notes中牢撼，交互元素為黃色。在日歷中疑苫，交互式元素為紅色熏版。如果您定義表示交互性的色調(diào)顏色纷责，請確保其他顏色不與之競爭。提供兩種版本的色調(diào)纳决，以確保它在明暗模式下都很好看碰逸。當(dāng)您使用系統(tǒng)顏色作為色調(diào)時(shí)，您可以自動支持高對比度阔加。

避免對交互式和非交互式元素使用相同的顏色

如果交互式和非交互式元素具有相同的顏色饵史，則人們很難知道在哪里挖掘∈だ疲考慮藝術(shù)品和半透明度如何影響附近的顏色胳喷。藝術(shù)品的變化有時(shí)需要改變附近的顏色，以保持視覺連續(xù)性并防止界面元素變得過于強(qiáng)大或不足夭织。例如吭露，地圖在使用地圖模式時(shí)會顯示淺色方案，但在激活衛(wèi)星模式時(shí)會切換為深色方案尊惰。放置在半透明元素后面或應(yīng)用于半透明元素（如工具欄）時(shí)讲竿，顏色也會顯得不同。

在各種照明條件下測試應(yīng)用程序的配色方案

根據(jù)房間的氛圍弄屡，時(shí)間题禀，天氣等，室內(nèi)和室外的照明都有很大差異膀捷。當(dāng)您的應(yīng)用在現(xiàn)實(shí)世界中使用時(shí)迈嘹，您在計(jì)算機(jī)上看到的顏色看起來并不總是一樣。始終在多種光照條件下預(yù)覽您的應(yīng)用全庸，包括在晴天戶外秀仲，以查看顏色的顯示方式。如有必要壶笼，調(diào)整顏色以在大多數(shù)用例中提供最佳的觀看體驗(yàn)神僵。

考慮True Tone顯示如何影響顏色

True Tone顯示器使用環(huán)境光傳感器自動調(diào)整顯示器的白點(diǎn)，以適應(yīng)當(dāng)前環(huán)境的照明條件覆劈。主要關(guān)注閱讀保礼，照片，視頻和游戲的應(yīng)用可以通過指定白點(diǎn)適應(yīng)性樣式來增強(qiáng)或削弱此效果墩崩。

考慮如何在其他國家和文化中看到您對顏色的使用

例如，在某些文化中侯勉，紅色表示危險(xiǎn)鹦筹。在其他人看來，紅色具有積極的內(nèi)涵址貌。確保應(yīng)用中的顏色發(fā)送相應(yīng)的消息铐拐。

避免使用讓人們難以察覺應(yīng)用內(nèi)容的顏色

例如徘键，色盲人可能無法區(qū)分某些顏色組合，而對比度不足會導(dǎo)致圖標(biāo)和文本與背景混合并使內(nèi)容難以閱讀遍蟋。有關(guān)指導(dǎo)吹害，請參閱顏色和對比度。

使用適應(yīng)當(dāng)前外觀的顏色

語義顏色（如分隔符）會自動適應(yīng)當(dāng)前外觀虚青。 當(dāng)您需要自定義顏色時(shí)它呀，將顏色集資源添加到應(yīng)用程序的資產(chǎn)目錄中，并指定顏色的淺色和深色變體棒厘，以便它可以適應(yīng)當(dāng)前的外觀模式纵穿。 避免使用硬編碼的顏色值或不適應(yīng)的顏色。

例如奢人，在淺色模式下谓媒，用RGB色（255.255.255）100%的不透明度來作為背景顏色，那么在深色模式會使用RGB色（255.255.255）100%的不透明作為背景顏色何乎。這兩個(gè)顏色都會被稱為背景色句惯，打包寫在代碼中。系統(tǒng)只需按照不同的場景來使用這兩種顏色即可支救。

蘋果設(shè)計(jì)師為我們提供了4組的語義化文字樣式顏色抢野。無論在深色或者淺色模式，都能呈現(xiàn)出良好的對比度搂妻。如下圖所示蒙保。

同樣的，iOS 13也提供了三種默認(rèn)的背景色供我們選擇欲主，包含系統(tǒng)背景邓厕，二級和三級背景。設(shè)計(jì)師可以在三種層級顏色中搭配來表達(dá)更好的層次效果扁瓢。

在填充色详恼，分隔線和系統(tǒng)色中，建議大家使用各種透明度的顏色來處理引几，確保在黑暗模式和白色模式下昧互，這些顏色都能很好的適配。

當(dāng)然伟桅，不是所有的顏色都可以用透明色敞掘，比如下面這種。此時(shí)我們可以根據(jù)情況使用不透明的純色代替楣铁。比如下面兩張圖片：

iOS 13系統(tǒng)引入了六種不透明的灰色玖雁，你可以在上述半透明效果不佳的極少數(shù)情況下使用它們。 例如盖腕，交叉或重疊元素（例如網(wǎng)格中的線條或條形）在不透明度方面看起來更好赫冬。 通常浓镜，為UI元素使用語義定義的系統(tǒng)顏色。上下兩圖分別為默認(rèn)顏色和無障礙顏色：

系統(tǒng)級別的顏色劲厌，在蘋果的設(shè)計(jì)文檔中也有詳細(xì)的描述膛薛，如下圖兩圖，分別為默認(rèn)顏色和無障礙顏色：

確保所有外觀都具有足夠的色彩對比度

使用系統(tǒng)定義的顏色可確保前景和背景內(nèi)容之間的對比度补鼻。 對于自定義顏色哄啄，目標(biāo)是對比度為7：1，尤其是對于較小的文本辽幌。 對比度越高增淹，深色背景下顏色就越淺，淺色模式下就會顏色越深乌企。

在使用設(shè)計(jì)師自己指定的顏色的時(shí)候虑润，要確保在兩種模式下的對比度都足夠強(qiáng)，如下圖點(diǎn)睛色指定了橙色加酵，黑暗模式下使用白色拳喻，淺色模式下使用黑色文字，則對比度必須要拉大猪腕，確保應(yīng)用的可讀性足夠好冗澈。

在下圖中，我們可以體會下黑色模式和淺色模式下陋葡，同一種顏色對于用戶視覺的影響亚亲，是不一樣的，要保證在兩種模式下都有更好的對比度和可讀性腐缤，需要設(shè)計(jì)師更嚴(yán)謹(jǐn)?shù)呐渖?/p>

image

柔化白色背景的顏色捌归。 如果您必須在暗模式下使用白色背景作為內(nèi)容，請選擇稍暗的白色岭粤，以防止背景對周圍的暗色內(nèi)容太刺眼惜索。比如可以為白色背景加一些透明度，這樣舒適性更好剃浇。

三巾兆、基本層與浮出層（Base & Elevated）

很多時(shí)候我們都會用到這樣的設(shè)計(jì)形式，比如在背景上方疊加一層具有陰影的模塊虎囚。這樣頁面就具有了3維的層次感角塑。比如下圖這樣：

image

但是在深色模式下，這種具有陰影的設(shè)計(jì)就失效了淘讥。所以圃伶，在深色模式下，我們就退而求其次适揉，直接使用比背景稍微淺一點(diǎn)的顏色作為浮層留攒，而不用考慮陰影了。

image

可以從下圖這個(gè)簡單的操作來理解基本層和浮出層嫉嘀。常規(guī)情況下炼邀，打開通訊錄，那么這個(gè)界面使用了純黑色背景剪侮，但是當(dāng)我們從電話應(yīng)用中打開這個(gè)聯(lián)系模塊時(shí)拭宁，此時(shí)它的背景色就成為了稍淺一點(diǎn)的顏色。

image

同樣瓣俯，在iPad的郵件應(yīng)用中杰标，側(cè)推彈層使用了稍淺一點(diǎn)的顏色作為背景色。

image

但是當(dāng)使用分屏模式的時(shí)候彩匕，左右兩側(cè)的設(shè)計(jì)都使用了浮層的顏色作為背景色腔剂。因此，在不同的情況下驼仪，浮出層的用法是不一樣的掸犬，這一點(diǎn)必須注意。

image

四绪爸、材質(zhì)（Materials）

通過下圖湾碎，我們可以理解，材質(zhì)主要可以理解為內(nèi)容區(qū)塊背景疊加到基礎(chǔ)色上所呈現(xiàn)的透明度奠货。如下圖所示介褥，有四種：Thick，Regular递惋，Thin柔滔，Ultrathin。透明度分別遞增丹墨。

image

在黑暗模式下同理

image

每種厚度的材質(zhì)廊遍，蘋果設(shè)計(jì)師都為我們提供了不同的配色方案。

image

對于設(shè)計(jì)師來說贩挣，我們不需要完全嚴(yán)格遵循這些色值喉前，只需要保證在不同厚度下的透明度能達(dá)到基本的對比度要求即可，比如右邊的兩個(gè)設(shè)計(jì)方案王财，可讀性就非常差卵迂。

image

五、控制條與導(dǎo)航欄（Control & Bars）

對于這些基礎(chǔ)的組件绒净，蘋果建議我們使用系統(tǒng)內(nèi)置的設(shè)計(jì)见咒，因?yàn)樗麄兌际褂昧苏Z義化的顏色，能更好的適配白色模式和深色模式挂疆。

而對于Bar來說改览，大的Title文字則得到了普及下翎，得益于手機(jī)屏幕的縱向長度提升，大的Title字體會讓頁面內(nèi)容更加醒目宝当，更加優(yōu)雅视事。

image

image

六、圖標(biāo)

一些長期保留直角的圖標(biāo)庆揩，在iOS 13中均改為圓角俐东，線條也得到了加粗。

image

眾所周知订晌，圣弗朗西斯科字體是蘋果內(nèi)置的英文字體虏辫，如今的圣弗朗西斯科字體內(nèi)置了1500多個(gè)符號（icon）。如果各位小伙伴對圖標(biāo)難以把握锈拨，或者想偷個(gè)懶砌庄，可以借助于SF字體中的符號來進(jìn)行設(shè)計(jì)，更加方便快捷奕枢。因?yàn)檫@些符號通過輸入法可以直接打出來鹤耍。

image

設(shè)計(jì)師可以根據(jù)文字的字重，選配對應(yīng)重量（粗細(xì)）的圖標(biāo)验辞。

image

除了重量外稿黄，Apple還針對每個(gè)圖標(biāo)提供了三種不同的尺寸：Small、Medium跌造、Large杆怕。

image

三種狀態(tài)下文字字號相同，圖標(biāo)尺寸不同壳贪。官方對上述三種尺寸給出了對應(yīng)的使用場景陵珍。

image

七、更清晰的字體

1违施、計(jì)算器

• 新的加粗字體的設(shè)計(jì)讓重要的信息更加突出互纯，整個(gè)iOS 13減少了細(xì)線字體的出現(xiàn)。
• 增強(qiáng)了字和背景的對比磕蒲，讓文字更容易識別留潦，特別注重?zé)o障礙設(shè)計(jì)。

image

2辣往、日歷

• 月份和日期都用了更粗的字體兔院，但仍然保持了清晰度。
• 更加突出重要的信息站削，從iOS 11開始日歷中的“年”和“月”是最突出的坊萝。而iOS 10卻只突出了日期。

image

八、更醒目的導(dǎo)航

1十偶、運(yùn)用大標(biāo)題

設(shè)置?面標(biāo)題使??字號; 導(dǎo)航欄增高菩鲜。讓用戶隨時(shí)都知道?己現(xiàn)在什么位置。但是當(dāng)用戶滾動頁面時(shí)則縮小導(dǎo)航整體比例惦积，因?yàn)榇藭r(shí)用戶更關(guān)注中間的內(nèi)容睦袖。

image

2、App store - 信息層級的改變

• 原來的整個(gè)App Store變成了現(xiàn)在的“App”標(biāo)簽欄荣刑，為了突出其他更能盈利、用戶更關(guān)注的信息伦乔。

• 把用戶評論數(shù)以及星級去掉厉亏，因?yàn)樘O果的排名本身就已經(jīng)說明了App的優(yōu)秀程度。

• 加粗了關(guān)鍵信息-價(jià)錢烈和、標(biāo)題爱只。

image

3、更清晰的圖標(biāo)

• 解鎖頁面 - 以實(shí)心按鈕取代線形按鈕招刹，這樣可以增強(qiáng)點(diǎn)擊感恬试。
• 鍵盤 - 用更寬的間距、淺淺的按鈕陰影來加強(qiáng)可點(diǎn)擊感疯暑。
• 以面性圖標(biāo)取代線性圖標(biāo)（因?yàn)槊嫘詧D標(biāo)更像實(shí)物實(shí)體是實(shí)心的為主训柴，圖標(biāo)也更顯穩(wěn)重。
• 涉及（線）的圖標(biāo)妇拯，加粗線條幻馁，使之看起來更像面性圖標(biāo)。
• phone越锈、App store仗嗦、photos的信息層級被重新設(shè)計(jì)。（例如App Store的標(biāo)簽欄為了突出其他更能盈利甘凭、?戶更關(guān)注的信息稀拐， 如游戲，現(xiàn)在就單獨(dú)成為了?個(gè)標(biāo)簽頁丹弱。然后將“Upates”盈利能力一般的信息入口移至右上角的個(gè)人中心）

image

九德撬、彈窗視圖

模態(tài)我們可以理解是一種彈層的形式，這種彈層具有強(qiáng)制性躲胳。它已經(jīng)存在很久砰逻，對于模態(tài)場景，大家不要亂用泛鸟，必須謹(jǐn)慎蝠咆。（靜電注）

在iOS 13之前，模態(tài)展示的視圖默認(rèn)是全屏（Fullscreen）。

iOS 13新增了一種操作視圖：操作的視圖會被縮小刚操，同時(shí)淡化置于新跳出視圖的下方闸翅。

這樣的彈窗視圖在Human Interface Guideline（蘋果設(shè)計(jì)指南）中被稱為Sheet。新版的視圖有助于用戶明確信息的層級菊霜，便于用戶找回此前被暫停的任務(wù)坚冀。

image

新版的視圖彈窗（Sheet）提供三種關(guān)閉方式：

• 從屏幕頂部向下滑動
• 當(dāng)卡片內(nèi)容滾動到頂部時(shí)，從屏幕上的任何位置向下滑動 （單手操作的）
• 點(diǎn)擊按鈕
• 如果關(guān)閉彈窗時(shí)存在“修改為儲存的內(nèi)容”這類行為時(shí)鉴逞，要提醒使用者是否要放棄編輯记某。
• 彈窗中的任務(wù)需要簡單、簡短构捡，避免過于復(fù)雜液南，導(dǎo)致用戶忘了此前他們所暫停的任務(wù)，進(jìn)而導(dǎo)致用戶“迷路”勾徽。以通訊錄為例：

image

• 對于拍照滑凉、錄像、照片編修喘帚、文件編輯等這類需要沉浸式畅姊、較復(fù)雜的使用場景，就適合維持過去全屏（Fullscreen）的呈現(xiàn)方式吹由。

image

十若未、消息通知

消息通知的目的是為了提升產(chǎn)品活躍度，激活休眠用戶使用產(chǎn)品倾鲫。

出現(xiàn)消息通知的場景有鎖屏陨瘩、使用中、通知中心级乍。其中交互類型分為“顯式推送”舌劳、“隱式推送”。視覺樣式分為“普通消息”玫荣、“詳情樣式”甚淡。

• iOS 消息通知的設(shè)計(jì)原則為“不打擾，不錯(cuò)過”
• 推送通知為了有效的提醒和保存用戶注意
• 重疊樣式則是為了減少用戶消耗時(shí)間而設(shè)
• 提供有用的捅厂、有意義的通知（通知不是為了引導(dǎo)用戶打開“你的應(yīng)用”在推送消息時(shí)要注意通知個(gè)性化贯卦。尤其是注重場景化，運(yùn)用智能算法推算出用戶使用app的契機(jī)焙贷，提供合適的推送）
• 即使用戶沒有作出回應(yīng)撵割，也不要為了同一件事情發(fā)送多個(gè)通知（推薦按應(yīng)用分組，也可以定制化分組）

image

image

• 明確告知用戶開啟通知權(quán)限的價(jià)值）辙芍。最好的請求權(quán)限應(yīng)在恰當(dāng)?shù)臅r(shí)候提出啡彬。如當(dāng)用戶完成新手引導(dǎo)后或登陸后羹与。開通權(quán)限后app提供描述性文字和聲音，以便在隱藏通知預(yù)覽時(shí)顯示庶灿。

image

• 考慮提供一個(gè)詳情視圖（包含圖片纵搁、視頻以及其它可動態(tài)更新的內(nèi)容，允許用戶可執(zhí)行快速的操作）

image

• 考慮提供一個(gè)詳情視圖（包含圖片往踢、視頻以及其它可動態(tài)更新的內(nèi)容腾誉，允許用戶可執(zhí)行快速的操作）
• 提供直觀、有用的操作（最多包含四個(gè)操作按鈕峻呕，用來執(zhí)行常用任務(wù)）盡可能的提供少操作按鈕利职，運(yùn)用席克定律幫助用戶作出選擇，減少用戶的思考避免焦慮瘦癌。
• 避免展示破壞性的操作（確保用戶有上下問猪贪，并用紅色字體顯示）。

image

image

• 畫出用戶旅程圖佩憾，找出消息推送切入點(diǎn)，幫助并提醒用戶重要信息干花，避免用戶在狀態(tài)變更后錯(cuò)過重要信息妄帘，及時(shí)告知用戶。

十一池凄、HapticTouch

在iOS 13中抡驼，Apple取消了 3DTouch（又名 Force Touch），改用了HapticTouch肿仑。

image

此前致盟，在支持3DTouch的機(jī)型上，輕輕長按桌面圖標(biāo)尤慰，圖標(biāo)會開始晃動馏锡，會進(jìn)入重新排列桌面的狀態(tài)。

而“重按”某個(gè)圖標(biāo)伟端，就可以通過3DTouch呼出菜單杯道。

在改用HapticTouch之后，原本的3DTouch也隨之取消责蝠，系統(tǒng)不再區(qū)分輕按和重按党巾。只能通過長按呼出菜單，“重新排列桌面”也變成了菜單中的一個(gè)選項(xiàng)霜医。

image

image

十二齿拂、情境菜單（Contextual Menu）

image

情景菜單類似于Peek（預(yù)覽）和Pop（彈出），但有兩個(gè)主要區(qū)別：情境菜單可在運(yùn)行iOS 13及更高版本的所有設(shè)備上使用肴敛；Peek和Pop僅適用于支持3D Touch的設(shè)備署海。 情境菜單立即顯示上下文相關(guān)的命令吗购；Peek和Pop需要向上滑動才能查看命令。 （請注意：iOS 13中 3D touch的交互方式與此情境菜單的交互邏輯不太一樣叹侄，情境菜單的交互方式是長按茎用，而不是重壓。

對于情境菜單的交互設(shè)計(jì)蹬挤，請遵循以下建議：

• 始終采用情境菜單： 如果您為某些地方的項(xiàng)目提供情境菜單而不是其它地方的項(xiàng)目伴奥，人們將不知道他們可以在哪里使用該功能，并且可能認(rèn)為您的應(yīng)用程序存在問題撒强。

• 僅包括適用于該項(xiàng)目的最常用命令：例如禽捆，在郵件消息的上下文菜單中，包含用于回復(fù)和移動郵件的命令是有意義的飘哨，但包含格式或郵箱命令沒有意義胚想。 列出太多命令可能會讓人無所適從。

• 使用子菜單來管理復(fù)雜性：子菜單是一個(gè)情境菜單項(xiàng)芽隆，顯示邏輯相關(guān)命令的二級菜單浊服。 為子菜單提供描述其內(nèi)容的直觀標(biāo)題，以便人們可以預(yù)測子菜單的命令而不會泄露它們胚吁。 簡潔牙躺，以行動為導(dǎo)向的標(biāo)題還允許人們跳過他們在當(dāng)前環(huán)境中不需要的子菜單。

• 將子菜單保持在一個(gè)級別：雖然子菜單可以縮短情境菜單并闡明人們可以執(zhí)行的命令腕扶，但是多個(gè)子菜單級別使得體驗(yàn)變得復(fù)雜并且人們難以導(dǎo)航孽拷。

• 將最常用的項(xiàng)目放在菜單的頂部：當(dāng)人們打開情境菜單時(shí)，他們的焦點(diǎn)位于該菜單的頂部區(qū)域半抱。 將最常見的項(xiàng)目放在菜單頂部可以幫助人們找到他們正在尋找的項(xiàng)目脓恕。

• 使用分隔符對相關(guān)菜單項(xiàng)進(jìn)行分組：創(chuàng)建可視分組可以幫助人們更快地掃描菜單。 例如窿侈，您可以使用分隔符對與編輯項(xiàng)目相關(guān)的操作進(jìn)行分組炼幔，使用另一個(gè)分隔符對與共享項(xiàng)目相關(guān)的操作進(jìn)行分組。 通常史简，不建議情境菜單中有三個(gè)以上的組江掩。

• 避免為同一項(xiàng)目提供情境菜單和編輯菜單： 當(dāng)人們?yōu)橥粋€(gè)項(xiàng)目啟用這兩個(gè)功能時(shí)，系統(tǒng)很難檢測到意圖乘瓤，這可能會讓人感到困惑环形。

避免提供打開項(xiàng)目預(yù)覽的操作按鈕： 人們可以點(diǎn)擊打開他們正在預(yù)覽的項(xiàng)目，因此通常不需要提供明確的“打開”按鈕衙傀。

十三抬吟、默認(rèn)頭像

在iOS 12系統(tǒng)中，“默認(rèn)頭像”都具有性別特征统抬。比如通訊錄的圖標(biāo)火本，就是由一男一女的剪影所組成危队。

在其他位置，比如：通訊錄詳情頁钙畔、短信列表茫陆、AppStore所用的默認(rèn)頭像均為“男性”剪影。

而在iOS 13中擎析，上述這些位置的頭像簿盅，都變成了去性別特征的圓形頭像。如下圖：

image

image

Apple沒有根據(jù)賬號性別顯示男/女頭像揍魂，而是采用“無性別頭像”桨醋。我想這么做也許是為了更好的照顧到“跨性別群體”的感受。

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”现斋、“特殊家庭”和“彩虹旗”等標(biāo)志喜最，這些眼下已出現(xiàn)在iOS 12.2的Emoji中。

image

十四庄蹋、開關(guān)（Switches）

自iOS 7發(fā)布以來瞬内，iOS的切換開關(guān)一直沒有變化。其特點(diǎn)是限书，開關(guān)的投影延展到了“凹槽”外虫蝶、且底色會有縮放動效。

時(shí)隔五年蔗包，蘋果對切換開關(guān)的細(xì)節(jié)做了調(diào)整秉扑。在最新的OS 13中慧邮，開關(guān)的投影縮到了“凹槽”內(nèi)调限，并且取消了底色縮放的過渡，改用“漸隱漸顯”的過渡方式误澳。

image

十五耻矮、分段控件

新版的分段控件由過去的描邊線，改為填充的形式忆谓。其中裆装，選中狀態(tài)的滑塊含投影，投影效果和切換開關(guān)一樣倡缠，投影只在“凹槽”內(nèi)哨免。

image

十六、音量調(diào)整視圖

在iOS12版本中昙沦，音量的調(diào)節(jié)圖標(biāo)是在屏幕中間顯示一個(gè)巨大的鈴鐺琢唾，鈴鐺下面會有音量大小的進(jìn)度條，嚴(yán)重干擾用戶視線盾饮。

image

iOS13的音量控制圖標(biāo)也進(jìn)行了全新的設(shè)計(jì)采桃，音量大小的圖標(biāo)被設(shè)計(jì)在了屏幕左側(cè)懒熙。在音量調(diào)節(jié)過程中，喇叭圖標(biāo)也非常直觀的顯示了音量大小的變化普办。

image

另外工扎，左側(cè)的音量可以支持滑動調(diào)整，類似底部控制器彈窗的音量調(diào)節(jié)衔蹲。

image

十七肢娘、三指菜單

在iOS 13中，只要用3個(gè)手指點(diǎn)擊屏幕踪危，就可以呼出一個(gè)全新的菜單蔬浙。用來完成：撤銷、剪切贞远、復(fù)制畴博、粘貼、重做這五個(gè)操作蓝仲。

值得一提的是俱病，Edit Menu依然存在，可以和三指菜單同時(shí)出現(xiàn)袱结。

image

本文部分內(nèi)容參考文檔

https://developer.apple.com/videos/play/wwdc2019/808/

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/