1. iOS 規(guī)范說明
目前，iOS 系統(tǒng)是我們設(shè)計新項目時默認(rèn)使用的系統(tǒng)。所以，我們首先要來認(rèn)識 iOS 相關(guān)的設(shè)計規(guī)范。
iOS 系統(tǒng)是一個比較整體、統(tǒng)一的平臺，它的更新比較緩慢、穩(wěn)定，很長時間才會在視覺上有大的更新。
在我們寫下這篇內(nèi)容的時候，iOS 已經(jīng)更新到了 15，這是一個比較值得強(qiáng)調(diào)版本。那就是蘋果從規(guī)范層面，徹底拋棄以 iPhone8 為代表的直角矩形屏幕設(shè)備，而全面投入使用圓角矩形的劉海屏。
并且，官方默認(rèn)建議使用的畫布尺寸寬，也從原本 iPhone X 的 375pt，更改成 iPhone13 的 390pt（影響很大）。
下面，我們就從界面的角度，來解釋下使用 iOS 規(guī)范首先要注意的事項。對于其它系統(tǒng)應(yīng)該注意的小細(xì)節(jié)和建議，
同時，也提前下載官方的最新設(shè)計組件庫，用于參考。鑒于官網(wǎng)經(jīng)常更新，實效性強(qiáng)，所以建議大家去官網(wǎng)下載，下面是對應(yīng)的網(wǎng)址和下載位置。
官網(wǎng)地址：https://developer.apple.com/design/resources/
狀態(tài)欄和指示器
官方組件庫中，最重要的兩個組件就是狀態(tài)欄 （Status Bar） 和指示器（Home Indicator）了，它們是 APP 中的常駐元素。雖然基礎(chǔ)，但很多設(shè)計師沒搞明白它們怎么用。
除了游戲、視頻等少數(shù)全屏場景，狀態(tài)欄和首頁指示器都會覆蓋在界面的最上層，且懸浮固定。且它們各自都有一個透明的操作區(qū)域，在設(shè)計時不能將可操作的按鈕置于操作區(qū)域之中，會造成一定的沖突。
UI 設(shè)計創(chuàng)建畫布后，第一件事就應(yīng)該是從官方組件庫將這兩個元素置入畫布中，進(jìn)行居中和頂/底部對齊。切記要考慮它們背景元素的色彩，確保兩個控件能被正常顯示。
置入這兩個基礎(chǔ)元素以后，第二件事，就是確定頁面的內(nèi)邊距了。最早官方推薦左右頁邊距是 15pt，大概在 iOS13 以后，則變更為 16pt 延續(xù)至今。
頁邊距也只是一個規(guī)范建議，沒有強(qiáng)制性？梢愿鶕(jù)項目的實際情況自己決定，如果沒有必要的原因或者把握，就盡量使用 16pt 即可。
頭部標(biāo)題欄
第二個關(guān)注的要素，叫頭部標(biāo)題欄（Navigation Bar），直譯叫 “導(dǎo)航欄”，但因為英文中加了 tion 結(jié)尾這個導(dǎo)航是帶有信標(biāo)意思的名字，而不是我們中文常規(guī)語境下的動詞，所以我們一直使用使用頭部標(biāo)題欄來稱呼它。
官方雖然給我們提供了好幾種頭部標(biāo)題，但不是我們必須從中挑選一個出來用的，同樣可以自定義。在 iOS11 以后，推出了包含大標(biāo)題模式的標(biāo)題欄，但這個樣式是針對英文場景設(shè)計的，中文標(biāo)題的適用性非常差，所以你很難看到國內(nèi)主流應(yīng)用使用。
正常情況下，在一級或特殊頁面會使用自定義的頂部樣式，在二級和一般頁面，會使用最普通的標(biāo)題居中、左側(cè)帶返回的官方標(biāo)題欄。該標(biāo)題欄高度 44pt，左右的圖標(biāo)都支持我們進(jìn)行添加和更換。
底部導(dǎo)航欄
底部的導(dǎo)航欄（Tab Bar）也是我們設(shè)計中最常用的組件元素之一，很多翻譯會把它叫做 “標(biāo)簽欄”，但我們一直反對這種叫法。因為 UI 元素還有 “Tag” 和 “Tag Bar” 這種真正的標(biāo)簽欄，用此就會混亂。
而且，底部導(dǎo)航的語義對應(yīng)網(wǎng)頁中的導(dǎo)航和安卓側(cè)邊導(dǎo)航，確保我們?nèi)脚_用詞的一致性！
官方規(guī)范中，底部導(dǎo)航總高 83pt，下方有個空白區(qū)域是用來放底部指示器的，導(dǎo)航可點擊區(qū)域?qū)嶋H高為 49pt。設(shè)計過程中，貫穿到底部的背景是必要的，不能直接去掉讓底部指示器處于懸空狀態(tài)。
底部導(dǎo)航的數(shù)量，常規(guī)是 3-5 個最佳，如果使用官方組件樣式，我們要做的就是置入該組件，然后替換對應(yīng)的圖標(biāo)、文字、色彩即可。
如果官方組件不能滿足的，也完全可以在這個基礎(chǔ)上做調(diào)整，保持主要參數(shù)一致的情況下增加額外的細(xì)節(jié)，比如中間的放大的添加、拍照按鈕；蛘撸瑑蓚(cè)不撐滿，制作懸浮的底部導(dǎo)航欄（這時候可以不考慮底部指示器）。
iOS 中的列表菜單
列表菜單也是我們設(shè)計中常用的元素之一，在官方組件中，主要包含兩種類型，一種左右通欄模式，另一種卡片模式。其中行與行之間的分割線左側(cè)會預(yù)留一個頁面那邊距的空缺出來。
這類列表有比較自由的編輯方式，單行默認(rèn)高度是 44，可以根據(jù)我們的設(shè)計風(fēng)格調(diào)整。同時，左側(cè)可以添加圖標(biāo)，右側(cè)也不一定只有箭頭。
各類提示、彈窗
官方提供的提示總類、彈窗總類非常的豐富。不同的提示應(yīng)用在不同的場景中，比如進(jìn)行確認(rèn)、單選、多選、填寫信息等。
如果項目沒有特殊的要求，且開發(fā)資源比較緊張（項目時間短），我們就可以在項目中直接使用這些提醒和彈窗完成對應(yīng)的流程設(shè)計。這么做的好處，不僅是設(shè)計效率高，開發(fā)在實現(xiàn)前端頁面的時候可以直接調(diào)用官方的樣式不用自己再寫一遍（簡單理解成就是更快了）。
雖然多數(shù)彈窗支持我們自定義更改，但有些彈窗類型是系統(tǒng)級規(guī)范。比如 ID 驗證流程，當(dāng)系統(tǒng)彈出這個彈窗的時候，是不允許開發(fā)者染指的，版本啥樣顯示啥樣，必須從官方組件庫里獲取。
其它基礎(chǔ)控件
除了上面這些，其它的一些基礎(chǔ)的控件可以自己查看官方的組件庫進(jìn)行熟悉。在我們的項目設(shè)計過程中，涉及到能用官方原生控件解決的操作，就盡量使用原生的控件，而避免自己設(shè)計。
這么做的主要目的不是讓視覺樣式和官方統(tǒng)一，也是為了讓項目效率更進(jìn)一步提升。比如日期選擇期，就是一個無論是設(shè)計還是開發(fā)都非常麻煩的元素。
前面提到的組件控件元素理解了，就應(yīng)該知道官方的規(guī)范是非常有 “彈性” 的。
我們了解視覺規(guī)范的主要目的除了知道少數(shù)必須使用官方樣式的元素外，還提供了哪些可以快速 “復(fù)制”、“黏貼” 的元素。讓我們用盡可能高效、簡單的方式完成頁面的設(shè)計。
規(guī)范不是讓你 —— 必須做什么，而是給你建議 —— 可以做什么。
2. iOS 夜間模式
接著我們就要來討論一下 iOS 的夜間模式了，新手對它也存在較多認(rèn)知誤區(qū)。
夜間模式是 iOS13 推出的一個全新模式，讓系統(tǒng)可以進(jìn)行亮色和深色模式的切換。
這里要強(qiáng)調(diào)一點，模式的切換只是系統(tǒng)的一個狀態(tài)，它會直接影響所有蘋果官方應(yīng)用和系統(tǒng)元素，也會告知你啟動的應(yīng)用系統(tǒng)現(xiàn)在切換成了深色模式（對應(yīng) API）。
但是，應(yīng)用可以自己選擇要不要響應(yīng)系統(tǒng)的色彩模式，或者干脆就沒有提供兩種色彩模式，那么深色模式切換對該應(yīng)用就不會產(chǎn)生作用。
規(guī)范中的深色模式，就是介紹官方應(yīng)用深色模式的設(shè)計思路、細(xì)節(jié)，幫助我們來建立自己的深色模式（一些特殊的原因，國內(nèi) APP 適配深色都要自己另外輸出一個版本）。
彩色色相的應(yīng)用
首先，深色模式的變更不是只有背景色變化和文字改成白色，而是多數(shù)顏色都會發(fā)生一定程度的調(diào)整。因為彩色色相在純白和純黑模式下，視覺感受是不同的。
比如，下圖是同一個紅色在純黑和純白中的背景：
這個案例，則是前后應(yīng)用了兩種不同紅色產(chǎn)生的效果：
所以，蘋果為了統(tǒng)一這種視覺的落差，強(qiáng)調(diào)了深色模式下彩色明度會更高，并給出了對應(yīng)的案例。
灰色色相的應(yīng)用
然后，就是灰色色相的應(yīng)用，自然兩種模式下也是有不同的。
但是，灰色應(yīng)用的場景就多起來了，首先是背景色應(yīng)用。蘋果對卡片層級的建議是最多三層（不樣套娃），淺色模式下，用白、灰、白的模式做區(qū)分，而深色模式下，則給了三個不同的灰度。
灰色文字在深色模式下，使用白色的透明度來完成，包含了 4 個層級。當(dāng)然，如果有必要我們也可以增加更多的出來。
以及，淺色模式中我們會使用投影，投影主要以黑色透明度為主。但是，我們肯定不能在黑色模式下再用黑色投影了，也不可能用白色透明度對吧！所以，深色模式也會去掉投影樣式，只使用純色背景做區(qū)分。
材質(zhì)卡片
iOS 有系統(tǒng)自帶的毛玻璃效果，也就是我們軟件中的背景模糊效果（Background Blur），這種效果根據(jù)透明度劃分了 4 個層級。
在淺色模式下，毛玻璃使用的是白色卡片進(jìn)行背景模糊，而在深色模式下，使用的就是黑色的卡片進(jìn)行背景模糊。
毛玻璃效果會應(yīng)用在非常多的場景，當(dāng)我們需要應(yīng)用這種材質(zhì)的時候，不要去硬背背后的參數(shù)，直接找到官方組件，通過復(fù)制該卡片的樣式，再黏貼到你想要的元素上即可。
深色規(guī)范提供了一系列的設(shè)計思路，不是讓我們直接套用，而是作為參考讓我們更好的完成應(yīng)用的深色版本設(shè)計。
值得一提的是，如果你的界面，從最開始就完全是深色風(fēng)格的設(shè)計，那么自然不需要考慮深色模式，淺色和深色系統(tǒng)環(huán)境下都只是一套界面。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。